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

chore: sync project updates

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

50
.gitignore vendored
View File

@@ -1,25 +1,25 @@
# Node/React # Node/React
**/node_modules/ **/node_modules/
**/build/ **/build/
**/coverage/ **/coverage/
# Go # Go
**/*.exe **/*.exe
**/*.test **/*.test
**/*.out **/*.out
**/*.dll **/*.dll
**/*.so **/*.so
**/*.dylib **/*.dylib
# Data files # Data files
**/data/data.json **/data/data.json
# Logs # Logs
*.log *.log
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
# OS # OS
.DS_Store .DS_Store
Thumbs.db Thumbs.db

312
README.md
View File

@@ -1,156 +1,156 @@
# 萌芽密码管理器 # 萌芽密码管理器
一个基于 Go 后端和 React 前端的轻量密码管理器应用，支持本地 JSON 存储与关键词搜索。 一个基于 Go 后端和 React 前端的轻量密码管理器应用，支持本地 JSON 存储与关键词搜索。
## 功能特性 ## 功能特性
- 密码保护访问（默认密码：shumengya520） - 密码保护访问（默认密码：shumengya520）
- JSON 文件存储（无需数据库） - JSON 文件存储（无需数据库）
- 关键词搜索 - 关键词搜索
- 添加、编辑、删除密码记录 - 添加、编辑、删除密码记录
- 响应式布局 - 响应式布局
## 项目结构 ## 项目结构
``` ```
mengyakeyvault/ mengyakeyvault/
├── mengyakeyvault-backend/ # Go 后端 ├── mengyakeyvault-backend/ # Go 后端
│ ├── main.go # 主程序 │ ├── main.go # 主程序
│ ├── go.mod # Go 模块文件 │ ├── go.mod # Go 模块文件
│ └── data/ # 数据目录 │ └── data/ # 数据目录
├── mengyakeyvault-frontend/ # React 前端 ├── mengyakeyvault-frontend/ # React 前端
│ ├── src/ # 源代码 │ ├── src/ # 源代码
│ ├── public/ # 公共文件 │ ├── public/ # 公共文件
│ └── package.json # 依赖配置 │ └── package.json # 依赖配置
├── start_backend.bat # 启动后端脚本 ├── start_backend.bat # 启动后端脚本
├── start_frontend.bat # 启动前端脚本 ├── start_frontend.bat # 启动前端脚本
└── build_frontend.bat # 构建前端脚本 └── build_frontend.bat # 构建前端脚本
``` ```
## 环境要求 ## 环境要求
- Go 1.21+ - Go 1.21+
- Node.js 18+ / npm - Node.js 18+ / npm
## 快速开始 ## 快速开始
### 1. 启动后端 ### 1. 启动后端
```bash ```bash
# Windows # Windows
start_backend.bat start_backend.bat
# 或手动启动 # 或手动启动
cd mengyakeyvault-backend cd mengyakeyvault-backend
go mod tidy go mod tidy
go run main.go go run main.go
``` ```
后端将启动在 `http://localhost:8080`。 后端将启动在 `http://localhost:8080`。
### 2. 启动前端 ### 2. 启动前端
```bash ```bash
# Windows # Windows
start_frontend.bat start_frontend.bat
# 或手动启动 # 或手动启动
cd mengyakeyvault-frontend cd mengyakeyvault-frontend
npm install npm install
npm start npm start
``` ```
前端将启动在 `http://localhost:3000`。 前端将启动在 `http://localhost:3000`。
### 3. 访问应用 ### 3. 访问应用
打开浏览器访问 `http://localhost:3000`，输入默认密码 `shumengya520` 即可使用。 打开浏览器访问 `http://localhost:3000`，输入默认密码 `shumengya520` 即可使用。
## 数据格式 ## 数据格式
密码记录包含以下字段： 密码记录包含以下字段：
- **账号类型**：网站、软件 - **账号类型**：网站、软件
- **账号**：登录账号 - **账号**：登录账号
- **密码**：登录密码 - **密码**：登录密码
- **用户名**：用户名 - **用户名**：用户名
- **手机号**：手机号码 - **手机号**：手机号码
- **邮箱**：邮箱地址 - **邮箱**：邮箱地址
- **网站地址**：网站 URL - **网站地址**：网站 URL
- **软件名称**：软件名称 - **软件名称**：软件名称
- **标签**：分类标签 - **标签**：分类标签
## API 接口 ## API 接口
- `POST /api/verify` - 验证密码 - `POST /api/verify` - 验证密码
- `GET /api/entries?keyword=xxx` - 获取密码列表（支持关键词搜索） - `GET /api/entries?keyword=xxx` - 获取密码列表（支持关键词搜索）
- `POST /api/entries` - 添加密码记录 - `POST /api/entries` - 添加密码记录
- `PUT /api/entries` - 更新密码记录 - `PUT /api/entries` - 更新密码记录
- `DELETE /api/entries/:id` - 删除密码记录 - `DELETE /api/entries/:id` - 删除密码记录
## 技术栈 ## 技术栈
### 后端 ### 后端
- Go 1.21+ - Go 1.21+
- Gin - Gin
- JSON 文件存储 - JSON 文件存储
### 前端 ### 前端
- React 18 - React 18
- Axios - Axios
- CSS3 - CSS3
## Docker 部署 ## Docker 部署
### 后端部署 ### 后端部署
1. 进入后端目录 1. 进入后端目录
```bash ```bash
cd mengyakeyvault-backend cd mengyakeyvault-backend
``` ```
2. 使用 Docker Compose 启动 2. 使用 Docker Compose 启动
```bash ```bash
docker-compose up -d --build docker-compose up -d --build
``` ```
3. 查看日志 3. 查看日志
```bash ```bash
docker-compose logs -f docker-compose logs -f
``` ```
### 部署配置 ### 部署配置
- 容器端口: 8080 - 容器端口: 8080
- 主机端口: 6464 - 主机端口: 6464
- 数据持久化路径: `/shumengya/docker/mengyakeyvault-backend/data/` - 数据持久化路径: `/shumengya/docker/mengyakeyvault-backend/data/`
- API 域名: `https://keyvault.api.shumengya.top` - API 域名: `https://keyvault.api.shumengya.top`
### 生产环境前端配置 ### 生产环境前端配置
前端在生产环境构建时会自动使用 `https://keyvault.api.shumengya.top/api` 作为 API 地址。 前端在生产环境构建时会自动使用 `https://keyvault.api.shumengya.top/api` 作为 API 地址。
构建生产版本: 构建生产版本:
```bash ```bash
cd mengyakeyvault-frontend cd mengyakeyvault-frontend
npm run build npm run build
``` ```
## 注意事项 ## 注意事项
- 密码验证成功后会在浏览器本地存储中缓存 - 密码验证成功后会在浏览器本地存储中缓存
- Docker 部署数据存储在 `/shumengya/docker/mengyakeyvault-backend/data/data.json` - Docker 部署数据存储在 `/shumengya/docker/mengyakeyvault-backend/data/data.json`
- 建议定期备份数据文件 - 建议定期备份数据文件
- 确保 favicon.ico 和 logo.png 已放置在 `mengyakeyvault-frontend/public/` 目录下 - 确保 favicon.ico 和 logo.png 已放置在 `mengyakeyvault-frontend/public/` 目录下
## 常见问题 ## 常见问题
### 数据文件在哪里 ### 数据文件在哪里
- 本地开发: `mengyakeyvault-backend/data/data.json` - 本地开发: `mengyakeyvault-backend/data/data.json`
- Docker 部署: `/shumengya/docker/mengyakeyvault-backend/data/data.json` - Docker 部署: `/shumengya/docker/mengyakeyvault-backend/data/data.json`
### 如何修改默认密码 ### 如何修改默认密码
修改后端常量 `DefaultPassword` 后重启服务即可。 修改后端常量 `DefaultPassword` 后重启服务即可。

19
build_frontend.bat
View File

@@ -1,10 +1,9 @@
@echo off @echo off
chcp 65001 >nul chcp 65001 >nul
echo 构建前端项目... echo 构建前端项目...
cd mengyakeyvault-frontend cd mengyakeyvault-frontend
if not exist node_modules ( if not exist node_modules (
echo 正在安装依赖... echo 正在安装依赖...
call npm install call npm install
) )
npm run build npm run build
echo 构建完成！输出目录：mengyakeyvault-frontend\build

28
mengyakeyvault-backend/.dockerignore
View File

@@ -1,14 +1,14 @@
data/ data/
*.exe *.exe
*.exe~ *.exe~
*.dll *.dll
*.so *.so
*.dylib *.dylib
*.test *.test
*.out *.out
go.work go.work
.git .git
.gitignore .gitignore
README.md README.md
docker-compose.yml docker-compose.yml
Dockerfile Dockerfile

18
mengyakeyvault-backend/.gitignore vendored
View File

@@ -1,9 +1,9 @@
data/data.json data/data.json
*.exe *.exe
*.exe~ *.exe~
*.dll *.dll
*.so *.so
*.dylib *.dylib
*.test *.test
*.out *.out
go.work go.work

80
mengyakeyvault-backend/Dockerfile
View File

@@ -1,40 +1,40 @@
# 使用官方 Go 镜像作为构建环境 # 使用官方 Go 镜像作为构建环境
FROM golang:1.21-alpine AS builder FROM golang:1.21-alpine AS builder
# 设置工作目录 # 设置工作目录
WORKDIR /app WORKDIR /app
# 安装必要的依赖 # 安装必要的依赖
RUN apk add --no-cache git RUN apk add --no-cache git
# 复制 go mod 文件 # 复制 go mod 文件
COPY go.mod go.sum ./ COPY go.mod go.sum ./
# 下载依赖 # 下载依赖
RUN go mod download RUN go mod download
# 复制源代码 # 复制源代码
COPY . . COPY . .
# 构建应用 # 构建应用
RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o main . RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o main .
# 使用轻量级镜像作为运行环境 # 使用轻量级镜像作为运行环境
FROM alpine:latest FROM alpine:latest
# 安装 ca-certificates 用于 HTTPS 请求 # 安装 ca-certificates 用于 HTTPS 请求
RUN apk --no-cache add ca-certificates RUN apk --no-cache add ca-certificates
WORKDIR /root/ WORKDIR /root/
# 从构建阶段复制二进制文件 # 从构建阶段复制二进制文件
COPY --from=builder /app/main . COPY --from=builder /app/main .
# 创建数据目录 # 创建数据目录
RUN mkdir -p /root/data RUN mkdir -p /root/data
# 暴露端口 # 暴露端口
EXPOSE 8080 EXPOSE 8080
# 运行应用 # 运行应用
CMD ["./main"] CMD ["./main"]

