From ced3c6ee11e388fd9804dd477c48182910c2f22e Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Fri, 17 Jan 2025 18:17:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=B7=A5=E5=85=B7=E7=AE=B1?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=B5=84=E6=BA=90=E6=B1=A0=E5=8D=8F=E8=AE=AE?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4=5Ftable=E5=85=A8=E5=B1=80=E6=B3=A8=E5=86=8C?=
 =?UTF-8?q?=E3=80=81=E6=96=B0=E5=A2=9Eticket-payload=E7=BB=84=E4=BB=B6=20#?=
 =?UTF-8?q?8076=20#=20Reviewed,=20transaction=20id:=2029559?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/common/importComps.ts     | 24 +++++++++
 dbm-ui/frontend/src/hooks/useCreateTicket.tsx |  5 +-
 dbm-ui/frontend/src/types/biz-components.d.ts | 12 +++++
 .../column/hybrid-host-column/Index.vue       | 13 +++--
 .../column/multiple-host-column/Index.vue     | 13 +++--
 .../column/single-host-column/Index.vue       | 13 +++--
 .../form-item/ticket-payload/Index.vue        | 24 +++++++++
 .../mysql/MYSQL_ADD_SLAVE/Create.vue          | 21 ++++----
 .../components/ClusterColumn.vue              |  7 ++-
 .../components/ClusterMigrateTable.vue        | 11 ++--
 .../components/HostColumnGroup.vue            | 19 ++++---
 .../components/HostMigrateTable.vue           | 11 ++--
 .../mysql/MYSQL_PROXY_ADD/Create.vue          | 21 ++++----
 .../components/HostColumnGroup.vue            | 19 ++++---
 .../components/HostTable.vue                  | 11 ++--
 .../components/InstanceColumnGroup.vue        | 13 +++--
 .../components/InstanceTable.vue              | 11 ++--
 .../components/local-restore/Index.vue        | 27 +++++-----
 .../local-restore/SlaveInstanceColumn.vue     |  7 ++-
 .../components/restore/Index.vue              | 21 ++++----
 .../restore/SlaveHostColumnGroup.vue          | 13 +++--
 .../WithRelatedClustersColumn.vue             |  7 ++-
 .../redis/REDIS_CLUSTER_CUTOFF/Create.vue     | 33 ++++++------
 .../components/HostColumn.vue                 |  8 ++-
 .../components/SpecColumn.vue                 |  9 ++--
 .../redis/REDIS_PROXY_SCALE_DOWN/Create.vue   | 51 ++++++++-----------
 .../components/ClusterColumn.vue              |  7 ++-
 .../redis/REDIS_SCALE_UPDOWN/Create.vue       | 33 ++++++------
 .../components/ClusterColumn.vue              |  7 ++-
 .../components/CurrentCapacityColumn.vue      |  7 ++-
 .../components/RedisVersionColumn.vue         | 10 ++--
 .../target-capacity-column/Index.vue          |  9 ++--
 .../sqlserver/SQLSERVER_ADD_SLAVE/Create.vue  | 21 ++++----
 .../components/ClusterColumn.vue              |  7 ++-
 .../components/local-restore/Index.vue        | 27 +++++-----
 .../local-restore/SlaveInstanceColumn.vue     |  7 ++-
 .../components/restore/Index.vue              | 21 ++++----
 .../restore/SlaveHostColumnGroup.vue          | 13 +++--
 .../TENDBCLUSTER_MIGRATE_CLUSTER/Create.vue   | 26 +++++-----
 .../components/MasterHostColumnGroup.vue      | 13 +++--
 .../components/SlaveHostColumnGroup.vue       | 14 +++--
 .../components/local-restore/Index.vue        | 27 +++++-----
 .../local-restore/SlaveInstanceColumn.vue     |  7 ++-
 .../components/restore/Index.vue              | 32 ++++++------
 .../components/restore/NewSlaveHostColumn.vue |  6 +--
 .../restore/SlaveHostColumnGroup.vue          | 13 +++--
 .../TENDBCLUSTER_SPIDER_MNT_APPLY/Create.vue  | 27 +++++-----
 .../components/ClusterColumn.vue              |  7 ++-
 .../Create.vue                                | 32 ++++++------
 .../components/ClusterColumn.vue              |  7 ++-
 50 files changed, 402 insertions(+), 402 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue

diff --git a/dbm-ui/frontend/src/common/importComps.ts b/dbm-ui/frontend/src/common/importComps.ts
index 61d2d3fb86..0b7f671539 100644
--- a/dbm-ui/frontend/src/common/importComps.ts
+++ b/dbm-ui/frontend/src/common/importComps.ts
@@ -30,6 +30,17 @@ import DbStatus from '@components/db-status/index.vue';
 import DbTable from '@components/db-table/index.vue';
 import DbOriginalTable from '@components/db-table/OriginalTable.vue';
 import DbTextarea from '@components/db-textarea/DbTextarea.vue';
+import EditTable, {
+  Block as EditTableBlock,
+  Column as EditTableColumn,
+  DatePicker as EditTableDatePicker,
+  Input as EditTableInput,
+  Row as EditTableRow,
+  Select as EditTableSelect,
+  TagInput as EditTableTagInput,
+  Textarea as EditTableTextarea,
+  TimePicker as EditTableTimePicker,
+} from '@components/editable-table/Index.vue';
 import FunController from '@components/function-controller/FunController.vue';
 import MoreActionExtend from '@components/more-action-extend/Index.vue';
 import ScrollFaker from '@components/scroll-faker/Index.vue';
@@ -37,12 +48,25 @@ import SkeletonLoading from '@components/skeleton-loading/Index.vue';
 import SmartAction from '@components/smart-action/Index.vue';
 import { ipSelector } from '@components/vue2/ip-selector';
 
