引入tailwind css，调整样式

web/src/views/Home.vue

@@ -3,64 +3,24 @@
     <div class="tab-box">
       <div class="flex-center-col big-top-title xxx">
         <div class="flex-center-col" @click="isCollapse = !isCollapse">
-          <el-icon v-if="isCollapse" class="openicon">
-            <svg
-              t="1733138242826"
-              class="icon"
-              viewBox="0 0 1024 1024"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              p-id="1853"
-              id="mx_n_1733138242827"
-              width="200"
-              height="200"
-            >
-              <path
-                d="M715 267c135.31 0 245 109.69 245 245S850.31 757 715 757H309C173.69 757 64 647.31 64 512s109.69-245 245-245h406zM309 367c-80.081 0-145 64.919-145 145s64.919 145 145 145 145-64.919 145-145-64.919-145-145-145z"
-                fill="#754ff6"
-                p-id="1854"
-              ></path>
-            </svg>
-          </el-icon>
+          <el-tooltip content="展开菜单" placement="right" v-if="isCollapse">
+            <i class="iconfont icon-expand"></i>
+          </el-tooltip>
         </div>
         <div class="flex" :class="{ 'top-collapse': !isCollapse }">
           <div class="top-avatar flex">
             <span class="title" v-if="!isCollapse">GeekAI</span>
-            <img
-              v-if="loginUser.id"
-              :src="!!loginUser.avatar ? loginUser.avatar : avatarImg"
-              alt=""
-              :class="{ marr: !isCollapse }"
-            />
+            <img v-if="loginUser.id" :src="!!loginUser.avatar ? loginUser.avatar : avatarImg" alt="" :class="{ marr: !isCollapse }" />
           </div>
           <div class="menuIcon xxx" @click="isCollapse = !isCollapse">
-            <el-icon v-if="!isCollapse" class="openicon">
-              <svg
-                t="1733138405307"
-                class="icon"
-                viewBox="0 0 1024 1024"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                p-id="2064"
-                width="200"
-                height="200"
-              >
-                <path
-                  d="M715 267c135.31 0 245 109.69 245 245S850.31 757 715 757H309C173.69 757 64 647.31 64 512s109.69-245 245-245h406z m0 100c-80.081 0-145 64.919-145 145s64.919 145 145 145 145-64.919 145-145-64.919-145-145-145z"
-                  fill="#754ff6"
-                  p-id="2065"
-                ></path>
-              </svg>
-            </el-icon>
+            <el-tooltip content="关闭菜单" placement="right" v-if="!isCollapse">
+              <i class="iconfont icon-colspan"></i>
+            </el-tooltip>
           </div>
         </div>
       </div>
 
-      <div
-        class="menu-list"
-        :style="{ width: isCollapse ? '65px' : '170px' }"
-        :class="{ 'menu-list-collapse': !isCollapse }"
-      >
+      <div class="menu-list" :style="{ width: isCollapse ? '65px' : '170px' }" :class="{ 'menu-list-collapse': !isCollapse }">
         <ul>
           <li
             class="menu-list-item flex-center-col"
@@ -69,11 +29,11 @@
             @click="changeNav(item)"
             :class="item.url === curPath ? 'active' : ''"
           >
-            <el-image :src="item.icon" class="el-icon" />
-            <div
-              class="menu-title"
-              :class="{ 'menu-title-collapse': !isCollapse }"
-            >
+            <span v-if="item.icon.startsWith('icon')" :class="{ 'mr-1 ml-2': !isCollapse }">
+              <i class="iconfont" :class="item.icon"></i>
+            </span>
+            <el-image :src="item.icon" class="el-icon ml-1" v-else />
+            <div class="menu-title" :class="{ 'menu-title-collapse': !isCollapse }">
               {{ item.name }}
             </div>
           </li>
@@ -91,11 +51,7 @@
           <div class="bot" :style="{ width: isCollapse ? '65px' : '170px' }">
             <div class="bot-line"></div>
 
-            <el-popover
-              v-if="moreNavs.length > 0"
-              placement="right-end"
-              trigger="hover"
-            >
+            <el-popover v-if="moreNavs.length > 0" placement="right-end" trigger="hover">
               <template #reference>
                 <li class="menu-list-item flex-center-col">
                   <el-icon><CirclePlus /></el-icon>
@@ -110,28 +66,21 @@
                     :class="{
                       active: item.url === curPath,
                       moreTitle: index !== 3 && index !== 4,
-                      twoTittle: index === 3 || index === 4
+                      twoTittle: index === 3 || index === 4,
                     }"
                   >
                     <a @click="changeNav(item)">
-                      <el-image
-                        :src="item.icon"
-                        style="width: 20px; height: 20px"
-                      />
-                      <span
-                        :class="item.url === curPath ? 'title active' : 'title'"
-                        >{{ item.name }}</span
-                      >
+                      <span v-if="item.icon.startsWith('icon')">
+                        <i class="iconfont" :class="item.icon"></i>
+                      </span>
+                      <el-image :src="item.icon" style="width: 20px; height: 20px" v-else />
+                      <span :class="item.url === curPath ? 'title active' : 'title'">{{ item.name }}</span>
                     </a>
                   </li>
                 </ul>
               </template>
             </el-popover>
