style: 缓存信息多语言

src/i18n/locales/en-US.ts

@@ -866,6 +866,42 @@ export default {
         jobMsg: "Job Messages",
         targetParams: "TargetParams",
       },
+      cache: {
+        cacheKey: "Cache Key Name",
+        cacheName: "Cache Name",
+        cacheValue: "Cached content",
+        remark: "Remark",
+        clearCacheKeyOk: "Deleted cache key name {txt}",
+        clearCacheNameOk: "Cleared cache name {txt}",
+        cacheList: "Cache Lists",
+        cacheKeyListErr: "Please select the data item in the cache list!",
+        clearCacheSafe: "Security Clearance",
+        clearCacheSafeTip: "Confirm that you want to perform a safe clean of all key names under the cache?",
+        clearCacheSafeOk: "Completed securely clearing the cache",
+        filter: "Filter",
+        filterPlace: "Fuzzy filtering {txt}",
+        clearCacheNameTip: "Are you sure you want to clear all the keys under that cache name?",
+        keyNameList: "Key Name List",
+        clearCacheKeyTip: "Are you sure you want to delete the cache key?",
+        keyContent: "Cached content",
+      },
+      cacheInfo: {
+        version: "Service Versions",
+        mode: "Perating Mode",
+        modeStandalone: "stand-alone",
+        modeClusters: "clusters",
+        port: "Port",
+        clients: "Client Connections",
+        uptimeInDays: "Running time (days)",
+        memoryHuman: "Using Memory",
+        usedCpu: "Using CPU",
+        maxmemory: "Memory Configuration",
+        aof: "Whether AOF is enabled",
+        rdb: "Whether the RDB is successful",
+        dbSize: "Number of Keys",
+        kbps: "Network entry/exit",
+        commandstats: "Command Statistics",
+      },
     },
     system:{
       user:  {

src/i18n/locales/zh-CN.ts

@@ -866,6 +866,42 @@ export default {
         jobMsg: "日志信息",
         targetParams: "传入参数",
       },
+      cache: {
+        cacheKey: "缓存键名",
+        cacheName: "缓存名称",
+        cacheValue: "缓存内容",
+        remark: "备注",
+        clearCacheKeyOk: "已删除缓存键名 {txt}",
+        clearCacheNameOk: "已清理缓存名称 {txt}",
+        cacheList: "缓存列表",
+        cacheKeyListErr: "请在缓存列表中选择数据项！",
+        clearCacheSafe: "安全清理",
+        clearCacheSafeTip: "确认要执行可安全清理的缓存下所有键名吗?",
+        clearCacheSafeOk: "已完成安全清理缓存",
+        filter: "过滤",
+        filterPlace: "模糊过滤 {txt}",
+        clearCacheNameTip: "确认要清理该缓存名称下的所有键名吗?",
+        keyNameList: "键名列表",
+        clearCacheKeyTip: "确认要删除该缓存键吗?",
+        keyContent: "缓存内容",
+      },
+      cacheInfo: {
+        version: "服务版本",
+        mode: "运行模式",
+        modeStandalone: "单机",
+        modeClusters: "集群",
+        port: "端口",
+        clients: "已删除缓存键名 {txt}",
+        uptimeInDays: "运行时间(天)",
+        memoryHuman: "使用内存",
+        usedCpu: "使用CPU",
+        maxmemory: "内存配置",
+        aof: "AOF是否开启",
+        rdb: "RDB是否成功",
+        dbSize: "Key数量",
+        kbps: "网络入口/出口",
+        commandstats: "命令统计",
+      },
     },
     system:{
       user:{

src/views/monitor/cache/index.vue

@@ -50,7 +50,7 @@ function fnCacheKeyInfo(cacheKey: string) {
 /**键名列表表格字段列 */
 let cacheKeyTableColumns: ColumnsType = [
   {
-    title: '序号',
+    title: t('common.rowId'),
     dataIndex: 'num',
     width: '50px',
     align: 'center',
@@ -59,7 +59,7 @@ let cacheKeyTableColumns: ColumnsType = [
     },
   },
   {
-    title: '缓存键名',
+    title: t('views.monitor.cache.cacheKey'),
     dataIndex: 'cacheKey',
     align: 'left',
     ellipsis: true,
@@ -77,7 +77,7 @@ let cacheKeyTableColumns: ColumnsType = [
     },
   },
   {
-    title: '操作',
+    title: t('common.operate'),
     key: 'option',
     align: 'center',
     width: '50px',
@@ -105,7 +105,7 @@ function fnCacheKeyClear(cacheKey: string) {
     isClick.value = false;
     if (res.code === RESULT_CODE_SUCCESS) {
       message.success({
-        content: `已删除缓存键名 ${cacheKey}`,
+        content: t('views.monitor.cache.clearCacheKeyOk', { txt: cacheKey }),
         duration: 3,
       });
       // 缓存内容显示且是删除的缓存键名，需要进行加载显示
@@ -128,7 +128,7 @@ function fnCacheKeyList(cacheName: string = 'load') {
     cacheName = cacheKeyTable.cacheName;
   }
   if (!cacheName) {
-    message.warning('请在缓存列表中选择数据项！', 3);
+    message.warning(t('views.monitor.cache.cacheKeyListErr'), 3);
     return;
   }
   if (isClick.value) return;
@@ -153,7 +153,7 @@ let cacheNameTable = reactive({
 /**缓存列表表格字段列 */
 let cacheNameTableColumns: ColumnsType = [
   {
-    title: '序号',
+    title: t('common.rowId'),
     dataIndex: 'num',
     width: '50px',
     align: 'center',
@@ -162,7 +162,7 @@ let cacheNameTableColumns: ColumnsType = [
     },
   },
   {
-    title: '缓存名称',
+    title: t('views.monitor.cache.cacheName'),
     dataIndex: 'cacheName',
     align: 'left',
     ellipsis: true,
@@ -180,13 +180,13 @@ let cacheNameTableColumns: ColumnsType = [
     },
   },
   {
-    title: '备注',
+    title: t('views.monitor.cache.remark'),
     dataIndex: 'remark',
     align: 'left',
     ellipsis: true,
   },
   {
-    title: '操作',
+    title: t('common.operate'),
     key: 'option',
     align: 'center',
     width: '50px',
@@ -203,7 +203,7 @@ function fnClearCacheSafe() {
     isClick.value = false;
     if (res.code === RESULT_CODE_SUCCESS) {
       message.success({
-        content: '已完成安全清理缓存',
+        content: t('views.monitor.cache.clearCacheSafeOk'),
         duration: 3,
       });
       cacheKeyTable.loading = true;
@@ -230,7 +230,7 @@ function fnCacheNameClear(cacheName: string) {
     isClick.value = false;
     if (res.code === RESULT_CODE_SUCCESS) {
       message.success({
-        content: `已清理缓存名称 ${cacheName}`,
+        content: t('views.monitor.cache.clearCacheNameOk', { txt: cacheName }),
         duration: 3,
       });
       // 缓存内容显示且是删除的缓存名称，需要进行加载显示
@@ -271,25 +271,29 @@ onMounted(() => {
     <a-row :gutter="20">
       <a-col :lg="8" :md="8" :xs="24">
         <a-card
-          title="缓存列表"
+          :title="t('views.monitor.cache.cacheList')"
           :bordered="false"
           :body-style="{ marginBottom: '24px', padding: 0 }"
         >
           <template #extra>
             <a-space :size="8" align="center">
               <a-tooltip>
-                <template #title>刷新</template>
+                <template #title>
+                  {{ t('common.reloadText') }}
+                </template>
                 <a-button type="text" @click.prevent="fnCacheNameList">
                   <template #icon><ReloadOutlined /></template>
                 </a-button>
               </a-tooltip>
               <a-tooltip>
-                <template #title>安全清理</template>
+                <template #title>
+                  {{ t('views.monitor.cache.clearCacheSafe') }}
+                </template>
                 <a-popconfirm
                   placement="bottomRight"
-                  title="确认要执行可安全清理的缓存下所有键名吗?`"
-                  ok-text="确认"
-                  cancel-text="取消"
+                  :title="t('views.monitor.cache.clearCacheSafeTip')"
+                  :ok-text="t('common.ok')"
+                  :cancel-text="t('common.cancel')"
                   @confirm="fnClearCacheSafe()"
                 >
                   <a-button type="text" v-perms:has="['monitor:cache:remove']">
@@ -323,7 +327,9 @@ onMounted(() => {
             >
               <div style="padding: 8px">
                 <a-input
-                  :placeholder="`模糊过滤 ${column.title}`"
+                  :placeholder="
+                    t('views.monitor.cache.filterPlace', { txt: column.title })
+                  "
                   :value="selectedKeys[0]"
                   style="width: 188px; margin-bottom: 8px; display: block"
                   @change="
@@ -337,14 +343,14 @@ onMounted(() => {
                   style="width: 90px; margin-right: 8px"
                   @click="confirm()"
                 >
-                  过滤
+                  {{ t('views.monitor.cache.filter') }}
                 </a-button>
                 <a-button
                   size="small"
                   style="width: 90px"
                   @click="clearFilters({ confirm: true })"
                 >
-                  重置
+                  {{ t('common.reset') }}
                 </a-button>
               </div>
             </template>
@@ -352,9 +358,10 @@ onMounted(() => {
               <template v-if="column.key === 'option'">
                 <a-popconfirm
                   placement="topRight"
-                  title="确认要清理该缓存名称下的所有键名吗?`"
-                  ok-text="确认"
-                  cancel-text="取消"
+                  :title="t('views.monitor.cache.clearCacheNameTip')"
+                  ,
+                  :ok-text="t('common.ok')"
+                  :cancel-text="t('common.cancel')"
                   @confirm="fnCacheNameClear(record.cacheName)"
                 >
                   <a-button type="text" v-perms:has="['monitor:cache:remove']">
@@ -369,13 +376,15 @@ onMounted(() => {
 
       <a-col :lg="8" :md="8" :xs="24">
         <a-card
-          title="键名列表"
+          :title="t('views.monitor.cache.keyNameList')"
           :bordered="false"
           :body-style="{ marginBottom: '24px', padding: 0 }"
         >
           <template #extra>
             <a-tooltip>
-              <template #title>刷新</template>
+              <template #title>
+                {{ t('common.reloadText') }}
+              </template>
               <a-button type="text" @click.prevent="fnCacheKeyList()">
                 <template #icon><ReloadOutlined /></template>
               </a-button>
@@ -405,7 +414,9 @@ onMounted(() => {
             >
               <div style="padding: 8px">
                 <a-input
-                  :placeholder="`模糊过滤 ${column.title}`"
+                  :placeholder="
+                    t('views.monitor.cache.filterPlace', { txt: column.title })
+                  "
                   :value="selectedKeys[0]"
                   style="width: 188px; margin-bottom: 8px; display: block"
                   @change="
@@ -419,14 +430,14 @@ onMounted(() => {
                   style="width: 90px; margin-right: 8px"
                   @click="confirm()"
                 >
-                  过滤
+                  {{ t('views.monitor.cache.filter') }}
                 </a-button>
                 <a-button
                   size="small"
                   style="width: 90px"
                   @click="clearFilters({ confirm: true })"
                 >
-                  重置
+                  {{ t('common.reset') }}
                 </a-button>
               </div>
             </template>
@@ -434,9 +445,10 @@ onMounted(() => {
               <template v-if="column.key === 'option'">
                 <a-popconfirm
                   placement="topRight"
-                  title="确认要删除该缓存键吗?`"
-                  ok-text="确认"
-                  cancel-text="取消"
+                  :title="t('views.monitor.cache.clearCacheKeyTip')"
+                  ,
+                  :ok-text="t('common.ok')"
+                  :cancel-text="t('common.cancel')"
                   @confirm="fnCacheKeyClear(record.cacheKey)"
                 >
                   <a-button type="text" v-perms:has="['monitor:cache:remove']">
@@ -451,7 +463,7 @@ onMounted(() => {
 
       <a-col :lg="8" :md="8" :xs="24" v-perms:has="['monitor:cache:query']">
         <a-card
-          title="缓存内容"
+          :title="t('views.monitor.cache.keyContent')"
           :bordered="false"
           :body-style="{ marginBottom: '24px', padding: 0 }"
           :loading="cacheKeyInfo.loading"
@@ -462,20 +474,19 @@ onMounted(() => {
             :bordered="true"
             :column="1"
           >
-            <a-descriptions-item label="缓存名称">
+            <a-descriptions-item :label="t('views.monitor.cache.cacheName')">
               {{ cacheKeyInfo.data.cacheName }}
             </a-descriptions-item>
-            <a-descriptions-item label="缓存键名">
+            <a-descriptions-item :label="t('views.monitor.cache.cacheKey')">
               {{ cacheKeyInfo.data.cacheKey }}
             </a-descriptions-item>
-            <a-descriptions-item label="缓存内容">
+            <a-descriptions-item :label="t('views.monitor.cache.cacheValue')">
               <a-typography-paragraph>
                 <a-textarea
                   :value="cacheKeyInfo.data.cacheValue"
                   :auto-size="{ minRows: 4, maxRows: 10 }"
                   :maxlength="4000"
                   :disabled="true"
-                  placeholder="显示缓存内容"
                 />
               </a-typography-paragraph>
             </a-descriptions-item>

src/views/monitor/cache/info.vue

@@ -15,6 +15,8 @@ import { PageContainer } from '@ant-design-vue/pro-layout';
 import { getCache } from '@/api/monitor/cache';
 import { reactive, ref, onMounted } from 'vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
 
 echarts.use([
   ToolboxComponent,
@@ -104,7 +106,7 @@ function commandStatsChart() {
     },
     series: [
       {
-        name: '命令',
+        name: t('views.monitor.cacheInfo.commandstats'),
         type: 'pie',
         radius: ['5%', '80%'],
         center: ['60%', '50%'],
@@ -161,47 +163,51 @@ onMounted(() => {
         :bordered="true"
         :column="{ lg: 4, md: 2, xs: 1 }"
       >
-        <a-descriptions-item label="服务版本">
+        <a-descriptions-item :label="t('views.monitor.cacheInfo.version')">
           {{ cache.info.server.redis_version }}
         </a-descriptions-item>
-        <a-descriptions-item label="运行模式">
-          {{ cache.info.server.redis_mode == 'standalone' ? '单机' : '集群' }}
+        <a-descriptions-item :label="t('views.monitor.cacheInfo.mode')">
+          {{
+            cache.info.server.redis_mode == 'standalone'
+              ? t('views.monitor.cacheInfo.modeStandalone')
+              : t('views.monitor.cacheInfo.modeClusters')
+          }}
         </a-descriptions-item>
-        <a-descriptions-item label="端口">
+        <a-descriptions-item :label="t('views.monitor.cacheInfo.port')">
           {{ cache.info.server.tcp_port }}
         </a-descriptions-item>
-        <a-descriptions-item label="客户端数">
+        <a-descriptions-item :label="t('views.monitor.cacheInfo.clients')">
           {{ cache.info.clients.connected_clients }}
         </a-descriptions-item>
-        <a-descriptions-item label="运行时间(天)">
+        <a-descriptions-item :label="t('views.monitor.cacheInfo.uptimeInDays')">
           {{ cache.info.server.uptime_in_days }}
         </a-descriptions-item>
-        <a-descriptions-item label="使用内存">
+        <a-descriptions-item :label="t('views.monitor.cacheInfo.memoryHuman')">
           {{ cache.info.memory.used_memory_human }}
         </a-descriptions-item>
-        <a-descriptions-item label="使用CPU">
+        <a-descriptions-item :label="t('views.monitor.cacheInfo.usedCpu')">
           {{ parseFloat(cache.info.cpu.used_cpu_user_children).toFixed(2) }}
         </a-descriptions-item>
-        <a-descriptions-item label="内存配置">
+        <a-descriptions-item :label="t('views.monitor.cacheInfo.maxmemory')">
           {{ cache.info.memory.maxmemory_human }}
         </a-descriptions-item>
-        <a-descriptions-item label="AOF是否开启">
-          {{ cache.info.persistence.aof_enabled == '0' ? '否' : '是' }}
+        <a-descriptions-item :label="t('views.monitor.cacheInfo.aof')">
+          {{ cache.info.persistence.aof_enabled == '1' }}
         </a-descriptions-item>
-        <a-descriptions-item label="RDB是否成功">
+        <a-descriptions-item :label="t('views.monitor.cacheInfo.rdb')">
           {{ cache.info.persistence.rdb_last_bgsave_status }}
         </a-descriptions-item>
-        <a-descriptions-item label="Key数量">
+        <a-descriptions-item :label="t('views.monitor.cacheInfo.dbSize')">
           {{ cache.dbSize }}
         </a-descriptions-item>
-        <a-descriptions-item label="网络入口/出口">
+        <a-descriptions-item :label="t('views.monitor.cacheInfo.kbps')">
           {{ cache.info.stats.instantaneous_input_kbps }} kps /
           {{ cache.info.stats.instantaneous_output_kbps }} kps
         </a-descriptions-item>
       </a-descriptions>
     </a-card>
 
-    <a-card title="命令统计" :bordered="false">
+    <a-card :title="t('views.monitor.cacheInfo.commandstats')" :bordered="false">
       <div id="commandstats" style="height: 400px; width: 100%"></div>
     </a-card>
   </PageContainer>