feat: redis

src/views/infra/redis/components/RedisModal.vue

@@ -0,0 +1,57 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" title="缓存模块">
+    <List :data-source="listData">
+      <template #renderItem="{ item }">
+        <ListItem>
+          <ListItemMeta>
+            <template #title>
+              <a @click="handleKeyValue(item)">{{ item }}</a>
+            </template>
+            <template #actions>
+              <a @click="handleDeleteKey(item)">删除</a>
+            </template>
+          </ListItemMeta>
+        </ListItem>
+      </template>
+    </List>
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup name="RedisModal">
+import { ref } from 'vue'
+import { List } from 'ant-design-vue'
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { BasicForm, useForm } from '@/components/Form'
+import { formSchema } from '../redis.data'
+import { deleteKey, getKeyList } from '@/api/infra/redis'
+
+const ListItem = List.Item
+const ListItemMeta = List.Item.Meta
+
+const listData = ref<any[]>([])
+
+const [registerForm, { setFieldsValue, resetFields }] = useForm({
+  labelWidth: 100,
+  baseColProps: { span: 24 },
+  schemas: formSchema,
+  showActionButtonGroup: false,
+  actionColOptions: { span: 23 }
+})
+
+const [registerModal, { setModalProps }] = useModalInner(async (data) => {
+  resetFields()
+  setModalProps({ confirmLoading: false })
+  console.info(data.record)
+  const res = await getKeyList(data.record)
+  listData.value = res
+})
+
+async function handleKeyValue(item) {
+  const res = await getKeyList(item)
+  setFieldsValue({ ...res })
+}
+
+function handleDeleteKey(item) {
+  deleteKey(item)
+}
+</script>

src/views/infra/redis/index.vue

@@ -9,16 +9,22 @@
     />
     <div class="md:flex enter-y mt-4">
       <CommandStats class="md:w-1/2 w-full" :loading="loading" :commandStats="commandStats" />
-      <Memory class="md:w-1/2 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" :memoryHuman="memoryHuman" />
+      <Memory class="md:w-1/2 w-full" :loading="loading" :memoryHuman="memoryHuman" />
     </div>
+    <div class="md:flex enter-y mt-4">
+      <BasicTable @register="registerTable" @row-click="openKeyTemplate" />
+    </div>
+    <RedisModal @register="registerModal" />
   </div>
 </template>
 <script lang="ts" setup name="Redis">
 import { ref, onMounted } from 'vue'
+import { useModal } from '@/components/Modal'
 import { Description } from '@/components/Description'
-import { baseInfoSchema } from './redis.data'
+import { BasicTable, useTable } from '@/components/Table'
-// import { getCache, getKeyDefineList, getKeyList, getKeyValue, deleteKey, deleteKeys } from '@/api/infra/redis'
+import { baseInfoSchema, tableSchema } from './redis.data'
-import { getCache } from '@/api/infra/redis'
+import RedisModal from './components/RedisModal.vue'
+import { getCache, getKeyDefineList } from '@/api/infra/redis'
 import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
 
 const CommandStats = createAsyncComponent(() => import('./components/CommandStats.vue'))
@@ -39,6 +45,25 @@ async function getList() {
   loading.value = false
 }
 
+const [registerTable] = useTable({
+  loading,
+  maxHeight: 400,
+  title: '缓存列表',
+  api: getKeyDefineList,
+  rowKey: 'id',
+  columns: tableSchema,
+  pagination: false,
+  useSearchForm: false,
+  showTableSetting: false,
+  showIndexColumn: false
+})
+
+const [registerModal, { openModal }] = useModal()
+
+function openKeyTemplate(keyDefine) {
+  openModal(true, { record: keyDefine.keyTemplate })
+}
+
 onMounted(async () => {
   await getList()
 })

src/views/infra/redis/redis.data.ts

@@ -1,4 +1,6 @@
 import { DescItem } from '@/components/Description'
+import { BasicColumn, FormSchema, useRender } from '@/components/Table'
+import { DICT_TYPE } from '@/utils/dict'
 
 export const baseInfoSchema: DescItem[] = [
   {
@@ -63,3 +65,52 @@ export const baseInfoSchema: DescItem[] = [
     }
   }
 ]
+
+export const tableSchema: BasicColumn[] = [
+  {
+    title: 'Key 模板',
+    dataIndex: 'keyTemplate',
+    width: 200
+  },
+  {
+    title: 'Key 类型',
+    dataIndex: 'keyType',
+    width: 100
+  },
+  {
+    title: 'Value 类型',
+    dataIndex: 'valueType',
+    width: 300
+  },
+  {
+    title: '超时类型',
+    dataIndex: 'timeoutType',
+    width: 180,
+    customRender: ({ text }) => {
+      return useRender.renderDict(text, DICT_TYPE.INFRA_REDIS_TIMEOUT_TYPE)
+    }
+  },
+  {
+    title: '超时时间',
+    dataIndex: 'timeout',
+    width: 100,
+    customRender: ({ text }) => {
+      return useRender.renderText(text === 0 ? 0 : text / 1000, '秒')
+    }
+  }
+]
+
+export const formSchema: FormSchema[] = [
+  {
+    label: '缓存键名',
+    field: 'cacheForm.key',
+    dynamicDisabled: true,
+    component: 'Input'
+  },
+  {
+    label: '缓存内容',
+    field: 'cacheForm.value',
+    dynamicDisabled: true,
+    component: 'InputTextArea'
+  }
+]