From 4870d40a28d6900c93223faa8a12bfc2dc807e53 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Tue, 27 Aug 2024 14:59:03 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E5=8D=95=E6=8D=AE=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=20#6482=20#=20Rev?=
 =?UTF-8?q?iewed,=20transaction=20id:=2017892?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/demand-factory/Index.vue       |  13 +-
 .../demand-factory/bigdata/DetailsES.vue      | 118 ++++++++--------
 .../demand-factory/bigdata/DetailsHDFS.vue    | 100 +++++++-------
 .../bigdata/DetailsInfluxDB.vue               |  76 +++++-----
 .../demand-factory/bigdata/DetailsKafka.vue   |  94 ++++++-------
 .../demand-factory/bigdata/DetailsPulsar.vue  | 130 +++++++++---------
 .../demand-factory/bigdata/DetailsRiak.vue    |  94 ++++++-------
 .../bigdata/RiakExpansionCapacity.vue         |  38 ++---
 .../bigdata/expansion-capacity/Index.vue      |  44 +++---
 .../demand-factory/components/DemandInfo.vue  |   2 +-
 .../demand-factory/mongodb/DbBackup.vue       |  57 ++++----
 .../demand-factory/mongodb/DbClear.vue        |  40 +++---
 .../demand-factory/mongodb/DbStruct.vue       |  22 +--
 .../demand-factory/mongodb/DbTableBackup.vue  |  48 ++++---
 .../demand-factory/mongodb/ShardScaleDown.vue | 126 +++++++++--------
 .../demand-factory/mongodb/ShardScaleUp.vue   |   8 +-
 .../mongodb/script-execute/Index.vue          |  12 +-
 .../demand-factory/mysql/Checksum.vue         |  21 ++-
 .../components/demand-factory/mysql/Clone.vue |   1 -
 .../demand-factory/mysql/ClusterOperation.vue |   1 -
 .../demand-factory/mysql/DataMigrate.vue      |   1 -
 .../demand-factory/mysql/Details.vue          |  96 ++++++-------
 .../demand-factory/mysql/DumperInstall.vue    |  32 ++---
 .../mysql/DumperNodeStatusUpdate.vue          |   1 -
 .../demand-factory/mysql/DumperSwitchNode.vue |   1 -
 .../demand-factory/mysql/Flashback.vue        |   1 -
 .../demand-factory/mysql/FullBackup.vue       |  27 ++--
 .../demand-factory/mysql/HATruncate.vue       |   9 +-
 .../demand-factory/mysql/MasterFailOver.vue   |  83 ++++++-----
 .../mysql/MasterSlaveSwitch.vue               |  83 ++++++-----
 .../demand-factory/mysql/MigrateCluster.vue   |   1 -
 .../demand-factory/mysql/OpenArea.vue         |   3 +-
 .../demand-factory/mysql/Partition.vue        |   1 -
 .../demand-factory/mysql/ProxyAdd.vue         |   1 -
 .../demand-factory/mysql/ProxySwitch.vue      |   1 -
 .../demand-factory/mysql/Rename.vue           |   1 -
 .../mysql/RestoreLocalSlave.vue               |   1 -
 .../demand-factory/mysql/RestoreSlave.vue     |   1 -
 .../demand-factory/mysql/SlaveAdd.vue         |   1 -
 .../demand-factory/mysql/TableBackup.vue      |   1 -
 .../mysql/authorize-rule/Index.vue            |   2 +-
 .../mysql/import-sql-file/Index.vue           |  44 +++---
 .../openarea/components/TargetCluster.vue     |   2 +-
 .../demand-factory/mysql/rollback/Index.vue   |   9 +-
 .../components/RollbackExistCluster.vue       |   1 -
 .../components/RollbackNewCluster.vue         |   1 -
 .../components/RollbackOriginCluster.vue      |   1 -
 .../version-upgrade/VersionLocalUpgrade.vue   |   1 -
 .../version-upgrade/VersionMigrateUpgrade.vue |   1 -
 .../version-upgrade/VersionProxyUpgrade.vue   |   1 -
 .../redis/ClusterShardUpdate.vue              |  20 +--
 .../redis/ClusterTypeUpdate.vue               |  20 +--
 .../redis/DataCheckAndRepair.vue              |  38 ++---
 .../demand-factory/redis/DataCopy.vue         |  57 ++++----
 .../demand-factory/redis/Details.vue          | 130 +++++++++---------
 .../demand-factory/redis/MasterFailover.vue   |  25 ++--
 .../demand-factory/redis/RollbackDataCopy.vue |  21 +--
 .../demand-factory/spider/AuthorizeRules.vue  |  26 ++--
 .../demand-factory/spider/CheckSum.vue        |  59 ++++----
 .../demand-factory/spider/Destroy.vue         |  41 ++----
 .../demand-factory/spider/Details.vue         |  94 ++++++-------
 .../demand-factory/spider/Enable.vue          |  41 ++----
 .../demand-factory/spider/FullBackup.vue      |  47 +++----
 .../demand-factory/spider/MasterFailOver.vue  |  81 +++++++++++
 .../spider/MasterSlaveSwitch.vue              |  35 ++---
 .../demand-factory/spider/NodeRebalance.vue   |  43 +++---
 .../demand-factory/spider/SlaveDestroy.vue    |  41 ++----
 .../tickets/common/styles/DetailsTable.less   |   6 +-
 .../tickets/common/styles/ticketDetails.less  |  16 +--
 .../my-tickets/components/details/Index.vue   |  35 ++---
 .../my-todos/components/details/Index.vue     |   8 +-
 71 files changed, 1151 insertions(+), 1187 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/MasterFailOver.vue

diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
index b34d9a2bcb..ab72218ea9 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/Index.vue
@@ -115,6 +115,7 @@
   import SpiderEnable from './spider/Enable.vue';
   import SpiderFlashback from './spider/Flashback.vue';
   import SpiderFullBackup from './spider/FullBackup.vue';
+  import SpiderMasterFailOver from './spider/MasterFailOver.vue';
   import SpiderMasterSlaveSwitch from './spider/MasterSlaveSwitch.vue';
   import SpiderMigrateCluster from './spider/MigrateCluster.vue';
   import SpiderMNTApply from './spider/MNTApply.vue';
@@ -235,11 +236,6 @@
     TicketTypes.INFLUXDB_DESTROY,
   ];
 
