feat: 阿里图标库更新，菜单栏整体优化完成

index.html

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-12 14:35:28
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-16 14:36:28
+ * @LastEditTime: 2024-01-17 10:21:07
  * @FilePath: \General-AI-Platform-Web-Client\index.html
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -18,10 +18,10 @@
     />
     <title>pure-admin-thin</title>
     <link rel="icon" href="/favicon.ico" />
-    <!-- update 2024-01-16 14:44 -->
+    <!-- update 2024-01-17 10:21 -->
     <link
       rel="stylesheet"
-      href="//at.alicdn.com/t/c/font_4406593_7ayrx5x0q77.css"
+      href="//at.alicdn.com/t/c/font_4412653_ngfc2cgeuc.css"
     />
     <script>
       window.process = {};

locales/en.yaml

@@ -23,7 +23,10 @@ buttons:
   hscontentFullScreen: Content FullScreen
   hscontentExitFullScreen: Content ExitFullScreen
 menus:
-  hshome: Home
+  hshome: Workbench
+  hsdevice: Device
+  hsserver: Server
+  hstest: Test
   hslogin: Login
   hsabnormal: Abnormal Page
   hsfourZeroFour: "404"

locales/zh-CN.yaml

@@ -23,7 +23,10 @@ buttons:
   hscontentFullScreen: 内容区全屏
   hscontentExitFullScreen: 内容区退出全屏
 menus:
-  hshome: 首页
+  hshome: 工作台
+  hsdevice: 设备列表
+  hsserver: 服务器
+  hstest: 测试
   hslogin: 登录
   hsabnormal: 异常页面
   hsfourZeroFour: "404"

mock/asyncRoutes.ts

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-12 14:35:28
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-15 13:38:56
+ * @LastEditTime: 2024-01-17 11:09:58
  * @FilePath: \general-work-web\General-AI-Platform-Web-Client\mock\asyncRoutes.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -22,7 +22,7 @@ const demoRouter = {
   name: "DemoLeftTree",
   meta: {
     title: "测试",
-    icon: "lollipop",
+    icon: "",
     roles: ["admin", "common"],
     rank: 101
   }

src/components/CustomTree/src/collapseTree.tsx

@@ -115,29 +115,26 @@ export default defineComponent({
                       <div
                         class={["arrow", vFirst?.expended ? "activeUp" : ""]}
                       ></div>
-                      <i class="iconfont icon-fuwuqi root_tree_icon"></i>
+                      <i class="iconfont icon-fushebeizu root_tree_icon"></i>
                       <p> {vFirst.name}</p>
                     </div>
                   </div>
-                  <transition name="collapseTree_child_box">
                   <div class="box" v-show={vFirst?.expended}>
-                      <ul
+                    {Array.isArray(vFirst.childList) &&
-                        class="child_info_box"
+                      vFirst.childList.length && (
-                        v-if={
+                        <ul class="child_info_box">
-                          Array.isArray(vFirst.childList) &&
-                          vFirst.childList.length
-                        }
-                      >
                           {vFirst.childList.map((item, index) => {
                             return (
                               <li key={index}>
-                              <CollapseTreeItem info={item}></CollapseTreeItem>
+                                <CollapseTreeItem
+                                  info={item}
+                                ></CollapseTreeItem>
                               </li>
                             );
                           })}
                         </ul>
+                      )}
                   </div>
-                  </transition>
                 </li>
               );
             })}

src/components/CustomTree/src/collapseTreeItem.tsx

@@ -1,5 +1,6 @@
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, nextTick, onBeforeUnmount, ref } from "vue";
 import "./collapseTreeStyle.scss";
