diff --git a/dbm-ui/frontend/src/common/importComps.ts b/dbm-ui/frontend/src/common/importComps.ts
index 61d2d3fb86..4f3da5761a 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 EditableTable, {
+  Block as EditableBlock,
+  Column as EditableColumn,
+  DatePicker as EditableDatePicker,
+  Input as EditableInput,
+  Row as EditableRow,
+  Select as EditableSelect,
+  TagInput as EditableTagInput,
+  Textarea as EditableTextarea,
+  TimePicker as EditableTimePicker,
+} 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('EditableTable', EditableTable);
+  app.component('EditableBlock', EditableBlock);
+  app.component('EditableColumn', EditableColumn);
+  app.component('EditableDatePicker', EditableDatePicker);
+  app.component('EditableInput', EditableInput);
+  app.component('EditableRow', EditableRow);
+  app.component('EditableSelect', EditableSelect);
+  app.component('EditableTagInput', EditableTagInput);
+  app.component('EditableTextarea', EditableTextarea);
+  app.component('EditableTimePicker', EditableTimePicker);
+  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..9d68db706e 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');
+    EditableTable: typeof import('@components/editable-table/Index.vue').default;
+    EditableBlock: typeof import('@components/editable-table/Index.vue').Block;
+    EditableColumn: typeof import('@components/editable-table/Index.vue').Column;
+    EditableDatePicker: typeof import('@components/editable-table/Index.vue').DatePicker;
+    EditableInput: typeof import('@components/editable-table/Index.vue').Input;
+    EditableRow: typeof import('@components/editable-table/Index.vue').Row;
+    EditableSelect: typeof import('@components/editable-table/Index.vue').Select;
+    EditableTagInput: typeof import('@components/editable-table/Index.vue').TagInput;
+    EditableTextarea: typeof import('@components/editable-table/Index.vue').Textarea;
+    EditableTimePicker: 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..149409eb25 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
+  <EditableColumn
     :field="field"
     :label="label"
     :min-width="minWidth"
     required
     :rule="rules">
-    <Select
+    <EditableSelect
       v-model="modelValue"
       :list="selectList"
       @change="handleSelectChange">
@@ -29,7 +29,7 @@
         </div>
       </template>
       <template #trigger>
-        <Input
+        <EditableInput
           v-if="modelValue === HostSelectType.MANUAL"
           v-model="localValue"
           :placeholder="t('请选择主机')">
@@ -43,7 +43,7 @@
               type="host-select"
               @click.stop="handleShowSelector" />
           </template>
-        </Input>
+        </EditableInput>
         <div
           v-else-if="modelValue === HostSelectType.AUTO"
           class="table-cell">
@@ -55,8 +55,8 @@
           {{ t(placeholder) }}
         </div>
       </template>
-    </Select>
-  </Column>
+    </EditableSelect>
+  </EditableColumn>
   <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..a0c5533f5d 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
+  <EditableColumn
     :append-rules="editable ? rules : []"
     :field="field"
     :label="label"
     :loading="loading"
     :min-width="300"
     required>
-    <Input
+    <EditableInput
       v-if="editable"
       v-model="localValue"
       :placeholder="t('请选择主机')"
@@ -34,8 +34,8 @@
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </Input>
-    <Block
+    </EditableInput>
+    <EditableBlock
       v-else
       v-model="localValue"
       :placeholder="t('请选择主机')">
@@ -49,8 +49,8 @@
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </Block>
-  </Column>
+    </EditableBlock>
+  </EditableColumn>
   <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..55f06dc0f5 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
+  <EditableColumn
     :append-rules="editable ? rules : []"
     :field="field"
     :label="label"
     :loading="loading"
     :min-width="minWidth"
     required>
-    <Input
+    <EditableInput
       v-if="editable"
       v-model="modelValue.ip"
       :placeholder="t('请选择主机')"
@@ -31,8 +31,8 @@
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </Input>
-    <Block
+    </EditableInput>
+    <EditableBlock
       v-else
       v-model="modelValue.ip"
       :placeholder="t('请选择主机')">
@@ -43,8 +43,8 @@
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </Block>
-  </Column>
+    </EditableBlock>
+  </EditableColumn>
   <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..aed310b81e 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