-  const spiderMasterSlaveTypes = [
-    TicketTypes.TENDBCLUSTER_MASTER_SLAVE_SWITCH,
-    TicketTypes.TENDBCLUSTER_MASTER_FAIL_OVER,
-  ];
-
   const spiderAuthorizeRulesTypes = [
     TicketTypes.TENDBCLUSTER_AUTHORIZE_RULES,
     TicketTypes.TENDBCLUSTER_EXCEL_AUTHORIZE_RULES,
@@ -292,7 +288,6 @@
     [TicketTypes.MYSQL_PROXY_SWITCH]: MySQLProxySwitch,
     [TicketTypes.MYSQL_HA_DB_TABLE_BACKUP]: MySQLTableBackup,
     [TicketTypes.MYSQL_MIGRATE_CLUSTER]: MySQLMigrateCluster,
-
     [TicketTypes.MYSQL_PROXY_ADD]: MySQLProxyAdd,
     [TicketTypes.MYSQL_MASTER_FAIL_OVER]: MySQLMasterFailOver,
     [TicketTypes.MYSQL_FLASHBACK]: MySQLFlashback,
@@ -328,6 +323,8 @@
     [TicketTypes.TENDBCLUSTER_DESTROY]: SpiderDestroy,
     [TicketTypes.TENDBCLUSTER_DISABLE]: SpiderDisable,
     [TicketTypes.TENDBCLUSTER_ENABLE]: SpiderEnable,
+    [TicketTypes.TENDBCLUSTER_MASTER_SLAVE_SWITCH]: SpiderMasterSlaveSwitch,
+    [TicketTypes.TENDBCLUSTER_MASTER_FAIL_OVER]: SpiderMasterFailOver,
     [TicketTypes.TENDBCLUSTER_FLASHBACK]: SpiderFlashback,
     [TicketTypes.TENDBCLUSTER_FULL_BACKUP]: SpiderFullBackup,
     [TicketTypes.TENDBCLUSTER_SPIDER_MNT_APPLY]: SpiderMNTApply,
@@ -422,10 +419,6 @@
     if (riakCapacityType.includes(ticketType)) {
       return RiakExpansionCapacity;
     }
-    // Spider 主从相关
-    if (spiderMasterSlaveTypes.includes(ticketType)) {
-      return SpiderMasterSlaveSwitch;
-    }
     // spider 授权规则
     if (spiderAuthorizeRulesTypes.includes(ticketType)) {
       return SpiderAuthorizeRules;
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsES.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsES.vue
index fa9c3e6cf1..2fba56d345 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsES.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsES.vue
@@ -12,49 +12,49 @@
 -->
 
 <template>
-  <strong class="ticket-details__info-title">{{ $t('业务信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('所属业务') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ $t('业务信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('所属业务') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('业务英文名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('业务英文名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('集群名称') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('集群名称') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('集群别名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('集群别名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('地域要求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('数据库部署地域') }}：</span>
-      <span class="ticket-details__item-value">{{ cityName }}</span>
+  <strong class="ticket-details-info-title">{{ $t('地域要求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('数据库部署地域') }}：</span>
+      <span class="ticket-details-item-value">{{ cityName }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('数据库部署信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('容灾要求') }}：</span>
-      <span class="ticket-details__item-value">{{ affinity }}</span>
+  <strong class="ticket-details-info-title">{{ $t('数据库部署信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('容灾要求') }}：</span>
+      <span class="ticket-details-item-value">{{ affinity }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('部署需求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('版本') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ $t('部署需求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('版本') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
     </div>
     <template v-if="ticketDetails?.details?.ip_source === redisIpSources.manual_input.id">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('热节点IP') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('热节点IP') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('hot') > 0"
             class="host-nums"
@@ -65,9 +65,9 @@
           <template v-else>--</template>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('冷节点IP') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('冷节点IP') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('cold') > 0"
             class="host-nums"
@@ -78,9 +78,9 @@
           <template v-else>--</template>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Client节点IP') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Client节点IP') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('client') > 0"
             class="host-nums"
@@ -91,9 +91,9 @@
           <template v-else>--</template>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Master节点IP') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Master节点IP') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('master') > 0"
             class="host-nums"
@@ -106,9 +106,9 @@
       </div>
     </template>
     <template v-else>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Master节点规格') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Master节点规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -125,9 +125,9 @@
       </div>
       <div
         v-if="clientSpec.spec_id"
-        class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Client节点规格') }}：</span>
-        <span class="ticket-details__item-value">
+        class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Client节点规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -144,9 +144,9 @@
       </div>
       <div
         v-if="hotSpec.spec_id"
-        class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('热节点规格') }}：</span>
-        <span class="ticket-details__item-value">
+        class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('热节点规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -163,9 +163,9 @@
       </div>
       <div
         v-if="coldSpec.spec_id"
-        class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('冷节点规格') }}：</span>
-        <span class="ticket-details__item-value">
+        class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('冷节点规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -181,15 +181,15 @@
         </span>
       </div>
     </template>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('端口号') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.http_port || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('端口号') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.http_port || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('备注') }}：</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('备注') }}：</span>
       <span
         v-overflow-tips
-        class="ticket-details__item-value">
+        class="ticket-details-item-value">
         {{ ticketDetails?.remark || '--' }}
       </span>
     </div>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsHDFS.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsHDFS.vue
index 5b338f501a..736769a7ce 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsHDFS.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsHDFS.vue
@@ -12,49 +12,49 @@
 -->
 
 <template>
-  <strong class="ticket-details__info-title">{{ $t('业务信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('所属业务') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ $t('业务信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('所属业务') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('业务英文名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('业务英文名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('集群名称') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('集群名称') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('集群别名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('集群别名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('地域要求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('数据库部署地域') }}：</span>
-      <span class="ticket-details__item-value">{{ cityName }}</span>
+  <strong class="ticket-details-info-title">{{ $t('地域要求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('数据库部署地域') }}：</span>
+      <span class="ticket-details-item-value">{{ cityName }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('数据库部署信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('容灾要求') }}：</span>
-      <span class="ticket-details__item-value">{{ affinity }}</span>
+  <strong class="ticket-details-info-title">{{ $t('数据库部署信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('容灾要求') }}：</span>
+      <span class="ticket-details-item-value">{{ affinity }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('部署需求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('版本') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ $t('部署需求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('版本') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
     </div>
     <template v-if="ticketDetails?.details?.ip_source === redisIpSources.manual_input.id">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('DataNode节点IP') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('DataNode节点IP') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('datanode') > 0"
             class="host-nums"
@@ -65,9 +65,9 @@
           <template v-else>--</template>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('NameNode节点IP') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('NameNode节点IP') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('namenode') > 0"
             class="host-nums"
@@ -78,9 +78,9 @@
           <template v-else>--</template>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Zookeeper节点IP') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Zookeeper节点IP') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('zookeeper') > 0"
             class="host-nums"
@@ -93,9 +93,9 @@
       </div>
     </template>
     <template v-else>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">NameNode：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">NameNode：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -110,9 +110,9 @@
           </BkPopover>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">Zookeepers/JournalNodes：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">Zookeepers/JournalNodes：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -127,9 +127,9 @@
           </BkPopover>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">DataNodes：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">DataNodes：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -145,11 +145,11 @@
         </span>
       </div>
     </template>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('备注') }}：</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('备注') }}：</span>
       <span
         v-overflow-tips
-        class="ticket-details__item-value">
+        class="ticket-details-item-value">
         {{ ticketDetails?.remark || '--' }}
       </span>
     </div>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsInfluxDB.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsInfluxDB.vue
index 87a7795022..a68a83e337 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsInfluxDB.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsInfluxDB.vue
@@ -12,45 +12,45 @@
 -->
 
 <template>
-  <strong class="ticket-details__info-title">{{ $t('业务信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('所属业务') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ $t('业务信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('所属业务') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('业务英文名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('业务英文名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('分组名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.group_name || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('分组名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.group_name || '--' }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('地域要求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('数据库部署地域') }}：</span>
-      <span class="ticket-details__item-value">{{ cityName }}</span>
+  <strong class="ticket-details-info-title">{{ $t('地域要求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('数据库部署地域') }}：</span>
+      <span class="ticket-details-item-value">{{ cityName }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('数据库部署信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('容灾要求') }}：</span>
-      <span class="ticket-details__item-value">{{ affinity }}</span>
+  <strong class="ticket-details-info-title">{{ $t('数据库部署信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('容灾要求') }}：</span>
+      <span class="ticket-details-item-value">{{ affinity }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('部署需求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('版本') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ $t('部署需求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('版本') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
     </div>
     <template v-if="ticketDetails?.details?.ip_source === redisIpSources.manual_input.id">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('服务器') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('服务器') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums() > 0"
             class="host-nums"
@@ -63,9 +63,9 @@
       </div>
     </template>
     <template v-if="ticketDetails?.details?.ip_source === 'resource_pool'">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('规格') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -81,13 +81,13 @@
         </span>
       </div>
     </template>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('访问端口') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.port || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('访问端口') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.port || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('备注') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.remark || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('备注') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.remark || '--' }}</span>
     </div>
   </div>
   <HostPreview
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsKafka.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsKafka.vue
index 0840c57021..2706db3fdc 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsKafka.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsKafka.vue
@@ -12,49 +12,49 @@
 -->
 
 <template>
-  <strong class="ticket-details__info-title">{{ $t('业务信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('所属业务') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ $t('业务信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('所属业务') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('业务英文名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('业务英文名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('集群名称') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('集群名称') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('集群别名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('集群别名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('地域要求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('数据库部署地域') }}：</span>
-      <span class="ticket-details__item-value">{{ cityName }}</span>
+  <strong class="ticket-details-info-title">{{ $t('地域要求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('数据库部署地域') }}：</span>
+      <span class="ticket-details-item-value">{{ cityName }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('数据库部署信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('容灾要求') }}：</span>
-      <span class="ticket-details__item-value">{{ affinity }}</span>
+  <strong class="ticket-details-info-title">{{ $t('数据库部署信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('容灾要求') }}：</span>
+      <span class="ticket-details-item-value">{{ affinity }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('部署需求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('版本') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ $t('部署需求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('版本') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
     </div>
     <template v-if="ticketDetails?.details?.ip_source === redisIpSources.manual_input.id">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Broker节点IP') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Broker节点IP') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('broker') > 0"
             class="host-nums"
@@ -65,9 +65,9 @@
           <template v-else>--</template>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Zookeeper节点IP') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Zookeeper节点IP') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('zookeeper') > 0"
             class="host-nums"
@@ -80,9 +80,9 @@
       </div>
     </template>
     <template v-else>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Broker节点规格') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Broker节点规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -97,9 +97,9 @@
           </BkPopover>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Zookeeper节点规格') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Zookeeper节点规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -115,19 +115,19 @@
         </span>
       </div>
     </template>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('开启认证') }}：</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('开启认证') }}：</span>
       <span
         v-overflow-tips
-        class="ticket-details__item-value">
+        class="ticket-details-item-value">
         {{ security }}
       </span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('备注') }}：</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('备注') }}：</span>
       <span
         v-overflow-tips
-        class="ticket-details__item-value">
+        class="ticket-details-item-value">
         {{ ticketDetails?.remark || '--' }}
       </span>
     </div>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsPulsar.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsPulsar.vue
index 6b498aee7d..872ebba14d 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsPulsar.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsPulsar.vue
@@ -12,49 +12,49 @@
 -->
 
 <template>
-  <strong class="ticket-details__info-title">{{ $t('业务信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('所属业务') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ $t('业务信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('所属业务') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('业务英文名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('业务英文名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('集群名称') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('集群名称') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('集群别名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('集群别名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('地域要求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('数据库部署地域') }}：</span>
-      <span class="ticket-details__item-value">{{ cityName }}</span>
+  <strong class="ticket-details-info-title">{{ $t('地域要求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('数据库部署地域') }}：</span>
+      <span class="ticket-details-item-value">{{ cityName }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('数据库部署信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('容灾要求') }}：</span>
-      <span class="ticket-details__item-value">{{ affinity }}</span>
+  <strong class="ticket-details-info-title">{{ $t('数据库部署信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('容灾要求') }}：</span>
+      <span class="ticket-details-item-value">{{ affinity }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('部署需求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('版本') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ $t('部署需求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('版本') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
     </div>
     <template v-if="ticketDetails?.details?.ip_source === redisIpSources.manual_input.id">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Bookkeeper节点') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Bookkeeper节点') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('bookkeeper') > 0"
             class="host-nums"
@@ -65,9 +65,9 @@
           <template v-else>--</template>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Zookeeper节点') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Zookeeper节点') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('zookeeper') > 0"
             class="host-nums"
@@ -78,9 +78,9 @@
           <template v-else>--</template>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Broker节点') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Broker节点') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('broker') > 0"
             class="host-nums"
@@ -93,9 +93,9 @@
       </div>
     </template>
     <template v-if="ticketDetails?.details?.ip_source === 'resource_pool'">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Bookkeeper节点规格') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Bookkeeper节点规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -110,9 +110,9 @@
           </BkPopover>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Zookeeper节点规格') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Zookeeper节点规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -127,9 +127,9 @@
           </BkPopover>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('Broker节点规格') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('Broker节点规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -145,29 +145,29 @@
         </span>
       </div>
     </template>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('Partition数量') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.partition_num || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('Partition数量') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.partition_num || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('消息保留') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.retention_hours || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('消息保留') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.retention_hours || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('副本数量') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.replication_num || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('副本数量') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.replication_num || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('至少写入成功副本数量') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.ack_quorum || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('至少写入成功副本数量') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.ack_quorum || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('访问端口') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.port || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('访问端口') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.port || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('备注') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.remark || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('备注') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.remark || '--' }}</span>
     </div>
   </div>
   <HostPreview
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsRiak.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsRiak.vue
index 45e25d958a..defe0fb500 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsRiak.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/DetailsRiak.vue
@@ -12,61 +12,61 @@
 -->
 
 <template>
-  <strong class="ticket-details__info-title">{{ t('部署模块') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('所属业务') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ t('部署模块') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('所属业务') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('业务英文名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('业务英文名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('DB模块名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.db_module_name || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('DB模块名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.db_module_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('集群ID') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('集群ID') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('集群名称') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('集群名称') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('管控区域') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.bk_cloud_name || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('管控区域') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.bk_cloud_name || '--' }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ t('地域要求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('数据库部署地域') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.city_name || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ t('地域要求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('数据库部署地域') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.city_name || '--' }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ t('数据库部署信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('Riak版本') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ t('数据库部署信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('Riak版本') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ t('部署需求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('服务器选择方式') }}：</span>
-      <span class="ticket-details__item-value">{{ isFromResourcePool ? t('从资源池匹配') : t('手动选择') }} </span>
+  <strong class="ticket-details-info-title">{{ t('部署需求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('服务器选择方式') }}：</span>
+      <span class="ticket-details-item-value">{{ isFromResourcePool ? t('从资源池匹配') : t('手动选择') }} </span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('备注') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.remark || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('备注') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.remark || '--' }}</span>
     </div>
     <template v-if="isFromResourcePool">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('资源规格') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('资源规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -81,15 +81,15 @@
           </BkPopover>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('节点数量') }}：</span>
-        <span class="ticket-details__item-value">{{ riakSpec?.count || '--' }}</span>
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('节点数量') }}：</span>
+        <span class="ticket-details-item-value">{{ riakSpec?.count || '--' }}</span>
       </div>
     </template>
     <template v-else>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('Riak节点IP') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('Riak节点IP') }}：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="riakNodeCount > 0"
             class="host-nums">
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/RiakExpansionCapacity.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/RiakExpansionCapacity.vue
index 43703581db..18b78bc5aa 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/RiakExpansionCapacity.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/RiakExpansionCapacity.vue
@@ -13,38 +13,38 @@
 
 <template>
   <BkLoading :loading="loading">
-    <div class="ticket-details__list">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('集群') }}：</span>
-        <span class="ticket-details__item-value">{{ rowData?.clusterName || '--' }}</span>
+    <div class="ticket-details-list">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('集群') }}：</span>
+        <span class="ticket-details-item-value">{{ rowData?.clusterName || '--' }}</span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('集群ID') }}：</span>
-        <span class="ticket-details__item-value">{{ rowData?.clusterId || '--' }}</span>
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('集群ID') }}：</span>
+        <span class="ticket-details-item-value">{{ rowData?.clusterId || '--' }}</span>
       </div>
       <template v-if="isScaleUp">
-        <div class="ticket-details__item">
-          <span class="ticket-details__item-label">{{ t('服务器选择方式') }}：</span>
-          <span class="ticket-details__item-value">
+        <div class="ticket-details-item">
+          <span class="ticket-details-item-label">{{ t('服务器选择方式') }}：</span>
+          <span class="ticket-details-item-value">
             {{ isFromResourcePool ? t('从资源池匹配') : t('手动选择') }}
           </span>
         </div>
         <template v-if="isFromResourcePool">
-          <div class="ticket-details__item">
-            <span class="ticket-details__item-label">{{ t('扩容规格') }}：</span>
-            <span class="ticket-details__item-value">{{ rowData?.specName || '--' }}</span>
+          <div class="ticket-details-item">
+            <span class="ticket-details-item-label">{{ t('扩容规格') }}：</span>
+            <span class="ticket-details-item-value">{{ rowData?.specName || '--' }}</span>
           </div>
-          <div class="ticket-details__item">
-            <span class="ticket-details__item-label">{{ t('扩容数量') }}：</span>
-            <span class="ticket-details__item-value">
+          <div class="ticket-details-item">
+            <span class="ticket-details-item-label">{{ t('扩容数量') }}：</span>
+            <span class="ticket-details-item-value">
               {{ t('n台', [rowData?.count]) || '--' }}
             </span>
           </div>
         </template>
         <template v-else>
-          <div class="ticket-details__item table">
-            <span class="ticket-details__item-label">{{ t('已选IP') }}：</span>
-            <span class="ticket-details__item-value">
+          <div class="ticket-details-item table">
+            <span class="ticket-details-item-label">{{ t('已选IP') }}：</span>
+            <span class="ticket-details-item-value">
               <BkTable
                 :columns="tableColumns"
                 :data="ipList" />
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/expansion-capacity/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/expansion-capacity/Index.vue
index 12a587ab5b..8c6f01f202 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/expansion-capacity/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/bigdata/expansion-capacity/Index.vue
@@ -16,23 +16,23 @@
     <div
       v-for="(item, index) in dataList"
       :key="index">
-      <strong class="ticket-details__info-title">{{ item.title }}</strong>
-      <div class="ticket-details__list">
-        <div class="ticket-details__item">
-          <span class="ticket-details__item-label">{{ t('集群') }}：</span>
-          <span class="ticket-details__item-value">{{ item.clusterName }}</span>
+      <strong class="ticket-details-info-title">{{ item.title }}</strong>
+      <div class="ticket-details-list">
+        <div class="ticket-details-item">
+          <span class="ticket-details-item-label">{{ t('集群') }}：</span>
+          <span class="ticket-details-item-value">{{ item.clusterName }}</span>
         </div>
-        <div class="ticket-details__item">
-          <span class="ticket-details__item-label">{{ t('集群ID') }}：</span>
-          <span class="ticket-details__item-value">{{ item.clusterId }}</span>
+        <div class="ticket-details-item">
+          <span class="ticket-details-item-label">{{ t('集群ID') }}：</span>
+          <span class="ticket-details-item-value">{{ item.clusterId }}</span>
         </div>
-        <div class="ticket-details__item">
-          <span class="ticket-details__item-label">{{ t('服务器选择方式') }}：</span>
-          <span class="ticket-details__item-value">{{ isFromResourcePool ? t('从资源池匹配') : t('手动选择') }} </span>
+        <div class="ticket-details-item">
+          <span class="ticket-details-item-label">{{ t('服务器选择方式') }}：</span>
+          <span class="ticket-details-item-value">{{ isFromResourcePool ? t('从资源池匹配') : t('手动选择') }} </span>
         </div>
-        <div class="ticket-details__item">
-          <span class="ticket-details__item-label">{{ isScaleUp ? t('扩容容量') : t('缩容容量') }}：</span>
-          <span class="ticket-details__item-value">
+        <div class="ticket-details-item">
+          <span class="ticket-details-item-label">{{ isScaleUp ? t('扩容容量') : t('缩容容量') }}：</span>
+          <span class="ticket-details-item-value">
             {{ isScaleUp ? item.targetDisk : item.shrinkDisk }}GB （{{
               isScaleUp
                 ? t('当前m_G_扩容后预估n_G', { m: item.totalDisk, n: item.expectDisk })
@@ -41,13 +41,13 @@
           </span>
         </div>
         <template v-if="isFromResourcePool">
-          <div class="ticket-details__item">
-            <span class="ticket-details__item-label">{{ isScaleUp ? t('扩容规格') : t('缩容规格') }}：</span>
-            <span class="ticket-details__item-value">{{ item.specName }}</span>
+          <div class="ticket-details-item">
+            <span class="ticket-details-item-label">{{ isScaleUp ? t('扩容规格') : t('缩容规格') }}：</span>
+            <span class="ticket-details-item-value">{{ item.specName }}</span>
           </div>
-          <div class="ticket-details__item">
-            <span class="ticket-details__item-label">{{ isScaleUp ? t('扩容数量') : t('缩容数量') }}：</span>
-            <span class="ticket-details__item-value">
+          <div class="ticket-details-item">
+            <span class="ticket-details-item-label">{{ isScaleUp ? t('扩容数量') : t('缩容数量') }}：</span>
+            <span class="ticket-details-item-value">
               {{ t('n台', [item.count]) }}（{{
                 t('当前n台_扩容至m台', { n: item.totalHost, m: item.totalHost + item.count })
               }})
@@ -55,8 +55,8 @@
           </div>
         </template>
         <template v-else>
-          <div class="ticket-details__item">
-            <span class="ticket-details__item-label">{{ t('已选IP') }}：</span>
+          <div class="ticket-details-item">
+            <span class="ticket-details-item-label">{{ t('已选IP') }}：</span>
           </div>
           <div class="inline-table">
             <SelectIpTable :data="item.hostList" />
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/components/DemandInfo.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/components/DemandInfo.vue
index 8f4b00dfd0..7d715f93f6 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/components/DemandInfo.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/components/DemandInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ticket-details">
+  <div class="ticket-details-page">
     <div
       v-for="(dataItem, dataKey) in config"
       :key="dataKey"
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbBackup.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbBackup.vue
index 5eea7a4ef3..b166179605 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbBackup.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbBackup.vue
@@ -16,14 +16,14 @@
     class="details-backup__table"
     :columns="columns"
     :data="dataList" />
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('备份文件保存时间') }}：</span>
-      <span class="ticket-details__item-value">{{ fileTag }}</span>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('备份文件保存时间') }}：</span>
+      <span class="ticket-details-item-value">{{ fileTag }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('是否开启 Oplog') }}：</span>
-      <span class="ticket-details__item-value">{{ oplogType }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('是否开启 Oplog') }}：</span>
+      <span class="ticket-details-item-value">{{ oplogType }}</span>
     </div>
   </div>
 </template>
@@ -68,19 +68,14 @@
   }
 
   interface Props {
-    ticketDetails: TicketDetails<DbBackupDetails>
+    ticketDetails: TicketDetails<DbBackupDetails>;
   }
 
   const props = defineProps<Props>();
 
   const { t } = useI18n();
 
-  const {
-    clusters,
-    file_tag,
-    oplog,
-    infos,
-  } = props.ticketDetails.details;
+  const { clusters, file_tag, oplog, infos } = props.ticketDetails.details;
 
   // eslint-disable-next-line camelcase
   const fileTag = file_tag === 'normal_backup' ? t('常规备份（25天）') : t('长期备份（3年）');
@@ -99,34 +94,32 @@
     },
   ];
 
-  const dataList = infos.map(item => ({
+  const dataList = infos.map((item) => ({
     immute_domain: clusters[item.cluster_id].immute_domain,
     cluster_type_name: clusters[item.cluster_id].cluster_type_name,
-
   }));
-
 </script>
 
 <style lang="less" scoped>
-@import "@views/tickets/common/styles/DetailsTable.less";
-@import "@views/tickets/common/styles/ticketDetails.less";
+  @import '@views/tickets/common/styles/DetailsTable.less';
+  @import '@views/tickets/common/styles/ticketDetails.less';
 
-.ticket-details {
-  &__info {
-    padding-left: 80px;
-  }
+  .ticket-details {
+    &__info {
+      padding-left: 80px;
+    }
 
-  &__item {
-    &-label {
-      min-width: 0;
-      text-align: left;
+    &__item {
+      &-label {
+        min-width: 0;
+        text-align: left;
+      }
     }
   }
-}
 
-.details-backup {
-  &__table {
-    padding-left: 80px;
+  .details-backup {
+    &__table {
+      padding-left: 80px;
+    }
   }
-}
 </style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbClear.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbClear.vue
index 23a1c732ac..57400c0900 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbClear.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbClear.vue
@@ -16,10 +16,10 @@
     class="details-backup__table"
     :columns="columns"
     :data="tableData" />
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('忽略业务连接') }}：</span>
-      <span class="ticket-details__item-value">
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('忽略业务连接') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.is_safe ? t('否') : t('是') }}
       </span>
     </div>
@@ -165,29 +165,27 @@
     drop_index: item.drop_index,
     ...item.ns_filter,
   }));
-
-
 </script>
 <style lang="less" scoped>
-@import "@views/tickets/common/styles/DetailsTable.less";
-@import "@views/tickets/common/styles/ticketDetails.less";
+  @import '@views/tickets/common/styles/DetailsTable.less';
+  @import '@views/tickets/common/styles/ticketDetails.less';
 
-.ticket-details {
-  &__info {
-    padding-left: 80px;
-  }
+  .ticket-details {
+    &__info {
+      padding-left: 80px;
+    }
 
-  &__item {
-    &-label {
-      min-width: 0;
-      text-align: left;
+    &__item {
+      &-label {
+        min-width: 0;
+        text-align: left;
+      }
     }
   }
-}
 
-.details-backup {
-  &__table {
-    padding-left: 80px;
+  .details-backup {
+    &__table {
+      padding-left: 80px;
+    }
   }
-}
 </style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbStruct.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbStruct.vue
index c9eedace06..941b7e4d7a 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbStruct.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbStruct.vue
@@ -17,9 +17,9 @@
     :columns="columns"
     :data="tableData" />
   <template v-if="tableSettingData.length > 0">
-    <div class="ticket-details__list">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('库表设置') }}：</span>
+    <div class="ticket-details-list">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('库表设置') }}：</span>
       </div>
     </div>
     <DbOriginalTable
@@ -27,20 +27,20 @@
       :columns="dbTableColumns"
       :data="tableSettingData" />
   </template>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('构造新主机规格') }}：</span>
-      <span class="ticket-details__item-value">
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('构造新主机规格') }}：</span>
+      <span class="ticket-details-item-value">
         {{ specs[resource_spec.mongodb.spec_id].name ?? '--' }}
       </span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('每台主机构造Shard数量') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('每台主机构造Shard数量') }}：</span>
+      <span class="ticket-details-item-value">
         {{ instance_per_host }}
       </span>
     </div>
-    </div>
+  </div>
 </template>
 
 <script setup lang="tsx">
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbTableBackup.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbTableBackup.vue
index 79258f7d1b..37a956f3c4 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbTableBackup.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/DbTableBackup.vue
@@ -16,14 +16,18 @@
     class="details-backup__table"
     :columns="columns"
     :data="dataList" />
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('备份文件保存时间') }}：</span>
-      <span class="ticket-details__item-value">{{ fileTag === 'normal_backup' ? t('常规备份（25天）') : t('长期备份（3年）') }}</span>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('备份文件保存时间') }}：</span>
+      <span class="ticket-details-item-value">{{
+        fileTag === 'normal_backup' ? t('常规备份（25天）') : t('长期备份（3年）')
+      }}</span>
     </div>
-    <div v-if="backupType" class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('备份位置') }}：</span>
-      <span class="ticket-details__item-value">{{ backupType }}</span>
+    <div
+      v-if="backupType"
+      class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('备份位置') }}：</span>
+      <span class="ticket-details-item-value">{{ backupType }}</span>
     </div>
   </div>
 </template>
@@ -163,25 +167,25 @@
 </script>
 
 <style lang="less" scoped>
-@import "@views/tickets/common/styles/DetailsTable.less";
-@import "@views/tickets/common/styles/ticketDetails.less";
+  @import '@views/tickets/common/styles/DetailsTable.less';
+  @import '@views/tickets/common/styles/ticketDetails.less';
 
-.ticket-details {
-  &__info {
-    padding-left: 80px;
-  }
+  .ticket-details {
+    &__info {
+      padding-left: 80px;
+    }
 
-  &__item {
-    &-label {
-      min-width: 0;
-      text-align: left;
+    &__item {
+      &-label {
+        min-width: 0;
+        text-align: left;
+      }
     }
   }
-}
 
-.details-backup {
-  &__table {
-    padding-left: 80px;
+  .details-backup {
+    &__table {
+      padding-left: 80px;
+    }
   }
-}
 </style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/ShardScaleDown.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/ShardScaleDown.vue
index cbcfd94bb2..025a6ab267 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/ShardScaleDown.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/ShardScaleDown.vue
@@ -18,10 +18,10 @@
       :columns="columns"
       :data="tableData" />
   </BkLoading>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('忽略业务连接') }}：</span>
-      <span class="ticket-details__item-value">
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('忽略业务连接') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.is_safe ? t('否') : t('是') }}
       </span>
     </div>
@@ -36,30 +36,33 @@
   import type { TicketDetails } from '@services/types/ticket';
 
   interface ShardScaleDownDetails {
-    clusters: Record<number, {
-      alias: string;
-      bk_biz_id: number;
-      bk_cloud_id: number;
-      cluster_type: string;
-      cluster_type_name: string;
-      creator: string;
-      db_module_id: number;
-      disaster_tolerance_level: string;
-      id: number;
-      immute_domain: string;
-      major_version: string;
-      name: string;
-      phase: string;
-      region: string;
-      status: string;
-      tag: {
+    clusters: Record<
+      number,
+      {
+        alias: string;
         bk_biz_id: number;
+        bk_cloud_id: number;
+        cluster_type: string;
+        cluster_type_name: string;
+        creator: string;
+        db_module_id: number;
+        disaster_tolerance_level: string;
+        id: number;
+        immute_domain: string;
+        major_version: string;
         name: string;
-        type: string;
-      }[];
-      time_zone: string;
-      updater: string;
-    }>;
+        phase: string;
+        region: string;
+        status: string;
+        tag: {
+          bk_biz_id: number;
+          name: string;
+          type: string;
+        }[];
+        time_zone: string;
+        updater: string;
+      }
+    >;
     infos: {
       cluster_id: number;
       reduce_shard_nodes: number;
@@ -69,14 +72,14 @@
   }
 
   interface Props {
-    ticketDetails: TicketDetails<ShardScaleDownDetails>
+    ticketDetails: TicketDetails<ShardScaleDownDetails>;
   }
 
   interface RowData {
-    immute_domain: string,
-    cluster_type: string,
-    current_nodes: number,
-    reduce_shard_nodes: number,
+    immute_domain: string;
+    cluster_type: string;
+    current_nodes: number;
+    reduce_shard_nodes: number;
   }
 
   const props = defineProps<Props>();
@@ -85,10 +88,7 @@
 
   const tableData = ref<RowData[]>([]);
 
-  const {
-    clusters,
-    infos,
-  } = props.ticketDetails.details;
+  const { clusters, infos } = props.ticketDetails.details;
 
   const columns = [
     {
@@ -113,19 +113,19 @@
     },
   ];
 
-  const {
-    loading,
-    run: fetchMongoList,
-  } = useRequest(getMongoList, {
+  const { loading, run: fetchMongoList } = useRequest(getMongoList, {
     manual: true,
     onSuccess(result) {
-      const shardNumMap = result.results.reduce((results, item) => {
-        Object.assign(results, {
-          [item.id]: item.shard_node_count,
-        });
-        return results;
-      }, {} as Record<number, number>);
-      tableData.value = infos.map(item => ({
+      const shardNumMap = result.results.reduce(
+        (results, item) => {
+          Object.assign(results, {
+            [item.id]: item.shard_node_count,
+          });
+          return results;
+        },
+        {} as Record<number, number>,
+      );
+      tableData.value = infos.map((item) => ({
         immute_domain: clusters[item.cluster_id].immute_domain,
         cluster_type: clusters[item.cluster_id].cluster_type_name,
         reduce_shard_nodes: shardNumMap[item.cluster_id] - item.reduce_shard_nodes,
@@ -135,31 +135,29 @@
   });
 
   fetchMongoList({
-    domains: props.ticketDetails.details.infos.map(item => clusters[item.cluster_id].immute_domain).join(','),
+    domains: props.ticketDetails.details.infos.map((item) => clusters[item.cluster_id].immute_domain).join(','),
   });
-
-
 </script>
 <style lang="less" scoped>
-@import "@views/tickets/common/styles/DetailsTable.less";
-@import "@views/tickets/common/styles/ticketDetails.less";
+  @import '@views/tickets/common/styles/DetailsTable.less';
+  @import '@views/tickets/common/styles/ticketDetails.less';
 
-.ticket-details {
-  &__info {
-    padding-left: 80px;
-  }
+  .ticket-details {
+    &__info {
+      padding-left: 80px;
+    }
 
-  &__item {
-    &-label {
-      min-width: 0;
-      text-align: left;
+    &__item {
+      &-label {
+        min-width: 0;
+        text-align: left;
+      }
     }
   }
-}
 
-.details-backup {
-  &__table {
-    padding-left: 80px;
+  .details-backup {
+    &__table {
+      padding-left: 80px;
+    }
   }
-}
 </style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/ShardScaleUp.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/ShardScaleUp.vue
index ed4f31e463..5bafb0efb4 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/ShardScaleUp.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/ShardScaleUp.vue
@@ -16,10 +16,10 @@
     class="details-backup__table"
     :columns="columns"
     :data="tableData" />
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('忽略业务连接') }}：</span>
-      <span class="ticket-details__item-value">
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('忽略业务连接') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.is_safe ? t('否') : t('是') }}
       </span>
     </div>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/script-execute/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/script-execute/Index.vue
index 1bcb0a052f..ce1962f4e1 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/script-execute/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mongodb/script-execute/Index.vue
@@ -12,15 +12,15 @@
 -->
 
 <template>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('脚本来源') }}：</span>
-      <span class="ticket-details__item-value">
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('脚本来源') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.mode === 'file' ? t('脚本文件') : t('手动输入') }}
       </span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('脚本执行内容') }}：</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('脚本执行内容') }}：</span>
       <BkButton
         text
         theme="primary"
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Checksum.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Checksum.vue
index 4cf2bc8b2f..3487ccd6c5 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Checksum.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Checksum.vue
@@ -12,22 +12,21 @@
 -->
 
 <template>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('所属业务') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('所属业务') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('指定执行时间') }}：</span>
-      <span class="ticket-details__item-value">{{ utcDisplayTime(ticketDetails?.details?.timing) || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('指定执行时间') }}：</span>
+      <span class="ticket-details-item-value">{{ utcDisplayTime(ticketDetails?.details?.timing) || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('自动修复') }}：</span>
-      <span class="ticket-details__item-value">{{ isRepair }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('自动修复') }}：</span>
+      <span class="ticket-details-item-value">{{ isRepair }}</span>
     </div>
   </div>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Clone.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Clone.vue
index 97ac2fdecb..2d26a5e6e5 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Clone.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Clone.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="renderColumns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ClusterOperation.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ClusterOperation.vue
index 476711f986..42f7b6da57 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ClusterOperation.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ClusterOperation.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DataMigrate.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DataMigrate.vue
index 7e9470f3c3..923a0466f4 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DataMigrate.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DataMigrate.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="tableData" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Details.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Details.vue
index 205f935809..ac375090b4 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Details.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Details.vue
@@ -12,72 +12,72 @@
 -->
 
 <template>
-  <strong class="ticket-details__info-title">{{ $t('部署模块') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('所属业务') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ $t('部署模块') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('所属业务') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('业务英文名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('业务英文名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('DB模块名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.db_module_name || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('DB模块名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.db_module_name || '--' }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('地域要求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('数据库部署地域') }}：</span>
-      <span class="ticket-details__item-value">{{ cityName }}</span>
+  <strong class="ticket-details-info-title">{{ $t('地域要求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('数据库部署地域') }}：</span>
+      <span class="ticket-details-item-value">{{ cityName }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('数据库部署信息') }}</strong>
-  <div class="ticket-details__list">
+  <strong class="ticket-details-info-title">{{ $t('数据库部署信息') }}</strong>
+  <div class="ticket-details-list">
     <div
       v-if="!isSingleType"
-      class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('容灾要求') }}：</span>
-      <span class="ticket-details__item-value">{{ affinity }}</span>
+      class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('容灾要求') }}：</span>
+      <span class="ticket-details-item-value">{{ affinity }}</span>
     </div>
     <div
       v-if="!isSingleType"
-      class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('Proxy起始端口') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.start_proxy_port || '--' }}</span>
+      class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('Proxy起始端口') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.start_proxy_port || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('MySQL起始端口') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.start_mysql_port || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('MySQL起始端口') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.start_mysql_port || '--' }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('需求信息') }}</strong>
+  <strong class="ticket-details-info-title">{{ $t('需求信息') }}</strong>
   <div
-    class="ticket-details__list"
+    class="ticket-details-list"
     style="max-width: unset">
     <div
-      class="ticket-details__item"
+      class="ticket-details-item"
       style="max-width: 500px">
-      <span class="ticket-details__item-label">{{ $t('数量') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_count }}</span>
+      <span class="ticket-details-item-label">{{ $t('数量') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_count }}</span>
     </div>
     <div
-      class="ticket-details__item"
+      class="ticket-details-item"
       style="max-width: 500px">
-      <span class="ticket-details__item-label">{{ $t('备注') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.remark || '--' }}</span>
+      <span class="ticket-details-item-label">{{ $t('备注') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.remark || '--' }}</span>
     </div>
     <div
       v-if="ticketDetails?.details?.ip_source === 'resource_pool'"
-      class="ticket-details__item whole"
+      class="ticket-details-item whole"
       style="max-width: 1000px">
       <div
         v-if="isSingleType"
-        class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ $t('后端存储资源规格') }}：</span>
-        <span class="ticket-details__item-value">
+        class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ $t('后端存储资源规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -93,9 +93,9 @@
         </span>
       </div>
       <template v-else>
-        <div class="ticket-details__item">
-          <span class="ticket-details__item-label">{{ $t('Proxy存储资源规格') }}：</span>
-          <span class="ticket-details__item-value">
+        <div class="ticket-details-item">
+          <span class="ticket-details-item-label">{{ $t('Proxy存储资源规格') }}：</span>
+          <span class="ticket-details-item-value">
             <BkPopover
               placement="top"
               theme="light">
@@ -110,9 +110,9 @@
             </BkPopover>
           </span>
         </div>
-        <div class="ticket-details__item">
-          <span class="ticket-details__item-label">{{ $t('后端存储资源规格') }}：</span>
-          <span class="ticket-details__item-value">
+        <div class="ticket-details-item">
+          <span class="ticket-details-item-label">{{ $t('后端存储资源规格') }}：</span>
+          <span class="ticket-details-item-value">
             <BkPopover
               placement="top"
               theme="light">
@@ -129,9 +129,9 @@
         </div>
       </template>
     </div>
-    <div class="ticket-details__item table">
-      <span class="ticket-details__item-label">{{ $t('集群设置') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item table">
+      <span class="ticket-details-item-label">{{ $t('集群设置') }}：</span>
+      <span class="ticket-details-item-value">
         <PreviewTable
           :key="ticketDetails?.ticket_type"
           :data="tableData"
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DumperInstall.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DumperInstall.vue
index 8a9074841e..58528cf4d3 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DumperInstall.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DumperInstall.vue
@@ -13,10 +13,10 @@
 
 <template>
   <div
-    class="ticket-details__item"
+    class="ticket-details-item"
     style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('订阅的库表') }}：</span>
-    <span class="ticket-details__item-value">
+    <span class="ticket-details-item-label">{{ t('订阅的库表') }}：</span>
+    <span class="ticket-details-item-value">
       <BkTable
         class="subscribe-table"
         :columns="subscribeColumns"
@@ -24,10 +24,10 @@
     </span>
   </div>
   <div
-    class="ticket-details__item mt-16"
+    class="ticket-details-item mt-16"
     style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('数据源与接收端') }}：</span>
-    <span class="ticket-details__item-value">
+    <span class="ticket-details-item-label">{{ t('数据源与接收端') }}：</span>
+    <span class="ticket-details-item-value">
       <BkTable
         class="subscribe-table"
         :columns="receiverColumns"
@@ -35,18 +35,18 @@
     </span>
   </div>
 
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('订阅名称') }}：</span>
-      <span class="ticket-details__item-value">{{ name }}</span>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('订阅名称') }}：</span>
+      <span class="ticket-details-item-value">{{ name }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('Dumper部署位置') }}：</span>
-      <span class="ticket-details__item-value">{{ t('集群Master所在主机') }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('Dumper部署位置') }}：</span>
+      <span class="ticket-details-item-value">{{ t('集群Master所在主机') }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('数据同步方式') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('数据同步方式') }}：</span>
+      <span class="ticket-details-item-value">
         {{ addType === 'incr_sync' ? t('增量同步') : t('全量同步') }}
       </span>
     </div>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DumperNodeStatusUpdate.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DumperNodeStatusUpdate.vue
index b2528aa459..22eb47c9d5 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DumperNodeStatusUpdate.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DumperNodeStatusUpdate.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="tableData" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DumperSwitchNode.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DumperSwitchNode.vue
index 0250267123..248c80662c 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DumperSwitchNode.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/DumperSwitchNode.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="tableData" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Flashback.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Flashback.vue
index 8f1e56d665..12a244c888 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Flashback.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Flashback.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/FullBackup.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/FullBackup.vue
index 026a2cc686..f468568162 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/FullBackup.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/FullBackup.vue
@@ -12,26 +12,25 @@
 -->
 
 <template>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('所属业务') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('所属业务') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('备份选项') }}：</span>
-      <span class="ticket-details__item-value">{{ backupOptions }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('备份选项') }}：</span>
+      <span class="ticket-details-item-value">{{ backupOptions }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('备份类型') }}：</span>
-      <span class="ticket-details__item-value">{{ backupType }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('备份类型') }}：</span>
+      <span class="ticket-details-item-value">{{ backupType }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('备份保存时间') }}：</span>
-      <span class="ticket-details__item-value">{{ backupTime }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('备份保存时间') }}：</span>
+      <span class="ticket-details-item-value">{{ backupTime }}</span>
     </div>
   </div>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/HATruncate.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/HATruncate.vue
