chore: 样式优化

mark9804 · Apr 3, 2024 · cb58c5f · cb58c5f
1 parent b2f2676
commit cb58c5f
Show file tree

Hide file tree

Showing 12 changed files with 734 additions and 403 deletions.
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -1,13 +1,11 @@
 import { HeadConfig, defineConfig } from "vitepress";
-import AutoSidebar from "vite-plugin-vitepress-auto-sidebar";
 import px2rem from "postcss-plugin-px2rem";
-import tailwindcss from "tailwindcss";
-import tailwindConfig from "../../tailwind.config.js";
 import AutoImport from "unplugin-auto-import/vite";
 import { ArcoResolver } from "unplugin-vue-components/resolvers";
 import Components from "unplugin-vue-components/vite";
 import { vitePluginForArco } from "@arco-plugins/vite-vue";
-import { generateSidebar } from 'vitepress-sidebar';
+import { generateSidebar } from "vitepress-sidebar";
+import UnoCSS from "unocss/vite";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -33,7 +31,7 @@ export default defineConfig({
     // },
 
     sidebar: generateSidebar({
-      documentRootPath: '/docs',
+      documentRootPath: "/docs",
       useTitleFromFileHeading: true,
       useTitleFromFrontmatter: true,
       useFolderTitleFromIndexFile: true,
@@ -88,6 +86,7 @@ export default defineConfig({
           include: [/\.vue$/, /\.md$/],
           resolvers: [ArcoResolver({ sideEffect: true })],
         }),
+        UnoCSS(),
         vitePluginForArco({
           style: "css",
         }),
@@ -100,7 +99,6 @@ export default defineConfig({
               propBlackList: ["font-size", "border", "border-width"],
               exclude: /(node_module)/,
             }),
-            tailwindcss(tailwindConfig),
           ],
         },
       },

diff --git a/docs/.vitepress/theme/ApperanceTransitionLayout.vue b/docs/.vitepress/theme/ApperanceTransitionLayout.vue
@@ -2,6 +2,7 @@
 import { useData } from "vitepress";
 import { nextTick, onBeforeMount, provide } from "vue";
 import DefaultTheme from "vitepress/theme";
+// import "virtual:uno.css";
 
 const { isDark } = useData();
 
@@ -39,10 +40,33 @@ onBeforeMount(() => {
     .querySelector("body")
     .setAttribute("arco-theme", isDark.value ? "dark" : "");
 });
+
+const data = useData();
+const { Layout } = DefaultTheme;
+const { frontmatter } = data;
 </script>
 
 <template>
-  <DefaultTheme.Layout />
+  <link
+    rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0"
+  />
+  <Layout>
+    <template #doc-footer-before>
+      <div class="flex gap-4">
+        <div class="flex gap-2" v-if="frontmatter?.series?.length">
+          <span class="span-series" v-for="series in frontmatter?.series">
+            {{ series.name }}-{{ (series.part + "").padStart(2, "0") }}
+          </span>
+        </div>
+        <div class="flex gap-2" v-if="frontmatter?.tags?.length">
+          <span class="span-tag" v-for="tag in frontmatter?.tags">
+            {{ tag }}
+          </span>
+        </div>
+      </div>
+    </template>
+  </Layout>
 </template>
 
 <style>

diff --git a/docs/.vitepress/theme/index.mts b/docs/.vitepress/theme/index.mts
@@ -3,7 +3,6 @@ import { Message } from "@arco-design/web-vue";
 import Theme from "vitepress/theme";
 import ApperanceTransitionLayout from "./ApperanceTransitionLayout.vue";
 import "./style.scss";
-import "./tailwind.postcss";
 
 export default {
   ...Theme,

diff --git a/docs/.vitepress/theme/style.scss b/docs/.vitepress/theme/style.scss
@@ -23,6 +23,51 @@ body {
   font-family: var(--vp-font-family-base) !important;
 }
 
+.flex {
+  display: flex;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.span-series, .span-tag {
+  font-size: 14px;
+  line-height: 1.2;
+  color: var(--color-text-3);
+  background-color: var(--color-bg-2);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  color: var(--vp-c-brand-1);
+  background-color: var(--arona-blue-1);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  pointer-events: auto;
+}
+
+.span-series::before {
+  content: "\e865";
+  font-family: "Material Symbols Outlined";
+}
+
+.span-tag::before {
+  content: "\f05b";
+  font-family: "Material Symbols Outlined";
+}
+
+
 .vp-doc {
   h1,
   h2,

diff --git a/docs/.vitepress/theme/tailwind.postcss b/docs/.vitepress/theme/tailwind.postcss
diff --git a/docs/src/components/TableOfContent.vue b/docs/src/components/TableOfContent.vue
@@ -36,9 +36,10 @@ withDefaults(
             content.frontmatter.series && content.frontmatter.series.length > 0
           "
         >
+          <!-- eslint-disable vue/require-v-for-key -->
           <span
             v-for="series in content.frontmatter.series"
-            class="toc-list__categories__series--series"
+            class="toc-list__categories__series span-series"
           >
             {{ series.name }}-{{ (series.part + "").padStart(2, "0") }}
           </span>
@@ -49,9 +50,9 @@ withDefaults(
         >
           <div
             v-for="tag in content.frontmatter.tags"
-            :key="tag"
-            class="toc-list__categories__tags--tag"
+            class="toc-list__categories__tags span-tag"
           >
+            <!-- eslint-enable vue/require-v-for-key -->
             <span>{{ tag }}</span>
           </div>
         </div>
@@ -122,54 +123,12 @@ a {
       width: fit-content;
       display: flex;
       gap: 0.5rem;
-
-      &--series {
-        font-size: 14px;
-        line-height: 1.2;
-        color: var(--color-text-3);
-        background-color: var(--color-bg-2);
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.25rem;
-        color: var(--vp-c-brand-1);
-        background-color: var(--arona-blue-1);
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.25rem;
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-        border-radius: 0.25rem;
-        pointer-events: auto;
-
-        &::before {
-          content: "\e865";
-          font-family: "Material Symbols Outlined";
-        }
-      }
     }
 
     &__tags {
       width: fit-content;
       display: flex;
       gap: 0.5rem;
-
-      &--tag {
-        font-size: 14px;
-        line-height: 1.2;
-        color: var(--vp-c-brand-1);
-        background-color: var(--arona-blue-1);
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.25rem;
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-        border-radius: 0.25rem;
-        pointer-events: auto;
-
-        &::before {
-          content: "\f05b";
-          font-family: "Material Symbols Outlined";
-        }
-      }
     }
   }
 }

diff --git a/docs/src/components/TableOfContents.vue b/docs/src/components/TableOfContents.vue
@@ -10,7 +10,6 @@ const useContents = computed(() =>
 
 <template>
   <ul class="toc">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />
     <li v-for="content in useContents" :key="content.url">
       <table-of-content :content="content"></table-of-content>
     </li>

diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
   "devDependencies": {
     "@arco-design/web-vue": "^2.55.1",
     "@types/node": "^20.12.2",
+    "@unocss/preset-icons": "0.59.0-beta.1",
     "autoprefixer": "^10.4.19",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -29,7 +30,7 @@
     "pnpm": "^8.15.6",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "tailwindcss": "^3.4.3",
+    "unocss": "0.59.0-beta.1",
     "unplugin-auto-import": "^0.17.5",
     "vitepress": "1.0.2",
     "vitepress-sidebar": "^1.22.0",