feat(frontend): sqlserver 工具箱 TencentBlueKing#3485

# Reviewed, transaction id: 12171

dbm-ui/frontend/.eslintrc.js

@@ -129,7 +129,7 @@ module.exports = {
         ],
         'vue/prefer-separate-static-class': 'error',
         'vue/prefer-true-attribute-shorthand': 'error',
-        'vue/script-indent': ['error', 2, { baseIndent: 1 }],
+        'vue/script-indent': ['off', 2, { baseIndent: 1 }],
         'vue/component-name-in-template-casing': [
           'error',
           'PascalCase',

dbm-ui/frontend/.prettierrc

@@ -2,6 +2,7 @@
   "plugins": [
     "prettier-plugin-curly"
   ],
+  "$schema": "https://json.schemastore.org/prettierrc",
   "semi": true,
   "quoteProps": "as-needed",
   "jsxSingleQuote": true,

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

@@ -0,0 +1,59 @@
+{
+  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
+  "eslint.alwaysShowStatus": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "css.validate": false,
+  "stylelint.enable": true,
+  "scss.validate": false,
+  "stylelint.validate": ["css", "scss", "vue"],
+  "preCI.localCodeCheck.filter.whitePath": "",
+  "preCI.localCodeCheck.filter.skipPath": "",
+  "preCI.localCodeCheck.checkerSet.JS": ["standard_js"],
+  "peacock.remoteColor": "#45e35f",
+  "bk-code-ai.enable": true,
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#71ea85",
+    "activityBar.background": "#71ea85",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#8874ea",
+    "activityBarBadge.foreground": "#15202b",
+    "commandCenter.border": "#15202b99",
+    "sash.hoverBorder": "#71ea85",
+    "statusBar.background": "#45e35f",
+    "statusBar.foreground": "#15202b",
+    "statusBarItem.hoverBackground": "#20d53e",
+    "statusBarItem.remoteBackground": "#45e35f",
+    "statusBarItem.remoteForeground": "#15202b",
+    "titleBar.activeBackground": "#45e35f",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.inactiveBackground": "#45e35f99",
+    "titleBar.inactiveForeground": "#15202b99"
+  }
+}

dbm-ui/frontend/env.d.ts

@@ -58,6 +58,7 @@ declare module '@blueking/notice-component';
 declare module '@blueking/login-modal' {
   export function showLoginModal(params: { loginUrl: string }): void;
 }
