refactor(auth): adjust some text

Author: Kinplemelon

src/i18n/Auth.ts

@@ -107,6 +107,10 @@ export default {
     zh: '启用外部资源缓存',
     en: 'Enable External Resource Cache',
   },
+  enableNodeCacheDesc: {
+    zh: '启用外部资源缓存后，EMQX 将缓存外部资源（如 MySQL、MongoDB 等）的查询结果，以提高效率；对于本地数据源，如内置数据库或文件等不进行缓存。',
+    en: 'After enabling external resource cache, EMQX will cache the query results of external resources (such as MySQL, MongoDB, etc.), to improve efficiency; for local data sources, such as built-in databases or file, are not cached.',
+  },
   nodeCacheMaxCount: {
     zh: '缓存最大数量',
     en: 'Maximum Number of Cached Items',
@@ -136,16 +140,16 @@ export default {
     en: 'Authorization Settings',
   },
   enableCache: {
-    zh: '启用缓存',
-    en: 'Enable Cache',
+    zh: '启用客户端缓存',
+    en: 'Enable Client Cache',
   },
   clearCache: {
-    zh: '清除缓存',
-    en: 'Clear cache',
+    zh: '清除客户端缓存',
+    en: 'Clear Client Cache',
   },
   clearCacheDesc: {
-    zh: '清除当前所有授权结果缓存。',
-    en: 'Clears all current authorization result caches.',
+    zh: '清除当前所有客户端缓存。',
+    en: 'Clears all current client caches.',
   },
   clearCacheConfirm: {
     zh: '是否确认清除缓存',

src/views/Auth/components/NodeCache.vue

@@ -25,7 +25,10 @@
       v-loading="isSettingsLoading"
       :label-width="236"
     >
-      <el-form-item :label="tl('enableNodeCache')">
+      <el-form-item>
+        <template #label>
+          <FormItemLabel :label="tl('enableNodeCache')" :desc="tl('enableNodeCacheDesc')" />
+        </template>
         <el-switch v-model="record.enable" />
       </el-form-item>
 
@@ -65,7 +68,7 @@
     destroy-on-close
     append-to-body
     class="node-cache-status-drawer"
-    :size="900"
+    :size="960"
     :title="tl('nodeCacheStatus')"
   >
     <div v-loading="isCacheMetricsLoading">
@@ -385,15 +388,15 @@ const getRateValueStr = (val: number, unit = 'Auth.rateUnit') =>
     align-items: center;
     .rate-item {
       position: relative;
-      margin-right: 12px;
+      margin-right: 24px;
       color: var(--el-text-color-secondary);
       &:not(:last-child):after {
         position: absolute;
         content: '';
         width: 1px;
         height: 12px;
         background-color: var(--el-border-color);
-        right: -6px;
+        right: -12px;
         top: 50%;
         transform: translateY(-50%);
         opacity: 0.75;