feat: update doc theme

hugsin · Feb 25, 2022 · d93f57e · d93f57e
1 parent fb3ac7e
commit d93f57e
Show file tree

Hide file tree

Showing 16 changed files with 175 additions and 106 deletions.
diff --git a/.gitignore b/.gitignore
@@ -96,7 +96,7 @@ pnpm-global
 dist/
 
 # vuepress build output
-.vuepress/dist
+.vitepress/dist
 
 # Serverless directories
 .serverless/

diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -12,8 +12,8 @@ const nav = [
     activeMatch: `^/(guide|style-guide|cookbook|examples|cryptocurrency)/`,
     items: [
       { text: '加密货币', link: '/cryptocurrency/money' },
-      { text: '工具使用', link: '/examples/' },
-      { text: '有感而发', link: '/guide/quick-start' },
+      { text: '工具使用', link: '/tools/emulator' },
+      // { text: '有感而发', link: '/guide/quick-start' },
     ]
   },
   {
@@ -103,6 +103,13 @@ export const sidebar = {
       }
     ]
   }],
+  '/tools/': [{
+    text: 'Phone',
+    items: [
+      { text: 'emulator', link: '/tools/emulator' },
+    ]
+  },
+  ],
   '/note/': [
     {
       text: '📚 使用指南',
@@ -119,9 +126,9 @@ export const sidebar = {
       text: '📚 代码规范',
       items: [
         { text: 'JS不优雅教程', link: '/note/low-code' },
-        { text: 'MacOS 自带VPN链接公司网络', link: '/note/vpn' },
-        { text: 'MacOS 邮箱教程', link: '/note/mac-bind-email' },
-        { text: 'MacOS 定时任务指南', link: '/note/mac-launchctl-task' },
+        // { text: 'MacOS 自带VPN链接公司网络', link: '/note/vpn' },
+        // { text: 'MacOS 邮箱教程', link: '/note/mac-bind-email' },
+        // { text: 'MacOS 定时任务指南', link: '/note/mac-launchctl-task' },
       ]
     }],
 }

diff --git a/.vitepress/inlined-scripts/restorePreference.js b/.vitepress/inlined-scripts/restorePreference.js
@@ -5,7 +5,7 @@
       document.documentElement.classList.add(cls)
     }
   }
-  restore('vue-docs-prefer-composition', 'prefer-composition')
+  restore('docs-prefer-composition', 'prefer-composition')
   restore('vue-docs-prefer-sfc', 'prefer-sfc', true)
 
   window.__VUE_BANNER_ID__ = 'wip'

diff --git a/.vitepress/theme/components/Home.vue b/.vitepress/theme/components/Home.vue
@@ -1,39 +1,40 @@
 <script setup lang="ts">
+import 'animate.css'
+
 import { ref, onMounted, onUnmounted } from 'vue'
 
 import axios from 'axios'
-import 'animate.css'
 
 import NewsLetter from './NewsLetter.vue'
 import SponsorsGroup from './SponsorsGroup.vue'
 
 const url =
   'https://42541d62-1eb3-4f4a-b656-cc98d4542086.bspapp.com/http/epic'
-const storageKey = 'vue-theme-appearance'
-let userPreference = localStorage.getItem(storageKey) || 'auto'
+const storageKey = 'theme-appearance'
+let userPreference = 'auto'
 const epic = ref(' 世界上有10类人：一类是懂计算机的，一类是不懂的。')
 const appearance = ref(userPreference)
 
