smart-flow/yudao-ui-admin-vben
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV
2025-10-25 15:53:51 +08:00
parent 457add90bd
commit 2909d1c4fa
17 changed files with 84 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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);
// 选中的 APP 链接
const activeAppLink = ref({} as AppLink);
const activeGroup = ref(APP_LINK_GROUP_LIST[0]?.name); // 选中的分组，默认选中第一个
const activeAppLink = ref({} as AppLink); // 选中的 APP 链接
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>();
// 处理分组选中
const handleGroupSelected = (group: string) => {
/** 处理分组选中 */
function 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>();
// 分组引用列表
const groupBtnRefs = ref<ButtonInstance[]>([]);
// 自动滚动分组按钮，确保分组按钮保持在可视区域内
const scrollToGroupBtn = (group: string) => {
/** 自动滚动分组按钮，确保分组按钮保持在可视区域内 */
function 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<{
id?: number;
type?: APP_LINK_TYPE_ENUM;
visible: boolean;
}>({
visible: false,
id: undefined,
type: undefined,
});
// 处理详情选择
const handleProductCategorySelected = (id: number) => {
/** 处理详情选择 */
function handleProductCategorySelected(id: number) {
// TODO @AI：这里有点问题；
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%">

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

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

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

@@ -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>

2
apps/web-ele/src/views/mall/promotion/components/index.ts Normal file
View File

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