fix(projects): 修复vertical-mix布局、重构初始化的loading

soybeanjs · Jan 17, 2022 · 579e074 · 579e074
1 parent b2a4ddf
commit 579e074
Show file tree

Hide file tree

Showing 32 changed files with 562 additions and 736 deletions.
diff --git a/index.html b/index.html
@@ -7,20 +7,23 @@
     <title><%= appName %></title>
   </head>
   <body>
-    <div id="appProvider" style="display: none"></div>
     <div id="app">
-      <div class="fixed-center flex-col">
-        <div id="loadingLogo" class="w-128px h-128px text-primary"></div>
-        <div class="w-56px h-56px my-36px">
-          <div class="relative h-full animate-spin">
-            <div class="absolute-lt init-loading-spin"></div>
-            <div class="absolute-lb init-loading-spin animate-delay-500"></div>
-            <div class="absolute-rt init-loading-spin animate-delay-1000"></div>
-            <div class="absolute-rb init-loading-spin animate-delay-1500"></div>
+      <div class="loading-container">
+        <div id="loadingLogo" class="loading-svg"></div>
+        <div class="loading-spin__container">
+          <div class="loading-spin">
+            <div class="left-0 top-0 loading-spin-item"></div>
+            <div class="left-0 bottom-0 loading-spin-item loading-delay-500"></div>
+            <div class="right-0 top-0 loading-spin-item loading-delay-1000"></div>
+            <div class="right-0 bottom-0 loading-spin-item loading-delay-1500"></div>
           </div>
         </div>
-        <h2 class="text-28px font-medium text-[#646464]"><%= appTitle %></h2>
+        <h2 class="loading-title"><%= appTitle %></h2>
       </div>
+      <style>
+        @import '/resource/loading.css';
+      </style>
+      <script src="/resource/loading.js"></script>
     </div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/public/resource/loading.css b/public/resource/loading.css