@@ -26,7 +26,7 @@
         class="mb-20"
         :model="formData.tableData"
         :rules="rules">
-        <EditableTableRow
+        <EditableRow
           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>
+        </EditableRow>
       </EditableTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </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: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..f673626cbd 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
+  <EditableColumn
     :append-rules="rules"
     field="cluster.cluster_domains"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Textarea
+    <EditableTextarea
       v-model="modelValue.cluster_domains"
       :placeholder="t('请输入集群域名_多个集群用分隔符输入')"
       @change="handleInputChange" />
-  </Column>
+  </EditableColumn>
   <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..0454666414 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
@@ -16,7 +16,7 @@
     ref="table"
     class="mb-20"
     :model="tableData">
-    <EditableTableRow
+    <EditableRow
       v-for="(item, index) in tableData"
       :key="index">
       <ClusterColumn
@@ -34,7 +34,7 @@
       <OperationColumn
         v-model:table-data="tableData"
         :create-row-method="createTableRow" />
-    </EditableTableRow>
+    </EditableRow>
   </EditableTable>
 </template>
 <script lang="ts" setup>
@@ -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..18feb4cdf7 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
+  <EditableColumn
     :append-rules="rules"
     field="master.ip"
     fixed="left"
@@ -28,12 +28,12 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditableColumn>
+  <EditableColumn
     :label="t('同机关联实例')"
     :loading="loading"
     :min-width="150">
@@ -47,11 +47,11 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
-  <Column
+  </EditableColumn>
+  <EditableColumn
     :label="t('同机关联集群')"
     :loading="loading"
     :min-width="150">
@@ -65,10 +65,10 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditableColumn>
   <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..81970c567a 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
@@ -16,7 +16,7 @@
     ref="table"
     class="mb-20"
     :model="tableData">
-    <EditableTableRow
+    <EditableRow
       v-for="(item, index) in tableData"
       :key="index">
       <HostColumnGroup
@@ -36,16 +36,13 @@
       <OperationColumn
         v-model:table-data="tableData"
         :create-row-method="createTableRow" />
-    </EditableTableRow>
+    </EditableRow>
   </EditableTable>
 </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..382e4ddad8 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
@@ -26,7 +26,7 @@
         class="mb-20"
         :model="formData.tableData"
         :rules="rules">
-        <EditableTableRow
+        <EditableRow
           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>
+        </EditableRow>
       </EditableTable>
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </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: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..29780ca8c5 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
+  <EditableColumn
     :append-rules="rules"
     field="originProxy.ip"
     fixed="left"
@@ -28,12 +28,12 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditableColumn>
+  <EditableColumn
     :label="t('同机关联实例')"
     :loading="loading"
     :min-width="300">
@@ -47,11 +47,11 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
-  <Column
+  </EditableColumn>
+  <EditableColumn
     :label="t('同机关联集群')"
     :loading="loading"
     :min-width="300">
@@ -65,10 +65,10 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditableColumn>
   <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..fe05d0b10f 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
@@ -16,7 +16,7 @@
     ref="table"
     class="mb-20"
     :model="tableData">
-    <EditableTableRow
+    <EditableRow
       v-for="(item, index) in tableData"
       :key="index">
       <HostColumnGroup
@@ -30,16 +30,13 @@
       <OperationColumn
         v-model:table-data="tableData"
         :create-row-method="createTableRow" />
-    </EditableTableRow>
+    </EditableRow>
   </EditableTable>
 </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..277fe9cdc3 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
+  <EditableColumn
     :append-rules="rules"
     field="originProxy.instance_address"
     fixed="left"
@@ -28,19 +28,19 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.instance_address"
       :placeholder="t('请输入IP:Port')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditableColumn>
+  <EditableColumn
     :label="t('关联集群')"
     :loading="loading"
     :min-width="300">
-    <Block
+    <EditableBlock
       v-model="modelValue.master_domain"
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditableColumn>
   <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..dad41cd81f 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
@@ -16,7 +16,7 @@
     ref="table"
     class="mb-20"
     :model="tableData">
-    <EditableTableRow
+    <EditableRow
       v-for="(item, index) in tableData"
       :key="index">
       <InstanceColumnGroup
