1、（超时时间等）增加信息提示

2、告警通知增加短信的抽象接口 3、更换刷新图标
2025-06-27 11:59:03 +08:00 · 2025-06-27 11:59:03 +08:00 · 637b5dd61a
commit 637b5dd61a
parent 69dd96cc19 4a34c465f1
25 changed files with 1026 additions and 18 deletions
--- a/package.json
+++ b/package.json
@ -57,6 +57,7 @@
    "@sa/hooks": "workspace:*",
    "@sa/materials": "workspace:*",
    "@sa/utils": "workspace:*",
+    "@vicons/fluent": "^0.13.0",
    "@vueuse/core": "12.5.0",
    "clipboard": "2.0.11",
    "dayjs": "1.11.13",
@ -113,9 +114,6 @@
    "commit-msg": "pnpm sa git-commit-verify",
    "pre-commit": "pnpm typecheck && pnpm lint-staged"
  },
-  "lint-staged": {
-    "*": "eslint --fix"
-  },
  "officialWebsite": "https://snailjob.opensnail.com",
  "website": "https://snailjob.opensnail.com/docs/preview.html"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -41,6 +41,9 @@ importers:
      '@sa/utils':
        specifier: workspace:*
        version: link:packages/utils
+      '@vicons/fluent':
+        specifier: ^0.13.0
+        version: 0.13.0
      '@vueuse/core':
        specifier: 12.5.0
        version: 12.5.0(typescript@5.7.3)
@ -1639,6 +1642,9 @@ packages:
    peerDependencies:
      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0

+  '@vicons/fluent@0.13.0':
+    resolution: {integrity: sha512-bYGZsOE3qzvm3Cm43e7tybgGlr5ZUpYqtRZq0g0Tfupe8jIzLolpvQLNUt1zS8Mgt6goTbUk5YH7Fkv16jkykg==}
+
  '@vitejs/plugin-vue-jsx@4.1.1':
    resolution: {integrity: sha512-uMJqv/7u1zz/9NbWAD3XdjaY20tKTf17XVfQ9zq4wY1BjsB/PjpJPMe2xiG39QpP4ZdhYNhm4Hvo66uJrykNLA==}
    engines: {node: ^18.0.0 || >=20.0.0}
@ -6350,6 +6356,8 @@ snapshots:
      - supports-color
      - vue

