update: 更新文章

Author: T-miracle

.vitepress/sidebar/bugs.ts

@@ -100,10 +100,6 @@ const bugsSidebar: SidebarType[] = [
                 items: androidStudioItems
             }
         ]
-    },
-    {
-        text: '待分类',
-        items: []
     }
 ];
 

.vitepress/sidebar/newTools.ts

@@ -0,0 +1,17 @@
+import type { SidebarType } from '../../package/type';
+
+const newToolsSidebar: SidebarType[] = [
+    {
+        text: '学不动，根本学不动',
+        link: '/new-tools/',
+        readonly: true,
+        items: [
+            {
+                text: 'artalk 评论系统安装与配置教程（docker版）',
+                link: '/new-tools/docker_install_artalk'
+            }
+        ]
+    }
+];
+
+export default newToolsSidebar;

.vitepress/sidebar/test.ts

@@ -1,7 +1,7 @@
 import { ThemeConfig } from '../package/type';
 import learnSidebar from './sidebar/learn';
 import bugsSidebar from './sidebar/bugs';
-import testSidebar from './sidebar/test';
+import newToolsSidebar from './sidebar/newTools';
 
 export default {
     name: 'Tmiracle',
@@ -71,6 +71,6 @@ export default {
     sidebar: {
         '/learn/': learnSidebar,
         '/bugs/': bugsSidebar,
-        '/test/': testSidebar
+        '/new-tools/': newToolsSidebar
     }
 } as ThemeConfig;

.vitepress/themeConfig.ts

@@ -4,23 +4,35 @@
         un-p="[calc(var(--action-bar-size)*.1)]"
         un-flex="center"
         un-rounded="[calc(var(--action-bar-size)*.2)]"
-        un-hover="bg-[var(--action-bar-btn-hover-bg)]"
-        un-focus="bg-[var(--action-bar-btn-focus-bg)]"
-        @click="button.clickFn"
+        :un-hover="disabled ? 'bg-transparent' : 'bg-[var(--action-bar-btn-hover-bg)]'"
+        :un-focus="disabled ? 'bg-transparent' : 'bg-[var(--action-bar-btn-focus-bg)]'"
+        :class="{ 'cursor-not-allowed! opacity-50' : disabled }"
+        @click.stop="triggerClickFn"
     >
         <Component
             :is="button.icon"
-            class="w-full h-full fill-[#A0A3AD] group-focus:fill-white"
+            class="w-full h-full fill-[#A0A3AD]"
+            :class="{ 'group-hover:fill-[#FFFFFF]' : !disabled }"
         />
     </button>
 </template>
 
 <script setup lang="ts">
     import { NanoActionBarButtonType } from '@NanoUI/NanoActionBarButton/type';
+    import { computed } from 'vue';
 
-    defineProps<{
+    const props = defineProps<{
         button: NanoActionBarButtonType
     }>();
+
+    const disabled = computed(() => {
+        return props.button.disabled ? props.button.disabled() : false;
+    });
+
+    function triggerClickFn() {
+        if (disabled.value) return;
+        props.button.clickFn();
+    }
 </script>
 
 <style scoped lang="scss">

package/components/NanoActionBarButton/index.vue

@@ -3,5 +3,6 @@ import { ComponentCustomOptions } from 'vue';
 export type NanoActionBarButtonType = {
     id: string,
     icon: ComponentCustomOptions,
-    clickFn: () => any
+    disabled?: () => boolean,
+    clickFn: () => void
 }

package/components/NanoActionBarButton/type.ts

@@ -9,7 +9,7 @@
         :height-range="[ '60vh', '100vh' ]"
         class="nano-theme"
     >
-        <div v-show="!loading" class="relative w-full h-full flex flex-col">
+        <div class="relative w-full h-full flex flex-col">
             <NanoHeader ref="header" @dblclick.self="ctl.fullscreen = !ctl.fullscreen"/>
             <NanoBody>
                 <template #content-footer>

package/components/NanoContainer/index.vue

@@ -34,16 +34,23 @@
     import { ref, shallowRef } from 'vue';
     import emitter from '../../emitter';
     import { type NanoActionBarButtonType } from '@NanoUI/NanoActionBarButton/type';
+    import { useData } from 'vitepress';
+    const { frontmatter } = useData();
 
-    const actionLeftBarTopBtnList = ref<NanoActionBarButtonType[]>([
+    const actionLeftBarTopBtnList = ref<Array<NanoActionBarButtonType>>([
         {
             id: 'project',
             icon: shallowRef(ProjectIcon),
-            clickFn: () => emitter.emit('toggle-dir-open-status')
+            disabled: () => {
+                return [ 'page' ].includes(frontmatter.value?.layout);
+            },
+            clickFn: () => {
+                emitter.emit('toggle-dir-open-status');
+            }
         }
     ]);
 
-    const actionLeftBarBottomBtnList = ref<NanoActionBarButtonType[]>([]);
+    const actionLeftBarBottomBtnList = ref<Array<NanoActionBarButtonType>>([]);
 </script>
 
 <style scoped lang="scss">

package/components/NanoLeftActionBar/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="box w-full h-full rounded-6px">
+    <div class="box absolute top-0 left-0 z-100 w-full h-full rounded-6px">
         <div class="cat">
             <div class="cat__body"/>
             <div class="cat__body"/>

package/components/NanoLoading/index.vue

@@ -13,7 +13,7 @@
                 class="w-full h-full"
                 :options="scrollbarOptions"
                 defer
-                @os-initialized="scrollbarInitialized"
+                @os-initialized="scrollbarChanged"
             >
                 <div :style="{ padding: articlePadding }">
                     <article
@@ -44,11 +44,11 @@
     import scrollbarOptions from '../../config/scrollbarOptions';
     import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
     import { computed, nextTick, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue';
-    import { Content, onContentUpdated, useData, useRoute } from 'vitepress';
+    import { Content, useData, useRoute } from 'vitepress';
     import emitter from '../../emitter';
     import NotFound from 'vitepress/dist/client/theme-default/NotFound.vue';
 
-    const { page, theme, frontmatter } = useData();
+    const { page, theme, frontmatter, hash } = useData();
     const route = useRoute();
     const scrollbars = ref<InstanceType<typeof OverlayScrollbarsComponent> | null>(null);
     const article = ref<HTMLElement | null>(null);
@@ -57,36 +57,34 @@
     const showDatetime = computed(() => frontmatter.value.lastUpdated !== false);
 
     // Listen for routing changes and scroll to the top
-    watch(() => route.path, () => {
+    watch(() => [ route.path, hash ], ([ , hashValue ]) => {
         nextTick(() => {
-            scrollbars.value?.osInstance()?.elements()?.viewport?.scrollTo({ top: 0 });
+            if (hashValue) {
+                setTimeout(() => {
+                    hashChange();
+                });
+            } else {
+                scrollbars.value?.osInstance()?.elements()?.viewport?.scrollTo({ top: 0 });
+            }
         });
-    }, {
-        immediate: true
-    });
+    }, { immediate: true });
 
     // Listen for hash changes
-    function hashChange() {
+    const hashChange = () => {
+        // console.log('hashChange', location.hash);
         if (location.hash) {
             const _hashText = decodeURIComponent(location.hash.replace('#', ''));
             emitter.emit('scroll-to-hash', _hashText);
         }
-    }
+    };
 
-    function scrollbarInitialized() {
-        // console.log('scrollbarInitialized');
+    function scrollbarChanged() {
+        // console.log('scrollbarChanged');
         setTimeout(() => {
             hashChange();
         }, 0);
     }
 
-    onContentUpdated(() => {
-        // console.log('content updated');
-        setTimeout(() => {
-            hashChange();
-        }, 0);
-    });
-
     const resizeObserver = ref<ResizeObserver | null>(null);
     const articlePadding = ref<string>('calc(var(--base-size))');
 
@@ -139,8 +137,6 @@
             }
         });
         resizeObserver.value.observe(article.value!);
-
-        scrollbars.value?.osInstance()?.update();
     });
 
     onUnmounted(() => {