feat: 加载图标改为内置

2023-10-18 15:25:45 +08:00 · 2023-10-18 15:25:45 +08:00 · 6b2539e2eb
parent 326e26df40
commit 6b2539e2eb
7 changed files with 38 additions and 73 deletions
--- a/index.html
+++ b/index.html
@ -51,9 +51,13 @@
        }
      </style>
      <div class="loading">
-        <img src="./assets/loading.svg" alt="loading" class="loading-image" />
+        <img
+          src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IHJnYigyNTUsIDI1NSwgMjU1KTsgZGlzcGxheTogYmxvY2s7IHNoYXBlLXJlbmRlcmluZzogYXV0bzsiIHdpZHRoPSIyMDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MCA1MCkiPjxnPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiB2YWx1ZXM9IjA7NDUiIGtleVRpbWVzPSIwOzEiIGR1cj0iMC4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48cGF0aCBkPSJNMjkuNDkxNTI0MjA2MTE3MjU1IC01LjUgTDM3LjQ5MTUyNDIwNjExNzI1NSAtNS41IEwzNy40OTE1MjQyMDYxMTcyNTUgNS41IEwyOS40OTE1MjQyMDYxMTcyNTUgNS41IEEzMCAzMCAwIDAgMSAyNC43NDI3NDQwNTAxOTg3MzggMTYuOTY0NTY5NDU3MTQ2NzEyIEwyNC43NDI3NDQwNTAxOTg3MzggMTYuOTY0NTY5NDU3MTQ2NzEyIEwzMC4zOTk1OTgyOTk2OTExMTcgMjIuNjIxNDIzNzA2NjM5MDkyIEwyMi42MjE0MjM3MDY2MzkwOTYgMzAuMzk5NTk4Mjk5NjkxMTE0IEwxNi45NjQ1Njk0NTcxNDY3MTYgMjQuNzQyNzQ0MDUwMTk4NzM0IEEzMCAzMCAwIDAgMSA1LjUgMjkuNDkxNTI0MjA2MTE3MjU1IEw1LjUgMjkuNDkxNTI0MjA2MTE3MjU1IEw1LjUgMzcuNDkxNTI0MjA2MTE3MjU1IEwtNS40OTk5OTk5OTk5OTk5OTcgMzcuNDkxNTI0MjA2MTE3MjU1IEwtNS40OTk5OTk5OTk5OTk5OTcgMjkuNDkxNTI0MjA2MTE3MjU1IEEzMCAzMCAwIDAgMSAtMTYuOTY0NTY5NDU3MTQ2NzA1IDI0Ljc0Mjc0NDA1MDE5ODczOCBMLTE2Ljk2NDU2OTQ1NzE0NjcwNSAyNC43NDI3NDQwNTAxOTg3MzggTC0yMi42MjE0MjM3MDY2MzkwODUgMzAuMzk5NTk4Mjk5NjkxMTE3IEwtMzAuMzk5NTk4Mjk5NjkxMTE3IDIyLjYyMTQyMzcwNjYzOTA5MiBMLTI0Ljc0Mjc0NDA1MDE5ODczOCAxNi45NjQ1Njk0NTcxNDY3MTIgQTMwIDMwIDAgMCAxIC0yOS40OTE1MjQyMDYxMTcyNTUgNS41MDAwMDAwMDAwMDAwMDkgTC0yOS40OTE1MjQyMDYxMTcyNTUgNS41MDAwMDAwMDAwMDAwMDkgTC0zNy40OTE1MjQyMDYxMTcyNTUgNS41MDAwMDAwMDAwMDAwMSBMLTM3LjQ5MTUyNDIwNjExNzI1NSAtNS41MDAwMDAwMDAwMDAwMDEgTC0yOS40OTE1MjQyMDYxMTcyNTUgLTUuNTAwMDAwMDAwMDAwMDAyIEEzMCAzMCAwIDAgMSAtMjQuNzQyNzQ0MDUwMTk4NzM4IC0xNi45NjQ1Njk0NTcxNDY3MDUgTC0yNC43NDI3NDQwNTAxOTg3MzggLTE2Ljk2NDU2OTQ1NzE0NjcwNSBMLTMwLjM5OTU5ODI5OTY5MTExNyAtMjIuNjIxNDIzNzA2NjM5MDg1IEwtMjIuNjIxNDIzNzA2NjM5MDkyIC0zMC4zOTk1OTgyOTk2OTExMTcgTC0xNi45NjQ1Njk0NTcxNDY3MTIgLTI0Ljc0Mjc0NDA1MDE5ODczOCBBMzAgMzAgMCAwIDEgLTUuNTAwMDAwMDAwMDAwMDExIC0yOS40OTE1MjQyMDYxMTcyNTUgTC01LjUwMDAwMDAwMDAwMDAxMSAtMjkuNDkxNTI0MjA2MTE3MjU1IEwtNS41MDAwMDAwMDAwMDAwMTIgLTM3LjQ5MTUyNDIwNjExNzI1NSBMNS40OTk5OTk5OTk5OTk5OTggLTM3LjQ5MTUyNDIwNjExNzI1NSBMNS41IC0yOS40OTE1MjQyMDYxMTcyNTUgQTMwIDMwIDAgMCAxIDE2Ljk2NDU2OTQ1NzE0NjcwMiAtMjQuNzQyNzQ0MDUwMTk4NzQgTDE2Ljk2NDU2OTQ1NzE0NjcwMiAtMjQuNzQyNzQ0MDUwMTk4NzQgTDIyLjYyMTQyMzcwNjYzOTA4IC0zMC4zOTk1OTgyOTk2OTExMiBMMzAuMzk5NTk4Mjk5NjkxMTE3IC0yMi42MjE0MjM3MDY2MzkxIEwyNC43NDI3NDQwNTAxOTg3MzggLTE2Ljk2NDU2OTQ1NzE0NjcxNiBBMzAgMzAgMCAwIDEgMjkuNDkxNTI0MjA2MTE3MjU1IC01LjUwMDAwMDAwMDAwMDAxMyBNMCAtMjBBMjAgMjAgMCAxIDAgMCAyMCBBMjAgMjAgMCAxIDAgMCAtMjAiIGZpbGw9IiMwOWYiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPgo="
+          alt="loading"
+          class="loading-image"
+        />
        <h1 class="loading-title">欢迎访问%VITE_TITLE%</h1>
