add all project code
This commit is contained in:
23
mengyakeyvault-frontend/.gitignore
vendored
Normal file
23
mengyakeyvault-frontend/.gitignore
vendored
Normal file
@@ -0,0 +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*
|
||||
17166
mengyakeyvault-frontend/package-lock.json
generated
Normal file
17166
mengyakeyvault-frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
mengyakeyvault-frontend/package.json
Normal file
35
mengyakeyvault-frontend/package.json
Normal file
@@ -0,0 +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"
|
||||
]
|
||||
}
|
||||
}
|
||||
BIN
mengyakeyvault-frontend/public/favicon.ico
Normal file
BIN
mengyakeyvault-frontend/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
16
mengyakeyvault-frontend/public/index.html
Normal file
16
mengyakeyvault-frontend/public/index.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!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>
|
||||
BIN
mengyakeyvault-frontend/public/logo.png
Normal file
BIN
mengyakeyvault-frontend/public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
BIN
mengyakeyvault-frontend/public/mengyakeyvault.png
Normal file
BIN
mengyakeyvault-frontend/public/mengyakeyvault.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
20
mengyakeyvault-frontend/src/App.css
Normal file
20
mengyakeyvault-frontend/src/App.css
Normal file
@@ -0,0 +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); }
|
||||
}
|
||||
57
mengyakeyvault-frontend/src/App.js
Normal file
57
mengyakeyvault-frontend/src/App.js
Normal file
@@ -0,0 +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;
|
||||
366
mengyakeyvault-frontend/src/components/PasswordForm.css
Normal file
366
mengyakeyvault-frontend/src/components/PasswordForm.css
Normal file
@@ -0,0 +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%;
|
||||
}
|
||||
}
|
||||
363
mengyakeyvault-frontend/src/components/PasswordForm.js
Normal file
363
mengyakeyvault-frontend/src/components/PasswordForm.js
Normal file
@@ -0,0 +1,363 @@
|
||||
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;
|
||||
542
mengyakeyvault-frontend/src/components/PasswordList.css
Normal file
542
mengyakeyvault-frontend/src/components/PasswordList.css
Normal file
@@ -0,0 +1,542 @@
|
||||
.password-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* 大屏幕（1600px以上）- 5列 */
|
||||
@media (min-width: 1600px) {
|
||||
.password-list {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* 中大屏（1200px-1599px）- 4列 */
|
||||
@media (max-width: 1599px) {
|
||||
.password-list {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* 中等屏幕（900px-1199px）- 3列 */
|
||||
@media (max-width: 1199px) {
|
||||
.password-list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏幕（768px以下，手机端）- 2列 */
|
||||
@media (max-width: 768px) {
|
||||
.password-list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕（480px以下）- 2列，更小的间距 */
|
||||
@media (max-width: 480px) {
|
||||
.password-list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.password-card {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 255, 248, 0.95) 100%);
|
||||
border-radius: 20px;
|
||||
padding: 18px;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(76, 175, 80, 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(200, 230, 201, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.password-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #66bb6a 0%, #4caf50 50%, #66bb6a 100%);
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.password-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(76, 175, 80, 0.15);
|
||||
border-color: rgba(76, 175, 80, 0.5);
|
||||
}
|
||||
|
||||
.password-card:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid rgba(232, 245, 233, 0.6);
|
||||
}
|
||||
|
||||
.card-logo-wrapper {
|
||||
flex-shrink: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.password-card:hover .card-logo-wrapper {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25);
|
||||
}
|
||||
|
||||
.card-logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.card-title-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-type {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1b5e20;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card-account-type {
|
||||
font-size: 11px;
|
||||
color: #4caf50;
|
||||
background: linear-gradient(135deg, rgba(102, 187, 106, 0.15) 0%, rgba(76, 175, 80, 0.1) 100%);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border: 1px solid rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
.website-link {
|
||||
font-size: 13px;
|
||||
color: #4caf50;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.website-link svg {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.website-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.website-link:hover {
|
||||
color: #2e7d32;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.website-link:hover svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.edit-button,
|
||||
.delete-button {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(76, 175, 80, 0.2);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.edit-button:hover {
|
||||
background: rgba(76, 175, 80, 0.15);
|
||||
border-color: #4caf50;
|
||||
transform: scale(1.1);
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
color: #f44336;
|
||||
border-color: rgba(244, 67, 54, 0.2);
|
||||
}
|
||||
|
||||
.delete-button:hover {
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
border-color: #f44336;
|
||||
transform: scale(1.1);
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-top: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
position: relative;
|
||||
padding: 6px 10px;
|
||||
background: rgba(248, 255, 248, 0.5);
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid transparent;
|
||||
min-height: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-row:hover {
|
||||
background: rgba(232, 245, 233, 0.7);
|
||||
border-color: rgba(200, 230, 201, 0.5);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.info-row:hover .copy-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
border: 1px solid rgba(76, 175, 80, 0.2);
|
||||
cursor: pointer;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
color: #4caf50;
|
||||
min-width: 32px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
border-color: #4caf50;
|
||||
transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.copy-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.copy-button svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #555;
|
||||
font-weight: 600;
|
||||
min-width: 52px;
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.password-value {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: 600;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.info-link {
|
||||
color: #4caf50;
|
||||
text-decoration: none;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.info-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 卡片底部标签 */
|
||||
.card-tags {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(232, 245, 233, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 11px;
|
||||
color: #4caf50;
|
||||
background: linear-gradient(135deg, rgba(200, 230, 201, 0.3) 0%, rgba(165, 214, 167, 0.2) 100%);
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 255, 248, 0.95) 100%);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
color: #4caf50;
|
||||
margin: 0 auto 20px;
|
||||
opacity: 0.6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-icon svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.password-card {
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-logo-wrapper {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.card-type {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-account-type {
|
||||
font-size: 10px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
font-size: 12px;
|
||||
padding: 5px 8px;
|
||||
gap: 6px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
min-width: 48px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
padding: 5px 7px;
|
||||
min-width: 28px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.copy-button svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.edit-button,
|
||||
.delete-button {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.edit-button svg,
|
||||
.delete-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
padding: 5px 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.password-card {
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-logo-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.card-type {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-account-type {
|
||||
font-size: 9px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
font-size: 11px;
|
||||
padding: 4px 6px;
|
||||
gap: 5px;
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
min-width: 44px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 60px 15px;
|
||||
}
|
||||
|
||||
.empty-icon svg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
margin-top: 6px;
|
||||
padding-top: 6px;
|
||||
padding: 4px 6px;
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
236
mengyakeyvault-frontend/src/components/PasswordList.js
Normal file
236
mengyakeyvault-frontend/src/components/PasswordList.js
Normal file
@@ -0,0 +1,236 @@
|
||||
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;
|
||||
101
mengyakeyvault-frontend/src/components/PasswordLogin.css
Normal file
101
mengyakeyvault-frontend/src/components/PasswordLogin.css
Normal file
@@ -0,0 +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;
|
||||
}
|
||||
}
|
||||
55
mengyakeyvault-frontend/src/components/PasswordLogin.js
Normal file
55
mengyakeyvault-frontend/src/components/PasswordLogin.js
Normal file
@@ -0,0 +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;
|
||||
126
mengyakeyvault-frontend/src/components/PasswordManager.css
Normal file
126
mengyakeyvault-frontend/src/components/PasswordManager.css
Normal file
@@ -0,0 +1,126 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
155
mengyakeyvault-frontend/src/components/PasswordManager.js
Normal file
155
mengyakeyvault-frontend/src/components/PasswordManager.js
Normal file
@@ -0,0 +1,155 @@
|
||||
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;
|
||||
76
mengyakeyvault-frontend/src/components/SearchBar.css
Normal file
76
mengyakeyvault-frontend/src/components/SearchBar.css
Normal file
@@ -0,0 +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;
|
||||
}
|
||||
}
|
||||
45
mengyakeyvault-frontend/src/components/SearchBar.js
Normal file
45
mengyakeyvault-frontend/src/components/SearchBar.js
Normal file
@@ -0,0 +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;
|
||||
21
mengyakeyvault-frontend/src/index.css
Normal file
21
mengyakeyvault-frontend/src/index.css
Normal file
@@ -0,0 +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;
|
||||
}
|
||||
11
mengyakeyvault-frontend/src/index.js
Normal file
11
mengyakeyvault-frontend/src/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
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>
|
||||
);
|
||||
11
mengyakeyvault-frontend/src/setupProxy.js
Normal file
11
mengyakeyvault-frontend/src/setupProxy.js
Normal file
@@ -0,0 +1,11 @@
|
||||
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