feat: 动效引入测试，菜单整体调整

1 year ago · d295a5124d
parent 2235582f26
commit d295a5124d
16 changed files with 1300 additions and 158 deletions
--- a/index.html
+++ b/index.html
@ -10,6 +10,10 @@
    />
    <title>pure-admin-thin</title>
    <link rel="icon" href="/favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="//at.alicdn.com/t/c/font_4406593_6x8qubg8wo.css"
+    />
    <script>
      window.process = {};
    </script>
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@ -2,46 +2,31 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-01-12 14:35:28
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-12 17:25:12
+ * @LastEditTime: 2024-01-15 13:38:56
 * @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
 */
 // 模拟后端动态生成路由
 import { MockMethod } from "vite-plugin-mock";
+// import { useI18n } from "vue-i18n";

+// const { t } = useI18n();
 /**
 * roles：页面级别权限，这里模拟二种 "admin"、"common"
 * admin：管理员角色
 * common：普通角色
 */

-// const permissionRouter = {
-//   path: "/permission",
-//   meta: {
-//     title: "menus.permission",
-//     icon: "lollipop",
-//     rank: 10
-//   },
-//   children: [
-//     {
-//       path: "/permission/page/index",
-//       name: "PermissionPage",
-//       meta: {
-//         title: "menus.permissionPage",
-//         roles: ["admin", "common"]
-//       }
-//     },
-//     {
-//       path: "/permission/button/index",
-//       name: "PermissionButton",
-//       meta: {
-//         title: "menus.permissionButton",
-//         roles: ["admin", "common"],
-//         auths: ["btn_add", "btn_edit", "btn_delete"]
-//       }
-//     }
-//   ]
-// };
+const demoRouter = {
+  path: "/demo/leftTree",
+  name: "DemoLeftTree",
+  meta: {
+    title: "测试",
+    icon: "lollipop",
+    roles: ["admin", "common"],
+    rank: 101
+  }
+};

 export default [
  {
@ -50,7 +35,7 @@ export default [
    response: () => {
      return {
        success: true,
-        data: []
+        data: [demoRouter]
      };
    }
  }
--- a/package.json
+++ b/package.json
@ -41,6 +41,7 @@
    "echarts-gl": "^2.0.9",
    "element-plus": "2.3.6",
    "js-cookie": "^3.0.5",
+    "lottie-web": "^5.12.2",
    "mitt": "^3.0.0",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -41,6 +41,9 @@ dependencies:
  js-cookie:
    specifier: ^3.0.5
    version: 3.0.5
+  lottie-web:
+    specifier: ^5.12.2
+    version: 5.12.2
  mitt:
    specifier: ^3.0.0
    version: 3.0.0
@ -5524,6 +5527,7 @@ packages:
      {
        integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
      }
+    requiresBuild: true

  /jsonfile@6.1.0:
    resolution:
@ -5808,6 +5812,14 @@ packages:
      wrap-ansi: 6.2.0
    dev: true

+  /lottie-web@5.12.2:
+    resolution:
+      {
+        integrity: sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==,
+        tarball: https://registry.npmmirror.com/lottie-web/-/lottie-web-5.12.2.tgz
+      }
+    dev: false
+
  /lru-cache@5.1.1:
    resolution:
      {
@ -6696,6 +6708,7 @@ packages:
      {
        integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==
      }
+    requiresBuild: true
    dependencies:
      jsonc-parser: 3.2.0
      mlly: 1.4.0
@ -9155,6 +9168,7 @@ packages:
      {
        integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==
      }
+    requiresBuild: true

  /unctx@2.3.1:
    resolution:
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/assets/animate/device/01.json
+++ b/src/assets/animate/device/01.json
--- a/src/assets/svg/menu/welcome.svg
+++ b/src/assets/svg/menu/welcome.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"/></svg>
--- a/src/assets/svg/menu/workbench.svg
+++ b/src/assets/svg/menu/workbench.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"/></svg>
--- a/src/components/CustomTree/index.ts
+++ b/src/components/CustomTree/index.ts
@ -0,0 +1,5 @@
+import collapseTree from "./src/collapseTree";
+
+const CollapseTree = collapseTree;
+
+export { CollapseTree };
--- a/src/components/CustomTree/src/collapseTree.tsx
+++ b/src/components/CustomTree/src/collapseTree.tsx
@ -0,0 +1,27 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-15 14:34:20
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-15 15:21:52
+ * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\components\CustomTree\src\collapseTree.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  name: "CollapseTree",
+  props: {
+    value: {
+      type: undefined,
+      default: []
+    }
+  },
+  setup() {
+    const count = ref<number>(1);
+
+    return () => {
+      return <div>123{count}</div>;
+    };
+  }
+});
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@ -1,27 +1,27 @@
 <script setup lang="ts">
-import { useGlobal } from "@pureadmin/utils";
-import backTop from "@/assets/svg/back_top.svg?component";
-import { h, computed, Transition, defineComponent } from "vue";
-import { usePermissionStoreHook } from "@/store/modules/permission";
+// import { useGlobal } from "@pureadmin/utils";
+// import backTop from "@/assets/svg/back_top.svg?component";
+// import { h, computed, Transition, defineComponent } from "vue";
+// import { usePermissionStoreHook } from "@/store/modules/permission";

 const props = defineProps({
  fixedHeader: Boolean
 });

-const {
-  // $storage,
-  $config
-} = useGlobal<GlobalPropertiesApi>();
+// const {
+//   // $storage,
+//   $config
+// } = useGlobal<GlobalPropertiesApi>();

-const keepAlive = computed(() => {
-  return $config?.KeepAlive;
-});
+// const keepAlive = computed(() => {
+//   return $config?.KeepAlive;
+// });

-const transitions = computed(() => {
-  return route => {
-    return route.meta.transition;
-  };
-});
+// const transitions = computed(() => {
+//   return route => {
+//     return route.meta.transition;
+//   };
+// });

 // const hideTabs = computed(() => {
 //   return $storage?.configure.hideTabs;
@ -41,92 +41,48 @@ const transitions = computed(() => {
 //   ];
 // });

-const transitionMain = defineComponent({
-  render() {
-    return h(
-      Transition,
-      {
-        name:
-          transitions.value(this.route) &&
-          this.route.meta.transition.enterTransition
-            ? "pure-classes-transition"
-            : (transitions.value(this.route) &&
-                this.route.meta.transition.name) ||
-              "fade-transform",
-        enterActiveClass:
-          transitions.value(this.route) &&
-          `animate__animated ${this.route.meta.transition.enterTransition}`,
-        leaveActiveClass:
-          transitions.value(this.route) &&
-          `animate__animated ${this.route.meta.transition.leaveTransition}`,
-        mode: "out-in",
-        appear: true
-      },
-      {
-        default: () => [this.$slots.default()]
-      }
-    );
-  },
-  props: {
-    route: {
-      type: undefined,
-      required: true
-    }
-  }
-});
+// const transitionMain = defineComponent({
+//   render() {
+//     return h(
+//       Transition,
+//       {
+//         name:
+//           transitions.value(this.route) &&
+//           this.route.meta.transition.enterTransition
+//             ? "pure-classes-transition"
+//             : (transitions.value(this.route) &&
+//                 this.route.meta.transition.name) ||
+//               "fade-transform",
+//         enterActiveClass:
+//           transitions.value(this.route) &&
+//           `animate__animated ${this.route.meta.transition.enterTransition}`,
+//         leaveActiveClass:
+//           transitions.value(this.route) &&
+//           `animate__animated ${this.route.meta.transition.leaveTransition}`,
+//         mode: "out-in",
+//         appear: true
+//       },
+//       {
+//         default: () => [this.$slots.default()]
+//       }
+//     );
+//   },
+//   props: {
+//     route: {
+//       type: undefined,
+//       required: true
+//     }
+//   }
+// });
 </script>

 <template>
  <section
    :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
  >
-    <router-view>
-      <template #default="{ Component, route }">
-        <el-scrollbar v-if="props.fixedHeader">
-          <el-backtop title="回到顶部" target=".app-main .el-scrollbar__wrap">
-            <backTop />
-          </el-backtop>
-          <transitionMain :route="route" style="margin: 0">
-            <keep-alive
-              v-if="keepAlive"
-              :include="usePermissionStoreHook().cachePageList"
-            >
-              <component
-                :is="Component"
-                :key="route.fullPath"
-                class="main-content"
-              />
-            </keep-alive>
-            <component
-              v-else
-              :is="Component"
-              :key="route.fullPath"
-              class="main-content"
-            />
-          </transitionMain>
-        </el-scrollbar>
-        <div v-else>
-          <transitionMain :route="route">
-            <keep-alive
-              v-if="keepAlive"
-              :include="usePermissionStoreHook().cachePageList"
-            >
-              <component
-                :is="Component"
-                :key="route.fullPath"
-                class="main-content"
-              />
-            </keep-alive>
-            <component
-              v-else
-              :is="Component"
-              :key="route.fullPath"
-              class="main-content"
-            />
-          </transitionMain>
-        </div>
-      </template>
-    </router-view>
+    <!-- TODO 使用keepAlive，解决路由切换页面不展示问题 -->
+
+    <router-view />
  </section>
 </template>

--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@ -1,9 +1,8 @@
-<!-- TODO_welcome 左侧菜单栏 -->
 <script setup lang="ts">
 import Logo from "./logo.vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { emitter } from "@/utils/mitt";
-import SidebarItem from "./sidebarItem.vue";
+// import SidebarItem from "./sidebarItem.vue";
 // import leftCollapse from "./leftCollapse.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { responsiveStorageNameSpace } from "@/config";
@ -13,6 +12,7 @@ import { usePermissionStoreHook } from "@/store/modules/permission";
 import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";

 const route = useRoute();
+const router = useRouter();
 const showLogo = ref(
  storageLocal().getItem<StorageConfigs>(
    `${responsiveStorageNameSpace()}configure`
@ -43,6 +43,8 @@ const defaultActive = computed(() =>
  !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
 );

+const activeName = ref(route.name || "Home");
+
 function getSubMenuData() {
  let path = "";
  path = defaultActive.value;
@ -61,6 +63,17 @@ function getSubMenuData() {
  subMenuData.value = parenetRoute?.children;
 }

+// 改变路由
+function changeRoute(routes) {
+  console.log("changeRoute_routes", routes);
+  router.push({ path: routes.path });
+  activeName.value = routes.name;
+}
+
+// const fetchMenuIcon = routes => {
+//   return workbenchIcon;
+// };
+
 watch(
  () => [route.path, usePermissionStoreHook().wholeMenus],
  () => {
@ -91,7 +104,7 @@ onBeforeUnmount(() => {
      wrap-class="scrollbar-wrapper"
      :class="[device === 'mobile' ? 'mobile' : 'pc']"
    >
-      <el-menu
+      <!-- <el-menu
        router
        unique-opened
        mode="vertical"
@ -107,19 +120,25 @@ onBeforeUnmount(() => {
          :base-path="routes.path"
          class="select-none outer-most"
        />
-      </el-menu>
+      </el-menu> -->

-      <!-- <ul class="menu_box">
-        <li v-for="routes in menuData"  :key="routes.path" >
-          <p>{{routes.meta.title}}</p>
+      <ul class="menu_box">
+        <li
+          class="text-center"
+          :class="[activeName === routes.name ? 'active' : '']"
+          v-for="routes in menuData"
+          :key="routes.path"
+          @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=""> -->
+          </div>
+          <p>{{ routes.meta.title }}</p>
        </li>
-      </ul> -->
+      </ul>
    </el-scrollbar>
-    <!-- <leftCollapse
-      v-if="device !== 'mobile'"
-      :is-active="pureApp.sidebar.opened"
-      @toggleClick="toggleSideBar"
-    /> -->
  </div>
 </template>

@ -145,7 +164,25 @@ onBeforeUnmount(() => {

    /* z-index: 10001; */
    & > li {
-      background-color: red;
+      /* height: 60px; */
+
+      /* background-color: red; */
+      padding-top: 16px;
+
+      & > p {
+        padding-top: 6px;
+      }
+
+      &.active {
+        /* inset: 0 8px;
+        margin: 4px 0; */
+        clear: both;
+        content: "";
+        background: var(--el-color-primary) !important;
+        border-radius: 3px;
+
+        /* background-color: #155bd4; */
+      }
    }
  }
 }
--- a/src/router/modules/device.ts
+++ b/src/router/modules/device.ts
@ -4,17 +4,9 @@ export default {
    title: "设备列表",
    icon: "homeFilled",
    // showLink: false,
-    rank: 2
+    rank: 2,
+    roles: ["admin", "common"]
  },
-  children: [
-    {
-      path: "/device",
-      name: "DeviceList",
-      component: () => import("@/views/device/index.vue"),
-      meta: {
-        title: "设备列表",
-        roles: ["admin", "common"]
-      }
-    }
-  ]
+  component: () => import("@/views/device/index.vue"),
+  name: "DeviceList"
 } as RouteConfigsTable;
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@ -1,5 +1,8 @@
 /* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */
 // $bodyMargin: 24px;
+.el-scrollbar {
+  height: auto !important;
+}

@mixin merge-style($sideBarWidth) {
  $menuActiveText: #7a80b4;
@ -102,18 +105,14 @@
      right: 0;
    }

-    .el-scrollbar {
-      height: calc(100% - 44px);
-    }
-
    &.has-logo {
      .el-scrollbar.pc {
        /* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
-        height: calc(100% - 92px);
+        // height: calc(100% - 92px);
      }

      .el-scrollbar.mobile {
-        height: 100%;
+        // height: 100%;
      }
    }

--- a/src/views/demo/animateDevice.vue
+++ b/src/views/demo/animateDevice.vue
@ -0,0 +1,38 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-15 11:06:34
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-15 11:07:03
+ * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\views\demo\animateDevice.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<script setup lang="ts">
+import { ref, onMounted } from "vue"; //引入相关api
+import lottie from "lottie-web"; //引入动效库
+import json01 from "@/assets/animate/device/01.json"; //引入下载的动效json
+
+defineOptions({
+  name: "animateDeviceDemo"
+});
+
+const animation1 = ref(null); //获取dom
+function initAnimate() {
+  console.log(lottie, "lottie");
+  lottie.loadAnimation({
+    container: animation1.value, //选择渲染dom
+    renderer: "svg", //渲染格式
+    loop: true, //循环播放
+    autoplay: true, //是否i自动播放,
+    animationData: json01 //渲染动效json
+  });
+}
+onMounted(() => {
+  initAnimate();
+});
+</script>
+
+<template>
+  <div>
+    <div ref="animation1" />
+  </div>
+</template>
--- a/src/views/demo/leftTree.vue
+++ b/src/views/demo/leftTree.vue
@ -0,0 +1,20 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-15 11:22:10
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-15 15:23:07
+ * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\views\demo\leftTree\index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<script setup lang="ts">
+import { CollapseTree } from "@/components/CustomTree";
+defineOptions({
+  name: "DemoLeftTree"
+});
+</script>
+
+<template>
+  <div>
+    <CollapseTree />
+  </div>
+</template>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"/></svg>`