From 22472b2ffafab0dfad1e3cbcf2c2cc98962fd51d Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Mon, 25 Nov 2024 16:00:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20mysql=20=E3=80=81tendbcluster?=
 =?UTF-8?q?=E7=9A=84dbmodule=E6=B7=BB=E5=8A=A0alias=5Fname=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=20#8103?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/services/source/cmdb.ts   |  8 ++++++-
 .../frontend/src/services/source/ticket.tsx   | 20 ++++++++---------
 .../business/list/components/ConfigEmpty.vue  |  2 +-
 .../mongodb/replica-set-apply/Index.vue       |  2 +-
 .../mongodb/shared-cluster-apply/Index.vue    |  2 +-
 .../db-manage/mysql/apply/ApplyMySQL.vue      | 22 +++++++++----------
 .../mysql/apply/components/BatchEdit.vue      | 12 +++++-----
 .../apply/components/MySQLDomainTable.vue     | 12 +++++-----
 .../page1/components/RenderTargetVersion.vue  |  2 +-
 .../RenderTargetVersion.vue                   |  4 ++--
 .../src/views/db-manage/riak/apply/Index.vue  |  6 ++---
 .../db-manage/sqlserver/apply/SqlServer.vue   | 14 ++++++------
 .../sqlserver/apply/components/BatchEdit.vue  |  6 ++---
 .../apply/components/DomainTable.vue          | 14 ++++++------
 .../tendb-cluster/apply/CreateModule.vue      | 15 ++++++++-----
 .../db-manage/tendb-cluster/apply/Index.vue   |  2 +-
 .../apply/components/ModuleItem.vue           |  4 ++--
 .../useSpiderClusterData.ts                   |  2 +-
 .../service-apply/create-db-module/Index.vue  | 17 ++++++++------
 .../SqlServerCreateDbModule.vue               | 13 ++++++-----
 .../spider/TargetClusterPreview.vue           |  2 +-
 21 files changed, 97 insertions(+), 84 deletions(-)

