feat：【ele】【mall】将 app-link-input 迁移到 mall/promotion/components 中，聚焦一点

apps/web-ele/src/components/diy-editor/components/mobile/Carousel/property.vue

@@ -16,7 +16,7 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import Draggable from '#/components/draggable/index.vue';
 import UploadFile from '#/components/upload/file-upload.vue';

apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue

@@ -10,7 +10,7 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 import Draggable from '#/components/draggable/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 

apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/property.vue

@@ -11,7 +11,7 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 import Draggable from '#/components/draggable/index.vue';
 import InputWithColor from '#/components/input-with-color/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';

apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ControlDot } from './controller';
 
-import type { AppLink } from '#/components/app-link-input/data';
+import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
 import type { HotZoneItemProperty } from '#/components/diy-editor/components/mobile/HotZone/config';
 
 import { ref } from 'vue';

apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue

@@ -4,7 +4,7 @@ import type { ImageBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 

apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue

@@ -6,7 +6,7 @@ import { ref } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElSlider, ElText } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import MagicCubeEditor from '#/components/magic-cube-editor/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';

apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/property.vue

@@ -11,7 +11,7 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import Draggable from '#/components/draggable/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';

apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue

@@ -4,7 +4,7 @@ import type { MenuListProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElText } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import Draggable from '#/components/draggable/index.vue';
 import InputWithColor from '#/components/input-with-color/index.vue';

apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue

@@ -13,7 +13,7 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 import ColorInput from '#/components/color-input/index.vue';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import Draggable from '#/components/draggable/index.vue';

apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue

@@ -15,7 +15,7 @@ import {
 } from 'element-plus';
 
 import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 import ColorInput from '#/components/color-input/index.vue';
 import MagicCubeEditor from '#/components/magic-cube-editor/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';

apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue

@@ -4,7 +4,7 @@ import type { NoticeBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 import ColorInput from '#/components/color-input/index.vue';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import Draggable from '#/components/draggable/index.vue';

apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/property.vue

@@ -15,7 +15,7 @@ import {
   ElText,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 import ColorInput from '#/components/color-input/index.vue';
 import Draggable from '#/components/draggable/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';

apps/web-ele/src/components/diy-editor/components/mobile/title-bar/property.vue

@@ -16,7 +16,7 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import AppLinkInput from '#/components/app-link-input/index.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import InputWithColor from '#/components/input-with-color/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';

apps/web-ele/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue

@@ -13,17 +13,31 @@ import ProductCategorySelect from '#/views/mall/product/category/components/prod
 
 import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM } from './data';
 
-// APP 链接选择弹框
+/** APP 链接选择弹框 */
 defineOptions({ name: 'AppLinkSelectDialog' });
-// 处理绑定值更新
+
 const emit = defineEmits<{
   appLinkChange: [appLink: AppLink];
   change: [link: string];
 }>();
-// 选中的分组，默认选中第一个
+
-const activeGroup = ref(APP_LINK_GROUP_LIST[0]?.name);
+const activeGroup = ref(APP_LINK_GROUP_LIST[0]?.name); // 选中的分组，默认选中第一个
-// 选中的 APP 链接
+const activeAppLink = ref({} as AppLink); // 选中的 APP 链接
-const activeAppLink = ref({} as AppLink);
+
+const linkScrollbar = ref<ScrollbarInstance>(); // 右侧滚动条
+const groupTitleRefs = ref<HTMLInputElement[]>([]); // 分组标题引用列表
+const groupScrollbar = ref<ScrollbarInstance>(); // 分组滚动条
+const groupBtnRefs = ref<ButtonInstance[]>([]); // 分组引用列表
+
+const detailSelectDialog = ref<{
+  id?: number;
+  type?: APP_LINK_TYPE_ENUM;
+  visible: boolean;
+}>({
+  visible: false,
+  id: undefined,
+  type: undefined,
+}); // 详情选择对话框
 
 /** 打开弹窗 */
 const dialogVisible = ref(false);
@@ -47,7 +61,7 @@ const open = (link: string) => {
 };
 defineExpose({ open });
 
-// 处理 APP 链接选中
+/** 处理 APP 链接选中 */
 const handleAppLinkSelected = (appLink: AppLink) => {
   if (!isSameLink(appLink.path, activeAppLink.value.path)) {
     activeAppLink.value = appLink;
@@ -70,20 +84,18 @@ const handleAppLinkSelected = (appLink: AppLink) => {
   }
 };
 
-const handleSubmit = () => {
+function handleSubmit() {
   dialogVisible.value = false;
   emit('change', activeAppLink.value.path);
   emit('appLinkChange', activeAppLink.value);
-};
+}
 
-// 分组标题引用列表
-const groupTitleRefs = ref<HTMLInputElement[]>([]);
 /**
  * 处理右侧链接列表滚动
  * @param {object} param0 滚动事件参数
  * @param {number} param0.scrollTop 滚动条的位置
  */
-const handleScroll = ({ scrollTop }: { scrollTop: number }) => {
+function handleScroll({ scrollTop }: { scrollTop: number }) {
   const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
     // 获取标题的位置信息
     const { offsetHeight, offsetTop } = titleEl;
@@ -96,12 +108,10 @@ const handleScroll = ({ scrollTop }: { scrollTop: number }) => {
     // 同步左侧的滚动条位置
     scrollToGroupBtn(activeGroup.value);
   }
-};
+}
 
-// 右侧滚动条
+/** 处理分组选中 */
-const linkScrollbar = ref<ScrollbarInstance>();
+function handleGroupSelected(group: string) {
-// 处理分组选中
-const handleGroupSelected = (group: string) => {
   activeGroup.value = group;
   const titleRef = groupTitleRefs.value.find(
     (item: HTMLInputElement) => item.textContent === group,
@@ -110,39 +120,26 @@ const handleGroupSelected = (group: string) => {
     // 滚动分组标题
     linkScrollbar.value?.setScrollTop(titleRef.offsetTop);
   }
-};
+}
 
-// 分组滚动条
+/** 自动滚动分组按钮，确保分组按钮保持在可视区域内 */
-const groupScrollbar = ref<ScrollbarInstance>();
+function scrollToGroupBtn(group: string) {
-// 分组引用列表
-const groupBtnRefs = ref<ButtonInstance[]>([]);
-// 自动滚动分组按钮，确保分组按钮保持在可视区域内
-const scrollToGroupBtn = (group: string) => {
   const groupBtn = groupBtnRefs.value
     .map((btn: ButtonInstance) => btn.ref)
     .find((ref: HTMLButtonElement | undefined) => ref?.textContent === group);
   if (groupBtn) {
     groupScrollbar.value?.setScrollTop(groupBtn.offsetTop);
   }
-};
+}
 
-// 是否为相同的链接（不比较参数，只比较链接）
+/** 是否为相同的链接（不比较参数，只比较链接） */
-const isSameLink = (link1: string, link2: string) => {
+function isSameLink(link1: string, link2: string) {
   return link2 ? link1.split('?')[0] === link2.split('?')[0] : false;
-};
+}
 
-// 详情选择对话框
+/** 处理详情选择 */
-const detailSelectDialog = ref<{
+function handleProductCategorySelected(id: number) {
-  id?: number;
+  // TODO @AI：这里有点问题；
-  type?: APP_LINK_TYPE_ENUM;
-  visible: boolean;
-}>({
-  visible: false,
-  id: undefined,
-  type: undefined,
-});
-// 处理详情选择
-const handleProductCategorySelected = (id: number) => {
   const url = new URL(activeAppLink.value.path, 'http://127.0.0.1');
   // 修改 id 参数
   url.searchParams.set('id', `${id}`);
@@ -152,7 +149,7 @@ const handleProductCategorySelected = (id: number) => {
   detailSelectDialog.value.visible = false;
   // 重置 id
   detailSelectDialog.value.id = undefined;
-};
+}
 </script>
 <template>
   <el-dialog v-model="dialogVisible" title="选择链接" width="65%">

apps/web-ele/src/views/mall/promotion/components/app-link-input/data.ts

@@ -1,48 +1,32 @@
-// APP 链接分组
+/** APP 链接分组 */
 export interface AppLinkGroup {
-  // 分组名称
+  name: string; // 分组名称
-  name: string;
+  links: AppLink[]; // 链接列表
-  // 链接列表
-  links: AppLink[];
 }
 
-// APP 链接
+/** APP 链接 */
 export interface AppLink {
-  // 链接名称
+  name: string; // 链接名称
-  name: string;
+  path: string; // 链接地址
-  // 链接地址
+  type?: APP_LINK_TYPE_ENUM; // 链接的类型
-  path: string;
-  // 链接的类型
-  type?: APP_LINK_TYPE_ENUM;
 }
 
-// APP 链接类型（需要特殊处理，例如商品详情）
+/** APP 链接类型（需要特殊处理，例如商品详情） */
 export enum APP_LINK_TYPE_ENUM {
-  // 拼团活动
+  ACTIVITY_COMBINATION, // 拼团活动
-  ACTIVITY_COMBINATION,
+  ACTIVITY_POINT, // 积分商城活动
-  // 积分商城活动
+  ACTIVITY_SECKILL, // 秒杀活动
-  ACTIVITY_POINT,
+  ARTICLE_DETAIL, // 文章详情
-  // 秒杀活动
+  COUPON_DETAIL, // 优惠券详情
-  ACTIVITY_SECKILL,
+  DIY_PAGE_DETAIL, // 自定义页面详情
-  // 文章详情
+  PRODUCT_CATEGORY_LIST, // 品类列表
-  ARTICLE_DETAIL,
+  PRODUCT_DETAIL_COMBINATION, // 拼团商品详情
-  // 优惠券详情
+  PRODUCT_DETAIL_NORMAL, // 商品详情
-  COUPON_DETAIL,
+  PRODUCT_DETAIL_SECKILL, // 秒杀商品详情
-  // 自定义页面详情
+  PRODUCT_LIST, // 商品列表
-  DIY_PAGE_DETAIL,
-  // 品类列表
-  PRODUCT_CATEGORY_LIST,
-  // 拼团商品详情
-  PRODUCT_DETAIL_COMBINATION,
-  // 商品详情
-  PRODUCT_DETAIL_NORMAL,
-  // 秒杀商品详情
-  PRODUCT_DETAIL_SECKILL,
-  // 商品列表
-  PRODUCT_LIST,
 }
 
-// APP 链接列表（做一下持久化？）
+/** APP 链接列表（做一下持久化？） */
 export const APP_LINK_GROUP_LIST = [
   {
     name: '商城',

apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue

@@ -1,33 +1,29 @@
 <script lang="ts" setup>
-// TODO @芋艿：后续合并到 diy-editor 里，并不是通用的；
 import { ref, watch } from 'vue';
 
 import AppLinkSelectDialog from './app-link-select-dialog.vue';
 
-// APP 链接输入框
+/** APP 链接输入框 */
 defineOptions({ name: 'AppLinkInput' });
+
 // 定义属性
 const props = defineProps({
-  // 当前选中的链接
   modelValue: {
     type: String,
     default: '',
-  },
+  }, // 当前选中的链接
 });
-// setter
+
 const emit = defineEmits<{
   'update:modelValue': [link: string];
 }>();
-// 当前的链接
-const appLink = ref('');
-// 选择对话框
-const dialogRef = ref();
-// 处理打开对话框
-const handleOpenDialog = () => dialogRef.value?.open(appLink.value);
-// 处理 APP 链接选中
-const handleLinkSelected = (link: string) => (appLink.value = link);
 
-// getter
+const dialogRef = ref(); // 选择对话框
+
+const appLink = ref(''); // 当前的链接
+const handleOpenDialog = () => dialogRef.value?.open(appLink.value); // 处理打开对话框
+const handleLinkSelected = (link: string) => (appLink.value = link); // 处理 APP 链接选中
+
 watch(
   () => props.modelValue,
   () => (appLink.value = props.modelValue),
@@ -45,5 +41,6 @@ watch(
       <el-button @click="handleOpenDialog">选择</el-button>
     </template>
   </el-input>
+
   <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
 </template>

apps/web-ele/src/views/mall/promotion/components/index.ts

@@ -0,0 +1,2 @@
+export { default as VerticalButtonGroup } from './vertical-button-group/index.vue';
+export { default as AppLinkInput } from './app-link-input/index.vue';