shumengya/mengyakeyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: sync project updates

Browse Source
This commit is contained in:
root
2026-03-11 21:15:06 +08:00
parent 5a56af2ce8
commit f1b4dfc44e
35 changed files with 20688 additions and 20031 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
build_frontend.bat
View File

@@ -7,4 +7,3 @@ if not exist node_modules (
call npm install call npm install
) )
npm run build npm run build
echo 构建完成！输出目录：mengyakeyvault-frontend\build

14
mengyakeyvault-backend/main.go
View File

@@ -29,13 +29,12 @@ func init() {
type PasswordEntry struct { type PasswordEntry struct {
ID int `json:"id"` ID int `json:"id"`
AccountType string `json:"accountType"` // 账号类型（网站/软件）
Account string `json:"account"` // 账号 Account string `json:"account"` // 账号
Password string `json:"password"` // 密码 Password string `json:"password"` // 密码
Username string `json:"username"` // 用户名 Username string `json:"username"` // 用户名
Phone string `json:"phone"` // 手机号 Phone string `json:"phone"` // 手机号
Email string `json:"email"` // 邮箱 Email string `json:"email"` // 邮箱
Website string `json:"website"` // 网站地址 Website string `json:"website"` // 网站地址
OfficialName string `json:"officialName"` // 官方名称（必填） OfficialName string `json:"officialName"` // 官方名称（必填）
Tags string `json:"tags"` // 标签 Tags string `json:"tags"` // 标签
Logo string `json:"logo"` // Logo图标URL Logo string `json:"logo"` // Logo图标URL
@@ -122,8 +121,7 @@ func getEntries(c *gin.Context) {
keyword = strings.ToLower(keyword) keyword = strings.ToLower(keyword)
var results []PasswordEntry var results []PasswordEntry
for _, entry := range store.Entries { for _, entry := range store.Entries {
if strings.Contains(strings.ToLower(entry.AccountType), keyword) || if strings.Contains(strings.ToLower(entry.Account), keyword) ||
strings.Contains(strings.ToLower(entry.Account), keyword) ||
strings.Contains(strings.ToLower(entry.Username), keyword) || strings.Contains(strings.ToLower(entry.Username), keyword) ||
strings.Contains(strings.ToLower(entry.Email), keyword) || strings.Contains(strings.ToLower(entry.Email), keyword) ||
strings.Contains(strings.ToLower(entry.Website), keyword) || strings.Contains(strings.ToLower(entry.Website), keyword) ||
@@ -148,10 +146,6 @@ func addEntry(c *gin.Context) {
c.JSON(http.StatusBadRequest, gin.H{"error": "官方名称不能为空"}) c.JSON(http.StatusBadRequest, gin.H{"error": "官方名称不能为空"})
return return
} }
if entry.AccountType != "网站" && entry.AccountType != "软件" {
c.JSON(http.StatusBadRequest, gin.H{"error": "账号类型必须是'网站'或'软件'"})
return
}
store.mu.Lock() store.mu.Lock()
// 生成新ID // 生成新ID
@@ -185,10 +179,6 @@ func updateEntry(c *gin.Context) {
c.JSON(http.StatusBadRequest, gin.H{"error": "官方名称不能为空"}) c.JSON(http.StatusBadRequest, gin.H{"error": "官方名称不能为空"})
return return
} }
if entry.AccountType != "网站" && entry.AccountType != "软件" {
c.JSON(http.StatusBadRequest, gin.H{"error": "账号类型必须是'网站'或'软件'"})
return
}
store.mu.Lock() store.mu.Lock()
found := false found := false

41
mengyakeyvault-frontend/public/index.html
View File

@@ -2,11 +2,46 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<!-- 图标 -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#90EE90" />
<meta name="description" content="萌芽密码管理器" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
<!-- 视口 & 主题色 -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#4caf50" />
<!-- SEO & 描述 -->
<meta name="description" content="萌芽密码管理器 - 安全、便捷的个人密码管理工具" />
<meta name="keywords" content="密码管理器,密码,安全,萌芽" />
<meta name="author" content="萌芽密码管理器" />
<!-- PWA: Manifest -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- iOS PWA 支持 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="萌芽密码" />
<!-- Android PWA / Chrome -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="application-name" content="萌芽密码" />
<!-- Windows 磁贴 -->
<meta name="msapplication-TileColor" content="#4caf50" />
<meta name="msapplication-TileImage" content="%PUBLIC_URL%/logo.png" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- 禁止自动识别电话号码 -->
<meta name="format-detection" content="telephone=no" />
<!-- Open Graph -->
<meta property="og:title" content="萌芽密码管理器" />
<meta property="og:description" content="安全、便捷的个人密码管理工具" />
<meta property="og:image" content="%PUBLIC_URL%/logo.png" />
<meta property="og:type" content="website" />
<title>萌芽密码管理器</title> <title>萌芽密码管理器</title>
</head> </head>
<body> <body>

34
mengyakeyvault-frontend/public/manifest.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "萌芽密码管理器",
"short_name": "萌芽密码",
"description": "安全、便捷的个人密码管理工具",
"start_url": "/",
"display": "standalone",
"orientation": "any",
"background_color": "#f0fdf0",
"theme_color": "#4caf50",
"lang": "zh-CN",
"scope": "/",
"icons": [
{
"src": "/favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "/logo.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/logo.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"categories": ["productivity", "utilities"],
"screenshots": [],
"prefer_related_applications": false
}

53
mengyakeyvault-frontend/public/offline.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#4caf50" />
<title>离线 - 萌芽密码管理器</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #f0fdf0 0%, #e8f5e9 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
}
.container {
background: rgba(255,255,255,0.95);
border-radius: 24px;
padding: 48px 40px;
box-shadow: 0 8px 32px rgba(76,175,80,0.15);
max-width: 400px;
width: 100%;
}
.icon { font-size: 64px; margin-bottom: 24px; }
h1 { font-size: 22px; color: #1b5e20; margin-bottom: 12px; font-weight: 700; }
p { font-size: 15px; color: #666; line-height: 1.6; margin-bottom: 24px; }
button {
background: linear-gradient(135deg, #66bb6a, #4caf50);
color: #fff;
border: none;
border-radius: 12px;
padding: 12px 28px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(76,175,80,0.4); }
</style>
</head>
<body>
<div class="container">
<div class="icon">🌱</div>
<h1>当前处于离线状态</h1>
<p>无法连接到网络，请检查您的网络连接后重试。<br>已缓存的数据仍可查看。</p>
<button onclick="window.location.reload()">重新连接</button>
</div>
</body>
</html>

146
mengyakeyvault-frontend/public/service-worker.js Normal file
View File

@@ -0,0 +1,146 @@
/* =====================================================
* 萌芽密码管理器 Service Worker
* 策略：
* - 静态资源（Shell）: Cache First（优先缓存）
* - API 请求: Network First（优先网络，失败时返回离线页）
* - 导航请求: Network First → 回退到缓存的 index.html
* ===================================================== */
const CACHE_NAME = 'mengyakeyvault-v1';
const OFFLINE_URL = '/offline.html';
// 预缓存的应用 Shell 资源
const PRECACHE_URLS = [
'/',
'/index.html',
'/offline.html',
'/manifest.json',
'/favicon.ico',
'/logo.png',
];
// ── Install ──────────────────────────────────────────
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(PRECACHE_URLS).catch((err) => {
console.warn('[SW] 预缓存部分资源失败:', err);
});
})
);
// 强制新 SW 立即激活，不等旧 SW 退出
self.skipWaiting();
});
// ── Activate ─────────────────────────────────────────
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames
.filter((name) => name !== CACHE_NAME)
.map((name) => caches.delete(name))
);
})
);
// 立即接管所有页面
self.clients.claim();
});
// ── Fetch ─────────────────────────────────────────────
self.addEventListener('fetch', (event) => {
const { request } = event;
const url = new URL(request.url);
// 只处理 http/https，忽略 chrome-extension 等
if (!url.protocol.startsWith('http')) return;
// API 请求：Network First
if (url.pathname.startsWith('/api') || url.hostname.includes('keyvault.api')) {
event.respondWith(networkFirst(request));
return;
}
// 第三方资源（favicon API 等）：Network First，不缓存
if (url.hostname !== self.location.hostname) {
event.respondWith(networkOnly(request));
return;
}
// 导航请求（HTML页面）：Network First → 回退 index.html
if (request.mode === 'navigate') {
event.respondWith(navigationHandler(request));
return;
}
// 静态资源（JS/CSS/图片等）：Cache First
event.respondWith(cacheFirst(request));
});
// ── 策略函数 ──────────────────────────────────────────
// Cache First：先查缓存，没有再请求网络并写入缓存
async function cacheFirst(request) {
const cached = await caches.match(request);
if (cached) return cached;
try {
const response = await fetch(request);
if (response.ok) {
const cache = await caches.open(CACHE_NAME);
cache.put(request, response.clone());
}
return response;
} catch {
return new Response('资源暂时无法访问', { status: 503 });
}
}
// Network First：先请求网络，失败时查缓存
async function networkFirst(request) {
try {
const response = await fetch(request);
if (response.ok) {
const cache = await caches.open(CACHE_NAME);
cache.put(request, response.clone());
}
return response;
} catch {
const cached = await caches.match(request);
return cached || new Response(
JSON.stringify({ error: '网络不可用，请检查连接' }),
{ status: 503, headers: { 'Content-Type': 'application/json' } }
);
}
}
// Network Only：仅网络，不缓存
async function networkOnly(request) {
try {
return await fetch(request);
} catch {
return new Response('', { status: 503 });
}
}
// 导航处理：Network First → 回退缓存的 index.html
async function navigationHandler(request) {
try {
const response = await fetch(request);
if (response.ok) {
const cache = await caches.open(CACHE_NAME);
cache.put(request, response.clone());
}
return response;
} catch {
const cached = await caches.match('/index.html');
if (cached) return cached;
return caches.match(OFFLINE_URL);
}
}
// ── 消息处理（支持主线程主动触发更新）──────────────────
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
});