88
mengyakeyvault-backend/README.md
View File

@@ -1,44 +1,44 @@
# 萌芽密码管理器 - 后端 # 萌芽密码管理器 - 后端
## Docker 部署 ## Docker 部署
### 使用 Docker Compose 部署 ### 使用 Docker Compose 部署
1. **构建并启动服务** 1. **构建并启动服务**
```bash ```bash
docker-compose up -d --build docker-compose up -d --build
``` ```
2. **查看日志** 2. **查看日志**
```bash ```bash
docker-compose logs -f docker-compose logs -f
``` ```
3. **停止服务** 3. **停止服务**
```bash ```bash
docker-compose down docker-compose down
``` ```
4. **重启服务** 4. **重启服务**
```bash ```bash
docker-compose restart docker-compose restart
``` ```
### 配置说明 ### 配置说明
- **端口映射**: 容器内 8080 端口映射到主机 6464 端口 - **端口映射**: 容器内 8080 端口映射到主机 6464 端口
- **数据持久化**: 数据存储在 `/shumengya/docker/mengyakeyvault-backend/data/` 目录 - **数据持久化**: 数据存储在 `/shumengya/docker/mengyakeyvault-backend/data/` 目录
- **API 地址**: 通过反向代理访问 `https://keyvault.api.shumengya.top` - **API 地址**: 通过反向代理访问 `https://keyvault.api.shumengya.top`
### 数据文件 ### 数据文件
数据文件位置：`/shumengya/docker/mengyakeyvault-backend/data/data.json` 数据文件位置：`/shumengya/docker/mengyakeyvault-backend/data/data.json`
### 本地开发 ### 本地开发
```bash ```bash
go mod tidy go mod tidy
go run main.go go run main.go
``` ```
服务将在 `http://localhost:8080` 启动 服务将在 `http://localhost:8080` 启动

44
mengyakeyvault-backend/docker-compose.yml
View File

@@ -1,22 +1,22 @@
version: '3.8' version: '3.8'
services: services:
mengyakeyvault-backend: mengyakeyvault-backend:
build: build:
context: . context: .
dockerfile: Dockerfile dockerfile: Dockerfile
container_name: mengyakeyvault-backend container_name: mengyakeyvault-backend
restart: unless-stopped restart: unless-stopped
ports: ports:
- "6464:8080" - "6464:8080"
volumes: volumes:
- /shumengya/docker/mengyakeyvault-backend/data:/root/data - /shumengya/docker/mengyakeyvault-backend/data:/root/data
working_dir: /root working_dir: /root
environment: environment:
- TZ=Asia/Shanghai - TZ=Asia/Shanghai
networks: networks:
- mengyakeyvault-network - mengyakeyvault-network
networks: networks:
mengyakeyvault-network: mengyakeyvault-network:
driver: bridge driver: bridge

532
mengyakeyvault-backend/main.go
View File

@@ -1,271 +1,261 @@
package main package main
import ( import (
"encoding/json" "encoding/json"
"fmt" "fmt"
"io/ioutil" "io/ioutil"
"log" "log"
"net/http" "net/http"
"os" "os"
"strings" "strings"
"sync" "sync"
"github.com/gin-contrib/cors" "github.com/gin-contrib/cors"
"github.com/gin-gonic/gin" "github.com/gin-gonic/gin"
) )
const ( const (
DefaultPassword = "shumengya520" DefaultPassword = "shumengya520"
DataFile = "data/data.json" DataFile = "data/data.json"
) )
func init() { func init() {
// 确保数据目录存在 // 确保数据目录存在
if err := os.MkdirAll("data", 0755); err != nil { if err := os.MkdirAll("data", 0755); err != nil {
log.Printf("创建数据目录失败: %v", err) log.Printf("创建数据目录失败: %v", err)
} }
loadData() loadData()
} }
type PasswordEntry struct { type PasswordEntry struct {
ID int `json:"id"` ID int `json:"id"`
AccountType string `json:"accountType"` // 账号类型（网站/软件） Account string `json:"account"` // 账号
Account string `json:"account"` // 账号 Password string `json:"password"` // 密码
Password string `json:"password"` // 密码 Username string `json:"username"` // 用户名
Username string `json:"username"` // 用户名 Phone string `json:"phone"` // 手机号
Phone string `json:"phone"` // 手机号 Email string `json:"email"` // 邮箱
Email string `json:"email"` // 邮箱 Website string `json:"website"` // 网站地址
Website string `json:"website"` // 网站地址 OfficialName string `json:"officialName"` // 官方名称（必填）
OfficialName string `json:"officialName"` // 官方名称（必填） Tags string `json:"tags"` // 标签
Tags string `json:"tags"` // 标签 Logo string `json:"logo"` // Logo图标URL
Logo string `json:"logo"` // Logo图标URL }
}
type PasswordStore struct {
type PasswordStore struct { Entries []PasswordEntry `json:"entries"`
Entries []PasswordEntry `json:"entries"` mu sync.RWMutex
mu sync.RWMutex }
}
var store = &PasswordStore{
var store = &PasswordStore{ Entries: make([]PasswordEntry, 0),
Entries: make([]PasswordEntry, 0), }
}
func loadData() {
func loadData() { store.mu.Lock()
store.mu.Lock() defer store.mu.Unlock()
defer store.mu.Unlock()
if _, err := os.Stat(DataFile); os.IsNotExist(err) {
if _, err := os.Stat(DataFile); os.IsNotExist(err) { // 文件不存在，创建空数据
// 文件不存在，创建空数据 store.Entries = make([]PasswordEntry, 0)
store.Entries = make([]PasswordEntry, 0) return
return }
}
data, err := ioutil.ReadFile(DataFile)
data, err := ioutil.ReadFile(DataFile) if err != nil {
if err != nil { log.Printf("读取数据文件失败: %v", err)
log.Printf("读取数据文件失败: %v", err) store.Entries = make([]PasswordEntry, 0)
store.Entries = make([]PasswordEntry, 0) return
return }
}
if len(data) == 0 {
if len(data) == 0 { store.Entries = make([]PasswordEntry, 0)
store.Entries = make([]PasswordEntry, 0) return
return }
}
err = json.Unmarshal(data, store)
err = json.Unmarshal(data, store) if err != nil {
if err != nil { log.Printf("解析数据文件失败: %v", err)
log.Printf("解析数据文件失败: %v", err) store.Entries = make([]PasswordEntry, 0)
store.Entries = make([]PasswordEntry, 0) }
} }
}
func saveData() error {
func saveData() error { store.mu.RLock()
store.mu.RLock() defer store.mu.RUnlock()
defer store.mu.RUnlock()
data, err := json.MarshalIndent(store, "", " ")
data, err := json.MarshalIndent(store, "", " ") if err != nil {
if err != nil { return err
return err }
}
return ioutil.WriteFile(DataFile, data, 0644)
return ioutil.WriteFile(DataFile, data, 0644) }
}
func verifyPassword(c *gin.Context) {
func verifyPassword(c *gin.Context) { var req struct {
var req struct { Password string `json:"password"`
Password string `json:"password"` }
}
if err := c.ShouldBindJSON(&req); err != nil {
if err := c.ShouldBindJSON(&req); err != nil { c.JSON(http.StatusBadRequest, gin.H{"error": "无效的请求"})
c.JSON(http.StatusBadRequest, gin.H{"error": "无效的请求"}) return
return }
}
if req.Password == DefaultPassword {
if req.Password == DefaultPassword { c.JSON(http.StatusOK, gin.H{"success": true, "message": "密码验证成功"})
c.JSON(http.StatusOK, gin.H{"success": true, "message": "密码验证成功"}) } else {
} else { c.JSON(http.StatusUnauthorized, gin.H{"error": "密码错误"})
c.JSON(http.StatusUnauthorized, gin.H{"error": "密码错误"}) }
} }
}
func getEntries(c *gin.Context) {
func getEntries(c *gin.Context) { store.mu.RLock()
store.mu.RLock() defer store.mu.RUnlock()
defer store.mu.RUnlock()
keyword := c.Query("keyword")
keyword := c.Query("keyword") if keyword == "" {
if keyword == "" { c.JSON(http.StatusOK, gin.H{"entries": store.Entries})
c.JSON(http.StatusOK, gin.H{"entries": store.Entries}) return
return }
}
// 关键词搜索
// 关键词搜索 keyword = strings.ToLower(keyword)
keyword = strings.ToLower(keyword) var results []PasswordEntry
var results []PasswordEntry for _, entry := range store.Entries {
for _, entry := range store.Entries { if strings.Contains(strings.ToLower(entry.Account), keyword) ||
if strings.Contains(strings.ToLower(entry.AccountType), keyword) || strings.Contains(strings.ToLower(entry.Username), keyword) ||
strings.Contains(strings.ToLower(entry.Account), keyword) || strings.Contains(strings.ToLower(entry.Email), keyword) ||
strings.Contains(strings.ToLower(entry.Username), keyword) || strings.Contains(strings.ToLower(entry.Website), keyword) ||
strings.Contains(strings.ToLower(entry.Email), keyword) || strings.Contains(strings.ToLower(entry.OfficialName), keyword) ||
strings.Contains(strings.ToLower(entry.Website), keyword) || strings.Contains(strings.ToLower(entry.Tags), keyword) {
strings.Contains(strings.ToLower(entry.OfficialName), keyword) || results = append(results, entry)
strings.Contains(strings.ToLower(entry.Tags), keyword) { }
results = append(results, entry) }
}
} c.JSON(http.StatusOK, gin.H{"entries": results})
}
c.JSON(http.StatusOK, gin.H{"entries": results})
} func addEntry(c *gin.Context) {
var entry PasswordEntry
func addEntry(c *gin.Context) { if err := c.ShouldBindJSON(&entry); err != nil {
var entry PasswordEntry c.JSON(http.StatusBadRequest, gin.H{"error": "无效的请求数据"})
if err := c.ShouldBindJSON(&entry); err != nil { return
c.JSON(http.StatusBadRequest, gin.H{"error": "无效的请求数据"}) }
return
} // 验证必填字段
if entry.OfficialName == "" {
// 验证必填字段 c.JSON(http.StatusBadRequest, gin.H{"error": "官方名称不能为空"})
if entry.OfficialName == "" { return
c.JSON(http.StatusBadRequest, gin.H{"error": "官方名称不能为空"}) }
return
} store.mu.Lock()
if entry.AccountType != "网站" && entry.AccountType != "软件" { // 生成新ID
c.JSON(http.StatusBadRequest, gin.H{"error": "账号类型必须是'网站'或'软件'"}) maxID := 0
return for _, e := range store.Entries {
} if e.ID > maxID {
maxID = e.ID
store.mu.Lock() }
// 生成新ID }
maxID := 0 entry.ID = maxID + 1
for _, e := range store.Entries { store.Entries = append(store.Entries, entry)
if e.ID > maxID { store.mu.Unlock()
maxID = e.ID
} if err := saveData(); err != nil {
} c.JSON(http.StatusInternalServerError, gin.H{"error": "保存失败"})
entry.ID = maxID + 1 return
store.Entries = append(store.Entries, entry) }
store.mu.Unlock()
c.JSON(http.StatusOK, gin.H{"success": true, "entry": entry})
if err := saveData(); err != nil { }
c.JSON(http.StatusInternalServerError, gin.H{"error": "保存失败"})
return func updateEntry(c *gin.Context) {
} var entry PasswordEntry
if err := c.ShouldBindJSON(&entry); err != nil {
c.JSON(http.StatusOK, gin.H{"success": true, "entry": entry}) c.JSON(http.StatusBadRequest, gin.H{"error": "无效的请求数据"})
} return
}
func updateEntry(c *gin.Context) {
var entry PasswordEntry // 验证必填字段
if err := c.ShouldBindJSON(&entry); err != nil { if entry.OfficialName == "" {
c.JSON(http.StatusBadRequest, gin.H{"error": "无效的请求数据"}) c.JSON(http.StatusBadRequest, gin.H{"error": "官方名称不能为空"})
return return
} }
// 验证必填字段 store.mu.Lock()
if entry.OfficialName == "" { found := false
c.JSON(http.StatusBadRequest, gin.H{"error": "官方名称不能为空"}) for i, e := range store.Entries {
return if e.ID == entry.ID {
} store.Entries[i] = entry
if entry.AccountType != "网站" && entry.AccountType != "软件" { found = true
c.JSON(http.StatusBadRequest, gin.H{"error": "账号类型必须是'网站'或'软件'"}) break
return }
} }
store.mu.Unlock()
store.mu.Lock()
found := false if !found {
for i, e := range store.Entries { c.JSON(http.StatusNotFound, gin.H{"error": "条目不存在"})
if e.ID == entry.ID { return
store.Entries[i] = entry }
found = true
break if err := saveData(); err != nil {
} c.JSON(http.StatusInternalServerError, gin.H{"error": "保存失败"})
} return
store.mu.Unlock() }
if !found { c.JSON(http.StatusOK, gin.H{"success": true, "entry": entry})
c.JSON(http.StatusNotFound, gin.H{"error": "条目不存在"}) }
return
} func deleteEntry(c *gin.Context) {
id := c.Param("id")
if err := saveData(); err != nil { var entryID int
c.JSON(http.StatusInternalServerError, gin.H{"error": "保存失败"}) fmt.Sscanf(id, "%d", &entryID)
return
} store.mu.Lock()
found := false
c.JSON(http.StatusOK, gin.H{"success": true, "entry": entry}) for i, e := range store.Entries {
} if e.ID == entryID {
store.Entries = append(store.Entries[:i], store.Entries[i+1:]...)
func deleteEntry(c *gin.Context) { found = true
id := c.Param("id") break
var entryID int }
fmt.Sscanf(id, "%d", &entryID) }
store.mu.Unlock()
store.mu.Lock()
found := false if !found {
for i, e := range store.Entries { c.JSON(http.StatusNotFound, gin.H{"error": "条目不存在"})
if e.ID == entryID { return
store.Entries = append(store.Entries[:i], store.Entries[i+1:]...) }
found = true
break if err := saveData(); err != nil {
} c.JSON(http.StatusInternalServerError, gin.H{"error": "保存失败"})
} return
store.mu.Unlock() }
if !found { c.JSON(http.StatusOK, gin.H{"success": true})
c.JSON(http.StatusNotFound, gin.H{"error": "条目不存在"}) }
return
} func main() {
r := gin.Default()
if err := saveData(); err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": "保存失败"}) // 配置CORS
return config := cors.DefaultConfig()
} config.AllowAllOrigins = true
config.AllowMethods = []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"}
c.JSON(http.StatusOK, gin.H{"success": true}) config.AllowHeaders = []string{"Origin", "Content-Type", "Accept", "Authorization"}
} r.Use(cors.New(config))
func main() { // API路由
r := gin.Default() api := r.Group("/api")
{
// 配置CORS api.POST("/verify", verifyPassword)
config := cors.DefaultConfig() api.GET("/entries", getEntries)
config.AllowAllOrigins = true api.POST("/entries", addEntry)
config.AllowMethods = []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"} api.PUT("/entries", updateEntry)
config.AllowHeaders = []string{"Origin", "Content-Type", "Accept", "Authorization"} api.DELETE("/entries/:id", deleteEntry)
r.Use(cors.New(config)) }
// API路由 port := ":8080"
api := r.Group("/api") log.Printf("服务器启动在端口 %s", port)
{ if err := r.Run(port); err != nil {
api.POST("/verify", verifyPassword) log.Fatal(err)
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)
}
}

46
mengyakeyvault-frontend/.gitignore vendored
View File

@@ -1,23 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies # dependencies
/node_modules /node_modules
/.pnp /.pnp
.pnp.js .pnp.js
# testing # testing
/coverage /coverage
# production # production
/build /build
# misc # misc
.DS_Store .DS_Store
.env.local .env.local
.env.development.local .env.development.local
.env.test.local .env.test.local
.env.production.local .env.production.local
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*

34332
mengyakeyvault-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

70
mengyakeyvault-frontend/package.json
View File

@@ -1,35 +1,35 @@
{ {
"name": "mengyakeyvault-frontend", "name": "mengyakeyvault-frontend",
"version": "1.0.0", "version": "1.0.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"axios": "^1.6.0", "axios": "^1.6.0",
"http-proxy-middleware": "^2.0.6" "http-proxy-middleware": "^2.0.6"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
"react-app" "react-app"
] ]
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
">0.2%", ">0.2%",
"not dead", "not dead",
"not op_mini all" "not op_mini all"
], ],
"development": [ "development": [
"last 1 chrome version", "last 1 chrome version",
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
} }
} }

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

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

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

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

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

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

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

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