+import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+
 import { Table, TableColumn } from '@blueking/table';
 import UserSelector from '@patch/user-selector/selector.vue';
 
 import('@blueking/table/vue3/vue3.css');
 
 export const setGlobalComps = (app: App<Element>) => {
+  app.component('EditTable', EditTable);
+  app.component('EditTableBlock', EditTableBlock);
+  app.component('EditTableColumn', EditTableColumn);
+  app.component('EditTableDatePicker', EditTableDatePicker);
+  app.component('EditTableInput', EditTableInput);
+  app.component('EditTableRow', EditTableRow);
+  app.component('EditTableSelect', EditTableSelect);
+  app.component('EditTableTagInput', EditTableTagInput);
+  app.component('EditTableTextarea', EditTableTextarea);
+  app.component('EditTableTimePicker', EditTableTimePicker);
+  app.component('OperationColumn', OperationColumn);
   app.component('DbCard', DbCard);
   app.component('DbForm', DbForm);
   app.component('DbFormItem', DbFormItem);
diff --git a/dbm-ui/frontend/src/hooks/useCreateTicket.tsx b/dbm-ui/frontend/src/hooks/useCreateTicket.tsx
index 1496f1c342..d3635f406d 100644
--- a/dbm-ui/frontend/src/hooks/useCreateTicket.tsx
+++ b/dbm-ui/frontend/src/hooks/useCreateTicket.tsx
@@ -13,11 +13,12 @@ export function useCreateTicket<T>(ticketType: TicketTypes, options?: { onSucces
   const router = useRouter();
   const { t, locale } = useI18n();
 
-  const run = async (formData: { details: T; remark: string; ignore_duplication?: boolean }) => {
+  const run = async (formData: { details: T; remark?: string; ignore_duplication?: boolean }) => {
     const params = {
       ticket_type: ticketType,
       bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-      ...formData,
+      details: formData.details,
+      remark: formData.remark || '',
     };
     try {
       loading.value = true;
diff --git a/dbm-ui/frontend/src/types/biz-components.d.ts b/dbm-ui/frontend/src/types/biz-components.d.ts
index 9753c30ecd..e5b1aa2511 100644
--- a/dbm-ui/frontend/src/types/biz-components.d.ts
+++ b/dbm-ui/frontend/src/types/biz-components.d.ts
@@ -14,6 +14,18 @@ declare module 'vue' {
     DbStatus: typeof import('@components/db-status/index.vue').default;
     DbTable: typeof import('@blueking/table/typings/BkTable.vue');
     DbTable: typeof import('@blueking/table/typings/BkTableColumn.vue');
+    EditTable: typeof import('@components/editable-table/Index.vue').default;
+    EditTableBlock: typeof import('@components/editable-table/Index.vue').Block;
+    EditTableColumn: typeof import('@components/editable-table/Index.vue').Column;
+    EditTableDatePicker: typeof import('@components/editable-table/Index.vue').DatePicker;
+    EditTableInput: typeof import('@components/editable-table/Index.vue').Input;
+    EditTableRow: typeof import('@components/editable-table/Index.vue').Row;
+    EditTableSelect: typeof import('@components/editable-table/Index.vue').Select;
+    EditTableTagInput: typeof import('@components/editable-table/Index.vue').TagInput;
+    EditTableTextarea: typeof import('@components/editable-table/Index.vue').Textarea;
+    EditTableTimePicker: typeof import('@components/editable-table/Index.vue').TimePicker;
+    OperationColumn: typeof import('@views/db-manage/common/toolbox-field/column/operation-column/Index.vue').default;
+    OperationRow: typeof import('@views/db-manage/common/toolbox-field/row/operation-row/Index.vue').default;
     FunController: typeof import('@components/function-controller/FunController.vue').default;
     MoreActionExtend: typeof import('@components/more-action-extend/Index.vue').default;
     ScrollFaker: typeof import('@components/scroll-faker/Index.vue').default;
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue
index 1ddf2e8215..c107d7c772 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue
@@ -12,13 +12,13 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :field="field"
     :label="label"
     :min-width="minWidth"
     required
     :rule="rules">
-    <Select
+    <EditTableSelect
       v-model="modelValue"
       :list="selectList"
       @change="handleSelectChange">
@@ -29,7 +29,7 @@
         </div>
       </template>
       <template #trigger>
-        <Input
+        <EditTableInput
           v-if="modelValue === HostSelectType.MANUAL"
           v-model="localValue"
           :placeholder="t('请选择主机')">
@@ -43,7 +43,7 @@
               type="host-select"
               @click.stop="handleShowSelector" />
           </template>
-        </Input>
+        </EditTableInput>
         <div
           v-else-if="modelValue === HostSelectType.AUTO"
           class="table-cell">
@@ -55,8 +55,8 @@
           {{ t(placeholder) }}
         </div>
       </template>
-    </Select>
-  </Column>
+    </EditTableSelect>
+  </EditTableColumn>
   <ResourceHostSelector
     v-model:is-show="showSelector"
     v-mode="hostList"
@@ -77,7 +77,6 @@
 
   import { getSpecResourceCount } from '@services/source/dbresourceResource';
 
-  import { Column, Input, Select } from '@components/editable-table/Index.vue';
   import ResourceHostSelector, { type IValue } from '@components/resource-host-selector/Index.vue';
 
   export type HostInfo = IValue;
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/multiple-host-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/multiple-host-column/Index.vue
index bd44e890f1..8e8c44ccfd 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/multiple-host-column/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/multiple-host-column/Index.vue
@@ -12,14 +12,14 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="editable ? rules : []"
     :field="field"
     :label="label"
     :loading="loading"
     :min-width="300"
     required>
-    <Input
+    <EditTableInput
       v-if="editable"
       v-model="localValue"
       :placeholder="t('请选择主机')"
@@ -34,8 +34,8 @@
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </Input>
-    <Block
+    </EditTableInput>
+    <EditTableBlock
       v-else
       v-model="localValue"
       :placeholder="t('请选择主机')">
@@ -49,8 +49,8 @@
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </Block>
-  </Column>
+    </EditTableBlock>
+  </EditTableColumn>
   <ResourceHostSelector
     v-model:is-show="showSelector"
     v-mode="modelValue"
@@ -77,7 +77,6 @@
 
   import { ipv4 } from '@common/regex';
 
-  import { Block, Column, Input } from '@components/editable-table/Index.vue';
   import ResourceHostSelector, { type IValue } from '@components/resource-host-selector/Index.vue';
 
   interface Props {
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/single-host-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/single-host-column/Index.vue
index 9df6d2b017..22981a13d5 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/single-host-column/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/single-host-column/Index.vue
@@ -12,14 +12,14 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="editable ? rules : []"
     :field="field"
     :label="label"
     :loading="loading"
     :min-width="minWidth"
     required>
-    <Input
+    <EditTableInput
       v-if="editable"
       v-model="modelValue.ip"
       :placeholder="t('请选择主机')"
@@ -31,8 +31,8 @@
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </Input>
-    <Block
+    </EditTableInput>
+    <EditTableBlock
       v-else
       v-model="modelValue.ip"
       :placeholder="t('请选择主机')">
@@ -43,8 +43,8 @@
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </Block>
-  </Column>
+    </EditTableBlock>
+  </EditTableColumn>
   <ResourceHostSelector
     v-model="selected"
     v-model:is-show="showSelector"
@@ -60,7 +60,6 @@
 
   import { ipv4 } from '@common/regex';
 
-  import { Block, Column, Input } from '@components/editable-table/Index.vue';
   import ResourceHostSelector, { type IValue } from '@components/resource-host-selector/Index.vue';
 
   interface Props {
diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue
new file mode 100644
index 0000000000..79137803f9
--- /dev/null
+++ b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue
@@ -0,0 +1,24 @@
+<template>
+  <BkFormItem :label="t('备注')">
+    <BkInput
+      v-model="modelValue.remark"
+      :maxlength="500"
+      :placeholder="t('请提供更多有用信息申请信息_以获得更快审批')"
+      style="width: 700px"
+      type="textarea" />
+  </BkFormItem>
+</template>
+<script lang="ts">
+  export const createTickePayload = () => ({
+    remark: '',
+  });
+</script>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<ReturnType<typeof createTickePayload>>({
+    required: true,
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue
index cac1f165fe..32a17e9c79 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue
@@ -21,12 +21,12 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData"
         :rules="rules">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <WithRelatedClustersColumn
@@ -40,10 +40,10 @@
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
+        </EditTableRow>
+      </EditTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -77,12 +77,11 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
   import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
   import WithRelatedClustersColumn from '@views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue';
 
   interface RowData {
@@ -122,7 +121,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     backupSource: BackupSourceType.REMOTE,
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -182,7 +181,7 @@
           new_slave: item.slave,
         })),
       },
-      remark: formData.remark,
+      remark: formData.ticketPayload.remark,
     });
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue
index da869947d1..a129f3df7b 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="cluster.cluster_domains"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Textarea
+    <EditTableTextarea
       v-model="modelValue.cluster_domains"
       :placeholder="t('请输入集群域名_多个集群用分隔符输入')"
       @change="handleInputChange" />
-  </Column>
+  </EditTableColumn>
   <ClusterSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.TENDBHA]"
@@ -53,7 +53,6 @@
   import { batchSplitRegex, domainRegex } from '@common/regex';
 
   import ClusterSelector from '@components/cluster-selector/Index.vue';
-  import { Column, Textarea } from '@components/editable-table/Index.vue';
 
   interface Props {
     selectedIds: number[];
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue
index 8f07d1e895..3e8c6552b5 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue
@@ -12,11 +12,11 @@
 -->
 
 <template>
-  <EditableTable
+  <EditTable
     ref="table"
     class="mb-20"
     :model="tableData">
-    <EditableTableRow
+    <EditTableRow
       v-for="(item, index) in tableData"
       :key="index">
       <ClusterColumn
@@ -34,8 +34,8 @@
       <OperationColumn
         v-model:table-data="tableData"
         :create-row-method="createTableRow" />
-    </EditableTableRow>
-  </EditableTable>
+    </EditTableRow>
+  </EditTable>
 </template>
 <script lang="ts" setup>
   import { useTemplateRef } from 'vue';
@@ -43,9 +43,6 @@
 
   import TendbhaModel from '@services/model/mysql/tendbha';
 
-  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
 
   import { MigrateTypes } from '../types';
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostColumnGroup.vue
index 4de60a4511..50d1b3f351 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostColumnGroup.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostColumnGroup.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="master.ip"
     fixed="left"
@@ -28,12 +28,12 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditTableColumn>
+  <EditTableColumn
     :label="t('同机关联实例')"
     :loading="loading"
     :min-width="150">
@@ -47,11 +47,11 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditTableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
-  <Column
+  </EditTableColumn>
+  <EditTableColumn
     :label="t('同机关联集群')"
     :loading="loading"
     :min-width="150">
@@ -65,10 +65,10 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditTableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditTableColumn>
   <InstanceSelector
     v-model:is-show="showSelector"
     :cluster-types="[TENDBHA_HOST]"
@@ -85,7 +85,6 @@
   import { ClusterTypes } from '@common/const';
   import { ipv4 } from '@common/regex';
 
-  import { Block, Column, Input } from '@components/editable-table/Index.vue';
   import InstanceSelector, {
     type InstanceSelectorValues,
     type IValue,
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostMigrateTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostMigrateTable.vue
index c14b4ed29b..4cffd09c52 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostMigrateTable.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/HostMigrateTable.vue
@@ -12,11 +12,11 @@
 -->
 
 <template>
-  <EditableTable
+  <EditTable
     ref="table"
     class="mb-20"
     :model="tableData">
-    <EditableTableRow
+    <EditTableRow
       v-for="(item, index) in tableData"
       :key="index">
       <HostColumnGroup
@@ -36,16 +36,13 @@
       <OperationColumn
         v-model:table-data="tableData"
         :create-row-method="createTableRow" />
-    </EditableTableRow>
-  </EditableTable>
+    </EditTableRow>
+  </EditTable>
 </template>
 <script lang="ts" setup>
   import { useTemplateRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
 
   import { MigrateTypes } from '../types';
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Create.vue
index 1f369b9a66..092445ddfc 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_ADD/Create.vue
@@ -21,12 +21,12 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData"
         :rules="rules">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <WithRelatedClustersColumn
@@ -40,9 +40,9 @@
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
-      <TicketRemark v-model="formData.remark" />
+        </EditTableRow>
+      </EditTable>
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -75,11 +75,10 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
   import WithRelatedClustersColumn from '@views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue';
 
   interface RowData {
@@ -118,7 +117,7 @@
 
   const defaultData = () => ({
     tableData: [createTableRow()],
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -175,7 +174,7 @@
           new_proxy: item.proxy,
         })),
       },
-      remark: formData.remark,
+      remark: formData.ticketPayload.remark,
     });
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostColumnGroup.vue
index 1db99b70e2..3ffee752e0 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostColumnGroup.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostColumnGroup.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="originProxy.ip"
     fixed="left"
@@ -28,12 +28,12 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditTableColumn>
+  <EditTableColumn
     :label="t('同机关联实例')"
     :loading="loading"
     :min-width="300">
@@ -47,11 +47,11 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditTableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
-  <Column
+  </EditTableColumn>
+  <EditTableColumn
     :label="t('同机关联集群')"
     :loading="loading"
     :min-width="300">
@@ -65,10 +65,10 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditTableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditTableColumn>
   <InstanceSelector
     v-model:is-show="showSelector"
     :cluster-types="[TENDBHA_HOST]"
@@ -85,7 +85,6 @@
   import { ClusterTypes } from '@common/const';
   import { ipv4 } from '@common/regex';
 
-  import { Block, Column, Input } from '@components/editable-table/Index.vue';
   import InstanceSelector, {
     type InstanceSelectorValues,
     type IValue,
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostTable.vue
index d39d90b690..d9164ef61b 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostTable.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/HostTable.vue
@@ -12,11 +12,11 @@
 -->
 
 <template>
-  <EditableTable
+  <EditTable
     ref="table"
     class="mb-20"
     :model="tableData">
-    <EditableTableRow
+    <EditTableRow
       v-for="(item, index) in tableData"
       :key="index">
       <HostColumnGroup
@@ -30,16 +30,13 @@
       <OperationColumn
         v-model:table-data="tableData"
         :create-row-method="createTableRow" />
-    </EditableTableRow>
-  </EditableTable>
+    </EditTableRow>
+  </EditTable>
 </template>
 <script lang="ts" setup>
   import { useTemplateRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
 
   import { ProxyReplaceTypes } from '../types';
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceColumnGroup.vue
index 54c1c2f4cb..b7b92b2583 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceColumnGroup.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceColumnGroup.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="originProxy.instance_address"
     fixed="left"
@@ -28,19 +28,19 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.instance_address"
       :placeholder="t('请输入IP:Port')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditTableColumn>
+  <EditTableColumn
     :label="t('关联集群')"
     :loading="loading"
     :min-width="300">
-    <Block
+    <EditTableBlock
       v-model="modelValue.master_domain"
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditTableColumn>
   <InstanceSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.TENDBHA]"
@@ -57,7 +57,6 @@
   import { ClusterTypes } from '@common/const';
   import { ipPort } from '@common/regex';
 
-  import { Block, Column, Input } from '@components/editable-table/Index.vue';
   import InstanceSelector, {
     type InstanceSelectorValues,
     type IValue,
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceTable.vue
index d70a3482dc..d6125f8cf1 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceTable.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_PROXY_SWITCH/components/InstanceTable.vue
@@ -12,11 +12,11 @@
 -->
 
 <template>
-  <EditableTable
+  <EditTable
     ref="table"
     class="mb-20"
     :model="tableData">
-    <EditableTableRow
+    <EditTableRow
       v-for="(item, index) in tableData"
       :key="index">
       <InstanceColumnGroup
@@ -30,16 +30,13 @@
       <OperationColumn
         v-model:table-data="tableData"
         :create-row-method="createTableRow" />
-    </EditableTableRow>
-  </EditableTable>
+    </EditTableRow>
+  </EditTable>
 </template>
 <script lang="ts" setup>
   import { useTemplateRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
-  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
 
   import { ProxyReplaceTypes } from '../types';
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/Index.vue
index 22fc70fe20..306851fdac 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/Index.vue
@@ -17,31 +17,31 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <SlaveInstanceColumn
             v-model="item.slave"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditTableColumn
             :label="t('所属集群')"
             :min-width="150">
-            <Block
+            <EditTableBlock
               v-model="item.slave.master_domain"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditTableColumn>
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
+        </EditTableRow>
+      </EditTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -74,11 +74,10 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
 
   import SlaveInstanceColumn, { type SelectorHost } from './SlaveInstanceColumn.vue';
 
@@ -115,7 +114,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     backupSource: BackupSourceType.REMOTE,
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -165,7 +164,7 @@
             },
           })),
         },
-        remark: formData.remark,
+        remark: formData.ticketPayload.remark,
       });
     }
   };
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
index d0553f733b..8856b12cde 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="slave.instance_address"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.instance_address"
       :placeholder="t('请输入IP:Port')"
       @change="handleInputChange" />