@@ -30,16 +30,13 @@
       <OperationColumn
         v-model:table-data="tableData"
         :create-row-method="createTableRow" />
-    </EditableTableRow>
+    </EditableRow>
   </EditableTable>
 </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..5aeb67a47e 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
@@ -21,27 +21,27 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <SlaveInstanceColumn
             v-model="item.slave"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditableColumn
             :label="t('所属集群')"
             :min-width="150">
-            <Block
+            <EditableBlock
               v-model="item.slave.master_domain"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditableColumn>
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
+        </EditableRow>
       </EditableTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </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: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..73abdc933f 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
+  <EditableColumn
     :append-rules="rules"
     field="slave.instance_address"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.instance_address"
       :placeholder="t('请输入IP:Port')"
       @change="handleInputChange" />
-  </Column>
+  </EditableColumn>
   <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..f0ded191cf 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
@@ -21,7 +21,7 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           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>
+        </EditableRow>
       </EditableTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </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: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..cfac151e14 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
+  <EditableColumn
     :append-rules="rules"
     field="slave.ip"
     fixed="left"
@@ -28,12 +28,12 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditableColumn>
+  <EditableColumn
     :label="t('同机关联集群')"
     :loading="loading"
     :min-width="300">
@@ -46,10 +46,10 @@
         {{ item.master_domain }}
       </p>
     </div>
-    <Block
+    <EditableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditableColumn>
   <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..e466c4b444 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
+  <EditableColumn
     :append-rules="rules"
     field="cluster.master_domain"
     fixed="left"
@@ -30,7 +30,7 @@
       </span>
     </template>
     <div style="flex: 1">
-      <Input
+      <EditableInput
         v-model="modelValue.master_domain"
         :placeholder="t('请输入集群域名')"
         @change="handleInputChange" />
@@ -46,7 +46,7 @@
         </p>
       </BkLoading>
     </div>
-  </Column>
+  </EditableColumn>
   <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..9cf0469ac8 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
@@ -25,7 +25,7 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           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
+          <EditableColumn
             :label="t('角色类型')"
             :min-width="150">
-            <Block
+            <EditableBlock
               v-model="item.host.role"
               :placeholder="t('自动生成')" />
-          </Column>
-          <Column
+          </EditableColumn>
+          <EditableColumn
             :label="t('所属集群')"
             :min-width="150"
             :rowspan="rowSpan[item.host.cluster_domain]">
-            <Block
+            <EditableBlock
               v-model="item.host.cluster_domain"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditableColumn>
           <SpecColumn v-model="item.host.spec_config" />
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
+        </EditableRow>
       </EditableTable>
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </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: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..27c3048109 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
+  <EditableColumn
     :append-rules="rules"
     field="host.ip"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
+  </EditableColumn>
   <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..82ffd962d0 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
+  <EditableColumn
     :label="t('规格需求')"
     :min-width="150">
     <template #head>
@@ -20,7 +20,7 @@
         <span class="spec-title">{{ t('规格需求') }}</span>
       </div>
     </template>
-    <Block
+    <EditableBlock
       v-model="modelValue.name"
       :placeholder="t('自动生成')">
       <template #append>
@@ -33,14 +33,13 @@
             type="visible1" />
         </SpecPanel>
       </template>
-    </Block>
-  </Column>
+    </EditableBlock>
+  </EditableColumn>
 </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..b12434f3bd 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
@@ -25,30 +25,30 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <ClusterColumn
             v-model="item.cluster"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditableColumn
             field="cluster.cluster_type_name"
             :label="t('架构版本')"
             :min-width="150">
-            <Block
+            <EditableBlock
               v-model="item.cluster.cluster_type_name"
               :placeholder="t('自动生成')" />
-          </Column>
-          <Column
+          </EditableColumn>
+          <EditableColumn
             field="cluster.role"
             :label="t('缩容节点类型')"
             :min-width="150"
             required>
-            <Block
+            <EditableBlock
               v-model="item.cluster.role"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditableColumn>
           <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
+          <EditableColumn
             field="count"
             :label="t('缩容数量（台）')"
             :min-width="150">
