diff --git a/README.md b/README.md index ec03a64..4d32241 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,206 @@ -# PerToolBoxFront +# PerToolBox Front - 前端界面 +> 一个基于 PHP + HTML/CSS/JS 的个人工具箱前端项目，采用响应式侧边栏设计，适配多端设备。 + +--- + +## 项目信息 + +- 版权所有：Sea Network Technology Studio +- 权利人：Canglan +- 联系方式：admin@sea-studio.top +- 开源协议：AGPL v3 + +--- + +## 功能特性 + +- 响应式侧边栏（支持手机 / PC） +- 用户认证（登录 / 注册 / 验证码） +- 待办事项管理（CRUD） +- 便签本（CRUD） +- 密码生成器 +- 二维码生成 +- 加密工具箱： + - Hash + - Base64 + - URL 编码 + - AES 加密 +- JSON 校验与格式化 +- 热度统计展示 + +--- + +## 环境要求 + +- PHP >= 8.0 +- Nginx 或 Apache + +--- + +## 快速开始 + +### 1. 克隆项目 + +```bash +git clone https://hz-gitea.sea-studio.top/Sea-Studio/PerToolBoxFront.git +cd PerToolBoxFront +``` + +### 2. 配置后端接口 + +编辑 config.php： + +```php +define('API_BASE_URL', 'https://your-domain/api/v1'); +``` + +### 3. 配置 Nginx + +```nginx +server { + listen 80; + server_name your-domain; + + root /path/to/PerToolBoxFront; + index index.php; + + location / { + try_files $uri $uri/ /index.php; + } + + location ~ \.php$ { + fastcgi_pass unix:/var/run/php/php8.0-fpm.sock; + fastcgi_index index.php; + fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; + include fastcgi_params; + } +} +``` + +### 4. 访问项目 + +``` +http://your-domain +``` + +--- + +## 项目结构 + +```text +PerToolBoxFront/ +├── index.php # 首页 +├── login.php # 登录/注册 +├── profile.php # 个人中心 +├── config.php # 配置文件 +├── header.php # 公共头部 +├── footer.php # 公共底部 +├── sidebar.php # 侧边栏 +├── css/ +│ └── style.css # 样式文件 +├── js/ +│ └── common.js # 公共脚本 +└── pages/ # 功能页面 + ├── todos.php # 待办事项 + ├── notes.php # 便签 + ├── password.php # 密码生成 + ├── qrcode.php # 二维码 + ├── crypto.php # 加密工具 + └── json.php # JSON 工具 +``` + +--- + +## 后端 API 要求 + +后端服务基础路径： + +``` +https://your-domain/api/v1 +``` + +实现以下接口： + +### 认证模块 + +- 用户注册 +- 用户登录 +- 验证码发送 + +### 数据模块 + +- 待办事项 CRUD +- 便签 CRUD + +### 工具模块 + +- 密码生成 +- 二维码生成 +- 加密 / 解密 +- JSON 处理 + +### 统计模块 + +- 热度统计接口 + +--- + +## 部署指南 + +### 后端部署 + +```bash +# 1. 安装依赖 +sudo dnf install -y python python-pip mysql redis nginx git # CentOS/Rocky +sudo apt install -y python python-pip mysql redis nginx git # Ubuntu/Debian + +# 2. 克隆项目 +git clone https://hz-gitea.sea-studio.top/Sea-Studio/PerToolBoxServer.git +cd PerToolBoxServer + +# 3. 创建虚拟环境 +python -m venv venv +source venv/bin/activate + +# 4. 安装依赖 +pip install -r requirements.txt + +# 5. 配置环境变量 +cp .env.example .env +# 编辑 .env 文件（数据库 / Redis / 短信服务） + +# 6. 初始化数据库 +mysql -u root -p < scripts/init_db.sql + +# 7. 启动服务 +uvicorn backend.main:app --host 0.0.0.0 --port 8000 +``` + +### 前端部署（Linux + Nginx + PHP） + +```bash +# 1. 安装依赖 +sudo dnf install -y php php-fpm nginx # CentOS/Rocky +sudo apt install -y php php-fpm nginx # Ubuntu/Debian + +# 2. 克隆项目 +git clone https://hz-gitea.sea-studio.top/Sea-Studio/PerToolBoxFront.git +cd PerToolBoxFront + +# 3. 配置 API 地址 +# 编辑 config.php + +# 4. 配置 Nginx +# 参考上方配置 + +# 5. 启动服务 +sudo systemctl start php-fpm +sudo systemctl start nginx +``` + +--- + +## 许可证 + +本项目基于 AGPL v3 协议开源。 \ No newline at end of file diff --git a/config.php b/config.php new file mode 100644 index 0000000..445aea5 --- /dev/null +++ b/config.php @@ -0,0 +1,30 @@ + + * License: AGPL v3 + */ + +// API 基础地址（后端服务地址） +define('API_BASE_URL', getenv('API_BASE_URL') ?: 'http://your-domain/api/v1'); + +// 网站名称 +define('SITE_NAME', 'PerToolBox'); + +// 调试模式 +define('DEBUG', getenv('DEBUG') === 'true'); + +// 错误报告 +if (DEBUG) { + error_reporting(E_ALL); + ini_set('display_errors', 1); +} else { + error_reporting(0); + ini_set('display_errors', 0); +} + +// 时区设置 +date_default_timezone_set('Asia/Shanghai'); +?> \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..ce09c1c --- /dev/null +++ b/css/style.css @@ -0,0 +1,259 @@ +/** + * PerToolBox Front - 响应式侧边栏样式 + * Copyright (C) 2024 Sea Network Technology Studio + * Author: Canglan + * License: AGPL v3 + */ + +/* 侧边栏基础样式 */ +.sidebar { + position: fixed; + top: 0; + left: 0; + width: 280px; + height: 100vh; + background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%); + color: white; + z-index: 40; + transform: translateX(-100%); + transition: transform 0.3s ease; + display: flex; + flex-direction: column; + overflow-y: auto; +} + +/* 桌面端显示 */ +@media (min-width: 768px) { + .sidebar { + transform: translateX(0); + } + + body { + margin-left: 280px; + } +} + +/* 移动端打开状态 */ +.sidebar.open { + transform: translateX(0); +} + +/* 侧边栏头部 */ +.sidebar-header { + padding: 1.5rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +/* 导航菜单 */ +.sidebar-nav { + flex: 1; + padding: 1rem 0; +} + +.sidebar-link { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 1.5rem; + color: #e2e8f0; + transition: all 0.2s; + text-decoration: none; +} + +.sidebar-link:hover { + background: rgba(255, 255, 255, 0.1); + color: white; +} + +/* 侧边栏底部 */ +.sidebar-footer { + padding: 1rem 0; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +/* 遮罩层 */ +.overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 35; + display: none; +} + +.overlay.active { + display: block; +} + +@media (min-width: 768px) { + .overlay { + display: none !important; + } +} + +/* 主要内容区域容器 */ +.main-content { + padding: 1.5rem; + max-width: 1200px; + margin: 0 auto; +} + +/* 卡片样式 */ +.card { + background: white; + border-radius: 0.75rem; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + padding: 1.5rem; + margin-bottom: 1.5rem; +} + +/* 工具卡片网格 */ +.tool-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.5rem; +} + +.tool-card { + background: white; + border-radius: 0.75rem; + padding: 1.5rem; + text-align: center; + transition: all 0.2s; + cursor: pointer; + text-decoration: none; + color: inherit; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.tool-card:hover { + transform: translateY(-4px); + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); +} + +.tool-icon { + font-size: 3rem; + margin-bottom: 0.75rem; +} + +.tool-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.tool-desc { + font-size: 0.875rem; + color: #6b7280; + margin-bottom: 0.75rem; +} + +.tool-stats { + font-size: 0.75rem; + color: #9ca3af; +} + +/* 表单样式 */ +.form-input { + width: 100%; + padding: 0.5rem 0.75rem; + border: 1px solid #d1d5db; + border-radius: 0.5rem; + outline: none; + transition: all 0.2s; +} + +.form-input:focus { + border-color: #3b82f6; + ring: 2px solid #3b82f6; +} + +.form-label { + display: block; + font-size: 0.875rem; + font-weight: 500; + margin-bottom: 0.25rem; + color: #374151; +} + +.btn { + padding: 0.5rem 1rem; + border-radius: 0.5rem; + font-weight: 500; + transition: all 0.2s; + cursor: pointer; + border: none; +} + +.btn-primary { + background: #3b82f6; + color: white; +} + +.btn-primary:hover { + background: #2563eb; +} + +.btn-secondary { + background: #6b7280; + color: white; +} + +.btn-secondary:hover { + background: #4b5563; +} + +.btn-danger { + background: #ef4444; + color: white; +} + +.btn-danger:hover { + background: #dc2626; +} + +/* 加载动画 */ +.loading { + display: inline-block; + width: 1rem; + height: 1rem; + border: 2px solid #e5e7eb; + border-top-color: #3b82f6; + border-radius: 50%; + animation: spin 0.6s linear infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +/* 响应式调整 */ +@media (max-width: 768px) { + .main-content { + padding: 1rem; + } + + .tool-grid { + grid-template-columns: 1fr; + } +} + +/* 滚动条 */ +::-webkit-scrollbar { + width: 6px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 3px; +} + +::-webkit-scrollbar-thumb:hover { + background: #a8a8a8; +} \ No newline at end of file diff --git a/footer.php b/footer.php new file mode 100644 index 0000000..1a24575 --- /dev/null +++ b/footer.php @@ -0,0 +1,25 @@ + + * License: AGPL v3 + */ +?> + + + + + \ No newline at end of file diff --git a/header.php b/header.php new file mode 100644 index 0000000..2f97d90 --- /dev/null +++ b/header.php @@ -0,0 +1,28 @@ + + * License: AGPL v3 + */ +?> + + + + + + + + <?php echo SITE_NAME; ?> - 个人工具箱 + + + + + + + + \ No newline at end of file diff --git a/index.php b/index.php new file mode 100644 index 0000000..48c1a4f --- /dev/null +++ b/index.php @@ -0,0 +1,94 @@ + + * License: AGPL v3 + */ + +require_once 'config.php'; +include_once 'header.php'; +include_once 'sidebar.php'; +?> + +
+
+

