添加站点统计功能及优化前端展示

Author: Viper373

README.md

@@ -56,7 +56,8 @@ base_model:
 
 ```plaintext
 .
-├── app.py                  # Web应用主入口，Flask服务
+├── api/                    # 适配Vercel的API服务
+│   ├── app.py              # Web应用主入口，Flask服务
 ├── main.py                 # 数据全流程自动化主入口
 ├── requirements.txt        # 依赖包列表
 ├── vercel.json             # Vercel部署配置
@@ -92,7 +93,6 @@ base_model:
 ├── templates/              # Jinja2模板（index.html等）
 ├── tool_utils/             # 工具类（数据库、日志、进度条等）
 ├── logs/                   # 日志输出目录
-├── .github/workflows/      # CI/CD配置
 └── ...
 ```
 

app.py renamed to api/app.py

@@ -1,4 +1,5 @@
 import json
+import os
 
 import numpy as np
 import torch
@@ -12,7 +13,12 @@
 
 rich_logger = RichLogger()
 mysql_utils = MySQLUtils()
-app = Flask(__name__)
+
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')
+STATIC_DIR = os.path.join(BASE_DIR, 'static')
+
+app = Flask(__name__, template_folder=TEMPLATE_DIR, static_folder=STATIC_DIR)
 CORS(app)
 
 # ================== 数据加载 ==================
@@ -42,14 +48,31 @@
     rich_logger.error(f"模型加载错误: {e}")
     model = None  # 设置为默认值或采取其他适当的错误处理措施
 
+
 # ================== 路由定义 ==================
 @app.route('/')
 def index():
     """
-    首页渲染
+    首页渲染，并统计访问
     """
+    ip = request.remote_addr
+    mysql_utils.record_visit(ip)
     return render_template('index.html')
 
+
+@app.route('/site_stats', methods=['GET'])
+def site_stats():
+    """
+    获取站点访问次数和访问人数
+    :return: JSON {visit_count, visitor_count}
+    """
+    total, user = mysql_utils.get_site_stats()
+    return jsonify({
+        "visit_count": total,
+        "visitor_count": user
+    })
+
+
 @app.route('/query_hero', methods=['GET'])
 def query_hero():
     """
@@ -58,6 +81,7 @@ def query_hero():
     """
     return jsonify(hero_list)
 
+
 @app.route('/query_win_rate', methods=['GET'])
 def query_win_rate():
     """
@@ -66,6 +90,7 @@ def query_win_rate():
     """
     return jsonify(hero_win_rate)
 
+
 @app.route('/query_team', methods=['GET'])
 def query_team():
     """
@@ -75,6 +100,7 @@ def query_team():
     data = team_list.get("data", team_list) if isinstance(team_list, dict) else team_list
     return jsonify(data)
 
+
 @app.route('/get_echarts_data', methods=['GET'])
 def get_heroes_data():
     """
@@ -106,6 +132,7 @@ def get_heroes_data():
         }
     return jsonify(heroes_data)
 