index b214736846..19536e1b73 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/HATruncate.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/HATruncate.vue
@@ -12,14 +12,13 @@
 -->
 
 <template>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('安全模式') }}：</span>
-      <span class="ticket-details__item-value">{{ isSafeMode ? t('是') : t('否') }}</span>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('安全模式') }}：</span>
+      <span class="ticket-details-item-value">{{ isSafeMode ? t('是') : t('否') }}</span>
     </div>
   </div>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/MasterFailOver.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/MasterFailOver.vue
index 3e2c315484..3ee5dc176d 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/MasterFailOver.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/MasterFailOver.vue
@@ -13,9 +13,24 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
-    :data="dataList" />
+    :data="tableData" />
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('检查业务来源的连接') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.details.is_check_process ? t('是') : t('否') }}</span>
+    </div>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('检查主从同步延迟') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.details.is_check_delay ? t('是') : t('否') }}</span>
+    </div>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('检查主从数据校验结果') }}：</span>
+      <span class="ticket-details-item-value">
+        {{ ticketDetails.details.is_verify_checksum ? t('是') : t('否') }}
+      </span>
+    </div>
+  </div>
 </template>
 
 <script setup lang="tsx">
@@ -44,38 +59,38 @@
    *  MySQL 主故障切换
    */
 
