chore: sync project updates
This commit is contained in:
@@ -7,4 +7,3 @@ if not exist node_modules (
|
||||
call npm install
|
||||
)
|
||||
npm run build
|
||||
echo 构建完成!输出目录:mengyakeyvault-frontend\build
|
||||
|
||||
@@ -29,13 +29,12 @@ func init() {
|
||||
|
||||
type PasswordEntry struct {
|
||||
ID int `json:"id"`
|
||||
AccountType string `json:"accountType"` // 账号类型(网站/软件)
|
||||
Account string `json:"account"` // 账号
|
||||
Password string `json:"password"` // 密码
|
||||
Username string `json:"username"` // 用户名
|
||||
Phone string `json:"phone"` // 手机号
|
||||
Email string `json:"email"` // 邮箱
|
||||
Website string `json:"website"` // 网站地址
|
||||
Website string `json:"website"` // 网站地址
|
||||
OfficialName string `json:"officialName"` // 官方名称(必填)
|
||||
Tags string `json:"tags"` // 标签
|
||||
Logo string `json:"logo"` // Logo图标URL
|
||||
@@ -122,8 +121,7 @@ func getEntries(c *gin.Context) {
|
||||
keyword = strings.ToLower(keyword)
|
||||
var results []PasswordEntry
|
||||
for _, entry := range store.Entries {
|
||||
if strings.Contains(strings.ToLower(entry.AccountType), keyword) ||
|
||||
strings.Contains(strings.ToLower(entry.Account), keyword) ||
|
||||
if strings.Contains(strings.ToLower(entry.Account), keyword) ||
|
||||
strings.Contains(strings.ToLower(entry.Username), keyword) ||
|
||||
strings.Contains(strings.ToLower(entry.Email), keyword) ||
|
||||
strings.Contains(strings.ToLower(entry.Website), keyword) ||
|
||||
@@ -148,10 +146,6 @@ func addEntry(c *gin.Context) {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "官方名称不能为空"})
|
||||
return
|
||||
}
|
||||
if entry.AccountType != "网站" && entry.AccountType != "软件" {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "账号类型必须是'网站'或'软件'"})
|
||||
return
|
||||
}
|
||||
|
||||
store.mu.Lock()
|
||||
// 生成新ID
|
||||
@@ -185,10 +179,6 @@ func updateEntry(c *gin.Context) {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "官方名称不能为空"})
|
||||
return
|
||||
}
|
||||
if entry.AccountType != "网站" && entry.AccountType != "软件" {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "账号类型必须是'网站'或'软件'"})
|
||||
return
|
||||
}
|
||||
|
||||
store.mu.Lock()
|
||||
found := false
|
||||
|
||||
@@ -2,11 +2,46 @@
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<!-- 图标 -->
|
||||
<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" />
|
||||
|
||||
<!-- 视口 & 主题色 -->
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
34
mengyakeyvault-frontend/public/manifest.json
Normal file
34
mengyakeyvault-frontend/public/manifest.json
Normal 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
53
mengyakeyvault-frontend/public/offline.html
Normal 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
146
mengyakeyvault-frontend/public/service-worker.js
Normal 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();
|
||||
}
|
||||
});
|
||||
@@ -3,7 +3,6 @@ import './PasswordForm.css';
|
||||
|
||||
const PasswordForm = ({ entry, onSave, onCancel }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
accountType: '网站',
|
||||
account: '',
|
||||
password: '',
|
||||
username: '',
|
||||
@@ -28,7 +27,6 @@ const PasswordForm = ({ entry, onSave, onCancel }) => {
|
||||
useEffect(() => {
|
||||
if (entry) {
|
||||
setFormData({
|
||||
accountType: entry.accountType || '网站',
|
||||
account: entry.account || '',
|
||||
password: entry.password || '',
|
||||
username: entry.username || '',
|
||||
@@ -135,19 +133,6 @@ const PasswordForm = ({ entry, onSave, onCancel }) => {
|
||||
required
|
||||
/>
|
||||
</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 className="form-row">
|
||||
|
||||
@@ -347,23 +347,105 @@
|
||||
/* 卡片底部标签 */
|
||||
.card-tags {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
padding: 6px 10px;
|
||||
border-top: 1px solid rgba(232, 245, 233, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
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%);
|
||||
padding: 6px 10px;
|
||||
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;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
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 {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
|
||||
@@ -45,16 +45,41 @@ const EmptyIcon = () => (
|
||||
</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 [copiedId, setCopiedId] = useState(null);
|
||||
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
|
||||
const getWebsiteFavicon = (url) => {
|
||||
if (!url) return null;
|
||||
try {
|
||||
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 {
|
||||
return null;
|
||||
}
|
||||
@@ -67,8 +92,8 @@ const PasswordList = ({ entries, onEdit, onDelete }) => {
|
||||
return entry.logo;
|
||||
}
|
||||
|
||||
// 如果是网站类型,尝试获取favicon
|
||||
if (entry.accountType === '网站' && entry.website) {
|
||||
// 如果有网站地址,尝试获取favicon
|
||||
if (entry.website) {
|
||||
const faviconUrl = getWebsiteFavicon(entry.website);
|
||||
if (faviconUrl) {
|
||||
return faviconUrl;
|
||||
@@ -124,8 +149,9 @@ const PasswordList = ({ entries, onEdit, onDelete }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="password-list">
|
||||
{entries.map((entry) => {
|
||||
{pagedEntries.map((entry) => {
|
||||
const logoUrl = getLogoUrl(entry);
|
||||
return (
|
||||
<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">
|
||||
<span className="card-type">{entry.officialName || entry.software || '未命名'}</span>
|
||||
<span className="card-account-type">{entry.accountType || '未分类'}</span>
|
||||
</div>
|
||||
<div className="card-actions">
|
||||
<button
|
||||
@@ -223,13 +248,65 @@ const PasswordList = ({ entries, onEdit, onDelete }) => {
|
||||
</div>
|
||||
{entry.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>
|
||||
{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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -5,6 +5,80 @@
|
||||
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) {
|
||||
.password-manager {
|
||||
|
||||
@@ -19,6 +19,10 @@ const PasswordManager = () => {
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// PWA 安装提示
|
||||
const [installPrompt, setInstallPrompt] = useState(null);
|
||||
const [showInstallBanner, setShowInstallBanner] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadEntries();
|
||||
}, []);
|
||||
@@ -27,6 +31,27 @@ const PasswordManager = () => {
|
||||
filterEntries();
|
||||
}, [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 () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
@@ -47,7 +72,6 @@ const PasswordManager = () => {
|
||||
|
||||
const keyword = searchKeyword.toLowerCase();
|
||||
const filtered = entries.filter(entry =>
|
||||
entry.accountType?.toLowerCase().includes(keyword) ||
|
||||
entry.account?.toLowerCase().includes(keyword) ||
|
||||
entry.username?.toLowerCase().includes(keyword) ||
|
||||
entry.email?.toLowerCase().includes(keyword) ||
|
||||
@@ -114,6 +138,15 @@ const PasswordManager = () => {
|
||||
|
||||
return (
|
||||
<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">
|
||||
<div className="nav-content">
|
||||
<img
|
||||
|
||||
@@ -2,6 +2,7 @@ import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
@@ -9,3 +10,19 @@ root.render(
|
||||
<App />
|
||||
</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
88
mengyakeyvault-frontend/src/serviceWorkerRegistration.js
Normal 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
44
初始化项目Git配置.md
Normal 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}}` 为你的用户名和仓库名
|
||||
Reference in New Issue
Block a user