-  </Column>
+  </EditTableColumn>
   <InstanceSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.TENDBHA]"
@@ -49,7 +49,6 @@
   import { ClusterTypes } from '@common/const';
   import { ipPort } from '@common/regex';
 
-  import { Column, Input } from '@components/editable-table/Index.vue';
   import InstanceSelector, {
     type InstanceSelectorValues,
     type IValue,
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/Index.vue
index 5fe59c17ca..0d307e8d66 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/Index.vue
@@ -17,11 +17,11 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <SlaveHostColumnGroup
@@ -35,10 +35,10 @@
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
+        </EditTableRow>
+      </EditTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -71,12 +71,11 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
   import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
 
   import SlaveHostColumnGroup, { type SelectorHost } from './SlaveHostColumnGroup.vue';
 
@@ -121,7 +120,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     backupSource: BackupSourceType.REMOTE,
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -182,7 +181,7 @@
             },
           })),
         },
-        remark: formData.remark,
+        remark: formData.ticketPayload.remark,
       });
     }
   };
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
index 6fb8c25b15..e7103b24bf 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="slave.ip"
     fixed="left"
@@ -28,12 +28,12 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditTableColumn>
+  <EditTableColumn
     :label="t('同机关联集群')"
     :loading="loading"
     :min-width="300">
