From 7786e5f507f6bc03d16f3403373fd5329d967cd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=91=E8=90=8C=E8=8A=BD?= <3205788256@qq.com> Date: Fri, 19 Sep 2025 22:03:59 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=89=8D=E7=AB=AF=20?= =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E6=94=B9=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- InfoGenie-backend/app.py | 4 +- InfoGenie-backend/build_docker.sh | 2 +- InfoGenie-backend/config.py | 8 +- InfoGenie-backend/modules/aimodelapp.py | 2 +- InfoGenie-backend/modules/auth.py | 2 +- InfoGenie-backend/modules/email_service.py | 4 +- InfoGenie-backend/modules/user_management.py | 2 +- InfoGenie-frontend/package.json | 4 +- .../实用功能/农历信息/css/background.css | 26 +- .../60sapi/实用功能/农历信息/css/style.css | 270 ++++------------ .../60sapi/实用功能/农历信息/js/script.js | 2 +- .../日更资讯/历史上的今天/css/style.css | 179 ++++++----- .../日更资讯/每日国际汇率/css/style.css | 93 +++++- .../60sapi/热搜榜单/抖音热搜榜/css/style.css | 93 +++++- .../热搜榜单/知乎热门话题/css/style.css | 89 ++++- InfoGenie-frontend/public/index.html | 61 ++-- InfoGenie-frontend/public/manifest.json | 8 +- InfoGenie-frontend/setting.json | 8 +- InfoGenie-frontend/src/components/Footer.js | 28 +- InfoGenie-frontend/src/components/Header.js | 18 +- .../src/components/Navigation.js | 4 +- .../src/config/StaticPageConfig.js | 14 +- InfoGenie-frontend/src/pages/AiModelPage.js | 6 +- InfoGenie-frontend/src/pages/Api60sPage.js | 44 ++- InfoGenie-frontend/src/pages/HomePage.js | 48 +-- InfoGenie-frontend/src/pages/SmallGamePage.js | 4 +- .../src/pages/UserProfilePage.js | 39 ++- InfoGenie-frontend/src/styles/index.css | 18 ++ README.md | 6 +- 项目架构说明.md | 303 ++++++++++++++++++ 项目架构说明.txt | 10 - 31 files changed, 950 insertions(+), 449 deletions(-) create mode 100644 项目架构说明.md delete mode 100755 项目架构说明.txt diff --git a/InfoGenie-backend/app.py b/InfoGenie-backend/app.py index 41e49ea8..8f2e1465 100755 --- a/InfoGenie-backend/app.py +++ b/InfoGenie-backend/app.py @@ -2,7 +2,7 @@ # -*- coding: utf-8 -*- """ InfoGenie 后端主应用入口 -Created by: 神奇万事通 +Created by: 万象口袋 Date: 2025-09-02 """ @@ -50,7 +50,7 @@ def create_app(): def index(): """API根路径""" return jsonify({ - 'message': '✨ 神奇万事通 API 服务运行中 ✨', + 'message': '✨ 万象口袋 API 服务运行中 ✨', 'version': '1.0.0', 'timestamp': datetime.now().isoformat(), 'endpoints': { diff --git a/InfoGenie-backend/build_docker.sh b/InfoGenie-backend/build_docker.sh index 1f246bfc..9abf28a8 100755 --- a/InfoGenie-backend/build_docker.sh +++ b/InfoGenie-backend/build_docker.sh @@ -1,7 +1,7 @@ #!/bin/bash # InfoGenie 后端 Docker 镜像构建脚本 -# Created by: 神奇万事通 +# Created by: 万象口袋 # Date: 2025-09-16 set -e diff --git a/InfoGenie-backend/config.py b/InfoGenie-backend/config.py index 824532c5..251fcab6 100755 --- a/InfoGenie-backend/config.py +++ b/InfoGenie-backend/config.py @@ -2,7 +2,7 @@ # -*- coding: utf-8 -*- """ InfoGenie 配置文件 -Created by: 神奇万事通 +Created by: 万象口袋 Date: 2025-09-02 """ @@ -38,7 +38,7 @@ class Config: MAIL_USE_TLS = False MAIL_USERNAME = os.environ.get('MAIL_USERNAME') or 'your-email@qq.com' MAIL_PASSWORD = os.environ.get('MAIL_PASSWORD') or 'your-app-password' - MAIL_DEFAULT_SENDER = ('InfoGenie 神奇万事通', os.environ.get('MAIL_USERNAME') or 'your-email@qq.com') + MAIL_DEFAULT_SENDER = ('InfoGenie 万象口袋', os.environ.get('MAIL_USERNAME') or 'your-email@qq.com') # API 配置 API_RATE_LIMIT = '100 per hour' # API调用频率限制 @@ -52,9 +52,9 @@ class Config: # 应用信息 APP_INFO = { - 'name': '✨ 神奇万事通 ✨', + 'name': '✨ 万象口袋 ✨', 'description': '🎨 一个多功能的聚合软件应用 💬', - 'author': '👨‍💻 by-神奇万事通', + 'author': '👨‍💻 by-万象口袋', 'version': '1.0.0', 'icp': '📄 蜀ICP备2025151694号' } diff --git a/InfoGenie-backend/modules/aimodelapp.py b/InfoGenie-backend/modules/aimodelapp.py index ce340932..5b52d554 100755 --- a/InfoGenie-backend/modules/aimodelapp.py +++ b/InfoGenie-backend/modules/aimodelapp.py @@ -2,7 +2,7 @@ # -*- coding: utf-8 -*- """ AI模型应用服务模块 -Created by: 神奇万事通 +Created by: 万象口袋 Date: 2025-01-15 """ diff --git a/InfoGenie-backend/modules/auth.py b/InfoGenie-backend/modules/auth.py index 0c7090de..2e074970 100755 --- a/InfoGenie-backend/modules/auth.py +++ b/InfoGenie-backend/modules/auth.py @@ -2,7 +2,7 @@ # -*- coding: utf-8 -*- """ 用户认证模块 -Created by: 神奇万事通 +Created by: 万象口袋 Date: 2025-09-02 """ diff --git a/InfoGenie-backend/modules/email_service.py b/InfoGenie-backend/modules/email_service.py index dfbe45a5..1f0e69e0 100755 --- a/InfoGenie-backend/modules/email_service.py +++ b/InfoGenie-backend/modules/email_service.py @@ -72,7 +72,7 @@ def send_verification_email(email, verification_type='register'):
-

InfoGenie 神奇万事通

+

InfoGenie 万象口袋

欢迎注册InfoGenie

@@ -101,7 +101,7 @@ def send_verification_email(email, verification_type='register'):
-

InfoGenie 神奇万事通

+

InfoGenie 万象口袋

安全登录验证