-            <el-popover
-              placement="right-end"
-              trigger="hover"
-              v-if="loginUser.id"
-            >
+            <el-popover placement="right-end" trigger="hover" v-if="loginUser.id">
               <template #reference>
                 <li class="menu-list-item flex-center-col">
                   <el-icon><Setting /></el-icon>
@@ -145,9 +94,7 @@
                       <el-icon>
                         <UserFilled />
                       </el-icon>
-                      <span class="username title">{{
-                        loginUser.nickname
-                      }}</span>
+                      <span class="username title">{{ loginUser.nickname }}</span>
                     </div>
                   </li>
                   <li>
@@ -160,12 +107,7 @@
               </template>
             </el-popover>
             <li class="menu-bot-item">
-              <a
-                :href="gitURL"
-                class="link-button"
-                target="_blank"
-                v-if="!license.de_copy && !isCollapse"
-              >
+              <a :href="gitURL" class="link-button" target="_blank" v-if="!license.de_copy && !isCollapse">
                 <i class="iconfont icon-github"></i>
               </a>
 
@@ -189,12 +131,7 @@
         @click="showNoticeLogin = true"
       ></div>
       <div class="topheader" v-if="loginUser.id === undefined || !loginUser.id">
-        <el-button
-          @click="router.push('/login')"
-          class="btn-go animate__animated animate__pulse animate__infinite"
-          round
-          >登录</el-button
-        >
+        <el-button @click="router.push('/login')" class="btn-go animate__animated animate__pulse animate__infinite" round>登录</el-button>
       </div>
       <!-- <div class="content custom-scroll"> -->
       <div class="content custom-scroll">
@@ -206,35 +143,27 @@
       </div>
       <!-- </div> -->
     </el-scrollbar>
-    <config-dialog
-      v-if="loginUser.id"
-      :show="showConfigDialog"
-      @hide="showConfigDialog = false"
-    />
+    <config-dialog v-if="loginUser.id" :show="showConfigDialog" @hide="showConfigDialog = false" />
+    <el-dialog v-model="showNoticeLogin">
+      <el-result icon="warning" title="未登录" sub-title="登录后解锁功能">
+        <template #extra>
+          <el-button type="primary" @click="router.push('/login')">登录</el-button>
+        </template>
+      </el-result>
+    </el-dialog>
   </div>
-  <el-dialog v-model="showNoticeLogin">
-    <el-result icon="warning" title="未登录" sub-title="登录后解锁功能">
-      <template #extra>
-        <el-button type="primary" @click="router.push('/login')"
-          >登录</el-button
-        >
-      </template>
-    </el-result>
-  </el-dialog>
 </template>
 
 <script setup>
-import { CirclePlus, Setting } from "@element-plus/icons-vue";
+import { CirclePlus, Setting, UserFilled } from "@element-plus/icons-vue";
 import ThemeChange from "@/components/ThemeChange.vue";
 import avatarImg from "@/assets/img/avatar.jpg";
 import { useRouter } from "vue-router";
 import { onMounted, ref, watch } from "vue";
 import { httpGet } from "@/utils/http";
 import { ElMessage } from "element-plus";
-import { UserFilled } from "@element-plus/icons-vue";
 import { checkSession, getLicenseInfo, getSystemInfo } from "@/store/cache";
 import { removeUserToken } from "@/store/session";
-import LoginDialog from "@/components/LoginDialog.vue";
 import { useSharedStore } from "@/store/sharedata";
 import ConfigDialog from "@/components/UserInfoDialog.vue";
 import { showMessageError } from "@/utils/dialog";
@@ -249,7 +178,6 @@ const curPath = ref();
 
 const title = ref("");
 const showNoticeLogin = ref(false);
-// const mainWinHeight = window.innerHeight - 50;
 
 /**
  * 从路径名中提取第一个路径段
@@ -276,15 +204,9 @@ const getFirstPathSegment = (url) => {
   }
 };
 const loginUser = ref({});
-const mainWinHeight = loginUser.value.id
-  ? window.innerHeight
-  : window.innerHeight;
-
-const version = ref(process.env.VUE_APP_VERSION);
 const routerViewKey = ref(0);
 const showConfigDialog = ref(false);
 const license = ref({ de_copy: true });
-const docsURL = ref(process.env.VUE_APP_DOCS_URL);
 const gitURL = ref(process.env.VUE_APP_GIT_URL);
 
 const store = useSharedStore();
@@ -380,12 +302,6 @@ const logout = function () {
       ElMessage.error("注销失败！");
     });
 };
-
-const loginCallback = () => {
-  init();
-  // 刷新组件
-  routerViewKey.value += 1;
-};
 </script>
 
 <style lang="stylus" scoped>