+
 @app.route('/predict', methods=['POST'])
 def predict():
     """
@@ -169,5 +196,6 @@ def predict():
         rich_logger.error(f"预测错误: {e}")
         return jsonify({"error": str(e)}), 400
 
+
 if __name__ == '__main__':
-    app.run(debug=True)
+    app.run()

static/css/style.css

@@ -4,7 +4,7 @@ html {
 }
 /* 设置body的基本样式和布局 */
 body {
-    font-family: Arial, sans-serif; /* 设置字体 */
+    font-family: 'ShanHaiJiGuMingKe', '思源黑体', '微软雅黑', '幼圆', '华文中宋', Arial, sans-serif;
     background-color: #f4f4f4; /* 设置背景颜色 */
     color: #333; /* 设置文本颜色 */
     margin: 0; /* 去除边距 */
@@ -24,7 +24,8 @@ body::before {
     left: 0; /* 左部对齐 */
     width: 100%; /* 宽度占满 */
     height: 100%; /* 高度占满 */
-    background: url('../images/background.jpg') no-repeat center center fixed; /* 设置背景图片 */
+    background: url("../images/background.jpg") no-repeat center center
+        fixed; /* 设置背景图片 */
     background-size: cover; /* 图片等比填充 */
     opacity: 0.6; /* 设置透明度 */
     z-index: -1; /* 设置层级，确保在所有内容之下 */
@@ -33,9 +34,9 @@ body::before {
 /* 顶栏样式定义 */
 .topbar {
     width: 100%; /* 宽度占满 */
-    display: flex; /* 使用弹性布局 */
-    justify-content: space-between; /* 两端对齐 */
-    align-items: center; /* 中心垂直对齐 */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     background-color: rgba(255, 255, 255, 0.6); /* 半透明白色背景 */
     padding: 10px 20px; /* 内边距 */
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
@@ -48,13 +49,13 @@ body::before {
 }
 
 /* 顶栏中的标题样式 */
-.title {
-    font-family: 幼圆, serif;
-    font-size: 24px; /* 字号 */
-    font-weight: bold; /* 加粗 */
-    flex: 1; /* 占据剩余空间 */
-    display: flex; /* 使用弹性布局进行垂直居中 */
-    align-items: center; /* 垂直居中 */
+.topbar .title {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    font-family: 'ShanHaiJiGuMingKe', '思源黑体', '微软雅黑', '幼圆', '华文中宋', Arial, sans-serif;
+    font-size: 24px;
+    font-weight: bold;
 }
 
 /* 顶栏中的作者图标样式 */
@@ -217,7 +218,8 @@ body::before {
     align-items: flex-end; /* 靠右对齐 */
     margin-bottom: 10px; /* 底部外边距 */
     margin-right: 2%; /* 右边距 */
-    text-align: right; /* 文本右对齐 */ }
+    text-align: right; /* 文本右对齐 */
+}
 /* 玩家布局样式 */
 .team-column#right-team .player {
     display: flex; /* 使用弹性布局 */
@@ -267,9 +269,9 @@ body::before {
 }
 /* 结果展示 p 样式 */
 .footer p {
-    font-size: 26px; /* 字号 */
-    font-family: "华文中宋", serif; /* 字体设置 */
-    margin: 5px 0; /* 顶部和底部外边距 */
+    font-size: 26px;
+    font-family: 'ShanHaiJiGuMingKe', '思源黑体', '微软雅黑', '幼圆', '华文中宋', Arial, sans-serif;
+    margin: 5px 0;
 }
 /* 预测按钮样式 */
 #predict-btn {
@@ -313,15 +315,30 @@ body::before {
 }
 /* A 队胜率 p 样式 */
 .A-win-rate p {
-    font-size: 25px !important; /* 字号 */
-    font-family: "幼圆", serif !important; /* 字体设置 */
-    font-weight: bolder; /* 加粗 */
+    font-size: 25px !important;
+    font-family: 'ShanHaiJiGuMingKe', '思源黑体', '微软雅黑', '幼圆', '华文中宋', Arial, sans-serif !important;
+    font-weight: bolder;
 }
 /* B 队胜率 p 样式 */
 .B-win-rate p {
-    font-size: 25px !important; /* 字号 */
-    font-family: "幼圆", serif !important; /* 字体设置 */
-    font-weight: bolder; /* 加粗 */
+    font-size: 25px !important;
+    font-family: 'ShanHaiJiGuMingKe', '思源黑体', '微软雅黑', '幼圆', '华文中宋', Arial, sans-serif !important;
+    font-weight: bolder;
+}
+.team-selection {
+    margin-bottom: 20px;
+}
+.team {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+#win-rate-chart {
+    margin: 0 30px;
+    flex: 1;
+}
+.footer {
+    margin-top: 30px;
 }
 /* Echarts 图表样式 */
 #win-rate-chart {
@@ -332,4 +349,97 @@ body::before {
     background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
     border-radius: 10px; /* 圆角 */
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
-}
+}
+
+.site-stats-header {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: #666;
+    background: none;
+    border-radius: 8px;
+    padding: 5px 10px;
+    box-shadow: none;
+    height: 30px;
+    margin: 0 20px;
+    font-family: 'ShanHaiJiGuMingKe', '思源黑体', '微软雅黑', '幼圆', '华文中宋', Arial, sans-serif;
+}
+
+.site-stats-header span {
+    margin-right: 20px;
+    display: flex;
+    align-items: center;
+}
+
+.site-stats-header img {
+    vertical-align: middle;
+    margin-right: 5px;
+}
+
+/* 移除底部 site-stats 的样式 */
+.site-stats {
+    display: none;
+}
+
+.topbar-right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+#current-time {
+    margin-right: 0;
+}
+
+@font-face {
+    font-family: 'ShanHaiJiGuMingKe';
+    src: url('../font/ShanHaiJiGuMingKe（YaZhiBan）.woff2') format('woff2');
+    font-display: swap;
+}
+
+html, body {
+    font-family: 'ShanHaiJiGuMingKe', '思源黑体', '微软雅黑', '幼圆', '华文中宋', Arial, sans-serif;
+}
+
+.stats-badge {
+    display: inline-flex;
+    align-items: center;
+    background: none;
+    color: #444;
+    border-radius: 8px;
+    padding: 2px 12px 2px 8px;
+    font-size: 20px;
+    font-family: 'ShanHaiJiGuMingKe', '思源黑体', '微软雅黑', '幼圆', '华文中宋', Arial, sans-serif;
+    margin-right: 18px;
+    font-weight: 500;
+    box-shadow: none;
+}
+.stats-badge:last-child {
+    margin-right: 0;
+}
+.stats-badge svg {
+    display: inline-block;
+    width: 28px !important;
+    height: 28px !important;
+}
+.stats-number {
+    font-weight: bold;
+    margin-left: 8px;
+    background: linear-gradient(
+        270deg,
+        #ff5858, #ffb347, #f9f871, #7be495, #4fc3f7, #a084ee, #ff5858, #ffb347, #f9f871, #7be495, #4fc3f7, #a084ee, #ff5858
+    );
+    background-size: 1200% 1200%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
+    animation: rainbow-flash 12s linear infinite;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.12);
+}
+@keyframes rainbow-flash {
+    0% { background-position: 0% 50%; }
+    100% { background-position: 100% 50%; }
+}

static/font/ShanHaiJiGuMingKe（YaZhiBan）.woff2

@@ -8,6 +8,14 @@ function init() {
     initializeChart();
     loadDataAndInitialize();
     initializePredictionButton();
+    updateSiteStats();
+}
+
+function updateSiteStats() {
+    $.get('/site_stats', function(data) {
+        $('#site-visit-count').text(data.visit_count);
+        $('#site-visitor-count').text(data.visitor_count);
+    });
 }
 
 function updateTimeEverySecond() {

static/js/main.js

@@ -14,7 +14,19 @@
 <body>
 <div class="topbar">
     <div class="title"><img id="author" src="../static/images/avatar.png" alt="Author">英雄联盟胜率预测</div>
-    <div id="current-time"></div>
+    <div class="site-stats-header">
+        <span class="stats-badge">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style="margin-right: 5px; vertical-align: middle;"><rect x="3" y="10" width="3" height="8" fill="#4FC3F7"/><rect x="9" y="6" width="3" height="12" fill="#1976D2"/><rect x="15" y="3" width="3" height="15" fill="#81C784"/></svg>
+            <span style="margin-right: 3px;">本站访问次数</span><span id="site-visit-count" class="stats-number">--</span>
+        </span>
+        <span class="stats-badge">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style="margin-right: 5px; vertical-align: middle;"><circle cx="7" cy="12" r="3" fill="#FFD600"/><circle cx="17" cy="12" r="3" fill="#4CAF50"/><ellipse cx="12" cy="17" rx="7" ry="3" fill="#90CAF9"/></svg>
+            <span style="margin-right: 3px;">本站访问人数</span><span id="site-visitor-count" class="stats-number">--</span>
+        </span>
+    </div>
+    <div class="topbar-right">
+        <div id="current-time"></div>
+    </div>
 </div>
 <div class="container">
     <div class="selection-container">
@@ -83,10 +95,10 @@ <h3>🅱队阵容选择</h3>
     </div>
     <div class="footer">
         <p>获胜方：
-                <span id="winning-team-container">
-                    <span id="winning-team-name"></span>
-                    <img id="winning-team-logo" src="" alt="队伍Logo" style="display: none; width: 30px; height: 30px; vertical-align: middle; margin-left: 10px;">
-                </span>
+            <span id="winning-team-container">
+                <span id="winning-team-name"></span>
+                <img id="winning-team-logo" src="" alt="队伍Logo" style="display: none; width: 30px; height: 30px; vertical-align: middle; margin-left: 10px;">
+            </span>
         </p>
         <div id="result" class="result">
             <div class="win-rates">
@@ -99,7 +111,6 @@ <h3>🅱队阵容选择</h3>
             </div>
             <button id="predict-btn">预测结果</button>
         </div>
-
     </div>
 </div>
 <script src="{{ url_for('static', filename='js/main.js') }}"></script>