-        <div class="loading-tip">正在加载中, 请稍后...</div>
+        <div class="loading-tip">资源加载中, 请稍后...</div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
--- a/public/assets/loading.svg
+++ b/public/assets/loading.svg
@ -1,6 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-<g transform="translate(50 50)">
-<g>
-<animateTransform attributeName="transform" type="rotate" values="0;45" keyTimes="0;1" dur="0.2s" repeatCount="indefinite"></animateTransform><path d="M29.491524206117255 -5.5 L37.491524206117255 -5.5 L37.491524206117255 5.5 L29.491524206117255 5.5 A30 30 0 0 1 24.742744050198738 16.964569457146712 L24.742744050198738 16.964569457146712 L30.399598299691117 22.621423706639092 L22.621423706639096 30.399598299691114 L16.964569457146716 24.742744050198734 A30 30 0 0 1 5.5 29.491524206117255 L5.5 29.491524206117255 L5.5 37.491524206117255 L-5.499999999999997 37.491524206117255 L-5.499999999999997 29.491524206117255 A30 30 0 0 1 -16.964569457146705 24.742744050198738 L-16.964569457146705 24.742744050198738 L-22.621423706639085 30.399598299691117 L-30.399598299691117 22.621423706639092 L-24.742744050198738 16.964569457146712 A30 30 0 0 1 -29.491524206117255 5.500000000000009 L-29.491524206117255 5.500000000000009 L-37.491524206117255 5.50000000000001 L-37.491524206117255 -5.500000000000001 L-29.491524206117255 -5.500000000000002 A30 30 0 0 1 -24.742744050198738 -16.964569457146705 L-24.742744050198738 -16.964569457146705 L-30.399598299691117 -22.621423706639085 L-22.621423706639092 -30.399598299691117 L-16.964569457146712 -24.742744050198738 A30 30 0 0 1 -5.500000000000011 -29.491524206117255 L-5.500000000000011 -29.491524206117255 L-5.500000000000012 -37.491524206117255 L5.499999999999998 -37.491524206117255 L5.5 -29.491524206117255 A30 30 0 0 1 16.964569457146702 -24.74274405019874 L16.964569457146702 -24.74274405019874 L22.62142370663908 -30.39959829969112 L30.399598299691117 -22.6214237066391 L24.742744050198738 -16.964569457146716 A30 30 0 0 1 29.491524206117255 -5.500000000000013 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20" fill="#09f"></path></g></g>
-<!-- [ldio] generated by https://loading.io/ --></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="translate(50 50)"><g><animateTransform attributeName="transform" type="rotate" values="0;45" keyTimes="0;1" dur="0.2s" repeatCount="indefinite"></animateTransform><path d="M29.491524206117255 -5.5 L37.491524206117255 -5.5 L37.491524206117255 5.5 L29.491524206117255 5.5 A30 30 0 0 1 24.742744050198738 16.964569457146712 L24.742744050198738 16.964569457146712 L30.399598299691117 22.621423706639092 L22.621423706639096 30.399598299691114 L16.964569457146716 24.742744050198734 A30 30 0 0 1 5.5 29.491524206117255 L5.5 29.491524206117255 L5.5 37.491524206117255 L-5.499999999999997 37.491524206117255 L-5.499999999999997 29.491524206117255 A30 30 0 0 1 -16.964569457146705 24.742744050198738 L-16.964569457146705 24.742744050198738 L-22.621423706639085 30.399598299691117 L-30.399598299691117 22.621423706639092 L-24.742744050198738 16.964569457146712 A30 30 0 0 1 -29.491524206117255 5.500000000000009 L-29.491524206117255 5.500000000000009 L-37.491524206117255 5.50000000000001 L-37.491524206117255 -5.500000000000001 L-29.491524206117255 -5.500000000000002 A30 30 0 0 1 -24.742744050198738 -16.964569457146705 L-24.742744050198738 -16.964569457146705 L-30.399598299691117 -22.621423706639085 L-22.621423706639092 -30.399598299691117 L-16.964569457146712 -24.742744050198738 A30 30 0 0 1 -5.500000000000011 -29.491524206117255 L-5.500000000000011 -29.491524206117255 L-5.500000000000012 -37.491524206117255 L5.499999999999998 -37.491524206117255 L5.5 -29.491524206117255 A30 30 0 0 1 16.964569457146702 -24.74274405019874 L16.964569457146702 -24.74274405019874 L22.62142370663908 -30.39959829969112 L30.399598299691117 -22.6214237066391 L24.742744050198738 -16.964569457146716 A30 30 0 0 1 29.491524206117255 -5.500000000000013 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20" fill="#09f"></path></g></g></svg>
--- a/src/components/breadcrumb/bread-page.vue
+++ b/src/components/breadcrumb/bread-page.vue
@ -1,6 +1,6 @@
 <template>
