feat(sj_1.0.0): 完成组的详情展示

src/locales/langs/en-us.ts

@@ -468,17 +468,20 @@ const local: App.I18n.Schema = {
     },
     groupConfig: {
       title: 'Group Config List',
+      detail: 'Group Detail',
       namespaceId: 'Namespace ID',
-      groupName: 'Name',
+      groupName: 'Group Name',
       token: 'Token',
       groupStatus: 'Status',
       idGeneratorMode: 'ID Generator Mode',
       version: 'Version',
-      groupPartition: 'Parition',
+      groupPartition: 'Partition',
       initScene: 'Initial Scene',
       bucketIndex: 'Bucket',
       updateDt: 'Update Time',
       description: 'Description',
+      commonConfig: 'Common Config',
+      retryConfig: 'RetryConfig',
       form: {
         groupName: 'Please enter group name',
         token: 'Please enter Token',

src/locales/langs/zh-cn.ts

@@ -464,6 +464,7 @@ const local: App.I18n.Schema = {
     },
     groupConfig: {
       title: '组管理',
+      detail: '组详情',
       namespaceId: '命名空间ID',
       groupName: '组名称',
       token: 'Token',
@@ -475,6 +476,8 @@ const local: App.I18n.Schema = {
       bucketIndex: 'Bucket',
       updateDt: '更新时间',
       description: '描述',
+      commonConfig: '通用配置',
+      retryConfig: '重试配置',
       form: {
         groupName: '请输入组名称',
         token: 'Token',

src/typings/app.d.ts

@@ -616,6 +616,7 @@ declare namespace App {
         };
         groupConfig: {
           title: string;
+          detail: string;
           namespaceId: string;
           groupName: string;
           description: string;
@@ -627,6 +628,8 @@ declare namespace App {
           initScene: string;
           bucketIndex: string;
           updateDt: string;
+          commonConfig: string;
+          retryConfig: string;
           form: {
             groupName: string;
             token: string;

src/utils/common.ts

@@ -63,3 +63,21 @@ export function translateOptions2(options: string[]) {
     label: option
   }));
 }
+
+/**
+ * tag Color
+ *
+ * @param index
+ * @param total
+ */
+export function tagColor(index: number, total: number = 5) {
+  const tagMap: Record<number, NaiveUI.ThemeColor> = {
+    0: 'error',
+    1: 'info',
+    2: 'success',
+    3: 'warning',
+    4: 'default'
+  };
+
+  return tagMap[index % total];
+}

src/views/group/index.vue

@@ -6,6 +6,7 @@ import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { groupConfigIdModeRecord, yesOrNoRecord } from '@/constants/business';
+import { tagColor } from '@/utils/common';
 import GroupOperateDrawer from './modules/group-operate-drawer.vue';
 import GroupDetailDrawer from './modules/group-detail-drawer.vue';
 import GroupSearch from './modules/group-search.vue';
@@ -51,12 +52,6 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
         );
       }
     },
-    {
-      key: 'namespaceId',
-      title: $t('page.groupConfig.namespaceId'),
-      align: 'left',
-      minWidth: 260
-    },
     {
       key: 'groupStatus',
       title: $t('page.groupConfig.groupStatus'),
@@ -111,14 +106,9 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
           return null;
         }
 
-        const tagMap: Record<Api.Common.YesOrNo, NaiveUI.ThemeColor> = {
-          '1': 'success',
-          '0': 'warning'
-        };
-
         const label = $t(yesOrNoRecord[row.initScene!]);
 
-        return <NTag type={tagMap[row.initScene!]}>{label}</NTag>;
+        return <NTag type={tagColor(row.initScene!, 2)}>{label}</NTag>;
       }
     },
     {

src/views/group/modules/group-detail-drawer.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { watch } from 'vue';
+import { groupConfigIdModeRecord, groupConfigStatusRecord, yesOrNoRecord } from '@/constants/business';
+import { $t } from '@/locales';
+import { tagColor } from '@/utils/common';
 
 defineOptions({
   name: 'GroupDetailDrawer'
@@ -26,9 +29,37 @@ watch(
 </script>
 
 <template>
-  <OperateDrawer v-model="visible" title="组详情">
+  <OperateDrawer v-model="visible" :title="$t('page.groupConfig.detail')">
     <NDescriptions label-placement="top" bordered :column="6">
-      <NDescriptionsItem label="组名称">{{ rowData?.groupName }}</NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.groupConfig.groupName')">{{ rowData?.groupName }}</NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.groupConfig.groupStatus')">
+        <NTag :type="tagColor(rowData?.groupStatus!, 2)">{{ $t(groupConfigStatusRecord[rowData?.groupStatus!]) }}</NTag>
+      </NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.groupConfig.token')">{{ rowData?.token }}</NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.groupConfig.idGeneratorMode')">
+        <NTag :type="tagColor(rowData?.idGeneratorMode!, 2)">
+          {{ $t(groupConfigIdModeRecord[rowData?.idGeneratorMode!]) }}
+        </NTag>
+      </NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.groupConfig.groupPartition')">
+        {{ rowData?.groupPartition }}
+      </NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.groupConfig.initScene')">
+        <NTag :type="tagColor(rowData?.initScene!, 2)">{{ $t(yesOrNoRecord[rowData?.initScene!]) }}</NTag>
+      </NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.groupConfig.description')">{{ rowData?.description }}</NDescriptionsItem>
     </NDescriptions>
   </OperateDrawer>
 </template>

src/views/group/modules/group-operate-drawer.vue

@@ -159,7 +159,7 @@ watch(visible, () => {
   <OperateDrawer v-model="visible" :title="title" @submitted="handleSubmit">
     <NForm ref="formRef" :model="model" :rules="rules">
       <NCollapse :default-expanded-names="['1', '2']">
-        <NCollapseItem title="通用配置" name="1">
+        <NCollapseItem :title="$t('page.groupConfig.commonConfig')" name="1">
           <NFormItem :label="$t('page.groupConfig.groupName')" path="groupName">
             <NInput
               v-model:value="model.groupName"
@@ -211,7 +211,7 @@ watch(visible, () => {
             />
           </NFormItem>
         </NCollapseItem>
-        <NCollapseItem title="重试配置" name="2">
+        <NCollapseItem :title="$t('page.groupConfig.retryConfig')" name="2">
           <NFormItem :label="$t('page.groupConfig.idGeneratorMode')" path="idGeneratorMode">
             <NSelect
               v-model:value="model.idGeneratorMode"

src/views/retry/scene/modules/scene-operate-drawer.vue

@@ -305,7 +305,7 @@ watch(
                   <SvgIcon icon="ant-design:info-circle-outlined" class="mb-1px text-16px" />
                 </NButton>
               </template>
-              xxxxxxxxx
+              10s,15s,30s,35s,40s,50s,1m,2m,4m,6m,8m,10m,20m,40m,1h,2h,3h,4h,5h,6h,7h,8h,9h,10h,11h,12h
             </NTooltip>
           </div>
         </template>