@@ -46,10 +46,10 @@
         {{ item.master_domain }}
       </p>
     </div>
-    <Block
+    <EditTableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditTableColumn>
   <InstanceSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.TENDBHA]"
@@ -66,7 +66,6 @@
   import { ClusterTypes } from '@common/const';
   import { ipv4 } from '@common/regex';
 
-  import { Block, Column, Input } from '@components/editable-table/Index.vue';
   import InstanceSelector, {
     type InstanceSelectorValues,
     type IValue,
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue
index 6a6a2271af..8f9e0444b4 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="cluster.master_domain"
     fixed="left"
@@ -30,7 +30,7 @@
       </span>
     </template>
     <div style="flex: 1">
-      <Input
+      <EditTableInput
         v-model="modelValue.master_domain"
         :placeholder="t('请输入集群域名')"
         @change="handleInputChange" />
@@ -46,7 +46,7 @@
         </p>
       </BkLoading>
     </div>
-  </Column>
+  </EditTableColumn>
   <ClusterSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.TENDBHA]"
@@ -65,7 +65,6 @@
   import { domainRegex } from '@common/regex';
 
   import ClusterSelector from '@components/cluster-selector/Index.vue';
-  import { Column, Input } from '@components/editable-table/Index.vue';
 
   interface Props {
     selected: {
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Create.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Create.vue
index 122e14bab5..31e6b4c499 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/Create.vue
@@ -21,11 +21,11 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <HostColumn
@@ -33,28 +33,28 @@
             :selected="selected"
             @append-row="handleAppendRow(item.host, index)"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditTableColumn
             :label="t('角色类型')"
             :min-width="150">
-            <Block
+            <EditTableBlock
               v-model="item.host.role"
               :placeholder="t('自动生成')" />
-          </Column>
-          <Column
+          </EditTableColumn>
+          <EditTableColumn
             :label="t('所属集群')"
             :min-width="150"
             :rowspan="rowSpan[item.host.cluster_domain]">
-            <Block
+            <EditTableBlock
               v-model="item.host.cluster_domain"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditTableColumn>
           <SpecColumn v-model="item.host.spec_config" />
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
-      <TicketRemark v-model="formData.remark" />
+        </EditTableRow>
+      </EditTable>
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -88,10 +88,9 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
   import type { SpecInfo } from '@views/db-manage/redis/common/spec-panel/Index.vue';
 
   import HostColumn, { type SelectorHost } from './components/HostColumn.vue';
@@ -128,7 +127,7 @@
 
   const defaultData = () => ({
     tableData: [createTableRow()],
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -247,7 +246,7 @@
         ip_source: 'resource_pool',
         infos,
       },
-      remark: formData.remark,
+      remark: formData.ticketPayload.remark,
     });
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/HostColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/HostColumn.vue
index b5289522a0..a9cd2859e9 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/HostColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/HostColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="host.ip"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
+  </EditTableColumn>
   <InstanceSelector
     v-model:is-show="showSelector"
     active-tab="idleHosts"
@@ -50,8 +50,6 @@
 
   import { ipv4 } from '@common/regex';
 
-  import { Column, Input } from '@components/editable-table/Index.vue';
-
   import type { SpecInfo } from '@views/db-manage/redis/common/spec-panel/Index.vue';
 
   import InstanceSelector, { type InstanceSelectorValues } from './instance-selector/Index.vue';
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/SpecColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/SpecColumn.vue
index 2507e2a63f..b628bdfc68 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/SpecColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_CLUSTER_CUTOFF/components/SpecColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :label="t('规格需求')"
     :min-width="150">
     <template #head>
@@ -20,7 +20,7 @@
         <span class="spec-title">{{ t('规格需求') }}</span>
       </div>
     </template>
-    <Block
+    <EditTableBlock
       v-model="modelValue.name"
       :placeholder="t('自动生成')">
       <template #append>
@@ -33,14 +33,13 @@
             type="visible1" />
         </SpecPanel>
       </template>
-    </Block>
-  </Column>
+    </EditTableBlock>
+  </EditTableColumn>
 </template>
 
 <script lang="ts" setup>
   import { useI18n } from 'vue-i18n';
 
-  import { Block, Column } from '@components/editable-table/Index.vue';
   import SpecPanel from '@components/render-table/columns/spec-display/Panel.vue';
 
   import type { SpecInfo } from '@views/db-manage/redis/common/spec-panel/Index.vue';
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/Create.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/Create.vue
index 15dfe5b1c6..55100a68a6 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/Create.vue
@@ -21,34 +21,34 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <ClusterColumn
             v-model="item.cluster"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditTableColumn
             field="cluster.cluster_type_name"
             :label="t('架构版本')"
             :min-width="150">
-            <Block
+            <EditTableBlock
               v-model="item.cluster.cluster_type_name"
               :placeholder="t('自动生成')" />
-          </Column>
-          <Column
+          </EditTableColumn>
+          <EditTableColumn
             field="cluster.role"
             :label="t('缩容节点类型')"
             :min-width="150"
             required>
-            <Block
+            <EditTableBlock
               v-model="item.cluster.role"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditTableColumn>
           <HybridHostColumn
             v-model="item.host.type"
             field="host.type"
@@ -57,7 +57,7 @@
             :need-num="1"
             :spec-ids="item.cluster.proxy_spec_ids"
             @change="(list) => handleSelectHost(list, item)" />
-          <Column
+          <EditTableColumn
             field="count"
             :label="t('缩容数量（台）')"
             :min-width="150">
@@ -67,29 +67,29 @@
                 disabled: item.host.type !== HostSelectType.MANUAL,
               }"
               style="flex: 1">