-  <div class="h-full grid grid-rows-[auto_1fr]">
-    <div class="bg-[#f8f8f8] dark:bg-gray-800 px-4 py-2">
+  <div>
+    <div class="bg-white px-4 py-2">
      <div class="flex justify-between gap-4">
        <BreadCrumb></BreadCrumb>
        <div>
@ -9,7 +9,7 @@
      </div>
    </div>
    <slot name="content">
-      <div class="w-full h-full overflow-hidden p-6">
+      <div class="m-4 p-4 bg-white">
        <slot></slot>
      </div>
    </slot>
@ -20,4 +20,4 @@
 import BreadCrumb from "./bread-crumb.vue";
 </script>

-<style scoped></style>
+<style scoped></style>
--- a/src/components/form/form-node.tsx
+++ b/src/components/form/form-node.tsx
@ -1,4 +1,5 @@
 import {
+  AutoComplete,
  Button,
  Cascader,
  CheckboxGroup,
@ -171,6 +172,15 @@ export const nodeMap = {
      allowClear: true,
    } as InstanceType<typeof Slider>["$props"],
  },
+  /**
+   * 自动完成输入框
+   */
+  autoComplete: {
+    component: AutoComplete,
+    nodeProps: {
+      allowClear: true,
+    } as InstanceType<typeof AutoComplete>["$props"],
+  },
  /**
   * 底部
   */
--- a/src/pages/_layout/index.vue
+++ b/src/pages/_layout/index.vue
@ -1,10 +1,10 @@
 <template>
  <a-layout class="layout">
    <a-layout-header
-      class="h-13 overflow-hidden flex justify-between items-center gap-4 px-2 pr-4 bg-[#dddddd] dark:bg-slate-800"
+      class="h-13 overflow-hidden flex justify-between items-center gap-4 px-2 pr-4 border-b border-slate-200 bg-white dark:bg-slate-800 dark:border-slate-700"
    >
      <div class="h-13 flex items-center border-b border-slate-200 dark:border-slate-800">
-        <router-link to="/" class="px-2 py-2 rounded flex items-center gap-2 text-slate-700">
+        <router-link to="/" class="px-2 py-1 rounded flex items-center gap-2 text-slate-700 hover:bg-slate-100">
          <img src="/favicon.ico" alt="" width="22" height="22" class="" />
          <h1 class="relative text-lg leading-[19px] dark:text-white m-0 p-0">
            {{ appStore.title }}
@ -35,55 +35,24 @@

    <a-layout class="flex flex-1 overflow-hidden">
      <a-layout-sider