+import { emitter } from "@/utils/mitt";
 
 export default defineComponent({
   name: "CollapseTreeItem",
@@ -11,28 +12,55 @@ export default defineComponent({
   },
 
   setup(props) {
+    const currentTreeNodeId = ref(""); // 树节点id
     const nodeLatestInfo = computed(() => {
       //实时的树节点数据
       return { ...props.info };
     });
 
+    // 选择树节点
+    function selectTreeNode() {
+      emitter.emit(
+        "changCollapseTreeNodeId",
+        nodeLatestInfo.value.id as unknown as string
+      );
+      console.log("selectTreeNode", nodeLatestInfo.value.id);
+    }
+
+    nextTick(() => {
+      emitter.on("changCollapseTreeNodeId", data => {
+        currentTreeNodeId.value = data;
+      });
+    });
+
+    onBeforeUnmount(() => {
+      // 解绑`changCollapseTreeNodeId`公共事件，防止多次触发
+      emitter.off("changCollapseTreeNodeId");
+    });
+
     return () => {
       return (
         <div class={["collapseTreeItem_wrap"]}>
-          <div class={["collapseTreeItem_info flex"]}>
+          <div
+            class={[
+              "collapseTreeItem_info flex",
+              currentTreeNodeId.value === nodeLatestInfo.value.id
+                ? "text-web-font0"
+                : "text-web-font2"
+            ]}
+            onClick={() => {
+              selectTreeNode();
+            }}
+          >
             <span class={["collapseTreeItem_line"]}></span>
             <div class={["collapseTreeItem_main_info"]}>
-              <i class="iconfont icon-fuwuqi tree_item_icon"></i>
+              <i class="iconfont icon-zishebeizu tree_item_icon"></i>
               <span>{nodeLatestInfo.value.name}</span>
             </div>
           </div>
-          <ul
+          {Array.isArray(nodeLatestInfo.value?.childList) &&
-            class="collapseTreeItem_child_info_box"
+            nodeLatestInfo.value.childList.length && (
-            v-if={
+              <ul class="collapseTreeItem_child_info_box">
-              Array.isArray(nodeLatestInfo.value?.childList) &&
-              nodeLatestInfo.value.childList.length
-            }
-          >
                 {nodeLatestInfo.value.childList?.map((item, index) => {
                   return (
                     <li key={index}>
@@ -41,6 +69,7 @@ export default defineComponent({
                   );
                 })}
               </ul>
+            )}
         </div>
       );
     };

src/components/CustomTree/src/collapseTreeStyle.scss

@@ -41,27 +41,19 @@
 }
 
 .collapseTreeItem_wrap {
-  // border-radius: 2px;
   padding-top: 0;
-
-  // padding-left: 10px;
-  // margin-top: 8px;
   margin-left: 16px;
   border-left: 2px solid $--theme-color;
 
   .collapseTreeItem_info {
     position: relative;
-    color: $--web-font2;
 
     .tree_item_icon {
       padding: 0 8px;
     }
 
     .collapseTreeItem_line {
-      // background-color: red;
       display: inline-block;
-
-      // margin-bottom: -10px;
       width: 16px;
       height: 16px;
       margin-top: -1px;
@@ -73,15 +65,7 @@
     }
 
     .collapseTreeItem_main_info {
-      padding: 2px 5px 8px;
+      padding: 2px 5px 8px 0;
-      padding-left: 10px;
-
-      // padding-top: 16px;
-      // position: absolute;
-      // left: -2px;
-      // top: 12px;
     }
-
-    // .icon-fuwuqi {}
   }
 }

src/layout/components/navbar.vue

@@ -8,14 +8,14 @@ import topCollapse from "./sidebar/topCollapse.vue";
 import { useTranslationLang } from "../hooks/useTranslationLang";
 import globalization from "@/assets/svg/globalization.svg?component";
 import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
-import Setting from "@iconify-icons/ri/settings-3-line";
+// import Setting from "@iconify-icons/ri/settings-3-line";
 import Check from "@iconify-icons/ep/check";
 
 const {
   layout,
   device,
   logout,
-  onPanel,
+  // onPanel,
   pureApp,
   username,
   userAvatar,
@@ -98,13 +98,13 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <span
+      <!-- <span
         class="set-icon navbar-bg-hover"
         :title="t('buttons.hssystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline :icon="Setting" />
-      </span>
+      </span> -->
     </div>
   </div>
 </template>
@@ -135,7 +135,8 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       align-items: center;
       justify-content: space-around;
       height: 48px;
-      padding: 10px;
+
+      /* padding: 10px; */
       color: #000000d9;
       cursor: pointer;
 
@@ -153,7 +154,6 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
 
   .breadcrumb-container {
     float: left;
-    margin-left: 16px;
   }
 }
 

src/layout/components/notice/index.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-12 14:35:28
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-17 10:02:25
+ * @FilePath: \General-AI-Platform-Web-Client\src\layout\components\notice\index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <script setup lang="ts">
 import { ref } from "vue";
 import { noticesData } from "./data";
@@ -13,7 +21,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
 
 <template>
   <el-dropdown trigger="click" placement="bottom-end">
-    <span class="dropdown-badge navbar-bg-hover select-none">
+    <span class="select-none dropdown-badge navbar-bg-hover">
       <el-badge :value="noticesNum" :max="99">
         <span class="header-notice-icon">
           <IconifyIconOffline :icon="Bell" />
@@ -59,7 +67,8 @@ notices.value.map(v => (noticesNum.value += v.list.length));
   align-items: center;
   justify-content: center;
   width: 40px;
-  height: 48px;
+
+  /* height: 48px; */
   margin-right: 10px;
   cursor: pointer;
 

src/layout/components/search/index.vue

@@ -11,7 +11,7 @@ function handleSearch() {
 
 <template>
   <div
-    class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
+    class="search-container w-[40px] flex-c cursor-pointer navbar-bg-hover"
     @click="handleSearch"
   >
     <IconifyIconOffline :icon="Search" />

src/layout/components/sidebar/breadCrumb.vue

@@ -96,7 +96,9 @@ watch(
         v-for="item in levelList"
         :key="item.path"
       >
-        {{ transformI18n(item.meta.title) }}
+        <span :class="['text-web-font1 text-[14px] font-bold']">{{
+          transformI18n(item.meta.title)
+        }}</span>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>

src/layout/components/sidebar/mixNav.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-12 14:35:28
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-17 10:03:05
+ * @FilePath: \General-AI-Platform-Web-Client\src\layout\components\sidebar\mixNav.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <script setup lang="ts">
 import extraIcon from "./extraIcon.vue";
 import Search from "../search/index.vue";
@@ -102,7 +110,7 @@ watch(
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization
-          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
+          class="navbar-bg-hover w-[40px] p-[11px] cursor-pointer outline-none"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
@@ -131,7 +139,7 @@ watch(
       </el-dropdown>
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
-        <span class="el-dropdown-link navbar-bg-hover select-none">
+        <span class="select-none el-dropdown-link navbar-bg-hover">
           <img :src="userAvatar" :style="avatarsStyle" />
           <p v-if="username" class="dark:text-white">{{ username }}</p>
         </span>

src/layout/components/sidebar/vertical.vue

@@ -2,6 +2,7 @@
 import Logo from "./logo.vue";
 import { useRoute, useRouter } from "vue-router";
 import { emitter } from "@/utils/mitt";
+import { transformI18n } from "@/plugins/i18n";
 // import SidebarItem from "./sidebarItem.vue";
 // import leftCollapse from "./leftCollapse.vue";
 import { useNav } from "@/layout/hooks/useNav";
@@ -43,7 +44,7 @@ const defaultActive = computed(() =>
   !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
 );
 
-const activeName = ref(route.name || "Home");
+const activeName = ref(route.name || "Workbench");
 
 function getSubMenuData() {
   let path = "";
@@ -131,11 +132,9 @@ onBeforeUnmount(() => {
           @click="changeRoute(routes)"
         >
           <div class="flex justify-center">
-            <!-- TODO 使用真实图标 -->
+            <i :class="['iconfont', routes.meta?.icon || 'icon-morencaidan']" />
-            <i style="width: 24px; height: 24px" class="iconfont icon-shouye" />
-            <!-- <img style="width: 24px;" src="/logo.svg" alt=""> -->
           </div>
-          <p>{{ routes.meta.title }}</p>
+          <p>{{ transformI18n(routes.meta.title) }}</p>
         </li>
       </ul>
     </el-scrollbar>
@@ -143,6 +142,8 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" scoped>
+$--noneSelectedColor: rgb(255 255 255 / 80%);
+
 :deep(.el-loading-mask) {
   opacity: 0.45;
 }
@@ -157,31 +158,39 @@ onBeforeUnmount(() => {
   border-radius: 12px;
 
   .menu_box {
-    color: #fff;
+    font-size: 14px;
+    color: $--noneSelectedColor;
     text-align: center;
 
-    /* background: red; */
-
-    /* z-index: 10001; */
     & > li {
-      /* height: 60px; */
-
-      /* background-color: red; */
       padding-top: 16px;
+      cursor: pointer;
 
       & > p {
         padding-top: 6px;
       }
 
+      .iconfont {
+        width: 32px;
+        height: 32px;
+        font-size: 32px;
+        line-height: 32px;
+        border-radius: 8px;
+      }
+
       &.active {
+        color: #fff;
+
         /* inset: 0 8px;
         margin: 4px 0; */
-        clear: both;
+
+        /* clear: both;
         content: "";
         background: var(--el-color-primary) !important;
-        border-radius: 3px;
+        border-radius: 3px; */
-
+        .iconfont {
-        /* background-color: #155bd4; */
+          background-color: rgb(255 255 255 / 20%);
+        }
       }
     }
   }

src/router/modules/device.ts

@@ -1,8 +1,10 @@
+import { $t } from "@/plugins/i18n";
+
 export default {
   path: "/device",
   meta: {
-    title: "设备列表",
+    title: $t("menus.hsdevice"),
-    icon: "homeFilled",
+    icon: "icon-shebeiliebiao-weixuan",
     // showLink: false,
     rank: 2,
     roles: ["admin", "common"]

src/router/modules/home.ts

@@ -1,26 +0,0 @@
-// import { $t } from "@/plugins/i18n";
-const { VITE_HIDE_HOME } = import.meta.env;
-const Layout = () => import("@/layout/index.vue");
-
-export default {
-  path: "/",
-  name: "Home",
-  component: Layout,
-  redirect: "/welcome",
-  meta: {
-    icon: "homeFilled",
-    title: "首页",
-    rank: 0
-  },
-  children: [
-    {
-      path: "/welcome",
-      name: "Welcome",
-      component: () => import("@/views/welcome/index.vue"),
-      meta: {
-        title: "首页",
-        showLink: VITE_HIDE_HOME === "true" ? false : true
-      }
-    }
-  ]
-} as RouteConfigsTable;

src/router/modules/server.ts

@@ -1,8 +1,18 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-16 13:25:01
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-17 11:02:23
+ * @FilePath: \General-AI-Platform-Web-Client\src\router\modules\server.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { $t } from "@/plugins/i18n";
+
 export default {
   path: "/server",
   meta: {
-    title: "服务器",
+    title: $t("menus.hsserver"),
-    icon: "homeFilled",
+    icon: "icon-fuwuqi-weixuan",
     // showLink: false,
     rank: 3,
     roles: ["admin", "common"]

src/router/modules/workbench.ts

@@ -1,8 +1,15 @@
+import { $t } from "@/plugins/i18n";
+
+const Layout = () => import("@/layout/index.vue");
+
 export default {
-  path: "/workbench",
+  path: "/",
+  name: "Workbench",
+  component: Layout,
+  redirect: "/workbench",
   meta: {
-    title: "工作台",
+    title: $t("menus.hshome"),
-    icon: "homeFilled",
+    icon: "",
     // showLink: false,
     rank: 1
   },

src/router/utils.ts

@@ -33,7 +33,7 @@ function handRank(routeInfo: any) {
   const { name, path, parentId, meta } = routeInfo;
   return isAllEmpty(parentId)
     ? isAllEmpty(meta?.rank) ||
-      (meta?.rank === 0 && name !== "Home" && path !== "/")
+      (meta?.rank === 0 && name !== "Workbench" && path !== "/")
       ? true
       : false
     : false;

src/style/sidebar.scss

@@ -34,7 +34,8 @@
     align-items: center;
     justify-content: center;
     width: 40px;
-    height: 48px;
+
+    // height: 48px;
     cursor: pointer;
   }
 
@@ -397,7 +398,8 @@
     align-items: center;
     justify-content: space-around;
     width: 100%;
-    height: 48px;
+
+    // height: 48px;
     background: $menuBg;
 
     .horizontal-header-left {
@@ -459,13 +461,14 @@
       }
 
       .dropdown-badge {
-        height: 48px;
+        // height: 48px;
         color: $subMenuActiveText;
       }
 
       .globalization {
         width: 40px;
-        height: 48px;
+
+        // height: 48px;
         padding: 11px;
         color: $subMenuActiveText;
         cursor: pointer;
@@ -476,7 +479,8 @@
         display: flex;
         align-items: center;
         justify-content: space-around;
-        height: 48px;
+
+        // height: 48px;
         padding: 10px;
         color: $subMenuActiveText;
         cursor: pointer;
@@ -512,8 +516,8 @@
 
     .submenu-title-noDropdown,
     .el-sub-menu__title {
-      height: 48px;
+      // height: 48px;
-      line-height: 48px;
+      // line-height: 48px;
       background: $menuBg;
 
       svg {
@@ -640,68 +644,3 @@ body[layout="vertical"] {
     }
   }
 }
-
-body[layout="horizontal"] {
-  $sideBarWidth: 0;
-
-  @include merge-style($sideBarWidth);
-
-  .fixed-header,
-  .main-container {
-    transition: none !important;
-  }
-
-  .fixed-header {
-    width: 100%;
-  }
-}
-
-body[layout="mix"] {
-  $sideBarWidth: 210px;
-
-  @include merge-style($sideBarWidth);
-
-  .el-menu--collapse {
-    width: 54px;
-  }
-
-  .el-menu {
-    --el-menu-hover-bg-color: transparent !important;
-  }
-
-  .hideSidebar {
-    .fixed-header {
-      width: calc(100% - 54px);
-      transition: width var(--pure-transition-duration);
-    }
-
-    .sidebar-container {
-      width: 54px !important;
-      transition: width var(--pure-transition-duration);
-
-      .is-active.submenu-title-noDropdown.outer-most {
-        background: transparent !important;
-      }
-    }
-
-    .main-container {
-      margin-left: 54px;
-    }
-
-    /* 菜单折叠 */
-    .el-menu--collapse {
-      .el-sub-menu {
-        & > .el-sub-menu__title {
-          padding: 0;
-
-          & > span {
-            width: 100%;
-            height: 100%;
-            text-align: center;
-            visibility: visible;
-          }
-        }
-      }
-    }
-  }
-}

src/style/vars.scss

@@ -1,4 +1,29 @@
+$--web-font0: #000;
 $--web-font1: #333;
 $--web-font2: #666;
 $--web-font3: #999;
 $--theme-color: #154ddd;
+
+.text-web-font0 {
+  color: $--web-font0;
+}
+
+.text-web-font1 {
+  color: $--web-font1;
+}
+
+.text-web-font2 {
+  color: $--web-font2;
+}
+
+.text-web-font3 {
+  color: $--web-font3;
+}
+
+.theme-color {
+  color: $--theme-color;
+}
+
+.theme-bg-color {
+  background-color: $--theme-color;
+}

src/utils/mitt.ts

@@ -8,6 +8,7 @@ type Events = {
   tagViewsShowModel: string;
   logoChange: boolean;
   changLayoutRoute: string;
+  changCollapseTreeNodeId: string;
 };
 
 export const emitter: Emitter<Events> = mitt<Events>();

src/views/workbench/components/SwiperShow.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-12 15:35:09
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-12 17:45:12
+ * @LastEditTime: 2024-01-17 11:31:24
  * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\views\workbench\components\SwiperShow.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -62,7 +62,7 @@ const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay];
     @swiper="onSwiper"
     @slideChange="onSlideChange"
   >
-    <swiper-slide v-for="(v, k) in swiperList" :key="k">
+    <swiper-slide v-for="(v, k) in swiperList" :key="k + ''">
       <img :src="v.url" alt="" />
     </swiper-slide>
   </swiper>