From 24757bb5629b0dc2ab8dbc771e80620e1a929fbd Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Oct 2025 20:22:53 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90mall=E3=80=91diy=20editor?=
 =?UTF-8?q?=20=E7=9A=84=20app-link-input=20=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=EF=BC=8850%=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/app-link-input/index.vue       | 25 +++++++++++++------
 ...nk-select-dialog.vue => select-dialog.vue} | 15 +++++++----
 .../views/mall/promotion/components/index.ts  |  2 +-
 3 files changed, 28 insertions(+), 14 deletions(-)
 rename apps/web-ele/src/views/mall/promotion/components/app-link-input/{app-link-select-dialog.vue => select-dialog.vue} (98%)

diff --git a/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue b/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue
index 2118dda5b..e1060efaa 100644
--- a/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue
@@ -1,14 +1,15 @@
 <script lang="ts" setup>
-// TODO @AI：改成 El 标签风格，而不是 el-
 // TODO @AI：一些 modal 是否使用 Modal 组件，而不是 el-modal？
 import { ref, watch } from 'vue';
 
-import AppLinkSelectDialog from './app-link-select-dialog.vue';
+import { ElButton, ElInput } from 'element-plus';
+
+import AppLinkSelectDialog from './select-dialog.vue';
 
 /** APP 链接输入框 */
 defineOptions({ name: 'AppLinkInput' });
 
-// 定义属性
+/** 定义属性 */
 const props = defineProps({
   modelValue: {
     type: String,
@@ -23,8 +24,16 @@ const emit = defineEmits<{
 const dialogRef = ref(); // 选择对话框
 
 const appLink = ref(''); // 当前的链接
-const handleOpenDialog = () => dialogRef.value?.open(appLink.value); // 处理打开对话框
-const handleLinkSelected = (link: string) => (appLink.value = link); // 处理 APP 链接选中
+
+/** 处理打开对话框 */
+function handleOpenDialog() {
+  return dialogRef.value?.open(appLink.value);
+}
+
+/** 处理 APP 链接选中 */
+function handleLinkSelected(link: string) {
+  appLink.value = link;
+}
 
 watch(
   () => props.modelValue,
@@ -38,11 +47,11 @@ watch(
 );
 </script>
 <template>
-  <el-input v-model="appLink" placeholder="输入或选择链接">
+  <ElInput v-model="appLink" placeholder="输入或选择链接">
     <template #append>
-      <el-button @click="handleOpenDialog">选择</el-button>
+      <ElButton @click="handleOpenDialog">选择</ElButton>
     </template>
-  </el-input>
+  </ElInput>
 
   <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue b/apps/web-ele/src/views/mall/promotion/components/app-link-input/select-dialog.vue
similarity index 98%
rename from apps/web-ele/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
rename to apps/web-ele/src/views/mall/promotion/components/app-link-input/select-dialog.vue
index b2362962a..7962dc165 100644
--- a/apps/web-ele/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/app-link-input/select-dialog.vue
@@ -39,9 +39,10 @@ const detailSelectDialog = ref<{
   type: undefined,
 }); // 详情选择对话框
 
-/** 打开弹窗 */
 const dialogVisible = ref(false);
-const open = (link: string) => {
+
+/** 打开弹窗 */
+function open(link: string) {
   activeAppLink.value.path = link;
   dialogVisible.value = true;
   // 滚动到当前的链接
@@ -55,14 +56,16 @@ const open = (link: string) => {
     }),
   );
   if (group) {
+    // TODO @AI：await 方式；
     // 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
     nextTick(() => handleGroupSelected(group.name));
   }
-};
+}
+
 defineExpose({ open });
 
 /** 处理 APP 链接选中 */
-const handleAppLinkSelected = (appLink: AppLink) => {
+function handleAppLinkSelected(appLink: AppLink) {
   if (!isSameLink(appLink.path, activeAppLink.value.path)) {
     activeAppLink.value = appLink;
   }
@@ -82,7 +85,7 @@ const handleAppLinkSelected = (appLink: AppLink) => {
       break;
     }
   }
-};
+}
 
 function handleSubmit() {
   dialogVisible.value = false;
@@ -92,6 +95,7 @@ function handleSubmit() {
 
 /**
  * 处理右侧链接列表滚动
+ *
  * @param {object} param0 滚动事件参数
  * @param {number} param0.scrollTop 滚动条的位置
  */
@@ -214,6 +218,7 @@ function handleProductCategorySelected(id: number) {
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </el-dialog>
+
   <el-dialog v-model="detailSelectDialog.visible" title="" width="50%">
     <el-form class="min-h-[200px]">
       <el-form-item
diff --git a/apps/web-ele/src/views/mall/promotion/components/index.ts b/apps/web-ele/src/views/mall/promotion/components/index.ts
index 96c8500ff..6dbe001fe 100644
--- a/apps/web-ele/src/views/mall/promotion/components/index.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/index.ts
@@ -1,5 +1,5 @@
-export { default as AppLinkSelectDialog } from './app-link-input/app-link-select-dialog.vue';
 export { default as AppLinkInput } from './app-link-input/index.vue';
+export { default as AppLinkSelectDialog } from './app-link-input/select-dialog.vue';
 export { default as ColorInput } from './color-input/index.vue';
 export { default as DiyEditor } from './diy-editor/index.vue';
 export { type DiyComponentLibrary, PAGE_LIBS } from './diy-editor/util';