refa: reduce config bundle size

packages/market/client/components/filter.vue

@@ -40,7 +40,7 @@
       <h2 class="text">{{ t('type.category') }}</h2>
     </div>
     <div
-      v-for="(title, key) in categories" :key="key" class="market-filter-item"
+      v-for="key in categories" :key="key" class="market-filter-item"
       :class="{ active: words.includes('category:' + key) }"
       @click="toggleCategory('category:' + key, $event)">
       <span class="icon"><market-icon :name="'solid:' + key"></market-icon></span>
@@ -56,10 +56,8 @@
 <script lang="ts" setup>
 
 import { computed, inject, ref, watch } from 'vue'
-import { Badge, badges, kConfig, validate, comparators, categories, resolveCategory } from '../utils'
+import { Badge, badges, kConfig, validate, comparators, categories, resolveCategory, useMarketI18n } from '../utils'
 import { AnalyzedPackage } from '@koishijs/registry'
-import { useI18n } from 'vue-i18n'
-import zhCN from '../locales/zh-CN.yml'
 import MarketIcon from '../icons'
 
 const props = defineProps<{
@@ -69,6 +67,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue'])
 
+const { t } = useMarketI18n()
+
 const config = inject(kConfig, {})
 
 const words = ref<string[]>()
@@ -140,18 +140,6 @@ function toggleQuery(item: Badge, event: MouseEvent) {
   emit('update:modelValue', words.value)
 }
 
-const { t, setLocaleMessage } = useI18n({
-  messages: {
-    'zh-CN': zhCN,
-  },
-})
-
-if (import.meta.hot) {
-  import.meta.hot.accept('../locales/zh-CN.yml', (module) => {
-    setLocaleMessage('zh-CN', module.default)
-  })
-}
-
 </script>
 
 <style lang="scss" scoped>

packages/market/client/locales/zh-CN.yml

@@ -18,6 +18,8 @@ sort:
   updated: 按更新时间
 
 category:
+  all: 所有插件
+  other: 未分类
   core: 核心功能
   adapter: 适配器
   storage: 存储服务

packages/market/client/utils.ts

@@ -1,6 +1,14 @@
 import { AnalyzedPackage, User } from '@koishijs/registry'
 import { InjectionKey } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Dict } from 'cosmokit'
