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

1 year ago · 8313ec2ae0
parent 509f8f0e12
commit 8313ec2ae0
22 changed files with 200 additions and 198 deletions
--- a/index.html
+++ b/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 = {};
--- a/locales/en.yaml
+++ b/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"
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@ -23,7 +23,10 @@ buttons:
  hscontentFullScreen: 内容区全屏
  hscontentExitFullScreen: 内容区退出全屏
 menus:
-  hshome: 首页
+  hshome: 工作台
+  hsdevice: 设备列表
+  hsserver: 服务器
+  hstest: 测试
  hslogin: 登录
  hsabnormal: 异常页面
  hsfourZeroFour: "404"
--- a/mock/asyncRoutes.ts
+++ b/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
  }
--- a/src/components/CustomTree/src/collapseTree.tsx
+++ b/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
-                        class="child_info_box"
-                        v-if={
-                          Array.isArray(vFirst.childList) &&
-                          vFirst.childList.length
-                        }
-                      >
-                        {vFirst.childList.map((item, index) => {
-                          return (
-                            <li key={index}>
-                              <CollapseTreeItem info={item}></CollapseTreeItem>
-                            </li>
-                          );
-                        })}
-                      </ul>
-                    </div>
-                  </transition>
+                  <div class="box" v-show={vFirst?.expended}>
+                    {Array.isArray(vFirst.childList) &&
+                      vFirst.childList.length && (
+                        <ul class="child_info_box">
+                          {vFirst.childList.map((item, index) => {
+                            return (
+                              <li key={index}>
+                                <CollapseTreeItem
+                                  info={item}
+                                ></CollapseTreeItem>
+                              </li>
+                            );
+                          })}
+                        </ul>
+                      )}
+                  </div>
                </li>
              );
            })}
--- a/src/components/CustomTree/src/collapseTreeItem.tsx
+++ b/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,36 +12,64 @@ 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
-            class="collapseTreeItem_child_info_box"
-            v-if={
-              Array.isArray(nodeLatestInfo.value?.childList) &&
-              nodeLatestInfo.value.childList.length
-            }
-          >
-            {nodeLatestInfo.value.childList?.map((item, index) => {
-              return (
-                <li key={index}>
-                  <CollapseTreeItem info={item}></CollapseTreeItem>
-                </li>
-              );
-            })}
-          </ul>
+          {Array.isArray(nodeLatestInfo.value?.childList) &&
+            nodeLatestInfo.value.childList.length && (
+              <ul class="collapseTreeItem_child_info_box">
+                {nodeLatestInfo.value.childList?.map((item, index) => {
+                  return (
+                    <li key={index}>
+                      <CollapseTreeItem info={item}></CollapseTreeItem>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
        </div>
      );
    };
--- a/src/components/CustomTree/src/collapseTreeStyle.scss
+++ b/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-left: 10px;
-
-      // padding-top: 16px;
-      // position: absolute;
-      // left: -2px;
-      // top: 12px;
+      padding: 2px 5px 8px 0;
    }
-
-    // .icon-fuwuqi {}
  }
 }
--- a/src/layout/components/navbar.vue
+++ b/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;
  }
 }

--- a/src/layout/components/notice/index.vue
+++ b/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;

--- a/src/layout/components/search/index.vue
+++ b/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" />
--- a/src/layout/components/sidebar/breadCrumb.vue
+++ b/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>
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/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>
--- a/src/layout/components/sidebar/vertical.vue
+++ b/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 style="width: 24px; height: 24px" class="iconfont icon-shouye" />
-            <!-- <img style="width: 24px;" src="/logo.svg" alt=""> -->
+            <i :class="['iconfont', routes.meta?.icon || 'icon-morencaidan']" />
          </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;
-
-        /* background-color: #155bd4; */
+        border-radius: 3px; */
+        .iconfont {
+          background-color: rgb(255 255 255 / 20%);
+        }
      }
    }
  }
--- a/src/router/modules/device.ts
+++ b/src/router/modules/device.ts
@ -1,8 +1,10 @@
+import { $t } from "@/plugins/i18n";
+
 export default {
  path: "/device",
  meta: {
-    title: "设备列表",
-    icon: "homeFilled",
+    title: $t("menus.hsdevice"),
+    icon: "icon-shebeiliebiao-weixuan",
    // showLink: false,
    rank: 2,
    roles: ["admin", "common"]
--- a/src/router/modules/home.ts
+++ b/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;
--- a/src/router/modules/server.ts
+++ b/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: "服务器",
-    icon: "homeFilled",
+    title: $t("menus.hsserver"),
+    icon: "icon-fuwuqi-weixuan",
    // showLink: false,
    rank: 3,
    roles: ["admin", "common"]
--- a/src/router/modules/workbench.ts
+++ b/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: "工作台",
-    icon: "homeFilled",
+    title: $t("menus.hshome"),
+    icon: "",
    // showLink: false,
    rank: 1
  },
--- a/src/router/utils.ts
+++ b/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;
--- a/src/style/sidebar.scss
+++ b/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;
-      line-height: 48px;
+      // 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;
-          }
-        }
-      }
-    }
-  }
-}
--- a/src/style/vars.scss
+++ b/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;
+}
--- a/src/utils/mitt.ts
+++ b/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>();
--- a/src/views/workbench/components/SwiperShow.vue
+++ b/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>