+  '@vicons/fluent@0.13.0': {}
+
  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(sass@1.84.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
    dependencies:
      '@babel/core': 7.26.0
--- a/public/iconify/system.json
+++ b/public/iconify/system.json
@ -0,0 +1,16 @@
+{
+  "prefix": "system",
+  "lastModified": 1716123717,
+  "aliases": {},
+  "width": 32,
+  "height": 32,
+  "icons": {
+    "config": {
+      "body": "<path d=\"M32 26v-2h-2.101a4.968 4.968 0 0 0-.732-1.753l1.49-1.49l-1.414-1.414l-1.49 1.49A4.968 4.968 0 0 0 26 20.101V18h-2v2.101a4.968 4.968 0 0 0-1.753.732l-1.49-1.49l-1.414 1.414l1.49 1.49A4.968 4.968 0 0 0 20.101 24H18v2h2.101a4.968 4.968 0 0 0 .732 1.753l-1.49 1.49l1.414 1.414l1.49-1.49a4.968 4.968 0 0 0 1.753.732V32h2v-2.101a4.968 4.968 0 0 0 1.753-.732l1.49 1.49l1.414-1.414l-1.49-1.49A4.968 4.968 0 0 0 29.899 26zm-7 2a3 3 0 1 1 3-3a3.003 3.003 0 0 1-3 3z\" fill=\"currentColor\"></path><circle cx=\"7\" cy=\"20\" r=\"2\" fill=\"currentColor\"></circle><path d=\"M14 20a4 4 0 1 1 4-4a4.012 4.012 0 0 1-4 4zm0-6a2 2 0 1 0 2 2a2.006 2.006 0 0 0-2-2z\" fill=\"currentColor\"></path><circle cx=\"21\" cy=\"12\" r=\"2\" fill=\"currentColor\"></circle><path d=\"M13.02 28.271L3 22.427V9.574l11-6.416l11.496 6.706l1.008-1.728l-12-7a1 1 0 0 0-1.008 0l-12 7A1 1 0 0 0 1 9v14a1 1 0 0 0 .496.864L12.013 30z\" fill=\"currentColor\"></path>"
+    },
+    "parameter": {
+      "body": "<path d=\"M28 13V8a2.002 2.002 0 0 0-2-2h-3v2h3v5a3.976 3.976 0 0 0 1.382 3A3.976 3.976 0 0 0 26 19v5h-3v2h3a2.002 2.002 0 0 0 2-2v-5a2.002 2.002 0 0 1 2-2v-2a2.002 2.002 0 0 1-2-2z\" fill=\"currentColor\"></path><path d=\"M17 9l-.857 3h2L19 9h2l-.857 3H22v2h-2.428l-1.143 4H21v2h-3.143L17 23h-2l.857-3h-2L13 23h-2l.857-3H10v-2h2.429l1.143-4H11v-2h3.143L15 9zm.572 5h-2l-1.143 4h2z\" fill-rule=\"evenodd\" fill=\"currentColor\"></path><path d=\"M6 13V8h3V6H6a2.002 2.002 0 0 0-2 2v5a2.002 2.002 0 0 1-2 2v2a2.002 2.002 0 0 1 2 2v5a2.002 2.002 0 0 0 2 2h3v-2H6v-5a3.976 3.976 0 0 0-1.382-3A3.976 3.976 0 0 0 6 13z\" fill=\"currentColor\"></path>"
+    }
+
+  }
+}
--- a/src/components/common/dynamic-input.vue
+++ b/src/components/common/dynamic-input.vue
@ -1,4 +1,11 @@
 <script setup lang="ts">
+import {fetchGetSystemVarList} from "@/service/api/system-variable";
+import { onMounted, ref, computed} from 'vue'
+
+onMounted(() => {
+  getSystemVariables();
+});
+
 const content = defineModel<{ key: string; value: string | number | boolean; type: string }[]>('value', {
  required: true,
  default: () => []
@ -25,6 +32,34 @@ const dynamicInputRule = [
    }
  }
 ];
+const inputValue = ref('');
+const syncOptions = ref([
+  {
+    label: String,
+    value: String
+  }
+]);
+
+const  getSystemVariables = async () =>{
+  const { error,data } = await fetchGetSystemVarList();
+  if (!error) {
+    syncOptions.value = data.map(item => ({
+      label: item.variableName,
+      value: item.variableKey.replace("$",'')
+    }));
+  }
+  console.log("syncOptions"+syncOptions.value[0].value)
+  console.log("syncOptions"+syncOptions.value[0].label)
+};
+
+const filteredOptions = computed(() => {
+  return inputValue.value
+    ? syncOptions.value.filter(opt =>
+      opt.label.includes(inputValue.value) ||
+      opt.value.includes(inputValue.value))
+    : syncOptions.value
+});
+

 const typeOptions = [
  {
@ -87,12 +122,33 @@ const handleUpdateType = (index: number) => {
        :rule="dynamicInputRule"
        :path="`${path}[${index}].value`"
      >
-        <NInput
+<!--        <NInput-->
+<!--          v-if="content[index].type === 'string'"-->
+<!--          v-model:value="content[index].value as string"-->
+<!--          placeholder="value"-->
+<!--          @keydown.enter.prevent-->
+<!--        />-->
+
+        <n-mention
          v-if="content[index].type === 'string'"
          v-model:value="content[index].value as string"
          placeholder="value"
+          :options="syncOptions"
+          default-value="@"
+          :prefix="['$']"
          @keydown.enter.prevent
        />
+        <NPopover trigger="hover"
+                  v-if="content[index].type === 'string'"
+        >
+          <template #trigger>
+            <NButton text>
+              <SvgIcon icon="ant-design:info-circle-outlined" class="text-18px color-blue" />
+            </NButton>
+          </template>
+          输入$提示变量信息
+        </NPopover>
+
        <NInputNumber
          v-if="content[index].type === 'number'"
          v-model:value="content[index].value as number"
--- a/src/components/common/example-expression.vue
+++ b/src/components/common/example-expression.vue
@ -0,0 +1,75 @@
+
+<template>
+  <div class="example-container">
+    <NButton
+      text
+      type="primary"
+      size="small"
+      @click="toggleExample"
+    >
+      <template #icon>
+<!--        <NIcon :component="Delete24Regular" />-->
+      </template>
+      查看{{ typeLabel }}示例
+    </NButton>
+
+    <NCard
+      v-if="show"
+      embedded
+      size="small"
+      class="example-card"
+    >
+      <pre class="example-code">{{ exampleText }}</pre>
+    </NCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+const props = defineProps({
+  type: {
+    type: Number,
+    // required: true,
+    validator: (val: number) => [1, 2, 3].includes(val),
+    default:4
+  }
+})
+
+const show = ref(false)
+const typeMap = {
+  1: 'SQEL',
+  2: 'Aviator',
+  3: 'QL',
+  4: '表达式'
+}
+
+const examples = {
+  1: `# SQEL条件表达式示例\nuser.age > 18 \nAND department == 'IT' \nOR (vipLevel >= 3 AND creditScore > 800)`,
+  3: `// 查询语言示例\nfrom Employee e\nwhere e.salary > 10000\nand e.joinDate > '2020-01-01'\nselect e.name, e.position`,
+  2: `## Aviator脚本示例\nlet user = {\n  name: '张三',\n  vip: true,\n  credit: 1500\n};\n\nif(user.vip&&user.credit>1000){\n  "尊享VIP服务"\n} else {\n  "标准服务"\n}`,
+  4: `// 状态判断\n"#status == 'SUCCESS'"\n"#taskStatus != 'FAILED'"  `
+}
+
+const typeLabel = computed(() => typeMap[props.type])
+const exampleText = computed(() => examples[props.type])
+
+const toggleExample = () => {
+  show.value = !show.value
+}
+</script>
+
+<style scoped>
+.example-container {
+  margin-top: 8px;
+}
+.example-card {
+  background: #f8f9fa;
+  border-left: 3px solid #2080f0;
+  max-width: 99%;
+}
+.example-code {
+  font-family: 'Courier New', monospace;
+  line-height: 1.5;
+  margin: 0;
+}
+</style>
--- a/src/components/workflow/modules/drawer/branch-drawer.vue
+++ b/src/components/workflow/modules/drawer/branch-drawer.vue
@ -138,6 +138,7 @@ const rules: FormRules = {
                :value="strategy.value"
              />
            </NSpace>
+          <example-expression :type="form.decision!.expressionType"  />
          </NRadioGroup>
        </NFormItem>
        <NFormItem
--- a/src/components/workflow/modules/nodes/workflow-node.vue
+++ b/src/components/workflow/modules/nodes/workflow-node.vue
@ -132,7 +132,7 @@ const detailDrawer = ref<boolean[]>([]);

 const showDetail = (node: Workflow.ConditionNodeType, detailIndex: number) => {
  detailIds.value = [];
-  if (store.type === 4) {
+  if (store.type === 2) {
    node.jobBatchList
      ?.sort((a, b) => a.taskBatchStatus - b.taskBatchStatus)
      .forEach(item => {
--- a/src/components/workflow/workflow.vue
+++ b/src/components/workflow/workflow.vue
@ -14,11 +14,13 @@ interface Props {
  modelValue?: Workflow.NodeDataType;
  spinning?: boolean;
  disabled?: boolean;
+  hisDisabled?: boolean;
 }

 const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  spinning: false,
+  hisDisabled: false,
  modelValue: () => ({})
 });

@ -75,6 +77,8 @@ watch(
            }));
          } else {
            // window.$message?.error('获取工作流历史版本失败');
+            historyID.value = syncOptions.value.filter(item => item.key == '-1')[0].label
+
          }
        }
      } catch (error) {
@ -212,7 +216,7 @@ const onDragstop = () => {
              放大
            </NTooltip>
          </div>
-          <div v-if="!slots.buttons" class="buttons">
+          <div v-if="hisDisabled" class="buttons">
            <NDropdown trigger="hover" width="trigger" :options="syncOptions" @select="handleSyncSelect">
              <NTooltip placement="left">
                <template #trigger>
--- a/src/constants/business.ts
+++ b/src/constants/business.ts
@ -290,6 +290,12 @@ export const retryOperationReasonRecord: Record<Api.Common.RetryOperationReason,
 };
 export const retryOperationReasonOptions = transformRecordToNumberOption(retryOperationReasonRecord);

+export const systemVariableTypeRecord: Record<Api.SystemVariable.VariableType, App.I18n.I18nKey> = {
+  1: 'common.variableType.variableType1',
+  2: 'common.variableType.variableType2'
+};
+export const systemVariableTypeOptions = transformRecordToNumberOption(systemVariableTypeRecord);
+
 export const jobOperationReasonEnum: Workflow.JobTagType = {
  0: {
    name: operationReasonRecord[0],
--- a/src/layouts/modules/global-header/index.vue
+++ b/src/layouts/modules/global-header/index.vue
@ -45,6 +45,7 @@ const href = (url: string) => {
    <div class="h-full flex-y-center justify-end">
      <NamespaceSelect />
      <GlobalSearch />
+      <!--
      <ButtonIcon
        v-if="!appStore.isMobile"
        class="color-#c71d23 xl:block sm:hidden"
@ -66,6 +67,7 @@ const href = (url: string) => {
        icon="material-symbols:unknown-document-outline"
        @click="href('https://snailjob.opensnail.com/')"
      />
+      -->
      <FullScreen v-if="!appStore.isMobile" class="xl:block sm:hidden" :full="isFullscreen" @click="toggle" />
      <LangSwitch
        v-if="themeStore.header.multilingual.visible"
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@ -144,6 +144,10 @@ const local: App.I18n.Schema = {
        python: 'Python'
      }
    },
+    variableType: {
+      variableType1: '字符变量',
+      variableType2: '表达式变量'
+    },
    taskType: {
      label: '任务类型',
      form: '请选择任务类型',
@ -390,7 +394,10 @@ const local: App.I18n.Schema = {
    workflow_form_add: '新增工作流',
    job: '定时任务',
    job_task: '任务管理',
-    job_batch: '执行批次'
+    job_batch: '执行批次',
+    system: '系统参数',
+    system_variable: '参数管理',
+    system_manager: '参数管理'
  },
  page: {
    common: {
@ -954,6 +961,28 @@ const local: App.I18n.Schema = {
        admin: '管理员'
      }
    },
+    system_variable: {
+      title: '系统参数',
+      variableKey: '变量标识',
+      variableName: '变量名称',
+      variableValue: '变量值',
+      variableType: '变量类型',
+      description:'变量描述',
+      detail: '变量详情',
+      add: '新增',
+      edit: '编辑',
+      addVariable: '新增变量',
+      editVariable: '编辑变量',
+      variableType1: '字符变量',
+      variableType2: '表达式变量',
+      form: {
+        variableName: '请输入变量名称',
+        variableKey: '请输入变量标识',
+        variableValue: '请输入变量值',
+        variableType: '请选择变量类型',
+        description: '请输入描述',
+      }
+    },
    log: {
      title: '日志详情',
      view: '查看日志',
--- a/src/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@ -34,6 +34,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
  retry_info: () => import("@/views/retry/info/index.vue"),
  retry_scene: () => import("@/views/retry/scene/index.vue"),
  retry_task: () => import("@/views/retry/task/index.vue"),
+  system_manager: () => import("@/views/system/manager/index.vue"),
  user_manager: () => import("@/views/user/manager/index.vue"),
  workflow_batch: () => import("@/views/workflow/batch/index.vue"),
  workflow_form_add: () => import("@/views/workflow/form/add/index.vue"),
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@ -268,6 +268,29 @@ export const generatedRoutes: GeneratedRoute[] = [
      }
    ]
  },
+  {
+    name: 'system',
+    path: '/system',
+    component: 'layout.base',
+    meta: {
+      title: 'system',
+      i18nKey: 'route.system',
+      icon: 'system:config',
+      order: 950
+    },
+    children: [
+      {
+        name: 'system_manager',
+        path: '/system/manager',
+        component: 'view.system_manager',
+        meta: {
+          title: 'system_variable',
+          icon: 'system:parameter',
+          i18nKey: 'route.system_variable'
+        }
+      }
+    ]
+  },
  {
    name: 'user',
    path: '/user',
--- a/src/service/api/system-variable.ts
+++ b/src/service/api/system-variable.ts
@ -0,0 +1,51 @@
+import { request } from '../request';
+
+export function fetchGetSystemVarPageList(params?: Api.SystemVariable.SystemVariableSearchParams) {
+  return request<Api.SystemVariable.SystemVariableList>({
+    url: '/system-variable/page/list',
+    method: 'get',
+    params
+  });
+}
+export function fetchGetSystemVarList() {
+  return request({
+    url: '/system-variable/list',
+    method: 'get'
+  });
+}
+
+/** add Variable */
+export function fetchAddVariable(data: Api.SystemVariable.SystemVariable) {
+  return request<boolean>({
+    url: '/system-variable',
+    method: 'post',
+    data
+  });
+}
+
+/** edit Variable */
+export function fetchEditVariable(data: Api.SystemVariable.SystemVariable) {
+  return request<boolean>({
+    url: '/system-variable',
+    method: 'put',
+    data
+  });
+}
+
+
+/** delete Variable */
+export function fetchDelVariable(id: number) {
+  return request<boolean>({
+    url: `/system-variable/${id}`,
+    method: 'delete'
+  });
+}
+
+/** batch delete Variable */
+export function fetchBatchDelteVariable(data: string[]) {
+  return request<boolean>({
+    url: `/system-variable/ids`,
+    method: 'delete',
+    data
+  });
+}
--- a/src/service/api/workflow.ts
+++ b/src/service/api/workflow.ts
@ -158,3 +158,10 @@ export function fetchWorkflowHistoryDetail(id: string, version: string) {
    method: 'get'
  });
 }
+
+export function fetchDeleteWorkflowHistory(id: string ,version: string) {
+  return request({
+    url: `/workflow/history/del/${id}?version=${version}`,
+    method: 'get'
+  });
+}
--- a/src/theme/settings.ts
+++ b/src/theme/settings.ts
@ -48,7 +48,7 @@ export const themeSettings: App.Theme.ThemeSetting = {
    mixChildMenuWidth: 200
  },
  footer: {
-    visible: true,
+    visible: false,
    fixed: false,
    height: 48,
    right: true
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@ -381,7 +381,6 @@ declare namespace Api {
    type GroupStatusType = 0 | 1;

    type YesOrNoType = 0 | 1;
-
    /** groupConfig */
    type GroupConfig = Common.CommonRecord<{
      /** 命名空间id */
@ -1368,4 +1367,30 @@ declare namespace Api {
      throwable: string;
    };
  }
+
+  namespace SystemVariable {
+    type VariableType = 1 | 2;
+
+    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'page' | 'size'>;
+    type SystemVariable = Common.CommonRecord<{
+      /** 显示名：当前时间 */
+      variableName: string;
+      /** key：${date} */
+      variableKey: string;
+      /** value: yyyyMMdd */
+      variableValue: string;
+      /** 变量类型 1-字符串变量 2-表达式变量 */
+      variableType: string;
+      /** 描述 */
+      description: string;
+    }>;
+
+    /**搜索参数*/
+    type SystemVariableSearchParams = CommonType.RecordNullable<
+      Pick<Api.SystemVariable.SystemVariable, 'id' | 'variableName' | 'variableKey' | 'variableValue' | 'variableType' | 'description'> &
+      CommonSearchParams
+    >;
+
+    type SystemVariableList = Common.PaginatingQueryRecord<SystemVariable>;
+  }
 }
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@ -432,6 +432,10 @@ declare namespace App {
            python: string;
          };
        };
+        variableType: {
+          variableType1: string,
+          variableType2: string
+        },
        taskType: {
          label: string;
          form: string;
@ -612,6 +616,28 @@ declare namespace App {
          upadteTime: string;
          createTime: string;
        };
+        system_variable: {
+          title: string,
+          variableKey: string,
+          variableName: string,
+          variableValue: string,
+          variableType: string,
+          description: string,
+          detail: string,
+          add: string,
+          edit: string,
+          addVariable: string,
+          editVariable: string,
+          variableType1: string,
+          variableType2: string,
+          form: {
+            variableName: string,
+            variableKey: string,
+            variableValue: string,
+            variableType: string,
+            description: string
+          }
+        },
        login: {
          common: {
            loginOrRegister: string;
--- a/src/views/system/manager/index.vue
+++ b/src/views/system/manager/index.vue
@ -0,0 +1,196 @@
+<script setup lang="tsx">
+import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { ref } from 'vue';
+import { useBoolean } from '@sa/hooks';
+import { $t } from '@/locales';
+import { useAppStore } from '@/store/modules/app';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { systemVariableTypeRecord } from '@/constants/business';
+import SystemVariableOperateDrawer from './modules/system-variable-operate-drawer.vue';
+import SystemVariableSearch from './modules/system-variable-search.vue';
+import SystemVariableDetailDrawer from './modules/system-variable-detail-drawer.vue';
+import { fetchDelVariable, fetchGetSystemVarPageList } from "@/service/api/system-variable";
+
+const appStore = useAppStore();
+
+/** 详情页属性数据 */
+const detailData = ref<Api.SystemVariable.SystemVariable | null>();
+/** 详情页可见状态 */
+const { bool: detailVisible, setTrue: openDetail } = useBoolean(false);
+
+const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
+  apiFn: fetchGetSystemVarPageList,
+  apiParams: {
+    page: 1,
+    size: 10,
+    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+    // the value can not be undefined, otherwise the property in Form will not be reactive
+    variableName: null
+  },
+  columns: () => [
+    {
+      type: 'selection'
+    },
+    {
+      key: 'id',
+      title: $t('common.index'),
+      align: 'left',
+      minWidth: 50
+    },
+    {
+      key: 'variableName',
+      title: $t('page.system_variable.variableName'),
+      align: 'left',
+      minWidth: 120,
+      render: row => {
+        function showDetailDrawer() {
+          detailData.value = row || null;
+          openDetail();
+        }
+
+        return (
+          <n-button text tag="a" type="primary" onClick={showDetailDrawer} class="ws-normal">
+            {row.variableName}
+          </n-button>
+        );
+      }
+    },
+    {
+      key: 'variableKey',
+      title: $t('page.system_variable.variableKey'),
+      align: 'left',
+      minWidth: 50,
+    },
+    {
+      key: 'variableValue',
+      title: $t('page.system_variable.variableValue'),
+      align: 'left',
+      minWidth: 50,
+    },
+    {
+      key: 'variableType',
+      title: $t('page.system_variable.variableType'),
+      align: 'left',
+      minWidth: 50,
+      render: row => {
+        if (row.role === null) {
+          return null;
+        }
+        const tagMap: Record<Api.SystemVariable.VariableType, NaiveUI.ThemeColor> = {
+          1: 'info',
+          2: 'warning'
+        };
+        const label = $t(systemVariableTypeRecord[row.variableType]);
+
+        return <NTag type={tagMap[row.variableType!]}>{label}</NTag>;
+      }
+    },
+
+    {
+      key: 'description',
+      title: $t('page.system_variable.description'),
+      align: 'left',
+      minWidth: 50,
+    },
+    {
+      key: 'createDt',
+      title: $t('common.createDt'),
+      align: 'left',
+      minWidth: 50
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 130,
+      render: row => (
+        <div class="flex-center gap-8px">
+          <NButton type="primary" ghost size="small" text onClick={() => edit(row.id!)}>
+            {$t('common.edit')}
+          </NButton>
+            <>
+              <n-divider vertical />
+              <NPopconfirm onPositiveClick={() => handleDelete(row.id!)}>
+                {{
+                  default: () => $t('common.confirmDelete'),
+                  trigger: () => (
+                    <NButton type="error" text ghost size="small">
+                      {$t('common.delete')}
+                    </NButton>
+                  )
+                }}
+              </NPopconfirm>
+            </>
+
+        </div>
+      )
+    }
+  ]
+});
+
+const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onDeleted, onBatchDeleted } =
+  useTableOperate(data, getData);
+
+
+
+async function handleBatchDelete() {
+  const { error } = await fetchBatchDelteVariable(checkedRowKeys.value);
+  if (error) return;
+  onBatchDeleted();
+}
+
+function edit(id: string) {
+  handleEdit(id);
+}
+async function handleDelete(id: string) {
+  const { error } = await fetchDelVariable(id as any);
+  if (error) return;
+  onDeleted();
+}
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <SystemVariableSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
+    <DeleteAlert />
+    <NCard
+      :title="$t('page.system_variable.title')"
+      :bordered="false"
+      size="small"
+      class="sm:flex-1-hidden card-wrapper"
+      header-class="view-card-header"
+    >
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="columnChecks"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          @add="handleAdd"
+          @delete="handleBatchDelete"
+          @refresh="getData"
+        />
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="962"
+        :loading="loading"
+        remote
+        :row-key="row => row.id"
+        :pagination="mobilePagination"
+        class="sm:h-full"
+      />
+      <SystemVariableOperateDrawer
+        v-model:visible="drawerVisible"
+        :operate-type="operateType"
+        :row-data="editingData"
+        @submitted="getData"
+      />
+      <SystemVariableDetailDrawer v-model:visible="detailVisible" :row-data="detailData" />
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>
--- a/src/views/system/manager/modules/system-variable-detail-drawer.vue
+++ b/src/views/system/manager/modules/system-variable-detail-drawer.vue
@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { NTag } from 'naive-ui';
+import { roleRecord } from '@/constants/business';
+import { $t } from '@/locales';
+import { tagColor } from '@/utils/common';
+
+defineOptions({
+  name: 'SystemVariableDetailDrawer'
+});
+
+interface Props {
+  /** row data */
+  rowData?: Api.SystemVariable.SystemVariable | null;
+}
+
+defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" :title="$t('page.system_variable.detail')">
+    <NDescriptions label-placement="top" bordered :column="2">
+      <NDescriptionsItem :label="$t('page.system_variable.variableName')" :span="2">
+        {{ rowData?.variableName }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.system_variable.variableType')" :span="2">
+        {{ rowData?.variableType }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.system_variable.variableKey')" :span="2">
+        {{ rowData?.variableKey }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.system_variable.variableValue')" :span="2">
+        {{ rowData?.variableValue }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.system_variable.description')" :span="2">
+        {{ rowData?.description }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('common.updateDt')" :span="2">
+        {{ rowData?.updateDt }}
+      </NDescriptionsItem>
+    </NDescriptions>
+  </OperateDrawer>
+</template>
+
+<style scoped>
+.title {
+  font-weight: bolder !important;
+}
+</style>
--- a/src/views/system/manager/modules/system-variable-operate-drawer.vue
+++ b/src/views/system/manager/modules/system-variable-operate-drawer.vue
@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+import type { OptionValue } from 'naive-ui/es/transfer/src/interface';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import OperateDrawer from '@/components/common/operate-drawer.vue';
+import { $t } from '@/locales';
+import { fetchGetAllGroupConfigList } from '@/service/api';
+import {systemVariableTypeOptions} from '@/constants/business';
+import {fetchEditVariable,fetchAddVariable} from "@/service/api/system-variable";
+
+defineOptions({
+  name: 'SystemVariableOperateDrawer'
+});
+
+interface Props {
+  /** the type of operation */
+  operateType: NaiveUI.TableOperateType;
+  /** the edit row data */
+  rowData?: Api.SystemVariable.SystemVariable | null;
+}
+
+const valueRef = ref();
+const groupConfigs = ref();
+const updatePass = ref<number>(0);
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<NaiveUI.TableOperateType, string> = {
+    add: $t('page.system_variable.addVariable'),
+    edit: $t('page.system_variable.editVariable')
+  };
+  return titles[props.operateType];
+});
+
+type Model = Pick<
+  Api.SystemVariable.SystemVariable,
+  'id' | 'variableName' | 'variableKey' | 'variableValue' | 'variableType' | 'description'
+>;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    variableName: '',
+    variableKey: '',
+    variableValue: '',
+    variableType: 1,
+    description: ''
+  };
+}
+
+type RuleRecord = Partial<Record<keyof Model, App.Global.FormRule[]>>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+
+    variableName: defaultRequiredRule,
+    variableKey: defaultRequiredRule,
+    variableValue: defaultRequiredRule,
+    variableType: defaultRequiredRule,
+    description: defaultRequiredRule
+
+};
+
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
+    Object.assign(model, createDefaultModel());
+    return;
+  }
+
+  if (props.operateType === 'edit' && props.rowData) {
+    Object.assign(model, props.rowData);
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+  // request
+  if (props.operateType === 'add') {
+    const {
+      variableKey,
+      variableName,
+      variableValue,
+      variableType,
+      description } = model;
+    const { error } = await fetchAddVariable({
+      variableKey,
+      variableName,
+      variableValue,
+      variableType,
+      description
+    });
+    if (error) return;
+    window.$message?.success($t('common.addSuccess'));
+  }
+
+  if (props.operateType === 'edit') {
+    const { id, variableKey,variableName,variableValue,variableType,description } = model;
+    const { error } = await fetchEditVariable({
+      id,
+      variableKey,
+      variableName,
+      variableValue,
+      variableType,
+      description
+    });
+    if (error) return;
+    window.$message?.success($t('common.updateSuccess'));
+  }
+
+  closeDrawer();
+  emit('submitted');
+}
+
+const getAllGroupConfigList = async () => {
+  const res = await fetchGetAllGroupConfigList([]);
+  groupConfigs.value = res.data?.map(option => ({
+    value: `${option.groupName}@${option.namespaceId}`,
+    label: `${option.groupName}(${option.namespaceName})`
+  }));
+};
+
+onMounted(() => {
+  // 加载组列表数据
+  getAllGroupConfigList();
+});
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+  }
+});
+
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" :title="title" @submitted="handleSubmit">
+    <NForm ref="formRef" :model="model" :rules="rules">
+      <NFormItem :label="$t('page.system_variable.variableName')" >
+        <NInput
+          v-model:value="model.variableName"
+          :placeholder="$t('page.system_variable.form.variableName')" />
+      </NFormItem>
+      <NFormItem :label="$t('page.system_variable.variableType')" path="variableType">
+        <NRadioGroup v-model:value="model.variableType" name="initScene">
+          <NSpace>
+            <NRadio
+              v-for="item in systemVariableTypeOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="$t(item.label)"
+            />
+          </NSpace>
+          <example-expression />
+        </NRadioGroup>
+<!--        <NPopover trigger="hover"-->
+<!--        >-->
+<!--          <template #trigger>-->
+<!--            <NButton text>-->
+<!--              <SvgIcon icon="ant-design:info-circle-outlined" class="text-18px color-blue" />-->
+<!--            </NButton>-->
+<!--          </template>-->
+<!--          输入$提示变量信息-->
+<!--        </NPopover>-->
+      </NFormItem>
+      <NFormItem :label="$t('page.system_variable.variableKey')" path="variableKey">
+        <NInput v-model:value="model.variableKey" :placeholder="$t('page.system_variable.form.variableKey')" />
+      </NFormItem>
+      <NFormItem :label="$t('page.system_variable.variableValue')" path="variableValue">
+        <NInput v-model:value="model.variableValue" :placeholder="$t('page.system_variable.form.variableValue')" />
+      </NFormItem>
+      <NFormItem :label="$t('page.system_variable.description')" path="description">
+        <NInput v-model:value="model.description" :placeholder="$t('page.system_variable.form.description')" />
+      </NFormItem>
+    </NForm>
+    <template #footer>
+      <NSpace :size="16">
+        <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+        <NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
+      </NSpace>
+    </template>
+  </OperateDrawer>
+</template>
+
+<style scoped></style>
--- a/src/views/system/manager/modules/system-variable-search.vue
+++ b/src/views/system/manager/modules/system-variable-search.vue
@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import {translateOptions} from "@/utils/common";
+import {groupConfigStatusOptions} from "@/constants/business";
+
+defineOptions({
+  name: 'SystemVariableCenterSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const model = defineModel<Api.SystemVariable.SystemVariableSearchParams>('model', { required: true });
+
+function reset() {
+  emit('reset');
+}
+
+function search() {
+  emit('search');
+}
+</script>
+
+<template>
+  <SearchForm :model="model" @search="search" @reset="reset">
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.system_variable.variableName')" path="variableName" class="pr-24px">
+      <NInput v-model:value="model.variableName" :placeholder="$t('page.system_variable.form.variableName')" clearable />
+    </NFormItemGi>
+<!--    <NFormItemGi span="24 s:12 m:6" :label="$t('page.system_variable.varType')" path="groupStatus" class="pr-24px">-->
+<!--      <NSelect-->
+<!--        v-model:value="model.groupStatus"-->
+<!--        :placeholder="$t('page.system_variable.form.variableType')"-->
+<!--        :options="translateOptions(groupConfigStatusOptions)"-->
+<!--        clearable-->
+<!--      />-->
+<!--    </NFormItemGi>-->
+  </SearchForm>
+</template>
+
+<style scoped></style>
--- a/src/views/workflow/form/detail/index.vue
+++ b/src/views/workflow/form/detail/index.vue
@ -9,6 +9,7 @@ const store = useWorkflowStore();
 const route = useRoute();

 const spinning = ref(false);
+const hisDisabled = ref(true);

 const id: string = String(route.query.id);

@ -32,7 +33,7 @@ onMounted(() => {
 </script>

 <template>
-  <Workflow v-model="node" :spinning="spinning" disabled />
+  <Workflow v-model="node" :spinning="spinning" disabled :hisDisabled="hisDisabled"/>
 </template>

 <style scoped></style>
--- a/src/views/workflow/form/edit/index.vue
+++ b/src/views/workflow/form/edit/index.vue
@ -15,6 +15,7 @@ const spinning = ref(false);
 const id: string = String(route.query.id);

 const node = ref<Workflow.NodeDataType>({});
+const hisDisabled = ref(true);

 const getDetail = async () => {
  spinning.value = true;
@ -46,7 +47,7 @@ const cancel = () => {
 </script>

 <template>
-  <Workflow v-model="node" :spinning="spinning" @save="update" @cancel="cancel" />
+  <Workflow v-model="node" :spinning="spinning" @save="update" @cancel="cancel" :hisDisabled="hisDisabled" />
 </template>

 <style scoped></style>
--- a/src/views/workflow/task/index.vue
+++ b/src/views/workflow/task/index.vue
@ -1,9 +1,16 @@
 <script setup lang="tsx">
 import { NButton, NDropdown, NPopconfirm, NTag } from 'naive-ui';
 import { useRouter } from 'vue-router';
-import { ref } from 'vue';
+import {ref, h} from 'vue';
 import { useBoolean } from '@sa/hooks';
-import { fetchBatchDeleteWorkflow, fetchGetWorkflowPageList, fetchUpdateWorkflowStatus } from '@/service/api';
+import {
+  fetchBatchDeleteWorkflow,
+  fetchDeleteWorkflowHistory,
+  fetchGetWorkflowPageList,
+  fetchUpdateWorkflowStatus, fetchWorkflowHistory
+} from '@/service/api';
+import index from "@/views/namespace/index.vue";
+
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
@ -15,7 +22,9 @@ import { downloadFetch } from '@/utils/download';
 import { useRouterPush } from '@/hooks/common/router';
 import WorkflowSearch from './modules/workflow-search.vue';
 import WorkflowTriggerModal from './modules/workflow-trigger-modal.vue';
-
+// import { DeleteTwotone } from '@vicons'
+import Delete24Regular from '@vicons/fluent/Delete24Regular'
+import BookSearch20Regular from '@vicons/fluent/BookSearch20Regular'
 const { hasAuth } = useAuth();

 const router = useRouter();
@ -24,7 +33,90 @@ const { routerPushByKey } = useRouterPush();

 const triggerData = ref<Api.Workflow.Workflow | null>();
 const { bool: triggerVisible, setTrue: openTriggerModal } = useBoolean(false);
+const showModal =  ref(false);
+const bodyStyle = ref({
+    width: '900px'
+  });
+const verData = ref();
+const rowClassName = (row:any) => {
+  console.log(row);
+  return row.version === 0 ? 'current-version-row' : ''
+}
+const  pagination= ref(
+  {
+    pageSize: 5
+  }
+)
+const verColumns = ref([
+  {
+    key: 'id',
+    title: $t('common.index'),
+    align: 'center',
+    width: 120
+  },
+  {
+    key: 'version',
+    title: '版本',
+    align: 'center',
+    width: 120,
+    // render: (row) => `v${row.version}`
+    render(row:any,index:any) {
+      return h('div', {
+        class: index === 0 ? 'brush-mark' : '',
+        style: { display: 'inline-block' }
+      }, `v${row.version}`)
+    }
+  },
+  {
+    key: 'workflowName',
+    title: '描述',
+    align: 'center',
+    width: 120
+  },
+  {
+    key: 'createDt',
+    title: '创建时间',
+    align: 'center',
+    width: 120
+  },
+  {
+    key: 'operate',
+    title: $t('common.operate'),
+    align: 'center',
+    fixed: 'right',
+    width: 200,
+    render: (row:any, { index:any }) => {
+      console.log(index)
+      return (
+        <div class="flex-center gap-8px">
+          <NButton text type="warning" ghost size="small" onClick={() => detail(row.id!)}>
+            <n-icon size="26" color="#0e7a0d">
+              <BookSearch20Regular />
+            </n-icon>
+          </NButton>

+          <n-divider vertical />
+
+          <div class="flex-center">
+            <NPopconfirm onPositiveClick={() => handleDeleteVer(row.id,row.version)}  >
+              {{
+                default: () => $t('common.confirmDelete'),
+                trigger: () => (
+                  <NButton quaternary type="error" size="small"  disabled={!row || index === undefined}>
+                    <n-icon size="26" color="#0e7a0d">
+                      <Delete24Regular />
+                    </n-icon>
+                  </NButton>
+                )
+              }}
+            </NPopconfirm>
+          </div>
+        </div>
+      );
+    }
+  }
+
+]);
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: fetchGetWorkflowPageList,
  apiParams: {
@ -170,6 +262,16 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
                </NPopconfirm>
              </div>
            )
+          },
+          {
+            type: 'divider',
+            key: 'd2'
+          },
+          {
+            // type:'render',
+            label: '版本',
+            key: 'version',
+            click: () => showVer(row.id!)
          }
        ];

@ -228,6 +330,16 @@ async function handleDelete(id: string) {
  onDeleted();
 }

+async function handleDeleteVer(id: string,version:string){
+  // request
+  const { error } = await fetchDeleteWorkflowHistory(id,version);
+  if (!error){
+    const { data, error } = await fetchWorkflowHistory(id);
+    verData.value = data
+  } return;
+
+
+}
 function edit(id: string) {
  router.push({ path: '/workflow/form/edit', query: { id } });
 }
@ -244,9 +356,25 @@ function copy(id: string) {
  router.push({ path: '/workflow/form/copy', query: { id } });
 }

-// function batch(id: string) {
-//   router.push({ path: '/workflow/batch', state: { workflowId: id } });
-// }
+async function  showVer(id: string){
+  console.log(id);
+  showModal.value = true;
+  console.log(showModal.value)
+  const { data, error } = await fetchWorkflowHistory(id);
+  if (!error) {
+      verData.value = data
+    console.log("verData"+verData.value)
+  } else {
+
+    window.$message?.error('获取工作流历史版本失败');
+  }
+  //请求数据
+}
+
+function dispVer(){
+  // showModal.value = false;
+
+}

 async function execute(row: Api.Workflow.Workflow) {
  triggerData.value = row;
@ -326,9 +454,64 @@ function goToBatch(workflowId: string) {
        :pagination="mobilePagination"
        class="sm:h-full"
      />
+      <n-modal
+        v-model:show="showModal"
+        class="custom-card"
+        preset="card"
+        title="版本信息"
+        size="huge"
+        :bordered="false"
+        :style="bodyStyle"
+      >
+        <template #header-extra>
+        </template>
+          <n-data-table
+            size="small"
+            :columns="verColumns"
+            :data="verData"
+            :row-props:any="rowClassName"
+            :pagination="pagination"
+          />
+        <template #footer>
+<!--          <n-flex justify="end">-->
+<!--            <n-button strong secondary round type="info" :on-click="dispVer()">-->
+<!--              关闭-->
+<!--            </n-button>-->
+<!--          </n-flex>-->
+        </template>
+      </n-modal>
    </NCard>
    <WorkflowTriggerModal v-model:visible="triggerVisible" :row-data="triggerData" />
  </div>
 </template>

-<style scoped></style>
+<style scoped>
+:deep(.brush-mark) {
+  position: relative;
+  z-index: 1;
+  padding: 0 2px;
+}
+
+:deep(.brush-mark::after) {
+  content: '';
+  position: absolute;
+  left: -27px;
+  bottom: 2px;
+  width: 80px ;
+  height: 24px;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 165, 0, 0.2),
+    rgba(255, 165, 0, 0.5) 50%,
+    rgba(255, 165, 0, 0.2)
+  );
+  z-index: -1;
+  transform: rotate(-1deg) skewX(-10deg);
+  border-radius: 3px;
+}
+
+:deep(.current-version-row td) {
+  background-color: #fff8e6;
+  font-weight: 500;
+}
+</style>