update:拆分页面

2026-07-26 17:13:54 +08:00 · 2025-02-15 18:54:29 +08:00
parent 38546ad20f
commit aa71968a91
5 changed files with 115 additions and 141 deletions
@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="zh">
 <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
@@ -8,39 +8,11 @@
    <script src="js/element-plus2.9.4.js"></script>
    <script src="js/icons-vue2.3.1.js"></script>
    <script src="js/common.js"></script>
+    <link rel="icon" href="images/favicon.ico" />
+    <link rel="stylesheet" href="css/common.css">
    <title>小智-server</title>
    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            background: linear-gradient(135deg, #1a1f25 0%, #0d1117 100%);
-            min-height: 100vh;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-        }
-
-        .header {
-            background: rgba(13, 17, 23, 0.8);
-            backdrop-filter: blur(10px);
-            color: #fff;
-            padding: 1.5rem 2rem;
-            font-size: 1.4rem;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-
-        .header-logo {
-            width: 32px;
-            height: 32px;
-            background: linear-gradient(45deg, #00c6fb 0%, #005bea 100%);
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-        }
-
+        /* 页面特有样式 */
        .content-container {
            max-width: 1200px;
            margin: 20px auto;
@@ -56,15 +28,6 @@
            margin-bottom: 1rem;
        }

-        .role-id {
-            color: #333;
-            margin-bottom: 1rem;
-        }
-
-        .role-description {
-            margin: 1rem 0;
-        }
-
        .character-count {
            text-align: right;
            color: #999;
@@ -81,25 +44,12 @@
            font-size: 12px;
            margin-top: 1rem;
        }
-
-        .footer {
-            text-align: center;
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 13px;
-            padding: 20px;
-            position: fixed;
-            bottom: 0;
-            width: 100%;
-        }
    </style>
 </head>
 <body>
 <div id="app">
    <div class="animated-bg"></div>
-    <div class="header">
-        <div class="header-logo">AI</div>
-        xiaozhi-esp32-server
-    </div>
+    <app-header>xiaozhi-esp32-server</app-header>

    <div class="content-container">
        <div class="role-title">配置角色：</div>
@@ -123,9 +73,7 @@
        <div class="note">注意：保存配置后，需要重启设备，新的配置才会生效。</div>
    </div>

-    <div class="footer">
-        © 2025 xiaozhi-esp32-server
-    </div>
+    <app-footer></app-footer>
 </div>

 <script>
@@ -179,8 +127,8 @@
            this.loadPrompt();
        }
    };
-    const app = Vue.createApp(App);
-    app.use(ElementPlus);
+
+    const app = createVueApp(App);
    app.mount("#app");
 </script>
 </body>