feat：【mall】diy editor 的 app-link-input 代码优化（50%）

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>

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

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';