@@ -67,29 +67,29 @@
                 disabled: item.host.type !== HostSelectType.MANUAL,
               }"
               style="flex: 1">
-              <Input
+              <EditableInput
                 v-model="item.count"
                 :disabled="item.host.type === HostSelectType.MANUAL"
                 :min="0"
                 type="number" />
             </div>
-          </Column>
-          <Column
+          </EditableColumn>
+          <EditableColumn
             field="switchMode"
             :label="t('切换模式')"
             :min-width="150">
-            <Select
+            <EditableSelect
               v-model="item.switchMode"
               :disabled="item.host.type === HostSelectType.MANUAL"
               :input-search="false"
               :list="switchModeOptions" />
-          </Column>
+          </EditableColumn>
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
+        </EditableRow>
       </EditableTable>
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </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: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..f90c8e0690 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
+  <EditableColumn
     :append-rules="rules"
     field="cluster.master_domain"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.master_domain"
       :placeholder="t('请输入集群域名')"
       @change="handleInputChange" />
-  </Column>
+  </EditableColumn>
   <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..46e5dab2d6 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
@@ -25,21 +25,21 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <ClusterColumn
             v-model="item.cluster"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditableColumn
             field="cluster.cluster_type_name"
             :label="t('架构版本')"
             :min-width="150">
-            <Block
+            <EditableBlock
               v-model="item.cluster.cluster_type_name"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditableColumn>
           <RedisVersionColumn
             v-model="item.version"
             :cluster="item.cluster" />
@@ -47,22 +47,22 @@
           <TargetCapacityColumn
             v-model="item.backendGroup"
             :row-data="item" />
-          <Column
+          <EditableColumn
             field="switchMode"
             :label="t('切换模式')"
             :min-width="150">
-            <Select
+            <EditableSelect
               v-model="item.switchMode"
               :disabled="!item.cluster.id"
               :input-search="false"
               :list="switchModeOptions" />
-          </Column>
+          </EditableColumn>
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
+        </EditableRow>
       </EditableTable>
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </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: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..59194e2ba7 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
+  <EditableColumn
     :append-rules="rules"
     field="cluster.master_domain"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.master_domain"
       :placeholder="t('请输入集群域名')"
       @change="handleInputChange" />
-  </Column>
+  </EditableColumn>
   <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..eb6c06483b 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
+  <EditableColumn
     field="currentCapacity"
     :label="t('当前容量')"
     :min-width="150">
@@ -54,18 +54,17 @@
           </div>
         </div>
       </div>
-      <Block
+      <EditableBlock
         v-else
         :placeholder="t('自动生成')" />
     </div>
-  </Column>
+  </EditableColumn>
 </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..2a7c4745e7 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
+  <EditableColumn
     field="version"
     :label="t('Redis版本')"
     :min-width="150"
     required>
-    <Select
+    <EditableSelect
       v-model="modelValue"
       :disabled="!cluster.id"
       :input-search="false"
@@ -42,8 +42,8 @@
           </BkTag>
         </div>
       </template>
-    </Select>
-  </Column>
+    </EditableSelect>
+  </EditableColumn>
 </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..e87f6b6637 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
+  <EditableColumn
     field="backendGroup.spec_id"
     :label="t('目标容量')"
     :min-width="150"
     required
     :rule="rules">
     <div class="capacity-box">
-      <Input
+      <EditableInput
         v-if="!localValue || !activeRowData || !targetObj"
         :placeholder="t('请选择')"
         @focus="handleShowSideslider">
@@ -28,7 +28,7 @@
             class="down-icon"
             type="down-big" />
         </template>
-      </Input>
+      </EditableInput>
       <div
         v-else
         class="display-content">
@@ -89,7 +89,7 @@
         </div>
       </div>
     </div>
-  </Column>
+  </EditableColumn>
   <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..ce1c9fb94c 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
@@ -25,7 +25,7 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           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>
+        </EditableRow>
       </EditableTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </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: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..42f06aaacf 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
+  <EditableColumn
     :append-rules="rules"
     field="cluster.master_domain"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.master_domain"
       :placeholder="t('请输入集群域名')"
       @change="handleInputChange" />
