Update: 主题

T-miracle · T-miracle · commit f850655decf2 · 2025-01-04T17:06:59.000+08:00
diff --git a/package/App.scss b/package/App.scss
@@ -41,6 +41,10 @@ pre > code {
     font-family: "JetBrains Mono", $fontFamily;
 }
 
+:not(pre) > code {
+    font-family: "JetBrains Mono", $fontFamily;
+}
+
 #app {
     position: relative;
     width: 100vw;
diff --git a/package/components/NanoContainer/index.vue b/package/components/NanoContainer/index.vue
@@ -71,7 +71,7 @@
             }
             setTimeout(() => {
                 loading.value = false;
-            }, 1000);
+            }, 1200);
         });
         resizeObserver.value.observe(htmlEl);
     });
diff --git a/package/components/NanoFooter/index.vue b/package/components/NanoFooter/index.vue
@@ -1,6 +1,6 @@
 <template>
     <footer
-        class="relative shrink-0 w-full h-[var(--footer-size)] overflow-hidden"
+        class="relative shrink-0 w-full h-[var(--footer-size)]"
         un-border="t-solid t-1px t-[var(--footer-border-color)]"
         un-flex="~ items-center justify-between shrink-0"
         style="background: var(--footer-bg);"
diff --git a/package/components/NanoHeader/index.vue b/package/components/NanoHeader/index.vue
@@ -1,6 +1,6 @@
 <template>
     <header
-        class="relative shrink-0 w-full h-[var(--header-size)] overflow-hidden"
+        class="relative shrink-0 w-full h-[var(--header-size)]"
         un-flex="~ justify-between"
         style="--s: var(--header-size); background: var(--header-bg)"
     >
diff --git a/package/components/NanoHeaderTopNav/index.vue b/package/components/NanoHeaderTopNav/index.vue
@@ -16,7 +16,7 @@
                 </nav>
                 <NanoPopup
                     :ref="el => popups[index] = el"
-                    class="px-2 py-1 top-[var(--header-size)] left-0"
+                    class="z-999 py-1 top-[var(--header-size)] left-0"
                 >
                     <div
                         v-for="subNav in nav.items"
diff --git a/package/components/NanoLoading/index.vue b/package/components/NanoLoading/index.vue
@@ -29,6 +29,10 @@
         overflow: hidden;
         background-color: #e6dcdc;
 
+        @media screen and (max-width: 768px) {
+            max-width: 10em;
+        }
+
         &::before {
             content: '';
             display: block;
diff --git a/package/components/NanoMain/index.vue b/package/components/NanoMain/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="relative grow z-2 h-full bg-white min-w-0 vp-doc"
+        class="relative grow z-2 h-full bg-white min-w-0"
     >
         <!--content area-->
         <div class="relative w-full h-full">
@@ -12,7 +12,7 @@
             >
                 <article
                     ref="article"
-                    class="px-10 py-6 VPDoc text-4"
+                    class="px-10 py-6 vp-doc text-4"
                     :class="[ 'w-full' ]"
                     style="white-space: wrap;"
                 >
diff --git a/package/components/NanoPopup/index.vue b/package/components/NanoPopup/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="absolute [display:none] z-100 min-w-40 bg-white shadow-2xl"
+        class="absolute [display:none] min-w-40 bg-white shadow-2xl"
         :class="{ 'block!': visible }"
         un-border="~ .25 solid rounded-2 [#B9BDC9]"
     >
diff --git a/package/components/NanoSidebarDir/index.vue b/package/components/NanoSidebarDir/index.vue
@@ -40,9 +40,16 @@
                 @click.stop
             >
                 <NanoSidebarDirTree
+                    v-if="store.sidebar.length"
                     :key="key"
                     :list="store.sidebar"
                 />
+                <div
+                    v-else
+                    class="text-gray-4 text-3.25 select-none px-1"
+                >
+                    暂无目录...
+                </div>
             </div>
         </OverlayScrollbarsComponent>
     </div>
diff --git a/package/theme/light/variables/content.scss b/package/theme/light/variables/content.scss
@@ -2,7 +2,7 @@ $fontFamily: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragi
 
 // article content style
 @mixin content {
-    article.VPDoc {
+    article.vp-doc {
         table {
             tr {
                 background: transparent !important;
@@ -52,6 +52,10 @@ $fontFamily: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragi
 
         ul, ol {
             padding-left: 2em;
+
+            li {
+                margin: 1em 0;
+            }
         }
 
         :not(pre) > code {
@@ -73,11 +77,18 @@ $fontFamily: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragi
             cursor: none !important;
         }
 
+        .vp-code-group {
+            > .tabs {
+                margin-left: 0;
+                margin-right: 0;
+            }
+        }
+
         blockquote > p {
             font-size: 1em !important;
         }
 
-        a {
+        a, a > code {
             color: #008cff;
             text-decoration: underline;
 
diff --git a/package/theme/light/variables/scrollbar.scss b/package/theme/light/variables/scrollbar.scss
@@ -6,7 +6,7 @@
         --os-size: 10px;
         // The axis-perpendicular padding of the scrollbar (horizontal: padding-y, vertical: padding-x)
         // 滚动条的轴垂直内边距（水平：padding-y，垂直：padding-x）
-        --os-padding-perpendicular: 1px;
+        --os-padding-perpendicular: 0;
         // The axis padding of the scrollbar (horizontal: padding-x, vertical: padding-y)
         // 滚动条的轴内边距（水平：padding-x，垂直：padding-y）
         --os-padding-axis: 0;
diff --git a/src/nav/nav.vue b/src/nav/nav.vue
@@ -45,7 +45,7 @@
             </div>
         </div>
         <div
-            v-if="list.length !== 0"
+            v-if="!loading && list.length !== 0"
             ref="listBox"
             class="relative grid gap-5 p-5 pt-0 w-full"
         >
@@ -173,7 +173,7 @@
             </div>
         </div>
         <div
-            v-else
+            v-if="loading"
             class="flex justify-center items-center min-h-[60vh]"
         >
             <div class="loader"/>
@@ -201,6 +201,7 @@
     import { Project, projectTypeArray } from '@/nav/type';
     import { every, includes, debounce } from 'lodash-es';
 
+    const loading = ref<boolean>(true);
     const filter = ref<string>('');
     const typeList = ref<string[]>([]);
     const projectList = reactive<Project[]>(projects);
@@ -246,6 +247,9 @@
                     }
                 }
             });
+            setTimeout(() => {
+                loading.value = false;
+            }, 500);
         });
         navBox.value && resizeObserver.value.observe(navBox.value);
     });