-              <Input
+              <EditTableInput
                 v-model="item.count"
                 :disabled="item.host.type === HostSelectType.MANUAL"
                 :min="0"
                 type="number" />
             </div>
-          </Column>
-          <Column
+          </EditTableColumn>
+          <EditTableColumn
             field="switchMode"
             :label="t('切换模式')"
             :min-width="150">
-            <Select
+            <EditTableSelect
               v-model="item.switchMode"
               :disabled="item.host.type === HostSelectType.MANUAL"
               :input-search="false"
               :list="switchModeOptions" />
-          </Column>
+          </EditTableColumn>
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
-      <TicketRemark v-model="formData.remark" />
+        </EditTableRow>
+      </EditTable>
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -122,20 +122,13 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, {
-    Block,
-    Column,
-    Input,
-    Row as EditableTableRow,
-    Select,
-  } from '@components/editable-table/Index.vue';
-
   import HybridHostColumn, {
     type HostInfo,
     HostSelectType,
   } from '@views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue';
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
 
   import ClusterColumn from './components/ClusterColumn.vue';
 
@@ -181,7 +174,7 @@
 
   const defaultData = () => ({
     tableData: [createTableRow()],
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -243,7 +236,7 @@
           return info;
         }),
       },
-      remark: formData.remark,
+      remark: formData.ticketPayload.remark,
     });
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/components/ClusterColumn.vue
index aa748aa45a..d9c4e55d3a 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/components/ClusterColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_PROXY_SCALE_DOWN/components/ClusterColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="cluster.master_domain"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.master_domain"
       :placeholder="t('请输入集群域名')"
       @change="handleInputChange" />
-  </Column>
+  </EditTableColumn>
   <ClusterSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.REDIS]"
@@ -53,7 +53,6 @@
   import { domainRegex } from '@common/regex';
 
   import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
-  import { Column, Input } from '@components/editable-table/Index.vue';
 
   interface Props {
     selected: {
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Create.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Create.vue
index 6f49a07bd4..e7ba5a3a58 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Create.vue
@@ -21,25 +21,25 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <ClusterColumn
             v-model="item.cluster"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditTableColumn
             field="cluster.cluster_type_name"
             :label="t('架构版本')"
             :min-width="150">
-            <Block
+            <EditTableBlock
               v-model="item.cluster.cluster_type_name"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditTableColumn>
           <RedisVersionColumn
             v-model="item.version"
             :cluster="item.cluster" />
@@ -47,22 +47,22 @@
           <TargetCapacityColumn
             v-model="item.backendGroup"
             :row-data="item" />
-          <Column
+          <EditTableColumn
             field="switchMode"
             :label="t('切换模式')"
             :min-width="150">
-            <Select
+            <EditTableSelect
               v-model="item.switchMode"
               :disabled="!item.cluster.id"
               :input-search="false"
               :list="switchModeOptions" />
-          </Column>
+          </EditTableColumn>
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
-      <TicketRemark v-model="formData.remark" />
+        </EditTableRow>
+      </EditTable>
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -95,10 +95,9 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Block, Column, Row as EditableTableRow, Select } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
   import { AffinityType } from '@views/db-manage/redis/common/types';
 
   import ClusterColumn from './components/ClusterColumn.vue';
@@ -171,7 +170,7 @@
 
   const defaultData = () => ({
     tableData: [createTableRow()],
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -251,7 +250,7 @@
           },
         })),
       },
