优化登录页大背景图片文件，加快页面加载 (#660)

* update:优化说明文档

* update：优化登录页大背景图片文件，加快页面加载

README.md

@@ -128,8 +128,7 @@
 
 ## 系统要求与部署前提 🖥️
 
-- **电脑或服务器**：建议 4 核 CPU、8G 内存的电脑。如果开启ASR也使用API，可运行在2核CPU、2G内存的服务器中。
+建议 4 核 CPU、8G 内存的电脑。如果开启ASR也使用API，可运行在2核CPU、2G内存的服务器中。[请参考部署架构图](./docs/images/deploy.png)
-- **修改客户端接口**：请将本后端服务的接口地址更新至 客户端中。
 
 ---
 
@@ -154,6 +153,8 @@ server:
 
 ## 部署方式 🚀
 
+[![Banners](docs/images/banner2.png)](./docs/Deployment.md)
+
 ### 一、[部署文档](./docs/Deployment.md)
 
 本项目支持以下三种部署方式，您可根据实际需求选择。

main/manager-web/.env

@@ -1 +1 @@
-VUE_APP_TITLE=小智-智控台
+VUE_APP_TITLE=智控台

main/manager-web/src/App.vue

@@ -27,6 +27,19 @@ nav {
   }
 }
 
+.copyright {
+  text-align: center;
+  color:rgb(0, 0, 0);
+  font-size: 12px;
+  font-weight: 400;
+  margin-top: auto;
+  padding: 30px 0 20px;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+}
 .el-message {
   top: 45px !important;
 }

main/manager-web/src/views/DeviceManagement.vue

@@ -48,7 +48,7 @@
           :total="deviceList.length"
         ></el-pagination>
       </div>
-      <div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
+      <div class="copyright">
         ©2025 xiaozhi-esp32-server
       </div>
       <AddDeviceDialog :visible.sync="addDeviceDialogVisible" :agent-id="currentAgentId" @refresh="fetchBindDevices(currentAgentId)"  />

main/manager-web/src/views/auth.scss

@@ -1,9 +1,11 @@
-
 .welcome {
   min-width: 1200px;
   min-height: 675px;
   height: 100vh;
-  background-image: url("@/assets/login/background.png");
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(145deg, #f5f8fd, #6baaff, #9ebbfc, #f5f8fd);
   background-size: cover;
   /* 确保背景图像覆盖整个元素 */
   background-position: center;
@@ -130,3 +132,13 @@
     padding: 0;
   }
 }
+
+.login-person {
+  width: 500px;
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 25%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}

main/manager-web/src/views/home.vue

@@ -38,7 +38,7 @@
             />
           </div>
         </div>
-        <div style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 30px;color: #979db1;">
+        <div class="copyright">
           ©2025 xiaozhi-esp32-server
         </div>
         <AddWisdomBodyDialog :visible.sync="addDeviceDialogVisible" @confirm="handleWisdomBodyAdded" />

main/manager-web/src/views/login.vue

@@ -8,6 +8,9 @@
           <img loading="lazy" alt="" src="@/assets/xiaozhi-ai.png" style="width: 70px;height: 13px;"/>
         </div>
       </el-header>
+      <div class="login-person">
+        <img loading="lazy" alt="" src="@/assets/login/login-person.png" style="width: 100%;"/>
+      </div>
       <el-main style="position: relative;">
         <div class="login-box" @keyup.enter="login">
           <div
@@ -54,7 +57,7 @@
         </div>
       </el-main>
       <el-footer>
-        <div style="font-size: 12px;font-weight: 400;color: #979db1;">
+        <div class="copyright">
           ©2025 xiaozhi-esp32-server
         </div>
       </el-footer>

main/manager-web/src/views/register.vue

@@ -74,7 +74,7 @@
 
       <!-- 保持相同的页脚 -->
       <el-footer>
-        <div style="font-size: 12px;font-weight: 400;color: #979db1;">
+        <div class="copyright">
           ©2025 xiaozhi-esp32-server
         </div>
       </el-footer>

main/manager-web/src/views/roleConfig.vue

@@ -88,7 +88,7 @@
           </div>
         </div>
       </div>
