complete string type look,delete,modify.

Author: fuyoo

components.d.ts

@@ -11,12 +11,16 @@ declare module 'vue' {
     CoHostTab: typeof import('./src/components/CoHostTab.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     NButton: typeof import('naive-ui')['NButton']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NEmpty: typeof import('naive-ui')['NEmpty']
     NInput: typeof import('naive-ui')['NInput']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NModalProvider: typeof import('naive-ui')['NModalProvider']
     NPopselect: typeof import('naive-ui')['NPopselect']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSpace: typeof import('naive-ui')['NSpace']
     NSplit: typeof import('naive-ui')['NSplit']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']

eslint.config.js

@@ -35,4 +35,11 @@ export default [
       'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     },
   },
+  { parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true, // 确保开启 jsx 支持
+      },
+    }}
 ]

src/App.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+
+import { useLocate } from '@/i18n'
+
+const { locate } = useLocate()
 </script>
 
 <template>
-  <n-message-provider>
-  <RouterView />
-  </n-message-provider>
+  <n-config-provider :locale="locate">
+    <n-message-provider>
+      <RouterView />
+    </n-message-provider>
+  </n-config-provider>
 </template>
 
 <style scoped></style>

src/hooks/pager.tsx

@@ -0,0 +1,34 @@
+import {reactive} from 'vue'
+
+export const usePager = (obj?: { page?: number; pageSize?: number }) => {
+  let cb = () => {}
+
+  const pager = reactive({
+    page: 1,
+    pageSize: 10,
+    pageCount: 0,
+    showSizePicker: true,
+    pageSizes: [10, 20, 50, 100],
+    onChange: (page: number) => {
+      pager.page = page
+      cb()
+    },
+    onUpdatePageSize: (pageSize: number) => {
+      pager.pageSize = pageSize
+      pager.page = 1
+      cb()
+    },
+    ...obj,
+  })
+  const onPageChanged = (func: () => void) => {
+    cb = func
+  }
+  const calcIndex = (index: number) => {
+    return (pager.page - 1) * pager.pageSize + index+ 1
+  }
+  return {
+    pager,
+    onPageChanged,
+    calcIndex
+  }
+}

src/i18n/en-US/index.ts

@@ -9,7 +9,7 @@ export default {
     ['Github', 'github.com/fuyoo/bs-redis-desktop-client'],
   ],
   settings: ['Settings', 'Language', 'Version'],