@@ -0,0 +1,91 @@
+.loading-container {
+	position: fixed;
+	left: 0;
+	top: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+.loading-svg {
+	width: 128px;
+	height: 128px;
+	color: var(--primary-color);
+}
+
+.loading-spin__container {
+	width: 56px;
+	height: 56px;
+	margin: 36px 0;
+}
+
+.loading-spin {
+	position: relative;
+	height: 100%;
+	animation: loadingSpin 1s linear infinite;
+}
+
+.left-0 {
+  left: 0;
+}
+.right-0 {
+  right: 0;
+}
+.top-0 {
+  top: 0;
+}
+.bottom-0 {
+  bottom: 0;
+}
+
+.loading-spin-item {
+	position: absolute;
+  height: 16px;
+  width: 16px;
+	background-color: var(--primary-color);
+  border-radius: 8px;
+  -webkit-animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes loadingSpin {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loadingPulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .5;
+  }
+}
+
+.loading-delay-500 {
+  -webkit-animation-delay: 500ms;
+  animation-delay: 500ms;
+}
+.loading-delay-1000 {
+  -webkit-animation-delay: 1000ms;
+  animation-delay: 1000ms;
+}
+.loading-delay-1500 {
+  -webkit-animation-delay: 1500ms;
+  animation-delay: 1500ms;
+}
+
+.loading-title {
+  font-size: 28px;
+	font-weight: 500;
+  color: #646464;
+}
diff --git a/public/resource/loading.js b/public/resource/loading.js
@@ -0,0 +1,44 @@
+/**
+ * 初始化加载效果的svg格式logo
+ * @param { string }id - 元素id
+ */
+function initSvgLogo(id) {
+  const svgStr = `<svg width="128px" height="128px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	y="0px" viewBox="0 0 158.9 158.9" style="enable-background:new 0 0 158.9 158.9;" xml:space="preserve">
+	<path style="fill:none" d="M0,158.9C0,106.3,0,53.7,0,1.1C0,0.2,0.2,0,1.1,0c52.2,0,104.5,0,156.7,0c0.9,0,1.1,0.2,1.1,1.1
+	c0,52.2,0,104.5,0,156.7c0,0.9-0.2,1.1-1.1,1.1C105.2,158.8,52.6,158.8,0,158.9z" />
+	<path style="fill:currentColor" d="M81.3,55.9c-0.1-11.7-2.9-22.5-9.4-32.4c-1-1.5-2.1-2.9-2.5-4.7c-0.7-3.4,0.9-6.9,4-8.6c3-1.7,6.8-1.2,9.3,1.2
+	c2.4,2.6,4.4,5.6,5.9,8.8c4.7,8.9,7.6,18.6,8.4,28.6c1,12.5-0.7,25-5.2,36.7c-0.9,2.5-1.9,4.9-3,7.3c-0.3,0.4-0.3,1,0,1.4
+	c9.6,13.3,21.8,23,37.8,27.2c6.4,1.7,13.1,2.3,19.7,1.6c4.2-0.4,7.9,2.7,8.4,6.9c0.7,4.3-2.3,8.3-6.6,9c0,0,0,0-0.1,0
+	c-7.7,0.9-15.5,0.5-23-1.3c-13.9-3.1-26.7-10-36.9-19.9c-4.4-4.2-8.4-8.8-11.9-13.7c-0.5-0.8-1.4-1.2-2.3-1.1
+	c-9.5,0.7-18.8,3.3-27.4,7.6c-11.6,6-20.7,14.6-26.4,26.4c-0.7,1.9-2,3.5-3.7,4.7c-2.9,1.7-6.6,1.5-9.2-0.7c-2.8-2.2-3.8-6-2.4-9.3
+	c2.2-5.2,5.1-10.1,8.7-14.5c12.2-15.4,28.2-24.6,47.3-28.6c4-0.8,8.1-1.4,12.2-1.6c0.5,0,1-0.3,1.2-0.8c3.3-7.1,5.5-14.6,6.5-22.3
+	C81.1,61.2,81.3,58.6,81.3,55.9z" />
+	<path style="fill:currentColor" d="M136.3,108.3c-3.8-0.5-7.6-1.4-11.1-2.9c-7.7-2.8-14.4-7.5-19.7-13.8c-2.9-3.3-2.5-8.4,0.8-11.3
+	c1.4-1.2,3.1-1.9,4.9-1.9c2.5-0.1,5,1,6.5,2.9c4.9,5.6,11.6,9.4,18.9,10.8c1.5,0.2,3.1,0.6,4.5,1.2c3.2,1.8,4.8,5.6,3.8,9.2
+	C144,106.1,140.8,108.4,136.3,108.3z" />
+	<path style="fill:currentColor" d="M55.7,33.3c3,0.2,5.6,2.2,6.6,5c2.2,5.4,3.4,11.2,3.6,17c0.3,5.9-0.6,11.7-2.5,17.3c-2,5.8-8.2,7.8-12.9,4.2
+	c-2.6-2.2-3.6-5.8-2.4-9c1.4-4,1.9-8.2,1.7-12.4c-0.2-3.8-1-7.5-2.4-11C45.3,38.9,49.2,33.3,55.7,33.3z" />
+	<path style="fill:currentColor" d="M77.9,126.6c0,3.9-2.8,7.2-6.7,7.9c-7.8,1.5-14.8,5.9-19.7,12.2c-2.7,3.5-7.6,4.2-11.2,1.6
+	c-3.6-2.6-4.3-7.6-1.7-11.2c0.1-0.1,0.2-0.3,0.3-0.4c4.1-5.2,9.3-9.6,15.1-12.8c4.4-2.5,9.1-4.2,14-5.1
+	C73.3,117.7,77.9,121.3,77.9,126.6z" />
+</svg>
+`;
+  const appEl = document.querySelector(id);
+  const div = document.createElement('div');
+  div.innerHTML = svgStr;
+  if (appEl) {
+    appEl.appendChild(div);
+  }
+}
+
+function addThemeColorCssVars() {
+  const key = '__THEME_COLOR__';
+  const themeColor = '#1890ff';
+  const cssVars = window.localStorage.getItem(key) || `--primary-color: ${themeColor}`;
+  document.documentElement.style.cssText = cssVars;
+}
+
+initSvgLogo('#loadingLogo');
+
+addThemeColorCssVars();
diff --git a/src/App.vue b/src/App.vue
@@ -1,19 +1,24 @@
 <template>
-  <app-provider>
-    <router-view />
-  </app-provider>
+  <n-config-provider
+    :theme="theme.naiveTheme"
+    :theme-overrides="theme.naiveThemeOverrides"
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    class="h-full"
+  >
+    <naive-provider>
+      <router-view />
+    </naive-provider>
+  </n-config-provider>
 </template>
 
 <script setup lang="ts">
-import { subscribeStore } from '@/store';
-import { useTheme } from '@/composables';
-import AppProvider from './AppProvider.vue';
+import { NConfigProvider, zhCN, dateZhCN } from 'naive-ui';
+import { NaiveProvider } from '@/components';
+import { useThemeStore, subscribeStore } from '@/store';
 
-function init() {
-  subscribeStore();
-  useTheme();
-}
+const theme = useThemeStore();
 
-init();
+subscribeStore();
 </script>
 <style scoped></style>
diff --git a/src/AppProvider.vue b/src/AppProvider.vue
diff --git a/src/composables/common/index.ts b/src/composables/common/index.ts
@@ -1,4 +1,3 @@
 export * from './system';
 export * from './router';
-export * from './theme';
 export * from './layout';
diff --git a/src/composables/common/theme.ts b/src/composables/common/theme.ts
diff --git a/src/enum/common/storage.ts b/src/enum/common/storage.ts
@@ -1,4 +1,6 @@
 export enum EnumStorageKey {
+  /** 主题颜色 */
+  'theme-color' = '__THEME_COLOR__',
   /** 用户token */
   'token' = '__TOKEN__',
   /** 用户刷新token */

diff --git a/src/interface/expose.ts b/src/interface/expose.ts
@@ -0,0 +1,3 @@
+export interface ExposeLayoutMixMenu {
+  resetFirstDegreeMenus(): void;
+}
diff --git a/src/interface/index.ts b/src/interface/index.ts
@@ -1,4 +1,5 @@
 export * from './enum';
 export * from './theme';
 export * from './system';
+export * from './expose';
 export * from './layout';
diff --git a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
@@ -4,7 +4,11 @@
       <n-breadcrumb-item>
         <n-dropdown v-if="breadcrumb.hasChildren" :options="breadcrumb.children" @select="dropdownSelect">
           <span>
-            <component :is="breadcrumb.icon" v-if="theme.header.crumb.showIcon" class="inline-block mr-4px text-16px" />
+            <component
+              :is="breadcrumb.icon"
+              v-if="theme.header.crumb.showIcon"
+              class="inline-block align-text-bottom mr-4px text-16px"
+            />
             <span>{{ breadcrumb.label }}</span>
           </span>
         </n-dropdown>

diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue
@@ -0,0 +1,14 @@
+<template>
+  <n-button :text="true" class="h-36px" @click="app.toggleSiderCollapse">
+    <icon-ph-caret-double-right-bold v-if="app.siderCollapse" class="text-16px" />
+    <icon-ph-caret-double-left-bold v-else class="text-16px" />
+  </n-button>
+</template>
+
+<script lang="ts" setup>
+import { NButton } from 'naive-ui';
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+</script>
+<style scoped></style>
diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="mb-6px px-4px cursor-pointer" @mouseenter="setTrue" @mouseleave="setFalse">
+    <div
+      class="flex-center flex-col py-12px rounded-2px"
+      :class="{ 'text-primary bg-primary-active': isActive, 'text-primary': isHover }"
+    >
+      <component :is="icon" :class="[isMini ? 'text-16px' : 'text-20px']" />
+      <p
+        class="pt-8px text-12px overflow-hidden transition-height duration-300 ease-in-out"
+        :class="[isMini ? 'h-0 pt-0' : 'h-20px pt-8px']"
+      >
+        {{ label }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { VNodeChild } from 'vue';
+import { useBoolean } from '@/hooks';
+
+interface Props {
+  /** 路由名称 */
+  routeName: string;
+  /** 路由名称文本 */
+  label: string;
+  /** 当前激活状态的理由名称 */
+  activeRouteName: string;
+  /** 路由图标 */
+  icon?: () => VNodeChild;
+  /** mini尺寸的路由 */
+  isMini?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: undefined,
+  isMini: false
+});
+
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+
+const isActive = computed(() => props.routeName === props.activeRouteName);
+</script>
+<style scoped></style>