修改前端 项目改名
This commit is contained in:
@@ -2,7 +2,7 @@
|
|||||||
# -*- coding: utf-8 -*-
|
# -*- coding: utf-8 -*-
|
||||||
"""
|
"""
|
||||||
InfoGenie 后端主应用入口
|
InfoGenie 后端主应用入口
|
||||||
Created by: 神奇万事通
|
Created by: 万象口袋
|
||||||
Date: 2025-09-02
|
Date: 2025-09-02
|
||||||
"""
|
"""
|
||||||
|
|
||||||
@@ -50,7 +50,7 @@ def create_app():
|
|||||||
def index():
|
def index():
|
||||||
"""API根路径"""
|
"""API根路径"""
|
||||||
return jsonify({
|
return jsonify({
|
||||||
'message': '✨ 神奇万事通 API 服务运行中 ✨',
|
'message': '✨ 万象口袋 API 服务运行中 ✨',
|
||||||
'version': '1.0.0',
|
'version': '1.0.0',
|
||||||
'timestamp': datetime.now().isoformat(),
|
'timestamp': datetime.now().isoformat(),
|
||||||
'endpoints': {
|
'endpoints': {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
|
|
||||||
# InfoGenie 后端 Docker 镜像构建脚本
|
# InfoGenie 后端 Docker 镜像构建脚本
|
||||||
# Created by: 神奇万事通
|
# Created by: 万象口袋
|
||||||
# Date: 2025-09-16
|
# Date: 2025-09-16
|
||||||
|
|
||||||
set -e
|
set -e
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
# -*- coding: utf-8 -*-
|
# -*- coding: utf-8 -*-
|
||||||
"""
|
"""
|
||||||
InfoGenie 配置文件
|
InfoGenie 配置文件
|
||||||
Created by: 神奇万事通
|
Created by: 万象口袋
|
||||||
Date: 2025-09-02
|
Date: 2025-09-02
|
||||||
"""
|
"""
|
||||||
|
|
||||||
@@ -38,7 +38,7 @@ class Config:
|
|||||||
MAIL_USE_TLS = False
|
MAIL_USE_TLS = False
|
||||||
MAIL_USERNAME = os.environ.get('MAIL_USERNAME') or 'your-email@qq.com'
|
MAIL_USERNAME = os.environ.get('MAIL_USERNAME') or 'your-email@qq.com'
|
||||||
MAIL_PASSWORD = os.environ.get('MAIL_PASSWORD') or 'your-app-password'
|
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 配置
|
||||||
API_RATE_LIMIT = '100 per hour' # API调用频率限制
|
API_RATE_LIMIT = '100 per hour' # API调用频率限制
|
||||||
@@ -52,9 +52,9 @@ class Config:
|
|||||||
|
|
||||||
# 应用信息
|
# 应用信息
|
||||||
APP_INFO = {
|
APP_INFO = {
|
||||||
'name': '✨ 神奇万事通 ✨',
|
'name': '✨ 万象口袋 ✨',
|
||||||
'description': '🎨 一个多功能的聚合软件应用 💬',
|
'description': '🎨 一个多功能的聚合软件应用 💬',
|
||||||
'author': '👨💻 by-神奇万事通',
|
'author': '👨💻 by-万象口袋',
|
||||||
'version': '1.0.0',
|
'version': '1.0.0',
|
||||||
'icp': '📄 蜀ICP备2025151694号'
|
'icp': '📄 蜀ICP备2025151694号'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
# -*- coding: utf-8 -*-
|
# -*- coding: utf-8 -*-
|
||||||
"""
|
"""
|
||||||
AI模型应用服务模块
|
AI模型应用服务模块
|
||||||
Created by: 神奇万事通
|
Created by: 万象口袋
|
||||||
Date: 2025-01-15
|
Date: 2025-01-15
|
||||||
"""
|
"""
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
# -*- coding: utf-8 -*-
|
# -*- coding: utf-8 -*-
|
||||||
"""
|
"""
|
||||||
用户认证模块
|
用户认证模块
|
||||||
Created by: 神奇万事通
|
Created by: 万象口袋
|
||||||
Date: 2025-09-02
|
Date: 2025-09-02
|
||||||
"""
|
"""
|
||||||
|
|
||||||
|
|||||||
@@ -72,7 +72,7 @@ def send_verification_email(email, verification_type='register'):
|
|||||||
<body>
|
<body>
|
||||||
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
|
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
|
||||||
<div style="text-align: center; margin-bottom: 30px;">
|
<div style="text-align: center; margin-bottom: 30px;">
|
||||||
<h1 style="color: #66bb6a; margin: 0;">InfoGenie 神奇万事通</h1>
|
<h1 style="color: #66bb6a; margin: 0;">InfoGenie 万象口袋</h1>
|
||||||
<p style="color: #666; font-size: 14px; margin: 5px 0;">欢迎注册InfoGenie</p>
|
<p style="color: #666; font-size: 14px; margin: 5px 0;">欢迎注册InfoGenie</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -101,7 +101,7 @@ def send_verification_email(email, verification_type='register'):
|
|||||||
<body>
|
<body>
|
||||||
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
|
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
|
||||||
<div style="text-align: center; margin-bottom: 30px;">
|
<div style="text-align: center; margin-bottom: 30px;">
|
||||||
<h1 style="color: #66bb6a; margin: 0;">InfoGenie 神奇万事通</h1>
|
<h1 style="color: #66bb6a; margin: 0;">InfoGenie 万象口袋</h1>
|
||||||
<p style="color: #666; font-size: 14px; margin: 5px 0;">安全登录验证</p>
|
<p style="color: #666; font-size: 14px; margin: 5px 0;">安全登录验证</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
# -*- coding: utf-8 -*-
|
# -*- coding: utf-8 -*-
|
||||||
"""
|
"""
|
||||||
用户管理模块
|
用户管理模块
|
||||||
Created by: 神奇万事通
|
Created by: 万象口袋
|
||||||
Date: 2025-09-02
|
Date: 2025-09-02
|
||||||
"""
|
"""
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
{
|
{
|
||||||
"name": "infogenie-frontend",
|
"name": "infogenie-frontend",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "✨ 神奇万事通 - 前端React应用",
|
"description": "✨ 万象口袋 - 前端React应用",
|
||||||
"keywords": ["react", "api", "mobile-first", "responsive"],
|
"keywords": ["react", "api", "mobile-first", "responsive"],
|
||||||
"author": "神奇万事通",
|
"author": "万象口袋",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"private": true,
|
"private": true,
|
||||||
"homepage": "/",
|
"homepage": "/",
|
||||||
|
|||||||
@@ -1,21 +1,21 @@
|
|||||||
/* 农历主题背景样式 - 动态调节版本 */
|
/* 农历主题背景样式 - 柔和版本 */
|
||||||
body {
|
body {
|
||||||
background: linear-gradient(135deg,
|
background: linear-gradient(135deg,
|
||||||
#fff8dc 0%, /* 玉米丝色 */
|
#f8f9fa 0%, /* 浅灰白 */
|
||||||
#ffd700 20%, /* 金黄色 */
|
#fff3e0 20%, /* 淡橙色 */
|
||||||
#ffcc00 40%, /* 亮金色 */
|
#fef7e0 40%, /* 极淡黄 */
|
||||||
#daa520 60%, /* 深金色 */
|
#f3e5ab 60%, /* 柔和金色 */
|
||||||
#b8860b 80%, /* 暗金色 */
|
#e8dcc6 80%, /* 米色 */
|
||||||
#fff8dc 100% /* 玉米丝色 */
|
#f8f9fa 100% /* 浅灰白 */
|
||||||
);
|
);
|
||||||
background-size: 400% 400%;
|
background-size: 400% 400%;
|
||||||
animation: goldenShift 25s ease infinite;
|
animation: gentleShift 30s ease infinite;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes goldenShift {
|
@keyframes gentleShift {
|
||||||
0% { background-position: 0% 50%; }
|
0% { background-position: 0% 50%; }
|
||||||
25% { background-position: 100% 50%; }
|
25% { background-position: 100% 50%; }
|
||||||
50% { background-position: 100% 100%; }
|
50% { background-position: 100% 100%; }
|
||||||
@@ -23,7 +23,7 @@ body {
|
|||||||
100% { background-position: 0% 50%; }
|
100% { background-position: 0% 50%; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 动态颜色调节系统 */
|
/* 动态颜色调节系统 - 柔和版本 */
|
||||||
.adaptive-overlay {
|
.adaptive-overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -31,9 +31,9 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
|
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.15) 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.1) 0%, rgba(255, 255, 255, 0.2) 100%);
|
linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 100%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
animation: adaptiveShift 60s ease infinite;
|
animation: adaptiveShift 60s ease infinite;
|
||||||
|
|||||||
@@ -8,34 +8,26 @@
|
|||||||
body {
|
body {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: #2c3e50;
|
color: #1a1a1a;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
animation: textColorShift 25s ease infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes textColorShift {
|
/* 结果容器 - 优化可读性版本 */
|
||||||
0% {
|
.result-container {
|
||||||
color: #2c3e50;
|
background: rgba(255, 255, 255, 0.85);
|
||||||
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
|
backdrop-filter: blur(20px);
|
||||||
}
|
-webkit-backdrop-filter: blur(20px);
|
||||||
25% {
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
color: #1a252f;
|
border-radius: 25px;
|
||||||
text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9);
|
padding: 40px;
|
||||||
}
|
margin-top: 40px;
|
||||||
50% {
|
box-shadow:
|
||||||
color: #34495e;
|
0 8px 32px 0 rgba(0, 0, 0, 0.1),
|
||||||
text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7);
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||||
}
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 移除过度的文字颜色动画，保持稳定的可读性 */
|
||||||
|
|
||||||
/* 容器 */
|
/* 容器 */
|
||||||
.container {
|
.container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
@@ -106,22 +98,21 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 头部 - 动态调节版本 */
|
/* 头部 - 优化可读性版本 */
|
||||||
.header {
|
.header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.85);
|
||||||
backdrop-filter: blur(25px);
|
backdrop-filter: blur(20px);
|
||||||
-webkit-backdrop-filter: blur(25px);
|
-webkit-backdrop-filter: blur(20px);
|
||||||
padding: 40px 30px;
|
padding: 40px 30px;
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 8px 32px 0 rgba(31, 38, 135, 0.2),
|
0 8px 32px 0 rgba(0, 0, 0, 0.1),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
animation: headerColorShift 25s ease infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes headerColorShift {
|
@keyframes headerColorShift {
|
||||||
@@ -204,78 +195,23 @@ body {
|
|||||||
.title {
|
.title {
|
||||||
font-size: 3.2em;
|
font-size: 3.2em;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #2c3e50;
|
color: #1a1a1a;
|
||||||
margin-bottom: 10px;
|
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;
|
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 {
|
.subtitle {
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
color: #7f8c8d;
|
color: #555555;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
|
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 {
|
.date-selector {
|
||||||
@@ -298,84 +234,35 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
color: #0f1419;
|
color: #2c2c2c;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
|
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
|
||||||
animation: labelColorShift 25s ease infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@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 {
|
.label-icon {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-input {
|
.date-input {
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
-webkit-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;
|
border-radius: 15px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
color: #0a0f14;
|
color: #1a1a1a;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 4px 15px rgba(31, 38, 135, 0.1),
|
0 4px 15px rgba(0, 0, 0, 0.1),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||||
animation: inputColorShift 25s ease infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@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 {
|
.date-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
@@ -395,11 +282,11 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.query-btn {
|
.query-btn {
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
|
||||||
backdrop-filter: blur(15px);
|
backdrop-filter: blur(15px);
|
||||||
-webkit-backdrop-filter: blur(15px);
|
-webkit-backdrop-filter: blur(15px);
|
||||||
color: #0a0f14;
|
color: #1a1a1a;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
padding: 12px 28px;
|
padding: 12px 28px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -411,40 +298,13 @@ body {
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
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:
|
box-shadow:
|
||||||
0 4px 15px rgba(31, 38, 135, 0.2),
|
0 4px 15px rgba(0, 0, 0, 0.1),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||||
animation: buttonColorShift 25s ease infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@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 {
|
.query-btn::before {
|
||||||
content: '';
|
content: '';
|
||||||
@@ -466,12 +326,12 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.query-btn:hover {
|
.query-btn:hover {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: linear-gradient(135deg, #e8e8e8, #d8d8d8);
|
||||||
border-color: rgba(255, 255, 255, 0.4);
|
border-color: rgba(0, 0, 0, 0.3);
|
||||||
transform: translateY(-3px);
|
transform: translateY(-2px);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 8px 25px rgba(31, 38, 135, 0.3),
|
0 8px 25px rgba(0, 0, 0, 0.15),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
@@ -590,10 +450,10 @@ body {
|
|||||||
|
|
||||||
.loading-text p {
|
.loading-text p {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: #1a1a1a;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin: 0;
|
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 {
|
.loading-dots {
|
||||||
@@ -604,7 +464,7 @@ body {
|
|||||||
.loading-dots span {
|
.loading-dots span {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
background: rgba(255, 255, 255, 0.7);
|
background: #4a4a4a;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: glassDotsFloat 1.4s ease-in-out infinite both;
|
animation: glassDotsFloat 1.4s ease-in-out infinite both;
|
||||||
backdrop-filter: blur(2px);
|
backdrop-filter: blur(2px);
|
||||||
@@ -1016,15 +876,18 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 手机端适配 (767px以下) */
|
/* 手机端适配 (767px以下) - 优化手机端体验 */
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.container {
|
.container {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
margin: 10px auto;
|
||||||
|
max-width: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
padding: 25px 20px;
|
padding: 25px 15px;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-icon {
|
.header-icon {
|
||||||
@@ -1034,16 +897,19 @@ body {
|
|||||||
.title {
|
.title {
|
||||||
font-size: 2.2em;
|
font-size: 2.2em;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-selector {
|
.date-selector {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
padding: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group {
|
.input-group {
|
||||||
@@ -1053,16 +919,19 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.date-input {
|
.date-input {
|
||||||
padding: 10px 14px;
|
padding: 14px 16px;
|
||||||
font-size: 0.95em;
|
font-size: 16px; /* 防止iOS缩放 */
|
||||||
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.query-btn {
|
.query-btn {
|
||||||
padding: 10px 24px;
|
padding: 14px 24px;
|
||||||
font-size: 0.95em;
|
font-size: 16px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
border-radius: 15px;
|
||||||
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.update-time {
|
.update-time {
|
||||||
@@ -1101,7 +970,8 @@ body {
|
|||||||
|
|
||||||
.item-label {
|
.item-label {
|
||||||
min-width: auto;
|
min-width: auto;
|
||||||
font-size: 0.9em;
|
font-size: 0.95em;
|
||||||
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-value {
|
.item-value {
|
||||||
@@ -1360,7 +1230,7 @@ body {
|
|||||||
|
|
||||||
.hour-label {
|
.hour-label {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #ffffff;
|
color: #1a1a1a;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1373,7 +1243,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hour-text {
|
.hour-text {
|
||||||
color: rgba(255, 255, 255, 0.9);
|
color: #2c2c2c;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 时辰宜忌响应式优化 */
|
/* 时辰宜忌响应式优化 */
|
||||||
|
|||||||
@@ -382,7 +382,7 @@ function showSuccessMessage(message) {
|
|||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
backdrop-filter: blur(15px);
|
backdrop-filter: blur(15px);
|
||||||
-webkit-backdrop-filter: blur(15px);
|
-webkit-backdrop-filter: blur(15px);
|
||||||
color: rgba(255, 255, 255, 0.95);
|
color: #1a1a1a;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
|||||||
@@ -9,13 +9,29 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
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;
|
min-height: 100vh;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
overflow-x: hidden;
|
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 {
|
.container {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -26,11 +42,12 @@ body {
|
|||||||
.header {
|
.header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
background: rgba(255, 255, 255, 0.95);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
border-radius: 15px;
|
border-radius: 20px;
|
||||||
padding: 20px 15px;
|
padding: 25px 20px;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 8px 32px rgba(46, 125, 50, 0.15);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(15px);
|
||||||
|
border: 1px solid rgba(139, 195, 74, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1 {
|
.header h1 {
|
||||||
@@ -52,43 +69,47 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 日期显示 */
|
/* 日期显示 */
|
||||||
.date-info {
|
.date-section {
|
||||||
background: rgba(255, 255, 255, 0.95);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
border-radius: 12px;
|
border-radius: 16px;
|
||||||
padding: 15px;
|
padding: 20px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 20px;
|
||||||
text-align: center;
|
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 {
|
.date-display h2 {
|
||||||
font-size: 1.3rem;
|
font-size: 1.4rem;
|
||||||
color: #2c3e50;
|
color: #2e7d32;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 8px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-info .date-text {
|
.date-display .date-text {
|
||||||
color: #7f8c8d;
|
color: #558b2f;
|
||||||
font-size: 0.9rem;
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 加载状态 */
|
/* 加载状态 */
|
||||||
.loading {
|
.loading {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 30px 15px;
|
padding: 40px 20px;
|
||||||
background: rgba(255, 255, 255, 0.95);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
border-radius: 12px;
|
border-radius: 16px;
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner {
|
.loading-spinner {
|
||||||
width: 35px;
|
width: 40px;
|
||||||
height: 35px;
|
height: 40px;
|
||||||
border: 3px solid #ecf0f1;
|
border: 3px solid rgba(139, 195, 74, 0.2);
|
||||||
border-top: 3px solid #667eea;
|
border-top: 3px solid #689f38;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spin 1s linear infinite;
|
animation: spin 1.2s linear infinite;
|
||||||
margin: 0 auto 15px;
|
margin: 0 auto 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
@@ -98,40 +119,49 @@ body {
|
|||||||
|
|
||||||
/* 历史事件容器 */
|
/* 历史事件容器 */
|
||||||
.events-container {
|
.events-container {
|
||||||
background: rgba(255, 255, 255, 0.95);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
border-radius: 15px;
|
border-radius: 20px;
|
||||||
padding: 15px;
|
padding: 25px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 20px;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 8px 32px rgba(76, 175, 80, 0.15);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(15px);
|
||||||
|
border: 1px solid rgba(139, 195, 74, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 统计信息 */
|
/* 统计信息 */
|
||||||
.stats {
|
.stats {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
gap: 8px;
|
gap: 12px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-item {
|
.stat-item {
|
||||||
background: rgba(102, 126, 234, 0.1);
|
background: rgba(139, 195, 74, 0.15);
|
||||||
border-radius: 10px;
|
border-radius: 12px;
|
||||||
padding: 12px;
|
padding: 16px 12px;
|
||||||
text-align: center;
|
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 {
|
.stat-number {
|
||||||
font-size: 1.4rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #667eea;
|
color: #558b2f;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
color: #7f8c8d;
|
color: #689f38;
|
||||||
font-size: 0.8rem;
|
font-size: 0.85rem;
|
||||||
margin-top: 3px;
|
margin-top: 4px;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 事件列表 */
|
/* 事件列表 */
|
||||||
@@ -142,18 +172,20 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.event-card {
|
.event-card {
|
||||||
background: rgba(255, 255, 255, 0.9);
|
background: rgba(255, 255, 255, 0.95);
|
||||||
border-radius: 12px;
|
border-radius: 16px;
|
||||||
padding: 15px;
|
padding: 20px;
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 4px 16px rgba(76, 175, 80, 0.1);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
border-left: 4px solid #667eea;
|
border-left: 4px solid #81c784;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
border: 1px solid rgba(139, 195, 74, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-card:hover {
|
.event-card:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-3px);
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 8px 24px rgba(76, 175, 80, 0.15);
|
||||||
|
border-left-color: #66bb6a;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 事件类型标签 */
|
/* 事件类型标签 */
|
||||||
@@ -170,25 +202,25 @@ body {
|
|||||||
|
|
||||||
.event-type.birth {
|
.event-type.birth {
|
||||||
background: #e8f5e8;
|
background: #e8f5e8;
|
||||||
color: #27ae60;
|
color: #2e7d32;
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-type.death {
|
.event-type.death {
|
||||||
background: #fdf2e9;
|
background: #fff3e0;
|
||||||
color: #e67e22;
|
color: #f57c00;
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-type.event {
|
.event-type.event {
|
||||||
background: #ebf3fd;
|
background: #f1f8e9;
|
||||||
color: #3498db;
|
color: #558b2f;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 事件年份 */
|
/* 事件年份 */
|
||||||
.event-year {
|
.event-year {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #667eea;
|
color: #558b2f;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
@@ -220,20 +252,22 @@ body {
|
|||||||
.event-link {
|
.event-link {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 5px;
|
gap: 6px;
|
||||||
color: #667eea;
|
color: #558b2f;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 0.8rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 6px 12px;
|
padding: 8px 14px;
|
||||||
background: rgba(102, 126, 234, 0.1);
|
background: rgba(139, 195, 74, 0.15);
|
||||||
border-radius: 15px;
|
border-radius: 18px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid rgba(139, 195, 74, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-link:hover {
|
.event-link:hover {
|
||||||
background: rgba(102, 126, 234, 0.2);
|
background: rgba(139, 195, 74, 0.25);
|
||||||
transform: translateX(2px);
|
transform: translateX(2px);
|
||||||
|
color: #2e7d32;
|
||||||
}
|
}
|
||||||
|
|
||||||
.event-link::after {
|
.event-link::after {
|
||||||
@@ -371,18 +405,19 @@ body {
|
|||||||
|
|
||||||
/* 滚动条样式 */
|
/* 滚动条样式 */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(139, 195, 74, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: rgba(102, 126, 234, 0.5);
|
background: rgba(139, 195, 74, 0.5);
|
||||||
border-radius: 3px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: rgba(102, 126, 234, 0.7);
|
background: rgba(139, 195, 74, 0.7);
|
||||||
}
|
}
|
||||||
@@ -296,66 +296,131 @@ body {
|
|||||||
|
|
||||||
/* 手机端 */
|
/* 手机端 */
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: 10px;
|
padding: 8px;
|
||||||
|
margin: 8px;
|
||||||
|
max-width: calc(100vw - 16px);
|
||||||
|
width: calc(100vw - 16px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
padding: 15px;
|
padding: 12px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1 {
|
.header h1 {
|
||||||
font-size: 1.8rem;
|
font-size: 1.6rem;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header p {
|
||||||
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rates-grid {
|
.rates-grid {
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 6px;
|
gap: 8px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rate-card {
|
.rate-card {
|
||||||
padding: 8px;
|
padding: 10px 6px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
min-width: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.currency-code {
|
.currency-code {
|
||||||
font-size: 0.85rem;
|
font-size: 0.8rem;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
gap: 4px;
|
gap: 3px;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.currency-flag {
|
.currency-flag {
|
||||||
font-size: 1rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.exchange-rate {
|
.exchange-rate {
|
||||||
font-size: 0.9rem;
|
font-size: 0.85rem;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.currency-name {
|
.currency-name {
|
||||||
font-size: 0.7rem;
|
font-size: 0.65rem;
|
||||||
line-height: 1.1;
|
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 {
|
.currency-selector {
|
||||||
padding: 15px;
|
padding: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.currency-selector select {
|
.currency-selector select {
|
||||||
min-width: 100%;
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
padding: 15px;
|
||||||
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-grid {
|
.stats-grid {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 10px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 大屏幕优化 */
|
/* 大屏幕优化 */
|
||||||
|
|||||||
@@ -460,19 +460,48 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
margin: 8px auto;
|
margin: 8px;
|
||||||
padding: 6px;
|
padding: 8px;
|
||||||
|
max-width: calc(100vw - 16px);
|
||||||
|
width: calc(100vw - 16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 12px 0 16px 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header h1 {
|
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 {
|
.hot-item {
|
||||||
padding: 10px;
|
padding: 12px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 10px;
|
||||||
gap: 8px;
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-rank-container {
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hot-rank {
|
.hot-rank {
|
||||||
@@ -484,36 +513,72 @@ footer {
|
|||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hot-content-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.hot-title {
|
.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 {
|
.hot-bottom-row {
|
||||||
flex-direction: column;
|
flex-wrap: wrap;
|
||||||
align-items: flex-start;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hot-media-row {
|
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hot-time {
|
.hot-time {
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hot-value {
|
.hot-value {
|
||||||
font-size: 0.65rem;
|
font-size: 0.65rem;
|
||||||
|
padding: 3px 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hot-cover {
|
.hot-cover {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hot-link {
|
.hot-link {
|
||||||
font-size: 0.65rem;
|
font-size: 0.65rem;
|
||||||
padding: 4px 8px;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -449,18 +449,42 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
margin: 8px auto;
|
margin: 8px;
|
||||||
padding: 14px;
|
padding: 12px;
|
||||||
|
max-width: calc(100vw - 16px);
|
||||||
|
width: calc(100vw - 16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header h1 {
|
header h1 {
|
||||||
font-size: 1.6rem;
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-time {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 6px 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-item {
|
.topic-item {
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 12px;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topic-header {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-rank {
|
.topic-rank {
|
||||||
@@ -469,15 +493,66 @@ footer {
|
|||||||
min-width: 30px;
|
min-width: 30px;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topic-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
padding-right: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-title {
|
.topic-title {
|
||||||
font-size: 0.95rem;
|
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 {
|
.topic-detail {
|
||||||
width: 80px;
|
font-size: 0.85rem;
|
||||||
height: 60px;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -4,19 +4,19 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#667eea" />
|
<meta name="theme-color" content="#667eea" />
|
||||||
<meta name="description" content="✨ 神奇万事通 - 一个多功能的聚合软件应用，提供60s API、小游戏、AI模型等丰富功能" />
|
<meta name="description" content="✨ 万象口袋 - 一个多功能的聚合软件应用，提供聚合应用、小游戏、AI模型工具等丰富功能" />
|
||||||
<meta name="keywords" content="60s API,热搜榜单,小游戏,AI模型,实时资讯,工具集合" />
|
<meta name="keywords" content="聚合应用,热搜榜单,小游戏,AI模型,实时资讯,工具集合" />
|
||||||
<meta name="author" content="神奇万事通" />
|
<meta name="author" content="万象口袋" />
|
||||||
|
|
||||||
<!-- Open Graph / Facebook -->
|
<!-- Open Graph / Facebook -->
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:title" content="神奇万事通" />
|
<meta property="og:title" content="万象口袋" />
|
||||||
<meta property="og:description" content="🎨 一个多功能的聚合软件应用 💬" />
|
<meta property="og:description" content="🎨一个跨平台的多功能聚合软件应用" />
|
||||||
|
|
||||||
<!-- Twitter -->
|
<!-- Twitter -->
|
||||||
<meta property="twitter:card" content="summary_large_image" />
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
<meta property="twitter:title" content="神奇万事通" />
|
<meta property="twitter:title" content="万象口袋" />
|
||||||
<meta property="twitter:description" content="🎨 一个多功能的聚合软件应用 💬" />
|
<meta property="twitter:description" content="🎨一个跨平台的多功能聚合软件应用" />
|
||||||
|
|
||||||
<!-- Favicon -->
|
<!-- Favicon -->
|
||||||
<link rel="icon" href="%PUBLIC_URL%/assets/logo.png" />
|
<link rel="icon" href="%PUBLIC_URL%/assets/logo.png" />
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
|
||||||
<title>神奇万事通</title>
|
<title>万象口袋</title>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* 加载动画 */
|
/* 加载动画 */
|
||||||
@@ -52,30 +52,30 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#loading .loading-logo {
|
#loading .loading-logo {
|
||||||
width: 64px;
|
width: 90px;
|
||||||
height: 64px;
|
height: 90px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
animation: pulse 2s infinite;
|
animation: pulse 2s infinite;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loading .loading-text {
|
#loading .loading-text {
|
||||||
font-size: 24px;
|
font-size: 34px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loading .loading-desc {
|
#loading .loading-desc {
|
||||||
font-size: 14px;
|
font-size: 20px;
|
||||||
opacity: 0.8;
|
color: rgba(255, 255, 255, 0.8);
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loading .loading-spinner {
|
#loading .loading-spinner {
|
||||||
width: 40px;
|
width: 56px;
|
||||||
height: 40px;
|
height: 56px;
|
||||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
border: 6px solid rgba(255, 255, 255, 0.3);
|
||||||
border-top: 4px solid white;
|
border-top: 6px solid #ffffff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spin 1s linear infinite;
|
animation: spin 1s linear infinite;
|
||||||
}
|
}
|
||||||
@@ -91,8 +91,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
#loading .loading-logo { width: 48px; height: 48px; }
|
#loading .loading-logo {
|
||||||
#loading .loading-text { font-size: 20px; }
|
width: 67px;
|
||||||
|
height: 67px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading .loading-text {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading .loading-desc {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading .loading-spinner {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-top: 4px solid #ffffff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@@ -101,9 +118,9 @@
|
|||||||
|
|
||||||
<!-- 加载动画 -->
|
<!-- 加载动画 -->
|
||||||
<div id="loading">
|
<div id="loading">
|
||||||
<img class="loading-logo" src="%PUBLIC_URL%/assets/logo.png" alt="神奇万事通" />
|
<img class="loading-logo" src="%PUBLIC_URL%/assets/logo.png" alt="万象口袋" />
|
||||||
<div class="loading-text">神奇万事通</div>
|
<div class="loading-text">万象口袋</div>
|
||||||
<div class="loading-desc">🎨 多功能聚合应用 💬</div>
|
<div class="loading-desc">🎨 一个跨平台的多功能聚合应用(´｡• ω •｡`) 💬</div>
|
||||||
<div class="loading-spinner"></div>
|
<div class="loading-spinner"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"short_name": "神奇万事通",
|
"short_name": "万象口袋",
|
||||||
"name": "✨ 神奇万事通 - 多功能聚合应用",
|
"name": "✨ 万象口袋 - 多功能聚合应用",
|
||||||
"description": "🎨 一个多功能的聚合软件应用，提供60s API、小游戏、AI模型等丰富功能",
|
"description": "🎨 一个多功能的聚合软件应用，提供聚合应用、休闲小游戏、AI模型工具等丰富功能",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✨</text></svg>",
|
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✨</text></svg>",
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
"categories": ["utilities", "productivity", "entertainment"],
|
"categories": ["utilities", "productivity", "entertainment"],
|
||||||
"screenshots": [
|
"screenshots": [
|
||||||
{
|
{
|
||||||
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800'><rect width='400' height='800' fill='%23667eea'/><text x='200' y='400' text-anchor='middle' fill='white' font-size='32'>神奇万事通</text></svg>",
|
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800'><rect width='400' height='800' fill='%23667eea'/><text x='200' y='400' text-anchor='middle' fill='white' font-size='32'>万象口袋</text></svg>",
|
||||||
"type": "image/svg+xml",
|
"type": "image/svg+xml",
|
||||||
"sizes": "400x800",
|
"sizes": "400x800",
|
||||||
"form_factor": "narrow"
|
"form_factor": "narrow"
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"网站名字": "✨ 神奇万事通 ✨",
|
"网站名字": "✨ 万象口袋 ✨",
|
||||||
"网站描述": "🎨 一个多功能的聚合软件应用 💬",
|
"网站描述": "🎨 一个跨平台的多功能聚合软件应用",
|
||||||
"站长": "👨💻 by-神奇万事通",
|
"站长": "👨💻 by-万象口袋",
|
||||||
"备案号": "📄 蜀ICP备2025151694号",
|
"备案号": "📄 蜀ICP备2025151694号",
|
||||||
"网站页尾": "✨ 神奇万事通 ✨ | Copyright © 2025-2025 ✨",
|
"网站页尾": "✨ 万象口袋 ✨ | Copyright © 2025-2025 ✨",
|
||||||
"网站logo": "assets/logo.png"
|
"网站logo": "assets/logo.png"
|
||||||
}
|
}
|
||||||
@@ -2,10 +2,11 @@ import React from 'react';
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const FooterContainer = styled.footer`
|
const FooterContainer = styled.footer`
|
||||||
background: #1f2937;
|
background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
|
||||||
color: #d1d5db;
|
color: white;
|
||||||
padding: 40px 0 80px; /* 底部留出导航栏空间 */
|
padding: 40px 0 80px; /* 底部留出导航栏空间 */
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
@media (min-width: 769px) {
|
@media (min-width: 769px) {
|
||||||
padding: 40px 0 20px;
|
padding: 40px 0 20px;
|
||||||
@@ -34,7 +35,7 @@ const FooterDescription = styled.p`
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
color: #9ca3af;
|
color: rgba(255, 255, 255, 0.9);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const FooterLinks = styled.div`
|
const FooterLinks = styled.div`
|
||||||
@@ -50,26 +51,29 @@ const FooterLinks = styled.div`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const FooterLink = styled.a`
|
const FooterLink = styled.a`
|
||||||
color: #d1d5db;
|
color: rgba(255, 255, 255, 0.9);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
transition: color 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #4ade80;
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const FooterDivider = styled.div`
|
const FooterDivider = styled.div`
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: #374151;
|
background: rgba(255, 255, 255, 0.2);
|
||||||
margin: 24px 0;
|
margin: 24px 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const FooterBottom = styled.div`
|
const FooterBottom = styled.div`
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6b7280;
|
color: rgba(255, 255, 255, 0.8);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@@ -88,14 +92,10 @@ const Footer = () => {
|
|||||||
<FooterContainer>
|
<FooterContainer>
|
||||||
<FooterContent>
|
<FooterContent>
|
||||||
<FooterInfo>
|
<FooterInfo>
|
||||||
<FooterTitle>✨ 神奇万事通 ✨</FooterTitle>
|
<FooterTitle>✨ 万象口袋 ✨</FooterTitle>
|
||||||
</FooterInfo>
|
</FooterInfo>
|
||||||
|
|
||||||
<FooterLinks>
|
|
||||||
<FooterLink href="/60sapi">📡API聚合应用</FooterLink>
|
|
||||||
<FooterLink href="/smallgame">🎮玩玩小游戏</FooterLink>
|
|
||||||
<FooterLink href="/aimodel">🤖AI工具</FooterLink>
|
|
||||||
</FooterLinks>
|
|
||||||
|
|
||||||
<FooterDivider />
|
<FooterDivider />
|
||||||
|
|
||||||
|
|||||||
@@ -236,12 +236,12 @@ const Header = () => {
|
|||||||
<HeaderContent>
|
<HeaderContent>
|
||||||
<Logo to="/">
|
<Logo to="/">
|
||||||
<img className="logo-icon" src="/assets/logo.png" alt="InfoGenie Logo" />
|
<img className="logo-icon" src="/assets/logo.png" alt="InfoGenie Logo" />
|
||||||
神奇万事通
|
万象口袋
|
||||||
</Logo>
|
</Logo>
|
||||||
|
|
||||||
<Nav>
|
<Nav>
|
||||||
<NavLink to="/60sapi">API聚合应用</NavLink>
|
<NavLink to="/60sapi">聚合应用</NavLink>
|
||||||
<NavLink to="/smallgame">玩玩小游戏</NavLink>
|
<NavLink to="/smallgame">休闲游戏</NavLink>
|
||||||
<NavLink to="/aimodel">AI工具</NavLink>
|
<NavLink to="/aimodel">AI工具</NavLink>
|
||||||
<NavLink to="/profile">个人中心</NavLink>
|
<NavLink to="/profile">个人中心</NavLink>
|
||||||
</Nav>
|
</Nav>
|
||||||
@@ -292,19 +292,19 @@ const Header = () => {
|
|||||||
</MobileMenuHeader>
|
</MobileMenuHeader>
|
||||||
|
|
||||||
<MobileNavLink to="/" onClick={handleMenuClose}>
|
<MobileNavLink to="/" onClick={handleMenuClose}>
|
||||||
🏠首页
|
首页
|
||||||
</MobileNavLink>
|
</MobileNavLink>
|
||||||
<MobileNavLink to="/60sapi" onClick={handleMenuClose}>
|
<MobileNavLink to="/60sapi" onClick={handleMenuClose}>
|
||||||
📡API聚合应用
|
聚合应用
|
||||||
</MobileNavLink>
|
</MobileNavLink>
|
||||||
<MobileNavLink to="/smallgame" onClick={handleMenuClose}>
|
<MobileNavLink to="/smallgame" onClick={handleMenuClose}>
|
||||||
🎮玩玩小游戏
|
休闲游戏
|
||||||
</MobileNavLink>
|
</MobileNavLink>
|
||||||
<MobileNavLink to="/aimodel" onClick={handleMenuClose}>
|
<MobileNavLink to="/aimodel" onClick={handleMenuClose}>
|
||||||
🤖AI工具
|
AI工具
|
||||||
</MobileNavLink>
|
</MobileNavLink>
|
||||||
<MobileNavLink to="/profile" onClick={handleMenuClose}>
|
<MobileNavLink to="/profile" onClick={handleMenuClose}>
|
||||||
👤个人中心
|
个人中心
|
||||||
</MobileNavLink>
|
</MobileNavLink>
|
||||||
|
|
||||||
{isLoggedIn && user ? (
|
{isLoggedIn && user ? (
|
||||||
@@ -345,7 +345,7 @@ const Header = () => {
|
|||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<MobileNavLink to="/login" onClick={handleMenuClose}>
|
<MobileNavLink to="/login" onClick={handleMenuClose}>
|
||||||
👤 登录注册
|
登录注册
|
||||||
</MobileNavLink>
|
</MobileNavLink>
|
||||||
)}
|
)}
|
||||||
</MobileMenuContent>
|
</MobileMenuContent>
|
||||||
|
|||||||
@@ -79,12 +79,12 @@ const Navigation = () => {
|
|||||||
{
|
{
|
||||||
path: '/60sapi',
|
path: '/60sapi',
|
||||||
icon: FiActivity,
|
icon: FiActivity,
|
||||||
text: 'API聚合应用'
|
text: '聚合应用'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/smallgame',
|
path: '/smallgame',
|
||||||
icon: FiGrid,
|
icon: FiGrid,
|
||||||
text: '玩玩小游戏'
|
text: '休闲游戏'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/aimodel',
|
path: '/aimodel',
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export const AI_MODEL_APPS = [
|
|||||||
description: '智能变量命名工具，帮助开发者快速生成规范的变量名',
|
description: '智能变量命名工具，帮助开发者快速生成规范的变量名',
|
||||||
link: '/aimodelapp/AI变量命名助手/index.html',
|
link: '/aimodelapp/AI变量命名助手/index.html',
|
||||||
gradient: 'linear-gradient(135deg, #4ade80 0%, #22c55e 100%)',
|
gradient: 'linear-gradient(135deg, #4ade80 0%, #22c55e 100%)',
|
||||||
icon: '🤖',
|
icon: '💻',
|
||||||
IsShow: true
|
IsShow: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -40,7 +40,7 @@ export const AI_MODEL_APPS = [
|
|||||||
description: '基于AI的文章转文言文工具',
|
description: '基于AI的文章转文言文工具',
|
||||||
link: '/aimodelapp/AI文章转文言文/index.html',
|
link: '/aimodelapp/AI文章转文言文/index.html',
|
||||||
gradient: 'linear-gradient(135deg,rgb(186, 248, 70) 0%,rgb(255, 208, 0) 100%)',
|
gradient: 'linear-gradient(135deg,rgb(186, 248, 70) 0%,rgb(255, 208, 0) 100%)',
|
||||||
icon: '📝',
|
icon: '🖊️',
|
||||||
IsShow: true
|
IsShow: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -48,7 +48,7 @@ export const AI_MODEL_APPS = [
|
|||||||
description: '基于AI的生成表情包工具',
|
description: '基于AI的生成表情包工具',
|
||||||
link: '/aimodelapp/AI生成表情包/index.html',
|
link: '/aimodelapp/AI生成表情包/index.html',
|
||||||
gradient: 'linear-gradient(135deg,rgb(186, 248, 70) 0%,rgb(34, 157, 238) 100%)',
|
gradient: 'linear-gradient(135deg,rgb(186, 248, 70) 0%,rgb(34, 157, 238) 100%)',
|
||||||
icon: '📸',
|
icon: '🫡',
|
||||||
IsShow: true
|
IsShow: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -61,7 +61,7 @@ export const AI_MODEL_APPS = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
//玩玩小游戏
|
//休闲游戏
|
||||||
export const SMALL_GAMES = [
|
export const SMALL_GAMES = [
|
||||||
{
|
{
|
||||||
title: '2048',
|
title: '2048',
|
||||||
@@ -105,7 +105,7 @@ export const SMALL_GAMES = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
//API聚合应用
|
//聚合应用
|
||||||
export const API_60S_CATEGORIES = [
|
export const API_60S_CATEGORIES = [
|
||||||
{
|
{
|
||||||
title: '热搜榜单',
|
title: '热搜榜单',
|
||||||
@@ -146,7 +146,7 @@ export const API_60S_CATEGORIES = [
|
|||||||
{ title: '百度百科词条', link: '/60sapi/实用功能/百度百科词条/index.html', icon: '📚', IsShow: true },
|
{ title: '百度百科词条', link: '/60sapi/实用功能/百度百科词条/index.html', icon: '📚', IsShow: true },
|
||||||
{ title: '公网IP地址', link: '/60sapi/实用功能/公网IP地址/index.html', icon: '🌐', IsShow: true },
|
{ title: '公网IP地址', link: '/60sapi/实用功能/公网IP地址/index.html', icon: '🌐', IsShow: true },
|
||||||
{ title: '哈希解压压缩', link: '/60sapi/实用功能/哈希解压压缩/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 },
|
{ 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',
|
color: '#f7b731',
|
||||||
apis: [
|
apis: [
|
||||||
{ title: '随机唱歌音频', link: '/60sapi/娱乐消遣/随机唱歌音频/index.html', icon: '🎤', IsShow: true },
|
{ 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 },
|
{ title: '随机冷笑话', link: '/60sapi/娱乐消遣/随机冷笑话/index.html', icon: '😄', IsShow: true },
|
||||||
{ title: '随机一言', link: '/60sapi/娱乐消遣/随机一言/index.html', icon: '💭', IsShow: true },
|
{ title: '随机一言', link: '/60sapi/娱乐消遣/随机一言/index.html', icon: '💭', IsShow: true },
|
||||||
|
|||||||
@@ -330,14 +330,14 @@ const AiModelPage = () => {
|
|||||||
AI工具
|
AI工具
|
||||||
</PageTitle>
|
</PageTitle>
|
||||||
<PageDescription>
|
<PageDescription>
|
||||||
AI大模型工具，提供一些小功能
|
<strong>AI大模型工具，提供一些生成式大语言模型的小功能(´,,•ω•,,)♡</strong>
|
||||||
</PageDescription>
|
</PageDescription>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
|
|
||||||
{!isLoggedIn ? (
|
{!isLoggedIn ? (
|
||||||
<LoginPrompt>
|
<LoginPrompt>
|
||||||
<LoginIcon>🔒</LoginIcon>
|
<LoginIcon>🔒</LoginIcon>
|
||||||
<LoginTitle>需要登录访问</LoginTitle>
|
<LoginTitle>需要登录访问Σ(°ロ°)</LoginTitle>
|
||||||
<LoginText>
|
<LoginText>
|
||||||
AI模型功能需要登录后才能使用，请先登录您的账户。
|
AI模型功能需要登录后才能使用，请先登录您的账户。
|
||||||
<br />
|
<br />
|
||||||
@@ -434,7 +434,7 @@ const AiModelPage = () => {
|
|||||||
萌芽币消费提示
|
萌芽币消费提示
|
||||||
</h3>
|
</h3>
|
||||||
<p style={{ lineHeight: '1.6', color: '#374151' }}>
|
<p style={{ lineHeight: '1.6', color: '#374151' }}>
|
||||||
每次使用AI功能将消耗<b>100萌芽币</b>，无论成功与否。当萌芽币余额不足时，无法使用AI功能。
|
每次使用AI功能将消耗<b>100萌芽币</b>，无论成功与否。当萌芽币余额不足时，无法使用AI工具功能。
|
||||||
</p>
|
</p>
|
||||||
<p style={{ lineHeight: '1.6', color: '#374151' }}>
|
<p style={{ lineHeight: '1.6', color: '#374151' }}>
|
||||||
您可以通过<b>每日签到</b>获得300萌芽币。详细的萌芽币余额和使用记录将显示在各AI应用的右上角。
|
您可以通过<b>每日签到</b>获得300萌芽币。详细的萌芽币余额和使用记录将显示在各AI应用的右上角。
|
||||||
|
|||||||
@@ -3,6 +3,8 @@ import styled from 'styled-components';
|
|||||||
import { FiExternalLink, FiArrowLeft } from 'react-icons/fi';
|
import { FiExternalLink, FiArrowLeft } from 'react-icons/fi';
|
||||||
import { API_60S_CATEGORIES } from '../config/StaticPageConfig';
|
import { API_60S_CATEGORIES } from '../config/StaticPageConfig';
|
||||||
|
|
||||||
|
|
||||||
|
//================css样式================
|
||||||
const Api60sContainer = styled.div`
|
const Api60sContainer = styled.div`
|
||||||
min-height: calc(100vh - 140px);
|
min-height: calc(100vh - 140px);
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
@@ -51,19 +53,29 @@ const CategoryTitle = styled.h2`
|
|||||||
|
|
||||||
const CategoryGrid = styled.div`
|
const CategoryGrid = styled.div`
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
grid-template-columns: repeat(4, 1fr);
|
||||||
gap: 12px;
|
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);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 10px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ApiCard = styled.div`
|
const ApiCard = styled.div`
|
||||||
background: rgba(255, 255, 255, 0.98);
|
background: rgba(255, 255, 255, 0.98);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
padding: 16px;
|
padding: 20px 16px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
@@ -72,10 +84,15 @@ const ApiCard = styled.div`
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
min-height: 80px;
|
min-height: 90px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 16px 12px;
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -197,6 +214,7 @@ const EmbeddedFrame = styled.iframe`
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
`;
|
`;
|
||||||
|
//================css样式================
|
||||||
|
|
||||||
const Api60sPage = () => {
|
const Api60sPage = () => {
|
||||||
const [mounted, setMounted] = useState(false);
|
const [mounted, setMounted] = useState(false);
|
||||||
@@ -247,8 +265,10 @@ const Api60sPage = () => {
|
|||||||
<Api60sContainer>
|
<Api60sContainer>
|
||||||
<Container>
|
<Container>
|
||||||
<Header>
|
<Header>
|
||||||
<Title>API聚合应用</Title>
|
<Title>聚合应用</Title>
|
||||||
<Subtitle>提供丰富的实时数据接口，涵盖热搜榜单、日更资讯、实用工具和娱乐功能</Subtitle>
|
<Subtitle>
|
||||||
|
提供各大社交平台最新的实时数据，让您摆脱平台大数据算法的干扰，走出信息茧房，涵盖热搜榜单、日更资讯、实用工具和娱乐消遣四大板块
|
||||||
|
</Subtitle>
|
||||||
</Header>
|
</Header>
|
||||||
</Container>
|
</Container>
|
||||||
</Api60sContainer>
|
</Api60sContainer>
|
||||||
@@ -259,9 +279,9 @@ const Api60sPage = () => {
|
|||||||
<Api60sContainer>
|
<Api60sContainer>
|
||||||
<Container>
|
<Container>
|
||||||
<Header>
|
<Header>
|
||||||
<Title>API聚合应用</Title>
|
<Title>聚合应用</Title>
|
||||||
<Subtitle>
|
<Subtitle>
|
||||||
提供丰富的实时数据接口，涵盖热搜榜单、日更资讯、实用工具和娱乐功能
|
<strong>提供各大社交平台最新的实时数据，让您摆脱平台大数据算法的干扰，走出信息茧房，涵盖热搜榜单、日更资讯、实用工具和娱乐消遣四大板块(˘•ω•˘)</strong>
|
||||||
</Subtitle>
|
</Subtitle>
|
||||||
</Header>
|
</Header>
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { FiActivity, FiGrid, FiCpu, FiTrendingUp } from 'react-icons/fi';
|
import { FiActivity, FiGrid, FiCpu, FiTrendingUp } from 'react-icons/fi';
|
||||||
|
|
||||||
|
//================css样式================
|
||||||
const HomeContainer = styled.div`
|
const HomeContainer = styled.div`
|
||||||
min-height: calc(100vh - 140px);
|
min-height: calc(100vh - 140px);
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
@@ -172,7 +173,7 @@ const ModuleFeature = styled.li`
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
//================css样式================
|
||||||
|
|
||||||
|
|
||||||
const HomePage = () => {
|
const HomePage = () => {
|
||||||
@@ -181,24 +182,25 @@ const HomePage = () => {
|
|||||||
{
|
{
|
||||||
path: '/60sapi',
|
path: '/60sapi',
|
||||||
icon: FiActivity,
|
icon: FiActivity,
|
||||||
title: 'API聚合应用',
|
title: '聚合应用',
|
||||||
description: '实时获取各种热门数据,资讯信息和实用工具',
|
description: '实时获取最新热门数据,资讯和实用工具',
|
||||||
features: [
|
features: [
|
||||||
'娱乐消遣板块',
|
'🎯娱乐消遣板块',
|
||||||
'实用功能板块',
|
'🔧实用功能板块',
|
||||||
'日更咨询板块',
|
'📰日更咨询板块',
|
||||||
'热搜榜单板块',
|
'🔥热搜榜单板块',
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/smallgame',
|
path: '/smallgame',
|
||||||
icon: FiGrid,
|
icon: FiGrid,
|
||||||
title: '玩玩小游戏',
|
title: '休闲游戏',
|
||||||
description: '轻松有趣的休闲小游戏合集',
|
description: '轻松有趣的休闲小游戏合集',
|
||||||
features: [
|
features: [
|
||||||
'2048',
|
'🔢2048小游戏',
|
||||||
'俄罗斯方块',
|
'🧩俄罗斯方块',
|
||||||
'别踩白方块',
|
'🐍经典贪吃蛇',
|
||||||
|
'◼️别踩白方块',
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -207,31 +209,37 @@ const HomePage = () => {
|
|||||||
title: 'AI工具',
|
title: 'AI工具',
|
||||||
description: '智能AI工具和模型应用',
|
description: '智能AI工具和模型应用',
|
||||||
features: [
|
features: [
|
||||||
'AI写诗达人',
|
'🌍翻译助手',
|
||||||
'AI变量命名小助手',
|
'📝写诗达人',
|
||||||
'AI姓名评测',
|
"🖊️文章转文言文",
|
||||||
|
"🫡表情包制作",
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
//<em> </em>
|
||||||
return (
|
return (
|
||||||
<HomeContainer>
|
<HomeContainer>
|
||||||
<HeroSection>
|
<HeroSection>
|
||||||
<HeroContent>
|
<HeroContent>
|
||||||
<HeroTitle>
|
<HeroTitle>
|
||||||
<span className="title-emoji">✨</span>
|
<span className="title-emoji">✨</span>
|
||||||
神奇万事通
|
万象口袋
|
||||||
<span className="title-emoji">✨</span>
|
<span className="title-emoji">✨</span>
|
||||||
</HeroTitle>
|
</HeroTitle>
|
||||||
<HeroSubtitle>
|
<HeroSubtitle>
|
||||||
🎨 一个多功能的聚合软件应用 💬
|
<strong>💡一个跨平台的聚合式应用</strong>
|
||||||
<br />
|
<br />
|
||||||
提供各种API聚合应用、娱乐小游戏、AI大模型工具等丰富功能，目标是用一个应用解决用户的各种需求。
|
集成了热搜榜单，日更资讯、休闲游戏、AI大模型工具等丰富功能。
|
||||||
模仿微信小程序那样，用户可以在一个应用中完成多个功能，而不需要下载多个APP
|
像微信小程序一样，把分散的功能汇聚在一个应用中，让你无需下载一个又一个app。
|
||||||
|
<br />
|
||||||
|
<strong>🎯功能繁多却不显得臃肿</strong>
|
||||||
|
<br />
|
||||||
|
「Windows」端仅约18MB；「Android」端仅约15MB；平均内存占用仅48MB
|
||||||
|
相比市面上的软件更小巧、更轻便，却能承载更多可能。
|
||||||
</HeroSubtitle>
|
</HeroSubtitle>
|
||||||
<HeroButton to="/60sapi">
|
<HeroButton to="/60sapi">
|
||||||
<FiTrendingUp />
|
<FiTrendingUp />
|
||||||
开始探索
|
开始探索吧( •ω• )♡
|
||||||
</HeroButton>
|
</HeroButton>
|
||||||
</HeroContent>
|
</HeroContent>
|
||||||
</HeroSection>
|
</HeroSection>
|
||||||
|
|||||||
@@ -264,10 +264,10 @@ const SmallGamePage = () => {
|
|||||||
<Container>
|
<Container>
|
||||||
<PageHeader>
|
<PageHeader>
|
||||||
<PageTitle>
|
<PageTitle>
|
||||||
玩玩小游戏
|
休闲游戏
|
||||||
</PageTitle>
|
</PageTitle>
|
||||||
<PageDescription>
|
<PageDescription>
|
||||||
轻松有趣的休闲小游戏合集，即点即玩，无需下载
|
<strong>好玩的休闲小游戏合集，即点即玩，无需下载，支持离线游玩(,,・ω・,,)</strong>
|
||||||
</PageDescription>
|
</PageDescription>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
|
|
||||||
|
|||||||
@@ -7,13 +7,38 @@ import { userAPI } from '../utils/api';
|
|||||||
|
|
||||||
const ProfileContainer = styled.div`
|
const ProfileContainer = styled.div`
|
||||||
min-height: calc(100vh - 140px);
|
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%);
|
background: linear-gradient(135deg, rgba(74, 222, 128, 0.05) 0%, rgba(34, 197, 94, 0.05) 100%);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Container = styled.div`
|
const Container = styled.div`
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: 0 auto;
|
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`
|
const ProfileHeader = styled.div`
|
||||||
@@ -398,9 +423,15 @@ const UserProfilePage = () => {
|
|||||||
return (
|
return (
|
||||||
<ProfileContainer>
|
<ProfileContainer>
|
||||||
<Container>
|
<Container>
|
||||||
|
<PageHeader>
|
||||||
|
<PageTitle>个人中心</PageTitle>
|
||||||
|
<PageDescription>
|
||||||
|
<strong>管理您的个人信息、查看萌芽币余额和签到记录(,,・ω・,,)</strong>
|
||||||
|
</PageDescription>
|
||||||
|
</PageHeader>
|
||||||
<LoginPrompt>
|
<LoginPrompt>
|
||||||
<LoginIcon>🔒</LoginIcon>
|
<LoginIcon>🔒</LoginIcon>
|
||||||
<LoginTitle>需要登录访问</LoginTitle>
|
<LoginTitle>需要登录才能访问Σ(°ロ°)</LoginTitle>
|
||||||
<LoginText>
|
<LoginText>
|
||||||
个人中心需要登录后才能查看，请先登录您的账户。
|
个人中心需要登录后才能查看，请先登录您的账户。
|
||||||
<br />
|
<br />
|
||||||
@@ -449,6 +480,10 @@ const UserProfilePage = () => {
|
|||||||
return (
|
return (
|
||||||
<ProfileContainer>
|
<ProfileContainer>
|
||||||
<Container>
|
<Container>
|
||||||
|
<PageHeader>
|
||||||
|
<PageTitle>个人中心</PageTitle>
|
||||||
|
<PageDescription>管理您的个人信息、查看萌芽币余额和签到记录</PageDescription>
|
||||||
|
</PageHeader>
|
||||||
<ProfileHeader>
|
<ProfileHeader>
|
||||||
<Avatar>
|
<Avatar>
|
||||||
{qqAvatarUrl && !avatarError ? (
|
{qqAvatarUrl && !avatarError ? (
|
||||||
|
|||||||
@@ -22,6 +22,24 @@ body {
|
|||||||
color: #333;
|
color: #333;
|
||||||
background: #f5f7fa;
|
background: #f5f7fa;
|
||||||
overflow-x: hidden;
|
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 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端适配 */
|
/* 移动端适配 */
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
# ✨ InfoGenie 神奇万事通
|
# ✨ InfoGenie 万象口袋
|
||||||
|
|
||||||
> 🎨 一个多功能的聚合软件应用 💬
|
> 🎨 一个多功能的聚合软件应用 💬
|
||||||
|
|
||||||
@@ -278,7 +278,7 @@ npm start
|
|||||||
|
|
||||||
## 📞 联系方式
|
## 📞 联系方式
|
||||||
|
|
||||||
- **开发者**: 神奇万事通
|
- **开发者**: 万象口袋
|
||||||
- **项目地址**: https://github.com/shumengya/InfoGenie
|
- **项目地址**: https://github.com/shumengya/InfoGenie
|
||||||
- **演示地址**: https://infogenie.shumengya.top
|
- **演示地址**: https://infogenie.shumengya.top
|
||||||
- **API地址**: https://infogenie.api.shumengya.top
|
- **API地址**: https://infogenie.api.shumengya.top
|
||||||
@@ -293,7 +293,7 @@ npm start
|
|||||||
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
|
|
||||||
**✨ 感谢使用 InfoGenie 神奇万事通 ✨**
|
**✨ 感谢使用 InfoGenie 万象口袋 ✨**
|
||||||
|
|
||||||
🎨 *一个多功能的聚合软件应用* 💬
|
🎨 *一个多功能的聚合软件应用* 💬
|
||||||
|
|
||||||
|
|||||||
303
项目架构说明.md
Normal file
303
项目架构说明.md
Normal file
@@ -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) 文件了解详情
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
**✨ 感谢使用 InfoGenie 万象口袋 ✨**
|
||||||
|
|
||||||
|
🎨 *一个多功能的聚合软件应用* 💬
|
||||||
|
|
||||||
|
*支持Web、Windows、Android多平台*
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
10
项目架构说明.txt
10
项目架构说明.txt
@@ -1,10 +0,0 @@
|
|||||||
1.一个前后端分离的网站项目，前端使用React框架，后端使用Python3.13.2的Flask框架，采用模块化架构避免单个文件过大
|
|
||||||
前端代码放在frontend文件夹，后端代码放在backend文件夹,确保代码结构清晰有少量中文注释，便于后期扩展维护
|
|
||||||
2.前端网页要适配手机竖屏端和电脑端，主要先适配手机端用户体验
|
|
||||||
3.后端目前需要一个连接MongoDB数据库来储存用户登录数据,
|
|
||||||
用户数据储存在MongoDB的InfoGenie数据库的userdata集合中 玩家数据库储存模板在玩家数据模板.json文件里
|
|
||||||
|
|
||||||
软件app前端分三个主要模块
|
|
||||||
60sapi模块：为静态页面，又分四个子模块：热搜榜单，日更资讯，实用功能，娱乐消遣
|
|
||||||
smallgame模块：为静态页面
|
|
||||||
aimodelapp模块： 为静态页面 （需要登录验证才能进入使用）（暂时不弄）
|
|
||||||
Reference in New Issue
Block a user