feat(manager): support search in settings

koishijs · Feb 12, 2022 · 937b5de · 937b5de
1 parent 109c982
commit 937b5de
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/plugins/frontend/components/client/layout/tab-item.vue b/plugins/frontend/components/client/layout/tab-item.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="k-tab-item k-menu-item" :class="{ active: label === modelValue }" @click="$emit('update:modelValue', label)">
+  <div class="k-tab-item k-menu-item"
+    :class="{ active: label === modelValue }"
+    @click="$emit('update:modelValue', label)">
     <slot>{{ label }}</slot>
   </div>
 </template>

diff --git a/plugins/frontend/components/client/notice/hint.vue b/plugins/frontend/components/client/notice/hint.vue
@@ -26,7 +26,6 @@ const emit = defineEmits(['update:modelValue'])
 const pointer = computed(() => props.modelValue !== undefined)
 
 function onClick() {
-  console.log(props)
   if (!pointer.value) return
   emit('update:modelValue', !props.modelValue)
 }

diff --git a/plugins/frontend/manager/client/settings/select.vue b/plugins/frontend/manager/client/settings/select.vue
@@ -1,14 +1,19 @@
 <template>
   <el-scrollbar class="plugin-select" ref="root">
     <div class="content">
+      <div class="search">
+        <el-input v-model="keyword" #suffix>
+          <k-icon name="search"></k-icon>
+        </el-input>
+      </div>
       <k-tab-item class="k-tab-group-title" label="" v-model="model">
         全局设置
       </k-tab-item>
       <div class="k-tab-group-title">
         运行中的插件
       </div>
       <k-tab-group
-        :data="store.packages" v-model="model"
+        :data="packages" v-model="model"
         :filter="data => data.id" #="data">
         <span :class="{ readonly: isReadonly(data) }">{{ data.shortname }}</span>
       </k-tab-group>
@@ -24,7 +29,7 @@
         </k-hint>
       </div>
       <k-tab-group
-        :data="store.packages" v-model="model"
+        :data="packages" v-model="model"
         :filter="data => !data.id && data.name && (!filtered || !isReadonly(data))" #="data">
         <span :class="{ readonly: isReadonly(data) }">{{ data.shortname }}</span>
       </k-tab-group>
@@ -48,8 +53,16 @@ const model = computed({
   set: val => emits('update:modelValue', val),
 })
 
+const packages = computed(() => {
+  return Object.fromEntries(Object.values(store.packages)
+    .filter(data => data.shortname.includes(keyword.value))
+    .sort((a, b) => a.shortname < b.shortname ? -1 : 1)
+    .map(data => [data.name, data]))
+})
+
 const root = ref<{ $el: HTMLElement }>(null)
-const filtered = ref(true)
+const filtered = ref(false)
+const keyword = ref('')
 
 function isReadonly(data: any) {
   return !data.root && data.id
@@ -77,6 +90,10 @@ onActivated(async () => {
     line-height: 2.25rem;
   }
 
+  .search {
+    padding: 0 1.5rem;
+  }
+
   .k-icon-filter {
     height: 15px;
   }

diff --git a/plugins/frontend/manager/client/settings/settings.vue b/plugins/frontend/manager/client/settings/settings.vue
@@ -43,7 +43,7 @@
         v-for="({ fulfilled, required, local, name }) in env.deps" :key="name"
         :type="fulfilled ? 'success' : required ? 'error' : 'primary'">
         {{ required ? '必需' : '可选' }}依赖：<k-dep-link :name="name"></k-dep-link>
-        ({{ local ? `${fulfilled ? '已' : '未'}启用，点击配置` : '未安装，点击添加' }})
+        ({{ local ? `${fulfilled ? '已' : '未'}启用` : '未安装，点击添加' }})
       </k-comment>
     </template>