feat: 集成 unocss

src/config/layout.ts

@@ -17,7 +17,7 @@ interface ILayoutSettings {
 const layoutSettings: ILayoutSettings = {
   showSettings: true,
   showTagsView: true,
-  fixedHeader: false,
+  fixedHeader: true,
   showSidebarLogo: true,
   showThemeSwitch: true,
   showScreenfull: true

src/icons/svg/unocss.svg

@@ -0,0 +1,11 @@
+<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M117.722 167.444C117.722 139.83 140.108 117.444 167.722 117.444V117.444C195.336 117.444 217.722 139.83 217.722 167.444V167.444C217.722 195.058 195.336 217.444 167.722 217.444V217.444C140.108 217.444 117.722 195.058 117.722 167.444V167.444Z"
+    fill="#fff" fill-opacity="0.6" />
+  <path
+    d="M117.722 52.5561C117.722 24.9419 140.108 2.55614 167.722 2.55614V2.55614C195.336 2.55614 217.722 24.9419 217.722 52.5561V97.5561C217.722 100.318 215.483 102.556 212.722 102.556H122.722C119.961 102.556 117.722 100.318 117.722 97.5561V52.5561Z"
+    fill="#fff" fill-opacity="0.3" />
+  <path
+    d="M102.278 167.444C102.278 195.058 79.8922 217.444 52.278 217.444V217.444C24.6637 217.444 2.27796 195.058 2.27796 167.444L2.27796 122.444C2.27796 119.682 4.51654 117.444 7.27796 117.444L97.278 117.444C100.039 117.444 102.278 119.682 102.278 122.444L102.278 167.444Z"
+    fill="#fff" />
+</svg>

src/main.ts

@@ -4,12 +4,14 @@ import "@/router/permission"
 import store from "./store"
 import App from "./App.vue"
 import ElementPlus from "element-plus"
-import "element-plus/dist/index.css"
-import "element-plus/theme-chalk/dark/css-vars.css"
 import loadSvg from "@/icons"
 import * as directives from "@/directives"
-import "@/styles/index.scss"
+
+import "uno.css"
 import "normalize.css"
+import "element-plus/dist/index.css"
+import "element-plus/theme-chalk/dark/css-vars.css"
+import "@/styles/index.scss"
 
 const app = createApp(App)
 /** element-plus 组件完整引入 */

src/router/index.ts

@@ -40,6 +40,22 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       }
     ]
   },
+  {
+    path: "/unocss",
+    component: Layout,
+    redirect: "/unocss/index",
+    children: [
+      {
+        path: "index",
+        component: () => import("@/views/unocss/index.vue"),
+        name: "Unocss",
+        meta: {
+          title: "unocss",
+          icon: "unocss"
+        }
+      }
+    ]
+  },
   {
     path: "/link",
     component: Layout,

src/store/modules/app.ts

@@ -56,14 +56,12 @@ export const useAppStore = defineStore({
         ? activeThemeName
         : this.themeList[0].name
       // 应用到 dom
-      // document.documentElement.className = `theme-${this.activeThemeName}`
       document.documentElement.className = this.activeThemeName
       // 持久化
       setActiveThemeName(this.activeThemeName)
     },
     initTheme() {
       // 初始化
-      // document.documentElement.className = `theme-${this.activeThemeName}`
       document.documentElement.className = this.activeThemeName
     }
   }

src/views/unocss/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div h-full app-container>
+    <div h-full text-center flex select-none all:transition-400>
+      <div ma>
+        <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-1s>unocss</div>
+        <div op30 dark:op60 text-lg fw300 m1>具有高性能且极具灵活性的即时原子化 CSS 引擎</div>
+        <div m2 flex justify-center text-lg op30 dark:op60 hover="op80" dark:hover="op80">
+          <a href="https://antfu.me/posts/reimagine-atomic-css-zh" target="_blank">推荐阅读：重新构想原子化 CSS</a>
+        </div>
+      </div>
+    </div>
+    <div absolute bottom-5 right-0 left-0 text-center op30 dark:op60 fw300>
+      该页面是一个 unocss 的使用案例，其他页面依旧采用 sass
+    </div>
+  </div>
+</template>