fix(frontend): 单据详情样式调整 #6482

# Reviewed, transaction id: 17891
TencentBlueKing · Sep 10, 2024 · b26e64b · b26e64b
1 parent e044f37
commit b26e64b
Show file tree

Hide file tree

Showing 70 changed files with 1,148 additions and 1,184 deletions.
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
@@ -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
@@ -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>