-      <div style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 24px;color: #979db1;">
+      <div class="copyright">
         ©2025 xiaozhi-esp32-server
       </div>
     </el-main>

main/manager-web/src/views/welcome.vue

@@ -1,131 +0,0 @@
-<template>
-  <div class="welcome">
-    <el-container style="height: 100%;">
-      <el-header>
-        <div
-          style="display: flex;align-items: center;margin-top: 15px;margin-left: 10px;gap: 10px;">
-          <img src="@/assets/xiaozhi-logo.png" alt="" style="width: 45px;height: 45px;" />
-          <img src="@/assets/xiaozhi-ai.png" alt="" style="width: 70px;height: 13px;" />
-        </div>
-      </el-header>
-      <el-main style="position: relative;">
-        <div style="margin-left: 18%;position: absolute;top: 50%;transform: translateY(-50%);margin-top: -20px">
-          <div style="display: flex;align-items: center;margin-bottom: 27px;">
-            <div class="left-pillar" />
-            <div class="hi-text-bg" />
-            <div class="hi-text">Hi，你好</div>
-          </div>
-          <div class="introduction">让我们一起探索</div>
-          <div class="introduction">人工智能与机器人技术</div>
-          <div class="introduction">的迷人世界！</div>
-
-          <!-- 副标题 -->
-          <p class="english-subtitle">Let's explore the fascinating world</p>
-
-          <!-- 按钮 -->
-          <div style="margin-top: 60px;display: flex;gap: 20px;">
-            <div class="btn">
-              <img src="@/assets/welcome/questions.png" alt="" class="btn-icon" />
-              DIY教程
-            </div>
-            <div class="btn">
-              <img src="@/assets/welcome/github.png" alt="" class="btn-icon" />
-              GitHub
-            </div>
-            <div class="btn" style="background: #5778ff;color: #fff;" @click="jumpHome">
-              <img src="@/assets/welcome/more.png" alt="" class="btn-icon" />
-              控制台
-            </div>
-          </div>
-
-        </div>
-      </el-main>
-      <el-footer>
-        <div style="font-size: 12px;font-weight: 400;color: #3D4566">
-          ©2025 xiaozhi-esp32-server</div>
-      </el-footer>
-    </el-container>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-
-export default {
-  name: 'home',
-  methods:{
-    jumpHome(){
-      this.$router.push('/home')
-    }
-  }
-}
-</script>
-<style scoped lang="scss">
-.welcome {
-  min-width: 1200px;
-  min-height: 675px;
-  height: 100vh;
-  background-image: url("@/assets/welcome/background.png");
-  background-size: cover;
-  /* 确保背景图像覆盖整个元素 */
-  background-position: center;
-  /* 从顶部中心对齐 */
-  -webkit-background-size: cover;
-  /* 兼容老版本WebKit浏览器 */
-  -o-background-size: cover;
-  /* 兼容老版本Opera浏览器 */
-}
-.left-pillar {
-  width: 4px;
-  height: 36px;
-  background: #5778ff;
-}
-.hi-text-bg {
-  width: 129px;
-  height: 36px;
-  background: linear-gradient(90.66deg, #5778ff 0%, #f5f6fa00 100%);
-  opacity: 0.5;
-}
-.hi-text {
-  line-height: 36px;
-  font-weight: 700;
-  font-size: 14px;
-  text-align: left;
-  color: #3d4566;
-  padding-left: 14px;
-  position: absolute;
-}
-.introduction {
-  font-weight: 700;
-  font-size: 42px;
-  text-align: left;
-  color: #3d4566;
-}
-.btn {
-  width: 100px;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 28px;
-  display: flex;
-  gap: 10px;
-  font-weight: 400;
-  font-size: 12px;
-  text-align: left;
-  color: #3d4566;
-  cursor: pointer;
-  background-color: #fff;
-}
-.btn-icon {
-  width: 12px;
-  height: 12px;
-}
-.english-subtitle {
-  font-size: 11px;
-  color: #818cae;
-  text-align: left;
-  margin-top: 5px;
-  position: relative;
-  top: 8px;
-}
-</style>