40
mengyakeyvault-frontend/src/App.css
View File

@@ -1,20 +1,20 @@
.app-loading { .app-loading {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
} }
.loading-spinner { .loading-spinner {
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 4px solid rgba(255, 255, 255, 0.3); border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid #4caf50; border-top: 4px solid #4caf50;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }

114
mengyakeyvault-frontend/src/App.js
View File

@@ -1,57 +1,57 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import './App.css'; import './App.css';
import PasswordLogin from './components/PasswordLogin'; import PasswordLogin from './components/PasswordLogin';
import PasswordManager from './components/PasswordManager'; import PasswordManager from './components/PasswordManager';
// API 地址配置：优先使用环境变量，否则根据构建模式自动选择 // API 地址配置：优先使用环境变量，否则根据构建模式自动选择
const API_BASE = process.env.REACT_APP_API_BASE || const API_BASE = process.env.REACT_APP_API_BASE ||
(process.env.NODE_ENV === 'production' (process.env.NODE_ENV === 'production'
? 'https://keyvault.api.shumengya.top/api' ? 'https://keyvault.api.shumengya.top/api'
: 'http://localhost:8080/api'); : 'http://localhost:8080/api');
const STORAGE_KEY = 'mengyakeyvault_authenticated'; const STORAGE_KEY = 'mengyakeyvault_authenticated';
function App() { function App() {
const [authenticated, setAuthenticated] = useState(false); const [authenticated, setAuthenticated] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
// 检查是否已认证 // 检查是否已认证
const cached = localStorage.getItem(STORAGE_KEY); const cached = localStorage.getItem(STORAGE_KEY);
if (cached === 'true') { if (cached === 'true') {
setAuthenticated(true); setAuthenticated(true);
} }
setLoading(false); setLoading(false);
}, []); }, []);
const handleLogin = async (password) => { const handleLogin = async (password) => {
try { try {
const response = await axios.post(`${API_BASE}/verify`, { password }); const response = await axios.post(`${API_BASE}/verify`, { password });
if (response.data.success) { if (response.data.success) {
localStorage.setItem(STORAGE_KEY, 'true'); localStorage.setItem(STORAGE_KEY, 'true');
setAuthenticated(true); setAuthenticated(true);
return true; return true;
} }
return false; return false;
} catch (error) { } catch (error) {
console.error('登录失败:', error); console.error('登录失败:', error);
return false; return false;
} }
}; };
if (loading) { if (loading) {
return ( return (
<div className="app-loading"> <div className="app-loading">
<div className="loading-spinner"></div> <div className="loading-spinner"></div>
</div> </div>
); );
} }
if (!authenticated) { if (!authenticated) {
return <PasswordLogin onLogin={handleLogin} />; return <PasswordLogin onLogin={handleLogin} />;
} }
return <PasswordManager />; return <PasswordManager />;
} }
export default App; export default App;

732
mengyakeyvault-frontend/src/components/PasswordForm.css
View File

