chore: sync project updates
This commit is contained in:
root
46
mengyakeyvault-frontend/.gitignore
vendored
46
mengyakeyvault-frontend/.gitignore
vendored
@@ -1,23 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
34332
mengyakeyvault-frontend/package-lock.json
generated
34332
mengyakeyvault-frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,35 +1,35 @@
|
||||
{
|
||||
"name": "mengyakeyvault-frontend",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"axios": "^1.6.0",
|
||||
"http-proxy-middleware": "^2.0.6"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "mengyakeyvault-frontend",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"axios": "^1.6.0",
|
||||
"http-proxy-middleware": "^2.0.6"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<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" />
|
||||
<title>萌芽密码管理器</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>您需要启用JavaScript才能运行此应用程序。</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<!-- 图标 -->
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<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>
|
||||
<noscript>您需要启用JavaScript才能运行此应用程序。</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
@@ -1,20 +1,20 @@
|
||||
.app-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 4px solid #4caf50;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
.app-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 4px solid #4caf50;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@@ -1,57 +1,57 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import './App.css';
|
||||
import PasswordLogin from './components/PasswordLogin';
|
||||
import PasswordManager from './components/PasswordManager';
|
||||
|
||||
// API 地址配置：优先使用环境变量，否则根据构建模式自动选择
|
||||
const API_BASE = process.env.REACT_APP_API_BASE ||
|
||||
(process.env.NODE_ENV === 'production'
|
||||
? 'https://keyvault.api.shumengya.top/api'
|
||||
: 'http://localhost:8080/api');
|
||||
const STORAGE_KEY = 'mengyakeyvault_authenticated';
|
||||
|
||||
function App() {
|
||||
const [authenticated, setAuthenticated] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// 检查是否已认证
|
||||
const cached = localStorage.getItem(STORAGE_KEY);
|
||||
if (cached === 'true') {
|
||||
setAuthenticated(true);
|
||||
}
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleLogin = async (password) => {
|
||||
try {
|
||||
const response = await axios.post(`${API_BASE}/verify`, { password });
|
||||
if (response.data.success) {
|
||||
localStorage.setItem(STORAGE_KEY, 'true');
|
||||
setAuthenticated(true);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('登录失败:', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="app-loading">
|
||||
<div className="loading-spinner"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!authenticated) {
|
||||
return <PasswordLogin onLogin={handleLogin} />;
|
||||
}
|
||||
|
||||
return <PasswordManager />;
|
||||
}
|
||||
|
||||
export default App;
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import './App.css';
|
||||
import PasswordLogin from './components/PasswordLogin';
|
||||
import PasswordManager from './components/PasswordManager';
|
||||
|
||||
// API 地址配置：优先使用环境变量，否则根据构建模式自动选择
|
||||
const API_BASE = process.env.REACT_APP_API_BASE ||
|
||||
(process.env.NODE_ENV === 'production'
|
||||
? 'https://keyvault.api.shumengya.top/api'
|
||||
: 'http://localhost:8080/api');
|
||||
const STORAGE_KEY = 'mengyakeyvault_authenticated';
|
||||
|
||||
function App() {
|
||||
const [authenticated, setAuthenticated] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// 检查是否已认证
|
||||
const cached = localStorage.getItem(STORAGE_KEY);
|
||||
if (cached === 'true') {
|
||||
setAuthenticated(true);
|
||||
}
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleLogin = async (password) => {
|
||||
try {
|
||||
const response = await axios.post(`${API_BASE}/verify`, { password });
|
||||
if (response.data.success) {
|
||||
localStorage.setItem(STORAGE_KEY, 'true');
|
||||
setAuthenticated(true);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('登录失败:', error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="app-loading">
|
||||
<div className="loading-spinner"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!authenticated) {
|
||||
return <PasswordLogin onLogin={handleLogin} />;
|
||||
}
|
||||
|
||||
return <PasswordManager />;
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1,366 +1,366 @@
|
||||
.form-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.form-modal {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 25px 30px;
|
||||
border-bottom: 2px solid #e8f5e9;
|
||||
}
|
||||
|
||||
.form-header h2 {
|
||||
color: #2e7d32;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.password-form {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 12px;
|
||||
border: 2px solid #c8e6c9;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.form-group select {
|
||||
padding: 12px;
|
||||
border: 2px solid #c8e6c9;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
background: white;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.form-select {
|
||||
padding: 12px;
|
||||
border: 2px solid #c8e6c9;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
background: white;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.password-input-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.password-input-group input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.generate-password-btn,
|
||||
.password-options-btn {
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.generate-password-btn:hover,
|
||||
.password-options-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
.generate-password-btn:active,
|
||||
.password-options-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.password-generator-options {
|
||||
margin-top: 12px;
|
||||
padding: 15px;
|
||||
background: rgba(200, 230, 201, 0.2);
|
||||
border-radius: 10px;
|
||||
border: 2px solid #c8e6c9;
|
||||
}
|
||||
|
||||
.option-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.length-input {
|
||||
padding: 8px 12px;
|
||||
border: 2px solid #c8e6c9;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
width: 80px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.length-input:focus {
|
||||
outline: none;
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.option-checkboxes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.checkbox-label:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: #4caf50;
|
||||
}
|
||||
|
||||
.quick-generate-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.quick-generate-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
.quick-generate-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.option-checkboxes {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.password-input-group {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.generate-password-btn,
|
||||
.password-options-btn {
|
||||
flex: 1;
|
||||
min-width: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 15px;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px solid #e8f5e9;
|
||||
}
|
||||
|
||||
.cancel-button,
|
||||
.save-button {
|
||||
padding: 12px 30px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cancel-button:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.save-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-overlay {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form-modal {
|
||||
max-height: 95vh;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-header h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.password-form {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.cancel-button,
|
||||
.save-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.form-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.form-modal {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 25px 30px;
|
||||
border-bottom: 2px solid #e8f5e9;
|
||||
}
|
||||
|
||||
.form-header h2 {
|
||||
color: #2e7d32;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.password-form {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 12px;
|
||||
border: 2px solid #c8e6c9;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.form-group select {
|
||||
padding: 12px;
|
||||
border: 2px solid #c8e6c9;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
background: white;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.form-select {
|
||||
padding: 12px;
|
||||
border: 2px solid #c8e6c9;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
background: white;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.password-input-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.password-input-group input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.generate-password-btn,
|
||||
.password-options-btn {
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.generate-password-btn:hover,
|
||||
.password-options-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
.generate-password-btn:active,
|
||||
.password-options-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.password-generator-options {
|
||||
margin-top: 12px;
|
||||
padding: 15px;
|
||||
background: rgba(200, 230, 201, 0.2);
|
||||
border-radius: 10px;
|
||||
border: 2px solid #c8e6c9;
|
||||
}
|
||||
|
||||
.option-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.length-input {
|
||||
padding: 8px 12px;
|
||||
border: 2px solid #c8e6c9;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
width: 80px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.length-input:focus {
|
||||
outline: none;
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.option-checkboxes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.checkbox-label:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: #4caf50;
|
||||
}
|
||||
|
||||
.quick-generate-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.quick-generate-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
.quick-generate-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.option-checkboxes {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.password-input-group {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.generate-password-btn,
|
||||
.password-options-btn {
|
||||
flex: 1;
|
||||
min-width: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 15px;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px solid #e8f5e9;
|
||||
}
|
||||
|
||||
.cancel-button,
|
||||
.save-button {
|
||||
padding: 12px 30px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cancel-button:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.save-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-overlay {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form-modal {
|
||||
max-height: 95vh;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-header h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.password-form {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.cancel-button,
|
||||
.save-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,363 +1,348 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './PasswordForm.css';
|
||||
|
||||
const PasswordForm = ({ entry, onSave, onCancel }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
accountType: '网站',
|
||||
account: '',
|
||||
password: '',
|
||||
username: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
website: '',
|
||||
officialName: '',
|
||||
tags: '',
|
||||
logo: '',
|
||||
});
|
||||
|
||||
const [passwordOptions, setPasswordOptions] = useState({
|
||||
length: 16,
|
||||
includeUppercase: true,
|
||||
includeLowercase: true,
|
||||
includeNumbers: true,
|
||||
includeSpecial: true,
|
||||
});
|
||||
|
||||
const [showPasswordGenerator, setShowPasswordGenerator] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (entry) {
|
||||
setFormData({
|
||||
accountType: entry.accountType || '网站',
|
||||
account: entry.account || '',
|
||||
password: entry.password || '',
|
||||
username: entry.username || '',
|
||||
phone: entry.phone || '',
|
||||
email: entry.email || '',
|
||||
website: entry.website || '',
|
||||
officialName: entry.officialName || entry.software || '',
|
||||
tags: entry.tags || '',
|
||||
logo: entry.logo || '',
|
||||
});
|
||||
setShowPasswordGenerator(false);
|
||||
} else {
|
||||
// 新建时默认显示密码生成器
|
||||
setShowPasswordGenerator(true);
|
||||
}
|
||||
}, [entry]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
onSave(formData);
|
||||
};
|
||||
|
||||
const generatePassword = () => {
|
||||
const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
const lowercase = 'abcdefghijklmnopqrstuvwxyz';
|
||||
const numbers = '0123456789';
|
||||
const special = '!@#$%^&*()_+-=[]{}|;:,.<>?';
|
||||
|
||||
let charset = '';
|
||||
if (passwordOptions.includeLowercase) charset += lowercase;
|
||||
if (passwordOptions.includeUppercase) charset += uppercase;
|
||||
if (passwordOptions.includeNumbers) charset += numbers;
|
||||
if (passwordOptions.includeSpecial) charset += special;
|
||||
|
||||
if (charset === '') {
|
||||
alert('请至少选择一种字符类型');
|
||||
return;
|
||||
}
|
||||
|
||||
let password = '';
|
||||
const length = Math.max(4, Math.min(128, passwordOptions.length));
|
||||
|
||||
// 确保至少包含每种选中的字符类型
|
||||
if (passwordOptions.includeLowercase) {
|
||||
password += lowercase[Math.floor(Math.random() * lowercase.length)];
|
||||
}
|
||||
if (passwordOptions.includeUppercase) {
|
||||
password += uppercase[Math.floor(Math.random() * uppercase.length)];
|
||||
}
|
||||
if (passwordOptions.includeNumbers) {
|
||||
password += numbers[Math.floor(Math.random() * numbers.length)];
|
||||
}
|
||||
if (passwordOptions.includeSpecial) {
|
||||
password += special[Math.floor(Math.random() * special.length)];
|
||||
}
|
||||
|
||||
// 填充剩余长度
|
||||
for (let i = password.length; i < length; i++) {
|
||||
password += charset[Math.floor(Math.random() * charset.length)];
|
||||
}
|
||||
|
||||
// 打乱顺序（Fisher-Yates 洗牌算法）
|
||||
const passwordArray = password.split('');
|
||||
for (let i = passwordArray.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[passwordArray[i], passwordArray[j]] = [passwordArray[j], passwordArray[i]];
|
||||
}
|
||||
password = passwordArray.join('');
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
password: password,
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-overlay" onClick={onCancel}>
|
||||
<div className="form-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="form-header">
|
||||
<h2>{entry ? '编辑密码' : '添加密码'}</h2>
|
||||
<button className="close-button" onClick={onCancel}>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="password-form">
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>官方名称 *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="officialName"
|
||||
value={formData.officialName}
|
||||
onChange={handleChange}
|
||||
placeholder="例如：MiniMax、GitHub"
|
||||
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">
|
||||
<div className="form-group">
|
||||
<label>账号</label>
|
||||
<input
|
||||
type="text"
|
||||
name="account"
|
||||
value={formData.account}
|
||||
onChange={handleChange}
|
||||
placeholder="账号"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>密码</label>
|
||||
<div className="password-input-group">
|
||||
<input
|
||||
type="text"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
placeholder="密码"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="generate-password-btn"
|
||||
onClick={() => {
|
||||
if (!showPasswordGenerator) {
|
||||
setShowPasswordGenerator(true);
|
||||
}
|
||||
generatePassword();
|
||||
}}
|
||||
title="生成随机密码"
|
||||
>
|
||||
🎲
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="password-options-btn"
|
||||
onClick={() => setShowPasswordGenerator(!showPasswordGenerator)}
|
||||
title="密码生成选项"
|
||||
>
|
||||
⚙️
|
||||
</button>
|
||||
</div>
|
||||
{showPasswordGenerator && (
|
||||
<div className="password-generator-options">
|
||||
<div className="option-row">
|
||||
<label className="option-label">长度：</label>
|
||||
<input
|
||||
type="number"
|
||||
min="4"
|
||||
max="128"
|
||||
value={passwordOptions.length}
|
||||
onChange={(e) =>
|
||||
setPasswordOptions({
|
||||
...passwordOptions,
|
||||
length: parseInt(e.target.value) || 16,
|
||||
})
|
||||
}
|
||||
className="length-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="option-checkboxes">
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={passwordOptions.includeUppercase}
|
||||
onChange={(e) =>
|
||||
setPasswordOptions({
|
||||
...passwordOptions,
|
||||
includeUppercase: e.target.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span>大写字母 (A-Z)</span>
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={passwordOptions.includeLowercase}
|
||||
onChange={(e) =>
|
||||
setPasswordOptions({
|
||||
...passwordOptions,
|
||||
includeLowercase: e.target.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span>小写字母 (a-z)</span>
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={passwordOptions.includeNumbers}
|
||||
onChange={(e) =>
|
||||
setPasswordOptions({
|
||||
...passwordOptions,
|
||||
includeNumbers: e.target.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span>数字 (0-9)</span>
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={passwordOptions.includeSpecial}
|
||||
onChange={(e) =>
|
||||
setPasswordOptions({
|
||||
...passwordOptions,
|
||||
includeSpecial: e.target.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span>特殊字符 (!@#$...)</span>
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="quick-generate-btn"
|
||||
onClick={generatePassword}
|
||||
>
|
||||
🔄 重新生成
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
placeholder="用户名"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>手机号</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="手机号"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>邮箱</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
placeholder="邮箱"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>网站地址</label>
|
||||
<input
|
||||
type="url"
|
||||
name="website"
|
||||
value={formData.website}
|
||||
onChange={handleChange}
|
||||
placeholder="https://example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>标签</label>
|
||||
<input
|
||||
type="text"
|
||||
name="tags"
|
||||
value={formData.tags}
|
||||
onChange={handleChange}
|
||||
placeholder="标签（用空格分隔）"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Logo图标URL（可选）</label>
|
||||
<input
|
||||
type="url"
|
||||
name="logo"
|
||||
value={formData.logo}
|
||||
onChange={handleChange}
|
||||
placeholder="https://example.com/logo.png（留空则自动获取）"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="button" className="cancel-button" onClick={onCancel}>
|
||||
取消
|
||||
</button>
|
||||
<button type="submit" className="save-button">
|
||||
{entry ? '更新' : '保存'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordForm;
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './PasswordForm.css';
|
||||
|
||||
const PasswordForm = ({ entry, onSave, onCancel }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
account: '',
|
||||
password: '',
|
||||
username: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
website: '',
|
||||
officialName: '',
|
||||
tags: '',
|
||||
logo: '',
|
||||
});
|
||||
|
||||
const [passwordOptions, setPasswordOptions] = useState({
|
||||
length: 16,
|
||||
includeUppercase: true,
|
||||
includeLowercase: true,
|
||||
includeNumbers: true,
|
||||
includeSpecial: true,
|
||||
});
|
||||
|
||||
const [showPasswordGenerator, setShowPasswordGenerator] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (entry) {
|
||||
setFormData({
|
||||
account: entry.account || '',
|
||||
password: entry.password || '',
|
||||
username: entry.username || '',
|
||||
phone: entry.phone || '',
|
||||
email: entry.email || '',
|
||||
website: entry.website || '',
|
||||
officialName: entry.officialName || entry.software || '',
|
||||
tags: entry.tags || '',
|
||||
logo: entry.logo || '',
|
||||
});
|
||||
setShowPasswordGenerator(false);
|
||||
} else {
|
||||
// 新建时默认显示密码生成器
|
||||
setShowPasswordGenerator(true);
|
||||
}
|
||||
}, [entry]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
onSave(formData);
|
||||
};
|
||||
|
||||
const generatePassword = () => {
|
||||
const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
const lowercase = 'abcdefghijklmnopqrstuvwxyz';
|
||||
const numbers = '0123456789';
|
||||
const special = '!@#$%^&*()_+-=[]{}|;:,.<>?';
|
||||
|
||||
let charset = '';
|
||||
if (passwordOptions.includeLowercase) charset += lowercase;
|
||||
if (passwordOptions.includeUppercase) charset += uppercase;
|
||||
if (passwordOptions.includeNumbers) charset += numbers;
|
||||
if (passwordOptions.includeSpecial) charset += special;
|
||||
|
||||
if (charset === '') {
|
||||
alert('请至少选择一种字符类型');
|
||||
return;
|
||||
}
|
||||
|
||||
let password = '';
|
||||
const length = Math.max(4, Math.min(128, passwordOptions.length));
|
||||
|
||||
// 确保至少包含每种选中的字符类型
|
||||
if (passwordOptions.includeLowercase) {
|
||||
password += lowercase[Math.floor(Math.random() * lowercase.length)];
|
||||
}
|
||||
if (passwordOptions.includeUppercase) {
|
||||
password += uppercase[Math.floor(Math.random() * uppercase.length)];
|
||||
}
|
||||
if (passwordOptions.includeNumbers) {
|
||||
password += numbers[Math.floor(Math.random() * numbers.length)];
|
||||
}
|
||||
if (passwordOptions.includeSpecial) {
|
||||
password += special[Math.floor(Math.random() * special.length)];
|
||||
}
|
||||
|
||||
// 填充剩余长度
|
||||
for (let i = password.length; i < length; i++) {
|
||||
password += charset[Math.floor(Math.random() * charset.length)];
|
||||
}
|
||||
|
||||
// 打乱顺序（Fisher-Yates 洗牌算法）
|
||||
const passwordArray = password.split('');
|
||||
for (let i = passwordArray.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[passwordArray[i], passwordArray[j]] = [passwordArray[j], passwordArray[i]];
|
||||
}
|
||||
password = passwordArray.join('');
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
password: password,
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-overlay" onClick={onCancel}>
|
||||
<div className="form-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="form-header">
|
||||
<h2>{entry ? '编辑密码' : '添加密码'}</h2>
|
||||
<button className="close-button" onClick={onCancel}>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="password-form">
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>官方名称 *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="officialName"
|
||||
value={formData.officialName}
|
||||
onChange={handleChange}
|
||||
placeholder="例如：MiniMax、GitHub"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>账号</label>
|
||||
<input
|
||||
type="text"
|
||||
name="account"
|
||||
value={formData.account}
|
||||
onChange={handleChange}
|
||||
placeholder="账号"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>密码</label>
|
||||
<div className="password-input-group">
|
||||
<input
|
||||
type="text"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
placeholder="密码"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="generate-password-btn"
|
||||
onClick={() => {
|
||||
if (!showPasswordGenerator) {
|
||||
setShowPasswordGenerator(true);
|
||||
}
|
||||
generatePassword();
|
||||
}}
|
||||
title="生成随机密码"
|
||||
>
|
||||
🎲
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="password-options-btn"
|
||||
onClick={() => setShowPasswordGenerator(!showPasswordGenerator)}
|
||||
title="密码生成选项"
|
||||
>
|
||||
⚙️
|
||||
</button>
|
||||
</div>
|
||||
{showPasswordGenerator && (
|
||||
<div className="password-generator-options">
|
||||
<div className="option-row">
|
||||
<label className="option-label">长度：</label>
|
||||
<input
|
||||
type="number"
|
||||
min="4"
|
||||
max="128"
|
||||
value={passwordOptions.length}
|
||||
onChange={(e) =>
|
||||
setPasswordOptions({
|
||||
...passwordOptions,
|
||||
length: parseInt(e.target.value) || 16,
|
||||
})
|
||||
}
|
||||
className="length-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="option-checkboxes">
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={passwordOptions.includeUppercase}
|
||||
onChange={(e) =>
|
||||
setPasswordOptions({
|
||||
...passwordOptions,
|
||||
includeUppercase: e.target.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span>大写字母 (A-Z)</span>
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={passwordOptions.includeLowercase}
|
||||
onChange={(e) =>
|
||||
setPasswordOptions({
|
||||
...passwordOptions,
|
||||
includeLowercase: e.target.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span>小写字母 (a-z)</span>
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={passwordOptions.includeNumbers}
|
||||
onChange={(e) =>
|
||||
setPasswordOptions({
|
||||
...passwordOptions,
|
||||
includeNumbers: e.target.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span>数字 (0-9)</span>
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={passwordOptions.includeSpecial}
|
||||
onChange={(e) =>
|
||||
setPasswordOptions({
|
||||
...passwordOptions,
|
||||
includeSpecial: e.target.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span>特殊字符 (!@#$...)</span>
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="quick-generate-btn"
|
||||
onClick={generatePassword}
|
||||
>
|
||||
🔄 重新生成
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
placeholder="用户名"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>手机号</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="手机号"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>邮箱</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
placeholder="邮箱"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>网站地址</label>
|
||||
<input
|
||||
type="url"
|
||||
name="website"
|
||||
value={formData.website}
|
||||
onChange={handleChange}
|
||||
placeholder="https://example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>标签</label>
|
||||
<input
|
||||
type="text"
|
||||
name="tags"
|
||||
value={formData.tags}
|
||||
onChange={handleChange}
|
||||
placeholder="标签（用空格分隔）"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Logo图标URL（可选）</label>
|
||||
<input
|
||||
type="url"
|
||||
name="logo"
|
||||
value={formData.logo}
|
||||
onChange={handleChange}
|
||||
placeholder="https://example.com/logo.png（留空则自动获取）"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="button" className="cancel-button" onClick={onCancel}>
|
||||
取消
|
||||
</button>
|
||||
<button type="submit" className="save-button">
|
||||
{entry ? '更新' : '保存'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordForm;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,236 +1,313 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './PasswordList.css';
|
||||
|
||||
// SVG 图标组件
|
||||
const CopyIcon = () => (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const CheckIcon = () => (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const EditIcon = () => (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const DeleteIcon = () => (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const LinkIcon = () => (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const EmptyIcon = () => (
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
<line x1="12" y1="18" x2="12" y2="12"></line>
|
||||
<line x1="9" y1="15" x2="15" y2="15"></line>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const PasswordList = ({ entries, onEdit, onDelete }) => {
|
||||
const [copiedId, setCopiedId] = useState(null);
|
||||
const [logoCache, setLogoCache] = useState({});
|
||||
|
||||
// 获取网站favicon
|
||||
const getWebsiteFavicon = (url) => {
|
||||
if (!url) return null;
|
||||
try {
|
||||
const urlObj = new URL(url);
|
||||
return `${urlObj.protocol}//${urlObj.host}/favicon.ico`;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取logo URL
|
||||
const getLogoUrl = (entry) => {
|
||||
// 如果entry中有logo字段且不为空，使用该logo
|
||||
if (entry.logo && entry.logo.trim() !== '') {
|
||||
return entry.logo;
|
||||
}
|
||||
|
||||
// 如果是网站类型，尝试获取favicon
|
||||
if (entry.accountType === '网站' && entry.website) {
|
||||
const faviconUrl = getWebsiteFavicon(entry.website);
|
||||
if (faviconUrl) {
|
||||
return faviconUrl;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认使用本地logo
|
||||
return `${process.env.PUBLIC_URL}/logo.png`;
|
||||
};
|
||||
|
||||
const handleCopy = async (text, id) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setCopiedId(id);
|
||||
setTimeout(() => setCopiedId(null), 2000);
|
||||
} catch (err) {
|
||||
// 降级方案
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
setCopiedId(id);
|
||||
setTimeout(() => setCopiedId(null), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
const CopyButton = ({ text, id }) => {
|
||||
const uniqueId = `copy-${id}-${text}`;
|
||||
const isCopied = copiedId === uniqueId;
|
||||
return (
|
||||
<button
|
||||
className="copy-button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleCopy(text, uniqueId);
|
||||
}}
|
||||
title={isCopied ? '已复制！' : '复制'}
|
||||
>
|
||||
{isCopied ? <CheckIcon /> : <CopyIcon />}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
if (entries.length === 0) {
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<div className="empty-icon"><EmptyIcon /></div>
|
||||
<p>暂无密码记录</p>
|
||||
<p className="empty-hint">点击"添加密码"按钮开始添加</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="password-list">
|
||||
{entries.map((entry) => {
|
||||
const logoUrl = getLogoUrl(entry);
|
||||
return (
|
||||
<div key={entry.id} className="password-card">
|
||||
<div className="card-header">
|
||||
<div className="card-logo-wrapper">
|
||||
<img
|
||||
src={logoUrl}
|
||||
alt={entry.officialName || 'Logo'}
|
||||
className="card-logo"
|
||||
onError={(e) => {
|
||||
// 如果加载失败，使用默认logo
|
||||
e.target.src = `${process.env.PUBLIC_URL}/logo.png`;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="card-title-section">
|
||||
<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
|
||||
className="edit-button"
|
||||
onClick={() => onEdit(entry)}
|
||||
title="编辑"
|
||||
>
|
||||
<EditIcon />
|
||||
</button>
|
||||
<button
|
||||
className="delete-button"
|
||||
onClick={() => onDelete(entry.id)}
|
||||
title="删除"
|
||||
>
|
||||
<DeleteIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-content">
|
||||
{entry.account && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">账号：</span>
|
||||
<span className="info-value">{entry.account}</span>
|
||||
<CopyButton text={entry.account} id={entry.id} />
|
||||
</div>
|
||||
)}
|
||||
{entry.password && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">密码：</span>
|
||||
<span className="info-value password-value" title={entry.password}>
|
||||
{entry.password}
|
||||
</span>
|
||||
<CopyButton text={entry.password} id={entry.id} />
|
||||
</div>
|
||||
)}
|
||||
{entry.username && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">用户名：</span>
|
||||
<span className="info-value">{entry.username}</span>
|
||||
<CopyButton text={entry.username} id={entry.id} />
|
||||
</div>
|
||||
)}
|
||||
{entry.phone && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">手机号：</span>
|
||||
<span className="info-value">{entry.phone}</span>
|
||||
<CopyButton text={entry.phone} id={entry.id} />
|
||||
</div>
|
||||
)}
|
||||
{entry.email && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">邮箱：</span>
|
||||
<span className="info-value">{entry.email}</span>
|
||||
<CopyButton text={entry.email} id={entry.id} />
|
||||
</div>
|
||||
)}
|
||||
{entry.website && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">网站：</span>
|
||||
<a
|
||||
href={entry.website}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="info-link"
|
||||
title={entry.website}
|
||||
>
|
||||
{entry.website}
|
||||
</a>
|
||||
<CopyButton text={entry.website} id={entry.id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{entry.tags && (
|
||||
<div className="card-tags">
|
||||
{entry.tags}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordList;
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './PasswordList.css';
|
||||
|
||||
// SVG 图标组件
|
||||
const CopyIcon = () => (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const CheckIcon = () => (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const EditIcon = () => (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const DeleteIcon = () => (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const LinkIcon = () => (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const EmptyIcon = () => (
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
<line x1="12" y1="18" x2="12" y2="12"></line>
|
||||
<line x1="9" y1="15" x2="15" y2="15"></line>
|
||||
</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);
|
||||
const domain = urlObj.host;
|
||||
return `https://cf-favicon.pages.dev/api/favicon?url=${domain}`;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取logo URL
|
||||
const getLogoUrl = (entry) => {
|
||||
// 如果entry中有logo字段且不为空，使用该logo
|
||||
if (entry.logo && entry.logo.trim() !== '') {
|
||||
return entry.logo;
|
||||
}
|
||||
|
||||
// 如果有网站地址，尝试获取favicon
|
||||
if (entry.website) {
|
||||
const faviconUrl = getWebsiteFavicon(entry.website);
|
||||
if (faviconUrl) {
|
||||
return faviconUrl;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认使用本地logo
|
||||
return `${process.env.PUBLIC_URL}/logo.png`;
|
||||
};
|
||||
|
||||
const handleCopy = async (text, id) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setCopiedId(id);
|
||||
setTimeout(() => setCopiedId(null), 2000);
|
||||
} catch (err) {
|
||||
// 降级方案
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
setCopiedId(id);
|
||||
setTimeout(() => setCopiedId(null), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
const CopyButton = ({ text, id }) => {
|
||||
const uniqueId = `copy-${id}-${text}`;
|
||||
const isCopied = copiedId === uniqueId;
|
||||
return (
|
||||
<button
|
||||
className="copy-button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleCopy(text, uniqueId);
|
||||
}}
|
||||
title={isCopied ? '已复制！' : '复制'}
|
||||
>
|
||||
{isCopied ? <CheckIcon /> : <CopyIcon />}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
if (entries.length === 0) {
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<div className="empty-icon"><EmptyIcon /></div>
|
||||
<p>暂无密码记录</p>
|
||||
<p className="empty-hint">点击"添加密码"按钮开始添加</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="password-list">
|
||||
{pagedEntries.map((entry) => {
|
||||
const logoUrl = getLogoUrl(entry);
|
||||
return (
|
||||
<div key={entry.id} className="password-card">
|
||||
<div className="card-header">
|
||||
<div className="card-logo-wrapper">
|
||||
<img
|
||||
src={logoUrl}
|
||||
alt={entry.officialName || 'Logo'}
|
||||
className="card-logo"
|
||||
onError={(e) => {
|
||||
// 如果加载失败，使用默认logo
|
||||
e.target.src = `${process.env.PUBLIC_URL}/logo.png`;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="card-title-section">
|
||||
<div className="card-title-row">
|
||||
<div className="card-title">
|
||||
<span className="card-type">{entry.officialName || entry.software || '未命名'}</span>
|
||||
</div>
|
||||
<div className="card-actions">
|
||||
<button
|
||||
className="edit-button"
|
||||
onClick={() => onEdit(entry)}
|
||||
title="编辑"
|
||||
>
|
||||
<EditIcon />
|
||||
</button>
|
||||
<button
|
||||
className="delete-button"
|
||||
onClick={() => onDelete(entry.id)}
|
||||
title="删除"
|
||||
>
|
||||
<DeleteIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-content">
|
||||
{entry.account && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">账号：</span>
|
||||
<span className="info-value">{entry.account}</span>
|
||||
<CopyButton text={entry.account} id={entry.id} />
|
||||
</div>
|
||||
)}
|
||||
{entry.password && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">密码：</span>
|
||||
<span className="info-value password-value" title={entry.password}>
|
||||
{entry.password}
|
||||
</span>
|
||||
<CopyButton text={entry.password} id={entry.id} />
|
||||
</div>
|
||||
)}
|
||||
{entry.username && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">用户名：</span>
|
||||
<span className="info-value">{entry.username}</span>
|
||||
<CopyButton text={entry.username} id={entry.id} />
|
||||
</div>
|
||||
)}
|
||||
{entry.phone && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">手机号：</span>
|
||||
<span className="info-value">{entry.phone}</span>
|
||||
<CopyButton text={entry.phone} id={entry.id} />
|
||||
</div>
|
||||
)}
|
||||
{entry.email && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">邮箱：</span>
|
||||
<span className="info-value">{entry.email}</span>
|
||||
<CopyButton text={entry.email} id={entry.id} />
|
||||
</div>
|
||||
)}
|
||||
{entry.website && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">网站：</span>
|
||||
<a
|
||||
href={entry.website}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="info-link"
|
||||
title={entry.website}
|
||||
>
|
||||
{entry.website}
|
||||
</a>
|
||||
<CopyButton text={entry.website} id={entry.id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{entry.tags && (
|
||||
<div className="card-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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordList;
|
||||
|
||||
@@ -1,101 +1,101 @@
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
margin: 0 auto 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.password-input {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border: 2px solid #c8e6c9;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.password-input:focus {
|
||||
outline: none;
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.login-button {
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.login-button:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.login-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #f44336;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-card {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
margin: 0 auto 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.password-input {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border: 2px solid #c8e6c9;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.password-input:focus {
|
||||
outline: none;
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.login-button {
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.login-button:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.login-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #f44336;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-card {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,55 +1,55 @@
|
||||
import React, { useState } from 'react';
|
||||
import './PasswordLogin.css';
|
||||
|
||||
const PasswordLogin = ({ onLogin }) => {
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
const success = await onLogin(password);
|
||||
if (!success) {
|
||||
setError('密码错误，请重试');
|
||||
setPassword('');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-container">
|
||||
<div className="login-card">
|
||||
<div className="login-header">
|
||||
<img
|
||||
src={`${process.env.PUBLIC_URL}/logo.png`}
|
||||
alt="萌芽密码管理器"
|
||||
className="login-logo"
|
||||
/>
|
||||
<p>请输入访问密码</p>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="login-form">
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
className="password-input"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
<button type="submit" className="login-button" disabled={loading}>
|
||||
{loading ? '验证中...' : '登录'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordLogin;
|
||||
import React, { useState } from 'react';
|
||||
import './PasswordLogin.css';
|
||||
|
||||
const PasswordLogin = ({ onLogin }) => {
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
const success = await onLogin(password);
|
||||
if (!success) {
|
||||
setError('密码错误，请重试');
|
||||
setPassword('');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-container">
|
||||
<div className="login-card">
|
||||
<div className="login-header">
|
||||
<img
|
||||
src={`${process.env.PUBLIC_URL}/logo.png`}
|
||||
alt="萌芽密码管理器"
|
||||
className="login-logo"
|
||||
/>
|
||||
<p>请输入访问密码</p>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="login-form">
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
className="password-input"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
<button type="submit" className="login-button" disabled={loading}>
|
||||
{loading ? '验证中...' : '登录'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordLogin;
|
||||
|
||||
@@ -1,126 +1,200 @@
|
||||
.password-manager {
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 大屏幕容器宽度控制 */
|
||||
@media (min-width: 1600px) {
|
||||
.password-manager {
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) and (max-width: 1599px) {
|
||||
.password-manager {
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.password-manager {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
.manager-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.manager-nav {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 255, 248, 0.95) 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 20px 0;
|
||||
margin: -20px -20px 30px -20px;
|
||||
border-bottom: 2px solid rgba(200, 230, 201, 0.3);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* 大屏幕导航栏宽度控制 */
|
||||
@media (min-width: 1600px) {
|
||||
.nav-content {
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) and (max-width: 1599px) {
|
||||
.nav-content {
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.nav-content {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
color: #2e7d32;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.manager-header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
padding: 12px 24px;
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.add-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.password-manager {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.password-manager {
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
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 {
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) and (max-width: 1599px) {
|
||||
.password-manager {
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.password-manager {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
.manager-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.manager-nav {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 255, 248, 0.95) 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 20px 0;
|
||||
margin: -20px -20px 30px -20px;
|
||||
border-bottom: 2px solid rgba(200, 230, 201, 0.3);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* 大屏幕导航栏宽度控制 */
|
||||
@media (min-width: 1600px) {
|
||||
.nav-content {
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) and (max-width: 1599px) {
|
||||
.nav-content {
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.nav-content {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
color: #2e7d32;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.manager-header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
padding: 12px 24px;
|
||||
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.add-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.password-manager {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,155 +1,188 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import './PasswordManager.css';
|
||||
import PasswordList from './PasswordList';
|
||||
import PasswordForm from './PasswordForm';
|
||||
import SearchBar from './SearchBar';
|
||||
|
||||
// API 地址配置：优先使用环境变量，否则根据构建模式自动选择
|
||||
const API_BASE = process.env.REACT_APP_API_BASE ||
|
||||
(process.env.NODE_ENV === 'production'
|
||||
? 'https://keyvault.api.shumengya.top/api'
|
||||
: 'http://localhost:8080/api');
|
||||
|
||||
const PasswordManager = () => {
|
||||
const [entries, setEntries] = useState([]);
|
||||
const [filteredEntries, setFilteredEntries] = useState([]);
|
||||
const [searchKeyword, setSearchKeyword] = useState('');
|
||||
const [editingEntry, setEditingEntry] = useState(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadEntries();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
filterEntries();
|
||||
}, [searchKeyword, entries]);
|
||||
|
||||
const loadEntries = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get(`${API_BASE}/entries`);
|
||||
setEntries(response.data.entries || []);
|
||||
} catch (error) {
|
||||
console.error('加载条目失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filterEntries = () => {
|
||||
if (!searchKeyword.trim()) {
|
||||
setFilteredEntries(entries);
|
||||
return;
|
||||
}
|
||||
|
||||
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) ||
|
||||
entry.website?.toLowerCase().includes(keyword) ||
|
||||
entry.officialName?.toLowerCase().includes(keyword) ||
|
||||
(entry.software && entry.software.toLowerCase().includes(keyword)) ||
|
||||
entry.tags?.toLowerCase().includes(keyword)
|
||||
);
|
||||
setFilteredEntries(filtered);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingEntry(null);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleEdit = (entry) => {
|
||||
setEditingEntry(entry);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
if (!window.confirm('确定要删除这条记录吗？')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await axios.delete(`${API_BASE}/entries/${id}`);
|
||||
loadEntries();
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error);
|
||||
alert('删除失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async (entryData) => {
|
||||
try {
|
||||
if (editingEntry) {
|
||||
await axios.put(`${API_BASE}/entries`, { ...entryData, id: editingEntry.id });
|
||||
} else {
|
||||
await axios.post(`${API_BASE}/entries`, entryData);
|
||||
}
|
||||
setShowForm(false);
|
||||
setEditingEntry(null);
|
||||
loadEntries();
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
alert('保存失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setShowForm(false);
|
||||
setEditingEntry(null);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="manager-loading">
|
||||
<div className="loading-spinner"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="password-manager">
|
||||
<nav className="manager-nav">
|
||||
<div className="nav-content">
|
||||
<img
|
||||
src={`${process.env.PUBLIC_URL}/logo.png`}
|
||||
alt="Logo"
|
||||
className="nav-logo"
|
||||
/>
|
||||
<h1 className="nav-title">萌芽密码管理器</h1>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="manager-header">
|
||||
<button className="add-button" onClick={handleAdd}>
|
||||
+ 添加密码
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SearchBar
|
||||
keyword={searchKeyword}
|
||||
onKeywordChange={setSearchKeyword}
|
||||
/>
|
||||
|
||||
<PasswordList
|
||||
entries={filteredEntries}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
|
||||
{showForm && (
|
||||
<PasswordForm
|
||||
entry={editingEntry}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordManager;
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import './PasswordManager.css';
|
||||
import PasswordList from './PasswordList';
|
||||
import PasswordForm from './PasswordForm';
|
||||
import SearchBar from './SearchBar';
|
||||
|
||||
// API 地址配置：优先使用环境变量，否则根据构建模式自动选择
|
||||
const API_BASE = process.env.REACT_APP_API_BASE ||
|
||||
(process.env.NODE_ENV === 'production'
|
||||
? 'https://keyvault.api.shumengya.top/api'
|
||||
: 'http://localhost:8080/api');
|
||||
|
||||
const PasswordManager = () => {
|
||||
const [entries, setEntries] = useState([]);
|
||||
const [filteredEntries, setFilteredEntries] = useState([]);
|
||||
const [searchKeyword, setSearchKeyword] = useState('');
|
||||
const [editingEntry, setEditingEntry] = useState(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// PWA 安装提示
|
||||
const [installPrompt, setInstallPrompt] = useState(null);
|
||||
const [showInstallBanner, setShowInstallBanner] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadEntries();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
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);
|
||||
const response = await axios.get(`${API_BASE}/entries`);
|
||||
setEntries(response.data.entries || []);
|
||||
} catch (error) {
|
||||
console.error('加载条目失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filterEntries = () => {
|
||||
if (!searchKeyword.trim()) {
|
||||
setFilteredEntries(entries);
|
||||
return;
|
||||
}
|
||||
|
||||
const keyword = searchKeyword.toLowerCase();
|
||||
const filtered = entries.filter(entry =>
|
||||
entry.account?.toLowerCase().includes(keyword) ||
|
||||
entry.username?.toLowerCase().includes(keyword) ||
|
||||
entry.email?.toLowerCase().includes(keyword) ||
|
||||
entry.website?.toLowerCase().includes(keyword) ||
|
||||
entry.officialName?.toLowerCase().includes(keyword) ||
|
||||
(entry.software && entry.software.toLowerCase().includes(keyword)) ||
|
||||
entry.tags?.toLowerCase().includes(keyword)
|
||||
);
|
||||
setFilteredEntries(filtered);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingEntry(null);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleEdit = (entry) => {
|
||||
setEditingEntry(entry);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
if (!window.confirm('确定要删除这条记录吗？')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await axios.delete(`${API_BASE}/entries/${id}`);
|
||||
loadEntries();
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error);
|
||||
alert('删除失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async (entryData) => {
|
||||
try {
|
||||
if (editingEntry) {
|
||||
await axios.put(`${API_BASE}/entries`, { ...entryData, id: editingEntry.id });
|
||||
} else {
|
||||
await axios.post(`${API_BASE}/entries`, entryData);
|
||||
}
|
||||
setShowForm(false);
|
||||
setEditingEntry(null);
|
||||
loadEntries();
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
alert('保存失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setShowForm(false);
|
||||
setEditingEntry(null);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="manager-loading">
|
||||
<div className="loading-spinner"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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
|
||||
src={`${process.env.PUBLIC_URL}/logo.png`}
|
||||
alt="Logo"
|
||||
className="nav-logo"
|
||||
/>
|
||||
<h1 className="nav-title">萌芽密码管理器</h1>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="manager-header">
|
||||
<button className="add-button" onClick={handleAdd}>
|
||||
+ 添加密码
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SearchBar
|
||||
keyword={searchKeyword}
|
||||
onKeywordChange={setSearchKeyword}
|
||||
/>
|
||||
|
||||
<PasswordList
|
||||
entries={filteredEntries}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
|
||||
{showForm && (
|
||||
<PasswordForm
|
||||
entry={editingEntry}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordManager;
|
||||
|
||||
@@ -1,76 +1,76 @@
|
||||
.search-bar-container {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 15px;
|
||||
padding: 12px 20px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: #4caf50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-icon svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.clear-button {
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
border: 1px solid rgba(244, 67, 54, 0.2);
|
||||
color: #f44336;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.clear-button svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clear-button:hover {
|
||||
background: rgba(244, 67, 54, 0.2);
|
||||
border-color: #f44336;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-bar {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.search-bar-container {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 15px;
|
||||
padding: 12px 20px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: #4caf50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-icon svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.clear-button {
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
border: 1px solid rgba(244, 67, 54, 0.2);
|
||||
color: #f44336;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.clear-button svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clear-button:hover {
|
||||
background: rgba(244, 67, 54, 0.2);
|
||||
border-color: #f44336;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-bar {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,45 +1,45 @@
|
||||
import React from 'react';
|
||||
import './SearchBar.css';
|
||||
|
||||
// SVG 图标组件
|
||||
const SearchIcon = () => (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<path d="m21 21-4.35-4.35"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ClearIcon = () => (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const SearchBar = ({ keyword, onKeywordChange }) => {
|
||||
return (
|
||||
<div className="search-bar-container">
|
||||
<div className="search-bar">
|
||||
<span className="search-icon"><SearchIcon /></span>
|
||||
<input
|
||||
type="text"
|
||||
value={keyword}
|
||||
onChange={(e) => onKeywordChange(e.target.value)}
|
||||
placeholder="搜索官方名称、账号、用户名、邮箱、网站、标签..."
|
||||
className="search-input"
|
||||
/>
|
||||
{keyword && (
|
||||
<button
|
||||
className="clear-button"
|
||||
onClick={() => onKeywordChange('')}
|
||||
title="清除搜索"
|
||||
>
|
||||
<ClearIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchBar;
|
||||
import React from 'react';
|
||||
import './SearchBar.css';
|
||||
|
||||
// SVG 图标组件
|
||||
const SearchIcon = () => (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<path d="m21 21-4.35-4.35"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ClearIcon = () => (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const SearchBar = ({ keyword, onKeywordChange }) => {
|
||||
return (
|
||||
<div className="search-bar-container">
|
||||
<div className="search-bar">
|
||||
<span className="search-icon"><SearchIcon /></span>
|
||||
<input
|
||||
type="text"
|
||||
value={keyword}
|
||||
onChange={(e) => onKeywordChange(e.target.value)}
|
||||
placeholder="搜索官方名称、账号、用户名、邮箱、网站、标签..."
|
||||
className="search-input"
|
||||
/>
|
||||
{keyword && (
|
||||
<button
|
||||
className="clear-button"
|
||||
onClick={() => onKeywordChange('')}
|
||||
title="清除搜索"
|
||||
>
|
||||
<ClearIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchBar;
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 50%, #ffd3a5 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 50%, #ffd3a5 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,28 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
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(
|
||||
<React.StrictMode>
|
||||
<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));
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
const { createProxyMiddleware } = require('http-proxy-middleware');
|
||||
|
||||
module.exports = function(app) {
|
||||
app.use(
|
||||
'/api',
|
||||
createProxyMiddleware({
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
})
|
||||
);
|
||||
};
|
||||
const { createProxyMiddleware } = require('http-proxy-middleware');
|
||||
|
||||
module.exports = function(app) {
|
||||
app.use(
|
||||
'/api',
|
||||
createProxyMiddleware({
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user