-  actions: ['Ok', 'Cancel', 'Delete', 'Modify', 'Add'],
+  actions: ['Ok', 'Cancel', 'Delete', 'Edit', 'Add', 'Insert'],
   home: {
     form: {
       lable: ['Name', 'Host', 'Port', 'Database', 'Username', 'Password', 'Cluster'],
@@ -30,4 +30,6 @@ export default {
   hostInfo: ['Memory', 'Server', 'Stats', 'Details', 'Key Anylaysis'],
   normal: ['Database', 'Please select a key.'],
   timeFormat: ['d', 'h', 'm', 's', 'mill','never'],
+  table: ['Data','Operate'],
+  tips: ['Current data type unsupported yet.']
 }

src/i18n/index.ts

@@ -1,8 +1,10 @@
-import { createI18n } from 'vue-i18n'
+import { createI18n,useI18n } from 'vue-i18n'
 
 import messages from './lang'
 import { Lang, type QuasarLanguage } from 'quasar'
-import type { App } from 'vue'
+import { type App, computed } from 'vue'
+import { enUS, ruRU, zhCN } from 'naive-ui'
+
 export type MessageLanguages = keyof typeof messages
 // Type-define 'en-US' as the master schema for the resource
 export type MessageSchema = (typeof messages)['en-US']
@@ -21,13 +23,13 @@ declare module 'vue-i18n' {
 }
 /* eslint-enable @typescript-eslint/no-empty-object-type */
 
-export const useI18n = (app: App) => {
+export const injectI18n = (app: App) => {
   // import lang pack
   const languages = import.meta.glob('../../node_modules/quasar/lang/(zh-CN|en-US).js', {
     eager: true,
     import: 'default',
   })
-  // obtain currently luanguage
+  // obtain currently language
   const local = localStorage.getItem('lang') ?? (Lang.getLocale() || 'zh-CN')
   // set currently language
   Object.keys(languages).forEach((k) => {
@@ -45,3 +47,18 @@ export const useI18n = (app: App) => {
   // Set i18n instance on app
   app.use(i18n)
 }
+
+export const useLocate = () => {
+  const $i18n = useI18n()
+  const locate = computed(() => {
+    switch ($i18n.locale.value) {
+      case 'zh-CN':
+        return zhCN
+      case 'ruRU':
+        return ruRU
+      default:
+        return enUS
+    }
+  })
+  return { locate }
+}

src/i18n/zh-CN/index.ts

@@ -6,7 +6,7 @@ export default {
     ['Github', 'github.com/fuyoo/bs-redis-desktop-client'],
   ],
   settings: ['设置', '语言', '版本'],
-  actions: ['确定', '取消', '删除', '修改', '添加'],
+  actions: ['确定', '取消', '删除', '修改', '添加','插入'],
   home: {
     form: {
       lable: ['名称', '地址', '端口', '数据库', '用户名', '密码', '是否集群'],
@@ -26,6 +26,8 @@ export default {
     tabName: ['状态', '数据'],
   },
   hostInfo: ['内存', '服务端', '状态', '详情', 'Key情况'],
-  normal: ['数据库','请选择一个键'],
-  timeFormat:['天','时','分','秒','毫秒','不过期']
+  normal: ['数据库', '请选择一个键'],
+  timeFormat: ['天', '时', '分', '秒', '毫秒', '永不过期'],
+  table: ['数据', '操作'],
+  tips: ['该数据类型尚不支持']
 }

src/main.ts

@@ -8,7 +8,7 @@ import '@quasar/extras/material-icons/material-icons.css'
 import 'quasar/src/css/index.sass'
 import App from './App.vue'
 import router from './router'
-import { useI18n } from './i18n'
+import { injectI18n } from './i18n'
 import 'virtual:uno.css'
 const app = createApp(App)
 app.use(Quasar, {
@@ -17,7 +17,7 @@ app.use(Quasar, {
     Notify,
   }, // import Quasar plugins and add here
 })
-app.use(useI18n)
+app.use(injectI18n)
 app.use(createPinia())
 app.use(router)
 

src/pages/host/components/CoInfoHeader/index.vue

@@ -3,6 +3,8 @@ import { useReqStore } from '@/stores/req.ts'
 import { onBeforeUnmount, reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
+import {dataToHuman} from '@/tools'
+
 const route = useRoute()
 const { t } = useI18n()
 const prop = defineProps<{ type?: string }>()
@@ -64,18 +66,22 @@ const formatMilliseconds = (v: string): string => {
 onBeforeUnmount(() => {
   clearInterval(timer)
 })
+
 </script>
 
 <template>
-  <div class="b-b b-b-dashed b-b-#eee p-4 gap-2 flex">
+  <div class="b-b b-b-dashed b-b-#eee p-4 flex justify-between items-center">
+  <div class=" gap-2 flex">
     <b>{{ trans(route.params.key as string) }}</b>
     <q-badge><i class="i-iconamoon:type-bold mr-1"></i> {{ type?.toUpperCase() }}</q-badge>
-    <q-badge><i class="i-material-symbols:memory-alt mr-1"></i> {{ baseInfo.memory }}bytes</q-badge>
+    <q-badge><i class="i-material-symbols:memory-alt mr-1"></i> {{ dataToHuman(baseInfo.memory) }}</q-badge>
     <q-badge>
       <i class="i-material-symbols:nest-clock-farsight-analog-outline"></i>TTL
       {{ formatMilliseconds(baseInfo.pttl) }}
     </q-badge>
   </div>
+    <slot></slot>
+  </div>
 </template>
 
 <style scoped lang="scss"></style>

src/pages/host/components/CoKeys/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useReqStore } from '@/stores/req.ts'
-import { reactive, ref, h, } from 'vue'
+import { reactive, ref, h } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { DropdownOption } from 'naive-ui'
 import { Folder, FolderOpenOutline, Trash } from '@vicons/ionicons5'
@@ -105,7 +105,7 @@ const loadMoreFn = () => {
   }
 }
 
-let focusNodeData:Tree | null
+let focusNodeData: Tree | null
 const showDropdownRef = ref(false)
 const menuOptions = ref<DropdownOption[]>([
   {
@@ -116,6 +116,7 @@ const menuOptions = ref<DropdownOption[]>([
 ])
 const x = ref(0)
 const y = ref(0)
+const supportDataType = ['string', 'list', 'set', 'zset', 'hash']
 const nodeProps = ({ option }: { option: Tree }) => {
   return {
     async onClick() {
@@ -124,6 +125,16 @@ const nodeProps = ({ option }: { option: Tree }) => {
           path: '/cmd',
           data: ['type', option.value],
         })
+        if (!supportDataType.includes(t.data)) {
+          await router.replace({
+            path: `/tab/${route.params.id}/main/database/unsupported/${btoa(option.value!)}`,
+            replace: true,
+            query: {
+              ...route.query,
+            },
+          })
+          return
+        }
         await router.replace({
           path: `/tab/${route.params.id}/main/database/${t.data}/${btoa(option.value!)}`,
           replace: true,
@@ -146,8 +157,7 @@ const nodeProps = ({ option }: { option: Tree }) => {
 const handleSelect = async (act: string) => {
   showDropdownRef.value = false
   const data = focusNodeData
-  if (act === "delete") {
-
+  if (act === 'delete') {
     if (data?.type === 'key') {
       const { code } = await reqStore.reqWithHost<string>({
         path: '/cmd',
@@ -227,7 +237,7 @@ const handleSelect = async (act: string) => {
     :x="x"
     :y="y"
     @select="handleSelect"
-    @clickoutside="()=>showDropdownRef = false"
+    @clickoutside="() => (showDropdownRef = false)"
   />
 </template>