-  const columns: any = [{
-    label: t('集群ID'),
-    field: 'cluster_ids',
-    render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
-  }, {
-    label: t('集群名称'),
-    field: 'immute_domain',
-    showOverflowTooltip: false,
-    render: ({ data }: { data: any }) => (
-      <div class="cluster-name text-overflow"
-        v-overflow-tips={{
-          content: `
-            <p>${t('域名')}：${data.immute_domain}</p>
-            ${data.name ? `<p>${('集群别名')}：${data.name}</p>` : null}
-          `,
-          allowHTML: true,
-      }}>
-        <span>{data.immute_domain}</span><br />
-        <span class="cluster-name__alias">{data.name}</span>
-      </div>
-    ),
-  }, {
-    label: t('故障主库IP'),
-    field: 'master_ip',
-    render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
-  }, {
-    label: t('从库IP'),
-    field: 'slave_ip',
-    render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
-  }];
+  const columns = [
+    {
+      label: t('集群名称'),
+      field: 'immute_domain',
+      showOverflowTooltip: false,
+      render: ({ data }: { data: any }) => (
+        <div class="cluster-name text-overflow"
+          v-overflow-tips={{
+            content: `
+              <p>${t('域名')}：${data.immute_domain}</p>
+              ${data.name ? `<p>${('集群别名')}：${data.name}</p>` : null}
+            `,
+            allowHTML: true,
+        }}>
+          <span>{data.immute_domain}</span><br />
+          <span class="cluster-name__alias">{data.name}</span>
+        </div>
+      ),
+    },
+    {
+      label: t('故障主库IP'),
+      field: 'master_ip',
+      render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
+      },
+    {
+      label: t('从库IP'),
+      field: 'slave_ip',
+      render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
+    }
+  ];
 
