feat(frontend): 单据管理迭代 TencentBlueKing#7190

dbm-ui/frontend/.prettierignore

@@ -1,3 +1,6 @@
 node_modules
 dist
+lib
+patch
+public
 src/types/auto-imports.d.ts

dbm-ui/frontend/.vscode/settings.json

@@ -37,24 +37,25 @@
   "preCI.localCodeCheck.checkerSet.JS": ["standard_js"],
   "peacock.remoteColor": "#45e35f",
   "bk-code-ai.enable": false,
+  "typescript.tsdk": "node_modules/typescript/lib",
   "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#71ea85",
-    "activityBar.background": "#71ea85",
+    "activityBar.activeBackground": "#65c89b",
+    "activityBar.background": "#65c89b",
     "activityBar.foreground": "#15202b",
     "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#8874ea",
-    "activityBarBadge.foreground": "#15202b",
+    "activityBarBadge.background": "#945bc4",
+    "activityBarBadge.foreground": "#e7e7e7",
     "commandCenter.border": "#15202b99",
-    "sash.hoverBorder": "#71ea85",
-    "statusBar.background": "#45e35f",
+    "sash.hoverBorder": "#65c89b",
+    "statusBar.background": "#42b883",
     "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#20d53e",
-    "statusBarItem.remoteBackground": "#45e35f",
+    "statusBarItem.hoverBackground": "#359268",
+    "statusBarItem.remoteBackground": "#42b883",
     "statusBarItem.remoteForeground": "#15202b",
-    "titleBar.activeBackground": "#45e35f",
+    "titleBar.activeBackground": "#42b883",
     "titleBar.activeForeground": "#15202b",
-    "titleBar.inactiveBackground": "#45e35f99",
+    "titleBar.inactiveBackground": "#42b88399",
     "titleBar.inactiveForeground": "#15202b99"
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "peacock.color": "#42b883"
 }

dbm-ui/frontend/lib/bk-icon/style.css

@@ -23,6 +23,9 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
   -moz-osx-font-smoothing: grayscale;
 }
 
+.db-icon-tags:before {
+	content: "\e206";
+}
 .db-icon-check-circle-fill:before {
 	content: "\e1a7";
 }
@@ -497,6 +500,9 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .db-icon-backup-2:before {
 	content: "\e1af";
 }
+.db-icon-loading-tubiao:before {
+	content: "\e208";
+}
 .db-icon-host-select:before {
 	content: "\e1b0";
 }
@@ -557,6 +563,9 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .db-icon-dirty-host:before {
 	content: "\e1ca";
 }
+.db-icon-tag-3:before {
+	content: "\e207";
+}
 .db-icon-saoba:before {
 	content: "\e1f4";
 }

dbm-ui/frontend/src/common/const/ticketTypes.ts