-const fetchepic = async () => {
-  const response = await axios.get(url)
-  const [_epic] = response.data.data
-  epic.value = ''
-  setTimeout(() => {
-    epic.value = _epic.contant
-  }, 700)
+const fetchepic = () => {
+  setTimeout(async () => {
+    const response = await axios.get(url)
+    const [_epic] = response.data.data
+    epic.value = ''
+    setTimeout(() => {
+      epic.value = _epic.contant
+    }, 700)
+    fetchepic()
+  }, 12000)
 }
-let interval = setInterval(fetchepic, 15000)
 onMounted(() => {
-  setTimeout(() => {
-    fetchepic()
-  }, 5000)
+  appearance.value = localStorage.getItem(storageKey) || 'auto'
+  fetchepic()
   window.addEventListener('storage', (e) => {
     appearance.value = `${localStorage.getItem(storageKey)}`
   })
 })
 
 onUnmounted(() => {
-  clearInterval(interval)
   window.removeEventListener('storage', () => {})
 })
 </script>
@@ -150,7 +151,7 @@ section {
 
 html:not(.dark) .accent,
 .dark .tagline {
-  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
+  background: -webkit-linear-gradient(315deg, #61dafb 25%, #647eff);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

diff --git a/.vitepress/theme/components/preferences.ts b/.vitepress/theme/components/preferences.ts
@@ -7,7 +7,7 @@ const get = (key: string, defaultValue = false): boolean =>
     ? JSON.parse(localStorage.getItem(key) || String(defaultValue))
     : defaultValue
 
-export const preferCompositionKey = 'vue-docs-prefer-composition'
+export const preferCompositionKey = 'docs-prefer-composition'
 export const preferComposition = ref(get(preferCompositionKey))
 
 export const preferSFCKey = 'vue-docs-prefer-sfc'

diff --git a/.vitepress/theme/lib/core/components/VTSwitchAppearance.vue b/.vitepress/theme/lib/core/components/VTSwitchAppearance.vue
@@ -3,7 +3,7 @@ import VTSwitch from './VTSwitch.vue'
 import VTIconSun from './icons/VTIconSun.vue'
 import VTIconMoon from './icons/VTIconMoon.vue'
 
-const storageKey = 'vue-theme-appearance'
+const storageKey = 'theme-appearance'
 const toggle =
   typeof localStorage !== 'undefined' ? useAppearance() : () => {}
 

diff --git a/.vitepress/theme/lib/core/styles/variables.css b/.vitepress/theme/lib/core/styles/variables.css
@@ -7,126 +7,127 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vt-c-white: #ffffff;
+  --vt-c-white     : #ffffff;
   --vt-c-white-soft: #f9f9f9;
   --vt-c-white-mute: #f1f1f1;
 
-  --vt-c-black: #1a1a1a;
+  --vt-c-black     : #1a1a1a;
   --vt-c-black-pure: #000000;
   --vt-c-black-soft: #242424;
   --vt-c-black-mute: #2f2f2f;
 
-  --vt-c-indigo: #213547;
-  --vt-c-indigo-soft: #476582;
+  --vt-c-indigo      : #213547;
+  --vt-c-indigo-soft : #476582;
   --vt-c-indigo-light: #aac8e4;
 
-  --vt-c-gray: #8e8e8e;
+  --vt-c-gray        : #8e8e8e;
   --vt-c-gray-light-1: #aeaeae;
   --vt-c-gray-light-2: #c7c7c7;
   --vt-c-gray-light-3: #d1d1d1;
   --vt-c-gray-light-4: #e5e5e5;
   --vt-c-gray-light-5: #f2f2f2;
-  --vt-c-gray-dark-1: #636363;
-  --vt-c-gray-dark-2: #484848;
-  --vt-c-gray-dark-3: #3a3a3a;
-  --vt-c-gray-dark-4: #282828;
-  --vt-c-gray-dark-5: #202020;
+  --vt-c-gray-dark-1 : #636363;
+  --vt-c-gray-dark-2 : #484848;
+  --vt-c-gray-dark-3 : #3a3a3a;
+  --vt-c-gray-dark-4 : #282828;
+  --vt-c-gray-dark-5 : #202020;
 
   --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
   --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+  --vt-c-divider-dark-1 : rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2 : rgba(84, 84, 84, 0.48);
 
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.70);
-  --vt-c-text-light-3: rgba(60, 60, 60, 0.33);
-  --vt-c-text-light-4: rgba(60, 60, 60, 0.18);
+  --vt-c-text-light-1   : var(--vt-c-indigo);
+  --vt-c-text-light-2   : rgba(60, 60, 60, 0.70);
+  --vt-c-text-light-3   : rgba(60, 60, 60, 0.33);
+  --vt-c-text-light-4   : rgba(60, 60, 60, 0.18);
   --vt-c-text-light-code: var(--vt-c-indigo-soft);
 
-  --vt-c-text-dark-1: rgba(255, 255, 255, 0.87);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.60);
-  --vt-c-text-dark-3: rgba(235, 235, 235, 0.38);
-  --vt-c-text-dark-4: rgba(235, 235, 235, 0.18);
+  --vt-c-text-dark-1   : rgba(255, 255, 255, 0.87);
+  --vt-c-text-dark-2   : rgba(235, 235, 235, 0.60);
+  --vt-c-text-dark-3   : rgba(235, 235, 235, 0.38);
+  --vt-c-text-dark-4   : rgba(235, 235, 235, 0.18);
   --vt-c-text-dark-code: var(--vt-c-indigo-light);
 
-  --vt-c-green: #42b883;
-  --vt-c-green-light: #42d392;
-  --vt-c-green-lighter: #35eb9a;
-  --vt-c-green-dark: #33a06f;
-  --vt-c-green-darker: #155f3e;
+  /* --vt-c-green: #42b883; */
+  --vt-c-green        : #61dafb;
+  --vt-c-green-light  : #72dcfa;
+  --vt-c-green-lighter: #8ae0f8;
+  --vt-c-green-dark   : #4ab8d6;
+  --vt-c-green-darker : #31a1c0;
 
-  --vt-c-blue: #3b8eed;
-  --vt-c-blue-light: #549ced;
+  --vt-c-blue        : #3b8eed;
+  --vt-c-blue-light  : #549ced;
   --vt-c-blue-lighter: #50a2ff;
-  --vt-c-blue-dark: #3468a3;
-  --vt-c-blue-darker: #255489;
+  --vt-c-blue-dark   : #3468a3;
+  --vt-c-blue-darker : #255489;
 
-  --vt-c-yellow: #ffc517;
-  --vt-c-yellow-light: #ffe417;
+  --vt-c-yellow        : #ffc517;
+  --vt-c-yellow-light  : #ffe417;
   --vt-c-yellow-lighter: #ffff17;
-  --vt-c-yellow-dark: #e0ad15;
-  --vt-c-yellow-darker: #bc9112;
+  --vt-c-yellow-dark   : #e0ad15;
+  --vt-c-yellow-darker : #bc9112;
 
-  --vt-c-red: #ed3c50;
-  --vt-c-red-light: #f43771;
+  --vt-c-red        : #ed3c50;
+  --vt-c-red-light  : #f43771;
   --vt-c-red-lighter: #fd1d7c;
-  --vt-c-red-dark: #cd2d3f;
-  --vt-c-red-darker: #ab2131;
+  --vt-c-red-dark   : #cd2d3f;
+  --vt-c-red-darker : #ab2131;
 
-  --vt-c-purple: #de41e0;
-  --vt-c-purple-light: #e936eb;
+  --vt-c-purple        : #de41e0;
+  --vt-c-purple-light  : #e936eb;
   --vt-c-purple-lighter: #f616f8;
-  --vt-c-purple-dark: #823c83;
-  --vt-c-purple-darker: #602960;
+  --vt-c-purple-dark   : #823c83;
+  --vt-c-purple-darker : #602960;
 }
 
 /**
  * Colors Theme
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vt-c-bg: var(--vt-c-white);
+  --vt-c-bg     : var(--vt-c-white);
   --vt-c-bg-soft: var(--vt-c-white-soft);
   --vt-c-bg-mute: var(--vt-c-white-mute);
 
-  --vt-c-divider: var(--vt-c-divider-light-1);
+  --vt-c-divider      : var(--vt-c-divider-light-1);
   --vt-c-divider-light: var(--vt-c-divider-light-2);
 
-  --vt-c-divider-inverse: var(--vt-c-divider-dark-1);
+  --vt-c-divider-inverse      : var(--vt-c-divider-dark-1);
   --vt-c-divider-inverse-light: var(--vt-c-divider-dark-2);
 
-  --vt-c-text-1: var(--vt-c-text-light-1);
-  --vt-c-text-2: var(--vt-c-text-light-2);
-  --vt-c-text-3: var(--vt-c-text-light-3);
-  --vt-c-text-4: var(--vt-c-text-light-4);
+  --vt-c-text-1   : var(--vt-c-text-light-1);
+  --vt-c-text-2   : var(--vt-c-text-light-2);
+  --vt-c-text-3   : var(--vt-c-text-light-3);
+  --vt-c-text-4   : var(--vt-c-text-light-4);
   --vt-c-text-code: var(--vt-c-text-light-code);
 
   --vt-c-text-inverse-1: var(--vt-c-text-dark-1);
   --vt-c-text-inverse-2: var(--vt-c-text-dark-2);
   --vt-c-text-inverse-3: var(--vt-c-text-dark-3);
   --vt-c-text-inverse-4: var(--vt-c-text-dark-4);
 
-  --vt-c-brand: var(--vt-c-green);
-  --vt-c-brand-light: var(--vt-c-green-light);
-  --vt-c-brand-dark: var(--vt-c-green-dark);
+  --vt-c-brand          : var(--vt-c-green-dark);
+  --vt-c-brand-light    : var(--vt-c-green-light);
+  --vt-c-brand-dark     : var(--vt-c-green-dark);
   --vt-c-brand-highlight: var(--vt-c-brand-dark);
 }
 
 .dark {
-  --vt-c-bg: var(--vt-c-black);
+  --vt-c-bg     : var(--vt-c-black);
   --vt-c-bg-soft: var(--vt-c-black-soft);
   --vt-c-bg-mute: var(--vt-c-black-mute);
 
-  --vt-c-divider: var(--vt-c-divider-dark-1);
+  --vt-c-divider      : var(--vt-c-divider-dark-1);
   --vt-c-divider-light: var(--vt-c-divider-dark-2);
 
-  --vt-c-divider-inverse: var(--vt-c-divider-light-1);
+  --vt-c-divider-inverse      : var(--vt-c-divider-light-1);
   --vt-c-divider-inverse-light: var(--vt-c-divider-light-2);
 
-  --vt-c-text-1: var(--vt-c-text-dark-1);
-  --vt-c-text-2: var(--vt-c-text-dark-2);
-  --vt-c-text-3: var(--vt-c-text-dark-3);
-  --vt-c-text-4: var(--vt-c-text-dark-4);
+  --vt-c-text-1   : var(--vt-c-text-dark-1);
+  --vt-c-text-2   : var(--vt-c-text-dark-2);
+  --vt-c-text-3   : var(--vt-c-text-dark-3);
+  --vt-c-text-4   : var(--vt-c-text-dark-4);
   --vt-c-text-code: var(--vt-c-text-dark-code);
 
   --vt-c-text-inverse-1: var(--vt-c-text-light-1);
@@ -166,4 +167,4 @@
 
 :root {
   --vt-nav-height: 55px;
-}
+}
diff --git a/.vitepress/theme/lib/vitepress/components/VPContentDocOutline.vue b/.vitepress/theme/lib/vitepress/components/VPContentDocOutline.vue
@@ -12,7 +12,9 @@ const filterHeaders = inject('filter-headers', null) as any
 const filteredHeaders = computed(() => {
   return filterHeaders
     ? page.value.headers.map((h) => {
-        return filterHeaders(h) ? h : Object.assign({}, h, { hidden: true })
+        return filterHeaders(h)
+          ? h
+          : Object.assign({}, h, { hidden: true })
       })
     : page.value.headers
 })
@@ -27,7 +29,7 @@ const handleClick = ({ target: el }: Event) => {
 <template>
   <div class="VPContentDocOutline" ref="container">
     <div class="outline-marker" ref="marker" />
-    <div class="outline-title">On this page</div>
+    <div class="outline-title">目录</div>
     <nav aria-labelledby="doc-outline-aria-label">
       <span id="doc-outline-aria-label" class="visually-hidden"
         >Table of Contents for current page</span
@@ -37,13 +39,18 @@ const handleClick = ({ target: el }: Event) => {
           v-for="{ text, link, children, hidden } in resolveHeaders(
             filteredHeaders
           )"
+          :key="link"
           v-show="!hidden"
         >
           <a class="outline-link" :href="link" @click="handleClick">{{
             text
           }}</a>
           <ul v-if="children && frontmatter.outline === 'deep'">
-            <li v-for="{ text, link, hidden } in children" v-show="!hidden">
+            <li
+              v-for="{ text, link, hidden } in children"
+              :key="link"
+              v-show="!hidden"
+            >
               <a
                 class="outline-link nested"
                 :href="link"

diff --git a/.vitepress/theme/lib/vitepress/components/VPNavBarExtra.vue b/.vitepress/theme/lib/vitepress/components/VPNavBarExtra.vue
@@ -14,7 +14,7 @@ const hasContent = computed(() => {
   <VTFlyout v-if="hasContent" class="VPNavBarExtra" label="extra navigation">
     <div v-if="config.appearance" class="vt-menu-group">
       <div class="vt-menu-item item">
-        <p class="vt-menu-label">Appearance</p>
+        <p class="vt-menu-label">夜间模式</p>
         <div class="vt-menu-action action">
           <VTSwitchAppearance />
         </div>

diff --git a/.vitepress/theme/lib/vitepress/components/VPNavScreenAppearance.vue b/.vitepress/theme/lib/vitepress/components/VPNavScreenAppearance.vue
@@ -7,7 +7,7 @@ const { config } = useConfig()
 
 <template>
   <div v-if="config.appearance" class="VPNavScreenAppearance">
-    <p class="text">Appearance</p>
+    <p class="text">夜间模式</p>
     <VTSwitchAppearance />
   </div>
 </template>

diff --git a/.vitepress/theme/lib/vitepress/config/inlined-scripts/applyDarkMode.js b/.vitepress/theme/lib/vitepress/config/inlined-scripts/applyDarkMode.js
@@ -1,5 +1,5 @@
 ;(() => {
-  const saved = localStorage.getItem('vue-theme-appearance')
+  const saved = localStorage.getItem('theme-appearance')
   if (
     !saved || saved === 'auto'
       ? window.matchMedia(`(prefers-color-scheme: dark)`).matches