add all project code
This commit is contained in:
10
build_frontend.bat
Normal file
10
build_frontend.bat
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
@echo off
|
||||||
|
chcp 65001 >nul
|
||||||
|
echo 构建前端项目...
|
||||||
|
cd mengyakeyvault-frontend
|
||||||
|
if not exist node_modules (
|
||||||
|
echo 正在安装依赖...
|
||||||
|
call npm install
|
||||||
|
)
|
||||||
|
npm run build
|
||||||
|
echo 构建完成！输出目录：mengyakeyvault-frontend\build
|
||||||
14
mengyakeyvault-backend/.dockerignore
Normal file
14
mengyakeyvault-backend/.dockerignore
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
data/
|
||||||
|
*.exe
|
||||||
|
*.exe~
|
||||||
|
*.dll
|
||||||
|
*.so
|
||||||
|
*.dylib
|
||||||
|
*.test
|
||||||
|
*.out
|
||||||
|
go.work
|
||||||
|
.git
|
||||||
|
.gitignore
|
||||||
|
README.md
|
||||||
|
docker-compose.yml
|
||||||
|
Dockerfile
|
||||||
9
mengyakeyvault-backend/.gitignore
vendored
Normal file
9
mengyakeyvault-backend/.gitignore
vendored
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
data/data.json
|
||||||
|
*.exe
|
||||||
|
*.exe~
|
||||||
|
*.dll
|
||||||
|
*.so
|
||||||
|
*.dylib
|
||||||
|
*.test
|
||||||
|
*.out
|
||||||
|
go.work
|
||||||
40
mengyakeyvault-backend/Dockerfile
Normal file
40
mengyakeyvault-backend/Dockerfile
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
# 使用官方 Go 镜像作为构建环境
|
||||||
|
FROM golang:1.21-alpine AS builder
|
||||||
|
|
||||||
|
# 设置工作目录
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# 安装必要的依赖
|
||||||
|
RUN apk add --no-cache git
|
||||||
|
|
||||||
|
# 复制 go mod 文件
|
||||||
|
COPY go.mod go.sum ./
|
||||||
|
|
||||||
|
# 下载依赖
|
||||||
|
RUN go mod download
|
||||||
|
|
||||||
|
# 复制源代码
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# 构建应用
|
||||||
|
RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o main .
|
||||||
|
|
||||||
|
# 使用轻量级镜像作为运行环境
|
||||||
|
FROM alpine:latest
|
||||||
|
|
||||||
|
# 安装 ca-certificates 用于 HTTPS 请求
|
||||||
|
RUN apk --no-cache add ca-certificates
|
||||||
|
|
||||||
|
WORKDIR /root/
|
||||||
|
|
||||||
|
# 从构建阶段复制二进制文件
|
||||||
|
COPY --from=builder /app/main .
|
||||||
|
|
||||||
|
# 创建数据目录
|
||||||
|
RUN mkdir -p /root/data
|
||||||
|
|
||||||
|
# 暴露端口
|
||||||
|
EXPOSE 8080
|
||||||
|
|
||||||
|
# 运行应用
|
||||||
|
CMD ["./main"]
|
||||||
44
mengyakeyvault-backend/README.md
Normal file
44
mengyakeyvault-backend/README.md
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
# 萌芽密码管理器 - 后端
|
||||||
|
|
||||||
|
## Docker 部署
|
||||||
|
|
||||||
|
### 使用 Docker Compose 部署
|
||||||
|
|
||||||
|
1. **构建并启动服务**
|
||||||
|
```bash
|
||||||
|
docker-compose up -d --build
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **查看日志**
|
||||||
|
```bash
|
||||||
|
docker-compose logs -f
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **停止服务**
|
||||||
|
```bash
|
||||||
|
docker-compose down
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **重启服务**
|
||||||
|
```bash
|
||||||
|
docker-compose restart
|
||||||
|
```
|
||||||
|
|
||||||
|
### 配置说明
|
||||||
|
|
||||||
|
- **端口映射**: 容器内 8080 端口映射到主机 6464 端口
|
||||||
|
- **数据持久化**: 数据存储在 `/shumengya/docker/mengyakeyvault-backend/data/` 目录
|
||||||
|
- **API 地址**: 通过反向代理访问 `https://keyvault.api.shumengya.top`
|
||||||
|
|
||||||
|
### 数据文件
|
||||||
|
|
||||||
|
数据文件位置：`/shumengya/docker/mengyakeyvault-backend/data/data.json`
|
||||||
|
|
||||||
|
### 本地开发
|
||||||
|
|
||||||
|
```bash
|
||||||
|
go mod tidy
|
||||||
|
go run main.go
|
||||||
|
```
|
||||||
|
|
||||||
|
服务将在 `http://localhost:8080` 启动
|
||||||
22
mengyakeyvault-backend/docker-compose.yml
Normal file
22
mengyakeyvault-backend/docker-compose.yml
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
version: '3.8'
|
||||||
|
|
||||||
|
services:
|
||||||
|
mengyakeyvault-backend:
|
||||||
|
build:
|
||||||
|
context: .
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
container_name: mengyakeyvault-backend
|
||||||
|
restart: unless-stopped
|
||||||
|
ports:
|
||||||
|
- "6464:8080"
|
||||||
|
volumes:
|
||||||
|
- /shumengya/docker/mengyakeyvault-backend/data:/root/data
|
||||||
|
working_dir: /root
|
||||||
|
environment:
|
||||||
|
- TZ=Asia/Shanghai
|
||||||
|
networks:
|
||||||
|
- mengyakeyvault-network
|
||||||
|
|
||||||
|
networks:
|
||||||
|
mengyakeyvault-network:
|
||||||
|
driver: bridge
|
||||||
37
mengyakeyvault-backend/go.mod
Normal file
37
mengyakeyvault-backend/go.mod
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
module mengyakeyvault-backend
|
||||||
|
|
||||||
|
go 1.21
|
||||||
|
|
||||||
|
require (
|
||||||
|
github.com/gin-contrib/cors v1.5.0
|
||||||
|
github.com/gin-gonic/gin v1.9.1
|
||||||
|
)
|
||||||
|
|
||||||
|
require (
|
||||||
|
github.com/bytedance/sonic v1.10.1 // indirect
|
||||||
|
github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d // indirect
|
||||||
|
github.com/chenzhuoyu/iasm v0.9.0 // indirect
|
||||||
|
github.com/gabriel-vasile/mimetype v1.4.2 // indirect
|
||||||
|
github.com/gin-contrib/sse v0.1.0 // indirect
|
||||||
|
github.com/go-playground/locales v0.14.1 // indirect
|
||||||
|
github.com/go-playground/universal-translator v0.18.1 // indirect
|
||||||
|
github.com/go-playground/validator/v10 v10.15.5 // indirect
|
||||||
|
github.com/goccy/go-json v0.10.2 // indirect
|
||||||
|
github.com/json-iterator/go v1.1.12 // indirect
|
||||||
|
github.com/klauspost/cpuid/v2 v2.2.5 // indirect
|
||||||
|
github.com/kr/text v0.2.0 // indirect
|
||||||
|
github.com/leodido/go-urn v1.2.4 // indirect
|
||||||
|
github.com/mattn/go-isatty v0.0.19 // indirect
|
||||||
|
github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
|
||||||
|
github.com/modern-go/reflect2 v1.0.2 // indirect
|
||||||
|
github.com/pelletier/go-toml/v2 v2.1.0 // indirect
|
||||||
|
github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
|
||||||
|
github.com/ugorji/go/codec v1.2.11 // indirect
|
||||||
|
golang.org/x/arch v0.5.0 // indirect
|
||||||
|
golang.org/x/crypto v0.14.0 // indirect
|
||||||
|
golang.org/x/net v0.16.0 // indirect
|
||||||
|
golang.org/x/sys v0.13.0 // indirect
|
||||||
|
golang.org/x/text v0.13.0 // indirect
|
||||||
|
google.golang.org/protobuf v1.31.0 // indirect
|
||||||
|
gopkg.in/yaml.v3 v3.0.1 // indirect
|
||||||
|
)
|
||||||
102
mengyakeyvault-backend/go.sum
Normal file
102
mengyakeyvault-backend/go.sum
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
github.com/bytedance/sonic v1.5.0/go.mod h1:ED5hyg4y6t3/9Ku1R6dU/4KyJ48DZ4jPhfY1O2AihPM=
|
||||||
|
github.com/bytedance/sonic v1.10.0-rc/go.mod h1:ElCzW+ufi8qKqNW0FY314xriJhyJhuoJ3gFZdAHF7NM=
|
||||||
|
github.com/bytedance/sonic v1.10.1 h1:7a1wuFXL1cMy7a3f7/VFcEtriuXQnUBhtoVfOZiaysc=
|
||||||
|
github.com/bytedance/sonic v1.10.1/go.mod h1:iZcSUejdk5aukTND/Eu/ivjQuEL0Cu9/rf50Hi0u/g4=
|
||||||
|
github.com/chenzhuoyu/base64x v0.0.0-20211019084208-fb5309c8db06/go.mod h1:DH46F32mSOjUmXrMHnKwZdA8wcEefY7UVqBKYGjpdQY=
|
||||||
|
github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311/go.mod h1:b583jCggY9gE99b6G5LEC39OIiVsWj+R97kbl5odCEk=
|
||||||
|
github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d h1:77cEq6EriyTZ0g/qfRdp61a3Uu/AWrgIq2s0ClJV1g0=
|
||||||
|
github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d/go.mod h1:8EPpVsBuRksnlj1mLy4AWzRNQYxauNi62uWcE3to6eA=
|
||||||
|
github.com/chenzhuoyu/iasm v0.9.0 h1:9fhXjVzq5hUy2gkhhgHl95zG2cEAhw9OSGs8toWWAwo=
|
||||||
|
github.com/chenzhuoyu/iasm v0.9.0/go.mod h1:Xjy2NpN3h7aUqeqM+woSuuvxmIe6+DDsiNLIrkAmYog=
|
||||||
|
github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
|
||||||
|
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
|
||||||
|
github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
|
||||||
|
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
|
||||||
|
github.com/gabriel-vasile/mimetype v1.4.2 h1:w5qFW6JKBz9Y393Y4q372O9A7cUSequkh1Q7OhCmWKU=
|
||||||
|
github.com/gabriel-vasile/mimetype v1.4.2/go.mod h1:zApsH/mKG4w07erKIaJPFiX0Tsq9BFQgN3qGY5GnNgA=
|
||||||
|
github.com/gin-contrib/cors v1.5.0 h1:DgGKV7DDoOn36DFkNtbHrjoRiT5ExCe+PC9/xp7aKvk=
|
||||||
|
github.com/gin-contrib/cors v1.5.0/go.mod h1:TvU7MAZ3EwrPLI2ztzTt3tqgvBCq+wn8WpZmfADjupI=
|
||||||
|
github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
|
||||||
|
github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
|
||||||
|
github.com/gin-gonic/gin v1.9.1 h1:4idEAncQnU5cB7BeOkPtxjfCSye0AAm1R0RVIqJ+Jmg=
|
||||||
|
github.com/gin-gonic/gin v1.9.1/go.mod h1:hPrL7YrpYKXt5YId3A/Tnip5kqbEAP+KLuI3SUcPTeU=
|
||||||
|
github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
|
||||||
|
github.com/go-playground/assert/v2 v2.2.0/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
|
||||||
|
github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
|
||||||
|
github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
|
||||||
|
github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
|
||||||
|
github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91TpwSH2VMlDf28Uj24BCp08ZFTUY=
|
||||||
|
github.com/go-playground/validator/v10 v10.15.5 h1:LEBecTWb/1j5TNY1YYG2RcOUN3R7NLylN+x8TTueE24=
|
||||||
|
github.com/go-playground/validator/v10 v10.15.5/go.mod h1:9iXMNT7sEkjXb0I+enO7QXmzG6QCsPWY4zveKFVRSyU=
|
||||||
|
github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
|
||||||
|
github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
|
||||||
|
github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=
|
||||||
|
github.com/google/go-cmp v0.5.5 h1:Khx7svrCpmxxtHBq5j2mp/xVjsi8hQMfNLvJFAlrGgU=
|
||||||
|
github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
|
||||||
|
github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
|
||||||
|
github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
|
||||||
|
github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
|
||||||
|
github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
|
||||||
|
github.com/klauspost/cpuid/v2 v2.2.5 h1:0E5MSMDEoAulmXNFquVs//DdoomxaoTY1kUhbc/qbZg=
|
||||||
|
github.com/klauspost/cpuid/v2 v2.2.5/go.mod h1:Lcz8mBdAVJIBVzewtcLocK12l3Y+JytZYpaMropDUws=
|
||||||
|
github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
|
||||||
|
github.com/kr/pretty v0.3.0 h1:WgNl7dwNpEZ6jJ9k1snq4pZsg7DOEN8hP9Xw0Tsjwk0=
|
||||||
|
github.com/kr/pretty v0.3.0/go.mod h1:640gp4NfQd8pI5XOwp5fnNeVWj67G7CFk/SaSQn7NBk=
|
||||||
|
github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
|
||||||
|
github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
|
||||||
|
github.com/leodido/go-urn v1.2.4 h1:XlAE/cm/ms7TE/VMVoduSpNBoyc2dOxHs5MZSwAN63Q=
|
||||||
|
github.com/leodido/go-urn v1.2.4/go.mod h1:7ZrI8mTSeBSHl/UaRyKQW1qZeMgak41ANeCNaVckg+4=
|
||||||
|
github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
|
||||||
|
github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
|
||||||
|
github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
|
||||||
|
github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w8PVh93nsPXa1VrQ6jlwL5oN8l14QlcNfg=
|
||||||
|
github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
|
||||||
|
github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
|
||||||
|
github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
|
||||||
|
github.com/pelletier/go-toml/v2 v2.1.0 h1:FnwAJ4oYMvbT/34k9zzHuZNrhlz48GB3/s6at6/MHO4=
|
||||||
|
github.com/pelletier/go-toml/v2 v2.1.0/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
|
||||||
|
github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
|
||||||
|
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
|
||||||
|
github.com/rogpeppe/go-internal v1.8.0 h1:FCbCCtXNOY3UtUuHUYaghJg4y7Fd14rXifAYUAtL9R8=
|
||||||
|
github.com/rogpeppe/go-internal v1.8.0/go.mod h1:WmiCO8CzOY8rg0OYDC4/i/2WRWAB6poM+XZ2dLUbcbE=
|
||||||
|
github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
|
||||||
|
github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
|
||||||
|
github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
|
||||||
|
github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
|
||||||
|
github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
|
||||||
|
github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
|
||||||
|
github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
|
||||||
|
github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
|
||||||
|
github.com/stretchr/testify v1.8.2/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
|
||||||
|
github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
|
||||||
|
github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
|
||||||
|
github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
|
||||||
|
github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
|
||||||
|
github.com/ugorji/go/codec v1.2.11 h1:BMaWp1Bb6fHwEtbplGBGJ498wD+LKlNSl25MjdZY4dU=
|
||||||
|
github.com/ugorji/go/codec v1.2.11/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
|
||||||
|
golang.org/x/arch v0.0.0-20210923205945-b76863e36670/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
|
||||||
|
golang.org/x/arch v0.5.0 h1:jpGode6huXQxcskEIpOCvrU+tzo81b6+oFLUYXWtH/Y=
|
||||||
|
golang.org/x/arch v0.5.0/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
|
||||||
|
golang.org/x/crypto v0.14.0 h1:wBqGXzWJW6m1XrIKlAH0Hs1JJ7+9KBwnIO8v66Q9cHc=
|
||||||
|
golang.org/x/crypto v0.14.0/go.mod h1:MVFd36DqK4CsrnJYDkBA3VC4m2GkXAM0PvzMCn4JQf4=
|
||||||
|
golang.org/x/net v0.16.0 h1:7eBu7KsSvFDtSXUIDbh3aqlK4DPsZ1rByC8PFfBThos=
|
||||||
|
golang.org/x/net v0.16.0/go.mod h1:NxSsAGuq816PNPmqtQdLE42eU2Fs7NoRIZrHJAlaCOE=
|
||||||
|
golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||||
|
golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||||
|
golang.org/x/sys v0.13.0 h1:Af8nKPmuFypiUBjVoU9V20FiaFXOcuZI21p0ycVYYGE=
|
||||||
|
golang.org/x/sys v0.13.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||||
|
golang.org/x/text v0.13.0 h1:ablQoSUd0tRdKxZewP80B+BaqeKJuVhuRxj/dkrun3k=
|
||||||
|
golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
|
||||||
|
golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543 h1:E7g+9GITq07hpfrRu66IVDexMakfv52eLZ2CXBWiKr4=
|
||||||
|
golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
|
||||||
|
google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw=
|
||||||
|
google.golang.org/protobuf v1.31.0 h1:g0LDEJHgrBl9N9r17Ru3sqWhkIx2NB67okBHPwC7hs8=
|
||||||
|
google.golang.org/protobuf v1.31.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
|
||||||
|
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
|
||||||
|
gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
|
||||||
|
gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=
|
||||||
|
gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
|
||||||
|
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
|
||||||
|
gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
|
||||||
|
nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
|
||||||
|
rsc.io/pdf v0.1.1/go.mod h1:n8OzWcQ6Sp37PL01nO98y4iUCRdTGarVfzxY20ICaU4=
|
||||||
271
mengyakeyvault-backend/main.go
Normal file
271
mengyakeyvault-backend/main.go
Normal file
@@ -0,0 +1,271 @@
|
|||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"encoding/json"
|
||||||
|
"fmt"
|
||||||
|
"io/ioutil"
|
||||||
|
"log"
|
||||||
|
"net/http"
|
||||||
|
"os"
|
||||||
|
"strings"
|
||||||
|
"sync"
|
||||||
|
|
||||||
|
"github.com/gin-contrib/cors"
|
||||||
|
"github.com/gin-gonic/gin"
|
||||||
|
)
|
||||||
|
|
||||||
|
const (
|
||||||
|
DefaultPassword = "shumengya520"
|
||||||
|
DataFile = "data/data.json"
|
||||||
|
)
|
||||||
|
|
||||||
|
func init() {
|
||||||
|
// 确保数据目录存在
|
||||||
|
if err := os.MkdirAll("data", 0755); err != nil {
|
||||||
|
log.Printf("创建数据目录失败: %v", err)
|
||||||
|
}
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
type PasswordEntry struct {
|
||||||
|
ID int `json:"id"`
|
||||||
|
AccountType string `json:"accountType"` // 账号类型（网站/软件）
|
||||||
|
Account string `json:"account"` // 账号
|
||||||
|
Password string `json:"password"` // 密码
|
||||||
|
Username string `json:"username"` // 用户名
|
||||||
|
Phone string `json:"phone"` // 手机号
|
||||||
|
Email string `json:"email"` // 邮箱
|
||||||
|
Website string `json:"website"` // 网站地址
|
||||||
|
OfficialName string `json:"officialName"` // 官方名称（必填）
|
||||||
|
Tags string `json:"tags"` // 标签
|
||||||
|
Logo string `json:"logo"` // Logo图标URL
|
||||||
|
}
|
||||||
|
|
||||||
|
type PasswordStore struct {
|
||||||
|
Entries []PasswordEntry `json:"entries"`
|
||||||
|
mu sync.RWMutex
|
||||||
|
}
|
||||||
|
|
||||||
|
var store = &PasswordStore{
|
||||||
|
Entries: make([]PasswordEntry, 0),
|
||||||
|
}
|
||||||
|
|
||||||
|
func loadData() {
|
||||||
|
store.mu.Lock()
|
||||||
|
defer store.mu.Unlock()
|
||||||
|
|
||||||
|
if _, err := os.Stat(DataFile); os.IsNotExist(err) {
|
||||||
|
// 文件不存在，创建空数据
|
||||||
|
store.Entries = make([]PasswordEntry, 0)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
data, err := ioutil.ReadFile(DataFile)
|
||||||
|
if err != nil {
|
||||||
|
log.Printf("读取数据文件失败: %v", err)
|
||||||
|
store.Entries = make([]PasswordEntry, 0)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if len(data) == 0 {
|
||||||
|
store.Entries = make([]PasswordEntry, 0)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
err = json.Unmarshal(data, store)
|
||||||
|
if err != nil {
|
||||||
|
log.Printf("解析数据文件失败: %v", err)
|
||||||
|
store.Entries = make([]PasswordEntry, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
func saveData() error {
|
||||||
|
store.mu.RLock()
|
||||||
|
defer store.mu.RUnlock()
|
||||||
|
|
||||||
|
data, err := json.MarshalIndent(store, "", " ")
|
||||||
|
if err != nil {
|
||||||
|
return err
|
||||||
|
}
|
||||||
|
|
||||||
|
return ioutil.WriteFile(DataFile, data, 0644)
|
||||||
|
}
|
||||||
|
|
||||||
|
func verifyPassword(c *gin.Context) {
|
||||||
|
var req struct {
|
||||||
|
Password string `json:"password"`
|
||||||
|
}
|
||||||
|
|
||||||
|
if err := c.ShouldBindJSON(&req); err != nil {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": "无效的请求"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if req.Password == DefaultPassword {
|
||||||
|
c.JSON(http.StatusOK, gin.H{"success": true, "message": "密码验证成功"})
|
||||||
|
} else {
|
||||||
|
c.JSON(http.StatusUnauthorized, gin.H{"error": "密码错误"})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
func getEntries(c *gin.Context) {
|
||||||
|
store.mu.RLock()
|
||||||
|
defer store.mu.RUnlock()
|
||||||
|
|
||||||
|
keyword := c.Query("keyword")
|
||||||
|
if keyword == "" {
|
||||||
|
c.JSON(http.StatusOK, gin.H{"entries": store.Entries})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关键词搜索
|
||||||
|
keyword = strings.ToLower(keyword)
|
||||||
|
var results []PasswordEntry
|
||||||
|
for _, entry := range store.Entries {
|
||||||
|
if strings.Contains(strings.ToLower(entry.AccountType), keyword) ||
|
||||||
|
strings.Contains(strings.ToLower(entry.Account), keyword) ||
|
||||||
|
strings.Contains(strings.ToLower(entry.Username), keyword) ||
|
||||||
|
strings.Contains(strings.ToLower(entry.Email), keyword) ||
|
||||||
|
strings.Contains(strings.ToLower(entry.Website), keyword) ||
|
||||||
|
strings.Contains(strings.ToLower(entry.OfficialName), keyword) ||
|
||||||
|
strings.Contains(strings.ToLower(entry.Tags), keyword) {
|
||||||
|
results = append(results, entry)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
c.JSON(http.StatusOK, gin.H{"entries": results})
|
||||||
|
}
|
||||||
|
|
||||||
|
func addEntry(c *gin.Context) {
|
||||||
|
var entry PasswordEntry
|
||||||
|
if err := c.ShouldBindJSON(&entry); err != nil {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": "无效的请求数据"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证必填字段
|
||||||
|
if entry.OfficialName == "" {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": "官方名称不能为空"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if entry.AccountType != "网站" && entry.AccountType != "软件" {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": "账号类型必须是'网站'或'软件'"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
store.mu.Lock()
|
||||||
|
// 生成新ID
|
||||||
|
maxID := 0
|
||||||
|
for _, e := range store.Entries {
|
||||||
|
if e.ID > maxID {
|
||||||
|
maxID = e.ID
|
||||||
|
}
|
||||||
|
}
|
||||||
|
entry.ID = maxID + 1
|
||||||
|
store.Entries = append(store.Entries, entry)
|
||||||
|
store.mu.Unlock()
|
||||||
|
|
||||||
|
if err := saveData(); err != nil {
|
||||||
|
c.JSON(http.StatusInternalServerError, gin.H{"error": "保存失败"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
c.JSON(http.StatusOK, gin.H{"success": true, "entry": entry})
|
||||||
|
}
|
||||||
|
|
||||||
|
func updateEntry(c *gin.Context) {
|
||||||
|
var entry PasswordEntry
|
||||||
|
if err := c.ShouldBindJSON(&entry); err != nil {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": "无效的请求数据"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证必填字段
|
||||||
|
if entry.OfficialName == "" {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": "官方名称不能为空"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if entry.AccountType != "网站" && entry.AccountType != "软件" {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": "账号类型必须是'网站'或'软件'"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
store.mu.Lock()
|
||||||
|
found := false
|
||||||
|
for i, e := range store.Entries {
|
||||||
|
if e.ID == entry.ID {
|
||||||
|
store.Entries[i] = entry
|
||||||
|
found = true
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
store.mu.Unlock()
|
||||||
|
|
||||||
|
if !found {
|
||||||
|
c.JSON(http.StatusNotFound, gin.H{"error": "条目不存在"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if err := saveData(); err != nil {
|
||||||
|
c.JSON(http.StatusInternalServerError, gin.H{"error": "保存失败"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
c.JSON(http.StatusOK, gin.H{"success": true, "entry": entry})
|
||||||
|
}
|
||||||
|
|
||||||
|
func deleteEntry(c *gin.Context) {
|
||||||
|
id := c.Param("id")
|
||||||
|
var entryID int
|
||||||
|
fmt.Sscanf(id, "%d", &entryID)
|
||||||
|
|
||||||
|
store.mu.Lock()
|
||||||
|
found := false
|
||||||
|
for i, e := range store.Entries {
|
||||||
|
if e.ID == entryID {
|
||||||
|
store.Entries = append(store.Entries[:i], store.Entries[i+1:]...)
|
||||||
|
found = true
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
store.mu.Unlock()
|
||||||
|
|
||||||
|
if !found {
|
||||||
|
c.JSON(http.StatusNotFound, gin.H{"error": "条目不存在"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if err := saveData(); err != nil {
|
||||||
|
c.JSON(http.StatusInternalServerError, gin.H{"error": "保存失败"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
c.JSON(http.StatusOK, gin.H{"success": true})
|
||||||
|
}
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
r := gin.Default()
|
||||||
|
|
||||||
|
// 配置CORS
|
||||||
|
config := cors.DefaultConfig()
|
||||||
|
config.AllowAllOrigins = true
|
||||||
|
config.AllowMethods = []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"}
|
||||||
|
config.AllowHeaders = []string{"Origin", "Content-Type", "Accept", "Authorization"}
|
||||||
|
r.Use(cors.New(config))
|
||||||
|
|
||||||
|
// API路由
|
||||||
|
api := r.Group("/api")
|
||||||
|
{
|
||||||
|
api.POST("/verify", verifyPassword)
|
||||||
|
api.GET("/entries", getEntries)
|
||||||
|
api.POST("/entries", addEntry)
|
||||||
|
api.PUT("/entries", updateEntry)
|
||||||
|
api.DELETE("/entries/:id", deleteEntry)
|
||||||
|
}
|
||||||
|
|
||||||
|
port := ":8080"
|
||||||
|
log.Printf("服务器启动在端口 %s", port)
|
||||||
|
if err := r.Run(port); err != nil {
|
||||||
|
log.Fatal(err)
|
||||||
|
}
|
||||||
|
}
|
||||||
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,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
6
start_backend.bat
Normal file
6
start_backend.bat
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
@echo off
|
||||||
|
chcp 65001 >nul
|
||||||
|
echo 启动后端服务器...
|
||||||
|
cd mengyakeyvault-backend
|
||||||
|
go mod tidy
|
||||||
|
go run main.go
|
||||||
9
start_frontend.bat
Normal file
9
start_frontend.bat
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
@echo off
|
||||||
|
chcp 65001 >nul
|
||||||
|
echo 启动前端开发服务器...
|
||||||
|
cd mengyakeyvault-frontend
|
||||||
|
if not exist node_modules (
|
||||||
|
echo 正在安装依赖...
|
||||||
|
call npm install
|
||||||
|
)
|
||||||
|
npm start
|
||||||
Reference in New Issue
Block a user