+declare module '@blueking/sub-saas';
 
 declare module '@blueking/sub-saas' {
   export function connectToMain(router: Router): any;

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

@@ -635,9 +635,12 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .db-icon-daoru:before {
 	content: "\e1ef";
 }
+<<<<<<< HEAD
 .db-icon-piliangluru:before {
 	content: "\e1f1";
 }
 .db-icon-cluster-standardize:before {
 	content: "\e1f9";
 }
+=======
+>>>>>>> 3155ff4ed (feat(frontend): sqlserver 工具箱 #3485)

dbm-ui/frontend/package.json

@@ -18,81 +18,82 @@
   "dependencies": {
     "@blueking/app-select": "0.0.1-beta.12",
     "@blueking/bk-weweb": "0.0.24",
-    "@blueking/bkflow.js": "0.1.10",
-    "@blueking/date-picker": "0.0.72",
+    "@blueking/bkflow.js": "0.1.11",
+    "@blueking/date-picker": "^1.0.1",
     "@blueking/ip-selector": "0.3.0-beta.23",
     "@blueking/notice-component": "2.0.5",
     "@blueking/sub-saas": "^0.0.0-beta.6",
     "@blueking/login-modal": "^1.0.3",
     "@icon-cool/bk-icon-bk-biz-components": "0.0.4",
     "@vueuse/core": "10.9.0",
     "axios": "1.6.8",
-    "bkui-vue": "2.0.1-beta.19",
-    "date-fns": "3.0.4",
+    "bkui-vue": "2.0.1-beta.31",
+    "date-fns": "3.6.0",
     "dayjs": "1.11.10",
     "html-to-image": "1.11.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "lodash": "4.17.21",
     "mitt": "3.0.1",
-    "monaco-editor": "0.46.0",
+    "monaco-editor": "0.48.0",
     "pinia": "2.1.7",
-    "qs": "6.11.2",
+    "qs": "6.12.1",
     "screenfull": "6.0.2",
     "tiny-pinyin": "1.3.2",
     "tippy.js": "6.3.7",
-    "unplugin-auto-import": "0.17.2",
     "url-join": "5.0.0",
-    "vite-plugin-monaco-editor": "1.1.0",
-    "vite-plugin-static-copy": "1.0.0",
-    "vue": "3.4.15",
+    "vue": "^3.4.27",
     "vue-content-loader": "2.0.1",
-    "vue-i18n": "9.6.5",
+    "vue-i18n": "^9.13.1",
     "vue-request": "2.0.4",
-    "vue-router": "4.2.5",
+    "vue-router": "^4.3.2",
+    "vue-types": "^5.1.2",
     "vuedraggable": "4.1.0",
     "xlsx": "0.18.5"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "19.0.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "@types/lodash": "4.14.202",
-    "@types/node": "20.11.21",
-    "@types/qs": "6.9.12",
-    "@vitejs/plugin-basic-ssl": "1.0.2",
+    "@tsconfig/node20": "20.1.4",
+    "@types/lodash": "4.17.0",
+    "@types/node": "^20.12.10",
+    "@types/qs": "^6.9.15",
+    "@vitejs/plugin-basic-ssl": "1.1.0",
     "@vitejs/plugin-vue": "5.0.4",
     "@vitejs/plugin-vue-jsx": "3.1.0",
-    "@vue/eslint-config-typescript": "12.0.0",
+    "@vue/eslint-config-typescript": "13.0.0",
     "@vue/tsconfig": "0.5.1",
-    "commitlint": "19.0.1",
+    "commitlint": "^19.3.0",
     "cross-env": "7.0.3",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-tencent": "1.0.4",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-simple-import-sort": "12.0.0",
-    "eslint-plugin-vue": "9.18.1",
+    "eslint-plugin-simple-import-sort": "12.1.0",
+    "eslint-plugin-vue": "^9.25.0",
     "less": "4.2.0",
-    "lint-staged": "15.0.2",
+    "lint-staged": "15.2.2",
     "npm-run-all2": "6.1.2",
-    "postcss-html": "1.5.0",
+    "postcss-html": "1.6.0",
     "postcss-less": "6.0.0",
     "prettier": "3.2.5",
-    "prettier-plugin-curly": "0.1.4",
-    "simple-git-hooks": "2.9.0",
-    "stylelint": "16.2.1",
+    "prettier-plugin-curly": "0.2.1",
+    "simple-git-hooks": "2.11.0",
+    "stylelint": "16.5.0",
     "stylelint-config-standard": "36.0.0",
     "stylelint-less": "3.0.1",
     "stylelint-order": "6.0.4",
-    "typescript": "5.3.2",
-    "unplugin-vue-components": "0.26.0",
-    "vite": "5.0.10",
+    "typescript": "5.4.5",
+    "unplugin-auto-import": "0.17.5",
+    "unplugin-vue-components": "0.27.0",
+    "vite": "^5.2.11",
     "vite-plugin-babel": "1.2.0",
     "vite-plugin-html-env": "1.2.8",
     "vite-plugin-imp": "2.4.0",
+    "vite-plugin-monaco-editor": "1.1.0",
+    "vite-plugin-static-copy": "^1.0.4",
     "vite-plugin-style-import": "2.0.0",
     "vue-component-type-helpers": "2.0.6",
-    "vue-tsc": "1.8.22"
+    "vue-tsc": "2.0.16"
   },
   "simple-git-hooks": {
     "pre-commit": "cd dbm-ui/frontend && npx lint-staged",

dbm-ui/frontend/src/components/cluster-authorize/ClusterAuthorize.vue

@@ -221,10 +221,6 @@
 
   import AccountRulesTable from './accouter-rules-selector/components/AccountRulesTable.vue';
   import AccountRulesSelector from './accouter-rules-selector/Index.vue';
-
-  export default {
-    name: 'ClusterAuthorize',
-  };
 </script>
 
 <script setup lang="tsx">
@@ -261,7 +257,7 @@
 
   type ClusterSelectorResult = Record<string, Array<ResourceItem>>
 
-  const props = withDefaults(defineProps<Props>(), {
+    const props = withDefaults(defineProps<Props>(), {
     user: '',
     accessDbs: () => [],
     selected: () => [],
@@ -272,11 +268,16 @@
 
   const emits = defineEmits<Emits>();
 
+  defineOptions({
+    name: 'ClusterAuthorize',
+  })
+
   const isShow = defineModel<boolean>({
     required: true,
     default: false,
   });
 
+
   /**
    * 重置表单数据
    */
@@ -665,6 +666,7 @@
       remark: '',
       ticket_type: ticketTypeMap[props.accountType],
     };
+
     createTicket(params)
       .then((res) => {
         ticketMessage(res.id);
@@ -748,11 +750,11 @@
     if (state.isLoading) return false;
 
     if (window.changeConfirm) {
-      return new Promise((resolve) => {
+      return new Promise<boolean>((resolve) => {
         InfoBox({
           title: t('确认离开当前页'),
           content: t('离开将会导致未保存信息丢失'),
-          confirmTxt: t('离开'),
+          confirmText: t('离开'),
           onConfirm: () => {
             window.changeConfirm = false;
             resolve(true);

dbm-ui/frontend/src/components/cluster-selector/Index.vue

@@ -159,8 +159,8 @@
   import type { SearchSelectList } from './components/common/SearchBar.vue';
   import MongoTable from './components/mongo/Index.vue';
   import RedisTable from './components/redis/Index.vue';
-  import SqlserverHaTable from './components/sqlserver-ha/Index.vue'
-  import SqlserverSingleTable from './components/sqlserver-single/Index.vue'
+  import SqlserverHaTable from './components/sqlserver-ha/Index.vue';
+  import SqlserverSingleTable from './components/sqlserver-single/Index.vue';
   import SpiderTable from './components/tendb-cluster/Index.vue';
   import TendbSingleTable from './components/tendb-single/Index.vue';
   import TendbhaTable from './components/tendbha/Index.vue';
@@ -308,26 +308,32 @@
     [ClusterTypes.SQLSERVER_SINGLE]: {
       id: ClusterTypes.SQLSERVER_SINGLE,
       name: t('集群选择'),
-      disabledRowConfig: [{
-        handler: (data: T) => data.isOffline,
-        tip: t('集群已禁用'),
-      }],
+      disabledRowConfig: [
+        {
+          handler: (data: T) => data.isOffline,
+          tip: t('集群已禁用'),
+        },
+      ],
       multiple: true,
       getResourceList: getSingleClusterList,
       tableContent: SqlserverSingleTable,
       resultContent: ResultPreview,
+      showPreviewResultTitle: true,
     },
     [ClusterTypes.SQLSERVER_HA]: {
       id: ClusterTypes.SQLSERVER_HA,
       name: t('集群选择'),
-      disabledRowConfig: [{
-        handler: (data: T) => data.isOffline,
-        tip: t('集群已禁用'),
-      }],
+      disabledRowConfig: [
+        {
+          handler: (data: T) => data.isOffline,
+          tip: t('集群已禁用'),
+        },
+      ],
       multiple: true,
       getResourceList: getHaClusterList,
       tableContent: SqlserverHaTable,
       resultContent: ResultPreview,
+      showPreviewResultTitle: true,
     },
     [ClusterTypes.TENDBSINGLE]: {
       id: ClusterTypes.TENDBSINGLE,
@@ -443,12 +449,15 @@
       activePanelObj.value = currentTab;
     }
     if (props.onlyOneType) {
-      selectedMap.value = Object.keys(selectedMap.value).reduce((results, id) => {
-        Object.assign(results, {
-          [id]: {},
-        });
-        return results;
-      }, {} as Record<string, Record<string, any>>);
+      selectedMap.value = Object.keys(selectedMap.value).reduce(
+        (results, id) => {
+          Object.assign(results, {
+            [id]: {},
+          });
+          return results;
+        },
+        {} as Record<string, Record<string, any>>,
+      );
     }
   };
 
@@ -522,6 +531,10 @@
   };
 
   const handleSelectTable = (selected: Record<string, Record<string, T>>) => {
+    if (!activePanelObj.value.multiple) {
+      selectedMap.value = selected;
+      return;
+    }
     // 如果只允许选一种集群类型, 则清空非当前集群类型的选中列表
     // 如果是勾选的取消全选，则忽略
     if (props.onlyOneType && Object.keys(Object.values(selected)[0]).length > 0) {