-      remark: formData.remark,
+      remark: formData.ticketPayload.remark,
     });
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/ClusterColumn.vue
index 5ce3201145..549f47798c 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/ClusterColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/ClusterColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="cluster.master_domain"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.master_domain"
       :placeholder="t('请输入集群域名')"
       @change="handleInputChange" />
-  </Column>
+  </EditTableColumn>
   <ClusterSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.REDIS]"
@@ -53,7 +53,6 @@
   import { domainRegex } from '@common/regex';
 
   import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
-  import { Column, Input } from '@components/editable-table/Index.vue';
 
   interface Props {
     selected: {
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/CurrentCapacityColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/CurrentCapacityColumn.vue
index bc7f763e8b..1ee692d7aa 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/CurrentCapacityColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/CurrentCapacityColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     field="currentCapacity"
     :label="t('当前容量')"
     :min-width="150">
@@ -54,18 +54,17 @@
           </div>
         </div>
       </div>
-      <Block
+      <EditTableBlock
         v-else
         :placeholder="t('自动生成')" />
     </div>
-  </Column>
+  </EditTableColumn>
 </template>
 <script lang="ts" setup>
   import { useI18n } from 'vue-i18n';
 
   import RedisModel from '@services/model/redis/redis';
 
-  import { Block, Column } from '@components/editable-table/Index.vue';
   import RenderSpec from '@components/render-table/columns/spec-display/Index.vue';
 
   import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue';
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/RedisVersionColumn.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/RedisVersionColumn.vue
index e854216129..654ba97de1 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/RedisVersionColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/RedisVersionColumn.vue
@@ -12,12 +12,12 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     field="version"
     :label="t('Redis版本')"
     :min-width="150"
     required>
-    <Select
+    <EditTableSelect
       v-model="modelValue"
       :disabled="!cluster.id"
       :input-search="false"
@@ -42,8 +42,8 @@
           </BkTag>
         </div>
       </template>
-    </Select>
-  </Column>
+    </EditTableSelect>
+  </EditTableColumn>
 </template>
 <script lang="ts" setup>
   import { useI18n } from 'vue-i18n';
@@ -51,8 +51,6 @@
 
   import { getClusterVersions } from '@services/source/redisToolbox';
 
-  import { Column, Select } from '@components/editable-table/Index.vue';
-
   interface Props {
     cluster: {
       id: number;
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/target-capacity-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/target-capacity-column/Index.vue
index 8781356cac..cf9d075a0f 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/target-capacity-column/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/target-capacity-column/Index.vue
@@ -12,14 +12,14 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     field="backendGroup.spec_id"
     :label="t('目标容量')"
     :min-width="150"
     required
     :rule="rules">
     <div class="capacity-box">
-      <Input
+      <EditTableInput
         v-if="!localValue || !activeRowData || !targetObj"
         :placeholder="t('请选择')"
         @focus="handleShowSideslider">
@@ -28,7 +28,7 @@
             class="down-icon"
             type="down-big" />
         </template>
-      </Input>
+      </EditTableInput>
       <div
         v-else
         class="display-content">
@@ -89,7 +89,7 @@
         </div>
       </div>
     </div>
-  </Column>
+  </EditTableColumn>
   <ClusterTargetPlan
     v-if="rowData.cluster?.cluster_stats"
     :cluster-id="rowData.cluster.id"
@@ -112,7 +112,6 @@
 
   import { ClusterTypes } from '@common/const';
 
-  import { Column, Input } from '@components/editable-table/Index.vue';
   import RenderSpec from '@components/render-table/columns/spec-display/Index.vue';
 
   import ClusterCapacityUsageRate from '@views/db-manage/common/cluster-capacity-usage-rate/Index.vue';
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/Create.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/Create.vue
index 3a2922e739..db89e56579 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/Create.vue
@@ -21,11 +21,11 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <ClusterColumn
@@ -39,10 +39,10 @@
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
+        </EditTableRow>
+      </EditTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -76,12 +76,11 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
   import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
 
   import ClusterColumn from './components/ClusterColumn.vue';
 
@@ -117,7 +116,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     backupSource: BackupSourceType.REMOTE,
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -162,7 +161,7 @@
           },
         })),
       },
-      remark: formData.remark,
+      remark: formData.ticketPayload.remark,
     });
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/components/ClusterColumn.vue
index 65eb7ac6db..b21d4096b9 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/components/ClusterColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_ADD_SLAVE/components/ClusterColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="cluster.master_domain"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.master_domain"
       :placeholder="t('请输入集群域名')"
       @change="handleInputChange" />
-  </Column>
+  </EditTableColumn>
   <ClusterSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.SQLSERVER_HA]"
@@ -52,7 +52,6 @@
   import { domainRegex } from '@common/regex';
 
   import ClusterSelector from '@components/cluster-selector/Index.vue';
-  import { Column, Input } from '@components/editable-table/Index.vue';
 
   interface Props {
     selected: {
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/Index.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/Index.vue
index 1728f95e80..6bd82b6891 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/Index.vue
@@ -17,31 +17,31 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <SlaveInstanceColumn
             v-model="item.slave"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditTableColumn
             :label="t('所属集群')"
             :min-width="150">
-            <Block
+            <EditTableBlock
               v-model="item.slave.master_domain"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditTableColumn>
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
+        </EditTableRow>
+      </EditTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -74,11 +74,10 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
 
   import SlaveInstanceColumn, { type SelectorHost } from './SlaveInstanceColumn.vue';
 
@@ -115,7 +114,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     backupSource: BackupSourceType.REMOTE,
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -165,7 +164,7 @@
             },
           })),
         },
-        remark: formData.remark,
+        remark: formData.ticketPayload.remark,
       });
     }
   };
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
index 0d12b8df1e..487a93eecd 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="slave.instance_address"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.instance_address"
       :placeholder="t('请输入IP:Port')"
       @change="handleInputChange" />
-  </Column>
+  </EditTableColumn>
   <InstanceSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.SQLSERVER_HA]"
@@ -50,7 +50,6 @@
   import { ClusterTypes } from '@common/const';
   import { ipPort } from '@common/regex';
 