-  </Column>
+  </EditableColumn>
   <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..be4535e3e3 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
@@ -21,27 +21,27 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <SlaveInstanceColumn
             v-model="item.slave"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditableColumn
             :label="t('所属集群')"
             :min-width="150">
-            <Block
+            <EditableBlock
               v-model="item.slave.master_domain"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditableColumn>
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
+        </EditableRow>
       </EditableTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </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: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..97fd0eb270 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
+  <EditableColumn
     :append-rules="rules"
     field="slave.instance_address"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.instance_address"
       :placeholder="t('请输入IP:Port')"
       @change="handleInputChange" />
-  </Column>
+  </EditableColumn>
   <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..b343061a1a 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
@@ -21,7 +21,7 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           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>
+        </EditableRow>
       </EditableTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </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: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..c8e4c618f0 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
+  <EditableColumn
     :append-rules="rules"
     field="slave.ip"
     fixed="left"
@@ -28,12 +28,12 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditableColumn>
+  <EditableColumn
     :label="t('同机关联集群')"
     :loading="loading"
     :min-width="300">
@@ -46,10 +46,10 @@
         {{ item.master_domain }}
       </p>
     </div>
-    <Block
+    <EditableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditableColumn>
   <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..6cfa680ea4 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
@@ -25,7 +25,7 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <MasterHostColumnGroup
@@ -35,13 +35,13 @@
           <SlaveHostColumnGroup
             v-model="item.oldSlave"
             :master-host="item.oldMaster" />
-          <Column
+          <EditableColumn
             :label="t('所属集群')"
             :min-width="150">
-            <Block
+            <EditableBlock
               v-model="item.oldMaster.master_domain"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditableColumn>
           <SingleHostColumn
             v-model="item.newMaster"
             field="newMaster"
@@ -55,10 +55,10 @@
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
+        </EditableRow>
       </EditableTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </BkForm>
     <template #action>
       <BkButton
@@ -91,12 +91,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 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 +155,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     backupSource: BackupSourceType.REMOTE,
-    remark: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..594593882e 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
+  <EditableColumn
     :append-rules="rules"
     field="oldMaster.ip"
     fixed="left"
@@ -28,12 +28,12 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditableColumn>
+  <EditableColumn
     :label="t('主库主机关联实例')"
     :loading="loading"
     :min-width="150">
@@ -46,10 +46,10 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditableColumn>
   <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..ac541bca00 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
+  <EditableColumn
     :label="t('目标从库主机')"
     :loading="loading"
     :min-width="150">
-    <Block
+    <EditableBlock
       v-model="modelValue.ip"
       :placeholder="t('自动生成')" />
-  </Column>
-  <Column
+  </EditableColumn>
+  <EditableColumn
     :label="t('从库主机关联实例')"
     :loading="loading"
     :min-width="150">
@@ -33,10 +33,10 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditableColumn>
 </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..7cc1008141 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
@@ -21,27 +21,27 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <SlaveInstanceColumn
             v-model="item.slave"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditableColumn
             :label="t('所属集群')"
             :min-width="150">
-            <Block
+            <EditableBlock
               v-model="item.slave.master_domain"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditableColumn>
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
+        </EditableRow>
       </EditableTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </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: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..14d7ba5e39 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
+  <EditableColumn
     :append-rules="rules"
     field="slave.instance_address"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.instance_address"
       :placeholder="t('请输入IP:Port')"
       @change="handleInputChange" />
-  </Column>
+  </EditableColumn>
   <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..fd51223a9c 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
@@ -21,27 +21,27 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <SlaveHostColumnGroup
             v-model="item.slave"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditableColumn
             :label="t('同机关联集群')"
             :min-width="150">
-            <Block
+            <EditableBlock
               v-model="item.slave.master_domain"
               :placeholder="t('自动生成')" />
-          </Column>
-          <Column
+          </EditableColumn>
+          <EditableColumn
             :label="t('当前资源规格')"
             :min-width="150">
-            <Block
+            <EditableBlock
               v-model="item.slave.spec_name"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditableColumn>
           <NewSlaveHostColumn
             v-model="item.newSlave"
             :slave="item.slave"