@@ -41,43 +41,46 @@ export enum TicketTypes {
   MYSQL_LOCAL_UPGRADE = 'MYSQL_LOCAL_UPGRADE', // MySQL 原地升级
   MYSQL_MIGRATE_UPGRADE = 'MYSQL_MIGRATE_UPGRADE', // MySQL 迁移升级
   MYSQL_SLAVE_MIGRATE_UPGRADE = 'MYSQL_SLAVE_MIGRATE_UPGRADE', // MySQL 从库迁移升级
+  MYSQL_ACCOUNT_RULE_CHANGE = 'MYSQL_ACCOUNT_RULE_CHANGE',
 }
 export enum TicketTypes {
-  REDIS_CLUSTER_APPLY = 'REDIS_CLUSTER_APPLY',
-  REDIS_KEYS_EXTRACT = 'REDIS_KEYS_EXTRACT',
-  REDIS_KEYS_DELETE = 'REDIS_KEYS_DELETE',
   REDIS_BACKUP = 'REDIS_BACKUP',
-  REDIS_PURGE = 'REDIS_PURGE',
+  REDIS_CLUSTER_ADD_SLAVE = 'REDIS_CLUSTER_ADD_SLAVE',
+  REDIS_CLUSTER_APPLY = 'REDIS_CLUSTER_APPLY',
+  REDIS_CLUSTER_CUTOFF = 'REDIS_CLUSTER_CUTOFF',
+  REDIS_CLUSTER_DATA_COPY = 'REDIS_CLUSTER_DATA_COPY',
+  REDIS_CLUSTER_ROLLBACK_DATA_COPY = 'REDIS_CLUSTER_ROLLBACK_DATA_COPY',
+  REDIS_CLUSTER_SHARD_NUM_UPDATE = 'REDIS_CLUSTER_SHARD_NUM_UPDATE',
+  REDIS_CLUSTER_TYPE_UPDATE = 'REDIS_CLUSTER_TYPE_UPDATE',
+  REDIS_DATACOPY_CHECK_REPAIR = 'REDIS_DATACOPY_CHECK_REPAIR',
   REDIS_DESTROY = 'REDIS_DESTROY',
-  REDIS_PROXY_OPEN = 'REDIS_PROXY_OPEN',
-  REDIS_PROXY_CLOSE = 'REDIS_PROXY_CLOSE',
-  REDIS_PLUGIN_DNS_BIND_CLB = 'REDIS_PLUGIN_DNS_BIND_CLB',
-  REDIS_PLUGIN_DNS_UNBIND_CLB = 'REDIS_PLUGIN_DNS_UNBIND_CLB',
+  REDIS_INS_APPLY = 'REDIS_INS_APPLY',
+  REDIS_INSTANCE_PROXY_CLOSE = 'REDIS_INSTANCE_PROXY_CLOSE',
+  REDIS_INSTANCE_PROXY_OPEN = 'REDIS_INSTANCE_PROXY_OPEN',
+  REDIS_INSTANCE_DESTROY = 'REDIS_INSTANCE_DESTROY',
+  REDIS_KEYS_DELETE = 'REDIS_KEYS_DELETE',
+  REDIS_KEYS_EXTRACT = 'REDIS_KEYS_EXTRACT',
+  REDIS_MASTER_SLAVE_SWITCH = 'REDIS_MASTER_SLAVE_SWITCH',
   REDIS_PLUGIN_CREATE_CLB = 'REDIS_PLUGIN_CREATE_CLB',
-  REDIS_PLUGIN_DELETE_CLB = 'REDIS_PLUGIN_DELETE_CLB',
   REDIS_PLUGIN_CREATE_POLARIS = 'REDIS_PLUGIN_CREATE_POLARIS',
+  REDIS_PLUGIN_DELETE_CLB = 'REDIS_PLUGIN_DELETE_CLB',
   REDIS_PLUGIN_DELETE_POLARIS = 'REDIS_PLUGIN_DELETE_POLARIS',
-  REDIS_CLUSTER_CUTOFF = 'REDIS_CLUSTER_CUTOFF', // redis 整机替换
-  REDIS_PROXY_SCALE_UP = 'REDIS_PROXY_SCALE_UP', // redis 接入层扩容
-  REDIS_PROXY_SCALE_DOWN = 'REDIS_PROXY_SCALE_DOWN', // redis 接入层缩容
-  REDIS_SCALE_UPDOWN = 'REDIS_SCALE_UPDOWN', // redis 集群容量变更
-  REDIS_SCALE_UP = 'REDIS_SCALE_UP', // redis 存储层扩容
-  REDIS_SCALE_DOWN = 'REDIS_SCALE_DOWN', // redis 存储层缩容
-  REDIS_MASTER_SLAVE_SWITCH = 'REDIS_MASTER_SLAVE_SWITCH', // redis 主故障切换
-  REDIS_SLOTS_MIGRATE = 'REDIS_SLOTS_MIGRATE', // redis slots 迁移
+  REDIS_PLUGIN_DNS_BIND_CLB = 'REDIS_PLUGIN_DNS_BIND_CLB',
+  REDIS_PLUGIN_DNS_UNBIND_CLB = 'REDIS_PLUGIN_DNS_UNBIND_CLB',
   REDIS_DATA_STRUCTURE = 'REDIS_DATA_STRUCTURE', // redis 定点构造
   REDIS_DATA_STRUCTURE_TASK_DELETE = 'REDIS_DATA_STRUCTURE_TASK_DELETE', // redis 构造销毁
-  REDIS_CLUSTER_ADD_SLAVE = 'REDIS_CLUSTER_ADD_SLAVE', // redis 新建从库
-  REDIS_CLUSTER_DATA_COPY = 'REDIS_CLUSTER_DATA_COPY', // redis 数据复制
-  REDIS_CLUSTER_SHARD_NUM_UPDATE = 'REDIS_CLUSTER_SHARD_NUM_UPDATE', // redis 集群分片变更
-  REDIS_CLUSTER_TYPE_UPDATE = 'REDIS_CLUSTER_TYPE_UPDATE', // redis 集群类型变更
-  REDIS_DATACOPY_CHECK_REPAIR = 'REDIS_DATACOPY_CHECK_REPAIR', // redis 数据校验与修复
-  REDIS_CLUSTER_ROLLBACK_DATA_COPY = 'REDIS_CLUSTER_ROLLBACK_DATA_COPY', // redis 数据回写
-  REDIS_VERSION_UPDATE_ONLINE = 'REDIS_VERSION_UPDATE_ONLINE', // redis 版本升级
-  REDIS_INS_APPLY = 'REDIS_INS_APPLY', // redis 主从集群部署
   REDIS_INSTANCE_OPEN = 'REDIS_INSTANCE_OPEN', // redis 主从集群启用
   REDIS_INSTANCE_CLOSE = 'REDIS_INSTANCE_CLOSE', // redis 主从集群禁用
-  REDIS_INSTANCE_DESTROY = 'REDIS_INSTANCE_DESTROY', // redis 主从集群删除
+  REDIS_PURGE = 'REDIS_PURGE',
+  REDIS_PROXY_CLOSE = 'REDIS_PROXY_CLOSE',
+  REDIS_PROXY_OPEN = 'REDIS_PROXY_OPEN',
+  REDIS_PROXY_SCALE_DOWN = 'REDIS_PROXY_SCALE_DOWN',
+  REDIS_PROXY_SCALE_UP = 'REDIS_PROXY_SCALE_UP',
+  REDIS_SCALE_DOWN = 'REDIS_SCALE_DOWN',
+  REDIS_SCALE_UP = 'REDIS_SCALE_UP',
+  REDIS_SCALE_UPDOWN = 'REDIS_SCALE_UPDOWN',
+  REDIS_SLOTS_MIGRATE = 'REDIS_SLOTS_MIGRATE',
+  REDIS_VERSION_UPDATE_ONLINE = 'REDIS_VERSION_UPDATE_ONLINE',
 }
 export enum TicketTypes {
   TENDBCLUSTER_APPLY = 'TENDBCLUSTER_APPLY',
@@ -114,29 +117,30 @@ export enum TicketTypes {
   TENDBCLUSTER_RESTORE_SLAVE = 'TENDBCLUSTER_RESTORE_SLAVE', // spider 重建从库-新机重建
   TENDBCLUSTER_DUMP_DATA = 'TENDBCLUSTER_DUMP_DATA', // spider 数据导出
   TENDBCLUSTER_SEMANTIC_CHECK = 'TENDBCLUSTER_SEMANTIC_CHECK', // spider 模拟执行
+  TENDBCLUSTER_ACCOUNT_RULE_CHANGE = 'TENDBCLUSTER_ACCOUNT_RULE_CHANGE',
 }
 export enum TicketTypes {
+  MONGODB_ADD_MONGOS = 'MONGODB_ADD_MONGOS', // mongo 扩容接入层
+  MONGODB_ADD_SHARD_NODES = 'MONGODB_ADD_SHARD_NODES', // mongo 扩容 shard 节点数
+  MONGODB_AUTHORIZE_RULES = 'MONGODB_AUTHORIZE_RULES', // MongoDB 集群授权
+  MONGODB_BACKUP = 'MONGODB_BACKUP', // mongo 库表备份
+  MONGODB_CUTOFF = 'MONGODB_CUTOFF', // mongo 整机替换
   MONGODB_DISABLE = 'MONGODB_DISABLE', // mongodb禁用
-  MONGODB_INSTANCE_RELOAD = 'MONGODB_INSTANCE_RELOAD', // mongodb重启
-  MONGODB_SHARD_APPLY = 'MONGODB_SHARD_APPLY', // MongoDB 分片式集群部署申请
-  MONGODB_REPLICASET_APPLY = 'MONGODB_REPLICASET_APPLY', // MongoDB 副本集部署申请
-  MONGODB_ENABLE = 'MONGODB_ENABLE', // MongoDB 集群启用
   MONGODB_DESTROY = 'MONGODB_DESTROY', // MongoDB 集群删除
-  MONGODB_SCALE_UPDOWN = 'MONGODB_SCALE_UPDOWN', // MongoDB 分片式集群单个容量变更
+  MONGODB_ENABLE = 'MONGODB_ENABLE', // MongoDB 集群启用
   MONGODB_EXCEL_AUTHORIZE = 'MONGODB_EXCEL_AUTHORIZE', // MongoDB 导入授权
-  MONGODB_AUTHORIZE_RULES = 'MONGODB_AUTHORIZE_RULES', // MongoDB 集群授权
   MONGODB_EXCEL_AUTHORIZE_RULES = 'MONGODB_EXCEL_AUTHORIZE_RULES', // MongoDB 导入授权
   MONGODB_EXEC_SCRIPT_APPLY = 'MONGODB_EXEC_SCRIPT_APPLY', // mongo 变更脚本执行
-  MONGODB_ADD_SHARD_NODES = 'MONGODB_ADD_SHARD_NODES', // mongo 扩容 shard 节点数
-  MONGODB_REDUCE_SHARD_NODES = 'MONGODB_REDUCE_SHARD_NODES', // mongo 缩容 shard 节点数
-  MONGODB_ADD_MONGOS = 'MONGODB_ADD_MONGOS', // mongo 扩容接入层
-  MONGODB_REDUCE_MONGOS = 'MONGODB_REDUCE_MONGOS', // mongo 缩容接入层
-  MONGODB_CUTOFF = 'MONGODB_CUTOFF', // mongo 整机替换
-  MONGODB_FULL_BACKUP = 'MONGODB_FULL_BACKUP', // mongo 全库备份
+  MONGODB_INSTANCE_RELOAD = 'MONGODB_INSTANCE_RELOAD', // mongodb重启
   MONGODB_REMOVE_NS = 'MONGODB_REMOVE_NS', // mongo 清档
-  MONGODB_BACKUP = 'MONGODB_BACKUP', // mongo 库表备份
+  MONGODB_REDUCE_MONGOS = 'MONGODB_REDUCE_MONGOS', // mongo 缩容接入层
+  MONGODB_REDUCE_SHARD_NODES = 'MONGODB_REDUCE_SHARD_NODES', // mongo 缩容 shard 节点数
   MONGODB_RESTORE = 'MONGODB_RESTORE', // mongo 定点构造
+  MONGODB_SCALE_UPDOWN = 'MONGODB_SCALE_UPDOWN', // MongoDB 分片式集群单个容量变更
+  MONGODB_SHARD_APPLY = 'MONGODB_SHARD_APPLY', // MongoDB 分片式集群部署申请
+  MONGODB_REPLICASET_APPLY = 'MONGODB_REPLICASET_APPLY', // MongoDB 副本集部署申请
   MONGODB_TEMPORARY_DESTROY = 'MONGODB_TEMPORARY_DESTROY', // mongo 临时集群销毁
+  MONGODB_FULL_BACKUP = 'MONGODB_FULL_BACKUP', // mongo 全库备份
 }
 export enum TicketTypes {
   SQLSERVER_SINGLE_APPLY = 'SQLSERVER_SINGLE_APPLY', // sqlserver单节点部署

dbm-ui/frontend/src/components/db-popconfirm/index.vue

@@ -21,12 +21,14 @@
   </div>
   <div
     ref="popRef"
-    style="width: 280px; padding: 15px 10px">
+    :style="contentStyle">
     <div style="font-size: 16px; line-height: 20px; color: #313238">
       {{ title }}
     </div>
     <div style="margin-top: 10px; font-size: 12px; color: #63656e">
-      {{ content }}
+      <slot name="content">
+        {{ content }}
+      </slot>
     </div>
     <div style="margin-top: 16px; text-align: right">
       <BkButton
@@ -51,14 +53,17 @@
 
   interface Props {
     title: string;
-    content: string;
+    content?: string;
     placement?: Placement;
+    width?: number;
     confirmHandler: () => Promise<any> | void;
     cancelHandler?: () => Promise<any> | void;
   }
 
   const props = withDefaults(defineProps<Props>(), {
     placement: 'top',
+    content: '',
+    width: 280,
     cancelHandler: () => Promise.resolve(),
   });
 
@@ -72,6 +77,11 @@
   const popRef = ref();
   const isConfirmLoading = ref(false);
 
+  const contentStyle = computed(() => ({
+    width: `${props.width}px`,
+    padding: '15px 10px',
+  }));
+
   const handleConfirm = () => {
     isConfirmLoading.value = true;
     Promise.resolve()

dbm-ui/frontend/src/components/db-search-select/index.vue

@@ -108,6 +108,11 @@
     .search-container-selected {
       height: 22px;
       max-width: 250px !important;
+
+      .selected-name {
+        height: 22px;
+        overflow: hidden;
+      }
     }
   }
 </style>

dbm-ui/frontend/src/components/scroll-faker/Index.vue

@@ -71,11 +71,12 @@
       scrollContent: any;
     };
   }