-  const dataList = computed(() => {
+  const tableData = computed(() => {
     const list: dataItem[] = [];
     const infosData = props.ticketDetails?.details?.infos || [];
     const clusterIds = props.ticketDetails?.details?.clusters || {};
@@ -98,5 +113,5 @@
 </script>
 
 <style lang="less" scoped>
-  @import '@views/tickets/common/styles/DetailsTable.less';
+  @import '@views/tickets/common/styles/ticketDetails.less';
 </style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/MasterSlaveSwitch.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/MasterSlaveSwitch.vue
index 2eb5038d6e..704dbc60f0 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/MasterSlaveSwitch.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/MasterSlaveSwitch.vue
@@ -13,9 +13,24 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
-    :data="dataList" />
+    :data="tableData" />
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('检查业务来源的连接') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.details.is_check_process ? t('是') : t('否') }}</span>
+    </div>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('检查主从同步延迟') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.details.is_check_delay ? t('是') : t('否') }}</span>
+    </div>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('检查主从数据校验结果') }}：</span>
+      <span class="ticket-details-item-value">
+        {{ ticketDetails.details.is_verify_checksum ? t('是') : t('否') }}
+      </span>
+    </div>
+  </div>
 </template>
 
 <script setup lang="tsx">
@@ -44,38 +59,38 @@
    *  MySQL 主从互换
    */
 
-  const columns: any = [{
-    label: t('集群ID'),
-    field: 'cluster_ids',
-    render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
-  }, {
-    label: t('集群名称'),
-    field: 'immute_domain',
-    showOverflowTooltip: false,
-    render: ({ data }: { data: any }) => (
-      <div class="cluster-name text-overflow"
-        v-overflow-tips={{
-          content: `
-            <p>${t('域名')}：${data.immute_domain}</p>
-            ${data.name ? `<p>${('集群别名')}：${data.name}</p>` : null}
-          `,
-          allowHTML: true,
-      }}>
-        <span>{data.immute_domain}</span><br />
-        <span class="cluster-name__alias">{data.name}</span>
-      </div>
-    ),
-  }, {
-    label: t('目标主库IP'),
-    field: 'master_ip',
-    render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
-  }, {
-    label: t('目标从库IP'),
-    field: 'slave_ip',
-    render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
-  }];
+  const columns: any = [
+    {
+      label: t('集群名称'),
+      field: 'immute_domain',
+      showOverflowTooltip: false,
+      render: ({ data }: { data: any }) => (
+        <div class="cluster-name text-overflow"
+          v-overflow-tips={{
+            content: `
+              <p>${t('域名')}：${data.immute_domain}</p>
+              ${data.name ? `<p>${('集群别名')}：${data.name}</p>` : null}
+            `,
+            allowHTML: true,
+        }}>
+          <span>{data.immute_domain}</span><br />
+          <span class="cluster-name__alias">{data.name}</span>
+        </div>
+      ),
+    },
+    {
+      label: t('目标主库IP'),
+      field: 'master_ip',
+      render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
+    },
+    {
+      label: t('目标从库IP'),
+      field: 'slave_ip',
+      render: ({ cell }: { cell: [] }) => <span>{cell || '--'}</span>,
+    }
+  ];
 
-  const dataList = computed(() => {
+  const tableData = computed(() => {
     const list: dataItem[] = [];
     const infosData = props.ticketDetails?.details?.infos || [];
     const clusterIds = props.ticketDetails?.details?.clusters || {};
@@ -98,5 +113,5 @@
 </script>
 
 <style lang="less" scoped>
-  @import '@views/tickets/common/styles/DetailsTable.less';
+  @import '@views/tickets/common/styles/ticketDetails.less';
 </style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/MigrateCluster.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/MigrateCluster.vue
index 1873583b84..656e09527c 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/MigrateCluster.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/MigrateCluster.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/OpenArea.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/OpenArea.vue
index f5ae1c1091..9107908443 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/OpenArea.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/OpenArea.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="tableData" />
 </template>
@@ -48,7 +47,7 @@
   }, {} as Record<string, MysqlOpenAreaDetails['rules_set'][number]>);
 
   const tableData = computed(() => _.flatMap(props.ticketDetails.details.config_data.map((item) => {
-    const clusterName = clustersMap[item.cluster_id].immute_domain;
+    const clusterName = clustersMap[item.cluster_id]?.immute_domain;
     return item.execute_objects.map(executeObject => ({
       targetCluster: clusterName,
       newDb: executeObject.target_db,
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Partition.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Partition.vue
index 9b3aa1819b..647b4b0622 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Partition.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Partition.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="tableData" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ProxyAdd.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ProxyAdd.vue
index 310121f145..125c6c4b5b 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ProxyAdd.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ProxyAdd.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ProxySwitch.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ProxySwitch.vue
index 23cbb736c7..9b9c12d23d 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ProxySwitch.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/ProxySwitch.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Rename.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Rename.vue
index 543858c238..e523df64fc 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Rename.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/Rename.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/RestoreLocalSlave.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/RestoreLocalSlave.vue
index 598e0a8f0b..1baa24068a 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/RestoreLocalSlave.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/RestoreLocalSlave.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="localSlaveColumns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/RestoreSlave.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/RestoreSlave.vue
index 1ab4daf138..467703f198 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/RestoreSlave.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/RestoreSlave.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/SlaveAdd.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/SlaveAdd.vue
index 65544c3452..3e5c049632 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/SlaveAdd.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/SlaveAdd.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/TableBackup.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/TableBackup.vue
index 851169a6e5..1af8c5dade 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/TableBackup.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/TableBackup.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/authorize-rule/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/authorize-rule/Index.vue
index 07227601ce..f65c104ec8 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/authorize-rule/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/authorize-rule/Index.vue
@@ -21,7 +21,7 @@
   </div>
   <div
     v-else
-    class="ticket-details__list">
+    class="ticket-details-list">
     <span>{{ t('Excel文件') }}：</span>
     <div>
       <i class="db-icon-excel" />
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/import-sql-file/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/import-sql-file/Index.vue
index a2fa603247..ff9087371f 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/import-sql-file/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/import-sql-file/Index.vue
@@ -12,39 +12,39 @@
 -->
 
 <template>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('所属业务') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails.bk_biz_name }}</span>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('所属业务') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.bk_biz_name }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('业务英文名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails.db_app_abbr }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('业务英文名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.db_app_abbr }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('SQL来源') }}：</span>
-      <span class="ticket-details__item-value">{{ importModeType }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('SQL来源') }}：</span>
+      <span class="ticket-details-item-value">{{ importModeType }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('字符集') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails.details.charset }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('字符集') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.details.charset }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('执行前备份') }}：</span>
-      <span class="ticket-details__item-value">{{ isBackup }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('执行前备份') }}：</span>
+      <span class="ticket-details-item-value">{{ isBackup }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('执行模式') }}：</span>
-      <span class="ticket-details__item-value sql-mode-execute">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('执行模式') }}：</span>
+      <span class="ticket-details-item-value sql-mode-execute">
         <i :class="ticketModeData.icon" />
         <span v-bk-tooltips="ticketModeData.tips">{{ ticketModeData.text }}</span>
       </span>
     </div>
     <div
       v-if="ticketDetails.details.ticket_mode.trigger_time"
-      class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('执行时间') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails.details.ticket_mode.trigger_time }}</span>
+      class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('执行时间') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.details.ticket_mode.trigger_time }}</span>
     </div>
   </div>
   <div class="mysql-table">
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/openarea/components/TargetCluster.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/openarea/components/TargetCluster.vue
index be612c042f..d8056ebfea 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/openarea/components/TargetCluster.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/openarea/components/TargetCluster.vue
@@ -54,7 +54,7 @@
     _.sortBy(
       _.flatMap(
         props.ticketDetails.details.config_data.map((item) => {
-          const clusterName = clustersMap[item.cluster_id].immute_domain;
+          const clusterName = clustersMap[item.cluster_id]?.immute_domain;
           return item.execute_objects.map((executeObject) => ({
             targetCluster: clusterName,
             newDb: executeObject.target_db,
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/Index.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/Index.vue
index 9877bfcbd8..69549cc4d2 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/Index.vue
@@ -12,15 +12,14 @@
 -->
 
 <template>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('构造类型') }}：</span>
-      <span class="ticket-details__item-value">{{ renderData.label }}</span>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('构造类型') }}：</span>
+      <span class="ticket-details-item-value">{{ renderData.label }}</span>
     </div>
   </div>
   <component
     :is="renderData.tableCom"
-    class="details-table"
     :ticket-details="ticketDetails" />
 </template>
 
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackExistCluster.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackExistCluster.vue
index 14c5c6f9d6..1099bfc55e 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackExistCluster.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackExistCluster.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="tableData" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackNewCluster.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackNewCluster.vue
index 0b05abd8b0..51755394d0 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackNewCluster.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackNewCluster.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="tableData" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackOriginCluster.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackOriginCluster.vue
index 397c06e5b3..351d78b036 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackOriginCluster.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/rollback/components/RollbackOriginCluster.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="tableData" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionLocalUpgrade.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionLocalUpgrade.vue
index 1219c3f56c..fc32fc8a23 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionLocalUpgrade.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionLocalUpgrade.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionMigrateUpgrade.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionMigrateUpgrade.vue
index 01b300698c..40da949f6a 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionMigrateUpgrade.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionMigrateUpgrade.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionProxyUpgrade.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionProxyUpgrade.vue
index 7e8baf09ca..4172a28714 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionProxyUpgrade.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/version-upgrade/VersionProxyUpgrade.vue
@@ -13,7 +13,6 @@
 
 <template>
   <DbOriginalTable
-    class="details-table"
     :columns="columns"
     :data="dataList" />
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterShardUpdate.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterShardUpdate.vue
index 462bafb6e3..f6ea6721e5 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterShardUpdate.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterShardUpdate.vue
@@ -13,10 +13,10 @@
 
 <template>
   <div
-    class="ticket-details__item"
+    class="ticket-details-item"
     style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('变更信息') }}：</span>
-    <span class="ticket-details__item-value">
+    <span class="ticket-details-item-label">{{ t('变更信息') }}：</span>
+    <span class="ticket-details-item-value">
       <BkLoading :loading="loading">
         <DbOriginalTable
           :columns="columns"
@@ -25,18 +25,18 @@
     </span>
   </div>
 
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('校验与修复类型') }}：</span>
-      <span class="ticket-details__item-value">
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('校验与修复类型') }}：</span>
+      <span class="ticket-details-item-value">
         {{ repairAndVerifyTypesMap[ticketDetails.details.data_check_repair_setting.type] }}
       </span>
     </div>
     <div
       v-if="ticketDetails.details.data_check_repair_setting.type !== 'no_check_no_repair'"