@@ -49,10 +49,10 @@
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
+        </EditableRow>
       </EditableTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </BkForm>
     <template #action>
       <BkButton
@@ -85,11 +85,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 NewSlaveHostColumn from './NewSlaveHostColumn.vue';
   import SlaveHostColumnGroup, { type SelectorHost } from './SlaveHostColumnGroup.vue';
@@ -132,7 +131,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     backupSource: BackupSourceType.REMOTE,
-    remark: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..e5b42d4d03 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
+  <EditableColumn
     field="newSlave"
     :label="t('新从库主机')"
     :min-width="150"
@@ -32,7 +32,7 @@
         </template>
       </TableEditSelect>
     </div>
-  </Column>
+  </EditableColumn>
 </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..2bacaf0cee 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
+  <EditableColumn
     :append-rules="rules"
     field="slave.ip"
     fixed="left"
@@ -28,12 +28,12 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.ip"
       :placeholder="t('请输入IP')"
       @change="handleInputChange" />
-  </Column>
-  <Column
+  </EditableColumn>
+  <EditableColumn
     :label="t('从库主机关联实例')"
     :loading="loading"
     :min-width="150">
@@ -46,10 +46,10 @@
         {{ item }}
       </p>
     </div>
-    <Block
+    <EditableBlock
       v-else
       :placeholder="t('自动生成')" />
-  </Column>
+  </EditableColumn>
   <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..aa1a3dddf0 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
@@ -25,21 +25,21 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <ClusterColumn
             v-model="item.cluster"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditableColumn
             field="cluster.bk_cloud_name"
             :label="t('所属管控区域')"
             :min-width="300">
-            <Block
+            <EditableBlock
               v-model="item.cluster.bk_cloud_name"
               :placeholder="t('自动生成')" />
-          </Column>
+          </EditableColumn>
           <SingleHostColumn
             v-model="item.host"
             field="host"
@@ -47,9 +47,9 @@
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
+        </EditableRow>
       </EditableTable>
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </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: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..b20ef76e78 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
+  <EditableColumn
     :append-rules="rules"
     field="cluster.master_domain"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.master_domain"
       :placeholder="t('请输入集群域名')"
       @change="handleInputChange" />
-  </Column>
+  </EditableColumn>
   <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..be9f0c648f 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
@@ -25,23 +25,23 @@
         ref="table"
         class="mb-20"
         :model="formData.tableData">
-        <EditableTableRow
+        <EditableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <ClusterColumn
             v-model="item.cluster"
             :selected="selected"
             @batch-edit="handleBatchEdit" />
-          <Column
+          <EditableColumn
             field="cluster.role"
             :label="t('缩容节点类型')"
             :min-width="200"
             required>
-            <Select
+            <EditableSelect
               v-model="item.cluster.role"
               :input-search="false"
               :list="nodeTypeOptions" />
-          </Column>
+          </EditableColumn>
           <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
+          <EditableColumn
             field="count"
             :label="t('缩容数量（台）')"
             :min-width="200">
@@ -60,22 +60,22 @@
                 disabled: item.host.type !== HostSelectType.MANUAL,
               }"
               style="flex: 1">
-              <Input
+              <EditableInput
                 v-model="item.count"
                 :disabled="item.host.type === HostSelectType.MANUAL"
                 :min="0"
                 type="number" />
             </div>
-          </Column>
+          </EditableColumn>
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
+        </EditableRow>
       </EditableTable>
       <IgnoreBiz
         v-model="formData.isSafe"
         v-bk-tooltips="t('如忽略_有连接的情况下也会执行')" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData" />
     </BkForm>
     <template #action>
       <BkButton
@@ -108,15 +108,14 @@
 
   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 +160,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     isSafe: false,
-    remark: '',
+    ...createTickePayload(),
   });
 
   const formData = reactive(defaultData());
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..11f02dd4a6 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
+  <EditableColumn
     :append-rules="rules"
     field="cluster.master_domain"
     fixed="left"
@@ -29,11 +29,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Input
+    <EditableInput
       v-model="modelValue.master_domain"
       :placeholder="t('请输入集群域名')"
       @change="handleInputChange" />
-  </Column>
+  </EditableColumn>
   <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: {