feat(sj_1.0.0): 完成场景详情

src/locales/langs/en-us.ts

@@ -791,6 +791,7 @@ const local: App.I18n.Schema = {
     },
     retryScene: {
       title: 'Scene List',
+      detail: 'Scene Detail',
       groupName: 'Group name',
       sceneName: 'Scene name',
       sceneStatus: 'State',

src/locales/langs/zh-cn.ts

@@ -787,6 +787,7 @@ const local: App.I18n.Schema = {
     },
     retryScene: {
       title: '场景列表',
+      detail: '场景详情',
       groupName: '组名',
       sceneName: '场景名',
       sceneStatus: '状态',

src/typings/app.d.ts

@@ -939,6 +939,7 @@ declare namespace App {
         };
         retryScene: {
           title: string;
+          detail: string;
           groupName: string;
           sceneName: string;
           sceneStatus: string;

src/views/retry/scene/index.vue

@@ -1,15 +1,21 @@
 <script setup lang="tsx">
 import { NButton, NTag } from 'naive-ui';
+import { ref } from 'vue';
 import { fetchGetRetryScenePageList, fetchUpdateSceneStatus } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
-import { backOffRecord, routeKeyRecord } from '@/constants/business';
+import { DelayLevel, backOffRecord, routeKeyRecord } from '@/constants/business';
 import StatusSwitch from '@/components/common/status-switch.vue';
 import SceneOperateDrawer from './modules/scene-operate-drawer.vue';
 import SceneSearch from './modules/scene-search.vue';
+import SceneDetailDrawer from './modules/scene-detail-drawer.vue';
 
 const appStore = useAppStore();
+const detailData = ref();
+const detailVisible = defineModel<boolean>('detailVisible', {
+  default: false
+});
 
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetRetryScenePageList,
@@ -24,9 +30,22 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
   },
   columns: () => [
     {
-      type: 'selection',
+      key: 'sceneName',
-      align: 'center',
+      title: $t('page.retryScene.sceneName'),
-      width: 48
+      align: 'left',
+      minWidth: 120,
+      render: row => {
+        function showDetailDrawer() {
+          detailData.value = row || null;
+          detailVisible.value = true;
+        }
+
+        return (
+          <n-button text tag="a" type="primary" onClick={showDetailDrawer} class="ws-normal">
+            {row.sceneName}
+          </n-button>
+        );
+      }
     },
     {
       key: 'groupName',
@@ -34,12 +53,6 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       align: 'left',
       minWidth: 120
     },
-    {
-      key: 'sceneName',
-      title: $t('page.retryScene.sceneName'),
-      align: 'left',
-      minWidth: 120
-    },
     {
       key: 'sceneStatus',
       title: $t('page.retryScene.sceneStatus'),
@@ -88,7 +101,14 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       key: 'triggerInterval',
       title: $t('page.retryScene.triggerInterval'),
       align: 'left',
-      minWidth: 120
+      minWidth: 120,
+      render: row => {
+        if (row.backOff === 1) {
+          return triggerInterval(row.backOff!, row.maxRetryCount!);
+        }
+
+        return row.triggerInterval;
+      }
     },
     {
       key: 'deadlineRequest',
@@ -144,6 +164,18 @@ const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedR
 function edit(id: string) {
   handleEdit(id);
 }
+
+function triggerInterval(backOff: number, maxRetryCount: number) {
+  if (backOff !== 1) {
+    return '';
+  }
+
+  let desc = '';
+  for (let i = 1; i <= maxRetryCount; i += 1) {
+    desc += `,${DelayLevel[i as keyof typeof DelayLevel]}`;
+  }
+  return desc.substring(1, desc.length);
+}
 </script>
 
 <template>
@@ -184,6 +216,7 @@ function edit(id: string) {
         :row-data="editingData"
         @submitted="getData"
       />
+      <SceneDetailDrawer v-model:visible="detailVisible" :row-data="detailData" />
     </NCard>
   </div>
 </template>

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

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import { DelayLevel, backOffRecord, enableStatusNumberRecord, routeKeyRecord } from '@/constants/business';
+import { $t } from '@/locales';
+import { tagColor } from '@/utils/common';
+
+defineOptions({
+  name: 'SceneDetailDrawer'
+});
+
+interface Props {
+  /** row data */
+  rowData?: Api.RetryScene.Scene | null;
+}
+
+const props = defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+function maxRetryCountUpdate(maxRetryCount: number) {
+  if (props.rowData?.backOff !== 1) {
+    return '';
+  }
+
+  let desc = '';
+  for (let i = 1; i <= maxRetryCount; i += 1) {
+    desc += `,${DelayLevel[i as keyof typeof DelayLevel]}`;
+  }
+  return desc.substring(1, desc.length);
+}
+
+watch(
+  () => props.rowData,
+  () => {
+    console.log(props.rowData);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" :title="$t('page.retryScene.detail')">
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.retryScene.sceneName')">{{ rowData?.sceneName }}</NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.retryScene.sceneStatus')">
+        <NTag :type="tagColor(rowData?.sceneStatus!)">{{ $t(enableStatusNumberRecord[rowData?.sceneStatus!]) }}</NTag>
+      </NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.retryScene.groupName')">{{ rowData?.groupName }}</NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('common.routeKey.routeLabel')">
+        <NTag :type="tagColor(rowData?.routeKey!)">{{ $t(routeKeyRecord[rowData?.routeKey!]) }}</NTag>
+      </NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.retryScene.maxRetryCount')">{{ rowData?.maxRetryCount }}</NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.retryScene.executorTimeout')">
+        {{ rowData?.executorTimeout }}
+      </NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.retryScene.deadlineRequest')">
+        {{ rowData?.deadlineRequest }}
+      </NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.retryScene.backOff')">
+        <NTag :type="tagColor(rowData?.backOff!)">
+          {{ $t(backOffRecord[rowData?.backOff!]) }}
+        </NTag>
+      </NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.retryScene.triggerInterval')">
+        {{ rowData?.backOff === 1 ? maxRetryCountUpdate(rowData?.maxRetryCount) : rowData?.triggerInterval }}
+      </NDescriptionsItem>
+    </NDescriptions>
+    <NDescriptions label-placement="top" bordered :column="6">
+      <NDescriptionsItem :label="$t('page.retryScene.description')">{{ rowData?.description }}</NDescriptionsItem>
+    </NDescriptions>
+  </OperateDrawer>
+</template>
+
+<style scoped></style>

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

@@ -305,7 +305,16 @@ watch(
                   <SvgIcon icon="ant-design:info-circle-outlined" class="mb-1px text-16px" />
                 </NButton>
               </template>
-              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
+              延迟等级是参考RocketMQ的messageDelayLevel设计实现，具体延迟时间如下:
+              【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】
+              <br />
+              <NText strong>执行逻辑:</NText>
+              <NUl align-text>
+                <NLi>第一次执行间隔10s</NLi>
+                <NLi>第二次执行间隔15s</NLi>
+                <NLi>l第二次执行间隔30s</NLi>
+                <NLi>........... 依次类推</NLi>
+              </NUl>
             </NTooltip>
           </div>
         </template>