-      class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('校验与修复类型') }}：</span>
-      <span class="ticket-details__item-value">
+      class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('校验与修复类型') }}：</span>
+      <span class="ticket-details-item-value">
         {{ repairAndVerifyFrequencyMap[ticketDetails.details.data_check_repair_setting.execution_frequency] }}
       </span>
     </div>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterTypeUpdate.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterTypeUpdate.vue
index 69390e7e75..af9ba6bc60 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterTypeUpdate.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterTypeUpdate.vue
@@ -13,10 +13,10 @@
 
 <template>
   <div
-    class="ticket-details__item"
+    class="ticket-details-item"
     style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('变更信息') }}：</span>
-    <span class="ticket-details__item-value">
+    <span class="ticket-details-item-label">{{ t('变更信息') }}：</span>
+    <span class="ticket-details-item-value">
       <BkLoading :loading="loading">
         <DbOriginalTable
           :columns="columns"
@@ -24,18 +24,18 @@
       </BkLoading>
     </span>
   </div>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('校验与修复类型') }}：</span>
-      <span class="ticket-details__item-value">
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('校验与修复类型') }}：</span>
+      <span class="ticket-details-item-value">
         {{ repairAndVerifyTypesMap[ticketDetails.details.data_check_repair_setting.type] }}
       </span>
     </div>
     <div
       v-if="ticketDetails.details.data_check_repair_setting.type !== 'no_check_no_repair'"
-      class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('校验与修复频率设置') }}：</span>
-      <span class="ticket-details__item-value">
+      class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('校验与修复频率设置') }}：</span>
+      <span class="ticket-details-item-value">
         {{ repairAndVerifyFrequencyMap[ticketDetails.details.data_check_repair_setting.execution_frequency] }}
       </span>
     </div>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/DataCheckAndRepair.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/DataCheckAndRepair.vue
index dcafbb8565..e0c6d1100c 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/DataCheckAndRepair.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/DataCheckAndRepair.vue
@@ -15,40 +15,40 @@
   <DbOriginalTable
     :columns="columns"
     :data="ticketDetails.details.infos" />
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('执行模式') }}：</span>
-      <span class="ticket-details__item-value">{{ executeModesMap[ticketDetails.details.execute_mode] }}</span>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('执行模式') }}：</span>
+      <span class="ticket-details-item-value">{{ executeModesMap[ticketDetails.details.execute_mode] }}</span>
     </div>
     <div
       v-if="ticketDetails.details.execute_mode === 'scheduled_execution'"
-      class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('指定执行时间') }}：</span>
-      <span class="ticket-details__item-value">
+      class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('指定执行时间') }}：</span>
+      <span class="ticket-details-item-value">
         {{ utcDisplayTime(ticketDetails.details.specified_execution_time) }}
       </span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('指定停止时间') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('指定停止时间') }}：</span>
+      <span class="ticket-details-item-value">
         {{ utcDisplayTime(ticketDetails.details.check_stop_time) }}
       </span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('一直保持校验修复') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('一直保持校验修复') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.keep_check_and_repair ? t('是') : t('否') }}
       </span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('修复数据') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('修复数据') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.data_repair_enabled ? t('是') : t('否') }}
       </span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('修复模式') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('修复模式') }}：</span>
+      <span class="ticket-details-item-value">
         {{ repairModesMap[ticketDetails.details.repair_mode] }}
       </span>
     </div>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/DataCopy.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/DataCopy.vue
index 710abff80d..05c9b4220e 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/DataCopy.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/DataCopy.vue
@@ -13,10 +13,10 @@
 
 <template>
   <div
-    class="ticket-details__item"
+    class="ticket-details-item"
     style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('复制信息') }}：</span>
-    <span class="ticket-details__item-value">
+    <span class="ticket-details-item-label">{{ t('复制信息') }}：</span>
+    <span class="ticket-details-item-value">
       <BkLoading :loading="loading">
         <DbOriginalTable
           :columns="columns"
@@ -25,39 +25,39 @@
     </span>
   </div>
 
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('复制类型') }}：</span>
-      <span class="ticket-details__item-value">{{ copyTypesMap[ticketDetails.details.dts_copy_type] }}</span>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('复制类型') }}：</span>
+      <span class="ticket-details-item-value">{{ copyTypesMap[ticketDetails.details.dts_copy_type] }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('写入类型') }}：</span>
-      <span class="ticket-details__item-value">{{ writeTypesMap[ticketDetails.details.write_mode] }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('写入类型') }}：</span>
+      <span class="ticket-details-item-value">{{ writeTypesMap[ticketDetails.details.write_mode] }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('断开设置') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('断开设置') }}：</span>
+      <span class="ticket-details-item-value">
         {{ disconnectTypesMap[ticketDetails.details.sync_disconnect_setting.type] }}
       </span>
     </div>
     <template v-if="ticketDetails.details.sync_disconnect_setting.type !== 'auto_disconnect_after_replication'">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('提醒频率') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('提醒频率') }}：</span>
+        <span class="ticket-details-item-value">
           {{ remindFrequencyTypesMap[ticketDetails.details.sync_disconnect_setting.reminder_frequency] }}
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('校验与修复类型') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('校验与修复类型') }}：</span>
+        <span class="ticket-details-item-value">
           {{ repairAndVerifyTypesMap[ticketDetails.details.data_check_repair_setting.type] }}
         </span>
       </div>
       <div
         v-if="ticketDetails.details.data_check_repair_setting.type !== 'no_check_no_repair'"
-        class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('校验与修复频率设置') }}：</span>
-        <span class="ticket-details__item-value">
+        class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('校验与修复频率设置') }}：</span>
+        <span class="ticket-details-item-value">
           {{ repairAndVerifyFrequencyTypesMap[ticketDetails.details.data_check_repair_setting.execution_frequency] }}
         </span>
       </div>
@@ -235,17 +235,18 @@
   };
 
   const columns = computed(() => {
+    const newColumns = [...basicColumns];
     switch (props.ticketDetails.details.dts_copy_type) {
     case 'copy_to_other_system':
-      return basicColumns;
+      return newColumns;
     case 'diff_app_diff_cluster':
-      basicColumns.splice(1, 0, bizCloumn);
-      return basicColumns;
+      newColumns.splice(1, 0, bizCloumn);
+      return newColumns;
     case 'one_app_diff_cluster':
-      return basicColumns;
+      return newColumns;
     case 'user_built_to_dbm':
-      basicColumns.splice(1, 0, clusterTypeColum);
-      return basicColumns;
+      newColumns.splice(1, 0, clusterTypeColum);
+      return newColumns;
     default:
       return [];
     }
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/Details.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/Details.vue
index 4dc4bc4066..3316263e9c 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/Details.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/Details.vue
@@ -12,73 +12,73 @@
 -->
 
 <template>
-  <strong class="ticket-details__info-title">{{ t('业务信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('所属业务') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ t('业务信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('所属业务') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('业务英文名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('业务英文名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('集群名称') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('集群名称') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('集群别名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('集群别名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ t('地域要求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('数据库部署地域') }}：</span>
-      <span class="ticket-details__item-value">{{ cityName }}</span>
+  <strong class="ticket-details-info-title">{{ t('地域要求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('数据库部署地域') }}：</span>
+      <span class="ticket-details-item-value">{{ cityName }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ t('数据库部署信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('容灾要求') }}：</span>
-      <span class="ticket-details__item-value">{{ affinity }}</span>
+  <strong class="ticket-details-info-title">{{ t('数据库部署信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('容灾要求') }}：</span>
+      <span class="ticket-details-item-value">{{ affinity }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ t('部署需求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('部署架构') }}：</span>
-      <span class="ticket-details__item-value">{{ getClusterType() }}</span>
+  <strong class="ticket-details-info-title">{{ t('部署需求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('部署架构') }}：</span>
+      <span class="ticket-details-item-value">{{ getClusterType() }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('版本') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('版本') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.db_version || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('服务器') }}：</span>
-      <span class="ticket-details__item-value">{{ getIpSource() }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('服务器') }}：</span>
+      <span class="ticket-details-item-value">{{ getIpSource() }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('服务器') }}：</span>
-      <span class="ticket-details__item-value">{{ getIpSource() }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('服务器') }}：</span>
+      <span class="ticket-details-item-value">{{ getIpSource() }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('访问端口') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.proxy_port }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('访问端口') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.proxy_port }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('备注') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.remark || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('备注') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.remark || '--' }}</span>
     </div>
     <template v-if="ticketDetails?.details?.ip_source === redisIpSources.manual_input.id">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('申请容量') }}：</span>
-        <span class="ticket-details__item-value">{{ getCapSpecDisplay() }}</span>
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('申请容量') }}：</span>
+        <span class="ticket-details-item-value">{{ getCapSpecDisplay() }}</span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">Proxy：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">Proxy：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('proxy') > 0"
             class="host-nums"
@@ -89,9 +89,9 @@
           <template v-else>--</template>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">Master：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">Master：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('master') > 0"
             class="host-nums"
@@ -102,9 +102,9 @@
           <template v-else>--</template>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">Slave：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">Slave：</span>
+        <span class="ticket-details-item-value">
           <span
             v-if="getServiceNums('slave') > 0"
             class="host-nums"
@@ -115,15 +115,15 @@
           <template v-else>--</template>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('Proxy端口') }}：</span>
-        <span class="ticket-details__item-value">{{ ticketDetails?.details?.proxy_port || '--' }}</span>
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('Proxy端口') }}：</span>
+        <span class="ticket-details-item-value">{{ ticketDetails?.details?.proxy_port || '--' }}</span>
       </div>
     </template>
     <template v-else>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('Proxy存储资源规格') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('Proxy存储资源规格') }}：</span>
+        <span class="ticket-details-item-value">
           <BkPopover
             placement="top"
             theme="light">
@@ -138,9 +138,9 @@
           </BkPopover>
         </span>
       </div>
-      <div class="ticket-details__item whole mt-8">
-        <span class="ticket-details__item-label">{{ t('集群部署方案') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item whole mt-8">
+        <span class="ticket-details-item-label">{{ t('集群部署方案') }}：</span>
+        <span class="ticket-details-item-value">
           <DbOriginalTable
             class="custom-edit-table"
             :columns="columns"
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/MasterFailover.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/MasterFailover.vue
index 5ac6fb56d9..dd8896187e 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/MasterFailover.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/MasterFailover.vue
@@ -12,20 +12,13 @@
 -->
 
 <template>
-  <div
-    class="ticket-details__item"
-    style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('需求信息') }}：</span>
-    <span class="ticket-details__item-value">
-      <DbOriginalTable
-        :columns="columns"
-        :data="tableData" />
-    </span>
-  </div>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('是否强制切换') }}：</span>
-      <span class="ticket-details__item-value">
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('是否强制切换') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.force ? t('是') : t('否') }}
       </span>
     </div>
@@ -79,7 +72,7 @@
 
   const tableData = computed(() => {
     const { infos, clusters } = props.ticketDetails.details;
-    return infos.reduce((results, item) => {
+    return infos.reduce<RowData[]>((results, item) => {
       item.pairs.forEach((pair) => {
         const obj = {
           clusterName: item.cluster_id
@@ -92,7 +85,7 @@
         results.push(obj);
       });
       return results;
-    }, [] as RowData[])
+    }, [])
   });
 </script>
 
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/RollbackDataCopy.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/RollbackDataCopy.vue
index 5078279ad8..e5938a46ad 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/RollbackDataCopy.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/RollbackDataCopy.vue
@@ -12,20 +12,13 @@
 -->
 
 <template>
-  <div
-    class="ticket-details__item"
-    style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('需求信息') }}：</span>
-    <span class="ticket-details__item-value">
-      <DbOriginalTable
-        :columns="columns"
-        :data="tableData" />
-    </span>
-  </div>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('写入类型') }}：</span>
-      <span class="ticket-details__item-value">{{ writeTypesMap[ticketDetails.details.write_mode] }}</span>
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('写入类型') }}：</span>
+      <span class="ticket-details-item-value">{{ writeTypesMap[ticketDetails.details.write_mode] }}</span>
     </div>
   </div>
 </template>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AuthorizeRules.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AuthorizeRules.vue
index a50d57a086..0307354a1e 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AuthorizeRules.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/AuthorizeRules.vue
@@ -13,10 +13,10 @@
 
 <template>
   <div v-if="isAddAuth">