diff --git a/src/translation-docs/doc.vue b/src/translation-docs/doc.vue
@@ -11,8 +11,9 @@
                 placeholder="筛选文档"
             />
             <div
+                ref="box"
                 class="relative w-full py-5"
-                un-grid="~ cols-1 md:cols-2 xl:cols-3 gap-5"
+                un-grid="~ gap-5"
             >
                 <a
                     v-for="item in filterDocs"
@@ -47,7 +48,7 @@
 
 <script setup lang="ts">
     import { ElInput } from 'element-plus';
-    import { computed, ref } from 'vue';
+    import { computed, onMounted, onUnmounted, ref } from 'vue';
 
     const docs = ref([
         {
@@ -71,6 +72,32 @@
     const filterDocs = computed(() => {
         return docs.value.filter(item => item.title?.toLowerCase().indexOf(filterText.value?.toLowerCase()) !== -1);
     });
+
+    const box = ref<HTMLDivElement | null>(null);
+    const resizeObserver = ref<ResizeObserver | null>(null);
+    onMounted(() => {
+        resizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+            entries.forEach((entry: ResizeObserverEntry) => {
+                if (entry.target === box.value) {
+                    const { clientWidth } = entry.target;
+                    console.log(clientWidth);
+                    if (clientWidth >= 1440) {
+                        box.value?.style.setProperty('grid-template-columns', 'repeat(4, 1fr)');
+                    } else if (clientWidth >= 1280) {
+                        box.value?.style.setProperty('grid-template-columns', 'repeat(3, 1fr)');
+                    } else if (clientWidth >= 768) {
+                        box.value?.style.setProperty('grid-template-columns', 'repeat(2, 1fr)');
+                    } else {
+                        box.value?.style.setProperty('grid-template-columns', 'repeat(1, 1fr)');
+                    }
+                }
+            });
+        });
+        box.value && resizeObserver.value.observe(box.value);
+    });
+    onUnmounted(() => {
+        resizeObserver.value?.disconnect();
+    });
 </script>
 
 <style scoped lang="scss">
@@ -88,6 +115,7 @@
         padding: 5px 2.5px 12px;
 
         &__filter {
+            width: min(400px, 100%);
 
             :deep(.el-input__wrapper) {
                 background: transparent;

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@`
`71`	`71`	`}`
`72`	`72`	`setTimeout(() => {`
`73`	`73`	`loading.value = false;`
`74`		`- }, 1000);`
	`74`	`+ }, 1200);`
`75`	`75`	`});`
`76`	`76`	`resizeObserver.value.observe(htmlEl);`
`77`	`77`	`});`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`<template>`
`2`	`2`	`<header`
`3`		`- class="relative shrink-0 w-full h-[var(--header-size)] overflow-hidden"`
	`3`	`+ class="relative shrink-0 w-full h-[var(--header-size)]"`
`4`	`4`	`un-flex="~ justify-between"`
`5`	`5`	`style="--s: var(--header-size); background: var(--header-bg)"`
`6`	`6`	`>`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`	`</nav>`
`17`	`17`	`<NanoPopup`
`18`	`18`	`:ref="el => popups[index] = el"`
`19`		`- class="px-2 py-1 top-[var(--header-size)] left-0"`
	`19`	`+ class="z-999 py-1 top-[var(--header-size)] left-0"`
`20`	`20`	`>`
`21`	`21`	`<div`
`22`	`22`	`v-for="subNav in nav.items"`