perf: new redis view

pull/31/head
xingyu 2023-08-12 18:54:22 +08:00
parent 4ee3977f80
commit f4cd4fbb52
7 changed files with 25 additions and 140 deletions

View File

@ -6,36 +6,3 @@ import { defHttp } from '@/utils/http/axios'
export function getCache() {
return defHttp.get({ url: '/infra/redis/get-monitor-info' })
}
// 获取模块
export function getKeyDefineList() {
return defHttp.get({ url: '/infra/redis/get-key-define-list' })
}
/**
* redis key
*/
export function getKeyList(keyTemplate: string) {
return defHttp.get({
url: '/infra/redis/get-key-list',
params: {
keyTemplate,
},
})
}
// 获取缓存内容
export function getKeyValue(key: string) {
return defHttp.get({ url: `/infra/redis/get-key-value?key=${key}` })
}
// 根据键名删除缓存
export function deleteKey(key: string) {
return defHttp.delete({ url: `/infra/redis/delete-key?key=${key}` })
}
export function deleteKeys(keyTemplate: string) {
return defHttp.delete({
url: '/infra/redis/delete-keys?',
params: {
keyTemplate,
},
})
}

View File

@ -12,8 +12,6 @@ import { useMessage } from '@/hooks/web/useMessage'
defineOptions({ name: 'InfraPreviewModal' })
const TabPane = Tabs.TabPane
const { createMessage } = useMessage()
const fileTree = ref([])
@ -123,24 +121,22 @@ async function copy(text: string) {
<div class="flex">
<Card class="w-1/4 min-w-130">
<BasicTree
title="文件夹列表"
toolbar
:default-expand-all="true"
tree-wrapper-class-name="h-[800px] overflow-auto"
:click-row-to-expand="false"
:tree-data="fileTree"
:field-names="{ key: 'id', title: 'label' }"
title="文件夹列表" toolbar :default-expand-all="true" tree-wrapper-class-name="h-[800px] overflow-auto"
:click-row-to-expand="false" :tree-data="fileTree" :field-names="{ key: 'id', title: 'label' }"
@select="handleSelect"
/>
</Card>
<Card class="w-3/4">
<Tabs v-model:activeKey="activeKey">
<TabPane v-for="item in previewCodes" :key="item.filePath" :tab="item.filePath.substring(item.filePath.lastIndexOf('/') + 1)">
<a-button type="link" style="float: right" @click="copy(item.code)">
<Tabs.TabPane
v-for="item in previewCodes" :key="item.filePath"
:tab="item.filePath.substring(item.filePath.lastIndexOf('/') + 1)"
>
<a-button type="link" style="float: right; padding: 4px 60px;" @click="copy(item.code)">
复制
</a-button>
<CodeEditor class="max-h-200" :value="item.code as any" :mode="modeValue" :readonly="true" />
</TabPane>
<CodeEditor class="max-h-200" :value="item.code" :mode="modeValue" :readonly="true" />
</Tabs.TabPane>
</Tabs>
</Card>
</div>

View File

@ -6,8 +6,8 @@ import { useECharts } from '@/hooks/web/useECharts'
import { propTypes } from '@/utils/propTypes'
const props = defineProps({
loading: Boolean,
commandStats: propTypes.array,
loading: propTypes.bool.def(true),
commandStats: propTypes.array.def([]),
width: propTypes.string.def('100%'),
height: propTypes.string.def('300px'),
})

View File

@ -6,8 +6,8 @@ import { useECharts } from '@/hooks/web/useECharts'
import { propTypes } from '@/utils/propTypes'
const props = defineProps({
loading: Boolean,
memoryHuman: String,
loading: propTypes.bool.def(true),
memoryHuman: propTypes.string.def('0'),
width: propTypes.string.def('100%'),
height: propTypes.string.def('300px'),
})
@ -36,7 +36,7 @@ watch(
},
data: [
{
value: Number.parseFloat(props.memoryHuman as unknown as number),
value: Number.parseFloat(props.memoryHuman),
name: '内存消耗',
},
],

View File

@ -2,14 +2,14 @@
import { ref } from 'vue'
import { List } from 'ant-design-vue'
import { formSchema } from '../redis.data'
import { useI18n } from '@/hooks/web/useI18n'
import { BasicForm, useForm } from '@/components/Form'
import { BasicModal, useModalInner } from '@/components/Modal'
import { deleteKey, getKeyList } from '@/api/infra/redis'
defineOptions({ name: 'RedisModal' })
const ListItem = List.Item
const ListItemMeta = List.Item.Meta
const { t } = useI18n()
const listData = ref<any[]>([])
const [registerForm, { setFieldsValue, resetFields }] = useForm({
@ -41,16 +41,16 @@ function handleDeleteKey(item) {
<BasicModal v-bind="$attrs" title="缓存模块" @register="registerModal">
<List :data-source="listData">
<template #renderItem="{ item }">
<ListItem>
<ListItemMeta>
<List.Item>
<template #actions>
<a @click="handleDeleteKey(item)">{{ t('action.delete') }}</a>
</template>
<List.Item.Meta>
<template #title>
<a @click="handleKeyValue(item)">{{ item }}</a>
</template>
<template #actions>
<a @click="handleDeleteKey(item)"></a>
</template>
</ListItemMeta>
</ListItem>
</List.Item.Meta>
</List.Item>
</template>
</List>
<BasicForm @register="registerForm" />

View File

@ -1,11 +1,8 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { baseInfoSchema, tableSchema } from './redis.data'
import RedisModal from './components/RedisModal.vue'
import { useModal } from '@/components/Modal'
import { baseInfoSchema } from './redis.data'
import { Description } from '@/components/Description'
import { BasicTable, useTable } from '@/components/Table'
import { getCache, getKeyDefineList } from '@/api/infra/redis'
import { getCache } from '@/api/infra/redis'
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
defineOptions({ name: 'InfraRedis' })
@ -27,25 +24,6 @@ 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()
})
@ -64,9 +42,5 @@ onMounted(async () => {
<CommandStats class="md:w-1/2 w-full" :loading="loading" :command-stats="commandStats" />
<Memory class="md:w-1/2 w-full" :loading="loading" :memory-human="memoryHuman" />
</div>
<div class="md:flex enter-y mt-4">
<BasicTable @register="registerTable" @row-click="openKeyTemplate" />
</div>
<RedisModal @register="registerModal" />
</div>
</template>

View File

@ -1,7 +1,4 @@
import type { DescItem } from '@/components/Description'
import type { BasicColumn, FormSchema } from '@/components/Table'
import { useRender } from '@/components/Table'
import { DICT_TYPE } from '@/utils/dict'
export const baseInfoSchema: DescItem[] = [
{
@ -65,52 +62,3 @@ 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',
},
]