+

实用工具集 · 即开即用

+
+ + + +
+ + + + \ No newline at end of file diff --git a/js/common.js b/js/common.js new file mode 100644 index 0000000..8783786 --- /dev/null +++ b/js/common.js @@ -0,0 +1,197 @@ +/** + * PerToolBox Front - 公共 JavaScript + * Copyright (C) 2024 Sea Network Technology Studio + * Author: Canglan + * License: AGPL v3 + */ + +// ========== 全局变量 ========== +let currentUser = null; + +// ========== 工具函数 ========== +function getToken() { + return localStorage.getItem('token'); +} + +function setToken(token) { + if (token) { + localStorage.setItem('token', token); + } else { + localStorage.removeItem('token'); + } +} + +function isLoggedIn() { + return !!getToken(); +} + +// ========== API 请求封装 ========== +async function apiRequest(endpoint, options = {}) { + const url = endpoint.startsWith('http') ? endpoint : `${window.API_BASE}${endpoint}`; + const headers = { + 'Content-Type': 'application/json', + ...options.headers + }; + + const token = getToken(); + if (token) { + headers['Authorization'] = `Bearer ${token}`; + } + + try { + const response = await fetch(url, { + ...options, + headers + }); + + if (response.status === 401) { + // token 失效，清除本地存储并跳转登录页 + setToken(null); + if (!window.location.pathname.includes('/login.php')) { + window.location.href = '/login.php'; + } + return null; + } + + const data = await response.json(); + if (!response.ok) { + throw new Error(data.detail || data.message || '请求失败'); + } + return data; + } catch (error) { + console.error('API 请求错误:', error); + throw error; + } +} + +// ========== 热度上报 ========== +async function recordUsage(toolName) { + try { + await apiRequest(`/tool/usage?tool_name=${toolName}`, { method: 'POST' }); + } catch (error) { + console.warn('热度上报失败:', error); + } +} + +// ========== 获取用户信息 ========== +async function loadUserInfo() { + if (!isLoggedIn()) { + updateUserUI(null); + return null; + } + + try { + const user = await apiRequest('/user/profile'); + currentUser = user; + updateUserUI(user); + return user; + } catch (error) { + console.error('获取用户信息失败:', error); + setToken(null); + updateUserUI(null); + return null; + } +} + +// ========== 更新侧边栏 UI ========== +function updateUserUI(user) { + const userInfoDiv = document.getElementById('userInfo'); + const profileLink = document.getElementById('profileLink'); + const logoutBtn = document.getElementById('logoutBtn'); + const loginLink = document.getElementById('loginLink'); + + if (user) { + const displayName = user.username || user.phone || user.email || '用户'; + userInfoDiv.innerHTML = ` +
+
欢迎，
+
${escapeHtml(displayName)}
+
+ `; + if (profileLink) profileLink.style.display = 'flex'; + if (logoutBtn) logoutBtn.style.display = 'flex'; + if (loginLink) loginLink.style.display = 'none'; + } else { + userInfoDiv.innerHTML = ''; + if (profileLink) profileLink.style.display = 'none'; + if (logoutBtn) logoutBtn.style.display = 'none'; + if (loginLink) loginLink.style.display = 'flex'; + } +} + +// ========== 退出登录 ========== +function logout() { + setToken(null); + currentUser = null; + updateUserUI(null); + window.location.href = '/'; +} + +// ========== 侧边栏控制 ========== +function initSidebar() { + const menuBtn = document.getElementById('menuBtn'); + const closeBtn = document.getElementById('closeSidebar'); + const sidebar = document.getElementById('sidebar'); + const overlay = document.getElementById('overlay'); + + function openSidebar() { + if (sidebar) sidebar.classList.add('open'); + if (overlay) overlay.classList.add('active'); + document.body.style.overflow = 'hidden'; + } + + function closeSidebar() { + if (sidebar) sidebar.classList.remove('open'); + if (overlay) overlay.classList.remove('active'); + document.body.style.overflow = ''; + } + + if (menuBtn) menuBtn.addEventListener('click', openSidebar); + if (closeBtn) closeBtn.addEventListener('click', closeSidebar); + if (overlay) overlay.addEventListener('click', closeSidebar); + + // 点击侧边栏内的链接后自动关闭（移动端） + if (sidebar) { + sidebar.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + if (window.innerWidth < 768) { + closeSidebar(); + } + }); + }); + } +} + +// ========== HTML 转义 ========== +function escapeHtml(text) { + if (!text) return ''; + const div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; +} + +// ========== 显示 Toast 消息 ========== +function showToast(message, type = 'success') { + const toast = document.createElement('div'); + toast.className = `fixed bottom-4 right-4 z-50 px-4 py-2 rounded-lg shadow-lg text-white ${ + type === 'success' ? 'bg-green-500' : 'bg-red-500' + }`; + toast.textContent = message; + document.body.appendChild(toast); + setTimeout(() => toast.remove(), 3000); +} + +// ========== 页面初始化 ========== +document.addEventListener('DOMContentLoaded', () => { + initSidebar(); + loadUserInfo(); + + // 绑定退出按钮 + const logoutBtn = document.getElementById('logoutBtn'); + if (logoutBtn) { + logoutBtn.addEventListener('click', (e) => { + e.preventDefault(); + logout(); + }); + } +}); \ No newline at end of file diff --git a/login.php b/login.php new file mode 100644 index 0000000..02a64bf --- /dev/null +++ b/login.php @@ -0,0 +1,216 @@ + + * License: AGPL v3 + */ + +require_once 'config.php'; +include_once 'header.php'; +include_once 'sidebar.php'; +?> + +
+
+
+
+ + +
+ + +
+
+ + +
+
+ +
+ + +
+
+ +
+ + + +
+
+
+ + + + \ No newline at end of file diff --git a/pages/crypto.php b/pages/crypto.php new file mode 100644 index 0000000..cde2ef5 --- /dev/null +++ b/pages/crypto.php @@ -0,0 +1,172 @@ + + * License: AGPL v3 + */ + +require_once '../config.php'; +include_once '../header.php'; +include_once '../sidebar.php'; +?> + +
+
+

🔒 加密工具箱

+ + +
+

哈希计算

+
+ + + +
+
+
结果：
+
+
+
+ + +
+

Base64 编解码

+ +
+ + +
+
+
结果：
+
+
+
+ + +
+

URL 编解码

+ +
+ + +
+
+
结果：
+
+
+
+ + +
+

AES 加解密

+
+ + +
+ + +
+ + +
+
+
结果：
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/pages/json.php b/pages/json.php new file mode 100644 index 0000000..77e5257 --- /dev/null +++ b/pages/json.php @@ -0,0 +1,82 @@ + + * License: AGPL v3 + */ + +require_once '../config.php'; +include_once '../header.php'; +include_once '../sidebar.php'; +?> + +
+
+

📋 JSON 校验器

+ +
+ + +
+ + + + + + +
+
+ + + + \ No newline at end of file diff --git a/pages/notes.php b/pages/notes.php new file mode 100644 index 0000000..941a564 --- /dev/null +++ b/pages/notes.php @@ -0,0 +1,157 @@ + + * License: AGPL v3 + */ + +require_once '../config.php'; +include_once '../header.php'; +include_once '../sidebar.php'; +?> + +
+
+
+

📝 便签本

+ +
+ + +
+
加载中...
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/pages/password.php b/pages/password.php new file mode 100644 index 0000000..635fb5b --- /dev/null +++ b/pages/password.php @@ -0,0 +1,108 @@ + + * License: AGPL v3 + */ + +require_once '../config.php'; +include_once '../header.php'; +include_once '../sidebar.php'; +?> + +
+
+

🔑 密码生成器

+ +
+
+ + + +
+
+ +
+ + + + +
+ +
+ + +
+ +
+ +
+ + +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/pages/qrcode.php b/pages/qrcode.php new file mode 100644 index 0000000..cee7cf1 --- /dev/null +++ b/pages/qrcode.php @@ -0,0 +1,84 @@ + + * License: AGPL v3 + */ + +require_once '../config.php'; +include_once '../header.php'; +include_once '../sidebar.php'; +?> + +
+
+

📱 二维码生成器

+ +
+
+ + + + + + + +
+ +
+
+
点击生成二维码
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/pages/todos.php b/pages/todos.php new file mode 100644 index 0000000..0b1b386 --- /dev/null +++ b/pages/todos.php @@ -0,0 +1,262 @@ + + * License: AGPL v3 + */ + +require_once '../config.php'; +include_once '../header.php'; +include_once '../sidebar.php'; +?> + +
+
+
+

✅ 待办事项

+ +
+ + +
+ + + + +
+ + +
+
加载中...
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/profile.php b/profile.php new file mode 100644 index 0000000..fdff4de --- /dev/null +++ b/profile.php @@ -0,0 +1,123 @@ + + * License: AGPL v3 + */ + +require_once 'config.php'; +include_once 'header.php'; +include_once 'sidebar.php'; + +// 检查登录状态（前端 JS 会处理跳转） +?> + +
+
+
+

👤 个人中心

+ +
+
+
+

加载中...

+
+
+
+ +
+

修改密码

+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/sidebar.php b/sidebar.php new file mode 100644 index 0000000..5cf74dc --- /dev/null +++ b/sidebar.php @@ -0,0 +1,68 @@ + + * License: AGPL v3 + */ +?> + + + + + + + +
\ No newline at end of file