+import zhCN from './locales/zh-CN.yml'
+
+export const useMarketI18n = () => useI18n({
+  messages: {
+    'zh-CN': zhCN,
+  },
+})
 
 export function getUsers(data: AnalyzedPackage) {
   const result: Record<string, User> = {}
@@ -20,45 +28,38 @@ export function getUsers(data: AnalyzedPackage) {
 const aWeekAgo = new Date(Date.now() - 1000 * 3600 * 24 * 7).toISOString()
 
 export interface Badge {
-  text: string
   query: string
   negate: string
   hidden?(config: MarketConfig, type: 'card' | 'filter'): boolean
 }
 
 export const badges: Dict<Badge> = {
   installed: {
-    text: '已下载',
     query: 'is:installed',
     negate: 'not:installed',
     hidden(config, type) {
       return !config.installed || type === 'card'
     },
   },
   verified: {
-    text: '官方认证',
     query: 'is:verified',
     negate: 'not:verified',
   },
   insecure: {
-    text: '不安全',
     query: 'is:insecure',
     negate: 'not:insecure',
   },
   preview: {
-    text: '开发中',
     query: 'is:preview',
     negate: 'not:preview',
   },
   newborn: {
-    text: '近期新增',
     query: `created:>${aWeekAgo}`,
     negate: `created:<${aWeekAgo}`,
   },
 }
 
 interface Comparator {
-  text: string
   icon: string
   hidden?: boolean
   compare(a: AnalyzedPackage, b: AnalyzedPackage, words: string[]): number
@@ -88,48 +89,43 @@ function getSimRating(data: AnalyzedPackage, words: string[]) {
 
 export const comparators: Dict<Comparator> = {
   default: {
-    text: '综合',
     icon: 'solid:all',
     compare: (a, b, words) => getSimRating(b, words) - getSimRating(a, words),
   },
   rating: {
-    text: '按评分',
     icon: 'star-full',
     compare: (a, b) => b.rating - a.rating,
   },
   download: {
-    text: '按下载量',
     icon: 'download',
     compare: (a, b) => (b.downloads?.lastMonth ?? 0) - (a.downloads?.lastMonth ?? 0),
   },
   created: {
-    text: '按创建时间',
     icon: 'heart-pulse',
     compare: (a, b) => b.createdAt.localeCompare(a.createdAt),
   },
   updated: {
-    text: '按更新时间',
     icon: 'tag',
     compare: (a, b) => b.updatedAt.localeCompare(a.updatedAt),
   },
 }
 
-export const categories = {
-  core: '核心功能',
-  adapter: '适配器',
-  storage: '存储服务',
-  extension: '扩展功能',
-  console: '控制台',
-  manage: '管理工具',
-  preset: '行为预设',
-  image: '图片服务',
-  media: '资讯服务',
-  tool: '实用工具',
-  ai: '人工智能',
-  meme: '趣味交互',
-  game: '娱乐玩法',
-  gametool: '游戏工具',
-}
+export const categories = [
+  'core',
+  'adapter',
+  'storage',
+  'extension',
+  'console',
+  'manage',
+  'preset',
+  'image',
+  'media',
+  'tool',
+  'ai',
+  'meme',
+  'game',
+  'gametool',
+]
 
 export interface MarketConfig {
   installed?(data: AnalyzedPackage): boolean
@@ -175,7 +171,7 @@ export function hasFilter(words: string[]) {
 }
 
 export function resolveCategory(name?: string) {
-  if (categories[name]) return name
+  if (categories.includes(name)) return name
   return 'other'
 }
 

plugins/config/client/components/select.vue

@@ -1,19 +1,14 @@
 <template>
   <el-dialog v-if="store.packages" v-model="showSelect" class="plugin-select">
     <template #header>
-      <span class="title">{{ extended[active] }} ({{ packages.length }})</span>
+      <slot name="title" :packages="packages">
+        <span class="title">选择插件</span>
+      </slot>
       <el-input ref="input" v-model="keyword" #suffix>
         <k-icon name="search"></k-icon>
       </el-input>
     </template>
-    <div class="tabs">
-      <el-scrollbar>
-        <span class="tab-item" v-for="(text, key) in extended" :key="key" @click.stop="active = key" :class="{ active: active === key }">
-          <market-icon :name="'solid:' + key"></market-icon>
-          <span class="title">{{ text }}</span>
-        </span>
-      </el-scrollbar>
-    </div>
+    <slot name="tabs" :packages="packages"></slot>
     <div class="content">
       <el-scrollbar>
         <div class="package" v-for="({ name, shortname, manifest }) in packages" :key="name" @click.stop="configure(shortname)">
@@ -28,30 +23,22 @@
 <script lang="ts" setup>
 
 import { router, send, store, useI18nText } from '@koishijs/client'
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, inject, nextTick, ref, watch } from 'vue'
 import { showSelect } from './utils'
-import { categories, resolveCategory, MarketIcon } from '@koishijs/market'
 import { useRoute } from 'vue-router'
+import { PackageProvider } from '@koishijs/plugin-config'
 
 const tt = useI18nText()
 
-const extended = {
-  all: '所有插件',
-  other: '未分类',
-  ...categories,
-}
-
-const active = ref('all')
 const keyword = ref('')
 const input = ref()
 
 const route = useRoute()
 
-const packages = computed(() => Object.values(store.packages).filter(({ name, shortname, manifest }) => {
-  const category = store.market?.data[name]?.category || manifest?.category
-  return name
-    && shortname.includes(keyword.value.toLowerCase())
-    && (active.value === 'all' || resolveCategory(category) === active.value)
+const filter = inject('plugin-select-filter', (data: PackageProvider.Data) => true)
+
+const packages = computed(() => Object.values(store.packages).filter(({ name, shortname }) => {
+  return name && shortname.includes(keyword.value.toLowerCase()) && filter(store.packages[name])
 }))
 
 function configure(shortname: string) {

plugins/config/client/index.ts

@@ -1,4 +1,5 @@
 import { Context } from '@koishijs/client'
+import { defineComponent, h, resolveComponent } from 'vue'
 import type {} from '@koishijs/plugin-config'
 import Settings from './components/index.vue'
 import Select from './components/select.vue'
@@ -9,7 +10,21 @@ export * from './components/utils'
 export default (ctx: Context) => {
   ctx.slot({
     type: 'global',
+    component: defineComponent(() => () => {
+      return h(resolveComponent('k-slot'), { name: 'plugin-select', single: true })
+    }),
+  })
+
+  ctx.slot({
+    type: 'plugin-select-base',
+    component: Select,
+    order: -1000,
+  })
+
+  ctx.slot({
+    type: 'plugin-select',
     component: Select,
+    order: -1000,
   })
 
   ctx.page({

plugins/market/client/extensions/index.ts

@@ -1,6 +1,7 @@
 import { Context, store } from '@koishijs/client'
 import Dependency from './dependency.vue'
 import Missing from './missing.vue'
+import Select from './select.vue'
 import Version from './version.vue'
 
 export default (ctx: Context) => {
@@ -22,4 +23,10 @@ export default (ctx: Context) => {
     component: Missing,
     when: () => !!(store.market && store.dependencies),
   })
+
+  ctx.slot({
+    type: 'plugin-select',
+    component: Select,
+    when: () => !!store.market,
+  })
 }

plugins/market/client/extensions/select.vue

@@ -0,0 +1,37 @@
+<template>
+  <k-slot name="plugin-select-base">
+    <template #title="{ packages }">
+      <span class="title">{{ t(`category.${active}`) }} ({{ packages.length }})</span>
+    </template>
+    <template #tabs>
+      <div class="tabs">
+        <el-scrollbar>
+          <span class="tab-item" v-for="key in extended" :key="key" @click.stop="active = key" :class="{ active: active === key }">
+            <market-icon :name="'solid:' + key"></market-icon>
+            <span class="title">{{ t(`category.${key}`) }}</span>
+          </span>
+        </el-scrollbar>
+      </div>
+    </template>
+  </k-slot>
+</template>
+
+<script setup lang="ts">
+
+import { store } from '@koishijs/client'
+import { categories, MarketIcon, useMarketI18n, resolveCategory } from '@koishijs/market'
+import { PackageProvider } from '@koishijs/plugin-config'
+import { provide, ref } from 'vue'
+
+const extended = ['all', 'other', ...categories]
+
+const { t } = useMarketI18n()
+
+const active = ref('all')
+
+provide('plugin-select-filter', ({ name, manifest }: PackageProvider.Data) => {
+  const category = store.market.data[name]?.category || manifest?.category
+  return active.value === 'all' || resolveCategory(category) === active.value
+})
+
+</script>