@@ -1,366 +1,366 @@
.form-overlay { .form-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 1000; z-index: 1000;
padding: 20px; padding: 20px;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
} }
.form-modal { .form-modal {
background: white; background: white;
border-radius: 20px; border-radius: 20px;
width: 100%; width: 100%;
max-width: 700px; max-width: 700px;
max-height: 90vh; max-height: 90vh;
overflow-y: auto; overflow-y: auto;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
animation: slideIn 0.3s ease-out; animation: slideIn 0.3s ease-out;
} }
@keyframes slideIn { @keyframes slideIn {
from { from {
opacity: 0; opacity: 0;
transform: translateY(-20px); transform: translateY(-20px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
.form-header { .form-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 25px 30px; padding: 25px 30px;
border-bottom: 2px solid #e8f5e9; border-bottom: 2px solid #e8f5e9;
} }
.form-header h2 { .form-header h2 {
color: #2e7d32; color: #2e7d32;
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
} }
.close-button { .close-button {
background: none; background: none;
border: none; border: none;
font-size: 24px; font-size: 24px;
color: #999; color: #999;
cursor: pointer; cursor: pointer;
padding: 5px; padding: 5px;
width: 32px; width: 32px;
height: 32px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
transition: all 0.2s; transition: all 0.2s;
} }
.close-button:hover { .close-button:hover {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
color: #666; color: #666;
} }
.password-form { .password-form {
padding: 30px; padding: 30px;
} }
.form-row { .form-row {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 20px; gap: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
} }
.form-group label { .form-group label {
color: #666; color: #666;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.form-group input { .form-group input {
padding: 12px; padding: 12px;
border: 2px solid #c8e6c9; border: 2px solid #c8e6c9;
border-radius: 10px; border-radius: 10px;
font-size: 14px; font-size: 14px;
transition: all 0.3s; transition: all 0.3s;
background: white; background: white;
} }
.form-group input:focus { .form-group input:focus {
outline: none; outline: none;
border-color: #4caf50; border-color: #4caf50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1); box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
} }
.form-group input::placeholder { .form-group input::placeholder {
color: #bbb; color: #bbb;
} }
.form-group select { .form-group select {
padding: 12px; padding: 12px;
border: 2px solid #c8e6c9; border: 2px solid #c8e6c9;
border-radius: 10px; border-radius: 10px;
font-size: 14px; font-size: 14px;
transition: all 0.3s; transition: all 0.3s;
background: white; background: white;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
} }
.form-group select:focus { .form-group select:focus {
outline: none; outline: none;
border-color: #4caf50; border-color: #4caf50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1); box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
} }
.form-select { .form-select {
padding: 12px; padding: 12px;
border: 2px solid #c8e6c9; border: 2px solid #c8e6c9;
border-radius: 10px; border-radius: 10px;
font-size: 14px; font-size: 14px;
transition: all 0.3s; transition: all 0.3s;
background: white; background: white;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
} }
.form-select:focus { .form-select:focus {
outline: none; outline: none;
border-color: #4caf50; border-color: #4caf50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1); box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
} }
.password-input-group { .password-input-group {
display: flex; display: flex;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
} }
.password-input-group input { .password-input-group input {
flex: 1; flex: 1;
} }
.generate-password-btn, .generate-password-btn,
.password-options-btn { .password-options-btn {
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%); background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
border: none; border: none;
color: white; color: white;
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
padding: 10px 12px; padding: 10px 12px;
border-radius: 8px; border-radius: 8px;
transition: all 0.2s; transition: all 0.2s;
flex-shrink: 0; flex-shrink: 0;
box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3); box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);
} }
.generate-password-btn:hover, .generate-password-btn:hover,
.password-options-btn:hover { .password-options-btn:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4); box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4);
} }
.generate-password-btn:active, .generate-password-btn:active,
.password-options-btn:active { .password-options-btn:active {
transform: translateY(0); transform: translateY(0);
} }
.password-generator-options { .password-generator-options {
margin-top: 12px; margin-top: 12px;
padding: 15px; padding: 15px;
background: rgba(200, 230, 201, 0.2); background: rgba(200, 230, 201, 0.2);
border-radius: 10px; border-radius: 10px;
border: 2px solid #c8e6c9; border: 2px solid #c8e6c9;
} }
.option-row { .option-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.option-label { .option-label {
color: #666; color: #666;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
min-width: 60px; min-width: 60px;
} }
.length-input { .length-input {
padding: 8px 12px; padding: 8px 12px;
border: 2px solid #c8e6c9; border: 2px solid #c8e6c9;
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
width: 80px; width: 80px;
background: white; background: white;
} }
.length-input:focus { .length-input:focus {
outline: none; outline: none;
border-color: #4caf50; border-color: #4caf50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1); box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
} }
.option-checkboxes { .option-checkboxes {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 12px; gap: 12px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.checkbox-label { .checkbox-label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
padding: 8px; padding: 8px;
border-radius: 6px; border-radius: 6px;
transition: background 0.2s; transition: background 0.2s;
} }
.checkbox-label:hover { .checkbox-label:hover {
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
} }
.checkbox-label input[type="checkbox"] { .checkbox-label input[type="checkbox"] {
width: 18px; width: 18px;
height: 18px; height: 18px;
cursor: pointer; cursor: pointer;
accent-color: #4caf50; accent-color: #4caf50;
} }
.quick-generate-btn { .quick-generate-btn {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%); background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3); box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);
} }
.quick-generate-btn:hover { .quick-generate-btn:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4); box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4);
} }
.quick-generate-btn:active { .quick-generate-btn:active {
transform: translateY(0); transform: translateY(0);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.option-checkboxes { .option-checkboxes {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.password-input-group { .password-input-group {
flex-wrap: wrap; flex-wrap: wrap;
} }
.generate-password-btn, .generate-password-btn,
.password-options-btn { .password-options-btn {
flex: 1; flex: 1;
min-width: 45px; min-width: 45px;
} }
} }
.form-actions { .form-actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 15px; gap: 15px;
margin-top: 30px; margin-top: 30px;
padding-top: 20px; padding-top: 20px;
border-top: 2px solid #e8f5e9; border-top: 2px solid #e8f5e9;
} }
.cancel-button, .cancel-button,
.save-button { .save-button {
padding: 12px 30px; padding: 12px 30px;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
} }
.cancel-button { .cancel-button {
background: #f5f5f5; background: #f5f5f5;
color: #666; color: #666;
} }
.cancel-button:hover { .cancel-button:hover {
background: #e0e0e0; background: #e0e0e0;
} }
.save-button { .save-button {
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%); background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
color: white; color: white;
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3); box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
} }
.save-button:hover { .save-button:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4); box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.form-overlay { .form-overlay {
padding: 10px; padding: 10px;
} }
.form-modal { .form-modal {
max-height: 95vh; max-height: 95vh;
} }
.form-header { .form-header {
padding: 20px; padding: 20px;
} }
.form-header h2 { .form-header h2 {
font-size: 20px; font-size: 20px;
} }
.password-form { .password-form {
padding: 20px; padding: 20px;
} }
.form-row { .form-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 15px; gap: 15px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.form-actions { .form-actions {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.cancel-button, .cancel-button,
.save-button { .save-button {
width: 100%; width: 100%;
} }
} }

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

@@ -1,363 +1,348 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import './PasswordForm.css'; import './PasswordForm.css';
const PasswordForm = ({ entry, onSave, onCancel }) => { const PasswordForm = ({ entry, onSave, onCancel }) => {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
accountType: '网站', account: '',
account: '', password: '',
password: '', username: '',
username: '', phone: '',
phone: '', email: '',
email: '', website: '',
website: '', officialName: '',
officialName: '', tags: '',
tags: '', logo: '',
logo: '', });
});
const [passwordOptions, setPasswordOptions] = useState({
const [passwordOptions, setPasswordOptions] = useState({ length: 16,
length: 16, includeUppercase: true,
includeUppercase: true, includeLowercase: true,
includeLowercase: true, includeNumbers: true,
includeNumbers: true, includeSpecial: true,
includeSpecial: true, });
});
const [showPasswordGenerator, setShowPasswordGenerator] = useState(false);
const [showPasswordGenerator, setShowPasswordGenerator] = useState(false);
useEffect(() => {
useEffect(() => { if (entry) {
if (entry) { setFormData({
setFormData({ account: entry.account || '',
accountType: entry.accountType || '网站', password: entry.password || '',
account: entry.account || '', username: entry.username || '',
password: entry.password || '', phone: entry.phone || '',
username: entry.username || '', email: entry.email || '',
phone: entry.phone || '', website: entry.website || '',
email: entry.email || '', officialName: entry.officialName || entry.software || '',
website: entry.website || '', tags: entry.tags || '',
officialName: entry.officialName || entry.software || '', logo: entry.logo || '',
tags: entry.tags || '', });
logo: entry.logo || '', setShowPasswordGenerator(false);
}); } else {
setShowPasswordGenerator(false); // 新建时默认显示密码生成器
} else { setShowPasswordGenerator(true);
// 新建时默认显示密码生成器 }
setShowPasswordGenerator(true); }, [entry]);
}
}, [entry]); const handleChange = (e) => {
const { name, value } = e.target;
const handleChange = (e) => { setFormData((prev) => ({
const { name, value } = e.target; ...prev,
setFormData((prev) => ({ [name]: value,
...prev, }));
[name]: value, };
}));
}; const handleSubmit = (e) => {
e.preventDefault();
const handleSubmit = (e) => { onSave(formData);
e.preventDefault(); };
onSave(formData);
}; const generatePassword = () => {
const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const generatePassword = () => { const lowercase = 'abcdefghijklmnopqrstuvwxyz';
const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const numbers = '0123456789';
const lowercase = 'abcdefghijklmnopqrstuvwxyz'; const special = '!@#$%^&*()_+-=[]{}|;:,.<>?';
const numbers = '0123456789';
const special = '!@#$%^&*()_+-=[]{}|;:,.<>?'; let charset = '';
if (passwordOptions.includeLowercase) charset += lowercase;
let charset = ''; if (passwordOptions.includeUppercase) charset += uppercase;
if (passwordOptions.includeLowercase) charset += lowercase; if (passwordOptions.includeNumbers) charset += numbers;
if (passwordOptions.includeUppercase) charset += uppercase; if (passwordOptions.includeSpecial) charset += special;
if (passwordOptions.includeNumbers) charset += numbers;
if (passwordOptions.includeSpecial) charset += special; if (charset === '') {
alert('请至少选择一种字符类型');
if (charset === '') { return;
alert('请至少选择一种字符类型'); }
return;
} let password = '';
const length = Math.max(4, Math.min(128, passwordOptions.length));
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.includeLowercase) { }
password += lowercase[Math.floor(Math.random() * lowercase.length)]; if (passwordOptions.includeUppercase) {
} password += uppercase[Math.floor(Math.random() * uppercase.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.includeNumbers) { }
password += numbers[Math.floor(Math.random() * numbers.length)]; if (passwordOptions.includeSpecial) {
} password += special[Math.floor(Math.random() * special.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)];
for (let i = password.length; i < length; i++) { }
password += charset[Math.floor(Math.random() * charset.length)];
} // 打乱顺序（Fisher-Yates 洗牌算法）
const passwordArray = password.split('');
// 打乱顺序（Fisher-Yates 洗牌算法） for (let i = passwordArray.length - 1; i > 0; i--) {
const passwordArray = password.split(''); const j = Math.floor(Math.random() * (i + 1));
for (let i = passwordArray.length - 1; i > 0; i--) { [passwordArray[i], passwordArray[j]] = [passwordArray[j], passwordArray[i]];
const j = Math.floor(Math.random() * (i + 1)); }
[passwordArray[i], passwordArray[j]] = [passwordArray[j], passwordArray[i]]; password = passwordArray.join('');
}
password = passwordArray.join(''); setFormData((prev) => ({
...prev,
setFormData((prev) => ({ password: password,
...prev, }));
password: password, };
}));
}; return (
<div className="form-overlay" onClick={onCancel}>
return ( <div className="form-modal" onClick={(e) => e.stopPropagation()}>
<div className="form-overlay" onClick={onCancel}> <div className="form-header">
<div className="form-modal" onClick={(e) => e.stopPropagation()}> <h2>{entry ? '编辑密码' : '添加密码'}</h2>
<div className="form-header"> <button className="close-button" onClick={onCancel}>
<h2>{entry ? '编辑密码' : '添加密码'}</h2> ✕
<button className="close-button" onClick={onCancel}> </button>
✕ </div>
</button>
</div> <form onSubmit={handleSubmit} className="password-form">
<div className="form-row">
<form onSubmit={handleSubmit} className="password-form"> <div className="form-group">
<div className="form-row"> <label>官方名称 *</label>
<div className="form-group"> <input
<label>官方名称 *</label> type="text"
<input name="officialName"
type="text" value={formData.officialName}
name="officialName" onChange={handleChange}
value={formData.officialName} placeholder="例如：MiniMax、GitHub"
onChange={handleChange} required
placeholder="例如：MiniMax、GitHub" />
required </div>
/> </div>
</div>
<div className="form-group"> <div className="form-row">
<label>账号类型 *</label> <div className="form-group">
<select <label>账号</label>
name="accountType" <input
value={formData.accountType} type="text"
onChange={handleChange} name="account"
className="form-select" value={formData.account}
required onChange={handleChange}
> placeholder="账号"
<option value="网站">网站</option> />
<option value="软件">软件</option> </div>
</select> <div className="form-group">
</div> <label>密码</label>
</div> <div className="password-input-group">
<input
<div className="form-row"> type="text"
<div className="form-group"> name="password"
<label>账号</label> value={formData.password}
<input onChange={handleChange}
type="text" placeholder="密码"
name="account" />
value={formData.account} <button
onChange={handleChange} type="button"
placeholder="账号" className="generate-password-btn"
/> onClick={() => {
</div> if (!showPasswordGenerator) {
<div className="form-group"> setShowPasswordGenerator(true);
<label>密码</label> }
<div className="password-input-group"> generatePassword();
<input }}
type="text" title="生成随机密码"
name="password" >
value={formData.password} 🎲
onChange={handleChange} </button>
placeholder="密码" <button
/> type="button"
<button className="password-options-btn"
type="button" onClick={() => setShowPasswordGenerator(!showPasswordGenerator)}
className="generate-password-btn" title="密码生成选项"
onClick={() => { >
if (!showPasswordGenerator) { ⚙️
setShowPasswordGenerator(true); </button>
} </div>
generatePassword(); {showPasswordGenerator && (
}} <div className="password-generator-options">
title="生成随机密码" <div className="option-row">
> <label className="option-label">长度：</label>
🎲 <input
</button> type="number"
<button min="4"
type="button" max="128"
className="password-options-btn" value={passwordOptions.length}
onClick={() => setShowPasswordGenerator(!showPasswordGenerator)} onChange={(e) =>
title="密码生成选项" setPasswordOptions({
> ...passwordOptions,
⚙️ length: parseInt(e.target.value) || 16,
</button> })
</div> }
{showPasswordGenerator && ( className="length-input"
<div className="password-generator-options"> />
<div className="option-row"> </div>
<label className="option-label">长度：</label> <div className="option-checkboxes">
<input <label className="checkbox-label">
type="number" <input
min="4" type="checkbox"
max="128" checked={passwordOptions.includeUppercase}
value={passwordOptions.length} onChange={(e) =>
onChange={(e) => setPasswordOptions({
setPasswordOptions({ ...passwordOptions,
...passwordOptions, includeUppercase: e.target.checked,
length: parseInt(e.target.value) || 16, })
}) }
} />
className="length-input" <span>大写字母 (A-Z)</span>
/> </label>
</div> <label className="checkbox-label">
<div className="option-checkboxes"> <input
<label className="checkbox-label"> type="checkbox"
<input checked={passwordOptions.includeLowercase}
type="checkbox" onChange={(e) =>
checked={passwordOptions.includeUppercase} setPasswordOptions({
onChange={(e) => ...passwordOptions,
setPasswordOptions({ includeLowercase: e.target.checked,
...passwordOptions, })
includeUppercase: e.target.checked, }
}) />
} <span>小写字母 (a-z)</span>
/> </label>
<span>大写字母 (A-Z)</span> <label className="checkbox-label">
</label> <input
<label className="checkbox-label"> type="checkbox"
<input checked={passwordOptions.includeNumbers}
type="checkbox" onChange={(e) =>
checked={passwordOptions.includeLowercase} setPasswordOptions({
onChange={(e) => ...passwordOptions,
setPasswordOptions({ includeNumbers: e.target.checked,
...passwordOptions, })
includeLowercase: e.target.checked, }
}) />
} <span>数字 (0-9)</span>
/> </label>
<span>小写字母 (a-z)</span> <label className="checkbox-label">
</label> <input
<label className="checkbox-label"> type="checkbox"
<input checked={passwordOptions.includeSpecial}
type="checkbox" onChange={(e) =>
checked={passwordOptions.includeNumbers} setPasswordOptions({
onChange={(e) => ...passwordOptions,
setPasswordOptions({ includeSpecial: e.target.checked,
...passwordOptions, })
includeNumbers: e.target.checked, }
}) />
} <span>特殊字符 (!@#$...)</span>
/> </label>
<span>数字 (0-9)</span> </div>
</label> <button
<label className="checkbox-label"> type="button"
<input className="quick-generate-btn"
type="checkbox" onClick={generatePassword}
checked={passwordOptions.includeSpecial} >
onChange={(e) => 🔄 重新生成
setPasswordOptions({ </button>
...passwordOptions, </div>
includeSpecial: e.target.checked, )}
}) </div>
} </div>
/>
<span>特殊字符 (!@#$...)</span> <div className="form-row">
</label> <div className="form-group">
</div> <label>用户名</label>
<button <input
type="button" type="text"
className="quick-generate-btn" name="username"
onClick={generatePassword} value={formData.username}
> onChange={handleChange}
🔄 重新生成 placeholder="用户名"
</button> />
</div> </div>
)} <div className="form-group">
</div> <label>手机号</label>
</div> <input
type="tel"
<div className="form-row"> name="phone"
<div className="form-group"> value={formData.phone}
<label>用户名</label> onChange={handleChange}
<input placeholder="手机号"
type="text" />
name="username" </div>
value={formData.username} </div>
onChange={handleChange}
placeholder="用户名" <div className="form-row">
/> <div className="form-group">
</div> <label>邮箱</label>
<div className="form-group"> <input
<label>手机号</label> type="email"
<input name="email"
type="tel" value={formData.email}
name="phone" onChange={handleChange}
value={formData.phone} placeholder="邮箱"
onChange={handleChange} />
placeholder="手机号" </div>
/> <div className="form-group">
</div> <label>网站地址</label>
</div> <input
type="url"
<div className="form-row"> name="website"
<div className="form-group"> value={formData.website}
<label>邮箱</label> onChange={handleChange}
<input placeholder="https://example.com"
type="email" />
name="email" </div>
value={formData.email} </div>
onChange={handleChange}
placeholder="邮箱" <div className="form-row">
/> <div className="form-group">
</div> <label>标签</label>
<div className="form-group"> <input
<label>网站地址</label> type="text"
<input name="tags"
type="url" value={formData.tags}
name="website" onChange={handleChange}
value={formData.website} placeholder="标签（用空格分隔）"
onChange={handleChange} />
placeholder="https://example.com" </div>
/> <div className="form-group">
</div> <label>Logo图标URL（可选）</label>
</div> <input
type="url"
<div className="form-row"> name="logo"
<div className="form-group"> value={formData.logo}
<label>标签</label> onChange={handleChange}
<input placeholder="https://example.com/logo.png（留空则自动获取）"
type="text" />
name="tags" </div>
value={formData.tags} </div>
onChange={handleChange}
placeholder="标签（用空格分隔）" <div className="form-actions">
/> <button type="button" className="cancel-button" onClick={onCancel}>
</div> 取消
<div className="form-group"> </button>
<label>Logo图标URL（可选）</label> <button type="submit" className="save-button">
<input {entry ? '更新' : '保存'}
type="url" </button>
name="logo" </div>
value={formData.logo} </form>
onChange={handleChange} </div>
placeholder="https://example.com/logo.png（留空则自动获取）" </div>
/> );
</div> };
</div>
export default PasswordForm;
<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;

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

File diff suppressed because it is too large Load Diff

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

@@ -1,236 +1,313 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import './PasswordList.css'; import './PasswordList.css';
// SVG 图标组件 // SVG 图标组件
const CopyIcon = () => ( const CopyIcon = () => (
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> <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> <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> <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg> </svg>
); );
const CheckIcon = () => ( const CheckIcon = () => (
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> <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> <polyline points="20 6 9 17 4 12"></polyline>
</svg> </svg>
); );
const EditIcon = () => ( const EditIcon = () => (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> <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="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> <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> </svg>
); );
const DeleteIcon = () => ( const DeleteIcon = () => (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> <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> <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> <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> </svg>
); );
const LinkIcon = () => ( const LinkIcon = () => (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> <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="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> <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> </svg>
); );
const EmptyIcon = () => ( const EmptyIcon = () => (
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"> <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> <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> <polyline points="14 2 14 8 20 8"></polyline>
<line x1="12" y1="18" x2="12" y2="12"></line> <line x1="12" y1="18" x2="12" y2="12"></line>
<line x1="9" y1="15" x2="15" y2="15"></line> <line x1="9" y1="15" x2="15" y2="15"></line>
</svg> </svg>
); );
const PasswordList = ({ entries, onEdit, onDelete }) => { // 判断是否为手机端
const [copiedId, setCopiedId] = useState(null); const useIsMobile = () => {
const [logoCache, setLogoCache] = useState({}); const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
useEffect(() => {
// 获取网站favicon const handler = () => setIsMobile(window.innerWidth <= 768);
const getWebsiteFavicon = (url) => { window.addEventListener('resize', handler);
if (!url) return null; return () => window.removeEventListener('resize', handler);
try { }, []);
const urlObj = new URL(url); return isMobile;
return `${urlObj.protocol}//${urlObj.host}/favicon.ico`; };
} catch {
return null; const PasswordList = ({ entries, onEdit, onDelete }) => {
} const [copiedId, setCopiedId] = useState(null);
}; const [logoCache, setLogoCache] = useState({});
const [currentPage, setCurrentPage] = useState(1);
// 获取logo URL const isMobile = useIsMobile();
const getLogoUrl = (entry) => {
// 如果entry中有logo字段且不为空，使用该logo // 每页条数：手机端 3行×2列=6，电脑端 2行×5列=10
if (entry.logo && entry.logo.trim() !== '') { const pageSize = isMobile ? 6 : 10;
return entry.logo; const totalPages = Math.ceil(entries.length / pageSize);
}
// entries 变化时重置到第一页
// 如果是网站类型，尝试获取favicon useEffect(() => {
if (entry.accountType === '网站' && entry.website) { setCurrentPage(1);
const faviconUrl = getWebsiteFavicon(entry.website); }, [entries]);
if (faviconUrl) {
return faviconUrl; const pagedEntries = entries.slice((currentPage - 1) * pageSize, currentPage * pageSize);
}
} // 获取网站favicon
const getWebsiteFavicon = (url) => {
// 默认使用本地logo if (!url) return null;
return `${process.env.PUBLIC_URL}/logo.png`; try {
}; const urlObj = new URL(url);
const domain = urlObj.host;
const handleCopy = async (text, id) => { return `https://cf-favicon.pages.dev/api/favicon?url=${domain}`;
try { } catch {
await navigator.clipboard.writeText(text); return null;
setCopiedId(id); }
setTimeout(() => setCopiedId(null), 2000); };
} catch (err) {
// 降级方案 // 获取logo URL
const textArea = document.createElement('textarea'); const getLogoUrl = (entry) => {
textArea.value = text; // 如果entry中有logo字段且不为空，使用该logo
document.body.appendChild(textArea); if (entry.logo && entry.logo.trim() !== '') {
textArea.select(); return entry.logo;
document.execCommand('copy'); }
document.body.removeChild(textArea);
setCopiedId(id); // 如果有网站地址，尝试获取favicon
setTimeout(() => setCopiedId(null), 2000); if (entry.website) {
} const faviconUrl = getWebsiteFavicon(entry.website);
}; if (faviconUrl) {
return faviconUrl;
const CopyButton = ({ text, id }) => { }
const uniqueId = `copy-${id}-${text}`; }
const isCopied = copiedId === uniqueId;
return ( // 默认使用本地logo
<button return `${process.env.PUBLIC_URL}/logo.png`;
className="copy-button" };
onClick={(e) => {
e.stopPropagation(); const handleCopy = async (text, id) => {
handleCopy(text, uniqueId); try {
}} await navigator.clipboard.writeText(text);
title={isCopied ? '已复制！' : '复制'} setCopiedId(id);
> setTimeout(() => setCopiedId(null), 2000);
{isCopied ? <CheckIcon /> : <CopyIcon />} } catch (err) {
</button> // 降级方案
); const textArea = document.createElement('textarea');
}; textArea.value = text;
if (entries.length === 0) { document.body.appendChild(textArea);
return ( textArea.select();
<div className="empty-state"> document.execCommand('copy');
<div className="empty-icon"><EmptyIcon /></div> document.body.removeChild(textArea);
<p>暂无密码记录</p> setCopiedId(id);
<p className="empty-hint">点击"添加密码"按钮开始添加</p> setTimeout(() => setCopiedId(null), 2000);
</div> }
); };
}
const CopyButton = ({ text, id }) => {
return ( const uniqueId = `copy-${id}-${text}`;
<div className="password-list"> const isCopied = copiedId === uniqueId;
{entries.map((entry) => { return (
const logoUrl = getLogoUrl(entry); <button
return ( className="copy-button"
<div key={entry.id} className="password-card"> onClick={(e) => {
<div className="card-header"> e.stopPropagation();
<div className="card-logo-wrapper"> handleCopy(text, uniqueId);
<img }}
src={logoUrl} title={isCopied ? '已复制！' : '复制'}
alt={entry.officialName || 'Logo'} >
className="card-logo" {isCopied ? <CheckIcon /> : <CopyIcon />}
onError={(e) => { </button>
// 如果加载失败，使用默认logo );
e.target.src = `${process.env.PUBLIC_URL}/logo.png`; };
}} if (entries.length === 0) {
/> return (
</div> <div className="empty-state">
<div className="card-title-section"> <div className="empty-icon"><EmptyIcon /></div>
<div className="card-title-row"> <p>暂无密码记录</p>
<div className="card-title"> <p className="empty-hint">点击"添加密码"按钮开始添加</p>
<span className="card-type">{entry.officialName || entry.software || '未命名'}</span> </div>
<span className="card-account-type">{entry.accountType || '未分类'}</span> );
</div> }
<div className="card-actions">
<button return (
className="edit-button" <>
onClick={() => onEdit(entry)} <div className="password-list">
title="编辑" {pagedEntries.map((entry) => {
> const logoUrl = getLogoUrl(entry);
<EditIcon /> return (
</button> <div key={entry.id} className="password-card">
<button <div className="card-header">
className="delete-button" <div className="card-logo-wrapper">
onClick={() => onDelete(entry.id)} <img
title="删除" src={logoUrl}
> alt={entry.officialName || 'Logo'}
<DeleteIcon /> className="card-logo"
</button> onError={(e) => {
</div> // 如果加载失败，使用默认logo
</div> e.target.src = `${process.env.PUBLIC_URL}/logo.png`;
</div> }}
</div> />
</div>
<div className="card-content"> <div className="card-title-section">
{entry.account && ( <div className="card-title-row">
<div className="info-row"> <div className="card-title">
<span className="info-label">账号：</span> <span className="card-type">{entry.officialName || entry.software || '未命名'}</span>
<span className="info-value">{entry.account}</span> </div>
<CopyButton text={entry.account} id={entry.id} /> <div className="card-actions">
</div> <button
)} className="edit-button"
{entry.password && ( onClick={() => onEdit(entry)}
<div className="info-row"> title="编辑"
<span className="info-label">密码：</span> >
<span className="info-value password-value" title={entry.password}> <EditIcon />
{entry.password} </button>
</span> <button
<CopyButton text={entry.password} id={entry.id} /> className="delete-button"
</div> onClick={() => onDelete(entry.id)}
)} title="删除"
{entry.username && ( >
<div className="info-row"> <DeleteIcon />
<span className="info-label">用户名：</span> </button>
<span className="info-value">{entry.username}</span> </div>
<CopyButton text={entry.username} id={entry.id} /> </div>
</div> </div>
)} </div>
{entry.phone && (
<div className="info-row"> <div className="card-content">
<span className="info-label">手机号：</span> {entry.account && (
<span className="info-value">{entry.phone}</span> <div className="info-row">
<CopyButton text={entry.phone} id={entry.id} /> <span className="info-label">账号：</span>
</div> <span className="info-value">{entry.account}</span>
)} <CopyButton text={entry.account} id={entry.id} />
{entry.email && ( </div>
<div className="info-row"> )}
<span className="info-label">邮箱：</span> {entry.password && (
<span className="info-value">{entry.email}</span> <div className="info-row">
<CopyButton text={entry.email} id={entry.id} /> <span className="info-label">密码：</span>
</div> <span className="info-value password-value" title={entry.password}>
)} {entry.password}
{entry.website && ( </span>
<div className="info-row"> <CopyButton text={entry.password} id={entry.id} />
<span className="info-label">网站：</span> </div>
<a )}
href={entry.website} {entry.username && (
target="_blank" <div className="info-row">
rel="noopener noreferrer" <span className="info-label">用户名：</span>
className="info-link" <span className="info-value">{entry.username}</span>
title={entry.website} <CopyButton text={entry.username} id={entry.id} />
> </div>
{entry.website} )}
</a> {entry.phone && (
<CopyButton text={entry.website} id={entry.id} /> <div className="info-row">
</div> <span className="info-label">手机号：</span>
)} <span className="info-value">{entry.phone}</span>
</div> <CopyButton text={entry.phone} id={entry.id} />
{entry.tags && ( </div>
<div className="card-tags"> )}
{entry.tags} {entry.email && (
</div> <div className="info-row">
)} <span className="info-label">邮箱：</span>
</div> <span className="info-value">{entry.email}</span>
); <CopyButton text={entry.email} id={entry.id} />
})} </div>
</div> )}
); {entry.website && (
}; <div className="info-row">
<span className="info-label">网站：</span>
export default PasswordList; <a
href={entry.website}
target="_blank"
rel="noopener noreferrer"
className="info-link"
title={entry.website}
>
{entry.website}
</a>
<CopyButton text={entry.website} id={entry.id} />
</div>
)}
</div>
{entry.tags && (
<div className="card-tags">
{entry.tags.split(',').map((tag, idx) => (
<span key={idx} className="card-tag">{tag.trim()}</span>
))}
</div>
)}
</div>
);
})}
</div>
{totalPages > 1 && (
<div className="pagination">
<button
className="page-btn"
onClick={() => setCurrentPage(1)}
disabled={currentPage === 1}
title="第一页"
>«</button>
<button
className="page-btn"
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
disabled={currentPage === 1}
title="上一页"
>‹</button>
{Array.from({ length: totalPages }, (_, i) => i + 1)
.filter(p => p === 1 || p === totalPages || Math.abs(p - currentPage) <= 2)
.reduce((acc, p, idx, arr) => {
if (idx > 0 && p - arr[idx - 1] > 1) acc.push('...');
acc.push(p);
return acc;
}, [])
.map((p, idx) =>
p === '...'
? <span key={`ellipsis-${idx}`} className="page-ellipsis">…</span>
: <button
key={p}
className={`page-btn${currentPage === p ? ' active' : ''}`}
onClick={() => setCurrentPage(p)}
>{p}</button>
)
}
<button
className="page-btn"
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
disabled={currentPage === totalPages}
title="下一页"
>›</button>
<button
className="page-btn"
onClick={() => setCurrentPage(totalPages)}
disabled={currentPage === totalPages}
title="最后一页"
>»</button>
<span className="page-info">{currentPage} / {totalPages} 页 · 共 {entries.length} 条</span>
</div>
)}
</>
);
};
export default PasswordList;

202
mengyakeyvault-frontend/src/components/PasswordLogin.css
View File

@@ -1,101 +1,101 @@
.login-container { .login-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
padding: 20px; padding: 20px;
} }
.login-card { .login-card {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
border-radius: 20px; border-radius: 20px;
padding: 40px; padding: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
.login-header { .login-header {
text-align: center; text-align: center;
margin-bottom: 30px; margin-bottom: 30px;
} }
.login-logo { .login-logo {
max-width: 200px; max-width: 200px;
height: auto; height: auto;
margin: 0 auto 15px; margin: 0 auto 15px;
display: block; display: block;
} }
.login-header p { .login-header p {
color: #666; color: #666;
font-size: 14px; font-size: 14px;
} }
.login-form { .login-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
} }
.form-group { .form-group {
position: relative; position: relative;
} }
.password-input { .password-input {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
border: 2px solid #c8e6c9; border: 2px solid #c8e6c9;
border-radius: 10px; border-radius: 10px;
font-size: 16px; font-size: 16px;
transition: all 0.3s; transition: all 0.3s;
background: white; background: white;
} }
.password-input:focus { .password-input:focus {
outline: none; outline: none;
border-color: #4caf50; border-color: #4caf50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1); box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
} }
.login-button { .login-button {
padding: 15px; padding: 15px;
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%); background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
color: white; color: white;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
} }
.login-button:hover:not(:disabled) { .login-button:hover:not(:disabled) {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3); box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
} }
.login-button:disabled { .login-button:disabled {
opacity: 0.6; opacity: 0.6;
cursor: not-allowed; cursor: not-allowed;
} }
.error-message { .error-message {
color: #f44336; color: #f44336;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
background: rgba(244, 67, 54, 0.1); background: rgba(244, 67, 54, 0.1);
border-radius: 8px; border-radius: 8px;
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.login-card { .login-card {
padding: 30px 20px; padding: 30px 20px;
} }
.login-logo { .login-logo {
max-width: 150px; max-width: 150px;
} }
} }