-    <div class="ticket-details__list">
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('访问源') }}：</span>
-        <span class="ticket-details__item-value">
+    <div class="ticket-details-list">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('访问源') }}：</span>
+        <span class="ticket-details-item-value">
           <BkButton
             text
             theme="primary"
@@ -26,9 +26,9 @@
           <span>{{ t('台') }}</span>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('目标集群') }}：</span>
-        <span class="ticket-details__item-value">
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('目标集群') }}：</span>
+        <span class="ticket-details-item-value">
           <BkButton
             text
             theme="primary"
@@ -38,12 +38,12 @@
           <span>{{ t('个') }}（{{ clusterType }}）</span>
         </span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('账号名') }}：</span>
-        <span class="ticket-details__item-value">{{ authorizeData?.user || '--' }}</span>
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('账号名') }}：</span>
+        <span class="ticket-details-item-value">{{ authorizeData?.user || '--' }}</span>
       </div>
-      <div class="ticket-details__item">
-        <span class="ticket-details__item-label">{{ t('访问DB') }}：</span>
+      <div class="ticket-details-item">
+        <span class="ticket-details-item-label">{{ t('访问DB') }}：</span>
         <span>
           <BkTag
             v-for="(item, index) in authorizeData?.access_dbs || []"
@@ -61,7 +61,7 @@
     </div>
   </div>
   <div v-else>
-    <div class="ticket-details__list">
+    <div class="ticket-details-list">
       <span>{{ t('Excel文件') }}：</span>
       <div class="excel-link">
         <DbIcon
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/CheckSum.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/CheckSum.vue
index 8fc6ef6511..b0a36e86f8 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/CheckSum.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/CheckSum.vue
@@ -12,41 +12,31 @@
 -->
 
 <template>
-  <div
-    class="ticket-details__item"
-    style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('需求信息') }}：</span>
-    <span class="ticket-details__item-value">
-      <BkLoading :loading="loading">
-        <DbOriginalTable
-          :columns="columns"
-          :data="tableData" />
-      </BkLoading>
-    </span>
-  </div>
-
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('指定执行时间') }}：</span>
-      <span class="ticket-details__item-value">{{ utcDisplayTime(ticketDetails.details.timing) }}</span>
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('指定执行时间') }}：</span>
+      <span class="ticket-details-item-value">{{ utcDisplayTime(ticketDetails.details.timing) }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('全局超时时间（h）') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('全局超时时间（h）') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.runtime_hour }}
       </span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('修复数据') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('修复数据') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.data_repair.is_repair ? t('是') : t('否') }}
       </span>
     </div>
     <div
       v-if="ticketDetails.details.data_repair.is_repair"
-      class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('修复模式') }}：</span>
-      <span class="ticket-details__item-value">
+      class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('修复模式') }}：</span>
+      <span class="ticket-details-item-value">
         {{ repairModesMap[ticketDetails.details.data_repair.mode] }}
       </span>
     </div>
@@ -132,7 +122,7 @@
     },
   ];
 
-  const { loading } = useRequest(getSpiderListByBizId, {
+  useRequest(getSpiderListByBizId, {
     defaultParams: [
       {
         bk_biz_id: props.ticketDetails.bk_biz_id,
@@ -142,15 +132,12 @@
       if (r.results.length < 1) {
         return;
       }
-      const clusterMap = r.results.reduce(
-        (obj, item) => {
-          Object.assign(obj, { [item.id]: item.master_domain });
-          return obj;
-        },
-        {} as Record<number, string>,
-      );
+      const clusterMap = r.results.reduce<Record<number, string>>((obj, item) => {
+        Object.assign(obj, { [item.id]: item.master_domain });
+        return obj;
+      }, {});
 
-      tableData.value = infos.reduce((results, item) => {
+      tableData.value = infos.reduce<RowData[]>((results, item) => {
         item.backup_infos.forEach((row) => {
           const obj = {
             clusterName: clusterMap[item.cluster_id],
@@ -165,7 +152,7 @@
           results.push(obj);
         });
         return results;
-      }, [] as RowData[]);
+      }, []);
     },
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Destroy.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Destroy.vue
index 51fa2b3cf7..23fefffd56 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Destroy.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Destroy.vue
@@ -12,23 +12,13 @@
 -->
 
 <template>
-  <div
-    class="ticket-details__item"
-    style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('需求信息') }}：</span>
-    <span class="ticket-details__item-value">
-      <BkLoading :loading="loading">
-        <DbOriginalTable
-          :columns="columns"
-          :data="tableData" />
-      </BkLoading>
-    </span>
-  </div>
-
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('强制实例下架') }}：</span>
-      <span class="ticket-details__item-value">
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('强制实例下架') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.force ? t('是') : t('否') }}
       </span>
     </div>
@@ -65,7 +55,7 @@
     },
   ];
 
-  const { loading } = useRequest(getSpiderListByBizId, {
+  useRequest(getSpiderListByBizId, {
     defaultParams: [
       {
         bk_biz_id: props.ticketDetails.bk_biz_id,
@@ -77,21 +67,18 @@
       if (r.results.length < 1) {
         return;
       }
-      const clusterMap = r.results.reduce(
-        (obj, item) => {
-          Object.assign(obj, { [item.id]: item.master_domain });
-          return obj;
-        },
-        {} as Record<number, string>,
-      );
+      const clusterMap = r.results.reduce<Record<number, string>>((obj, item) => {
+        Object.assign(obj, { [item.id]: item.master_domain });
+        return obj;
+      }, {});
 
-      tableData.value = list.reduce((results, clusterId) => {
+      tableData.value = list.reduce<RowData[]>((results, clusterId) => {
         const obj = {
           clusterName: clusterMap[clusterId],
         };
         results.push(obj);
         return results;
-      }, [] as RowData[]);
+      }, []);
     },
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Details.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Details.vue
index 338860fad8..a3cec63105 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Details.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Details.vue
@@ -12,64 +12,64 @@
 -->
 
 <template>
-  <strong class="ticket-details__info-title">{{ t('业务信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('所属业务') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ t('业务信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('所属业务') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.bk_biz_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('业务英文名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('业务英文名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.db_app_abbr || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('集群名称') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('集群名称') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('集群别名') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('集群别名') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.cluster_alias || '--' }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('地域要求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('数据库部署地域') }}：</span>
-      <span class="ticket-details__item-value">{{ cityName }}</span>
+  <strong class="ticket-details-info-title">{{ $t('地域要求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('数据库部署地域') }}：</span>
+      <span class="ticket-details-item-value">{{ cityName }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ $t('数据库部署信息') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ $t('容灾要求') }}：</span>
-      <span class="ticket-details__item-value">{{ affinity }}</span>
+  <strong class="ticket-details-info-title">{{ $t('数据库部署信息') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ $t('容灾要求') }}：</span>
+      <span class="ticket-details-item-value">{{ affinity }}</span>
     </div>
   </div>
-  <strong class="ticket-details__info-title">{{ t('部署需求') }}</strong>
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('DB模块') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.db_module_name || '--' }}</span>
+  <strong class="ticket-details-info-title">{{ t('部署需求') }}</strong>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('DB模块') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.db_module_name || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('MySQL版本') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.version?.db_version || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('MySQL版本') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.version?.db_version || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('Spider版本') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.version?.spider_version || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('Spider版本') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.version?.spider_version || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('访问端口') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.details?.spider_port || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('访问端口') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.details?.spider_port || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('备注') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails?.remark || '--' }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('备注') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails?.remark || '--' }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('接入层Master') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('接入层Master') }}：</span>
+      <span class="ticket-details-item-value">
         <BkPopover
           disable-outside-click
           :offset="16"
@@ -86,9 +86,9 @@
         </BkPopover>
       </span>
     </div>
-    <div class="ticket-details__item whole mt-8">
-      <span class="ticket-details__item-label">{{ t('集群部署方案') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item whole mt-8">
+      <span class="ticket-details-item-label">{{ t('集群部署方案') }}：</span>
+      <span class="ticket-details-item-value">
         <DbOriginalTable
           class="custom-edit-table"
           :columns="columns"
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Enable.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Enable.vue
index 013b0c9fe8..07ac944b28 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Enable.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/Enable.vue
@@ -12,23 +12,13 @@
 -->
 
 <template>
-  <div
-    class="ticket-details__item"
-    style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('需求信息') }}：</span>
-    <span class="ticket-details__item-value">
-      <BkLoading :loading="loading">
-        <DbOriginalTable
-          :columns="columns"
-          :data="tableData" />
-      </BkLoading>
-    </span>
-  </div>
-
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('只启用只读集群') }}：</span>
-      <span class="ticket-details__item-value">
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('只启用只读集群') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.is_only_add_slave_domain ? t('是') : t('否') }}
       </span>
     </div>
@@ -65,7 +55,7 @@
     },
   ];
 
-  const { loading } = useRequest(getSpiderListByBizId, {
+  useRequest(getSpiderListByBizId, {
     defaultParams: [
       {
         bk_biz_id: props.ticketDetails.bk_biz_id,
@@ -77,21 +67,18 @@
       if (r.results.length < 1) {
         return;
       }
-      const clusterMap = r.results.reduce(
-        (obj, item) => {
-          Object.assign(obj, { [item.id]: item.master_domain });
-          return obj;
-        },
-        {} as Record<number, string>,
-      );
+      const clusterMap = r.results.reduce<Record<number, string>>((obj, item) => {
+        Object.assign(obj, { [item.id]: item.master_domain });
+        return obj;
+      }, {});
 
-      tableData.value = list.reduce((results, clusterId) => {
+      tableData.value = list.reduce<RowData[]>((results, clusterId) => {
         const obj = {
           clusterName: clusterMap[clusterId],
         };
         results.push(obj);
         return results;
-      }, [] as RowData[]);
+      }, []);
     },
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/FullBackup.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/FullBackup.vue
index 04b4bf7f43..37ef01e752 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/FullBackup.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/FullBackup.vue
@@ -12,29 +12,19 @@
 -->
 
 <template>
-  <div
-    class="ticket-details__item"
-    style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('需求信息') }}：</span>
-    <span class="ticket-details__item-value">
-      <BkLoading :loading="loading">
-        <DbOriginalTable
-          :columns="columns"
-          :data="tableData" />
-      </BkLoading>
-    </span>
-  </div>
-
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('备份类型') }}：</span>
-      <span class="ticket-details__item-value">{{
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('备份类型') }}：</span>
+      <span class="ticket-details-item-value">{{
         infos.backup_type === 'physical' ? t('物理备份') : t('逻辑备份')
       }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('备份保存时间') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('备份保存时间') }}：</span>
+      <span class="ticket-details-item-value">
         {{ backupTime }}
       </span>
     </div>
@@ -98,7 +88,7 @@
     return fileTagMap[fileTag];
   });
 