-        class="h-full overflow-hidden !bg-[#f3f3f3] dark:bg-slate-800"
+        class="h-full overflow-hidden dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700"
        :width="224"
        :collapsed-width="52"
        :collapsible="true"
        :collapsed="isCollapsed"
        :hide-trigger="false"
-        :breakpoint="'lg'"
        @collapse="onCollapse"
      >
-        <a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-hidden pt-0.5">
+        <a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-hidden pt-2">
          <Menu />
        </a-scrollbar>
-        <template #trigger="{ collapsed }">
-          <i
-            :class="`text-gray-400 text-base ${
-              collapsed ? 'icon-park-outline-expand-left' : 'icon-park-outline-expand-right'
-            }`"
-          ></i>
-        </template>
      </a-layout-sider>
-      <a-layout class="layout-content flex-1 bg-white">
-        <a-layout-header class="h-8 bg-[#ececec] dark:bg-slate-800">
-          <div class="h-full flex items-center justify-between gap-2 px-4">
-            <div class="space-x-2">
-              <a-tag
-                v-for="item in appStore.pageTags"
-                :key="item.id"
-                :color="item.path === route.fullPath ? 'blue' : undefined"
-                :closable="item.closible"
-                class="cursor-pointer"
-                @mouseenter="item.closable && (item.closible = true)"
-                @mouseleave="item.closable && (item.closible = false)"
-                @close="appStore.delPageTag(item)"
-                @click="router.push(item.path)"
-              >
-                {{ item.title }}
-              </a-tag>
-            </div>
-            <div>
-              <a-tooltip v-for="btn in tabButtons" :key="btn.icon" :content="btn.text" position="bottom">
-                <span class="px-1.5 text-gray-600 py-0.5 hover:bg-slate-100 rounded cursor-pointer">
-                  <i :class="btn.icon"></i>
-                </span>
-              </a-tooltip>
-            </div>
-          </div>
-        </a-layout-header>
+      <a-layout class="layout-content flex-1">
        <a-layout-content class="overflow-x-auto">
          <a-spin :loading="appStore.pageLoding" tip="页面加载中，请稍等..." class="block h-full w-full">
+            <template #icon>
+              <IconSync></IconSync>
+            </template>
            <router-view v-slot="{ Component }">
              <component :is="Component"></component>
            </router-view>
@ -97,6 +66,7 @@
 <script lang="ts" setup>
 import { useAppStore, useUserStore } from "@/store";
 import { Message } from "@arco-design/web-vue";
+import { IconSync } from "@arco-design/web-vue/es/icon";
 import Menu from "./components/menu.vue";
 import userDropdown from "./components/userDropdown.vue";

@ -108,21 +78,6 @@ const router = useRouter();
 const themeConfig = ref({ visible: false });
 const isDev = import.meta.env.DEV;

-watch(
-  () => route.path,
-  () => {
-    console.log("path change");
-    appStore.addPageTag({
-      id: route.fullPath,
-      path: route.path,
-      title: route.meta.title!,
-    });
-  },
-  {
-    immediate: true,
-  }
-);
-
 const onCollapse = (val: boolean) => {
  isCollapsed.value = val;
 };
@ -246,6 +201,7 @@ const tagItems = [
  // 导致部分内容被截取
  // min-height: 100vh;
  overflow-y: hidden;
+  background-color: var(--color-fill-2);
  transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 </style>
@ -254,7 +210,7 @@ const tagItems = [
 {
  "meta": {
    "sort": 101,
-    "title": "首页",
+    "title": "概览",
    "icon": "icon-park-outline-home"
  }
 }
--- a/src/pages/dev/openapi.vue
+++ b/src/pages/dev/openapi.vue
@ -1,12 +1,10 @@
 <template>
  <bread-page>
-    <template #content>
-      <iframe
-        src="https://apifox.com/apidoc/shared-f1ea65e6-cee8-4fe3-949f-288a7cd1af49"
-        frameborder="0"
-        class="w-full h-full"
-      ></iframe>
-    </template>
+    <iframe
+      src="https://apifox.com/apidoc/shared-f1ea65e6-cee8-4fe3-949f-288a7cd1af49"
+      frameborder="0"
+      class="w-full h-full"
+    ></iframe>
  </bread-page>
 </template>

--- a/src/router/menus/index.ts
+++ b/src/router/menus/index.ts
@ -112,6 +112,7 @@ function sort<T extends { children?: T[]; [key: string]: any }>(
 */
 function transformToMenuItems(routes: RouteRecordRaw[]) {
  const menus = routesToItems(routes);
+  console.log(menus);
  const tree = listToTree(menus);
  return sort(tree);
 }