15
mengyakeyvault-frontend/src/components/PasswordForm.js
View File

@@ -3,7 +3,6 @@ import './PasswordForm.css';
const PasswordForm = ({ entry, onSave, onCancel }) => { const PasswordForm = ({ entry, onSave, onCancel }) => {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
accountType: '网站',
account: '', account: '',
password: '', password: '',
username: '', username: '',
@@ -28,7 +27,6 @@ const PasswordForm = ({ entry, onSave, onCancel }) => {
useEffect(() => { useEffect(() => {
if (entry) { if (entry) {
setFormData({ setFormData({
accountType: entry.accountType || '网站',
account: entry.account || '', account: entry.account || '',
password: entry.password || '', password: entry.password || '',
username: entry.username || '', username: entry.username || '',
@@ -135,19 +133,6 @@ const PasswordForm = ({ entry, onSave, onCancel }) => {
required required
/> />
</div> </div>
<div className="form-group">
<label>账号类型 *</label>
<select
name="accountType"
value={formData.accountType}
onChange={handleChange}
className="form-select"
required
>
<option value="网站">网站</option>
<option value="软件">软件</option>
</select>
</div>
</div> </div>
<div className="form-row"> <div className="form-row">

94
mengyakeyvault-frontend/src/components/PasswordList.css
View File

@@ -347,23 +347,105 @@
/* 卡片底部标签 */ /* 卡片底部标签 */
.card-tags { .card-tags {
margin-top: 10px; margin-top: 10px;
padding-top: 10px; padding: 6px 10px;
border-top: 1px solid rgba(232, 245, 233, 0.6); border-top: 1px solid rgba(232, 245, 233, 0.6);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 11px;
color: #4caf50;
background: linear-gradient(135deg, rgba(200, 230, 201, 0.3) 0%, rgba(165, 214, 167, 0.2) 100%); background: linear-gradient(135deg, rgba(200, 230, 201, 0.3) 0%, rgba(165, 214, 167, 0.2) 100%);
padding: 6px 10px;
border-radius: 8px; border-radius: 8px;
}
.card-tag {
display: inline-block;
background: rgba(76, 175, 80, 0.12);
border: 1px solid rgba(76, 175, 80, 0.25);
color: #4caf50;
font-size: 11px;
font-weight: 600; font-weight: 600;
overflow: hidden; padding: 2px 8px;
text-overflow: ellipsis; border-radius: 10px;
white-space: nowrap; white-space: nowrap;
} }
/* ===== 分页 ===== */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 16px 0 30px;
flex-wrap: wrap;
}
.page-btn {
min-width: 36px;
height: 36px;
padding: 0 10px;
border: 1px solid rgba(76, 175, 80, 0.3);
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
color: #4caf50;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.page-btn:hover:not(:disabled) {
background: rgba(76, 175, 80, 0.12);
border-color: #4caf50;
transform: translateY(-1px);
}
.page-btn.active {
background: linear-gradient(135deg, #66bb6a, #4caf50);
color: #fff;
border-color: #4caf50;
box-shadow: 0 3px 10px rgba(76, 175, 80, 0.35);
}
.page-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.page-ellipsis {
color: #aaa;
font-size: 14px;
padding: 0 4px;
}
.page-info {
font-size: 12px;
color: #888;
margin-left: 8px;
white-space: nowrap;
}
@media (max-width: 768px) {
.pagination {
gap: 4px;
margin: 12px 0 20px;
}
.page-btn {
min-width: 32px;
height: 32px;
font-size: 13px;
padding: 0 8px;
}
.page-info {
width: 100%;
text-align: center;
margin-left: 0;
margin-top: 4px;
}
}
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 80px 20px; padding: 80px 20px;

89
mengyakeyvault-frontend/src/components/PasswordList.js
View File

@@ -45,16 +45,41 @@ const EmptyIcon = () => (
</svg> </svg>
); );
// 判断是否为手机端
const useIsMobile = () => {
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
useEffect(() => {
const handler = () => setIsMobile(window.innerWidth <= 768);
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler);
}, []);
return isMobile;
};
const PasswordList = ({ entries, onEdit, onDelete }) => { const PasswordList = ({ entries, onEdit, onDelete }) => {
const [copiedId, setCopiedId] = useState(null); const [copiedId, setCopiedId] = useState(null);
const [logoCache, setLogoCache] = useState({}); const [logoCache, setLogoCache] = useState({});
const [currentPage, setCurrentPage] = useState(1);
const isMobile = useIsMobile();
// 每页条数：手机端 3行×2列=6，电脑端 2行×5列=10
const pageSize = isMobile ? 6 : 10;
const totalPages = Math.ceil(entries.length / pageSize);
// entries 变化时重置到第一页
useEffect(() => {
setCurrentPage(1);
}, [entries]);
const pagedEntries = entries.slice((currentPage - 1) * pageSize, currentPage * pageSize);
// 获取网站favicon // 获取网站favicon
const getWebsiteFavicon = (url) => { const getWebsiteFavicon = (url) => {
if (!url) return null; if (!url) return null;
try { try {
const urlObj = new URL(url); const urlObj = new URL(url);
return `${urlObj.protocol}//${urlObj.host}/favicon.ico`; const domain = urlObj.host;
return `https://cf-favicon.pages.dev/api/favicon?url=${domain}`;
} catch { } catch {
return null; return null;
} }
@@ -67,8 +92,8 @@ const PasswordList = ({ entries, onEdit, onDelete }) => {
return entry.logo; return entry.logo;
} }
// 如果是网站类型，尝试获取favicon // 如果有网站地址，尝试获取favicon
if (entry.accountType === '网站' && entry.website) { if (entry.website) {
const faviconUrl = getWebsiteFavicon(entry.website); const faviconUrl = getWebsiteFavicon(entry.website);
if (faviconUrl) { if (faviconUrl) {
return faviconUrl; return faviconUrl;
@@ -124,8 +149,9 @@ const PasswordList = ({ entries, onEdit, onDelete }) => {
} }
return ( return (
<>
<div className="password-list"> <div className="password-list">
{entries.map((entry) => { {pagedEntries.map((entry) => {
const logoUrl = getLogoUrl(entry); const logoUrl = getLogoUrl(entry);
return ( return (
<div key={entry.id} className="password-card"> <div key={entry.id} className="password-card">
@@ -145,7 +171,6 @@ const PasswordList = ({ entries, onEdit, onDelete }) => {
<div className="card-title-row"> <div className="card-title-row">
<div className="card-title"> <div className="card-title">
<span className="card-type">{entry.officialName || entry.software || '未命名'}</span> <span className="card-type">{entry.officialName || entry.software || '未命名'}</span>
<span className="card-account-type">{entry.accountType || '未分类'}</span>
</div> </div>
<div className="card-actions"> <div className="card-actions">
<button <button
@@ -223,13 +248,65 @@ const PasswordList = ({ entries, onEdit, onDelete }) => {
</div> </div>
{entry.tags && ( {entry.tags && (
<div className="card-tags"> <div className="card-tags">
{entry.tags} {entry.tags.split(',').map((tag, idx) => (
<span key={idx} className="card-tag">{tag.trim()}</span>
))}
</div> </div>
)} )}
</div> </div>
); );
})} })}
</div> </div>
{totalPages > 1 && (
<div className="pagination">
<button
className="page-btn"
onClick={() => setCurrentPage(1)}
disabled={currentPage === 1}
title="第一页"
>«</button>
<button
className="page-btn"
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
disabled={currentPage === 1}
title="上一页"
>‹</button>
{Array.from({ length: totalPages }, (_, i) => i + 1)
.filter(p => p === 1 || p === totalPages || Math.abs(p - currentPage) <= 2)
.reduce((acc, p, idx, arr) => {
if (idx > 0 && p - arr[idx - 1] > 1) acc.push('...');
acc.push(p);
return acc;
}, [])
.map((p, idx) =>
p === '...'
? <span key={`ellipsis-${idx}`} className="page-ellipsis">…</span>
: <button
key={p}
className={`page-btn${currentPage === p ? ' active' : ''}`}
onClick={() => setCurrentPage(p)}
>{p}</button>
)
}
<button
className="page-btn"
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
disabled={currentPage === totalPages}
title="下一页"
>›</button>
<button
className="page-btn"
onClick={() => setCurrentPage(totalPages)}
disabled={currentPage === totalPages}
title="最后一页"
>»</button>
<span className="page-info">{currentPage} / {totalPages} 页 · 共 {entries.length} 条</span>
</div>
)}
</>
); );
}; };

74
mengyakeyvault-frontend/src/components/PasswordManager.css
View File

@@ -5,6 +5,80 @@
margin: 0 auto; margin: 0 auto;
} }
/* ===== PWA 安装横幅 ===== */
.pwa-install-banner {
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, rgba(232, 245, 233, 0.98), rgba(200, 230, 201, 0.95));
border: 1px solid rgba(76, 175, 80, 0.3);
border-radius: 12px;
padding: 12px 16px;
margin: -20px -20px 20px -20px;
box-shadow: 0 2px 10px rgba(76, 175, 80, 0.15);
flex-wrap: wrap;
}
.pwa-banner-icon {
font-size: 20px;
flex-shrink: 0;
}
.pwa-banner-text {
flex: 1;
font-size: 14px;
color: #2e7d32;
font-weight: 500;
min-width: 160px;
}
.pwa-install-btn {
background: linear-gradient(135deg, #66bb6a, #4caf50);
color: #fff;
border: none;
border-radius: 8px;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.pwa-install-btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(76, 175, 80, 0.4);
}
.pwa-dismiss-btn {
background: transparent;
border: none;
color: #888;
font-size: 16px;
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
transition: all 0.2s;
flex-shrink: 0;
}
.pwa-dismiss-btn:hover {
background: rgba(0, 0, 0, 0.08);
color: #333;
}
@media (max-width: 768px) {
.pwa-install-banner {
margin: -15px -15px 16px -15px;
border-radius: 0;
padding: 10px 14px;
gap: 8px;
}
.pwa-banner-text {
font-size: 13px;
}
}
/* 大屏幕容器宽度控制 */ /* 大屏幕容器宽度控制 */
@media (min-width: 1600px) { @media (min-width: 1600px) {
.password-manager { .password-manager {

35
mengyakeyvault-frontend/src/components/PasswordManager.js
View File

@@ -19,6 +19,10 @@ const PasswordManager = () => {
const [showForm, setShowForm] = useState(false); const [showForm, setShowForm] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
// PWA 安装提示
const [installPrompt, setInstallPrompt] = useState(null);
const [showInstallBanner, setShowInstallBanner] = useState(false);
useEffect(() => { useEffect(() => {
loadEntries(); loadEntries();
}, []); }, []);
@@ -27,6 +31,27 @@ const PasswordManager = () => {
filterEntries(); filterEntries();
}, [searchKeyword, entries]); }, [searchKeyword, entries]);
// 监听 PWA 安装事件
useEffect(() => {
const handler = (e) => {
e.preventDefault();
setInstallPrompt(e);
setShowInstallBanner(true);
};
window.addEventListener('beforeinstallprompt', handler);
return () => window.removeEventListener('beforeinstallprompt', handler);
}, []);
const handleInstall = async () => {
if (!installPrompt) return;
installPrompt.prompt();
const { outcome } = await installPrompt.userChoice;
if (outcome === 'accepted') {
setShowInstallBanner(false);
setInstallPrompt(null);
}
};
const loadEntries = async () => { const loadEntries = async () => {
try { try {
setLoading(true); setLoading(true);
@@ -47,7 +72,6 @@ const PasswordManager = () => {
const keyword = searchKeyword.toLowerCase(); const keyword = searchKeyword.toLowerCase();
const filtered = entries.filter(entry => const filtered = entries.filter(entry =>
entry.accountType?.toLowerCase().includes(keyword) ||
entry.account?.toLowerCase().includes(keyword) || entry.account?.toLowerCase().includes(keyword) ||
entry.username?.toLowerCase().includes(keyword) || entry.username?.toLowerCase().includes(keyword) ||
entry.email?.toLowerCase().includes(keyword) || entry.email?.toLowerCase().includes(keyword) ||
@@ -114,6 +138,15 @@ const PasswordManager = () => {
return ( return (
<div className="password-manager"> <div className="password-manager">
{/* PWA 安装横幅 */}
{showInstallBanner && (
<div className="pwa-install-banner">
<span className="pwa-banner-icon">🌱</span>
<span className="pwa-banner-text">将萌芽密码添加到桌面，随时快速访问</span>
<button className="pwa-install-btn" onClick={handleInstall}>添加到桌面</button>
<button className="pwa-dismiss-btn" onClick={() => setShowInstallBanner(false)}>✕</button>
</div>
)}
<nav className="manager-nav"> <nav className="manager-nav">
<div className="nav-content"> <div className="nav-content">
<img <img

17
mengyakeyvault-frontend/src/index.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
@@ -9,3 +10,19 @@ root.render(
<App /> <App />
</React.StrictMode> </React.StrictMode>
); );
// 注册 Service Worker，启用 PWA 离线缓存能力
serviceWorkerRegistration.register({
onSuccess: () => {
console.log('[PWA] 应用已缓存，可离线使用');
},
onUpdate: (registration) => {
// 发现新版本时，提示用户刷新
if (window.confirm('🌱 萌芽密码管理器有新版本，是否立即刷新？')) {
if (registration && registration.waiting) {
registration.waiting.postMessage({ type: 'SKIP_WAITING' });
}
window.location.reload();
}
},
});

88
mengyakeyvault-frontend/src/serviceWorkerRegistration.js Normal file
View File

@@ -0,0 +1,88 @@
/**
* Service Worker 注册与生命周期管理
*/
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
window.location.hostname === '[::1]' ||
window.location.hostname.match(/^127(?:\.\d+){0,2}\.\d+$/)
);
export function register(config) {
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
checkValidServiceWorker(swUrl, config);
navigator.serviceWorker.ready.then(() => {
console.log('[PWA] 本地开发环境：Service Worker 已就绪');
});
} else {
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then((registration) => {
// 检测到新版本
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (!installingWorker) return;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// 有新版本可用
console.log('[PWA] 新版本已缓存，刷新后生效');
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// 首次安装，内容已缓存
console.log('[PWA] 内容已缓存，可离线使用');
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch((error) => {
console.error('[PWA] Service Worker 注册失败:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
fetch(swUrl, { headers: { 'Service-Worker': 'script' } })
.then((response) => {
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// 未找到 SW，卸载并刷新
navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => window.location.reload());
});
} else {
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log('[PWA] 无网络连接，应用以离线模式运行');
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
.then((registration) => registration.unregister())
.catch((error) => console.error(error.message));
}
}

44
初始化项目Git配置.md Normal file
View File

@@ -0,0 +1,44 @@
# 初始化项目Git配置
请按照以下步骤初始化Git仓库并上传到我的Gitea服务器：
## 步骤
1. **初始化Git仓库**
```bash
git init
```
2. **创建main分支**
```bash
git checkout -b main
```
3. **创建.gitignore文件**，忽略不必要的内容：
- Node/React: node_modules/, build/, coverage/
- Go: *.exe, *.test, *.out, *.dll, *.so, *.dylib
- 数据文件: data/data.json
- 日志: *.log
- 操作系统: .DS_Store, Thumbs.db
4. **添加所有代码文件并提交**
```bash
git add .
git commit -m "first commit"
```
5. **添加Gitea远程仓库**
```bash
git remote add gitea ssh://git@repo.shumengya.top:8022/{{USER}}/{{REPO}}.git
```
6. **推送到Gitea**
```bash
git push -u gitea main
```
## 说明
- Gitea服务器地址：`repo.shumengya.top:8022`
- 使用SSH协议上传
- 仓库路径：修改 `{{USER}}/{{REPO}}` 为你的用户名和仓库名