110
mengyakeyvault-frontend/src/components/PasswordLogin.js
View File

@@ -1,55 +1,55 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import './PasswordLogin.css'; import './PasswordLogin.css';
const PasswordLogin = ({ onLogin }) => { const PasswordLogin = ({ onLogin }) => {
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [error, setError] = useState(''); const [error, setError] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
setError(''); setError('');
setLoading(true); setLoading(true);
const success = await onLogin(password); const success = await onLogin(password);
if (!success) { if (!success) {
setError('密码错误，请重试'); setError('密码错误，请重试');
setPassword(''); setPassword('');
} }
setLoading(false); setLoading(false);
}; };
return ( return (
<div className="login-container"> <div className="login-container">
<div className="login-card"> <div className="login-card">
<div className="login-header"> <div className="login-header">
<img <img
src={`${process.env.PUBLIC_URL}/logo.png`} src={`${process.env.PUBLIC_URL}/logo.png`}
alt="萌芽密码管理器" alt="萌芽密码管理器"
className="login-logo" className="login-logo"
/> />
<p>请输入访问密码</p> <p>请输入访问密码</p>
</div> </div>
<form onSubmit={handleSubmit} className="login-form"> <form onSubmit={handleSubmit} className="login-form">
<div className="form-group"> <div className="form-group">
<input <input
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="请输入密码" placeholder="请输入密码"
className="password-input" className="password-input"
required required
autoFocus autoFocus
/> />
</div> </div>
{error && <div className="error-message">{error}</div>} {error && <div className="error-message">{error}</div>}
<button type="submit" className="login-button" disabled={loading}> <button type="submit" className="login-button" disabled={loading}>
{loading ? '验证中...' : '登录'} {loading ? '验证中...' : '登录'}
</button> </button>
</form> </form>
</div> </div>
</div> </div>
); );
}; };
export default PasswordLogin; export default PasswordLogin;

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