-  import { Column, Input } from '@components/editable-table/Index.vue';
   import InstanceSelector, {
     type InstanceSelectorValues,
     type IValue,
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/Index.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/Index.vue
index 7376a9f510..698237a7fb 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/Index.vue
@@ -17,11 +17,11 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <SlaveHostColumnGroup
@@ -35,10 +35,10 @@
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
+        </EditTableRow>
+      </EditTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -71,12 +71,11 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
   import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
 
   import SlaveHostColumnGroup, { type SelectorHost } from './SlaveHostColumnGroup.vue';
 
@@ -121,7 +120,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     backupSource: BackupSourceType.REMOTE,
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -182,7 +181,7 @@
             },
           })),
         },
-        remark: formData.remark,
+        remark: formData.ticketPayload.remark,
       });
     }
   };
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
index 3f8ed8123d..dc6a7a968d 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/SQLSERVER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="slave.ip"
     fixed="left"
@@ -28,12 +28,12 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditTableColumn>
+  <EditTableColumn
     :label="t('同机关联集群')"
     :loading="loading"
     :min-width="300">
@@ -46,10 +46,10 @@
         {{ item.master_domain }}
       </p>
     </div>
-    <Block
+    <EditTableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditTableColumn>
   <InstanceSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.SQLSERVER_HA]"
@@ -67,7 +67,6 @@
   import { ClusterTypes } from '@common/const';
   import { ipv4 } from '@common/regex';
 
-  import { Block, Column, Input } from '@components/editable-table/Index.vue';
   import InstanceSelector, {
     type InstanceSelectorValues,
     type IValue,
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/Create.vue
index fe12993808..77a658acc7 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/Create.vue
@@ -21,11 +21,11 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <MasterHostColumnGroup
@@ -35,13 +35,13 @@
           <SlaveHostColumnGroup
             v-model="item.oldSlave"
             :master-host="item.oldMaster" />
-          <Column
+          <EditTableColumn
             :label="t('所属集群')"
             :min-width="150">
-            <Block
+            <EditTableBlock
               v-model="item.oldMaster.master_domain"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditTableColumn>
           <SingleHostColumn
             v-model="item.newMaster"
             field="newMaster"
@@ -55,10 +55,10 @@
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
+        </EditTableRow>
+      </EditTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -91,12 +91,12 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
   import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
   import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
 
   import MasterHostColumnGroup, { type SelectorHost } from './components/MasterHostColumnGroup.vue';
   import SlaveHostColumnGroup from './components/SlaveHostColumnGroup.vue';
@@ -156,7 +156,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     backupSource: BackupSourceType.REMOTE,
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -219,7 +219,7 @@
           },
         })),
       },
-      remark: formData.remark,
+      remark: formData.ticketPayload.remark,
     });
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/MasterHostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/MasterHostColumnGroup.vue
index 8ebfa02fe4..6e39e0bd7a 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/MasterHostColumnGroup.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/MasterHostColumnGroup.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="oldMaster.ip"
     fixed="left"
@@ -28,12 +28,12 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditTableColumn>
+  <EditTableColumn
     :label="t('主库主机关联实例')"
     :loading="loading"
     :min-width="150">
@@ -46,10 +46,10 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditTableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditTableColumn>
   <InstanceSelector
     v-model:is-show="showSelector"
     :cluster-types="['TendbClusterHost']"
@@ -64,7 +64,6 @@
 
   import { ipv4 } from '@common/regex';
 
-  import { Block, Column, Input } from '@components/editable-table/Index.vue';
   import InstanceSelector, { type InstanceSelectorValues, type IValue } from '@components/instance-selector/Index.vue';
 
   export type SelectorHost = IValue;
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/SlaveHostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/SlaveHostColumnGroup.vue
index 5c5ccdaa8f..252798c1c1 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/SlaveHostColumnGroup.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_MIGRATE_CLUSTER/components/SlaveHostColumnGroup.vue
@@ -12,15 +12,15 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :label="t('目标从库主机')"
     :loading="loading"
     :min-width="150">
-    <Block
+    <EditTableBlock
       v-model="modelValue.ip"
       :placeholder="t('自动生成')" />
-  </Column>
-  <Column
+  </EditTableColumn>
+  <EditTableColumn
     :label="t('从库主机关联实例')"
     :loading="loading"
     :min-width="150">
@@ -33,10 +33,10 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditTableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditTableColumn>
 </template>
 <script lang="ts" setup>
   import { useI18n } from 'vue-i18n';
@@ -44,8 +44,6 @@
 
   import { getRemoteMachineInstancePair } from '@services/source/mysqlCluster';
 
-  import { Block, Column } from '@components/editable-table/Index.vue';
-
   interface Props {
     masterHost: {
       bk_cloud_id: number;
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/Index.vue
index e8d31a7bc1..1322f21412 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/Index.vue
@@ -17,31 +17,31 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <SlaveInstanceColumn
             v-model="item.slave"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditTableColumn
             :label="t('所属集群')"
             :min-width="150">
-            <Block
+            <EditTableBlock
               v-model="item.slave.master_domain"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditTableColumn>
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
+        </EditTableRow>
+      </EditTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -74,11 +74,10 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
 
   import SlaveInstanceColumn, { type SelectorHost } from './SlaveInstanceColumn.vue';
 
@@ -115,7 +114,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     backupSource: BackupSourceType.REMOTE,
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -165,7 +164,7 @@
             },
           })),
         },
-        remark: formData.remark,
+        remark: formData.ticketPayload.remark,
       });
     }
   };
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
index 95c4212663..2eed5c938b 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/local-restore/SlaveInstanceColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="slave.instance_address"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.instance_address"
       :placeholder="t('请输入IP:Port')"
       @change="handleInputChange" />
-  </Column>
+  </EditTableColumn>
   <InstanceSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.TENDBCLUSTER]"
@@ -49,7 +49,6 @@
   import { ClusterTypes } from '@common/const';
   import { ipPort } from '@common/regex';
 
-  import { Column, Input } from '@components/editable-table/Index.vue';
   import InstanceSelector, {
     type InstanceSelectorValues,
     type IValue,
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/Index.vue
index b0f3c17b81..5d430bda9a 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/Index.vue
@@ -17,31 +17,31 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <SlaveHostColumnGroup
             v-model="item.slave"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditTableColumn
             :label="t('同机关联集群')"
             :min-width="150">
-            <Block
+            <EditTableBlock
               v-model="item.slave.master_domain"
               :placeholder="t('自动生成')" />
-          </Column>
-          <Column
+          </EditTableColumn>
+          <EditTableColumn
             :label="t('当前资源规格')"
             :min-width="150">
-            <Block
+            <EditTableBlock
               v-model="item.slave.spec_name"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditTableColumn>
           <NewSlaveHostColumn
             v-model="item.newSlave"
             :slave="item.slave"
@@ -49,10 +49,10 @@
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
+        </EditTableRow>
+      </EditTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -85,11 +85,11 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
   import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
 
   import NewSlaveHostColumn from './NewSlaveHostColumn.vue';
   import SlaveHostColumnGroup, { type SelectorHost } from './SlaveHostColumnGroup.vue';
@@ -132,7 +132,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     backupSource: BackupSourceType.REMOTE,
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -188,7 +188,7 @@
             },
           })),
         },