diff --git a/dbm-ui/frontend/src/services/source/cmdb.ts b/dbm-ui/frontend/src/services/source/cmdb.ts
index 45dcb35123..b680c6fcc3 100644
--- a/dbm-ui/frontend/src/services/source/cmdb.ts
+++ b/dbm-ui/frontend/src/services/source/cmdb.ts
@@ -45,7 +45,12 @@ export function getBizs(params = {} as { action: string }) {
 /**
  * 创建数据库模块
  */
-export function createModules(params: { db_module_name: string; cluster_type: string; biz_id: number }) {
+export function createModules(params: {
+  db_module_name: string;
+  alias_name: string;
+  cluster_type: string;
+  biz_id: number;
+}) {
   return http.post<{
     db_module_id: number;
     db_module_name: string;
@@ -82,6 +87,7 @@ export function getUserGroupList(params: { bk_biz_id: number }) {
 export function getModules(params: { bk_biz_id: number; cluster_type: string }) {
   return http.get<
     {
+      alias_name: string;
       bk_biz_id: number;
       db_module_id: number;
       name: string;
diff --git a/dbm-ui/frontend/src/services/source/ticket.tsx b/dbm-ui/frontend/src/services/source/ticket.tsx
index 37cd86b36d..7e06245d0f 100644
--- a/dbm-ui/frontend/src/services/source/ticket.tsx
+++ b/dbm-ui/frontend/src/services/source/ticket.tsx
@@ -389,16 +389,16 @@ export const createAppAbbr = (params: { db_app_abbr: string; id: number }) =>
 /**
  * 创建模块
  */
-export const createModules = (params: { db_module_name: string; cluster_type: string; id: number }) =>
-  http.post<{
-    db_module_id: number;
-    db_module_name: string;
-    cluster_type: string;
-    bk_biz_id: number;
-    bk_set_id: number;
-    bk_modules: { bk_module_name: string; bk_module_id: string }[];
-    name: string;
-  }>(`/apis/cmdb/${params.id}/create_module/`, params);
+// export const createModules = (params: { db_module_name: string; cluster_type: string; id: number }) =>
+//   http.post<{
+//     db_module_id: number;
+//     db_module_name: string;
+//     cluster_type: string;
+//     bk_biz_id: number;
+//     bk_set_id: number;
+//     bk_modules: { bk_module_name: string; bk_module_id: string }[];
+//     name: string;
+//   }>(`/apis/cmdb/${params.id}/create_module/`, params);
 
 /**
  * 保存模块配置
diff --git a/dbm-ui/frontend/src/views/db-configure/business/list/components/ConfigEmpty.vue b/dbm-ui/frontend/src/views/db-configure/business/list/components/ConfigEmpty.vue
index 0203051ba2..2b28a3ef2d 100644
--- a/dbm-ui/frontend/src/views/db-configure/business/list/components/ConfigEmpty.vue
+++ b/dbm-ui/frontend/src/views/db-configure/business/list/components/ConfigEmpty.vue
@@ -63,7 +63,7 @@
         bk_biz_id: globalBizsStore.currentBizId,
         db_module_id: id,
       },
-      query: { module_name: name },
+      query: { alias_name: name },
     });
   };
 </script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-apply/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-apply/Index.vue
index 50e76015af..cb5aefe0d9 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-apply/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-apply/Index.vue
@@ -391,7 +391,7 @@
 
   .apply-instance {
     :deep(.item-input) {
-      width: 462px;
+      width: 435px;
     }
 
     .input-desc {
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-apply/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-apply/Index.vue
index 9239c01213..7a2939a44d 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-apply/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-apply/Index.vue
@@ -414,7 +414,7 @@
     }
 
     :deep(.item-input) {
-      width: 462px;
+      width: 435px;
     }
 
     .resource-pool-item {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue b/dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue
index fbc6b4844a..23ec7ee51e 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/apply/ApplyMySQL.vue
@@ -46,7 +46,7 @@
                 :key="item.db_module_id"
                 action-id="dbconfig_view"
                 :biz-id="formdata.bk_biz_id"
-                :name="item.name"
+                :name="item.alias_name"
                 :permission="item.permission.dbconfig_view"
                 resource="mysql" />
               <template
@@ -191,7 +191,7 @@
             <DomainTable
               v-model:domains="formdata.details.domains"
               :formdata="formdata"
-              :module-name="moduleName"
+              :module-alias-name="moduleAliasName"
               :ticket-type="dbType" />
           </BkFormItem>
           <BkFormItem
@@ -573,12 +573,12 @@
   });
   const hostSpecInfo = computed(() => fetchState.hostSpecs.find((info) => info.spec === formdata.details.spec));
   const typeInfo = computed(() => mysqlType[dbType as MysqlTypeString]);
-  const moduleName = computed(() => {
+  const moduleAliasName = computed(() => {
     const item = fetchState.moduleList.find((item) => item.db_module_id === formdata.details.db_module_id);
-    return item?.name ?? '';
+    return item?.alias_name ?? '';
   });
   const tableData = computed(() => {
-    if (moduleName.value && formdata.details.db_app_abbr) {
+    if (moduleAliasName.value && formdata.details.db_app_abbr) {
       return formdata.details.domains;
     }
     return [];
@@ -738,8 +738,8 @@
   }));
   const previewData = computed(() =>
     tableData.value.map(({ key }: { key: string }) => ({
-      domain: `${moduleName.value}db.${key}.${formdata.details.db_app_abbr}.db`,
-      slaveDomain: `${moduleName.value}db.${key}.${formdata.details.db_app_abbr}.db`,
+      domain: `${moduleAliasName.value}db.${key}.${formdata.details.db_app_abbr}.db`,
+      slaveDomain: `${moduleAliasName.value}db.${key}.${formdata.details.db_app_abbr}.db`,
       disasterDefence: t('同城跨园区'),
       deployStructure: typeInfo.value.name,
       version: leveConfig.db_version,
@@ -873,10 +873,10 @@
       return;
     }
     const moduleInfo = fetchState.moduleList.find((item) => item.db_module_id === formdata.details.db_module_id);
-    const moduleName = moduleInfo?.name ?? '';
-    const moduleNameQuery = moduleName
+    const moduleAliasName = moduleInfo?.alias_name ?? '';
+    const moduleAliasNameQuery = moduleAliasName
       ? {
-          module_name: moduleName,
+          alias_name: moduleAliasName,
         }
       : {};
     isBindModule.value = true;
@@ -888,7 +888,7 @@
         db_module_id: formdata.details.db_module_id,
       },
       query: {
-        ...moduleNameQuery,
+        ...moduleAliasNameQuery,
       },
     });
     window.open(url.href, '_blank');
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/apply/components/BatchEdit.vue b/dbm-ui/frontend/src/views/db-manage/mysql/apply/components/BatchEdit.vue
index cdc4a2a832..8571f7d383 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/apply/components/BatchEdit.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/apply/components/BatchEdit.vue
@@ -32,7 +32,7 @@
           class="batch-edit__domain"
           :style="{ '--offset': `${state.offsetWidth}px` }">
           <p class="batch-edit__domain-name">
-            <span ref="moduleNameRef">{{ moduleName }}db.</span>
+            <span ref="moduleAliasNameRef">{{ moduleAliasName }}db.</span>
             <span class="batch-edit__domain-underline" />.{{ appName }}.db
           </p>
           <BkInput
@@ -73,7 +73,7 @@
   import { nameRegx } from '@common/regex';
 
   interface Props {
-    moduleName?: string;
+    moduleAliasName?: string;
     appName?: string;
   }
 
@@ -82,7 +82,7 @@
   }
 
   withDefaults(defineProps<Props>(), {
-    moduleName: '',
+    moduleAliasName: '',
     appName: '',
   });
   const emits = defineEmits<Emits>();
@@ -116,13 +116,13 @@
   /**
    * 获取输入框 arrow 偏移量
    */
-  const moduleNameRef = ref<HTMLSpanElement>();
+  const moduleAliasNameRef = ref<HTMLSpanElement>();
   watch(
     () => state.isShow,
     (show) => {
       nextTick(() => {
-        if (moduleNameRef.value) {
-          state.offsetWidth = moduleNameRef.value.offsetWidth + 22;
+        if (moduleAliasNameRef.value) {
+          state.offsetWidth = moduleAliasNameRef.value.offsetWidth + 22;
         }
       });
       if (show === false) {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/apply/components/MySQLDomainTable.vue b/dbm-ui/frontend/src/views/db-manage/mysql/apply/components/MySQLDomainTable.vue
index 1f239c5503..e2697b18bd 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/apply/components/MySQLDomainTable.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/apply/components/MySQLDomainTable.vue
@@ -58,7 +58,7 @@
     key: string
   }
   interface Props {
-    moduleName: string,
+    moduleAliasName: string,
     formdata: IFormdata,
     ticketType: string
   }
@@ -74,11 +74,11 @@
   const isMysqlSingle = computed(() => props.ticketType === TicketTypes.MYSQL_SINGLE_APPLY);
   /**
    * 表单展示数据
-   * 没有 moduleName 和 appName 则不展示 table 数据
+   * 没有 moduleAliasName 和 appName 则不展示 table 数据
    */
   const tableData = computed(() => {
-    const { moduleName, formdata } = props;
-    if (moduleName && (formdata.details.db_app_abbr)) {
+    const { moduleAliasName, formdata } = props;
+    if (moduleAliasName && (formdata.details.db_app_abbr)) {
       return formdata.details.domains;
     }
     return [];
@@ -130,7 +130,7 @@
               ? null
               : <BatchEdit
                   v-bk-tooltips={t('快捷编辑_可通过换行分隔_快速编辑多个域名')}
-                  moduleName={props.moduleName}
+                  moduleAliasName={props.moduleAliasName}
                   appName={props.formdata.details.db_app_abbr}
                   onChange={handleBatchEditDomains} />
           }
@@ -186,7 +186,7 @@
   function renderDomain(rowIndex: number, isMain = false) {
     return (
       <div class="domain-address">
-        <span>{props.moduleName}{isMain ? 'db.' : 'dr.'}</span>
+        <span>{props.moduleAliasName}{isMain ? 'db.' : 'dr.'}</span>
         {
           isMain
             ? (
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/RenderTargetVersion.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/RenderTargetVersion.vue
index a9604b096d..4ea13525c6 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/RenderTargetVersion.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/RenderTargetVersion.vue
@@ -160,7 +160,7 @@
     onSuccess(modules) {
       // const moduleList: IListItem[] = [];
       const { moduleName } = props.data!;
-      const currentModule = modules.find((moduleItem) => moduleItem.name === moduleName);
+      const currentModule = modules.find((moduleItem) => moduleItem.alias_name === moduleName);
       if (currentModule) {
         const currentCharset = currentModule.db_module_info.conf_items.find(
           (confItem) => confItem.conf_name === 'charset',
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderTargetVersion.vue b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderTargetVersion.vue
index 8104e13c4b..95a88d2975 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderTargetVersion.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/version-upgrade/pages/page1/components/ha-storage-layer-remote/RenderTargetVersion.vue
@@ -277,7 +277,7 @@
     onSuccess(modules) {
       const moduleList: IListItem[] = [];
       const { moduleName } = props.data!;
-      const currentModule = modules.find((moduleItem) => moduleItem.name === moduleName);
+      const currentModule = modules.find((moduleItem) => moduleItem.alias_name === moduleName);
       if (currentModule) {
         const currentCharset = currentModule.db_module_info.conf_items.find(
           (confItem) => confItem.conf_name === 'charset',
@@ -299,7 +299,7 @@
             moduleList.push({
               ...moduleItem,
               id: moduleItem.db_module_id,
-              name: moduleItem.name,
+              name: moduleItem.alias_name,
             });
           }
         });
diff --git a/dbm-ui/frontend/src/views/db-manage/riak/apply/Index.vue b/dbm-ui/frontend/src/views/db-manage/riak/apply/Index.vue
index da133e5bfb..30351b3141 100644
--- a/dbm-ui/frontend/src/views/db-manage/riak/apply/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/riak/apply/Index.vue
@@ -47,8 +47,8 @@
               :key="item.db_module_id"
               action-id="dbconfig_view"
               :biz-id="formData.bk_biz_id"
-              :label="item.name"
-              :name="item.name"
+              :label="item.alias_name"
+              :name="item.alias_name"
               :permission="item.permission.dbconfig_view"
               resource="riak"
               :value="item.db_module_id" />
@@ -348,7 +348,7 @@
         ...formData,
         details: {
           ...formData.details,
-          db_module_name: moduleListValue[moduleIndex].name,
+          db_module_name: moduleListValue[moduleIndex].alias_name,
         },
       };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/SqlServer.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/SqlServer.vue
index c4c0a97f75..245434f96b 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/SqlServer.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/SqlServer.vue
@@ -32,7 +32,7 @@
                 :key="item.db_module_id"
                 action-id="dbconfig_view"
                 :biz-id="formData.bk_biz_id"
-                :label="item.name"
+                :label="item.alias_name"
                 :permission="item.permission.dbconfig_view"
                 resource="sqlserver"
                 :value="item.db_module_id" />
@@ -150,7 +150,7 @@
               v-model:domains="formData.details.domains"
               :db-app-abbr="formData.details.db_app_abbr"
               :is-sqlserver-single="isSingleType"
-              :module-name="moduleName" />
+              :module-alias-name="moduleAliasName" />
           </BkFormItem>
           <BkFormItem
             :label="t('服务器选择')"
@@ -365,7 +365,7 @@
 
   const formRef = ref();
   const backendRef = ref();
-  const moduleName = ref('');
+  const moduleAliasName = ref('');
   const moduleRef = ref();
   const isBindModule = ref(false);
   const isShowPreview = ref(false);
@@ -434,7 +434,7 @@
   );
 
   const tableData = computed(() => {
-    if (moduleName.value && formData.details.db_app_abbr) {
+    if (moduleAliasName.value && formData.details.db_app_abbr) {
       return formData.details.domains;
     }
     return [];
@@ -445,8 +445,8 @@
       (accumulator, { key }) => [
         ...accumulator,
         {
-          domain: `${moduleName.value}db.${key}.${formData.details.db_app_abbr}.db`,
-          slaveDomain: `${moduleName.value}db.${key}.${formData.details.db_app_abbr}.db`,
+          domain: `${moduleAliasName.value}db.${key}.${formData.details.db_app_abbr}.db`,
+          slaveDomain: `${moduleAliasName.value}db.${key}.${formData.details.db_app_abbr}.db`,
           disasterDefence: t('同城跨园区'),
           deployStructure: isSingleType ? t('单节点部署') : t('主从部署'),
           version: dbVersion.value,
@@ -540,7 +540,7 @@
     (newDbModuleId) => {
       if (newDbModuleId) {
         const module = (moduleList.value || []).find((item) => item.db_module_id === formData.details.db_module_id);
-        moduleName.value = module ? module.name : '';
+        moduleAliasName.value = module ? module.alias_name : '';
 
         fetchModulesDetails({
           bk_biz_id: Number(formData.bk_biz_id),
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/components/BatchEdit.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/components/BatchEdit.vue
index f30fe5dad0..b43b9175e4 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/components/BatchEdit.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/components/BatchEdit.vue
@@ -21,7 +21,7 @@
           class="batch-edit-domain"
           :style="{ '--offset': `${stateOffsetWidth}px` }">
           <p class="batch-edit-domain-name">
-            <span ref="moduleNameRef"> {{ moduleName }}db. </span>
+            <span ref="moduleNameRef"> {{ moduleAliasName }}db. </span>
             <span class="batch-edit-domain-underline" />
             .{{ appName }}.db
           </p>
@@ -63,7 +63,7 @@
   import { nameRegx } from '@common/regex';
 
   interface Props {
-    moduleName: string;
+    moduleAliasName: string;
     appName: string;
   }
 
@@ -72,7 +72,7 @@
   }
 
   withDefaults(defineProps<Props>(), {
-    moduleName: '',
+    moduleAliasName: '',
     appName: '',
   });
   const emits = defineEmits<Emits>();
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/components/DomainTable.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/components/DomainTable.vue
index f80884ffeb..b96d185a11 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/components/DomainTable.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/apply/components/DomainTable.vue
@@ -18,7 +18,7 @@
   import BatchEdit from './BatchEdit.vue';
 
   interface Props {
-    moduleName: string,
+    moduleAliasName: string,
     dbAppAbbr: string,
     isSqlserverSingle: boolean,
   }
@@ -33,14 +33,14 @@
 
   /**
    * 表单展示数据
-   * 没有 moduleName 和 appName 则不展示 table 数据
+   * 没有 moduleAliasName 和 appName 则不展示 table 数据
    */
   const tableData = computed(() => {
     const {
-      moduleName,
+      moduleAliasName,
       dbAppAbbr,
     } = props;
-    if (moduleName && dbAppAbbr) {
+    if (moduleAliasName && dbAppAbbr) {
       return domains.value;
     }
     return [];
@@ -88,7 +88,7 @@
               tableData.value.length !== 0 && (
                 <span v-bk-tooltips={t('快捷编辑_可通过换行分隔_快速编辑多个域名')}>
                   <BatchEdit
-                    moduleName={props.moduleName}
+                    moduleAliasName={props.moduleAliasName}
                     appName={props.dbAppAbbr}
                     onChange={handleBatchEditDomains} />
                 </span>
@@ -101,7 +101,7 @@
         render: ({ index }: { index: number }) => (
           <div class="domain-address">
             <span>
-              {props.moduleName}db.
+              {props.moduleAliasName}db.
             </span>
             <bk-form-item
               errorDisplayType="tooltips"
@@ -136,7 +136,7 @@
         render: ({ index }: { index: number }) => (
           <div class="domain-address">
             <span>
-              {props.moduleName}dr.
+              {props.moduleAliasName}dr.
             </span>
             <span >
               {domains.value[index]?.key}
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/CreateModule.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/CreateModule.vue
index 01b065515f..c738fb18fb 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/CreateModule.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/CreateModule.vue
@@ -23,11 +23,11 @@
         :title="t('模块信息')">
         <BkFormItem
           :label="t('模块名称')"
-          property="module_name"
+          property="alias_name"
           required
-          :rules="rules.module_name">
+          :rules="rules.alias_name">
           <BkInput
-            v-model="formdata.module_name"
+            v-model="formdata.alias_name"
             :placeholder="t('由英文字母_数字_连字符_组成')"
             :readonly="isReadonly" />
           <span class="belong-business">{{ t('所属业务') }} : {{ bizInfo.name }}</span>
@@ -147,7 +147,7 @@
   import { messageError } from '@/utils';
 
   const getFormData = () => ({
-    module_name: (route.query.module_name ?? '') as string,
+    alias_name: (route.query.alias_name ?? '') as string,
     version: '',
     spider_version: '',
     character_set: '',
@@ -203,7 +203,7 @@
     },
   ];
   const rules = {
-    module_name: [
+    alias_name: [
       {
         required: true,
         message: t('模块名称不能为空'),
@@ -226,9 +226,12 @@
 
   // 创建模块
   const newModule = () => {
+    // aliasname-spiderversion-mysqlversion-charset
+    const dbModuleName = `${formdata.alias_name}-${formdata.spider_version}-${formdata.version}-${formdata.character_set}`;
     const params = {
       biz_id: bizId.value,
-      db_module_name: formdata.module_name,
+      alias_name: formdata.alias_name,
+      db_module_name: dbModuleName,
       cluster_type: 'tendbcluster',
     };
 
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/Index.vue
index 190f53d26e..bce227e391 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/Index.vue
@@ -373,7 +373,7 @@
 
   .spider-apply-instance-page {
     .item-input {
-      width: 462px;
+      width: 435px;
     }
 
     .input-desc {
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/components/ModuleItem.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/components/ModuleItem.vue
index 44a21a7545..9a89903a15 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/components/ModuleItem.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/apply/components/ModuleItem.vue
@@ -15,7 +15,7 @@
       <BkOption
         v-for="item in moduleList"
         :key="item.db_module_id"
-        :label="item.name"
+        :label="item.alias_name"
         :value="item.db_module_id" />
       <template #extension>
         <p
@@ -160,7 +160,7 @@
   //   }
   //   const moduleInfo = fetchState.moduleList.find(item => item.db_module_id ===  formdata.details.db_module_id);
   //   const moduleName = moduleInfo?.name ?? '';
-  //   const moduleNameQuery = moduleName ? { module_name: moduleName } : {};
+  //   const moduleNameQuery = moduleName ? { alias_name: moduleName } : {};
   //   isBindModule.value = true;
   //   const url = router.resolve({
   //     name: 'SelfServiceBindDbModule',
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/proxy-slave-apply/pages/page1/components/cluster-selector-table/useSpiderClusterData.ts b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/proxy-slave-apply/pages/page1/components/cluster-selector-table/useSpiderClusterData.ts
index 2540eabc1b..8b784db3f1 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/proxy-slave-apply/pages/page1/components/cluster-selector-table/useSpiderClusterData.ts
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/proxy-slave-apply/pages/page1/components/cluster-selector-table/useSpiderClusterData.ts
@@ -96,7 +96,7 @@ export function useClusterData<T>(activeTab: Ref<string>, searchParams: Ref<ISea
     }).then((res) => {
       dbModuleList.value = res.map((item) => ({
         id: item.db_module_id,
-        name: item.name,
+        name: item.alias_name,
       }));
       return dbModuleList.value;
     });
diff --git a/dbm-ui/frontend/src/views/service-apply/create-db-module/Index.vue b/dbm-ui/frontend/src/views/service-apply/create-db-module/Index.vue
index 8a5b39ec52..8a03d7ee17 100644
--- a/dbm-ui/frontend/src/views/service-apply/create-db-module/Index.vue
+++ b/dbm-ui/frontend/src/views/service-apply/create-db-module/Index.vue
@@ -23,11 +23,11 @@
         :title="t('模块信息')">
         <BkFormItem
           :label="t('模块名称')"
-          property="module_name"
+          property="alias_name"
           required
-          :rules="rules.module_name">
+          :rules="rules.alias_name">
           <BkInput
-            v-model="formData.module_name"
+            v-model="formData.alias_name"
             :placeholder="t('由英文字母_数字_连字符_组成')"
             :readonly="isReadonly" />
           <span class="belong-business">{{ t('所属业务') }} : {{ bizInfo.name }}</span>
@@ -158,7 +158,7 @@
    * 获取表单基础信息
    */
   const getFormData = () => ({
-    module_name: (route.query.module_name ?? '') as string,
+    alias_name: (route.query.alias_name ?? '') as string,
     mysql_type: ticketType,
     version: '',
     character_set: '',
@@ -191,7 +191,7 @@
     submit: false,
   });
   const rules = {
-    module_name: [
+    alias_name: [
       {
         required: true,
         message: t('模块名称不能为空'),
@@ -367,9 +367,12 @@
 
       // 新建模块或已经新建成功则不执行创建
       if (!isReadonly.value) {
+        // aliasname-version-charset
+        const dbModuleName = `${formData.alias_name}-${formData.version}-${formData.character_set}`;
         const createResult = await createModules({
           biz_id: bizId,
-          db_module_name: formData.module_name,
+          alias_name: formData.alias_name,
+          db_module_name: dbModuleName,
           cluster_type: ticketInfo.type,
         });
         moduleId.value = createResult.db_module_id;
@@ -409,7 +412,7 @@
       });
 
       await updateBusinessConfig({
-        name: formData.module_name,
+        name: formData.alias_name,
         conf_items: confItems,
         description: '',
         publish_description: '',
diff --git a/dbm-ui/frontend/src/views/service-apply/create-db-module/SqlServerCreateDbModule.vue b/dbm-ui/frontend/src/views/service-apply/create-db-module/SqlServerCreateDbModule.vue
index 43f4177ef3..6838a95ad0 100644
--- a/dbm-ui/frontend/src/views/service-apply/create-db-module/SqlServerCreateDbModule.vue
+++ b/dbm-ui/frontend/src/views/service-apply/create-db-module/SqlServerCreateDbModule.vue
@@ -10,11 +10,11 @@
         :title="t('模块信息')">
         <BkFormItem
           :label="t('模块名称')"
-          property="module_name"
+          property="alias_name"
           required
-          :rules="rules.module_name">
+          :rules="rules.alias_name">
           <BkInput
-            v-model="formData.module_name"
+            v-model="formData.alias_name"
             :placeholder="t('由英文字母_数字_连字符_组成')" />
           <span class="belong-business ml-16"> {{ t('所属业务') }} : {{ bizInfo.name }} </span>
         </BkFormItem>
@@ -209,7 +209,7 @@
   const bizInfo = bizs.find((info) => info.bk_biz_id === bizId) || { name: '' };
 
   const rules = {
-    module_name: [
+    alias_name: [
       {
         required: true,
         message: t('模块名称不能为空'),
@@ -227,7 +227,7 @@
    * 获取表单基础信息
    */
   const getFormData = () => ({
-    module_name: '',
+    alias_name: '',
     version: '',
     camelCase: '', // 数据库配置
     character_set: 'Chinese_PRC_CI_AS', // 字符集
@@ -355,7 +355,8 @@
       await formRef.value.validate();
       // 创建模块
       await runCreateModules({
-        db_module_name: formData.module_name,
+        alias_name: formData.alias_name,
+        db_module_name: formData.alias_name,
         cluster_type: ticketInfo.type,
         biz_id: bizId,
       });
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/TargetClusterPreview.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/TargetClusterPreview.vue
index 983264df24..615d3e3732 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/TargetClusterPreview.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/spider/TargetClusterPreview.vue
@@ -145,7 +145,7 @@
     onSuccess(res) {
       listState.dbModuleList = res.map(item => ({
         id: item.db_module_id,
-        name: item.name,
+        name: item.alias_name,
       }));
     },
   });