@@ -1,126 +1,200 @@
.password-manager { .password-manager {
min-height: 100vh; min-height: 100vh;
padding: 20px; padding: 20px;
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
} }
/* 大屏幕容器宽度控制 */ /* ===== PWA 安装横幅 ===== */
@media (min-width: 1600px) { .pwa-install-banner {
.password-manager { display: flex;
max-width: 1800px; align-items: center;
} gap: 10px;
} background: linear-gradient(135deg, rgba(232, 245, 233, 0.98), rgba(200, 230, 201, 0.95));
border: 1px solid rgba(76, 175, 80, 0.3);
@media (min-width: 1200px) and (max-width: 1599px) { border-radius: 12px;
.password-manager { padding: 12px 16px;
max-width: 1400px; margin: -20px -20px 20px -20px;
} box-shadow: 0 2px 10px rgba(76, 175, 80, 0.15);
} flex-wrap: wrap;
}
@media (max-width: 1199px) {
.password-manager { .pwa-banner-icon {
max-width: 1200px; font-size: 20px;
} flex-shrink: 0;
} }
.manager-loading { .pwa-banner-text {
display: flex; flex: 1;
justify-content: center; font-size: 14px;
align-items: center; color: #2e7d32;
min-height: 100vh; font-weight: 500;
} min-width: 160px;
}
.manager-nav {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 255, 248, 0.95) 100%); .pwa-install-btn {
backdrop-filter: blur(10px); background: linear-gradient(135deg, #66bb6a, #4caf50);
padding: 20px 0; color: #fff;
margin: -20px -20px 30px -20px; border: none;
border-bottom: 2px solid rgba(200, 230, 201, 0.3); border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 8px 16px;
} font-size: 13px;
font-weight: 600;
.nav-content { cursor: pointer;
max-width: 100%; transition: all 0.2s;
margin: 0 auto; white-space: nowrap;
padding: 0 20px; }
display: flex;
align-items: center; .pwa-install-btn:hover {
gap: 16px; transform: translateY(-1px);
} box-shadow: 0 3px 8px rgba(76, 175, 80, 0.4);
}
/* 大屏幕导航栏宽度控制 */
@media (min-width: 1600px) { .pwa-dismiss-btn {
.nav-content { background: transparent;
max-width: 1800px; border: none;
} color: #888;
} font-size: 16px;
cursor: pointer;
@media (min-width: 1200px) and (max-width: 1599px) { padding: 4px 6px;
.nav-content { border-radius: 6px;
max-width: 1400px; transition: all 0.2s;
} flex-shrink: 0;
} }
@media (max-width: 1199px) { .pwa-dismiss-btn:hover {
.nav-content { background: rgba(0, 0, 0, 0.08);
max-width: 1200px; color: #333;
} }
}
@media (max-width: 768px) {
.nav-logo { .pwa-install-banner {
height: 40px; margin: -15px -15px 16px -15px;
width: auto; border-radius: 0;
} padding: 10px 14px;
gap: 8px;
.nav-title { }
color: #2e7d32; .pwa-banner-text {
font-size: 24px; font-size: 13px;
font-weight: 700; }
margin: 0; }
letter-spacing: 0.5px;
} /* 大屏幕容器宽度控制 */
@media (min-width: 1600px) {
.manager-header { .password-manager {
display: flex; max-width: 1800px;
justify-content: flex-end; }
align-items: center; }
margin-bottom: 30px;
} @media (min-width: 1200px) and (max-width: 1599px) {
.password-manager {
.add-button { max-width: 1400px;
padding: 12px 24px; }
background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%); }
color: white;
border: none; @media (max-width: 1199px) {
border-radius: 10px; .password-manager {
font-size: 16px; max-width: 1200px;
font-weight: 600; }
cursor: pointer; }
transition: all 0.3s;
box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3); .manager-loading {
} display: flex;
justify-content: center;
.add-button:hover { align-items: center;
transform: translateY(-2px); min-height: 100vh;
box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4); }
}
.manager-nav {
@media (max-width: 768px) { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 255, 248, 0.95) 100%);
.password-manager { backdrop-filter: blur(10px);
padding: 15px; padding: 20px 0;
} margin: -20px -20px 30px -20px;
border-bottom: 2px solid rgba(200, 230, 201, 0.3);
.nav-logo { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
height: 32px; }
}
.nav-content {
.nav-title { max-width: 100%;
font-size: 20px; margin: 0 auto;
} padding: 0 20px;
display: flex;
.add-button { align-items: center;
padding: 10px 20px; gap: 16px;
font-size: 14px; }
}
} /* 大屏幕导航栏宽度控制 */
@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;
}
}

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