-  const { loading } = useRequest(getSpiderListByBizId, {
+  useRequest(getSpiderListByBizId, {
     defaultParams: [
       {
         bk_biz_id: props.ticketDetails.bk_biz_id,
@@ -110,21 +100,18 @@
       if (r.results.length < 1) {
         return;
       }
-      const clusterMap = r.results.reduce(
-        (obj, item) => {
-          Object.assign(obj, { [item.id]: item.master_domain });
-          return obj;
-        },
-        {} as Record<number, string>,
-      );
-      tableData.value = infos.clusters.reduce((results, item) => {
+      const clusterMap = r.results.reduce<Record<number, string>>((obj, item) => {
+        Object.assign(obj, { [item.id]: item.master_domain });
+        return obj;
+      }, {});
+      tableData.value = infos.clusters.reduce<RowData[]>((results, item) => {
         const obj = {
           clusterName: clusterMap[item.cluster_id],
           position: item.backup_local,
         };
         results.push(obj);
         return results;
-      }, [] as RowData[]);
+      }, []);
     },
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/MasterFailOver.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/MasterFailOver.vue
new file mode 100644
index 0000000000..4129136a87
--- /dev/null
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/MasterFailOver.vue
@@ -0,0 +1,81 @@
+<!--
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+-->
+
+<template>
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('检查业务来源的连接') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.details.is_check_process ? t('是') : t('否') }}</span>
+    </div>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('检查主从同步延迟') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.details.is_check_delay ? t('是') : t('否') }}</span>
+    </div>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('检查主从数据校验结果') }}：</span>
+      <span class="ticket-details-item-value">
+        {{ ticketDetails.details.is_verify_checksum ? t('是') : t('否') }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+
+  import type { SpiderMasterSlaveSwitchDetails, TicketDetails } from '@services/types/ticket';
+
+  interface Props {
+    ticketDetails: TicketDetails<SpiderMasterSlaveSwitchDetails>;
+  }
+
+  interface RowData {
+    masterIp: string;
+    slaveIp: string;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  const { infos } = props.ticketDetails.details;
+  const tableData = infos.reduce((results, item) => {
+    item.switch_tuples.forEach((tuple) => {
+      results.push({
+        masterIp: tuple.master.ip,
+        slaveIp: tuple.slave.ip,
+      });
+    });
+    return results;
+  }, [] as RowData[]);
+
+  const columns = [
+    {
+      label: t('故障主库主机'),
+      field: 'masterIp',
+      showOverflowTooltip: true,
+    },
+    {
+      label: t('从库主机'),
+      field: 'slaveIp',
+      showOverflowTooltip: true,
+    },
+  ];
+</script>
+<style lang="less" scoped>
+  @import '@views/tickets/common/styles/ticketDetails.less';
+</style>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/MasterSlaveSwitch.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/MasterSlaveSwitch.vue
index e1e2373411..08e00d6b49 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/MasterSlaveSwitch.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/MasterSlaveSwitch.vue
@@ -12,29 +12,22 @@
 -->
 
 <template>
-  <div
-    class="ticket-details__item"
-    style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('需求信息') }}：</span>
-    <span class="ticket-details__item-value">
-      <DbOriginalTable
-        :columns="columns"
-        :data="tableData" />
-    </span>
-  </div>
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
 
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('检查业务来源的连接') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails.details.is_check_process ? t('是') : t('否') }}</span>
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('检查业务来源的连接') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.details.is_check_process ? t('是') : t('否') }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('检查主从同步延迟') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails.details.is_check_delay ? t('是') : t('否') }}</span>
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('检查主从同步延迟') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.details.is_check_delay ? t('是') : t('否') }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('检查主从数据校验结果') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('检查主从数据校验结果') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.is_verify_checksum ? t('是') : t('否') }}
       </span>
     </div>
@@ -73,7 +66,7 @@
 
   const columns = [
     {
-      label: t('故障主库主机'),
+      label: t('主库主机'),
       field: 'masterIp',
       showOverflowTooltip: true,
     },
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/NodeRebalance.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/NodeRebalance.vue
index 8bd6113d6e..29d7c6549c 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/NodeRebalance.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/NodeRebalance.vue
@@ -12,35 +12,25 @@
 -->
 
 <template>
-  <div
-    class="ticket-details__item"
-    style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('需求信息') }}：</span>
-    <span class="ticket-details__item-value">
-      <BkLoading :loading="loading">
-        <DbOriginalTable
-          :columns="columns"
-          :data="tableData" />
-      </BkLoading>
-    </span>
-  </div>
-
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('数据校验') }}：</span>
-      <span class="ticket-details__item-value">{{ ticketDetails.details.need_checksum ? t('是') : t('否') }}</span>
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('数据校验') }}：</span>
+      <span class="ticket-details-item-value">{{ ticketDetails.details.need_checksum ? t('是') : t('否') }}</span>
     </div>
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('校验时间') }}：</span>
-      <span class="ticket-details__item-value">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('校验时间') }}：</span>
+      <span class="ticket-details-item-value">
         {{ isTimer ? t('定时执行') : t('立即执行') }}
       </span>
     </div>
     <div
       v-if="isTimer"
-      class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('定时执行时间') }}：</span>
-      <span class="ticket-details__item-value">
+      class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('定时执行时间') }}：</span>
+      <span class="ticket-details-item-value">
         {{ utcDisplayTime(ticketDetails.details.trigger_checksum_time) }}
       </span>
     </div>
@@ -114,7 +104,7 @@
     },
   ];
 
-  const { loading } = useRequest(getSpiderListByBizId, {
+  useRequest(getSpiderListByBizId, {
     defaultParams: [{
       bk_biz_id: props.ticketDetails.bk_biz_id,
       offset: 0,
@@ -124,13 +114,13 @@
       if (r.results.length < 1) {
         return;
       }
-      const clusterMap = r.results.reduce((obj, item) => {
+      const clusterMap = r.results.reduce<Record<number, {clusterName: string, clusterType: string}>>((obj, item) => {
         Object.assign(obj, { [item.id]: {
           clusterName: item.master_domain,
           clusterType: item.cluster_spec.spec_cluster_type,
         } });
         return obj;
-      }, {} as Record<number, {clusterName: string, clusterType: string}>);
+      }, {});
 
       // 避免重复查询
       const clusterTypes = [...new Set(Object.values(clusterMap).map(item => item.clusterType))];
@@ -143,7 +133,6 @@
         });
         sepcMap[type] = ret.results;
       }));
-      loading.value = false;
       tableData.value = infos.map((item) => {
         const sepcList = sepcMap[clusterMap[item.cluster_id].clusterType];
         const specInfo = sepcList.find(row => row.spec_id === item.resource_spec.backend_group.spec_id);
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/SlaveDestroy.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/SlaveDestroy.vue
index 890c9f0275..e8b47dfde8 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/SlaveDestroy.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/SlaveDestroy.vue
@@ -12,23 +12,13 @@
 -->
 
 <template>
-  <div
-    class="ticket-details__item"
-    style="align-items: flex-start">
-    <span class="ticket-details__item-label">{{ t('需求信息') }}：</span>
-    <span class="ticket-details__item-value">
-      <BkLoading :loading="loading">
-        <DbOriginalTable
-          :columns="columns"
-          :data="tableData" />
-      </BkLoading>
-    </span>
-  </div>
-
-  <div class="ticket-details__list">
-    <div class="ticket-details__item">
-      <span class="ticket-details__item-label">{{ t('忽略业务连接') }}：</span>
-      <span class="ticket-details__item-value">
+  <DbOriginalTable
+    :columns="columns"
+    :data="tableData" />
+  <div class="ticket-details-list">
+    <div class="ticket-details-item">
+      <span class="ticket-details-item-label">{{ t('忽略业务连接') }}：</span>
+      <span class="ticket-details-item-value">
         {{ ticketDetails.details.is_safe ? t('是') : t('否') }}
       </span>
     </div>
@@ -65,7 +55,7 @@
     },
   ];
 
-  const { loading } = useRequest(getSpiderListByBizId, {
+  useRequest(getSpiderListByBizId, {
     defaultParams: [
       {
         bk_biz_id: props.ticketDetails.bk_biz_id,
@@ -77,21 +67,18 @@
       if (r.results.length < 1) {
         return;
       }
-      const clusterMap = r.results.reduce(
-        (obj, item) => {
-          Object.assign(obj, { [item.id]: item.master_domain });
-          return obj;
-        },
-        {} as Record<number, string>,
-      );
+      const clusterMap = r.results.reduce<Record<number, string>>((obj, item) => {
+        Object.assign(obj, { [item.id]: item.master_domain });
+        return obj;
+      }, {});
 
-      tableData.value = infos.reduce((results, clusterId) => {
+      tableData.value = infos.reduce<RowData[]>((results, clusterId) => {
         const obj = {
           clusterName: clusterMap[clusterId],
         };
         results.push(obj);
         return results;
-      }, [] as RowData[]);
+      }, []);
     },
   });
 </script>
diff --git a/dbm-ui/frontend/src/views/tickets/common/styles/DetailsTable.less b/dbm-ui/frontend/src/views/tickets/common/styles/DetailsTable.less
index 3b5d1330e8..7c04a55186 100644
--- a/dbm-ui/frontend/src/views/tickets/common/styles/DetailsTable.less
+++ b/dbm-ui/frontend/src/views/tickets/common/styles/DetailsTable.less
@@ -32,8 +32,4 @@
       color: @light-gray;
     }
   }
-}
-
-.details-table {
-  padding-left: 80px;
-}
+}
\ No newline at end of file
diff --git a/dbm-ui/frontend/src/views/tickets/common/styles/ticketDetails.less b/dbm-ui/frontend/src/views/tickets/common/styles/ticketDetails.less
index 062b9d3dfa..b5e22ecc65 100644
--- a/dbm-ui/frontend/src/views/tickets/common/styles/ticketDetails.less
+++ b/dbm-ui/frontend/src/views/tickets/common/styles/ticketDetails.less
@@ -13,17 +13,17 @@
 
 @import "@styles/mixins.less";
 
-.ticket-details {
-  &__info {
+.ticket-details-page {
+  .ticket-details-info {
     padding-left: 82px;
     font-size: @font-size-mini;
 
-    &-title {
+    .ticket-details-info-title {
       color: @title-color;
     }
   }
 
-  &__list {
+  .ticket-details-list {
     .flex-center();
 
     max-width: 1000px;
@@ -32,7 +32,7 @@
 
   }
 
-  &__item {
+  .ticket-details-item {
     .flex-center();
 
     overflow: hidden;
@@ -40,13 +40,13 @@
     line-height: 32px;
     flex: 0 0 50%;
 
-    &-label {
+    .ticket-details-item-label {
       flex-shrink: 0;
       min-width: 140px;
       text-align: right;
     }
 
-    &-value {
+    .ticket-details-item-value {
       overflow: hidden;
       color: @title-color;
       text-overflow: ellipsis;
@@ -71,7 +71,7 @@
       align-items: flex-start;
       flex: 0 0 100%;
 
-      .ticket-details__item-value {
+      .ticket-details-item-value {
         padding-top: 8px;
       }
     }
diff --git a/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue b/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue
index dee58af0a2..21d934ce4f 100644
--- a/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue
@@ -28,19 +28,12 @@
                 :class="{ 'tickets-main-is-fullscreen': isFullscreen }"
                 mode="collapse"
                 :title="t('需求信息')">
-                <DemandInfo :data="ticketData" />
-                <div>
-                  <span
-                    style="
-                      display: inline-block;
-                      min-width: 100px;
-                      padding-right: 4px;
-                      line-height: 32px;
-                      text-align: right;
-                    ">
-                    {{ t('备注：') }}
-                  </span>
-                  <span>{{ ticketData.remark || '--' }}</span>
+                <DemandInfo
+                  :data="ticketData"
+                  :is-loading="isLoading" />
+                <div class="ticket-details-item">
+                  <span class="ticket-details-item-label">{{ t('备注') }}：</span>
+                  <span class="ticket-details-item-value">{{ ticketData.remark || '--' }}</span>
                 </div>
               </DbCard>
             </Teleport>
@@ -68,7 +61,6 @@
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
 
-  import TicketModel from '@services/model/ticket/ticket';
   import { getTicketDetails } from '@services/source/ticket';
 
   import PermissionCatch from '@components/apply-permission/Catch.vue';
@@ -96,21 +88,20 @@
   const demandCollapse = ref(false);
   const flowInfoRef = ref<InstanceType<typeof FlowInfo>>();
 
-  const isLoading = ref(true);
-  const ticketData = ref<TicketModel<unknown>>();
-
-  const { run: fetchTicketDetails } = useRequest(
+  const {
+    run: fetchTicketDetails,
+    data: ticketData,
+    loading: isLoading,
+  } = useRequest(
     (params: ServiceParameters<typeof getTicketDetails>) =>
       getTicketDetails(params, {
         permission: 'catch',
       }),
     {
-      onSuccess(data, params) {
+      onSuccess(_, params) {
         if (params[0].id !== props.ticketId) {
           return;
         }
-        isLoading.value = false;
-        ticketData.value = data;
         loopFetchTicketDetails();
       },
     },
@@ -171,6 +162,8 @@
 </script>
 
 <style lang="less">
+  @import '@views/tickets/common/styles/ticketDetails.less';
+
   .ticket-details-page {
     padding: 24px;
     font-size: 12px;
diff --git a/dbm-ui/frontend/src/views/tickets/my-todos/components/details/Index.vue b/dbm-ui/frontend/src/views/tickets/my-todos/components/details/Index.vue
index 8b47f550fc..63fb41cc66 100644
--- a/dbm-ui/frontend/src/views/tickets/my-todos/components/details/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/my-todos/components/details/Index.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <div class="ticket-details">
+  <div class="ticket-details-page">
     <BkLoading
       :loading="state.isLoading"
       style="min-height: 200px">
@@ -36,9 +36,9 @@
             <DemandInfo
               :data="state.ticketData"
               :is-loading="state.isLoading" />
-            <div class="mt-10">
-              <span>{{ t('备注') }}:</span>
-              <span class="ml-5">{{ state.ticketData.remark }}</span>
+            <div class="ticket-details-item">
+              <span class="ticket-details-item-label">{{ t('备注') }}：</span>
+              <span class="ticket-details-item-value">{{ state.ticketData.remark || '--' }}</span>
             </div>
           </DbCard>
         </Teleport>