-</script>
-<script setup lang="ts">
+
   interface Props {
     theme?: string;
   }
+</script>
+<script setup lang="ts">
   withDefaults(defineProps<Props>(), {
     theme: 'light',
   });
@@ -129,21 +130,19 @@
     handleCalcScroller();
   });
 
-  const getScroll = () => {
-    const { scrollLeft, scrollTop } = scrollContent.value;
-    return {
-      scrollLeft,
-      scrollTop,
-    };
-  };
-
-  const scrollTo = (scrollLeft: number, scrollTop: number) => {
-    scrollContent.value.scrollTo(scrollLeft, scrollTop);
-  };
-
   defineExpose({
-    getScroll,
-    scrollTo,
+    getScroll: () => {
+      const { scrollLeft, scrollTop } = scrollContent.value;
+      return {
+        scrollLeft,
+        scrollTop,
+      };
+    },
+    scrollTo: (scrollLeft: number, scrollTop: number) => {
+      scrollContent.value.scrollTo(scrollLeft, scrollTop);
+      verticalScroll.value?.scrollTo(0, scrollTop);
+      horizontalScrollbar.value?.scrollTo(scrollLeft, 0);
+    },
     boxState,
   });
 </script>
@@ -177,9 +176,9 @@
     }
 
     & > .scroll-faker-content {
-      height: inherit;
-      max-width: inherit;
-      max-height: inherit;
+      height: 100%;
+      max-width: 100%;
+      max-height: 100%;
       overflow: scroll;
 
       &::-webkit-scrollbar {

dbm-ui/frontend/src/components/stretch-layout/StretchLayout.vue

@@ -42,6 +42,22 @@
 <script lang="ts">
   import { type InjectionKey, nextTick, provide, type Ref } from 'vue';
 
+  interface Props {
+    name: string;
+    leftWidth?: number;
+    minLeftWidth?: number;
+  }
+
+  interface Slots {
+    list(): any;
+    default(): any;
+    right(): any;
+  }
+
+  interface Emits {
+    (e: 'change', split: boolean): void;
+  }
+
   export const provideKey: InjectionKey<{
     isOpen: Ref<boolean>;
     isSplited: Ref<boolean>;
@@ -54,23 +70,14 @@
 
   import DragResize from './components/DragResize.vue';
 
-  const props = withDefaults(
-    defineProps<{
-      name: string;
-      leftWidth?: number;
-      minLeftWidth?: number;
-    }>(),
-    {
-      leftWidth: 456,
-      minLeftWidth: 200,
-    },
-  );
+  const props = withDefaults(defineProps<Props>(), {
+    leftWidth: 456,
+    minLeftWidth: 200,
+  });
 
-  defineSlots<{
-    list(): any;
-    default(): any;
-    right(): any;
-  }>();
+  const emits = defineEmits<Emits>();
+
+  defineSlots<Slots>();
 
   const getMaxWidth = () => rootRef.value.getBoundingClientRect().width;
 
@@ -79,6 +86,7 @@
   const isOpen = ref(false);
   const renderLeftWidth = ref(0);
   const isRightHidden = ref(true);
+  // 左右分屏状态
   const isSplited = ref(false);
 
   const calcSplited = () => {
@@ -87,6 +95,7 @@
         isSplited.value = false;
       }
       isSplited.value = renderLeftWidth.value < getMaxWidth();
+      emits('change', isSplited.value);
     });
   };
 

dbm-ui/frontend/src/components/stretch-layout/components/DragResize.vue

@@ -32,11 +32,12 @@
       v-if="showTrigger"
       class="resize-trigger">
       <span
+        v-if="!isRightHidden"
         class="resize-trigger-button resize-trigger-left"
         @click="handleDirection('left')">
         <DbIcon
           v-bk-tooltips="{
-            content: isRightHidden ? t('展开详情') : t('收起列表'),
+            content: t('收起列表'),
             placement: 'left',
           }"
           style="display: inline-block; transform: rotate(180deg)"