@@ -1,155 +1,188 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import './PasswordManager.css'; import './PasswordManager.css';
import PasswordList from './PasswordList'; import PasswordList from './PasswordList';
import PasswordForm from './PasswordForm'; import PasswordForm from './PasswordForm';
import SearchBar from './SearchBar'; import SearchBar from './SearchBar';
// API 地址配置：优先使用环境变量，否则根据构建模式自动选择 // API 地址配置：优先使用环境变量，否则根据构建模式自动选择
const API_BASE = process.env.REACT_APP_API_BASE || const API_BASE = process.env.REACT_APP_API_BASE ||
(process.env.NODE_ENV === 'production' (process.env.NODE_ENV === 'production'
? 'https://keyvault.api.shumengya.top/api' ? 'https://keyvault.api.shumengya.top/api'
: 'http://localhost:8080/api'); : 'http://localhost:8080/api');
const PasswordManager = () => { const PasswordManager = () => {
const [entries, setEntries] = useState([]); const [entries, setEntries] = useState([]);
const [filteredEntries, setFilteredEntries] = useState([]); const [filteredEntries, setFilteredEntries] = useState([]);
const [searchKeyword, setSearchKeyword] = useState(''); const [searchKeyword, setSearchKeyword] = useState('');
const [editingEntry, setEditingEntry] = useState(null); const [editingEntry, setEditingEntry] = useState(null);
const [showForm, setShowForm] = useState(false); const [showForm, setShowForm] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => { // PWA 安装提示
loadEntries(); const [installPrompt, setInstallPrompt] = useState(null);
}, []); const [showInstallBanner, setShowInstallBanner] = useState(false);
useEffect(() => { useEffect(() => {
filterEntries(); loadEntries();
}, [searchKeyword, entries]); }, []);
const loadEntries = async () => { useEffect(() => {
try { filterEntries();
setLoading(true); }, [searchKeyword, entries]);
const response = await axios.get(`${API_BASE}/entries`);
setEntries(response.data.entries || []); // 监听 PWA 安装事件
} catch (error) { useEffect(() => {
console.error('加载条目失败:', error); const handler = (e) => {
} finally { e.preventDefault();
setLoading(false); setInstallPrompt(e);
} setShowInstallBanner(true);
}; };
window.addEventListener('beforeinstallprompt', handler);
const filterEntries = () => { return () => window.removeEventListener('beforeinstallprompt', handler);
if (!searchKeyword.trim()) { }, []);
setFilteredEntries(entries);
return; const handleInstall = async () => {
} if (!installPrompt) return;
installPrompt.prompt();
const keyword = searchKeyword.toLowerCase(); const { outcome } = await installPrompt.userChoice;
const filtered = entries.filter(entry => if (outcome === 'accepted') {
entry.accountType?.toLowerCase().includes(keyword) || setShowInstallBanner(false);
entry.account?.toLowerCase().includes(keyword) || setInstallPrompt(null);
entry.username?.toLowerCase().includes(keyword) || }
entry.email?.toLowerCase().includes(keyword) || };
entry.website?.toLowerCase().includes(keyword) ||
entry.officialName?.toLowerCase().includes(keyword) || const loadEntries = async () => {
(entry.software && entry.software.toLowerCase().includes(keyword)) || try {
entry.tags?.toLowerCase().includes(keyword) setLoading(true);
); const response = await axios.get(`${API_BASE}/entries`);
setFilteredEntries(filtered); setEntries(response.data.entries || []);
}; } catch (error) {
console.error('加载条目失败:', error);
const handleAdd = () => { } finally {
setEditingEntry(null); setLoading(false);
setShowForm(true); }
}; };
const handleEdit = (entry) => { const filterEntries = () => {
setEditingEntry(entry); if (!searchKeyword.trim()) {
setShowForm(true); setFilteredEntries(entries);
}; return;
}
const handleDelete = async (id) => {
if (!window.confirm('确定要删除这条记录吗？')) { const keyword = searchKeyword.toLowerCase();
return; const filtered = entries.filter(entry =>
} entry.account?.toLowerCase().includes(keyword) ||
entry.username?.toLowerCase().includes(keyword) ||
try { entry.email?.toLowerCase().includes(keyword) ||
await axios.delete(`${API_BASE}/entries/${id}`); entry.website?.toLowerCase().includes(keyword) ||
loadEntries(); entry.officialName?.toLowerCase().includes(keyword) ||
} catch (error) { (entry.software && entry.software.toLowerCase().includes(keyword)) ||
console.error('删除失败:', error); entry.tags?.toLowerCase().includes(keyword)
alert('删除失败，请重试'); );
} setFilteredEntries(filtered);
}; };
const handleSave = async (entryData) => { const handleAdd = () => {
try { setEditingEntry(null);
if (editingEntry) { setShowForm(true);
await axios.put(`${API_BASE}/entries`, { ...entryData, id: editingEntry.id }); };
} else {
await axios.post(`${API_BASE}/entries`, entryData); const handleEdit = (entry) => {
} setEditingEntry(entry);
setShowForm(false); setShowForm(true);
setEditingEntry(null); };
loadEntries();
} catch (error) { const handleDelete = async (id) => {
console.error('保存失败:', error); if (!window.confirm('确定要删除这条记录吗？')) {
alert('保存失败，请重试'); return;
} }
};
try {
const handleCancel = () => { await axios.delete(`${API_BASE}/entries/${id}`);
setShowForm(false); loadEntries();
setEditingEntry(null); } catch (error) {
}; console.error('删除失败:', error);
alert('删除失败，请重试');
if (loading) { }
return ( };
<div className="manager-loading">
<div className="loading-spinner"></div> const handleSave = async (entryData) => {
</div> try {
); if (editingEntry) {
} await axios.put(`${API_BASE}/entries`, { ...entryData, id: editingEntry.id });
} else {
return ( await axios.post(`${API_BASE}/entries`, entryData);
<div className="password-manager"> }
<nav className="manager-nav"> setShowForm(false);
<div className="nav-content"> setEditingEntry(null);
<img loadEntries();
src={`${process.env.PUBLIC_URL}/logo.png`} } catch (error) {
alt="Logo" console.error('保存失败:', error);
className="nav-logo" alert('保存失败，请重试');
/> }
<h1 className="nav-title">萌芽密码管理器</h1> };
</div>
</nav> const handleCancel = () => {
<div className="manager-header"> setShowForm(false);
<button className="add-button" onClick={handleAdd}> setEditingEntry(null);
+ 添加密码 };
</button>
</div> if (loading) {
return (
<SearchBar <div className="manager-loading">
keyword={searchKeyword} <div className="loading-spinner"></div>
onKeywordChange={setSearchKeyword} </div>
/> );
}
<PasswordList
entries={filteredEntries} return (
onEdit={handleEdit} <div className="password-manager">
onDelete={handleDelete} {/* PWA 安装横幅 */}
/> {showInstallBanner && (
<div className="pwa-install-banner">
{showForm && ( <span className="pwa-banner-icon">🌱</span>
<PasswordForm <span className="pwa-banner-text">将萌芽密码添加到桌面，随时快速访问</span>
entry={editingEntry} <button className="pwa-install-btn" onClick={handleInstall}>添加到桌面</button>
onSave={handleSave} <button className="pwa-dismiss-btn" onClick={() => setShowInstallBanner(false)}>✕</button>
onCancel={handleCancel} </div>
/> )}
)} <nav className="manager-nav">
</div> <div className="nav-content">
); <img
}; src={`${process.env.PUBLIC_URL}/logo.png`}
alt="Logo"
export default PasswordManager; 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;

152
mengyakeyvault-frontend/src/components/SearchBar.css
View File

@@ -1,76 +1,76 @@
.search-bar-container { .search-bar-container {
margin-bottom: 25px; margin-bottom: 25px;
} }
.search-bar { .search-bar {
display: flex; display: flex;
align-items: center; align-items: center;
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
border-radius: 15px; border-radius: 15px;
padding: 12px 20px; padding: 12px 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
gap: 12px; gap: 12px;
} }
.search-icon { .search-icon {
color: #4caf50; color: #4caf50;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.search-icon svg { .search-icon svg {
display: block; display: block;
} }
.search-input { .search-input {
flex: 1; flex: 1;
border: none; border: none;
outline: none; outline: none;
font-size: 16px; font-size: 16px;
background: transparent; background: transparent;
color: #333; color: #333;
} }
.search-input::placeholder { .search-input::placeholder {
color: #999; color: #999;
} }
.clear-button { .clear-button {
background: rgba(244, 67, 54, 0.1); background: rgba(244, 67, 54, 0.1);
border: 1px solid rgba(244, 67, 54, 0.2); border: 1px solid rgba(244, 67, 54, 0.2);
color: #f44336; color: #f44336;
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;
width: 28px; width: 28px;
height: 28px; height: 28px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
transition: all 0.2s; transition: all 0.2s;
} }
.clear-button svg { .clear-button svg {
display: block; display: block;
} }
.clear-button:hover { .clear-button:hover {
background: rgba(244, 67, 54, 0.2); background: rgba(244, 67, 54, 0.2);
border-color: #f44336; border-color: #f44336;
transform: scale(1.1); transform: scale(1.1);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.search-bar { .search-bar {
padding: 10px 15px; padding: 10px 15px;
} }
.search-input { .search-input {
font-size: 14px; font-size: 14px;
} }
.search-input::placeholder { .search-input::placeholder {
font-size: 14px; font-size: 14px;
} }
} }

90
mengyakeyvault-frontend/src/components/SearchBar.js
View File

@@ -1,45 +1,45 @@
import React from 'react'; import React from 'react';
import './SearchBar.css'; import './SearchBar.css';
// SVG 图标组件 // SVG 图标组件
const SearchIcon = () => ( const SearchIcon = () => (
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<circle cx="11" cy="11" r="8"></circle> <circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path> <path d="m21 21-4.35-4.35"></path>
</svg> </svg>
); );
const ClearIcon = () => ( const ClearIcon = () => (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> <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="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>
</svg> </svg>
); );
const SearchBar = ({ keyword, onKeywordChange }) => { const SearchBar = ({ keyword, onKeywordChange }) => {
return ( return (
<div className="search-bar-container"> <div className="search-bar-container">
<div className="search-bar"> <div className="search-bar">
<span className="search-icon"><SearchIcon /></span> <span className="search-icon"><SearchIcon /></span>
<input <input
type="text" type="text"
value={keyword} value={keyword}
onChange={(e) => onKeywordChange(e.target.value)} onChange={(e) => onKeywordChange(e.target.value)}
placeholder="搜索官方名称、账号、用户名、邮箱、网站、标签..." placeholder="搜索官方名称、账号、用户名、邮箱、网站、标签..."
className="search-input" className="search-input"
/> />
{keyword && ( {keyword && (
<button <button
className="clear-button" className="clear-button"
onClick={() => onKeywordChange('')} onClick={() => onKeywordChange('')}
title="清除搜索" title="清除搜索"
> >
<ClearIcon /> <ClearIcon />
</button> </button>
)} )}
</div> </div>
</div> </div>
); );
}; };
export default SearchBar; export default SearchBar;

42
mengyakeyvault-frontend/src/index.css
View File

@@ -1,21 +1,21 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 50%, #ffd3a5 100%); background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 50%, #ffd3a5 100%);
min-height: 100vh; min-height: 100vh;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }

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

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

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

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

22
mengyakeyvault-frontend/src/setupProxy.js
View File

@@ -1,11 +1,11 @@
const { createProxyMiddleware } = require('http-proxy-middleware'); const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) { module.exports = function(app) {
app.use( app.use(
'/api', '/api',
createProxyMiddleware({ createProxyMiddleware({
target: 'http://localhost:8080', target: 'http://localhost:8080',
changeOrigin: true, changeOrigin: true,
}) })
); );
}; };

12
start_backend.bat
View File

@@ -1,6 +1,6 @@
@echo off @echo off
chcp 65001 >nul chcp 65001 >nul
echo 启动后端服务器... echo 启动后端服务器...
cd mengyakeyvault-backend cd mengyakeyvault-backend
go mod tidy go mod tidy
go run main.go go run main.go

18
start_frontend.bat
View File

@@ -1,9 +1,9 @@
@echo off @echo off
chcp 65001 >nul chcp 65001 >nul
echo 启动前端开发服务器... echo 启动前端开发服务器...
cd mengyakeyvault-frontend cd mengyakeyvault-frontend
if not exist node_modules ( if not exist node_modules (
echo 正在安装依赖... echo 正在安装依赖...
call npm install call npm install
) )
npm start npm start

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

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