From 9a7d5e43bc3577243363c8390119254b21cec4ee Mon Sep 17 00:00:00 2001
From: code-ManL <773890440@qq.com>
Date: Fri, 30 Jun 2023 00:48:29 +0800
Subject: [PATCH 1/5] feat: supports filtering documents

---
 src/client/pages/documentations.vue | 44 +++++++++++++++++++----------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/client/pages/documentations.vue b/src/client/pages/documentations.vue
index 42a41158..87cc01fe 100644
--- a/src/client/pages/documentations.vue
+++ b/src/client/pages/documentations.vue
@@ -3,11 +3,14 @@ import { rpc } from '../logic/rpc'
 import type { DocumentInfo } from '../../types'
 import { data } from '../logic/documentations'
 
+const rawItems = data
 const items = ref(data)
 const iframeViewUrl = ref('')
+let packagesName
+
 rpc.getPackages().then((res) => {
-  const packagesName = Object.keys(res.packages)
-  items.value = items.value.filter(item => packagesName.includes(item.id))
+  packagesName = Object.keys(res.packages)
+  items.value = rawItems.filter(item => packagesName.includes(item.id))
 })
 
 function navigate(data: DocumentInfo) {
@@ -17,24 +20,35 @@ function navigate(data: DocumentInfo) {
     iframeViewUrl.value = data.website
 }
 
+const keywords = ref('')
+
+watch(keywords, () => {
+  items.value = rawItems.filter(item => packagesName.includes(item.id) && (item.id.includes(keywords.value) || keywords.value.length === 0))
+})
+
 function back() {
   iframeViewUrl.value = ''
 }
 </script>
 
 <template>
-  <div v-if="iframeViewUrl" relative h-screen>
-    <IframeView :src="iframeViewUrl" />
-    <teleport to="body">
-      <span
-        fixed left-2 top-2 z-1000 h-8 w-8 flex cursor-pointer select-none items-center justify-center rounded-5
-        bg-base hover="text-primary" @click.prevent.stop="back"
-      >
-        <i tabler:arrow-back-up />
-      </span>
-    </teleport>
-  </div>
-  <div v-else grid grid-cols-minmax-400px h-screen select-none gap3 overflow-scroll p4 class="no-scrollbar">
-    <DocDetails v-for="(item, index) in items" :key="index" :data="item" @navigate="navigate" />
+  <div class="overflow-y-scroll">
+    <div border="b base" flex="~ col gap1" px4 py3 navbar-glass>
+      <VTextInput v-model="keywords" font-mono icon="carbon:search" placeholder="Filter Documentations" op50 />
+    </div>
+    <div v-if="iframeViewUrl">
+      <IframeView :src="iframeViewUrl" />
+      <teleport to="body">
+        <span
+          fixed left-2 top-2 z-1000 h-8 w-8 flex cursor-pointer select-none items-center justify-center rounded-5
+          bg-base hover="text-primary" @click.prevent.stop="back"
+        >
+          <i tabler:arrow-back-up />
+        </span>
+      </teleport>
+    </div>
+    <div v-else grid grid-cols-minmax-400px h-screen select-none gap3 overflow-scroll p4 class="no-scrollbar">
+      <DocDetails v-for="(item, index) in items" :key="index" :data="item" @navigate="navigate" />
+    </div>
   </div>
 </template>

From 855f6d16db9961abf01c40700d0ea546a53b83e9 Mon Sep 17 00:00:00 2001
From: liuseen-l <773890440@qq.com>
Date: Thu, 6 Jul 2023 11:32:02 +0800
Subject: [PATCH 2/5] chore: search by useFuse

---
 package.json                            | 1 +
 src/client/components/AssetPreview.vue  | 2 +-
 src/client/components/RoutePathItem.vue | 2 +-
 src/client/components/RoutesTable.vue   | 2 +-
 src/client/pages/documentations.vue     | 8 ++++++--
 src/client/pages/npm.vue                | 8 ++++----
 src/client/pages/settings.vue           | 2 +-
 src/types.ts                            | 4 ++--
 8 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 2c0bb3f1..9e2a5654 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "stub": "unbuild --stub",
     "lint": "eslint .",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "lint:fix": "eslint --fix .",
     "prepublishOnly": "npm run build",
     "release": "bumpp && nr changelog && npm publish",
     "dep:up": "taze -I major"
diff --git a/src/client/components/AssetPreview.vue b/src/client/components/AssetPreview.vue
index e076b0af..1e992eb5 100644
--- a/src/client/components/AssetPreview.vue
+++ b/src/client/components/AssetPreview.vue
@@ -19,7 +19,7 @@ defineProps<{
     />
     <div v-else-if="asset.type === 'text' && !textContent" i-carbon-document text-3xl op20 />
     <div v-else-if="asset.type === 'text' && textContent" w-full self-start p4>
-      <pre max-h-10rem of-hidden font-mono text-xs v-text="textContent" />
+      <pre max-h-10rem of-hidden text-xs font-mono v-text="textContent" />
     </div>
     <div v-else i-carbon-help text-3xl op20 />
   </div>
diff --git a/src/client/components/RoutePathItem.vue b/src/client/components/RoutePathItem.vue
index 73163acb..53262e8a 100644
--- a/src/client/components/RoutePathItem.vue
+++ b/src/client/components/RoutePathItem.vue
@@ -48,7 +48,7 @@ function navigate() {
             <div px2 text-sm op50>
               Fill params and navigate:
             </div>
-            <div flex="~" items-center p2 font-mono text-sm>
+            <div flex="~" items-center p2 text-sm font-mono>
               <template v-for="part, idx of parts" :key="idx">
                 <VTextInput
                   v-if="part[0] === ':'"
diff --git a/src/client/components/RoutesTable.vue b/src/client/components/RoutesTable.vue
index 88194217..99d8785b 100644
--- a/src/client/components/RoutesTable.vue
+++ b/src/client/components/RoutesTable.vue
@@ -57,7 +57,7 @@ const sorted = computed(() => {
               />
             </div>
           </td>
-          <td w-30 ws-nowrap pr-1 text-left font-mono text-sm op50>
+          <td w-30 ws-nowrap pr-1 text-left text-sm font-mono op50>
             {{ item.name ?? '-' }}
           </td>
         </tr>
diff --git a/src/client/pages/documentations.vue b/src/client/pages/documentations.vue
index 87cc01fe..5527110f 100644
--- a/src/client/pages/documentations.vue
+++ b/src/client/pages/documentations.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useFuse } from '@vueuse/integrations/useFuse'
 import { rpc } from '../logic/rpc'
 import type { DocumentInfo } from '../../types'
 import { data } from '../logic/documentations'
@@ -21,9 +22,12 @@ function navigate(data: DocumentInfo) {
 }
 
 const keywords = ref('')
+const { results: filterDocuments } = useFuse(keywords, rawItems.map(i => i.name), {
+  matchAllWhenSearchEmpty: true,
+})
 
-watch(keywords, () => {
-  items.value = rawItems.filter(item => packagesName.includes(item.id) && (item.id.includes(keywords.value) || keywords.value.length === 0))
+watch(filterDocuments, () => {
+  items.value = rawItems.filter(item => (filterDocuments.value.map(i => i.item).includes(item.name) && packagesName.includes(item.id)))
 })
 
 function back() {
diff --git a/src/client/pages/npm.vue b/src/client/pages/npm.vue
index 7f645972..0ae2d880 100644
--- a/src/client/pages/npm.vue
+++ b/src/client/pages/npm.vue
@@ -225,8 +225,8 @@ useInfiniteScroll(
               </td>
               <VDropdown max-w="10" placement="bottom-start" :distance="5">
                 <td
-                  hover="text-primary" h-7 cursor-pointer ws-nowrap pr-1 text-left font-mono text-sm lh-7 underline
-                  op70
+                  hover="text-primary"
+                  h-7 cursor-pointer ws-nowrap pr-1 text-left text-sm lh-7 font-mono underline op70
                 >
                   {{ item.activeVersion ?? item.version }}
                 </td>
@@ -243,12 +243,12 @@ useInfiniteScroll(
                   </ul>
                 </template>
               </VDropdown>
-              <td w-30 ws-nowrap pr-1 text-left font-mono text-sm underline op70 hover="text-primary">
+              <td w-30 ws-nowrap pr-1 text-left text-sm font-mono underline op70 hover="text-primary">
                 <a :href="item?.owner?.link" target="_blank">
                   {{ item?.owner?.name ?? '-' }}
                 </a>
               </td>
-              <td w-30 ws-nowrap pr-1 text-left font-mono text-sm op70>
+              <td w-30 ws-nowrap pr-1 text-left text-sm font-mono op70>
                 {{ item.humanDownloadsLast30Days }}
               </td>
               <td w-30 text-center>
diff --git a/src/client/pages/settings.vue b/src/client/pages/settings.vue
index 8be58c91..b8179611 100644
--- a/src/client/pages/settings.vue
+++ b/src/client/pages/settings.vue
@@ -104,7 +104,7 @@ const showTabGroup = ref(false)
           <div>
             <VDarkToggle v-slot="{ toggle, isDark }">
               <VButton n="primary" @click="toggle">
-                <div carbon-sun dark:carbon-moon translate-y--1px /> {{ isDark.value ? 'Dark' : 'Light' }}
+                <div carbon-sun translate-y--1px dark:carbon-moon /> {{ isDark.value ? 'Dark' : 'Light' }}
               </VButton>
             </VDarkToggle>
           </div>
diff --git a/src/types.ts b/src/types.ts
index 3f9a94c7..96b73518 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -105,8 +105,8 @@ export interface DocumentInfo {
   website: string
   github: string
   icon: string
-  tips: string
-  openInBlank: boolean
+  tips?: string
+  openInBlank?: boolean
 }
 
 export interface PackageInfo {

From 765f676c885cc7b14d036e17eb5b0e30143c85e8 Mon Sep 17 00:00:00 2001
From: liuseen-l <773890440@qq.com>
Date: Thu, 6 Jul 2023 11:38:53 +0800
Subject: [PATCH 3/5] style: lint:fix

---
 src/client/components/DockingPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/components/DockingPanel.vue b/src/client/components/DockingPanel.vue
index 2ecfe6f1..bb75f8a1 100644
--- a/src/client/components/DockingPanel.vue
+++ b/src/client/components/DockingPanel.vue
@@ -8,7 +8,7 @@ import { isInPopup } from '../logic/state'
       <PopupButton v-if="!isInPopup" />
       <VDarkToggle v-slot="{ toggle, isDark }">
         <VButton n="sm primary" @click="toggle">
-          <div carbon-sun dark:carbon-moon translate-y--1px />
+          <div carbon-sun translate-y--1px dark:carbon-moon />
           {{ isDark.value ? "Dark" : "Light" }}
         </VButton>
       </VDarkToggle>

From 45e5159d65294ffe7133f667cdab485fa013f04b Mon Sep 17 00:00:00 2001
From: liuseen-l <773890440@qq.com>
Date: Thu, 6 Jul 2023 14:32:31 +0800
Subject: [PATCH 4/5] feat: addDoc

---
 src/client/components.d.ts         |  1 +
 src/client/components/DocAdd.vue   | 68 ++++++++++++++++++++++++++++++
 src/client/logic/documentations.ts | 15 +++++--
 src/client/pages/settings.vue      | 49 ++++++++++-----------
 src/client/uno.config.ts           |  3 ++
 src/types.ts                       | 10 ++---
 6 files changed, 114 insertions(+), 32 deletions(-)
 create mode 100644 src/client/components/DocAdd.vue

diff --git a/src/client/components.d.ts b/src/client/components.d.ts
index 5ca18ad9..137bfcaf 100644
--- a/src/client/components.d.ts
+++ b/src/client/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
     AssetListItem: typeof import('./components/AssetListItem.vue')['default']
     AssetPreview: typeof import('./components/AssetPreview.vue')['default']
     ComponentTreeNode: typeof import('./components/ComponentTreeNode.vue')['default']
+    DocAdd: typeof import('./components/DocAdd.vue')['default']
     DocDetails: typeof import('./components/DocDetails.vue')['default']
     DockingPanel: typeof import('./components/DockingPanel.vue')['default']
     DrawerRight: typeof import('./components/DrawerRight.vue')['default']
diff --git a/src/client/components/DocAdd.vue b/src/client/components/DocAdd.vue
new file mode 100644
index 00000000..3f392504
--- /dev/null
+++ b/src/client/components/DocAdd.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { addDoc } from '../logic/documentations';
+const props = defineProps<{
+  modelValue?: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'cancel'): void
+  (event: 'add'): void
+}>()
+
+const value = useVModel(props, 'modelValue', emits, { passive: true })
+
+function hide() {
+  value.value = false
+}
+
+const tabs = [{
+  label: "id",
+  necessary: true
+},
+{
+  label: "name",
+  necessary: true
+},
+{
+  label: "website",
+  necessary: true
+},
+{
+  label: "github",
+  necessary: false
+},
+{
+  label: "icon",
+  necessary: false
+},
+{
+  label: "description",
+  necessary: false
+}
+]
+</script>
+
+<template>
+  <VDialog v-model="value">
+    <div flex="~ col" min-w-100px w-30vw gap-15px p4>
+      <div v-for="tab in tabs" flex items-center>
+        <label :class="{
+          'vue-prefix': tab.necessary
+        }" w-95px>{{
+  tab.label }}</label>
+        <VTextInput op50 :placeholder="tab.necessary ? 'the item is necessary' : 'the item is not necessary'" flex="1">
+        </VTextInput>
+      </div>
+      <div w-full flex items-center justify-end gap-10px>
+        <VButton border-none bg="gray-300/30" @click.prevent="$emit('cancel'); hide()">
+          cancel
+        </VButton>
+        <VButton border-none bg-primary text-white hover:text-white @click.prevent="addDoc; hide()">
+          add
+        </VButton>
+      </div>
+    </div>
+  </VDialog>
+</template>
+<style scoped>
+</style>
diff --git a/src/client/logic/documentations.ts b/src/client/logic/documentations.ts
index 080ef640..789eb97c 100644
--- a/src/client/logic/documentations.ts
+++ b/src/client/logic/documentations.ts
@@ -1,8 +1,8 @@
 import VueIcon from '../assets/icons/vue.svg'
 import PiniaIcon from '../assets/icons/pinia.svg'
 import VueUseIcon from '../assets/icons/vueuse.svg'
-
-export const data = [
+import type { DocumentInfo } from '../../types'
+export const data: DocumentInfo[] = reactive([
   {
     id: 'vue',
     name: 'Vue.js',
@@ -37,4 +37,13 @@ export const data = [
     github: 'https://github.com/vueuse/vueuse',
     icon: VueUseIcon,
   },
-]
+])
+
+
+export function addDoc(docInfo?) {
+  data.push({
+    id: 'hh',
+    name: 'hahha',
+    website: 'https://element-plus.org/zh-CN/component/button.html'
+  })
+}
diff --git a/src/client/pages/settings.vue b/src/client/pages/settings.vue
index 8be58c91..0dfd32fc 100644
--- a/src/client/pages/settings.vue
+++ b/src/client/pages/settings.vue
@@ -38,6 +38,8 @@ function toggleClickOutside() {
 }
 
 const showTabGroup = ref(false)
+
+const showDocAdd = ref(false)
 </script>
 
 <template>
@@ -51,10 +53,8 @@ const showTabGroup = ref(false)
           </h3>
           <VTooltip placement="top">
             <button aria-label="Nav group" @click="showTabGroup = !showTabGroup">
-              <div
-                material-symbols-tab-group-outline transition-colors hover:text-primary
-                :class="{ 'text-primary': showTabGroup }"
-              />
+              <div material-symbols-tab-group-outline transition-colors hover:text-primary
+                :class="{ 'text-primary': showTabGroup }" />
             </button>
             <template #popper>
               <div>Nav group</div>
@@ -63,28 +63,20 @@ const showTabGroup = ref(false)
         </div>
         <div v-if="!showTabGroup">
           <template v-for="[name, { tabs }] of groupedTabs" :key="name">
-            <div
-              v-if="tabs.length" flex="~ col gap-1" mx--1
-              :class="hiddenTabGroups.includes(name) ? 'op50 grayscale' : ''" pt-2
-            >
-              <VSwitch
-                flex="~ row-reverse" px2 py1 n-lime :model-value="!hiddenTabGroups.includes(name)"
-                @update:model-value="v => toggleTabCategory(name, v)"
-              >
+            <div v-if="tabs.length" flex="~ col gap-1" mx--1
+              :class="hiddenTabGroups.includes(name) ? 'op50 grayscale' : ''" pt-2>
+              <VSwitch flex="~ row-reverse" px2 py1 n-lime :model-value="!hiddenTabGroups.includes(name)"
+                @update:model-value="v => toggleTabCategory(name, v)">
                 <div flex="~ gap-2" flex-auto items-center justify-start>
                   <span capitalize op75>{{ name }}</span>
                 </div>
               </VSwitch>
               <div flex="~ col gap-1" border="~ base rounded" py3 pl4 pr2>
                 <template v-for="tab of getSortedTabs(tabs)" :key="tab.name">
-                  <VSwitch
-                    flex="~ row-reverse" py1 n-primary :model-value="!hiddenTabs.includes(tab.title)"
-                    @update:model-value="v => toggleTab(tab.title, v)"
-                  >
-                    <div
-                      flex="~ gap-2" flex-auto items-center justify-start
-                      :class="hiddenTabs.includes(tab.title) ? 'op25' : ''"
-                    >
+                  <VSwitch flex="~ row-reverse" py1 n-primary :model-value="!hiddenTabs.includes(tab.title)"
+                    @update:model-value="v => toggleTab(tab.title, v)">
+                    <div flex="~ gap-2" flex-auto items-center justify-start
+                      :class="hiddenTabs.includes(tab.title) ? 'op25' : ''">
                       <TabIcon text-xl :icon="tab.icon" :title="tab.title" />
                       <span>{{ tab.title }}</span>
                     </div>
@@ -119,14 +111,23 @@ const showTabGroup = ref(false)
             </option>
           </VSelect>
         </div>
+        <div py3 flex="~ col gap-1" border="b base">
+          <h3 mb1 text-lg>
+            Documentions
+          </h3>
+          <div>
+            <VButton n="primary" @click="showDocAdd = true">
+              add documents
+            </VButton>
+          </div>
+          <DocAdd  v-model="showDocAdd"></DocAdd>
+        </div>
         <div py3 flex="~ justify-between gap-1">
           <h3 mb1 text-lg>
             Close DevTools when clicking outside
           </h3>
-          <VSwitch
-            flex="~ row-reverse" py1 n-primary :model-value="closeOnOutsideClick"
-            @update:model-value="toggleClickOutside"
-          />
+          <VSwitch flex="~ row-reverse" py1 n-primary :model-value="closeOnOutsideClick"
+            @update:model-value="toggleClickOutside" />
         </div>
       </div>
     </div>
diff --git a/src/client/uno.config.ts b/src/client/uno.config.ts
index faf51ff6..78a1de80 100644
--- a/src/client/uno.config.ts
+++ b/src/client/uno.config.ts
@@ -35,6 +35,9 @@ export default defineConfig({
       // Vue tag
       'vue-tag-symbol': 'text-gray-400 dark:text-gray-600',
       'vue-tag-symbol-active': 'text-white/60',
+
+      // 
+      'vue-prefix':'after:content-["*"] after:color-primary after:ml-4px'
     },
     [/^theme-card-(\w+)$/, $ => `p2 flex gap2 border border-base bg-base items-center rounded min-w-40 min-h-25 justify-center transition-all saturate-0 op50 shadow hover:(op100 bg-${$[1]}/10 text-${$[1]}6 saturate-100)`],
   ],
diff --git a/src/types.ts b/src/types.ts
index 3f9a94c7..df9d3b63 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -101,12 +101,12 @@ export type BuiltinTab = WithOptional<Tab, 'group' | 'groupIndex' | 'disabled'>
 export interface DocumentInfo {
   id: string
   name: string
-  description: string
   website: string
-  github: string
-  icon: string
-  tips: string
-  openInBlank: boolean
+  description?: string
+  github?: string
+  icon?: string
+  tips?: string
+  openInBlank?: boolean
 }
 
 export interface PackageInfo {

From dbc2dd350215a9f209b3087e9986bf34873a971f Mon Sep 17 00:00:00 2001
From: liuseen-l <773890440@qq.com>
Date: Thu, 6 Jul 2023 16:36:04 +0800
Subject: [PATCH 5/5] fix: remove match bug

---
 src/client/logic/documentations.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/logic/documentations.ts b/src/client/logic/documentations.ts
index 9dc9007c..d1d322c4 100644
--- a/src/client/logic/documentations.ts
+++ b/src/client/logic/documentations.ts
@@ -50,7 +50,7 @@ export function addDoc(docInfo: DocumentInfo) {
 }
 
 export function removeDoc(id: string) {
-  const idx = data.value.findIndex(i => i.id === id)
+  const idx = data.value.findIndex(i => i.name === id)
   data.value.splice(idx, 1)
 }