diff --git a/InfoGenie-backend/modules/user_management.py b/InfoGenie-backend/modules/user_management.py index e3cb659d..851a19e8 100755 --- a/InfoGenie-backend/modules/user_management.py +++ b/InfoGenie-backend/modules/user_management.py @@ -2,7 +2,7 @@ # -*- coding: utf-8 -*- """ 用户管理模块 -Created by: 神奇万事通 +Created by: 万象口袋 Date: 2025-09-02 """ diff --git a/InfoGenie-frontend/package.json b/InfoGenie-frontend/package.json index bcdbfef4..e93de60e 100755 --- a/InfoGenie-frontend/package.json +++ b/InfoGenie-frontend/package.json @@ -1,9 +1,9 @@ { "name": "infogenie-frontend", "version": "1.0.0", - "description": "✨ 神奇万事通 - 前端React应用", + "description": "✨ 万象口袋 - 前端React应用", "keywords": ["react", "api", "mobile-first", "responsive"], - "author": "神奇万事通", + "author": "万象口袋", "license": "MIT", "private": true, "homepage": "/", diff --git a/InfoGenie-frontend/public/60sapi/实用功能/农历信息/css/background.css b/InfoGenie-frontend/public/60sapi/实用功能/农历信息/css/background.css index 245ce898..3454ea71 100755 --- a/InfoGenie-frontend/public/60sapi/实用功能/农历信息/css/background.css +++ b/InfoGenie-frontend/public/60sapi/实用功能/农历信息/css/background.css @@ -1,21 +1,21 @@ -/* 农历主题背景样式 - 动态调节版本 */ +/* 农历主题背景样式 - 柔和版本 */ body { background: linear-gradient(135deg, - #fff8dc 0%, /* 玉米丝色 */ - #ffd700 20%, /* 金黄色 */ - #ffcc00 40%, /* 亮金色 */ - #daa520 60%, /* 深金色 */ - #b8860b 80%, /* 暗金色 */ - #fff8dc 100% /* 玉米丝色 */ + #f8f9fa 0%, /* 浅灰白 */ + #fff3e0 20%, /* 淡橙色 */ + #fef7e0 40%, /* 极淡黄 */ + #f3e5ab 60%, /* 柔和金色 */ + #e8dcc6 80%, /* 米色 */ + #f8f9fa 100% /* 浅灰白 */ ); background-size: 400% 400%; - animation: goldenShift 25s ease infinite; + animation: gentleShift 30s ease infinite; background-attachment: fixed; min-height: 100vh; position: relative; } -@keyframes goldenShift { +@keyframes gentleShift { 0% { background-position: 0% 50%; } 25% { background-position: 100% 50%; } 50% { background-position: 100% 100%; } @@ -23,7 +23,7 @@ body { 100% { background-position: 0% 50%; } } -/* 动态颜色调节系统 */ +/* 动态颜色调节系统 - 柔和版本 */ .adaptive-overlay { position: fixed; top: 0; @@ -31,9 +31,9 @@ body { width: 100%; height: 100%; background: - radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.15) 0%, transparent 50%), - linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%); + radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%), + radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.25) 0%, transparent 50%), + linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 100%); pointer-events: none; z-index: 1; animation: adaptiveShift 60s ease infinite; diff --git a/InfoGenie-frontend/public/60sapi/实用功能/农历信息/css/style.css b/InfoGenie-frontend/public/60sapi/实用功能/农历信息/css/style.css index d587d194..38abe022 100755 --- a/InfoGenie-frontend/public/60sapi/实用功能/农历信息/css/style.css +++ b/InfoGenie-frontend/public/60sapi/实用功能/农历信息/css/style.css @@ -8,34 +8,26 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; - color: #2c3e50; + color: #1a1a1a; overflow-x: hidden; - animation: textColorShift 25s ease infinite; } -@keyframes textColorShift { - 0% { - color: #2c3e50; - text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); - } - 25% { - color: #1a252f; - text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9); - } - 50% { - color: #34495e; - text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7); - } - 75% { - color: #2c3e50; - text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8); - } - 100% { - color: #2c3e50; - text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); - } +/* 结果容器 - 优化可读性版本 */ +.result-container { + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 25px; + padding: 40px; + margin-top: 40px; + box-shadow: + 0 8px 32px 0 rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.8); } +/* 移除过度的文字颜色动画，保持稳定的可读性 */ + /* 容器 */ .container { max-width: 1200px; @@ -106,22 +98,21 @@ body { } } -/* 头部 - 动态调节版本 */ +/* 头部 - 优化可读性版本 */ .header { text-align: center; margin-bottom: 40px; - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(25px); - -webkit-backdrop-filter: blur(25px); + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); padding: 40px 30px; border-radius: 25px; - border: 1px solid rgba(255, 255, 255, 0.2); + border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: - 0 8px 32px 0 rgba(31, 38, 135, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.4); + 0 8px 32px 0 rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.8); position: relative; overflow: hidden; - animation: headerColorShift 25s ease infinite; } @keyframes headerColorShift { @@ -204,78 +195,23 @@ body { .title { font-size: 3.2em; font-weight: 800; - color: #2c3e50; + color: #1a1a1a; margin-bottom: 10px; - text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.6); + text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8); letter-spacing: 2px; - animation: titleGlow 4s ease-in-out infinite alternate, titleColorShift 25s ease infinite; } -@keyframes titleColorShift { - 0% { - color: #2c3e50; - text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.6); - } - 25% { - color: #3498db; - text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(52, 152, 219, 0.4); - } - 50% { - color: #e74c3c; - text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), 0 0 5px rgba(231, 76, 60, 0.3); - } - 75% { - color: #f39c12; - text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8), 0 0 6px rgba(243, 156, 18, 0.4); - } - 100% { - color: #2c3e50; - text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.6); - } -} - -@keyframes titleGlow { - 0% { - text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.6); - color: #2c3e50; - } - 100% { - text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.7); - color: #3498db; - } -} +/* 移除标题颜色动画，保持稳定的可读性 */ .subtitle { font-size: 1.3em; - color: #7f8c8d; + color: #555555; margin-bottom: 30px; font-weight: 600; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); - animation: subtitleColorShift 25s ease infinite; } -@keyframes subtitleColorShift { - 0% { - color: #7f8c8d; - text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); - } - 25% { - color: #9b59b6; - text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9); - } - 50% { - color: #e67e22; - text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7); - } - 75% { - color: #27ae60; - text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8); - } - 100% { - color: #7f8c8d; - text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); - } -} +/* 移除副标题颜色动画，保持稳定的可读性 */ /* 日期选择器 */ .date-selector { @@ -298,84 +234,35 @@ body { display: flex; align-items: center; gap: 8px; - color: #0f1419; + color: #2c2c2c; font-weight: 600; font-size: 1em; - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); - animation: labelColorShift 25s ease infinite; + text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); } -@keyframes labelColorShift { - 0% { - color: #0f1419; - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); - } - 25% { - color: #1a252f; - text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7); - } - 50% { - color: #2c3e50; - text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); - } - 75% { - color: #0f1419; - text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); - } - 100% { - color: #0f1419; - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); - } -} +/* 移除标签颜色动画，保持稳定的可读性 */ .label-icon { font-size: 1.2em; } .date-input { - background: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 15px; padding: 12px 16px; - color: #0a0f14; + color: #1a1a1a; font-size: 1em; font-weight: 500; transition: all 0.3s ease; box-shadow: - 0 4px 15px rgba(31, 38, 135, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - animation: inputColorShift 25s ease infinite; + 0 4px 15px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.8); } -@keyframes inputColorShift { - 0% { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.3); - color: #0a0f14; - } - 25% { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.4); - color: #1a252f; - } - 50% { - background: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.35); - color: #2c3e50; - } - 75% { - background: rgba(255, 255, 255, 0.18); - border-color: rgba(255, 255, 255, 0.38); - color: #0a0f14; - } - 100% { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.3); - color: #0a0f14; - } -} +/* 移除输入框颜色动画，保持稳定的可读性 */ .date-input:focus { outline: none; @@ -395,11 +282,11 @@ body { } .query-btn { - background: rgba(255, 255, 255, 0.15); + background: linear-gradient(135deg, #f0f0f0, #e0e0e0); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); - color: #0a0f14; - border: 1px solid rgba(255, 255, 255, 0.3); + color: #1a1a1a; + border: 1px solid rgba(0, 0, 0, 0.2); padding: 12px 28px; border-radius: 20px; cursor: pointer; @@ -411,40 +298,13 @@ body { gap: 8px; position: relative; overflow: hidden; - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); + text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8); box-shadow: - 0 4px 15px rgba(31, 38, 135, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); - animation: buttonColorShift 25s ease infinite; + 0 4px 15px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.8); } -@keyframes buttonColorShift { - 0% { - background: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.3); - color: #0a0f14; - } - 25% { - background: rgba(255, 255, 255, 0.25); - border-color: rgba(255, 255, 255, 0.4); - color: #1a252f; - } - 50% { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.35); - color: #2c3e50; - } - 75% { - background: rgba(255, 255, 255, 0.22); - border-color: rgba(255, 255, 255, 0.38); - color: #0a0f14; - } - 100% { - background: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.3); - color: #0a0f14; - } -} +/* 移除按钮颜色动画，保持稳定的可读性 */ .query-btn::before { content: ''; @@ -466,12 +326,12 @@ body { } .query-btn:hover { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.4); - transform: translateY(-3px); + background: linear-gradient(135deg, #e8e8e8, #d8d8d8); + border-color: rgba(0, 0, 0, 0.3); + transform: translateY(-2px); box-shadow: - 0 8px 25px rgba(31, 38, 135, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.4); + 0 8px 25px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.9); } .btn-icon { @@ -590,10 +450,10 @@ body { .loading-text p { font-size: 1.2em; - color: rgba(255, 255, 255, 0.9); + color: #1a1a1a; font-weight: 600; margin: 0; - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8); } .loading-dots { @@ -604,7 +464,7 @@ body { .loading-dots span { width: 10px; height: 10px; - background: rgba(255, 255, 255, 0.7); + background: #4a4a4a; border-radius: 50%; animation: glassDotsFloat 1.4s ease-in-out infinite both; backdrop-filter: blur(2px); @@ -1016,15 +876,18 @@ body { } } -/* 手机端适配 (767px以下) */ +/* 手机端适配 (767px以下) - 优化手机端体验 */ @media (max-width: 767px) { .container { padding: 15px; + margin: 10px auto; + max-width: 95%; } .header { - padding: 25px 20px; + padding: 25px 15px; margin-bottom: 25px; + border-radius: 20px; } .header-icon { @@ -1034,16 +897,19 @@ body { .title { font-size: 2.2em; letter-spacing: 1px; + margin-bottom: 8px; } .subtitle { font-size: 1em; + margin-bottom: 20px; } .date-selector { flex-direction: column; gap: 15px; align-items: center; + padding: 0 5px; } .input-group { @@ -1053,16 +919,19 @@ body { } .date-input { - padding: 10px 14px; - font-size: 0.95em; + padding: 14px 16px; + font-size: 16px; /* 防止iOS缩放 */ + border-radius: 12px; } .query-btn { - padding: 10px 24px; - font-size: 0.95em; + padding: 14px 24px; + font-size: 16px; width: 100%; max-width: 200px; justify-content: center; + border-radius: 15px; + margin-top: 10px; } .update-time { @@ -1101,7 +970,8 @@ body { .item-label { min-width: auto; - font-size: 0.9em; + font-size: 0.95em; + margin-bottom: 8px; } .item-value { @@ -1360,7 +1230,7 @@ body { .hour-label { font-weight: 600; - color: #ffffff; + color: #1a1a1a; margin-right: 4px; } @@ -1373,7 +1243,7 @@ body { } .hour-text { - color: rgba(255, 255, 255, 0.9); + color: #2c2c2c; } /* 时辰宜忌响应式优化 */ diff --git a/InfoGenie-frontend/public/60sapi/实用功能/农历信息/js/script.js b/InfoGenie-frontend/public/60sapi/实用功能/农历信息/js/script.js index 262c1e91..ac8c595b 100755 --- a/InfoGenie-frontend/public/60sapi/实用功能/农历信息/js/script.js +++ b/InfoGenie-frontend/public/60sapi/实用功能/农历信息/js/script.js @@ -382,7 +382,7 @@ function showSuccessMessage(message) { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); - color: rgba(255, 255, 255, 0.95); + color: #1a1a1a; padding: 12px 20px; border-radius: 25px; border: 1px solid rgba(255, 255, 255, 0.3); diff --git a/InfoGenie-frontend/public/60sapi/日更资讯/历史上的今天/css/style.css b/InfoGenie-frontend/public/60sapi/日更资讯/历史上的今天/css/style.css index 93fb1485..69f3edbf 100755 --- a/InfoGenie-frontend/public/60sapi/日更资讯/历史上的今天/css/style.css +++ b/InfoGenie-frontend/public/60sapi/日更资讯/历史上的今天/css/style.css @@ -9,13 +9,29 @@ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: linear-gradient(135deg, + #e8f5e8 0%, /* 淡绿色 */ + #f0f8e8 25%, /* 浅绿黄 */ + #fff8dc 50%, /* 淡黄色 */ + #f5f5dc 75%, /* 米色 */ + #e8f5e8 100% /* 淡绿色 */ + ); + background-size: 400% 400%; + animation: freshGradientShift 20s ease infinite; min-height: 100vh; color: #2c3e50; line-height: 1.6; overflow-x: hidden; } +@keyframes freshGradientShift { + 0% { background-position: 0% 50%; } + 25% { background-position: 100% 50%; } + 50% { background-position: 100% 100%; } + 75% { background-position: 0% 100%; } + 100% { background-position: 0% 50%; } +} + .container { max-width: 100%; margin: 0 auto; @@ -26,11 +42,12 @@ body { .header { text-align: center; margin-bottom: 20px; - background: rgba(255, 255, 255, 0.95); - border-radius: 15px; - padding: 20px 15px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(10px); + background: rgba(255, 255, 255, 0.9); + border-radius: 20px; + padding: 25px 20px; + box-shadow: 0 8px 32px rgba(46, 125, 50, 0.15); + backdrop-filter: blur(15px); + border: 1px solid rgba(139, 195, 74, 0.2); } .header h1 { @@ -52,43 +69,47 @@ body { } /* 日期显示 */ -.date-info { - background: rgba(255, 255, 255, 0.95); - border-radius: 12px; - padding: 15px; - margin-bottom: 15px; +.date-section { + background: rgba(255, 255, 255, 0.9); + border-radius: 16px; + padding: 20px; + margin-bottom: 20px; text-align: center; - box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); + box-shadow: 0 6px 24px rgba(76, 175, 80, 0.12); + border: 1px solid rgba(139, 195, 74, 0.2); } -.date-info h2 { - font-size: 1.3rem; - color: #2c3e50; - margin-bottom: 5px; +.date-display h2 { + font-size: 1.4rem; + color: #2e7d32; + margin-bottom: 8px; + font-weight: 600; } -.date-info .date-text { - color: #7f8c8d; - font-size: 0.9rem; +.date-display .date-text { + color: #558b2f; + font-size: 1rem; + font-weight: 500; } /* 加载状态 */ .loading { text-align: center; - padding: 30px 15px; - background: rgba(255, 255, 255, 0.95); - border-radius: 12px; - box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); + padding: 40px 20px; + background: rgba(255, 255, 255, 0.9); + border-radius: 16px; + box-shadow: 0 6px 24px rgba(76, 175, 80, 0.12); + border: 1px solid rgba(139, 195, 74, 0.2); } -.spinner { - width: 35px; - height: 35px; - border: 3px solid #ecf0f1; - border-top: 3px solid #667eea; +.loading-spinner { + width: 40px; + height: 40px; + border: 3px solid rgba(139, 195, 74, 0.2); + border-top: 3px solid #689f38; border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 15px; + animation: spin 1.2s linear infinite; + margin: 0 auto 20px; } @keyframes spin { @@ -98,40 +119,49 @@ body { /* 历史事件容器 */ .events-container { - background: rgba(255, 255, 255, 0.95); - border-radius: 15px; - padding: 15px; - margin-bottom: 15px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); - backdrop-filter: blur(10px); + background: rgba(255, 255, 255, 0.9); + border-radius: 20px; + padding: 25px; + margin-bottom: 20px; + box-shadow: 0 8px 32px rgba(76, 175, 80, 0.15); + backdrop-filter: blur(15px); + border: 1px solid rgba(139, 195, 74, 0.2); } /* 统计信息 */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 8px; - margin-bottom: 20px; + gap: 12px; + margin-bottom: 25px; } .stat-item { - background: rgba(102, 126, 234, 0.1); - border-radius: 10px; - padding: 12px; + background: rgba(139, 195, 74, 0.15); + border-radius: 12px; + padding: 16px 12px; text-align: center; + border: 1px solid rgba(139, 195, 74, 0.2); + transition: all 0.3s ease; +} + +.stat-item:hover { + background: rgba(139, 195, 74, 0.2); + transform: translateY(-2px); } .stat-number { - font-size: 1.4rem; + font-size: 1.5rem; font-weight: 700; - color: #667eea; + color: #558b2f; display: block; } .stat-label { - color: #7f8c8d; - font-size: 0.8rem; - margin-top: 3px; + color: #689f38; + font-size: 0.85rem; + margin-top: 4px; + font-weight: 500; } /* 事件列表 */ @@ -142,18 +172,20 @@ body { } .event-card { - background: rgba(255, 255, 255, 0.9); - border-radius: 12px; - padding: 15px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + background: rgba(255, 255, 255, 0.95); + border-radius: 16px; + padding: 20px; + box-shadow: 0 4px 16px rgba(76, 175, 80, 0.1); transition: all 0.3s ease; - border-left: 4px solid #667eea; + border-left: 4px solid #81c784; position: relative; + border: 1px solid rgba(139, 195, 74, 0.15); } .event-card:hover { - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(76, 175, 80, 0.15); + border-left-color: #66bb6a; } /* 事件类型标签 */ @@ -170,25 +202,25 @@ body { .event-type.birth { background: #e8f5e8; - color: #27ae60; + color: #2e7d32; } .event-type.death { - background: #fdf2e9; - color: #e67e22; + background: #fff3e0; + color: #f57c00; } .event-type.event { - background: #ebf3fd; - color: #3498db; + background: #f1f8e9; + color: #558b2f; } /* 事件年份 */ .event-year { font-size: 1.1rem; font-weight: 700; - color: #667eea; - margin-bottom: 8px; + color: #558b2f; + margin-bottom: 10px; display: flex; align-items: center; gap: 8px; @@ -220,20 +252,22 @@ body { .event-link { display: inline-flex; align-items: center; - gap: 5px; - color: #667eea; + gap: 6px; + color: #558b2f; text-decoration: none; - font-size: 0.8rem; + font-size: 0.85rem; font-weight: 500; - padding: 6px 12px; - background: rgba(102, 126, 234, 0.1); - border-radius: 15px; + padding: 8px 14px; + background: rgba(139, 195, 74, 0.15); + border-radius: 18px; transition: all 0.3s ease; + border: 1px solid rgba(139, 195, 74, 0.2); } .event-link:hover { - background: rgba(102, 126, 234, 0.2); + background: rgba(139, 195, 74, 0.25); transform: translateX(2px); + color: #2e7d32; } .event-link::after { @@ -371,18 +405,19 @@ body { /* 滚动条样式 */ ::-webkit-scrollbar { - width: 6px; + width: 8px; } ::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.1); + background: rgba(139, 195, 74, 0.1); + border-radius: 4px; } ::-webkit-scrollbar-thumb { - background: rgba(102, 126, 234, 0.5); - border-radius: 3px; + background: rgba(139, 195, 74, 0.5); + border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { - background: rgba(102, 126, 234, 0.7); + background: rgba(139, 195, 74, 0.7); } \ No newline at end of file diff --git a/InfoGenie-frontend/public/60sapi/日更资讯/每日国际汇率/css/style.css b/InfoGenie-frontend/public/60sapi/日更资讯/每日国际汇率/css/style.css index 5bb68371..7c20bd21 100755 --- a/InfoGenie-frontend/public/60sapi/日更资讯/每日国际汇率/css/style.css +++ b/InfoGenie-frontend/public/60sapi/日更资讯/每日国际汇率/css/style.css @@ -296,66 +296,131 @@ body { /* 手机端 */ @media (max-width: 480px) { + body { + overflow-x: hidden; + } + .container { - padding: 10px; + padding: 8px; + margin: 8px; + max-width: calc(100vw - 16px); + width: calc(100vw - 16px); } .header { - padding: 15px; - margin-bottom: 20px; + padding: 12px; + margin-bottom: 16px; } .header h1 { - font-size: 1.8rem; + font-size: 1.6rem; + flex-direction: column; + gap: 8px; + } + + .header p { + font-size: 0.9rem; } .rates-grid { - grid-template-columns: repeat(4, 1fr); - gap: 6px; + grid-template-columns: repeat(2, 1fr); + gap: 8px; + width: 100%; + overflow: hidden; } .rate-card { - padding: 8px; + padding: 10px 6px; border-radius: 8px; + min-width: 0; + width: 100%; } .currency-code { - font-size: 0.85rem; + font-size: 0.8rem; margin-bottom: 4px; - gap: 4px; + gap: 3px; + word-break: break-all; } .currency-flag { - font-size: 1rem; + font-size: 0.9rem; } .exchange-rate { - font-size: 0.9rem; + font-size: 0.85rem; margin-bottom: 3px; + word-break: break-all; } .currency-name { - font-size: 0.7rem; + font-size: 0.65rem; line-height: 1.1; + word-break: break-all; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } .currency-selector { - padding: 15px; + padding: 12px; + margin-bottom: 16px; } .currency-selector select { - min-width: 100%; + width: 100%; + max-width: 100%; padding: 10px 15px; + font-size: 0.9rem; + } + + .search-container { + padding: 12px; + margin-bottom: 16px; } .search-input { padding: 10px 15px; + font-size: 0.9rem; + width: 100%; + } + + .stats { + padding: 15px; + margin-bottom: 16px; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } + + .stat-item { + padding: 12px; + } + + .stat-number { + font-size: 1.3rem; + } + + .stat-label { + font-size: 0.8rem; + } + + .exchange-info { + padding: 15px; + margin-bottom: 16px; + } + + .base-currency h2 { + font-size: 1.5rem; + } + + .update-time { + font-size: 0.8rem; + } } /* 大屏幕优化 */ diff --git a/InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/css/style.css b/InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/css/style.css index 0c135ae8..54646c72 100755 --- a/InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/css/style.css +++ b/InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/css/style.css @@ -460,19 +460,48 @@ footer { } @media (max-width: 480px) { + body { + overflow-x: hidden; + } + .container { - margin: 8px auto; - padding: 6px; + margin: 8px; + padding: 8px; + max-width: calc(100vw - 16px); + width: calc(100vw - 16px); + } + + header { + padding: 12px 0 16px 0; + margin-bottom: 16px; } header h1 { - font-size: 1.6rem; + font-size: 1.5rem; + margin-bottom: 8px; + } + + .update-time { + font-size: 0.8rem; + padding: 6px 12px; + } + + .refresh-btn { + font-size: 0.8rem; + padding: 8px 16px; + margin-top: 12px; } .hot-item { - padding: 10px; - margin-bottom: 8px; - gap: 8px; + padding: 12px; + margin-bottom: 10px; + gap: 10px; + width: 100%; + min-width: 0; + } + + .hot-rank-container { + flex-shrink: 0; } .hot-rank { @@ -484,36 +513,72 @@ footer { font-size: 0.75rem; } + .hot-content-wrapper { + flex: 1; + min-width: 0; + overflow: hidden; + } + .hot-title { - font-size: 0.85rem; + font-size: 0.9rem; + line-height: 1.3; + word-break: break-all; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } - .hot-meta-row { - flex-direction: column; - align-items: flex-start; - gap: 6px; - } - - .hot-media-row { + .hot-bottom-row { + flex-wrap: wrap; gap: 8px; } .hot-time { font-size: 0.7rem; + flex-shrink: 0; } .hot-value { font-size: 0.65rem; + padding: 3px 8px; + flex-shrink: 0; } .hot-cover { width: 60px; height: 45px; + flex-shrink: 0; } .hot-link { font-size: 0.65rem; padding: 4px 8px; + flex-shrink: 0; + } + + .link-text { + font-size: 0.65rem; + } + + .loading { + padding: 30px; + font-size: 1rem; + } + + .loading-content { + padding: 20px; + } + + .loading-text p { + font-size: 0.9rem; + } + + footer { + margin-top: 20px; + padding-top: 16px; + font-size: 0.8rem; } } diff --git a/InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/css/style.css b/InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/css/style.css index c5a43c03..9ff299ee 100755 --- a/InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/css/style.css +++ b/InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/css/style.css @@ -449,18 +449,42 @@ footer { } @media (max-width: 480px) { + body { + overflow-x: hidden; + } + .container { - margin: 8px auto; - padding: 14px; + margin: 8px; + padding: 12px; + max-width: calc(100vw - 16px); + width: calc(100vw - 16px); + } + + header { + margin-bottom: 20px; + padding-bottom: 16px; } header h1 { - font-size: 1.6rem; + font-size: 1.5rem; + margin-bottom: 10px; + } + + .update-time { + font-size: 0.8rem; + padding: 6px 12px; } .topic-item { padding: 14px; - margin-bottom: 10px; + margin-bottom: 12px; + width: 100%; + min-width: 0; + } + + .topic-header { + width: 100%; + min-width: 0; } .topic-rank { @@ -469,15 +493,66 @@ footer { min-width: 30px; width: 30px; height: 30px; + flex-shrink: 0; + } + + .topic-content { + flex: 1; + min-width: 0; + padding-right: 12px; } .topic-title { font-size: 0.95rem; + line-height: 1.4; + word-break: break-all; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } - .topic-cover { - width: 80px; - height: 60px; + .topic-detail { + font-size: 0.85rem; + line-height: 1.5; + margin-bottom: 8px; + word-break: break-all; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } + + .topic-stats { + gap: 8px; + font-size: 0.75rem; + flex-wrap: wrap; + } + + .short-content .topic-cover { + width: 70px; + height: 50px; + flex-shrink: 0; + } + + .long-content .topic-cover { + width: 100%; + max-width: 100%; + height: auto; + margin-top: 10px; + } + + .loading { + padding: 30px; + font-size: 1rem; + } + + footer { + margin-top: 20px; + padding-top: 16px; + font-size: 0.8rem; } } diff --git a/InfoGenie-frontend/public/index.html b/InfoGenie-frontend/public/index.html index dfaaec1b..694e9da8 100755 --- a/InfoGenie-frontend/public/index.html +++ b/InfoGenie-frontend/public/index.html @@ -4,19 +4,19 @@ - - - + + + - - + + - - + + @@ -31,7 +31,7 @@ - 神奇万事通 + 万象口袋 @@ -101,9 +118,9 @@
- -
神奇万事通
-
🎨 多功能聚合应用 💬
+ +
万象口袋
+
🎨 一个跨平台的多功能聚合应用(´｡• ω •｡`) 💬
diff --git a/InfoGenie-frontend/public/manifest.json b/InfoGenie-frontend/public/manifest.json index 132d4fec..0ea8ee87 100755 --- a/InfoGenie-frontend/public/manifest.json +++ b/InfoGenie-frontend/public/manifest.json @@ -1,7 +1,7 @@ { - "short_name": "神奇万事通", - "name": "✨ 神奇万事通 - 多功能聚合应用", - "description": "🎨 一个多功能的聚合软件应用，提供60s API、小游戏、AI模型等丰富功能", + "short_name": "万象口袋", + "name": "✨ 万象口袋 - 多功能聚合应用", + "description": "🎨 一个多功能的聚合软件应用，提供聚合应用、休闲小游戏、AI模型工具等丰富功能", "icons": [ { "src": "data:image/svg+xml,✨", @@ -29,7 +29,7 @@ "categories": ["utilities", "productivity", "entertainment"], "screenshots": [ { - "src": "data:image/svg+xml,神奇万事通", + "src": "data:image/svg+xml,万象口袋", "type": "image/svg+xml", "sizes": "400x800", "form_factor": "narrow" diff --git a/InfoGenie-frontend/setting.json b/InfoGenie-frontend/setting.json index 5578dba9..19398451 100755 --- a/InfoGenie-frontend/setting.json +++ b/InfoGenie-frontend/setting.json @@ -1,8 +1,8 @@ { - "网站名字": "✨ 神奇万事通 ✨", - "网站描述": "🎨 一个多功能的聚合软件应用 💬", - "站长": "👨‍💻 by-神奇万事通", + "网站名字": "✨ 万象口袋 ✨", + "网站描述": "🎨 一个跨平台的多功能聚合软件应用", + "站长": "👨‍💻 by-万象口袋", "备案号": "📄 蜀ICP备2025151694号", - "网站页尾": "✨ 神奇万事通 ✨ | Copyright © 2025-2025 ✨", + "网站页尾": "✨ 万象口袋 ✨ | Copyright © 2025-2025 ✨", "网站logo": "assets/logo.png" } \ No newline at end of file diff --git a/InfoGenie-frontend/src/components/Footer.js b/InfoGenie-frontend/src/components/Footer.js index c60fdb27..c286a26a 100755 --- a/InfoGenie-frontend/src/components/Footer.js +++ b/InfoGenie-frontend/src/components/Footer.js @@ -2,10 +2,11 @@ import React from 'react'; import styled from 'styled-components'; const FooterContainer = styled.footer` - background: #1f2937; - color: #d1d5db; + background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%); + color: white; padding: 40px 0 80px; /* 底部留出导航栏空间 */ margin-top: 60px; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); @media (min-width: 769px) { padding: 40px 0 20px; @@ -34,7 +35,7 @@ const FooterDescription = styled.p` font-size: 14px; line-height: 1.6; margin-bottom: 16px; - color: #9ca3af; + color: rgba(255, 255, 255, 0.9); `; const FooterLinks = styled.div` @@ -50,26 +51,29 @@ const FooterLinks = styled.div` `; const FooterLink = styled.a` - color: #d1d5db; + color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 14px; - transition: color 0.2s ease; + transition: all 0.2s ease; + padding: 8px 16px; + border-radius: 6px; &:hover { - color: #4ade80; + background: rgba(255, 255, 255, 0.1); + color: white; } `; const FooterDivider = styled.div` height: 1px; - background: #374151; + background: rgba(255, 255, 255, 0.2); margin: 24px 0; `; const FooterBottom = styled.div` text-align: center; font-size: 12px; - color: #6b7280; + color: rgba(255, 255, 255, 0.8); line-height: 1.5; `; @@ -88,14 +92,10 @@ const Footer = () => { - ✨ 神奇万事通 ✨ + ✨ 万象口袋 ✨ - - 📡API聚合应用 - 🎮玩玩小游戏 - 🤖AI工具 - + diff --git a/InfoGenie-frontend/src/components/Header.js b/InfoGenie-frontend/src/components/Header.js index 74ecf0c1..002a1e83 100755 --- a/InfoGenie-frontend/src/components/Header.js +++ b/InfoGenie-frontend/src/components/Header.js @@ -236,12 +236,12 @@ const Header = () => { InfoGenie Logo - 神奇万事通 + 万象口袋 @@ -292,19 +292,19 @@ const Header = () => { - 🏠首页 + 首页 - 📡API聚合应用 + 聚合应用 - 🎮玩玩小游戏 + 休闲游戏 - 🤖AI工具 + AI工具 - 👤个人中心 + 个人中心 {isLoggedIn && user ? ( @@ -345,7 +345,7 @@ const Header = () => { ) : ( - 👤 登录注册 + 登录注册 )} diff --git a/InfoGenie-frontend/src/components/Navigation.js b/InfoGenie-frontend/src/components/Navigation.js index b5babd14..a056e3cb 100755 --- a/InfoGenie-frontend/src/components/Navigation.js +++ b/InfoGenie-frontend/src/components/Navigation.js @@ -79,12 +79,12 @@ const Navigation = () => { { path: '/60sapi', icon: FiActivity, - text: 'API聚合应用' + text: '聚合应用' }, { path: '/smallgame', icon: FiGrid, - text: '玩玩小游戏' + text: '休闲游戏' }, { path: '/aimodel', diff --git a/InfoGenie-frontend/src/config/StaticPageConfig.js b/InfoGenie-frontend/src/config/StaticPageConfig.js index 7efb6697..969631f7 100755 --- a/InfoGenie-frontend/src/config/StaticPageConfig.js +++ b/InfoGenie-frontend/src/config/StaticPageConfig.js @@ -8,7 +8,7 @@ export const AI_MODEL_APPS = [ description: '智能变量命名工具，帮助开发者快速生成规范的变量名', link: '/aimodelapp/AI变量命名助手/index.html', gradient: 'linear-gradient(135deg, #4ade80 0%, #22c55e 100%)', - icon: '🤖', + icon: '💻', IsShow: true }, { @@ -40,7 +40,7 @@ export const AI_MODEL_APPS = [ description: '基于AI的文章转文言文工具', link: '/aimodelapp/AI文章转文言文/index.html', gradient: 'linear-gradient(135deg,rgb(186, 248, 70) 0%,rgb(255, 208, 0) 100%)', - icon: '📝', + icon: '🖊️', IsShow: true }, { @@ -48,7 +48,7 @@ export const AI_MODEL_APPS = [ description: '基于AI的生成表情包工具', link: '/aimodelapp/AI生成表情包/index.html', gradient: 'linear-gradient(135deg,rgb(186, 248, 70) 0%,rgb(34, 157, 238) 100%)', - icon: '📸', + icon: '🫡', IsShow: true }, { @@ -61,7 +61,7 @@ export const AI_MODEL_APPS = [ }, ]; -//玩玩小游戏 +//休闲游戏 export const SMALL_GAMES = [ { title: '2048', @@ -105,7 +105,7 @@ export const SMALL_GAMES = [ }, ]; -//API聚合应用 +//聚合应用 export const API_60S_CATEGORIES = [ { title: '热搜榜单', @@ -146,7 +146,7 @@ export const API_60S_CATEGORIES = [ { title: '百度百科词条', link: '/60sapi/实用功能/百度百科词条/index.html', icon: '📚', IsShow: true }, { title: '公网IP地址', link: '/60sapi/实用功能/公网IP地址/index.html', icon: '🌐', IsShow: true }, { title: '哈希解压压缩', link: '/60sapi/实用功能/哈希解压压缩/index.html', icon: '🗜️', IsShow: true }, - { title: '链接OG信息', link: '/60sapi/实用功能/链接OG信息/index.html', icon: '🔗', IsShow: true }, + { title: '链接OG信息', link: '/60sapi/实用功能/链接OG信息/index.html', icon: '🔗', IsShow: false }, { title: '密码强度检测', link: '/60sapi/实用功能/密码强度检测/index.html', icon: '🔐', IsShow: true }, { title: '农历信息', link: '/60sapi/实用功能/农历信息/index.html', icon: '📅', IsShow: true }, { title: '配色方案', link: '/60sapi/实用功能/配色方案/index.html', icon: '🎨', IsShow: true }, @@ -165,7 +165,7 @@ export const API_60S_CATEGORIES = [ color: '#f7b731', apis: [ { title: '随机唱歌音频', link: '/60sapi/娱乐消遣/随机唱歌音频/index.html', icon: '🎤', IsShow: true }, - { title: '随机发病文学', link: '/60sapi/娱乐消遣/随机发病文学/index.html', icon: '📖', IsShow: true }, + { title: '随机发病文学', link: '/60sapi/娱乐消遣/随机发病文学/index.html', icon: '📖', IsShow: false }, { title: '随机搞笑段子', link: '/60sapi/娱乐消遣/随机搞笑段子/index.html', icon: '😂', IsShow: true }, { title: '随机冷笑话', link: '/60sapi/娱乐消遣/随机冷笑话/index.html', icon: '😄', IsShow: true }, { title: '随机一言', link: '/60sapi/娱乐消遣/随机一言/index.html', icon: '💭', IsShow: true }, diff --git a/InfoGenie-frontend/src/pages/AiModelPage.js b/InfoGenie-frontend/src/pages/AiModelPage.js index ce15a8f5..41cb4f81 100755 --- a/InfoGenie-frontend/src/pages/AiModelPage.js +++ b/InfoGenie-frontend/src/pages/AiModelPage.js @@ -330,14 +330,14 @@ const AiModelPage = () => { AI工具 - AI大模型工具，提供一些小功能 + AI大模型工具，提供一些生成式大语言模型的小功能(´,,•ω•,,)♡ {!isLoggedIn ? ( 🔒 - 需要登录访问 + 需要登录访问Σ(°ロ°) AI模型功能需要登录后才能使用，请先登录您的账户。
@@ -434,7 +434,7 @@ const AiModelPage = () => { 萌芽币消费提示

- 每次使用AI功能将消耗100萌芽币，无论成功与否。当萌芽币余额不足时，无法使用AI功能。 + 每次使用AI功能将消耗100萌芽币，无论成功与否。当萌芽币余额不足时，无法使用AI工具功能。

您可以通过每日签到获得300萌芽币。详细的萌芽币余额和使用记录将显示在各AI应用的右上角。 diff --git a/InfoGenie-frontend/src/pages/Api60sPage.js b/InfoGenie-frontend/src/pages/Api60sPage.js index 972c64cc..488ad1e5 100755 --- a/InfoGenie-frontend/src/pages/Api60sPage.js +++ b/InfoGenie-frontend/src/pages/Api60sPage.js @@ -3,6 +3,8 @@ import styled from 'styled-components'; import { FiExternalLink, FiArrowLeft } from 'react-icons/fi'; import { API_60S_CATEGORIES } from '../config/StaticPageConfig'; + +//================css样式================ const Api60sContainer = styled.div` min-height: calc(100vh - 140px); padding: 20px 0; @@ -51,19 +53,29 @@ const CategoryTitle = styled.h2` const CategoryGrid = styled.div` display: grid; - grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); - gap: 12px; + grid-template-columns: repeat(4, 1fr); + gap: 16px; - @media (max-width: 768px) { + @media (max-width: 1200px) { + grid-template-columns: repeat(4, 1fr); + gap: 14px; + } + + @media (max-width: 900px) { + grid-template-columns: repeat(3, 1fr); + gap: 14px; + } + + @media (max-width: 600px) { grid-template-columns: repeat(2, 1fr); - gap: 10px; + gap: 12px; } `; const ApiCard = styled.div` background: rgba(255, 255, 255, 0.98); border-radius: 16px; - padding: 16px; + padding: 20px 16px; text-decoration: none; color: inherit; transition: all 0.2s ease; @@ -72,10 +84,15 @@ const ApiCard = styled.div` overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); cursor: pointer; - min-height: 80px; + min-height: 90px; display: flex; align-items: center; + @media (max-width: 768px) { + padding: 16px 12px; + min-height: 80px; + } + &::before { content: ''; position: absolute; @@ -197,6 +214,7 @@ const EmbeddedFrame = styled.iframe` position: relative; z-index: 1000; `; +//================css样式================ const Api60sPage = () => { const [mounted, setMounted] = useState(false); @@ -247,8 +265,10 @@ const Api60sPage = () => {

- API聚合应用 - 提供丰富的实时数据接口，涵盖热搜榜单、日更资讯、实用工具和娱乐功能 + 聚合应用 + + 提供各大社交平台最新的实时数据，让您摆脱平台大数据算法的干扰，走出信息茧房，涵盖热搜榜单、日更资讯、实用工具和娱乐消遣四大板块 +
@@ -259,10 +279,10 @@ const Api60sPage = () => {
- API聚合应用 - - 提供丰富的实时数据接口，涵盖热搜榜单、日更资讯、实用工具和娱乐功能 - + 聚合应用 + + 提供各大社交平台最新的实时数据，让您摆脱平台大数据算法的干扰，走出信息茧房，涵盖热搜榜单、日更资讯、实用工具和娱乐消遣四大板块(˘•ω•˘) +
{apiCategories.length === 0 ? ( diff --git a/InfoGenie-frontend/src/pages/HomePage.js b/InfoGenie-frontend/src/pages/HomePage.js index e70298a0..fb5ac5a1 100755 --- a/InfoGenie-frontend/src/pages/HomePage.js +++ b/InfoGenie-frontend/src/pages/HomePage.js @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import { FiActivity, FiGrid, FiCpu, FiTrendingUp } from 'react-icons/fi'; +//================css样式================ const HomeContainer = styled.div` min-height: calc(100vh - 140px); padding: 20px 0; @@ -172,7 +173,7 @@ const ModuleFeature = styled.li` margin-bottom: 0; } `; - +//================css样式================ const HomePage = () => { @@ -181,24 +182,25 @@ const HomePage = () => { { path: '/60sapi', icon: FiActivity, - title: 'API聚合应用', - description: '实时获取各种热门数据,资讯信息和实用工具', + title: '聚合应用', + description: '实时获取最新热门数据,资讯和实用工具', features: [ - '娱乐消遣板块', - '实用功能板块', - '日更咨询板块', - '热搜榜单板块', + '🎯娱乐消遣板块', + '🔧实用功能板块', + '📰日更咨询板块', + '🔥热搜榜单板块', ] }, { path: '/smallgame', icon: FiGrid, - title: '玩玩小游戏', + title: '休闲游戏', description: '轻松有趣的休闲小游戏合集', features: [ - '2048', - '俄罗斯方块', - '别踩白方块', + '🔢2048小游戏', + '🧩俄罗斯方块', + '🐍经典贪吃蛇', + '◼️别踩白方块', ] }, { @@ -207,31 +209,37 @@ const HomePage = () => { title: 'AI工具', description: '智能AI工具和模型应用', features: [ - 'AI写诗达人', - 'AI变量命名小助手', - 'AI姓名评测', + '🌍翻译助手', + '📝写诗达人', + "🖊️文章转文言文", + "🫡表情包制作", ] } ]; - +// return ( ✨ - 神奇万事通 + 万象口袋 ✨ - 🎨 一个多功能的聚合软件应用 💬 +💡一个跨平台的聚合式应用
- 提供各种API聚合应用、娱乐小游戏、AI大模型工具等丰富功能，目标是用一个应用解决用户的各种需求。 - 模仿微信小程序那样，用户可以在一个应用中完成多个功能，而不需要下载多个APP +集成了热搜榜单，日更资讯、休闲游戏、AI大模型工具等丰富功能。 +像微信小程序一样，把分散的功能汇聚在一个应用中，让你无需下载一个又一个app。 +
+🎯功能繁多却不显得臃肿 +
+「Windows」端仅约18MB；「Android」端仅约15MB；平均内存占用仅48MB +相比市面上的软件更小巧、更轻便，却能承载更多可能。 - 开始探索 + 开始探索吧( •ω• )♡ diff --git a/InfoGenie-frontend/src/pages/SmallGamePage.js b/InfoGenie-frontend/src/pages/SmallGamePage.js index efc8d89e..a0f96364 100755 --- a/InfoGenie-frontend/src/pages/SmallGamePage.js +++ b/InfoGenie-frontend/src/pages/SmallGamePage.js @@ -264,10 +264,10 @@ const SmallGamePage = () => { - 玩玩小游戏 + 休闲游戏 - 轻松有趣的休闲小游戏合集，即点即玩，无需下载 + 好玩的休闲小游戏合集，即点即玩，无需下载，支持离线游玩(,,・ω・,,) diff --git a/InfoGenie-frontend/src/pages/UserProfilePage.js b/InfoGenie-frontend/src/pages/UserProfilePage.js index 5b2302fd..532dd248 100755 --- a/InfoGenie-frontend/src/pages/UserProfilePage.js +++ b/InfoGenie-frontend/src/pages/UserProfilePage.js @@ -7,13 +7,38 @@ import { userAPI } from '../utils/api'; const ProfileContainer = styled.div` min-height: calc(100vh - 140px); - padding: 20px; + padding: 20px 0; background: linear-gradient(135deg, rgba(74, 222, 128, 0.05) 0%, rgba(34, 197, 94, 0.05) 100%); `; const Container = styled.div` max-width: 800px; margin: 0 auto; + padding: 0 20px; +`; + +const PageHeader = styled.div` + text-align: center; + margin-bottom: 40px; +`; + +const PageTitle = styled.h1` + color: white; + font-size: 32px; + font-weight: 700; + margin-bottom: 10px; + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); + + @media (max-width: 768px) { + font-size: 24px; + } +`; + +const PageDescription = styled.p` + color: rgba(255, 255, 255, 0.8); + font-size: 18px; + max-width: 600px; + margin: 0 auto; `; const ProfileHeader = styled.div` @@ -398,9 +423,15 @@ const UserProfilePage = () => { return ( + + 个人中心 + + 管理您的个人信息、查看萌芽币余额和签到记录(,,・ω・,,) + + 🔒 - 需要登录访问 + 需要登录才能访问Σ(°ロ°) 个人中心需要登录后才能查看，请先登录您的账户。
@@ -449,6 +480,10 @@ const UserProfilePage = () => { return ( + + 个人中心 + 管理您的个人信息、查看萌芽币余额和签到记录 + {qqAvatarUrl && !avatarError ? ( diff --git a/InfoGenie-frontend/src/styles/index.css b/InfoGenie-frontend/src/styles/index.css index 843f037e..46a53373 100755 --- a/InfoGenie-frontend/src/styles/index.css +++ b/InfoGenie-frontend/src/styles/index.css @@ -22,6 +22,24 @@ body { color: #333; background: #f5f7fa; overflow-x: hidden; + /* 隐藏滚动条但保持滚动功能 */ + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ +} + +/* 隐藏 Webkit 浏览器的滚动条 */ +body::-webkit-scrollbar { + display: none; +} + +/* 全局隐藏所有元素的滚动条 */ +* { + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ +} + +*::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ } /* 移动端适配 */ diff --git a/README.md b/README.md index a2b5bfa7..148851b0 100755 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# ✨ InfoGenie 神奇万事通 +# ✨ InfoGenie 万象口袋 > 🎨 一个多功能的聚合软件应用 💬 @@ -278,7 +278,7 @@ npm start ## 📞 联系方式 -- **开发者**: 神奇万事通 +- **开发者**: 万象口袋 - **项目地址**: https://github.com/shumengya/InfoGenie - **演示地址**: https://infogenie.shumengya.top - **API地址**: https://infogenie.api.shumengya.top @@ -293,7 +293,7 @@ npm start
-**✨ 感谢使用 InfoGenie 神奇万事通 ✨** +**✨ 感谢使用 InfoGenie 万象口袋 ✨** 🎨 *一个多功能的聚合软件应用* 💬 diff --git a/项目架构说明.md b/项目架构说明.md new file mode 100644 index 00000000..148851b0 --- /dev/null +++ b/项目架构说明.md @@ -0,0 +1,303 @@ +# ✨ InfoGenie 万象口袋 + +> 🎨 一个多功能的聚合软件应用 💬 + +## 📋 项目概述 + +InfoGenie 是一个前后端分离的多功能聚合应用，提供实时数据接口、休闲游戏、AI工具等丰富功能。 + +### 🌐 部署环境 + +- **前端部署地址**: https://infogenie.shumengya.top +- **后端部署地址**: https://infogenie.api.shumengya.top + +### 🏗️ 技术架构 + +#### 前端技术栈 +- **核心框架**: React 18.2.0 + React Router DOM 6.15.0 +- **样式方案**: Styled Components 6.0.7 (CSS-in-JS) +- **HTTP客户端**: Axios 1.5.0 +- **UI组件**: React Icons 4.11.0 + React Hot Toast 2.4.1 +- **状态管理**: React Context API +- **构建工具**: Create React App +- **PWA支持**: Service Worker + +#### 后端技术栈 +- **Web框架**: Flask 2.3.3 (轻量、灵活、可扩展) +- **数据库**: MongoDB + PyMongo 4.5.0 (文档型数据存储) +- **认证机制**: JWT Token (PyJWT 2.8.0，7天有效期) +- **密码安全**: Werkzeug 2.3.7 (高强度密码哈希) +- **跨域支持**: Flask-CORS 4.0.0 +- **API限流**: Flask-Limiter 3.5.0 (防止API滥用) +- **环境配置**: python-dotenv 1.0.0 +- **邮件服务**: 基于SMTP协议的原生实现 + +#### 架构特点 +- **前后端分离**: RESTful API架构，无状态通信 +- **混合架构**: React SPA + 静态HTML页面无缝集成 +- **模块化设计**: Flask蓝图 + React组件化 +- **容器化部署**: Docker + docker-compose支持 +- **多环境配置**: 开发/测试/生产环境分离 + +### 🌟 主要功能 + +#### 📡 60s API 模块 +- **热搜榜单**: 抖音、微博、猫眼票房、头条、网易云、知乎、HackerNews等实时热搜 +- **日更资讯**: 60秒读懂世界、必应每日壁纸、历史上的今天、每日国际汇率 +- **实用功能**: 百度百科词条、公网IP地址、哈希解压压缩、链接OG信息、农历信息、生成二维码、天气预报、EpicGames免费游戏 +- **娱乐消遣**: 随机唱歌音频、随机发病文学、随机搞笑段子、随机冷笑话、随机一言、随机运势、随机JavaScript趣味题、随机KFC文案 + +#### 🎮 小游戏模块 +- 2048游戏 +- 别踩白方块 +- 俄罗斯方块 +- 移动端优化 +- 即点即玩 + +#### 🤖 AI模型模块 +- **AI变量命名助手**: 智能生成编程变量名 +- **AI写诗小助手**: 基于主题创作诗歌 +- **AI姓名评测**: 姓名寓意分析和评分 +- **萌芽币消费系统**: 每次AI调用消耗100萌芽币 +- **多模型支持**: 集成DeepSeek、Kimi等AI服务 +- **需要登录验证**: JWT Token认证 + +#### 👤 用户系统 +- **邮箱验证注册**: QQ邮箱验证码注册登录 +- **用户资料管理**: 头像、用户名等个人信息 +- **签到系统**: 每日签到获取经验值和萌芽币 +- **等级系统**: 基于经验值的用户等级计算 +- **萌芽币管理**: 虚拟货币系统，用于AI功能消费 +- **使用统计**: AI调用次数和萌芽币消费记录 + +## 🏛️ 架构设计亮点 + +### 🔄 混合架构创新 +- **React SPA核心层**: 处理用户认证、全局状态管理和主要导航逻辑 +- **静态HTML模块**: 大量功能模块使用原生HTML/CSS/JS实现，降低加载时间 +- **通信机制**: 通过postMessage API实现SPA与静态页面的数据交换 + +### 🧩 模块化设计 +- **前端组件化**: 基于React的原子设计系统，从原子级别到页面级别 +- **后端蓝图架构**: Flask蓝图实现功能模块解耦，提高可维护性 +- **装饰器模式**: 横切关注点(认证、萌芽币消费)集中处理 + +### 🔒 安全与性能 +- **多层次认证**: JWT Token + 邮箱验证码双因素认证 +- **API限流保护**: 防止暴力攻击和资源耗尽 +- **性能优化**: 代码分割、懒加载、PWA缓存策略 +- **数据安全**: 密码哈希存储、敏感配置外部化 + +### 🚀 部署与扩展 +- **容器化部署**: Docker + docker-compose支持 +- **多环境配置**: 开发/测试/生产环境分离 +- **微服务友好**: 模块化设计便于未来微服务拆分 + +## 🚀 快速开始 + +### 📋 环境要求 + +- **Python**: 3.8+ +- **Node.js**: 14+ +- **MongoDB**: 4.0+ +- **npm**: 6.0+ + +### 📦 安装依赖 + +#### 后端依赖 +```bash +cd InfoGenie-backend +pip install -r requirements.txt +``` + +#### 前端依赖 +```bash +cd InfoGenie-frontend +npm install +``` + +主要依赖包： +- React 18.2.0 +- React Router DOM 6.15.0 +- Styled Components 6.0.7 +- Axios 1.5.0 +- React Hot Toast 2.4.1 +- React Icons 4.11.0 + +### 🖥️ 前端部署 + +1. 进入前端目录：`cd InfoGenie-frontend` +2. 安装依赖：`npm install` +3. 构建生产环境应用：`npm run build` +4. 将 `build` 目录下的所有文件上传到前端服务器的网站根目录 + +也可以直接运行 `InfoGenie-frontend/build_frontend.bat` 脚本进行构建。 + +### ⚙️ 后端部署 + +#### 方式一：传统部署 +1. 进入后端目录：`cd InfoGenie-backend` +2. 安装依赖：`pip install -r requirements.txt` +3. 配置环境变量或创建 `.env` 文件： + ```env + # 数据库配置 + MONGO_URI=mongodb://localhost:27017/infogenie + + # 邮件服务配置 + MAIL_USERNAME=your_email@qq.com + MAIL_PASSWORD=your_email_auth_code + MAIL_SERVER=smtp.qq.com + MAIL_PORT=587 + + # 应用配置 + SECRET_KEY=your_secret_key_here + SESSION_COOKIE_SECURE=True + FLASK_ENV=production + + # AI服务配置 + DEEPSEEK_API_KEY=your_deepseek_api_key + KIMI_API_KEY=your_kimi_api_key + ``` +4. 使用 Gunicorn 启动应用： + ```bash + gunicorn -w 4 -b 0.0.0.0:5000 "app:create_app()" + ``` + +#### 方式二：Docker部署（推荐） +1. 进入后端目录：`cd InfoGenie-backend` +2. 构建Docker镜像： + ```bash + docker build -t infogenie-backend . + ``` +3. 使用docker-compose启动： + ```bash + docker-compose up -d + ``` +4. 或者直接运行构建脚本： + ```bash + ./build_docker.sh # Linux/Mac + # 或 + build_docker.bat # Windows + ``` + +#### 环境配置说明 +- **开发环境**: 使用 `.env` 文件配置本地开发环境 +- **生产环境**: 使用 `.env.production` 文件或环境变量注入 +- **反向代理**: 配置Nginx将 `https://infogenie.api.shumengya.top` 反向代理到后端服务 + +### ⚙️ 配置说明 + +#### 前端配置 + +前端通过环境变量配置API基础URL： + +- 开发环境：`.env.development` 文件中设置 `REACT_APP_API_URL=http://localhost:5000` +- 生产环境：`.env.production` 文件中设置 `REACT_APP_API_URL=https://infogenie.api.shumengya.top` + +#### 后端配置 + +后端通过 `config.py` 和环境变量进行配置： + +- MongoDB连接：通过环境变量 `MONGO_URI` 设置 +- 邮件服务：通过环境变量 `MAIL_USERNAME` 和 `MAIL_PASSWORD` 设置（支持QQ邮箱） +- 认证配置：支持QQ邮箱验证登录 +- CORS配置：在 `app.py` 中配置允许的前端域名 + +#### 60sAPI配置 + +60sAPI模块的静态文件位于 `frontend/60sapi` 目录，通过后端的静态文件服务提供访问。 + +各API模块的接口地址已配置为 `https://infogenie.api.shumengya.top/api/60s`。 + +#### 项目结构 + +``` +InfoGenie/ +├── InfoGenie-backend/ # 后端Python Flask应用 +│ ├── app.py # 主应用入口 +│ ├── config.py # 配置文件 +│ ├── requirements.txt # Python依赖 +│ ├── Dockerfile # Docker构建文件 +│ ├── docker-compose.yml # Docker编排文件 +│ ├── .env # 环境变量配置 +│ ├── modules/ # 功能模块 +│ │ ├── auth.py # 用户认证 +│ │ ├── user_management.py # 用户管理 +│ │ ├── email_service.py # 邮件服务 +│ │ └── aimodelapp.py # AI模型应用 +│ ├── test/ # 测试文件 +│ └── 后端架构文档.md # 后端架构文档 +├── InfoGenie-frontend/ # 前端应用 +│ ├── src/ # React源码 +│ │ ├── components/ # 公共组件 +│ │ ├── pages/ # 页面组件 +│ │ ├── contexts/ # React Context +│ │ ├── utils/ # 工具函数 +│ │ └── styles/ # 全局样式 +│ ├── public/ # 静态资源 +│ │ ├── 60sapi/ # 60s API静态页面 +│ │ ├── aimodelapp/ # AI模型应用页面 +│ │ └── smallgame/ # 小游戏页面 +│ ├── package.json # 前端依赖 +│ ├── setting.json # 前端配置 +│ └── 前端架构文档.md # 前端架构文档 +├── README.md # 项目说明 +├── LICENSE # 许可证 +└── 项目架构说明.txt # 项目架构说明 +``` + +#### 前端依赖 +```bash +cd frontend/react-app +npm install +``` + +### 🎯 启动服务 + +#### 方式一：使用启动器（推荐） +```bash +# 双击运行 启动器.bat +# 选择相应的启动选项 +``` + +#### 方式二：手动启动 + +**启动后端服务** +```bash +cd InfoGenie-backend +python app.py +# 后端服务: http://localhost:5002 +``` + +**启动前端服务** +```bash +cd InfoGenie-frontend +npm start +# 前端服务: http://localhost:3000 +``` + +## 📞 联系方式 + +- **开发者**: 万象口袋 +- **项目地址**: https://github.com/shumengya/InfoGenie +- **演示地址**: https://infogenie.shumengya.top +- **API地址**: https://infogenie.api.shumengya.top +- **反馈邮箱**: 请通过GitHub Issues反馈 +- **ICP备案**: 蜀ICP备2025151694号 + +## 📄 许可证 + +本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 + +--- + +
+ +**✨ 感谢使用 InfoGenie 万象口袋 ✨** + +🎨 *一个多功能的聚合软件应用* 💬 + +*支持Web、Windows、Android多平台* + +
+ diff --git a/项目架构说明.txt b/项目架构说明.txt deleted file mode 100755 index 7a23c62f..00000000 --- a/项目架构说明.txt +++ /dev/null @@ -1,10 +0,0 @@ -1.一个前后端分离的网站项目，前端使用React框架，后端使用Python3.13.2的Flask框架，采用模块化架构避免单个文件过大 -前端代码放在frontend文件夹，后端代码放在backend文件夹,确保代码结构清晰有少量中文注释，便于后期扩展维护 -2.前端网页要适配手机竖屏端和电脑端，主要先适配手机端用户体验 -3.后端目前需要一个连接MongoDB数据库来储存用户登录数据, -用户数据储存在MongoDB的InfoGenie数据库的userdata集合中 玩家数据库储存模板在玩家数据模板.json文件里 - -软件app前端分三个主要模块 -60sapi模块：为静态页面，又分四个子模块：热搜榜单，日更资讯，实用功能，娱乐消遣 -smallgame模块：为静态页面 -aimodelapp模块： 为静态页面 （需要登录验证才能进入使用）（暂时不弄） \ No newline at end of file