-        remark: formData.remark,
+        remark: formData.ticketPayload.remark,
       });
     }
   };
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/NewSlaveHostColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/NewSlaveHostColumn.vue
index d92b2b9490..3981c1eb7a 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/NewSlaveHostColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/NewSlaveHostColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     field="newSlave"
     :label="t('新从库主机')"
     :min-width="150"
@@ -32,7 +32,7 @@
         </template>
       </TableEditSelect>
     </div>
-  </Column>
+  </EditTableColumn>
 </template>
 
 <script lang="ts" setup>
@@ -41,8 +41,6 @@
 
   import { getSpecResourceCount } from '@services/source/dbresourceResource';
 
-  import { Column } from '@components/editable-table/Index.vue';
-
   import TableEditSelect from '@views/db-manage/tendb-cluster/common/edit/SelectInput.vue';
 
   interface Props {
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
index 22bd944543..fd33602757 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_RESTORE_SLAVE/components/restore/SlaveHostColumnGroup.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="slave.ip"
     fixed="left"
@@ -28,12 +28,12 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditTableColumn>
+  <EditTableColumn
     :label="t('从库主机关联实例')"
     :loading="loading"
     :min-width="150">
@@ -46,10 +46,10 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditTableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditTableColumn>
   <InstanceSelector
     v-model:is-show="showSelector"
     :cluster-types="['TendbClusterHost']"
@@ -66,7 +66,6 @@
   import type { ClusterTypes } from '@common/const';
   import { ipv4 } from '@common/regex';
 
-  import { Block, Column, Input } from '@components/editable-table/Index.vue';
   import InstanceSelector, {
     type InstanceSelectorValues,
     type IValue,
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/Create.vue
index cb9f10b2c3..d609bba8d9 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/Create.vue
@@ -21,25 +21,25 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <ClusterColumn
             v-model="item.cluster"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditTableColumn
             field="cluster.bk_cloud_name"
             :label="t('所属管控区域')"
             :min-width="300">
-            <Block
+            <EditTableBlock
               v-model="item.cluster.bk_cloud_name"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditTableColumn>
           <SingleHostColumn
             v-model="item.host"
             field="host"
@@ -47,9 +47,9 @@
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
-      <TicketRemark v-model="formData.remark" />
+        </EditTableRow>
+      </EditTable>
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -82,11 +82,10 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Block, Column, Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
 
   import ClusterColumn from './components/ClusterColumn.vue';
 
@@ -125,7 +124,7 @@
 
   const defaultData = () => ({
     tableData: [createTableRow()],
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -168,7 +167,7 @@
           },
         })),
       },
-      remark: formData.remark,
+      remark: formData.ticketPayload.remark,
     });
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/components/ClusterColumn.vue
index ca0af5a32b..ea59240218 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/components/ClusterColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_MNT_APPLY/components/ClusterColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="cluster.master_domain"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.master_domain"
       :placeholder="t('请输入集群域名')"
       @change="handleInputChange" />
-  </Column>
+  </EditTableColumn>
   <ClusterSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.TENDBCLUSTER]"
@@ -50,7 +50,6 @@
   import { domainRegex } from '@common/regex';
 
   import ClusterSelector from '@components/cluster-selector/Index.vue';
-  import { Column, Input } from '@components/editable-table/Index.vue';
 
   interface Props {
     selected: {
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/Create.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/Create.vue
index 0df8044f3b..a1d3b7ecdd 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/Create.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/Create.vue
@@ -21,27 +21,27 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <ClusterColumn
             v-model="item.cluster"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditTableColumn
             field="cluster.role"
             :label="t('缩容节点类型')"
             :min-width="200"
             required>
-            <Select
+            <EditTableSelect
               v-model="item.cluster.role"
               :input-search="false"
               :list="nodeTypeOptions" />
-          </Column>
+          </EditTableColumn>
           <HybridHostColumn
             v-model="item.host.type"
             field="host.type"
@@ -50,7 +50,7 @@
             :need-num="1"
             :spec-ids="getSpecIds(item)"
             @change="(list) => handleSelectHost(list, item)" />
-          <Column
+          <EditTableColumn
             field="count"
             :label="t('缩容数量（台）')"
             :min-width="200">
@@ -60,22 +60,22 @@
                 disabled: item.host.type !== HostSelectType.MANUAL,
               }"
               style="flex: 1">
-              <Input
+              <EditTableInput
                 v-model="item.count"
                 :disabled="item.host.type === HostSelectType.MANUAL"
                 :min="0"
                 type="number" />
             </div>
-          </Column>
+          </EditTableColumn>
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
+        </EditTableRow>
+      </EditTable>
       <IgnoreBiz
         v-model="formData.isSafe"
         v-bk-tooltips="t('如忽略_有连接的情况下也会执行')" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -108,15 +108,15 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Column, Input, Row as EditableTableRow, Select } from '@components/editable-table/Index.vue';
-
   import HybridHostColumn, {
     type HostInfo,
     HostSelectType,
   } from '@views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue';
   import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import IgnoreBiz from '@views/db-manage/common/toolbox-field/form-item/ignore-biz/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
 
   import ClusterColumn from './components/ClusterColumn.vue';
 
@@ -161,7 +161,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     isSafe: false,
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -223,7 +223,7 @@
           return info;
         }),
       },
-      remark: formData.remark,
+      remark: formData.ticketPayload.remark,
     });
   };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/components/ClusterColumn.vue
index 1309dd55e9..4c9ef88e0c 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/components/ClusterColumn.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/TENDBCLUSTER_SPIDER_REDUCE_NODES/components/ClusterColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="cluster.master_domain"
     fixed="left"
@@ -29,11 +29,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditTableInput
       v-model="modelValue.master_domain"
       :placeholder="t('请输入集群域名')"
       @change="handleInputChange" />
-  </Column>
+  </EditTableColumn>
   <ClusterSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.TENDBCLUSTER]"
@@ -53,7 +53,6 @@
   import { domainRegex } from '@common/regex';
 
   import ClusterSelector, { type TabConfig } from '@components/cluster-selector/Index.vue';
-  import { Column, Input } from '@components/editable-table/Index.vue';
 
   interface Props {
     selected: {