perf: docs

gkd-kit · Jul 19, 2024 · 72d79e7 · 72d79e7
1 parent 2165e3e
commit 72d79e7
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 45 deletions.
diff --git a/docs/.vitepress/components/GImg.ts b/docs/.vitepress/components/GImg.ts
@@ -0,0 +1,22 @@
+import { defineComponent, h } from 'vue';
+import { NImage } from './naive';
+import { convertSrc } from '../utils/img';
+
+const GImg = defineComponent<{
+  src: string;
+  width?: number | string;
+}>(
+  (props) => {
+    return () => {
+      return h(NImage, {
+        src: convertSrc(props.src),
+        width: props.width,
+      });
+    };
+  },
+  {
+    props: ['src', 'width'],
+  },
+);
+
+export default GImg;
diff --git a/docs/.vitepress/components/ImageTable.vue b/docs/.vitepress/components/ImageTable.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { convertSrc } from '../utils/img';
-import { NImage, NImageGroup } from '../utils/naive';
+import { NImage, NImageGroup } from './naive';
 
 withDefaults(
   defineProps<{

diff --git a/docs/.vitepress/components/index.ts b/docs/.vitepress/components/index.ts
@@ -0,0 +1,13 @@
+import naiveComponents from './naive';
+import GImg from './GImg';
+import ImageTable from './ImageTable.vue';
+import IdentifierField from './IdentifierField.vue';
+import ApkDownloadButton from './ApkDownloadButton.vue';
+
+export default {
+  ...naiveComponents,
+  GImg,
+  ImageTable,
+  IdentifierField,
+  ApkDownloadButton
+};
diff --git a/docs/.vitepress/utils/naive.ts → docs/.vitepress/components/naive.ts b/docs/.vitepress/utils/naive.ts → docs/.vitepress/components/naive.ts
@@ -1,21 +1,32 @@
-import { defineComponent,h } from 'vue'; 
-import { DefaultSlotCpt, defineVitePressAsyncComponent } from './async';
+import { defineComponent, h } from 'vue';
+import { DefaultSlotCpt, defineVitePressAsyncComponent } from '../utils/async';
 
-const ImgCpt = defineComponent(
+const FakeNImage = defineComponent(
   (props, ctx) => {
     return () => {
-      return h('img', { ...ctx.attrs, ...props });
+      return h(
+        'div',
+        { class: 'n-image' },
+        h('img', { ...ctx.attrs, ...props }),
+      );
     };
   },
   { props: ['src'] },
 );
 
 export const NImage = defineVitePressAsyncComponent({
   loader: () => import('naive-ui/es/image').then((m) => m.NImage),
-  loadingComponent: ImgCpt,
+  loadingComponent: FakeNImage,
 });
 
 export const NImageGroup = defineVitePressAsyncComponent({
   loader: () => import('naive-ui/es/image').then((m) => m.NImageGroup),
   loadingComponent: DefaultSlotCpt,
 });
+
+const naiveComponents = {
+  NImage,
+  NImageGroup,
+};
+
+export default naiveComponents;
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,12 +1,14 @@
 import 'uno.css';
 import type { Theme } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
+import components from '../components';
 import './custom.css';
-import ImageTable from '../components/ImageTable.vue';
 
 export default {
   extends: DefaultTheme,
   enhanceApp({ app }) {
-    app.component('ImageTable', ImageTable);
+    Object.entries(components).forEach(([name, component]) => {
+      app.component(name, component);
+    });
   },
 } satisfies Theme;
diff --git a/docs/.vitepress/utils/async.ts b/docs/.vitepress/utils/async.ts
@@ -11,6 +11,7 @@ export const DefaultSlotCpt = defineComponent((_, ctx) => {
   };
 });
 
+// TODO: Hydration completed but contains mismatches
 export const defineVitePressAsyncComponent = <
   T extends Component = {
     new (): ComponentPublicInstance;

diff --git a/docs/.vitepress/utils/img.ts b/docs/.vitepress/utils/img.ts
@@ -1,6 +1,3 @@
-import { defineComponent, h } from 'vue';
-import { NImage } from './naive';
-
 const mirrorHost = () => {
   return `https://registry.npmmirror.com/@gkd-kit/assets/${ASSETS_VERSION}/files/assets/`;
 };
@@ -15,20 +12,3 @@ export const convertSrc = (name: string): string => {
   }
   return mirrorHost() + name;
 };
-
-export const GImg = defineComponent<{
-  src: string;
-  width?: number | string;
-}>(
-  (props) => {
-    return () => {
-      return h(NImage, {
-        src: convertSrc(props.src),
-        width: props.width,
-      });
-    };
-  },
-  {
-    props: ['src', 'width'],
-  },
-);
diff --git a/docs/guide/index.md b/docs/guide/index.md
@@ -1,9 +1,5 @@
 # 开始使用 {#title}
 
-<script setup>
-import ApkDownloadButton from '/.vitepress/components/ApkDownloadButton.vue';
-</script>
-
 ## 下载安装 {#install}
 
 - 镜像加速 <ApkDownloadButton />

diff --git a/docs/guide/what-is-gkd.md b/docs/guide/what-is-gkd.md
@@ -18,7 +18,7 @@ GKD 是一款基于无障碍，高级选择器，订阅规则的自定义屏幕
 
 <ImageTable
   :images="[
-    ['https://e.gkd.li/79b8a829-4106-415f-9659-2920f7b5ccb5', 'https://e.gkd.li/6755a005-33c2-4db9-acda-bac1e7a3632d', 'https://e.gkd.li/91ea9329-e943-4ea8-bb6e-987c22ac7b4d', 'https://e.gkd.li/1d672345-cf3e-4b2c-a606-53a53642abda'],
-    ['https://e.gkd.li/b600fa5d-284d-4dc8-9f8b-095826a73d95', 'https://e.gkd.li/aad60a98-ffa2-4c23-a934-92e65f6018ec', 'https://e.gkd.li/544c6aad-e2ee-42d6-9a1a-967d9d426bc9', 'https://e.gkd.li/dd262506-b1d3-4c25-b52c-765ad6de6a1e']
+    ['0026.png', '0027.png', '0028.png', '0029.png'],
+    ['0030.png', '0031.png', '0032.png', '0033.png']
   ]"
 />
diff --git a/docs/selector/index.md b/docs/selector/index.md
@@ -1,10 +1,5 @@
 # 选择器 {#title}
 
-<script setup>
-import IdentifierField from '/.vitepress/components/IdentifierField.vue';
-import { GImg } from '/.vitepress/utils/img.ts'
-</script>
-
 一个类似 CSS 选择器的选择器, 能联系节点上下文信息, 更容易也更精确找到目标节点
 
 ## 为什么需要选择器 {#why}
@@ -263,6 +258,8 @@ import { GImg } from '/.vitepress/utils/img.ts'
 
 关系操作符 表示查找节点的方向, 有 5 种关系操作符, `+`, `-`, `>`, `<`, `<<`
 
+<NImageGroup>
+
 | 操作符 |        名称        |                图例                 |                                  选择器                                   |
 | :----: | :----------------: | :---------------------------------: | :-----------------------------------------------------------------------: |
 |   +    |    前置兄弟节点    | <GImg src="0020.png" width="250" /> |   [\* + \[\_id=33\]](https://i.gkd.li/i/14045424?gkd=KiArIFtfaWQ9MzNd)    |
@@ -271,6 +268,8 @@ import { GImg } from '/.vitepress/utils/img.ts'
 |   <    |     直接子节点     | <GImg src="0023.png" width="250" /> |   [\* < \[\_id=89\]](https://i.gkd.li/i/14045424?gkd=KiA8IFtfaWQ9ODld)    |
 |   <<   | 子孙节点(深度先序) | <GImg src="0024.png" width="250" /> | [\* <<2 \[\_id=29\]](https://i.gkd.li/i/14045424?gkd=KiA8PDIgW19pZD0yOV0) |
 
+</NImageGroup>
+
 将 关系操作符 和 关系表达式 连接起来就得到了 关系选择器
 
 `A +(a1,a2,a3,a_n) B` : A 是 B 的前置兄弟节点, 并且 A.index 满足 B.index-(a_m), 其中 a_m 是元组的任意一个数字
@@ -326,12 +325,12 @@ TextView[id=`com.byted.pangle:id/tt_item_tv`][text=`不感兴趣`] <n LinearLayo
 
 如下是网页无障碍快照审查工具, 使用它的搜索框的选择器查询可以实时测试编写的选择器
 
-- <https://i.gkd.li/i/14045424>
-- <https://i.gkd.li/i/14034770>
-- <https://i.gkd.li/i/14031920>
-- <https://i.gkd.li/i/14018243>
-- <https://i.gkd.li/i/14011298>
-- <https://i.gkd.li/i/13999908>
+- [快照-14045424](https://i.gkd.li/i/14045424)
+- [快照-14034770](https://i.gkd.li/i/14034770)
+- [快照-14031920](https://i.gkd.li/i/14031920)
+- [快照-14018243](https://i.gkd.li/i/14018243)
+- [快照-14011298](https://i.gkd.li/i/14011298)
+- [快照-13999908](https://i.gkd.li/i/13999908)
 
 ## 一些注意 {#note}