feat(admin): a little test for rpc data

packages/client/client/components/index.ts

@@ -3,6 +3,7 @@ import Markdown from 'marked-vue'
 import components, { SchemaBase } from '@koishijs/components'
 import Element, { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 
+import { store } from '../data'
 import common from './common'
 import Dynamic from './dynamic.vue'
 import Perms from './perms.vue'

plugins/admin/client/group.vue

@@ -31,12 +31,12 @@
           </el-input>
         </div>
         <div class="k-tab-group-title">用户组</div>
-        <k-tab-group :data="store.admin.group" v-model="activeGroup" #="{ id }">
-          {{ store.locales?.[`permission.${id}`] || store.admin.group[id].name || '未命名' }}
+        <k-tab-group :data="data.group" v-model="activeGroup" #="{ id }">
+          {{ store.locales?.[`permission.${id}`] || data.group[id].name || '未命名' }}
         </k-tab-group>
         <div class="k-tab-group-title">用户组路线</div>
-        <k-tab-group :data="store.admin.track" v-model="activeTrack" #="{ id }">
-          {{ store.locales?.[`permission-track.${id}`] || store.admin.track[id].name || '未命名' }}
+        <k-tab-group :data="data.track" v-model="activeTrack" #="{ id }">
+          {{ store.locales?.[`permission-track.${id}`] || data.track[id].name || '未命名' }}
         </k-tab-group>
       </el-scrollbar>
     </template>
@@ -45,7 +45,7 @@
       <template v-if="activeGroup">
         <!-- nav: 前往本地化翻译 -->
         <h2 class="k-schema-header">用户管理</h2>
-        <p>此用户组内当前共有 {{ store.admin.group[activeGroup].count }} 个用户。</p>
+        <p>此用户组内当前共有 {{ data.group[activeGroup].count }} 个用户。</p>
         <el-button @click="showUserDialog = true">添加用户</el-button>
       </template>
 
@@ -65,7 +65,7 @@
 
       <el-select v-model="permission">
         <el-option
-          v-for="id in [...Object.keys(store.admin.group).map(id => `group:${id}`), ...active.type === 'track' ? [] : store.permissions]"
+          v-for="id in [...Object.keys(data.group).map(id => `group:${id}`), ...active.type === 'track' ? [] : store.permissions]"
           :key="id"
           :value="id">
           <permission-name :id="id" />
@@ -103,13 +103,16 @@
 
 <script lang="ts" setup>
 
-import { message, send, store } from '@koishijs/client'
+import { message, send, store, useRpc } from '@koishijs/client'
+import type Admin from '@koishijs/plugin-admin/src'
 import { useRoute, useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
 import {} from '@koishijs/plugin-locales'
 import { debounce } from 'throttle-debounce'
 import PermissionName from './name.vue'
 
+const data = useRpc<Admin.Data>()
+
 const route = useRoute()
 const router = useRouter()
 
@@ -132,12 +135,12 @@ interface Active {
 const active = computed<Active>(() => {
   if (route.path.startsWith('/admin/group/')) {
     const id = route.path.slice(13)
-    if (id in store.admin.group) {
+    if (id in data.group) {
       return { type: 'group', id }
     }
   } else if (route.path.startsWith('/admin/track/')) {
     const id = route.path.slice(13)
-    if (id in store.admin.track) {
+    if (id in data.track) {
       return { type: 'track', id }
     }
   }
@@ -150,7 +153,7 @@ const activeGroup = computed<string>({
     return active.value.id
   },
   set(id) {
-    if (!(id in store.admin.group)) id = ''
+    if (!(id in data.group)) id = ''
     router.replace('/admin/group/' + id)
   },
 })
@@ -161,13 +164,13 @@ const activeTrack = computed<string>({
     return active.value.id
   },
   set(id) {
-    if (!(id in store.admin.track)) id = ''
+    if (!(id in data.track)) id = ''
     router.replace('/admin/track/' + id)
   },
 })
 
 const permissions = computed(() => {
-  return store.admin[active.value.type][active.value.id].permissions
+  return data[active.value.type][active.value.id].permissions
 })
 
 const renameItem = debounce(1000, (type: 'group' | 'track', id: number, name: string) => {
@@ -176,10 +179,10 @@ const renameItem = debounce(1000, (type: 'group' | 'track', id: number, name: st
 
 const renameInput = computed<string>({
   get() {
-    return store.admin[active.value.type][active.value.id].name
+    return data[active.value.type][active.value.id].name
   },
   set(value) {
-    store.admin[active.value.type][active.value.id].name = value
+    data[active.value.type][active.value.id].name = value
     renameItem(active.value.type, +active.value.id, value)
   },
 })
@@ -197,14 +200,14 @@ async function deleteItem() {
 }
 
 async function addPermission() {
-  const { permissions } = store.admin[active.value.type][active.value.id]
+  const { permissions } = data[active.value.type][active.value.id]
   permissions.push(permission.value)
   permission.value = null
   await send(`admin/update-${active.value.type}`, +active.value.id, permissions)
 }
 
 async function removePermission(index: number) {
-  const { permissions } = store.admin[active.value.type][active.value.id]
+  const { permissions } = data[active.value.type][active.value.id]
   permissions.splice(index, 1)
   await send(`admin/update-${active.value.type}`, +active.value.id, permissions)
 }

plugins/admin/client/index.ts

@@ -16,7 +16,6 @@ export default (ctx: Context) => {
     icon: 'activity:group',
     order: 500,
     authority: 4,
-    fields: ['admin'],
     component: UserGroup,
   })
 }

plugins/admin/client/name.vue

@@ -3,7 +3,7 @@
     指令：{{ id.slice(8) }}
   </template>
   <template v-else-if="id.startsWith('group:')">
-    用户组：{{ store.locales?.[`permission.${id}`] || store.admin.group[id.slice(6)].name || '未命名' }}
+    用户组：{{ store.locales?.[`permission.${id}`] || data.group[id.slice(6)].name || '未命名' }}
   </template>
   <template v-else>
     {{ store.locales?.[`permission.${id}`] || id }}
@@ -12,10 +12,13 @@
 
 <script setup lang="ts">
 
-import { store } from '@koishijs/client'
+import { store, useRpc } from '@koishijs/client'
+import type Admin from '@koishijs/plugin-admin/src'
 
 defineProps({
   id: String,
 })
 
+const data = useRpc<Admin.Data>()
+
 </script>