ZF/yudao-ui-admin-vben
1
0
Fork 0
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git synced 2025-12-30 10:32:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'yudao/dev' into dev

Browse Source
This commit is contained in:
jason
2025-11-05 09:56:47 +08:00
parent 62407c7aa2 db804c2602
commit ed923a2661
95 changed files with 2658 additions and 1351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
.workflow/pipeline-20251103.yml Normal file
View File

@@ -0,0 +1,56 @@
version: '1.0'
name: pipeline-20251103
displayName: master-build
triggers:
trigger: auto
push:
branches:
prefix:
- ''
pr:
branches:
prefix:
- ''
schedule:
- cron: '* * * 1 * ? *'
stages:
- name: stage-72bb5db9
displayName: build
strategy: naturally
trigger: auto
executor: []
steps:
- step: build@nodejs
name: build_nodejs
displayName: Nodejs 构建
nodeVersion: 24.5.0
commands:
- '# 设置NPM源，提升安装速度'
- npm config set registry https://registry.npmmirror.com
- '# 安装pnpm'
- npm add -g pnpm
- '# 安装依赖'
- pnpm i
- '# 检查lint'
- pnpm lint
- '# 检查check'
- pnpm check
- '# 执行编译命令antd'
- pnpm build:antd
- '# 执行编译命令ele'
- pnpm build:ele
- '# 执行编译命令naive'
- pnpm build:naive
artifacts:
- name: BUILD_ARTIFACT
path:
- ./apps/web-antd/dist/
- ./apps/web-ele/dist/
- ./apps/web-naive/dist/
caches:
- ~/.npm
- ~/.yarn
- ~/.pnpm
notify: []
strategy:
retry: '0'

4
apps/web-antd/src/components/description/description.vue
View File

@@ -133,9 +133,7 @@ export default defineComponent({
>
{() => {
if (item.slot) {
// TODO @xingyu：这里要 inline 掉么？
const slotContent = getSlot(slots, item.slot, data);
return slotContent;
return getSlot(slots, item.slot, data);
}
if (!contentMinWidth) {
return getContent();

2
apps/web-antd/src/plugins/form-create/index.ts
View File

@@ -96,7 +96,7 @@ export function setupFormCreate(app: App) {
components.forEach((component) => {
app.component(component.name as string, component);
});
// TODO @xingyu：这里为啥 app.component('AMessage', message); 看官方是没有的；
// TODO @xingyu：这里为啥 app.component('AMessage', message); 看官方是没有的； 需要额外引入
app.component('AMessage', message);
formCreate.use(install);
app.use(formCreate);

1
apps/web-antd/src/views/bpm/model/definition/data.ts
View File

@@ -1,5 +1,4 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
import { DICT_TYPE } from '@vben/constants';

6
apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
View File

@@ -109,11 +109,11 @@ function getApprovalNodeIcon(taskStatus: number, nodeType: BpmNodeTypeEnum) {
}
if (
[
BpmNodeTypeEnum.START_USER_NODE,
BpmNodeTypeEnum.USER_TASK_NODE,
BpmNodeTypeEnum.TRANSACTOR_NODE,
BpmNodeTypeEnum.CHILD_PROCESS_NODE,
BpmNodeTypeEnum.END_EVENT_NODE,
BpmNodeTypeEnum.START_USER_NODE,
BpmNodeTypeEnum.TRANSACTOR_NODE,
BpmNodeTypeEnum.USER_TASK_NODE,
].includes(nodeType)
) {
return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';

2
apps/web-antd/src/views/bpm/task/done/index.vue
View File

@@ -6,8 +6,6 @@ import { DocAlert, Page } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getTaskDonePage, withdrawTask } from '#/api/bpm/task';
import { router } from '#/router';

1
apps/web-antd/src/views/mall/product/spu/form/data.ts
View File

@@ -102,7 +102,6 @@ export function useInfoFormSchema(): VbenFormSchema[] {
}
/** 价格库存的表单 */
// TODO @puhui999：貌似太宽了。。。屏幕小的，整个 table 展示补全哈~~
export function useSkuFormSchema(
propertyList: any[] = [],
isDetail: boolean = false,

5
apps/web-antd/src/views/mall/product/spu/form/index.vue
View File

@@ -128,10 +128,6 @@ const [InfoForm, infoFormApi] = useVbenForm({
const [SkuForm, skuFormApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
@@ -364,6 +360,7 @@ onMounted(async () => {
<template #singleSkuList>
<SkuList
ref="skuListRef"
class="w-full"
:is-detail="isDetail"
:prop-form-data="formData"
:property-list="propertyList"

86
apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue
View File

@@ -289,17 +289,22 @@ defineExpose({
</script>
<template>
<div>
<div class="w-full">
<!-- 情况一：添加/修改 -->
<VxeTable
v-if="!isDetail && !isActivityComponent"
:data="isBatch ? skuList : formData?.skus || []"
border
max-height="500"
:column-config="{
resizable: true,
}"
:resizable-config="{
dragMode: 'fixed',
}"
size="small"
class="w-full"
>
<VxeColumn align="center" title="图片" min-width="120">
<VxeColumn align="center" title="图片" width="120" fixed="left">
<template #default="{ row }">
<ImageUpload
v-model:value="row.picUrl"
@@ -316,7 +321,8 @@ defineExpose({
:key="index"
:title="item.label"
align="center"
min-width="120"
fixed="left"
min-width="80"
>
<template #default="{ row }">
<span class="font-bold text-[#40aaff]">
@@ -325,12 +331,12 @@ defineExpose({
</template>
</VxeColumn>
</template>
<VxeColumn align="center" title="商品条码" min-width="168">
<VxeColumn align="center" title="商品条码" width="168">
<template #default="{ row }">
<Input v-model:value="row.barCode" class="w-full" />
</template>
</VxeColumn>
<VxeColumn align="center" title="销售价" min-width="168">
<VxeColumn align="center" title="销售价" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.price"
@@ -341,7 +347,7 @@ defineExpose({
/>
</template>
</VxeColumn>
<VxeColumn align="center" title="市场价" min-width="168">
<VxeColumn align="center" title="市场价" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.marketPrice"
@@ -352,7 +358,7 @@ defineExpose({
/>
</template>
</VxeColumn>
<VxeColumn align="center" title="成本价" min-width="168">
<VxeColumn align="center" title="成本价" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.costPrice"
@@ -363,12 +369,12 @@ defineExpose({
/>
</template>
</VxeColumn>
<VxeColumn align="center" title="库存" min-width="168">
<VxeColumn align="center" title="库存" width="168">
<template #default="{ row }">
<InputNumber v-model:value="row.stock" :min="0" class="w-full" />
</template>
</VxeColumn>
<VxeColumn align="center" title="重量(kg)" min-width="168">
<VxeColumn align="center" title="重量(kg)" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.weight"
@@ -379,7 +385,7 @@ defineExpose({
/>
</template>
</VxeColumn>
<VxeColumn align="center" title="体积(m^3)" min-width="168">
<VxeColumn align="center" title="体积(m^3)" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.volume"
@@ -391,7 +397,7 @@ defineExpose({
</template>
</VxeColumn>
<template v-if="formData?.subCommissionType">
<VxeColumn align="center" title="一级返佣(元)" min-width="168">
<VxeColumn align="center" title="一级返佣(元)" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.firstBrokeragePrice"
@@ -402,7 +408,7 @@ defineExpose({
/>
</template>
</VxeColumn>
<VxeColumn align="center" title="二级返佣(元)" min-width="168">
<VxeColumn align="center" title="二级返佣(元)" width="168">
<template #default="{ row }">
<InputNumber
v-model:value="row.secondBrokeragePrice"
@@ -446,13 +452,18 @@ defineExpose({
border
max-height="500"
size="small"
class="w-full"
:column-config="{
resizable: true,
}"
:resizable-config="{
dragMode: 'fixed',
}"
:checkbox-config="isComponent ? { reserve: true } : undefined"
@checkbox-change="handleSelectionChange"
@checkbox-all="handleSelectionChange"
>
<VxeColumn v-if="isComponent" type="checkbox" width="45" />
<VxeColumn align="center" title="图片" min-width="120">
<VxeColumn align="center" title="图片" max-width="140" fixed="left">
<template #default="{ row }">
<Image
v-if="row.picUrl"
@@ -469,7 +480,8 @@ defineExpose({
:key="index"
:title="item.label"
align="center"
min-width="80"
max-width="80"
fixed="left"
>
<template #default="{ row }">
<span class="font-bold text-[#40aaff]">
@@ -478,48 +490,48 @@ defineExpose({
</template>
</VxeColumn>
</template>
<VxeColumn align="center" title="商品条码" min-width="100">
<VxeColumn align="center" title="商品条码" width="100">
<template #default="{ row }">
{{ row.barCode }}
</template>
</VxeColumn>
<VxeColumn align="center" title="销售价(元)" min-width="80">
<VxeColumn align="center" title="销售价(元)" width="80">
<template #default="{ row }">
{{ row.price }}
</template>
</VxeColumn>
<VxeColumn align="center" title="市场价(元)" min-width="80">
<VxeColumn align="center" title="市场价(元)" width="80">
<template #default="{ row }">
{{ row.marketPrice }}
</template>
</VxeColumn>
<VxeColumn align="center" title="成本价(元)" min-width="80">
<VxeColumn align="center" title="成本价(元)" width="80">
<template #default="{ row }">
{{ row.costPrice }}
</template>
</VxeColumn>
<VxeColumn align="center" title="库存" min-width="80">
<VxeColumn align="center" title="库存" width="80">
<template #default="{ row }">
{{ row.stock }}
</template>
</VxeColumn>
<VxeColumn align="center" title="重量(kg)" min-width="80">
<VxeColumn align="center" title="重量(kg)" width="80">
<template #default="{ row }">
{{ row.weight }}
</template>
</VxeColumn>
<VxeColumn align="center" title="体积(m^3)" min-width="80">
<VxeColumn align="center" title="体积(m^3)" width="80">
<template #default="{ row }">
{{ row.volume }}
</template>
</VxeColumn>
<template v-if="formData?.subCommissionType">
<VxeColumn align="center" title="一级返佣(元)" min-width="80">
<VxeColumn align="center" title="一级返佣(元)" width="80">
<template #default="{ row }">
{{ row.firstBrokeragePrice }}
</template>
</VxeColumn>
<VxeColumn align="center" title="二级返佣(元)" min-width="80">
<VxeColumn align="center" title="二级返佣(元)" width="80">
<template #default="{ row }">
{{ row.secondBrokeragePrice }}
</template>
@@ -534,10 +546,15 @@ defineExpose({
border
max-height="500"
size="small"
class="w-full"
:column-config="{
resizable: true,
}"
:resizable-config="{
dragMode: 'fixed',
}"
>
<VxeColumn v-if="isComponent" type="checkbox" width="45" />
<VxeColumn align="center" title="图片" min-width="120">
<VxeColumn v-if="isComponent" type="checkbox" width="45" fixed="left" />
<VxeColumn align="center" title="图片" max-width="140" fixed="left">
<template #default="{ row }">
<Image
:src="row.picUrl"
@@ -553,7 +570,8 @@ defineExpose({
:key="index"
:title="item.label"
align="center"
min-width="80"
width="80"
fixed="left"
>
<template #default="{ row }">
<span class="font-bold text-[#40aaff]">
@@ -562,27 +580,27 @@ defineExpose({
</template>
</VxeColumn>
</template>
<VxeColumn align="center" title="商品条码" min-width="100">
<VxeColumn align="center" title="商品条码" width="100">
<template #default="{ row }">
{{ row.barCode }}
</template>
</VxeColumn>
<VxeColumn align="center" title="销售价(元)" min-width="80">
<VxeColumn align="center" title="销售价(元)" width="80">
<template #default="{ row }">
{{ formatToFraction(row.price) }}
</template>
</VxeColumn>
<VxeColumn align="center" title="市场价(元)" min-width="80">
<VxeColumn align="center" title="市场价(元)" width="80">
<template #default="{ row }">
{{ formatToFraction(row.marketPrice) }}
</template>
</VxeColumn>
<VxeColumn align="center" title="成本价(元)" min-width="80">
<VxeColumn align="center" title="成本价(元)" width="80">
<template #default="{ row }">
{{ formatToFraction(row.costPrice) }}
</template>
</VxeColumn>
<VxeColumn align="center" title="库存" min-width="80">
<VxeColumn align="center" title="库存" width="80">
<template #default="{ row }">
{{ row.stock }}
</template>

4
apps/web-antd/src/views/mall/promotion/banner/data.ts
View File

@@ -145,7 +145,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
cellRender: {
name: 'CellDict',
props: {
dictType: DICT_TYPE.COMMON_STATUS,
type: DICT_TYPE.COMMON_STATUS,
},
},
},
@@ -156,7 +156,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
cellRender: {
name: 'CellDict',
props: {
dictType: DICT_TYPE.PROMOTION_BANNER_POSITION,
type: DICT_TYPE.PROMOTION_BANNER_POSITION,
},
},
},

87
apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
View File

@@ -37,9 +37,12 @@ const detailSelectDialog = ref<{
type: undefined,
}); // 详情选择对话框
/** 打开弹窗 */
const dialogVisible = ref(false);
const open = (link: string) => {
defineExpose({ open });
/** 打开弹窗 */
async function open(link: string) {
activeAppLink.value.path = link;
dialogVisible.value = true;
// 滚动到当前的链接
@@ -54,19 +57,18 @@ const open = (link: string) => {
);
if (group) {
// 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
nextTick(() => handleGroupSelected(group.name));
await 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;
}
switch (appLink.type) {
case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST: {
detailSelectDialog.value.visible = true;
detailSelectDialog.value.type = appLink.type;
// 返显
detailSelectDialog.value.id =
@@ -74,26 +76,30 @@ const handleAppLinkSelected = (appLink: AppLink) => {
'id',
`http://127.0.0.1${activeAppLink.value.path}`,
) || undefined;
detailSelectDialog.value.visible = true;
break;
}
default: {
break;
}
}
};
}
/** 处理确认提交 */
function handleSubmit() {
dialogVisible.value = false;
emit('change', activeAppLink.value.path);
emit('appLinkChange', activeAppLink.value);
dialogVisible.value = false;
}
/**
* 处理右侧链接列表滚动
*
* @param {object} param0 滚动事件参数
* @param {number} param0.scrollTop 滚动条的位置
*/
function handleScroll({ scrollTop }: { scrollTop: number }) {
function handleScroll(event: Event) {
const scrollTop = (event.target as HTMLDivElement).scrollTop;
const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
// 获取标题的位置信息
const { offsetHeight, offsetTop } = titleEl;
@@ -137,47 +143,59 @@ function isSameLink(link1: string, link2: string) {
/** 处理详情选择 */
function handleProductCategorySelected(id: number) {
// TODO @AI：这里有点问题；activeAppLink 地址；
// 生成 activeAppLink
const url = new URL(activeAppLink.value.path, 'http://127.0.0.1');
// 修改 id 参数
url.searchParams.set('id', `${id}`);
// 排除域名
activeAppLink.value.path = `${url.pathname}${url.search}`;
// 关闭对话框
// 关闭对话框，并重置 id
detailSelectDialog.value.visible = false;
// 重置 id
detailSelectDialog.value.id = undefined;
}
</script>
<template>
<Modal v-model:open="dialogVisible" title="选择链接" width="65%">
<Modal
v-model:open="dialogVisible"
title="选择链接"
width="65%"
@ok="handleSubmit"
>
<div class="flex h-[500px] gap-2">
<!-- 左侧分组列表 -->
<div class="flex h-full flex-col overflow-y-auto" ref="groupScrollbar">
<Button
v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
:key="groupIndex"
class="mb-1 ml-0 mr-4 w-[90px] justify-start"
:class="[{ active: activeGroup === group.name }]"
ref="groupBtnRefs"
:type="activeGroup === group.name ? 'primary' : 'default'"
@click="handleGroupSelected(group.name)"
<div class="flex flex-col">
<!-- 左侧分组列表 -->
<div
class="h-full overflow-y-auto border-r border-gray-200 pr-2"
ref="groupScrollbar"
>
{{ group.name }}
</Button>
<Button
v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
:key="groupIndex"
class="!ml-0 mb-1 mr-4 !justify-start"
:class="[{ active: activeGroup === group.name }]"
ref="groupBtnRefs"
:type="activeGroup === group.name ? 'primary' : 'default'"
:ghost="activeGroup !== group.name"
@click="handleGroupSelected(group.name)"
>
{{ group.name }}
</Button>
</div>
</div>
<!-- 右侧链接列表 -->
<div
class="h-full flex-1 overflow-y-auto"
class="h-full flex-1 overflow-y-auto pl-2"
@scroll="handleScroll"
ref="linkScrollbar"
>
<div
v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
:key="groupIndex"
class="mb-4 border-b border-gray-100 pb-4 last:mb-0 last:border-b-0"
>
<!-- 分组标题 -->
<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
<div class="mb-2 font-bold" ref="groupTitleRefs">
{{ group.name }}
</div>
<!-- 链接列表 -->
<Tooltip
v-for="(appLink, appLinkIndex) in group.links"
@@ -201,13 +219,9 @@ function handleProductCategorySelected(id: number) {
</div>
</div>
</div>
<!-- 底部对话框操作按钮 -->
<template #footer>
<Button type="primary" @click="handleSubmit">确 定</Button>
<Button @click="dialogVisible = false">取 消</Button>
</template>
</Modal>
<Modal v-model:open="detailSelectDialog.visible" title="" width="50%">
<Modal v-model:open="detailSelectDialog.visible" title="选择分类" width="65%">
<Form class="min-h-[200px]">
<FormItem
label="选择分类"
@@ -224,6 +238,7 @@ function handleProductCategorySelected(id: number) {
</Form>
</Modal>
</template>
<style lang="scss" scoped>
:deep(.ant-btn + .ant-btn) {
margin-left: 0 !important;

37
apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
View File

@@ -1,14 +1,14 @@
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Button, Input, InputGroup } from 'ant-design-vue';
import { Button, Input } from 'ant-design-vue';
import AppLinkSelectDialog from './app-link-select-dialog.vue';
/** APP 链接输入框 */
defineOptions({ name: 'AppLinkInput' });
// 定义属性
/** 定义属性 */
const props = defineProps({
modelValue: {
type: String,
@@ -23,8 +23,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,14 +46,19 @@ watch(
);
</script>
<template>
<InputGroup compact>
<Input
v-model:value="appLink"
placeholder="输入或选择链接"
class="flex-1"
/>
<Button @click="handleOpenDialog">选择</Button>
</InputGroup>
<Input v-model:value="appLink" placeholder="输入或选择链接">
<template #addonAfter>
<Button @click="handleOpenDialog" class="!border-none">选择</Button>
</template>
</Input>
<AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
</template>
<style scoped lang="scss">
:deep(.ant-input-group-addon) {
padding: 0;
background: transparent;
border: 0;
}
</style>

31
apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
View File

@@ -1,9 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
// import { PREDEFINE_COLORS } from '@vben/constants';
import { Input, InputGroup } from 'ant-design-vue';
import { Input } from 'ant-design-vue';
/** 颜色输入框 */
defineOptions({ name: 'ColorInput' });
@@ -28,12 +26,25 @@ const color = computed({
</script>
<template>
<InputGroup compact>
<!-- TODO 芋艿：后续在处理，antd 不支持该组件；
<ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-->
<Input v-model:value="color" class="flex-1" />
</InputGroup>
<div class="flex gap-2">
<input
v-model="color"
type="color"
class="h-8 w-12 cursor-pointer rounded border border-gray-300"
/>
<Input v-model:value="color" class="flex-1" placeholder="请输入颜色值" />
</div>
</template>
<style scoped lang="scss"></style>
<style scoped lang="scss">
input[type='color'] {
&::-webkit-color-swatch-wrapper {
padding: 2px;
}
&::-webkit-color-swatch {
border: none;
border-radius: 2px;
}
}
</style>

44
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
View File

@@ -27,7 +27,7 @@ const props = defineProps<{ modelValue: ComponentStyle }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
const treeData = [
const treeData: any[] = [
{
label: '外部边距',
prop: 'margin',
@@ -96,7 +96,7 @@ const treeData = [
},
];
const handleSliderChange = (prop: string) => {
function handleSliderChange(prop: string) {
switch (prop) {
case 'borderRadius': {
formData.value.borderTopLeftRadius = formData.value.borderRadius;
@@ -120,7 +120,7 @@ const handleSliderChange = (prop: string) => {
break;
}
}
};
}
</script>
<template>
@@ -131,13 +131,9 @@ const handleSliderChange = (prop: string) => {
</TabPane>
<!-- 每个组件的通用内容 -->
<TabPane tab="样式" key="style">
<TabPane tab="样式" key="style" force-render>
<Card title="组件样式" class="property-group">
<Form
:model="formData"
label-col="{ span: 6 }"
wrapper-col="{ span: 18 }"
>
<Form :model="formData">
<FormItem label="组件背景" name="bgType">
<RadioGroup v-model:value="formData.bgType">
<Radio value="color">纯色</Radio>
@@ -160,24 +156,24 @@ const handleSliderChange = (prop: string) => {
<template #tip>建议宽度 750px</template>
</UploadImg>
</FormItem>
<Tree
:tree-data="treeData"
:expand-on-click-node="false"
default-expand-all
>
<template #title="{ data, node }">
<Tree :tree-data="treeData" default-expand-all>
<template #title="{ dataRef }">
<FormItem
:label="data.label"
:name="data.prop"
:label="dataRef.label"
:name="dataRef.prop"
:label-col="
dataRef.children ? { span: 6 } : { span: 5, offset: 1 }
"
:wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }"
class="mb-0 w-full"
>
<Slider
v-model:value="
formData[data.prop as keyof ComponentStyle] as number
formData[dataRef.prop as keyof ComponentStyle] as number
"
:max="100"
:min="0"
@change="handleSliderChange(data.prop)"
@change="handleSliderChange(dataRef.prop)"
/>
</FormItem>
</template>
@@ -197,4 +193,14 @@ const handleSliderChange = (prop: string) => {
:deep(.ant-input-number) {
width: 50px;
}
:deep(.ant-tree) {
.ant-tree-node-content-wrapper {
flex: 1;
}
.ant-form-item {
margin-bottom: 0;
}
}
</style>

40
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
View File

@@ -49,9 +49,7 @@ const emits = defineEmits<{
type DiyComponentWithStyle = DiyComponent<any> & {
property: { style?: ComponentStyle };
};
/**
* 组件样式
*/
/** 组件样式 */
const style = computed(() => {
const componentStyle = props.component.property.style;
if (!componentStyle) {
@@ -78,38 +76,27 @@ const style = computed(() => {
};
});
/**
* 移动组件
* @param direction 移动方向
*/
/** 移动组件 */
const handleMoveComponent = (direction: number) => {
emits('move', direction);
};
/**
* 复制组件
*/
/** 复制组件 */
const handleCopyComponent = () => {
emits('copy');
};
/**
* 删除组件
*/
/** 删除组件 */
const handleDeleteComponent = () => {
emits('delete');
};
</script>
<template>
<div class="component" :class="[{ active }]">
<div
:style="{
...style,
}"
>
<div class="component relative cursor-move" :class="[{ active }]">
<div :style="style">
<component :is="component.id" :property="component.property" />
</div>
<div class="component-wrap">
<div class="component-wrap absolute left-[-2px] top-0 block h-full w-full">
<!-- 左侧：组件名（悬浮的小贴条） -->
<div class="component-name" v-if="component.name">
{{ component.name }}
@@ -158,19 +145,8 @@ $hover-border-width: 1px;
$name-position: -85px;
$toolbar-position: -55px;
/* 组件 */
.component {
position: relative;
cursor: move;
.component-wrap {
position: absolute;
top: 0;
left: -$active-border-width;
display: block;
width: 100%;
height: 100%;
/* 鼠标放到组件上时 */
&:hover {
border: $hover-border-width dashed var(--ant-color-primary);
@@ -236,7 +212,7 @@ $toolbar-position: -55px;
}
}
/* 组件选中时 */
/* 选中状态 */
&.active {
margin-bottom: 4px;

92
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
View File

@@ -14,16 +14,15 @@ import { componentConfigs } from './mobile/index';
/** 组件库：目前左侧的【基础组件】、【图文组件】部分 */
defineOptions({ name: 'ComponentLibrary' });
// 组件列表
/** 组件列表 */
const props = defineProps<{
list: DiyComponentLibrary[];
}>();
// 组件分组
const groups = reactive<any[]>([]);
// 展开的折叠面板
const extendGroups = reactive<string[]>([]);
// 监听 list 属性，按照 DiyComponentLibrary 的 name 分组
const groups = reactive<any[]>([]); // 组件分组
const extendGroups = reactive<string[]>([]); // 展开的折叠面板
/** 监听 list 属性，按照 DiyComponentLibrary 的 name 分组 */
watch(
() => props.list,
() => {
@@ -53,7 +52,7 @@ watch(
},
);
// 克隆组件
/** 克隆组件 */
const handleCloneComponent = (component: DiyComponent<any>) => {
const instance = cloneDeep(component);
instance.uid = Date.now();
@@ -62,7 +61,9 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
</script>
<template>
<div class="editor-left w-[261px]">
<aside
class="editor-left z-[1] w-[261px] shrink-0 select-none shadow-[8px_0_8px_-8px_rgb(0_0_0/0.12)]"
>
<div class="h-full overflow-y-auto">
<Collapse v-model:active-key="extendGroups">
<CollapsePanel
@@ -71,7 +72,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
:header="group.name"
>
<draggable
class="component-container"
class="flex flex-wrap items-center"
ghost-class="draggable-ghost"
item-key="index"
:list="group.components"
@@ -79,13 +80,22 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
:group="{ name: 'component', pull: 'clone', put: false }"
:clone="handleCloneComponent"
:animation="200"
:force-fallback="true"
:force-fallback="false"
>
<template #item="{ element }">
<div>
<div class="drag-placement">组件放置区域</div>
<div class="component">
<IconifyIcon :icon="element.icon" :size="32" />
<div class="hidden text-white">组件放置区域</div>
<div
class="component flex h-[86px] w-[86px] cursor-move flex-col items-center justify-center border-b border-r [&:nth-of-type(3n)]:border-r-0"
:style="{
borderColor: 'var(--ant-color-split)',
}"
>
<IconifyIcon
:icon="element.icon"
:size="32"
class="mb-1 text-gray-500"
/>
<span class="mt-1 text-xs">{{ element.name }}</span>
</div>
</div>
@@ -94,16 +104,11 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
</CollapsePanel>
</Collapse>
</div>
</div>
</aside>
</template>
<style scoped lang="scss">
.editor-left {
z-index: 1;
flex-shrink: 0;
user-select: none;
box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
:deep(.ant-collapse) {
border-top: none;
}
@@ -112,8 +117,8 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
border-bottom: none;
}
:deep(.ant-collapse-content) {
padding-bottom: 0;
:deep(.ant-collapse-content-box) {
padding: 0;
}
:deep(.ant-collapse-header) {
@@ -124,50 +129,19 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
border-bottom: none;
}
.component-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.component {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 86px;
height: 86px;
cursor: move;
border-right: 1px solid var(--ant-color-border-secondary);
border-bottom: 1px solid var(--ant-color-border-secondary);
.anticon {
margin-bottom: 4px;
color: gray;
}
}
/* 组件 hover 和 active 状态（需要 CSS 变量） */
.component.active,
.component:hover {
color: var(--ant-color-white);
background: var(--ant-color-primary);
.anticon {
:deep(.iconify) {
color: var(--ant-color-white);
}
}
.component:nth-of-type(3n) {
border-right: none;
}
}
/* 拖拽占位提示，默认不显示 */
.drag-placement {
display: none;
color: #fff;
}
/* 拖拽区域全局样式 */
.drag-area {
/* 拖拽到手机区域时的样式 */
.draggable-ghost {
@@ -203,14 +177,12 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
background: #5487df;
}
/* 拖拽时隐藏组件 */
.component {
display: none;
display: none; /* 拖拽时隐藏组件 */
}
/* 拖拽时显示占位提示 */
.drag-placement {
display: block;
.hidden {
display: block !important; /* 拖拽时显示占位提示 */
}
}
}

41
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
View File

@@ -2,32 +2,24 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 轮播图属性 */
export interface CarouselProperty {
// 类型：默认 | 卡片
type: 'card' | 'default';
// 指示器样式：点 | 数字
indicator: 'dot' | 'number';
// 是否自动播放
autoplay: boolean;
// 播放间隔
interval: number;
// 轮播内容
items: CarouselItemProperty[];
// 组件样式
style: ComponentStyle;
}
// 轮播内容属性
export interface CarouselItemProperty {
// 类型：图片 | 视频
type: 'img' | 'video';
// 图片链接
imgUrl: string;
// 视频链接
videoUrl: string;
// 跳转链接
url: string;
type: 'card' | 'default'; // 类型：默认 | 卡片
indicator: 'dot' | 'number'; // 指示器样式：点 | 数字
autoplay: boolean; // 是否自动播放
interval: number; // 播放间隔
height: number; // 轮播高度
items: CarouselItemProperty[]; // 轮播内容
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 轮播内容属性 */
export interface CarouselItemProperty {
type: 'img' | 'video'; // 类型：图片 | 视频
imgUrl: string; // 图片链接
videoUrl: string; // 视频链接
url: string; // 跳转链接
}
/** 定义组件 */
export const component = {
id: 'Carousel',
name: '轮播图',
@@ -37,6 +29,7 @@ export const component = {
indicator: 'dot',
autoplay: false,
interval: 3,
height: 174,
items: [
{
type: 'img',

106
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
View File

@@ -4,6 +4,17 @@ import type { CarouselProperty } from './config';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Card,
Form,
FormItem,
Radio,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} from 'ant-design-vue';
import UploadFile from '#/components/upload/file-upload.vue';
import UploadImg from '#/components/upload/image-upload.vue';
@@ -21,33 +32,33 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style">
<ElForm label-width="80px" :model="formData">
<ElCard header="样式设置" class="property-group" shadow="never">
<ElFormItem label="样式" prop="type">
<ElRadioGroup v-model="formData.type">
<ElTooltip class="item" content="默认" placement="bottom">
<ElRadioButton value="default">
<Form label-width="80px" :model="formData">
<Card header="样式设置" class="property-group" shadow="never">
<FormItem label="样式" prop="type">
<RadioGroup v-model="formData.type">
<Tooltip class="item" content="默认" placement="bottom">
<RadioButton value="default">
<IconifyIcon icon="system-uicons:carousel" />
</ElRadioButton>
</ElTooltip>
<ElTooltip class="item" content="卡片" placement="bottom">
<ElRadioButton value="card">
</RadioButton>
</Tooltip>
<Tooltip class="item" content="卡片" placement="bottom">
<RadioButton value="card">
<IconifyIcon icon="ic:round-view-carousel" />
</ElRadioButton>
</ElTooltip>
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="指示器" prop="indicator">
<ElRadioGroup v-model="formData.indicator">
<ElRadio value="dot">小圆点</ElRadio>
<ElRadio value="number">数字</ElRadio>
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="是否轮播" prop="autoplay">
<ElSwitch v-model="formData.autoplay" />
</ElFormItem>
<ElFormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
<ElSlider
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="指示器" prop="indicator">
<RadioGroup v-model="formData.indicator">
<Radio value="dot">小圆点</Radio>
<Radio value="number">数字</Radio>
</RadioGroup>
</FormItem>
<FormItem label="是否轮播" prop="autoplay">
<Switch v-model="formData.autoplay" />
</FormItem>
<FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
<Slider
v-model="formData.interval"
:max="10"
:min="0.5"
@@ -56,24 +67,19 @@ const formData = useVModel(props, 'modelValue', emit);
input-size="small"
:show-input-controls="false"
/>
<ElText type="info">单位：秒</ElText>
</ElFormItem>
</ElCard>
<ElCard header="内容设置" class="property-group" shadow="never">
<p class="text-info">单位：秒</p>
</FormItem>
</Card>
<Card header="内容设置" class="property-group" shadow="never">
<Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
<template #default="{ element }">
<ElFormItem
label="类型"
prop="type"
class="mb-2"
label-width="40px"
>
<ElRadioGroup v-model="element.type">
<ElRadio value="img">图片</ElRadio>
<ElRadio value="video">视频</ElRadio>
</ElRadioGroup>
</ElFormItem>
<ElFormItem
<FormItem label="类型" prop="type" class="mb-2" label-width="40px">
<RadioGroup v-model="element.type">
<Radio value="img">图片</Radio>
<Radio value="video">视频</Radio>
</RadioGroup>
</FormItem>
<FormItem
label="图片"
class="mb-2"
label-width="40px"
@@ -87,9 +93,9 @@ const formData = useVModel(props, 'modelValue', emit);
class="min-w-[80px]"
:show-description="false"
/>
</ElFormItem>
</FormItem>
<template v-else>
<ElFormItem label="封面" class="mb-2" label-width="40px">
<FormItem label="封面" class="mb-2" label-width="40px">
<UploadImg
v-model="element.imgUrl"
draggable="false"
@@ -98,8 +104,8 @@ const formData = useVModel(props, 'modelValue', emit);
width="100%"
class="min-w-[80px]"
/>
</ElFormItem>
<ElFormItem label="视频" class="mb-2" label-width="40px">
</FormItem>
<FormItem label="视频" class="mb-2" label-width="40px">
<UploadFile
v-model="element.videoUrl"
:file-type="['mp4']"
@@ -107,15 +113,15 @@ const formData = useVModel(props, 'modelValue', emit);
:file-size="100"
class="min-w-[80px]"
/>
</ElFormItem>
</FormItem>
</template>
<ElFormItem label="链接" class="mb-2" label-width="40px">
<FormItem label="链接" class="mb-2" label-width="40px">
<AppLinkInput v-model="element.url" />
</ElFormItem>
</FormItem>
</template>
</Draggable>
</ElCard>
</ElForm>
</Card>
</Form>
</ComponentContainerProperty>
</template>

17
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
View File

@@ -2,19 +2,14 @@ import type { DiyComponent } from '../../../util';
/** 分割线属性 */
export interface DividerProperty {
// 高度
height: number;
// 线宽
lineWidth: number;
// 边距类型
paddingType: 'horizontal' | 'none';
// 颜色
lineColor: string;
// 类型
borderType: 'dashed' | 'dotted' | 'none' | 'solid';
height: number; // 高度
lineWidth: number; // 线宽
paddingType: 'horizontal' | 'none'; // 边距类型
lineColor: string; // 颜色
borderType: 'dashed' | 'dotted' | 'none' | 'solid'; // 类型
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'Divider',
name: '分割线',

92
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
View File

@@ -1,4 +1,92 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { DividerProperty } from './config';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Form,
FormItem,
RadioButton,
RadioGroup,
Slider,
Tooltip,
} from 'ant-design-vue';
import { ColorInput } from '#/views/mall/promotion/components';
/** 导航栏属性面板 */
defineOptions({ name: 'DividerProperty' });
const props = defineProps<{ modelValue: DividerProperty }>();
const emit = defineEmits(['update:modelValue']);
const BORDER_TYPES = [
{
icon: 'vaadin:line-h',
text: '实线',
type: 'solid',
},
{
icon: 'tabler:line-dashed',
text: '虚线',
type: 'dashed',
},
{
icon: 'tabler:line-dotted',
text: '点线',
type: 'dotted',
},
{
icon: 'entypo:progress-empty',
text: '无',
type: 'none',
},
]; // 线类型
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<Form :model="formData">
<FormItem label="高度" name="height">
<Slider v-model:value="formData.height" :min="1" :max="100" />
</FormItem>
<FormItem label="选择样式" name="borderType">
<RadioGroup v-model:value="formData!.borderType">
<Tooltip
placement="top"
v-for="(item, index) in BORDER_TYPES"
:key="index"
:title="item.text"
>
<RadioButton :value="item.type">
<IconifyIcon :icon="item.icon" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<template v-if="formData.borderType !== 'none'">
<FormItem label="线宽" name="lineWidth">
<Slider v-model:value="formData.lineWidth" :min="1" :max="30" />
</FormItem>
<FormItem label="左右边距" name="paddingType">
<RadioGroup v-model:value="formData!.paddingType">
<Tooltip title="无边距" placement="top">
<RadioButton value="none">
<IconifyIcon icon="tabler:box-padding" />
</RadioButton>
</Tooltip>
<Tooltip title="左右留边" placement="top">
<RadioButton value="horizontal">
<IconifyIcon icon="vaadin:padding" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="颜色">
<ColorInput v-model="formData.lineColor" />
</FormItem>
</template>
</Form>
</template>

14
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
View File

@@ -2,19 +2,17 @@ import type { DiyComponent } from '../../../util';
/** 弹窗广告属性 */
export interface PopoverProperty {
list: PopoverItemProperty[];
list: PopoverItemProperty[]; // 弹窗列表
}
/** 弹窗广告项目属性 */
export interface PopoverItemProperty {
// 图片地址
imgUrl: string;
// 跳转连接
url: string;
// 显示类型：仅显示一次、每次启动都会显示
showType: 'always' | 'once';
imgUrl: string; // 图片地址
url: string; // 跳转连接
showType: 'always' | 'once'; // 显示类型：仅显示一次、每次启动都会显示
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'Popover',
name: '弹窗广告',

48
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
View File

@@ -1,4 +1,48 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { PopoverProperty } from './config';
import { useVModel } from '@vueuse/core';
import { Form, FormItem, Radio, RadioGroup, Tooltip } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
/** 弹窗广告属性面板 */
defineOptions({ name: 'PopoverProperty' });
const props = defineProps<{ modelValue: PopoverProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<Form :model="formData">
<Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
<template #default="{ element, index }">
<FormItem label="图片" :name="`list[${index}].imgUrl`">
<UploadImg
v-model="element.imgUrl"
height="56px"
width="56px"
:show-description="false"
/>
</FormItem>
<FormItem label="跳转链接" :name="`list[${index}].url`">
<AppLinkInput v-model="element.url" />
</FormItem>
<FormItem label="显示次数" :name="`list[${index}].showType`">
<RadioGroup v-model:value="element.showType">
<Tooltip title="只显示一次，下次打开时不显示" placement="bottom">
<Radio value="once">一次</Radio>
</Tooltip>
<Tooltip title="每次打开时都会显示" placement="bottom">
<Radio value="always">不限</Radio>
</Tooltip>
</RadioGroup>
</FormItem>
</template>
</Draggable>
</Form>
</template>

31
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
View File

@@ -1,29 +1,20 @@
import type { ComponentStyle, DiyComponent } from '../../../util';
/** 商品卡片属性 */
/** 优惠劵卡片属性 */
export interface CouponCardProperty {
// 列数
columns: number;
// 背景图
bgImg: string;
// 文字颜色
textColor: string;
// 按钮样式
columns: number; // 列数
bgImg: string; // 背景图
textColor: string; // 文字颜色
button: {
// 背景颜色
bgColor: string;
// 颜色
color: string;
};
// 间距
space: number;
// 优惠券编号列表
couponIds: number[];
// 组件样式
style: ComponentStyle;
bgColor: string; // 背景颜色
color: string; // 文字颜色
}; // 按钮样式
space: number; // 间距
couponIds: number[]; // 优惠券编号列表
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'CouponCard',
name: '优惠券',

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
View File

@@ -23,7 +23,7 @@ export const CouponDiscountDesc = defineComponent({
const discountDesc =
coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
? `减${floatToFixed2(coupon.discountPrice)}元`
: `打${coupon.discountPercent / 10}折`;
: `打${coupon.discountPercent ?? 0 / 10}折`;
return () => (
<div>
<span>{useCondition}</span>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
View File

@@ -17,7 +17,7 @@ export const CouponDiscount = defineComponent({
setup(props) {
const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
// 折扣
let value = `${coupon.discountPercent / 10}`;
let value = `${coupon.discountPercent ?? 0 / 10}`;
let suffix = ' 折';
// 满减
if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
View File

@@ -5,6 +5,8 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
import { onMounted, ref, watch } from 'vue';
import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
import {
CouponDiscount,
CouponDiscountDesc,

174
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
View File

@@ -1,4 +1,174 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { CouponCardProperty } from './config';
import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
import { ref, watch } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import {
CouponTemplateTakeTypeEnum,
PromotionDiscountTypeEnum,
} from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { floatToFixed2 } from '@vben/utils';
import { useVModel } from '@vueuse/core';
import {
Button,
Card,
Form,
FormItem,
RadioButton,
RadioGroup,
Slider,
Tooltip,
Typography,
} from 'ant-design-vue';
import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
import UploadImg from '#/components/upload/image-upload.vue';
import { ColorInput } from '#/views/mall/promotion/components';
import CouponSelect from '#/views/mall/promotion/coupon/components/select.vue';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 优惠券卡片属性面板 */
defineOptions({ name: 'CouponCardProperty' });
const props = defineProps<{ modelValue: CouponCardProperty }>();
const emit = defineEmits(['update:modelValue']);
const { Text: ATypographyText } = Typography;
const formData = useVModel(props, 'modelValue', emit);
const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 已选择的优惠券列表
const [CouponSelectModal, couponSelectModalApi] = useVbenModal({
connectedComponent: CouponSelect,
destroyOnClose: true,
});
/** 添加优惠劵 */
const handleAddCoupon = () => {
couponSelectModalApi.open();
};
/** 处理优惠劵选择 */
const handleCouponSelect = (
selectedCoupons: MallCouponTemplateApi.CouponTemplate[],
) => {
couponList.value = selectedCoupons;
formData.value.couponIds = selectedCoupons.map((coupon) => coupon.id);
};
/** 监听优惠券 ID 变化，加载优惠券列表 */
watch(
() => formData.value.couponIds,
async () => {
if (formData.value.couponIds?.length > 0) {
couponList.value = await CouponTemplateApi.getCouponTemplateList(
formData.value.couponIds,
);
}
},
{
immediate: true,
deep: true,
},
);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Card title="优惠券列表" class="property-group">
<div
v-for="(coupon, index) in couponList"
:key="index"
class="flex items-center justify-between"
>
<ATypographyText ellipsis class="text-base">
{{ coupon.name }}
</ATypographyText>
<ATypographyText type="secondary" ellipsis>
<span v-if="coupon.usePrice > 0">
满{{ floatToFixed2(coupon.usePrice) }}元，
</span>
<span
v-if="
coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
"
>
减{{ floatToFixed2(coupon.discountPrice) }}元
</span>
<span v-else> 打{{ coupon.discountPercent }}折 </span>
</ATypographyText>
</div>
<FormItem>
<Button
@click="handleAddCoupon"
type="primary"
ghost
class="mt-2 w-full"
>
<template #icon>
<IconifyIcon icon="ep:plus" />
</template>
添加
</Button>
</FormItem>
</Card>
<Card title="优惠券样式" class="property-group">
<FormItem label="列数" name="type">
<RadioGroup v-model:value="formData.columns">
<Tooltip title="一列" placement="bottom">
<RadioButton :value="1">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="二列" placement="bottom">
<RadioButton :value="2">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="三列" placement="bottom">
<RadioButton :value="3">
<IconifyIcon icon="fluent:text-column-three-24-filled" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="背景图片" name="bgImg">
<UploadImg
v-model="formData.bgImg"
height="80px"
width="100%"
class="min-w-[160px]"
:show-description="false"
/>
</FormItem>
<FormItem label="文字颜色" name="textColor">
<ColorInput v-model="formData.textColor" />
</FormItem>
<FormItem label="按钮背景" name="button.bgColor">
<ColorInput v-model="formData.button.bgColor" />
</FormItem>
<FormItem label="按钮文字" name="button.color">
<ColorInput v-model="formData.button.color" />
</FormItem>
<FormItem label="间隔" name="space">
<Slider v-model:value="formData.space" :max="100" :min="0" />
</FormItem>
</Card>
</Form>
</ComponentContainerProperty>
<!-- 优惠券选择 -->
<CouponSelectModal
:take-type="CouponTemplateTakeTypeEnum.USER.type"
@success="handleCouponSelect"
/>
</template>

27
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
View File

@@ -1,28 +1,21 @@
import type { DiyComponent } from '../../../util';
// 悬浮按钮属性
/** 悬浮按钮属性 */
export interface FloatingActionButtonProperty {
// 展开方向
direction: 'horizontal' | 'vertical';
// 是否显示文字
showText: boolean;
// 按钮列表
list: FloatingActionButtonItemProperty[];
direction: 'horizontal' | 'vertical'; // 展开方向
showText: boolean; // 是否显示文字
list: FloatingActionButtonItemProperty[]; // 按钮列表
}
// 悬浮按钮项属性
/** 悬浮按钮项属性 */
export interface FloatingActionButtonItemProperty {
// 图片地址
imgUrl: string;
// 跳转连接
url: string;
// 文字
text: string;
// 文字颜色
textColor: string;
imgUrl: string; // 图片地址
url: string; // 跳转连接
text: string; // 文字
textColor: string; // 文字颜色
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'FloatingActionButton',
name: '悬浮按钮',

6
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
View File

@@ -5,7 +5,7 @@ import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { Image, message } from 'ant-design-vue';
import { Button, Image, message } from 'ant-design-vue';
/** 悬浮按钮 */
defineOptions({ name: 'FloatingActionButton' });
@@ -57,13 +57,13 @@ const handleActive = (index: number) => {
</div>
</template>
<!-- todo: @owen 使用APP主题色 -->
<el-button type="primary" size="large" circle @click="handleToggleFab">
<Button type="primary" size="large" circle @click="handleToggleFab">
<IconifyIcon
icon="ep:plus"
class="fab-icon"
:class="[{ active: expanded }]"
/>
</el-button>
</Button>
</div>
<!-- 模态背景：展开时显示，点击后折叠 -->
<div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>

68
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
View File

@@ -1,4 +1,68 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { FloatingActionButtonProperty } from './config';
import { useVModel } from '@vueuse/core';
import {
Card,
Form,
FormItem,
Radio,
RadioGroup,
Switch,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
Draggable,
InputWithColor,
} from '#/views/mall/promotion/components';
/** 悬浮按钮属性面板 */
defineOptions({ name: 'FloatingActionButtonProperty' });
const props = defineProps<{ modelValue: FloatingActionButtonProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<Form :model="formData">
<Card title="按钮配置" class="property-group">
<FormItem label="展开方向" name="direction">
<RadioGroup v-model:value="formData.direction">
<Radio value="vertical">垂直</Radio>
<Radio value="horizontal">水平</Radio>
</RadioGroup>
</FormItem>
<FormItem label="显示文字" name="showText">
<Switch v-model:checked="formData.showText" />
</FormItem>
</Card>
<Card title="按钮列表" class="property-group">
<Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
<template #default="{ element, index }">
<FormItem label="图标" :name="`list[${index}].imgUrl`">
<UploadImg
v-model="element.imgUrl"
height="56px"
width="56px"
:show-description="false"
/>
</FormItem>
<FormItem label="文字" :name="`list[${index}].text`">
<InputWithColor
v-model="element.text"
v-model:color="element.textColor"
/>
</FormItem>
<FormItem label="跳转链接" :name="`list[${index}].url`">
<AppLinkInput v-model="element.url" />
</FormItem>
</template>
</Draggable>
</Card>
</Form>
</template>

246
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
View File

@@ -1,4 +1,246 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { HotZoneItemProperty } from '../../config';
import type { ControlDot } from './controller';
import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { Button, Image } from 'ant-design-vue';
import AppLinkSelectDialog from '#/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue';
import {
CONTROL_DOT_LIST,
CONTROL_TYPE_ENUM,
HOT_ZONE_MIN_SIZE,
useDraggable,
zoomIn,
zoomOut,
} from './controller';
/** 热区编辑对话框 */
defineOptions({ name: 'HotZoneEditDialog' });
/** 定义属性 */
const props = defineProps({
modelValue: {
type: Array<HotZoneItemProperty>,
default: () => [],
},
imgUrl: {
type: String,
default: '',
},
});
const emit = defineEmits(['update:modelValue']);
const formData = ref<HotZoneItemProperty[]>([]);
const [Modal, modalApi] = useVbenModal({
showCancelButton: false,
onConfirm() {
const list = zoomOut(formData.value);
emit('update:modelValue', list);
modalApi.close();
},
});
/** 打开弹窗 */
function open() {
// 放大
formData.value = zoomIn(props.modelValue);
modalApi.open();
}
defineExpose({ open }); // 提供 open 方法，用于打开弹窗
const container = ref<HTMLDivElement>(); // 热区容器
/** 增加热区 */
function handleAdd() {
formData.value.push({
width: HOT_ZONE_MIN_SIZE,
height: HOT_ZONE_MIN_SIZE,
top: 0,
left: 0,
} as HotZoneItemProperty);
}
/** 删除热区 */
function handleRemove(hotZone: HotZoneItemProperty) {
formData.value = formData.value.filter((item) => item !== hotZone);
}
/** 移动热区 */
function handleMove(item: HotZoneItemProperty, e: MouseEvent) {
useDraggable(item, e, (left, top, _, __, moveWidth, moveHeight) => {
setLeft(item, left + moveWidth);
setTop(item, top + moveHeight);
});
}
/** 调整热区大小、位置 */
function handleResize(
item: HotZoneItemProperty,
ctrlDot: ControlDot,
e: MouseEvent,
) {
useDraggable(item, e, (left, top, width, height, moveWidth, moveHeight) => {
ctrlDot.types.forEach((type) => {
switch (type) {
case CONTROL_TYPE_ENUM.HEIGHT: {
{
// 左移时，宽度为减少
const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.TOP)
? -1
: 1;
setHeight(item, height + moveHeight * direction);
}
break;
}
case CONTROL_TYPE_ENUM.LEFT: {
setLeft(item, left + moveWidth);
break;
}
case CONTROL_TYPE_ENUM.TOP: {
setTop(item, top + moveHeight);
break;
}
case CONTROL_TYPE_ENUM.WIDTH: {
{
// 上移时，高度为减少
const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.LEFT)
? -1
: 1;
setWidth(item, width + moveWidth * direction);
}
break;
}
}
});
});
}
/** 设置 X 轴坐标 */
function setLeft(item: HotZoneItemProperty, left: number) {
// 不能超出容器
if (left >= 0 && left <= container.value!.offsetWidth - item.width) {
item.left = left;
}
}
/** 设置Y轴坐标 */
function setTop(item: HotZoneItemProperty, top: number) {
// 不能超出容器
if (top >= 0 && top <= container.value!.offsetHeight - item.height) {
item.top = top;
}
}
/** 设置宽度 */
const setWidth = (item: HotZoneItemProperty, width: number) => {
// 不能小于最小宽度 && 不能超出容器右边
if (
width >= HOT_ZONE_MIN_SIZE &&
item.left + width <= container.value!.offsetWidth
) {
item.width = width;
}
};
/** 设置高度 */
const setHeight = (item: HotZoneItemProperty, height: number) => {
// 不能小于最小高度 && 不能超出容器底部
if (
height >= HOT_ZONE_MIN_SIZE &&
item.top + height <= container.value!.offsetHeight
) {
item.height = height;
}
};
const activeHotZone = ref<HotZoneItemProperty>();
const appLinkDialogRef = ref();
/** 显示 App 链接选择对话框 */
const handleShowAppLinkDialog = (hotZone: HotZoneItemProperty) => {
activeHotZone.value = hotZone;
appLinkDialogRef.value.open(hotZone.url);
};
/** 处理 App 链接选择变更 */
const handleAppLinkChange = (appLink: AppLink) => {
if (!appLink || !activeHotZone.value) {
return;
}
activeHotZone.value.name = appLink.name;
activeHotZone.value.url = appLink.path;
};
</script>
<template><Page>待完成</Page></template>
<template>
<Modal title="设置热区" class="w-[780px]">
<div ref="container" class="w-750px relative h-full">
<Image
:src="imgUrl"
:preview="false"
class="w-750px pointer-events-none h-full select-none"
/>
<div
v-for="(item, hotZoneIndex) in formData"
:key="hotZoneIndex"
class="group absolute z-10 flex cursor-move items-center justify-center border text-base opacity-80"
:style="{
width: `${item.width}px`,
height: `${item.height}px`,
top: `${item.top}px`,
left: `${item.left}px`,
color: 'var(--ant-color-primary)',
background:
'color-mix(in srgb, var(--ant-color-primary) 30%, transparent)',
borderColor: 'var(--ant-color-primary)',
}"
@mousedown="handleMove(item, $event)"
@dblclick="handleShowAppLinkDialog(item)"
>
<span class="pointer-events-none select-none">
{{ item.name || '双击选择链接' }}
</span>
<IconifyIcon
icon="ep:close"
class="absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
:style="{ backgroundColor: 'var(--ant-color-primary)' }"
:size="14"
@click="handleRemove(item)"
/>
<!-- 8 个控制点 -->
<span
class="ctrl-dot absolute z-[11] h-2 w-2 rounded-full bg-white"
v-for="(dot, dotIndex) in CONTROL_DOT_LIST"
:key="dotIndex"
:style="{ ...dot.style, border: 'inherit' }"
@mousedown="handleResize(item, dot, $event)"
></span>
</div>
</div>
<template #prepend-footer>
<Button @click="handleAdd" type="primary" ghost>
<template #icon>
<IconifyIcon icon="ep:plus" />
</template>
添加热区
</Button>
</template>
</Modal>
<AppLinkSelectDialog
ref="appLinkDialogRef"
@app-link-change="handleAppLinkChange"
/>
</template>

29
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
View File

@@ -2,31 +2,22 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 热区属性 */
export interface HotZoneProperty {
// 图片地址
imgUrl: string;
// 导航菜单列表
list: HotZoneItemProperty[];
// 组件样式
style: ComponentStyle;
imgUrl: string; // 图片地址
list: HotZoneItemProperty[]; // 导航菜单列表
style: ComponentStyle; // 组件样式
}
/** 热区项目属性 */
export interface HotZoneItemProperty {
// 链接的名称
name: string;
// 链接
url: string;
// 宽
width: number;
// 高
height: number;
// 上
top: number;
// 左
left: number;
name: string; // 链接的名称
url: string; // 链接
width: number; // 宽
height: number; // 高
top: number; // 上
left: number; // 左
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'HotZone',
name: '热区',

1
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import type { HotZoneProperty } from './config';
import { Image } from 'ant-design-vue';
/** 热区 */
defineOptions({ name: 'HotZone' });
const props = defineProps<{ property: HotZoneProperty }>();

11
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
View File

@@ -2,15 +2,12 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 图片展示属性 */
export interface ImageBarProperty {
// 图片链接
imgUrl: string;
// 跳转链接
url: string;
// 组件样式
style: ComponentStyle;
imgUrl: string; // 图片链接
url: string; // 跳转链接
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'ImageBar',
name: '图片展示',

39
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
View File

@@ -2,39 +2,24 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 广告魔方属性 */
export interface MagicCubeProperty {
// 上圆角
borderRadiusTop: number;
// 下圆角
borderRadiusBottom: number;
// 间隔
space: number;
// 导航菜单列表
list: MagicCubeItemProperty[];
// 组件样式
style: ComponentStyle;
borderRadiusTop: number; // 上圆角
borderRadiusBottom: number; // 下圆角
space: number; // 间隔
list: MagicCubeItemProperty[]; // 导航菜单列表
style: ComponentStyle; // 组件样式
}
/** 广告魔方项目属性 */
export interface MagicCubeItemProperty {
// 图标链接
imgUrl: string;
// 链接
url: string;
// 宽
width: number;
// 高
height: number;
// 上
top: number;
// 左
left: number;
// 右
right: number;
// 下
bottom: number;
imgUrl: string; // 图标链接
url: string; // 链接
width: number; // 宽
height: number; // 高
top: number; // 上
left: number; // 左
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'MagicCube',
name: '广告魔方',

80
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
View File

@@ -1,4 +1,80 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { MagicCubeProperty } from './config';
import { ref } from 'vue';
import { useVModel } from '@vueuse/core';
import { Form, FormItem, Slider, Typography } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
MagicCubeEditor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 广告魔方属性面板 */
defineOptions({ name: 'MagicCubeProperty' });
const props = defineProps<{ modelValue: MagicCubeProperty }>();
const emit = defineEmits(['update:modelValue']);
const { Text: ATypographyText } = Typography;
const formData = useVModel(props, 'modelValue', emit);
const selectedHotAreaIndex = ref(-1); // 选中的热区
/** 处理热区被选中事件 */
const handleHotAreaSelected = (_: any, index: number) => {
selectedHotAreaIndex.value = index;
};
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData" class="mt-2">
<ATypographyText tag="p"> 魔方设置 </ATypographyText>
<ATypographyText type="secondary" class="text-sm">
每格尺寸187 * 187
</ATypographyText>
<MagicCubeEditor
class="my-4"
v-model="formData.list"
:rows="4"
:cols="4"
@hot-area-selected="handleHotAreaSelected"
/>
<template v-for="(hotArea, index) in formData.list" :key="index">
<template v-if="selectedHotAreaIndex === index">
<FormItem label="上传图片" :name="`list[${index}].imgUrl`">
<UploadImg
v-model="hotArea.imgUrl"
height="80px"
width="80px"
:show-description="false"
/>
</FormItem>
<FormItem label="链接" :name="`list[${index}].url`">
<AppLinkInput v-model="hotArea.url" />
</FormItem>
</template>
</template>
<FormItem label="上圆角" name="borderRadiusTop">
<Slider v-model:value="formData.borderRadiusTop" :max="100" :min="0" />
</FormItem>
<FormItem label="下圆角" name="borderRadiusBottom">
<Slider
v-model:value="formData.borderRadiusBottom"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="间隔" name="space">
<Slider v-model:value="formData.space" :max="100" :min="0" />
</FormItem>
</Form>
</ComponentContainerProperty>
</template>

43
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
View File

@@ -4,41 +4,28 @@ import { cloneDeep } from '@vben/utils';
/** 宫格导航属性 */
export interface MenuGridProperty {
// 列数
column: number;
// 导航菜单列表
list: MenuGridItemProperty[];
// 组件样式
style: ComponentStyle;
column: number; // 列数
list: MenuGridItemProperty[]; // 导航菜单列表
style: ComponentStyle; // 组件样式
}
/** 宫格导航项目属性 */
export interface MenuGridItemProperty {
// 图标链接
iconUrl: string;
// 标题
title: string;
// 标题颜色
titleColor: string;
// 副标题
subtitle: string;
// 副标题颜色
subtitleColor: string;
// 链接
url: string;
// 角标
iconUrl: string; // 图标链接
title: string; // 标题
titleColor: string; // 标题颜色
subtitle: string; // 副标题
subtitleColor: string; // 副标题颜色
url: string; // 链接
badge: {
// 角标背景颜色
bgColor: string;
// 是否显示
show: boolean;
// 角标文字
text: string;
// 角标文字颜色
textColor: string;
bgColor: string; // 角标背景颜色
show: boolean; // 是否显示
text: string; // 角标文字
textColor: string; // 角标文字颜色
};
}
/** 宫格导航项目默认属性 */
export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
title: '标题',
titleColor: '#333',
@@ -51,7 +38,7 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
},
} as MenuGridItemProperty;
// 定义组件
/** 定义组件 */
export const component = {
id: 'MenuGrid',
name: '宫格导航',

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
View File

@@ -11,10 +11,10 @@ import {
Switch,
} from 'ant-design-vue';
import ComponentContainerProperty from '../../component-container-property.vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
/** 宫格导航属性面板 */

27
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
View File

@@ -4,28 +4,21 @@ import { cloneDeep } from '@vben/utils';
/** 列表导航属性 */
export interface MenuListProperty {
// 导航菜单列表
list: MenuListItemProperty[];
// 组件样式
style: ComponentStyle;
list: MenuListItemProperty[]; // 导航菜单列表
style: ComponentStyle; // 组件样式
}
/** 列表导航项目属性 */
export interface MenuListItemProperty {
// 图标链接
iconUrl: string;
// 标题
title: string;
// 标题颜色
titleColor: string;
// 副标题
subtitle: string;
// 副标题颜色
subtitleColor: string;
// 链接
url: string;
iconUrl: string; // 图标链接
title: string; // 标题
titleColor: string; // 标题颜色
subtitle: string; // 副标题
subtitleColor: string; // 副标题颜色
url: string; // 链接
}
/** 空的列表导航项目属性 */
export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
title: '标题',
titleColor: '#333',
@@ -33,7 +26,7 @@ export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
subtitleColor: '#bbb',
};
// 定义组件
/** 定义组件 */
export const component = {
id: 'MenuList',
name: '列表导航',

12
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
View File

@@ -19,14 +19,14 @@ defineProps<{ property: MenuListProperty }>();
>
<div class="flex flex-1 flex-row items-center gap-2">
<Image v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
<span class="text-base" :style="{ color: item.titleColor }">{{
item.title
}}</span>
<span class="text-base" :style="{ color: item.titleColor }">
{{ item.title }}
</span>
</div>
<div class="item-center flex flex-row justify-center gap-1">
<span class="text-xs" :style="{ color: item.subtitleColor }">{{
item.subtitle
}}</span>
<span class="text-xs" :style="{ color: item.subtitleColor }">
{{ item.subtitle }}
</span>
<IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
</div>
</div>

70
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
View File

@@ -1,4 +1,70 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { MenuListProperty } from './config';
import { useVModel } from '@vueuse/core';
import { Form, Typography } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
Draggable,
InputWithColor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
/** 列表导航属性面板 */
defineOptions({ name: 'MenuListProperty' });
const props = defineProps<{ modelValue: MenuListProperty }>();
const emit = defineEmits(['update:modelValue']);
const { Text: ATypographyText } = Typography;
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<ATypographyText tag="p"> 菜单设置 </ATypographyText>
<ATypographyText type="secondary" class="text-sm">
拖动左侧的小圆点可以调整顺序
</ATypographyText>
<Form :model="formData" class="mt-2">
<Draggable
v-model="formData.list"
:empty-item="EMPTY_MENU_LIST_ITEM_PROPERTY"
>
<template #default="{ element }">
<FormItem label="图标" name="iconUrl">
<UploadImg
v-model="element.iconUrl"
height="80px"
width="80px"
:show-description="false"
>
<template #tip> 建议尺寸：44 * 44 </template>
</UploadImg>
</FormItem>
<FormItem label="标题" name="title">
<InputWithColor
v-model="element.title"
v-model:color="element.titleColor"
/>
</FormItem>
<FormItem label="副标题" name="subtitle">
<InputWithColor
v-model="element.subtitle"
v-model:color="element.subtitleColor"
/>
</FormItem>
<FormItem label="链接" name="url">
<AppLinkInput v-model="element.url" />
</FormItem>
</template>
</Draggable>
</Form>
</ComponentContainerProperty>
</template>

54
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
View File

@@ -4,40 +4,28 @@ import { cloneDeep } from '@vben/utils';
/** 菜单导航属性 */
export interface MenuSwiperProperty {
// 布局： 图标+文字 | 图标
layout: 'icon' | 'iconText';
// 行数
row: number;
// 列数
column: number;
// 导航菜单列表
list: MenuSwiperItemProperty[];
// 组件样式
style: ComponentStyle;
}
/** 菜单导航项目属性 */
export interface MenuSwiperItemProperty {
// 图标链接
iconUrl: string;
// 标题
title: string;
// 标题颜色
titleColor: string;
// 链接
url: string;
// 角标
badge: {
// 角标背景颜色
bgColor: string;
// 是否显示
show: boolean;
// 角标文字
text: string;
// 角标文字颜色
textColor: string;
};
layout: 'icon' | 'iconText'; // 布局：图标+文字 | 图标
row: number; // 行数
column: number; // 列数
list: MenuSwiperItemProperty[]; // 导航菜单列表
style: ComponentStyle; // 组件样式
}
/** 菜单导航项目属性 */
export interface MenuSwiperItemProperty {
iconUrl: string; // 图标链接
title: string; // 标题
titleColor: string; // 标题颜色
url: string; // 链接
badge: {
bgColor: string; // 角标背景颜色
show: boolean; // 是否显示
text: string; // 角标文字
textColor: string; // 角标文字颜色
}; // 角标
}
/** 空菜单导航项目属性 */
export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
title: '标题',
titleColor: '#333',
@@ -48,7 +36,7 @@ export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
},
} as MenuSwiperItemProperty;
// 定义组件
/** 定义组件 */
export const component = {
id: 'MenuSwiper',
name: '菜单导航',

103
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
View File

@@ -1,4 +1,103 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { MenuSwiperProperty } from './config';
import { cloneDeep } from '@vben/utils';
import { useVModel } from '@vueuse/core';
import {
Card,
Form,
FormItem,
Radio,
RadioGroup,
Switch,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
ColorInput,
Draggable,
InputWithColor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
/** 菜单导航属性面板 */
defineOptions({ name: 'MenuSwiperProperty' });
const props = defineProps<{ modelValue: MenuSwiperProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData" class="mt-2">
<FormItem label="布局" name="layout">
<RadioGroup v-model:value="formData.layout">
<Radio value="iconText">图标+文字</Radio>
<Radio value="icon">仅图标</Radio>
</RadioGroup>
</FormItem>
<FormItem label="行数" name="row">
<RadioGroup v-model:value="formData.row">
<Radio :value="1">1行</Radio>
<Radio :value="2">2行</Radio>
</RadioGroup>
</FormItem>
<FormItem label="列数" name="column">
<RadioGroup v-model:value="formData.column">
<Radio :value="3">3列</Radio>
<Radio :value="4">4列</Radio>
<Radio :value="5">5列</Radio>
</RadioGroup>
</FormItem>
<Card title="菜单设置" class="property-group">
<Draggable
v-model="formData.list"
:empty-item="cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)"
>
<template #default="{ element }">
<FormItem label="图标" name="iconUrl">
<UploadImg
v-model="element.iconUrl"
height="80px"
width="80px"
:show-description="false"
>
<template #tip> 建议尺寸：98 * 98 </template>
</UploadImg>
</FormItem>
<FormItem label="标题" name="title">
<InputWithColor
v-model="element.title"
v-model:color="element.titleColor"
/>
</FormItem>
<FormItem label="链接" name="url">
<AppLinkInput v-model="element.url" />
</FormItem>
<FormItem label="显示角标" name="badge.show">
<Switch v-model:checked="element.badge.show" />
</FormItem>
<template v-if="element.badge.show">
<FormItem label="角标内容" name="badge.text">
<InputWithColor
v-model="element.badge.text"
v-model:color="element.badge.textColor"
/>
</FormItem>
<FormItem label="背景颜色" name="badge.bgColor">
<ColorInput v-model="element.badge.bgColor" />
</FormItem>
</template>
</template>
</Draggable>
</Card>
</Form>
</ComponentContainerProperty>
</template>

11
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
View File

@@ -6,7 +6,14 @@ import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/u
import { computed, ref } from 'vue';
import { useVModel } from '@vueuse/core';
import { FormItem, Input, Radio, RadioGroup, Slider } from 'ant-design-vue';
import {
FormItem,
Image,
Input,
Radio,
RadioGroup,
Slider,
} from 'ant-design-vue';
import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
import UploadImg from '#/components/upload/image-upload.vue';
@@ -71,7 +78,7 @@ const handleHotAreaSelected = (
class="m-b-16px"
@hot-area-selected="handleHotAreaSelected"
/>
<img
<Image
v-if="isMp"
alt=""
style="width: 76px; height: 30px"

68
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
View File

@@ -2,56 +2,38 @@ import type { DiyComponent } from '../../../util';
/** 顶部导航栏属性 */
export interface NavigationBarProperty {
// 背景类型
bgType: 'color' | 'img';
// 背景颜色
bgColor: string;
// 图片链接
bgImg: string;
// 样式类型：默认 | 沉浸式
styleType: 'inner' | 'normal';
// 常驻显示
alwaysShow: boolean;
// 小程序单元格列表
mpCells: NavigationBarCellProperty[];
// 其它平台单元格列表
otherCells: NavigationBarCellProperty[];
// 本地变量
bgType: 'color' | 'img'; // 背景类型
bgColor: string; // 背景颜色
bgImg: string; // 图片链接
styleType: 'inner' | 'normal'; // 样式类型：默认 | 沉浸式
alwaysShow: boolean; // 常驻显示
mpCells: NavigationBarCellProperty[]; // 小程序单元格列表
otherCells: NavigationBarCellProperty[]; // 其它平台单元格列表
_local: {
// 预览顶部导航（小程序）
previewMp: boolean;
// 预览顶部导航（非小程序）
previewOther: boolean;
};
previewMp: boolean; // 预览顶部导航（小程序）
previewOther: boolean; // 预览顶部导航（非小程序）
}; // 本地变量
}
/** 顶部导航栏 - 单元格 属性 */
export interface NavigationBarCellProperty {
// 类型：文字 | 图片 | 搜索框
type: 'image' | 'search' | 'text';
// 宽度
width: number;
// 高度
height: number;
// 顶部位置
top: number;
// 左侧位置
left: number;
// 文字内容
text: string;
// 文字颜色
textColor: string;
// 图片地址
imgUrl: string;
// 图片链接
url: string;
// 搜索框：提示文字
placeholder: string;
// 搜索框：边框圆角半径
borderRadius: number;
type: 'image' | 'search' | 'text'; // 类型：文字 | 图片 | 搜索框
width: number; // 宽度
height: number; // 高度
top: number; // 顶部位置
left: number; // 左侧位置
text: string; // 文字内容
textColor: string; // 文字颜色
imgUrl: string; // 图片地址
url: string; // 图片链接
backgroundColor: string; // 搜索框：框体颜色
placeholder: string; // 搜索框：提示文字
placeholderPosition: string; // 搜索框：提示文字位置
showScan: boolean; // 搜索框：是否显示扫一扫
borderRadius: number; // 搜索框：边框圆角半径
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'NavigationBar',
name: '顶部导航栏',

23
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
View File

@@ -2,27 +2,20 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 公告栏属性 */
export interface NoticeBarProperty {
// 图标地址
iconUrl: string;
// 公告内容列表
contents: NoticeContentProperty[];
// 背景颜色
backgroundColor: string;
// 文字颜色
textColor: string;
// 组件样式
style: ComponentStyle;
iconUrl: string; // 图标地址
contents: NoticeContentProperty[]; // 公告内容列表
backgroundColor: string; // 背景颜色
textColor: string; // 文字颜色
style: ComponentStyle; // 组件样式
}
/** 内容属性 */
export interface NoticeContentProperty {
// 内容文字
text: string;
// 链接地址
url: string;
text: string; // 内容文字
url: string; // 链接地址
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'NoticeBar',
name: '公告栏',

61
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
View File

@@ -1,4 +1,61 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { NoticeBarProperty } from './config';
import { useVModel } from '@vueuse/core';
import { Card, Form, FormItem, Input } from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
ColorInput,
Draggable,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 公告栏属性面板 */
defineOptions({ name: 'NoticeBarProperty' });
const props = defineProps<{ modelValue: NoticeBarProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
const rules = {
content: [{ required: true, message: '请输入公告', trigger: 'blur' }],
}; // 表单校验
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData" :rules="rules">
<FormItem label="公告图标" name="iconUrl">
<UploadImg
v-model="formData.iconUrl"
height="48px"
:show-description="false"
>
<template #tip>建议尺寸：24 * 24</template>
</UploadImg>
</FormItem>
<FormItem label="背景颜色" name="backgroundColor">
<ColorInput v-model="formData.backgroundColor" />
</FormItem>
<FormItem label="文字颜色" name="textColor">
<ColorInput v-model="formData.textColor" />
</FormItem>
<Card title="公告内容" class="property-group">
<Draggable v-model="formData.contents">
<template #default="{ element }">
<FormItem label="公告" name="text">
<Input v-model:value="element.text" placeholder="请输入公告" />
</FormItem>
<FormItem label="链接" name="url">
<AppLinkInput v-model="element.url" />
</FormItem>
</template>
</Draggable>
</Card>
</Form>
</ComponentContainerProperty>
</template>

11
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
View File

@@ -2,15 +2,12 @@ import type { DiyComponent } from '../../../util';
/** 页面设置属性 */
export interface PageConfigProperty {
// 页面描述
description: string;
// 页面背景颜色
backgroundColor: string;
// 页面背景图片
backgroundImage: string;
description: string; // 页面描述
backgroundColor: string; // 页面背景颜色
backgroundImage: string; // 页面背景图片
}
// 定义页面组件
/** 定义页面组件 */
export const component = {
id: 'PageConfig',
name: '页面设置',

81
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
View File

@@ -2,63 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 商品卡片属性 */
export interface ProductCardProperty {
// 布局类型：单列大图 | 单列小图 | 双列
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
// 商品字段
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列大图 | 单列小图 | 双列
fields: {
// 商品简介
introduction: ProductCardFieldProperty;
// 商品市场价
marketPrice: ProductCardFieldProperty;
// 商品名称
name: ProductCardFieldProperty;
// 商品价格
price: ProductCardFieldProperty;
// 商品销量
salesCount: ProductCardFieldProperty;
// 商品库存
stock: ProductCardFieldProperty;
};
// 角标
introduction: ProductCardFieldProperty; // 商品简介
marketPrice: ProductCardFieldProperty; // 商品市场价
name: ProductCardFieldProperty; // 商品名称
price: ProductCardFieldProperty; // 商品价格
salesCount: ProductCardFieldProperty; // 商品销量
stock: ProductCardFieldProperty; // 商品库存
}; // 商品字段
badge: {
// 角标图片
imgUrl: string;
// 是否显示
show: boolean;
};
// 按钮
imgUrl: string; // 角标图片
show: boolean; // 是否显示
}; // 角标
btnBuy: {
// 文字按钮：背景渐变起始颜色
bgBeginColor: string;
// 文字按钮：背景渐变结束颜色
bgEndColor: string;
// 图片按钮：图片地址
imgUrl: string;
// 文字
text: string;
// 类型：文字 | 图片
type: 'img' | 'text';
};
// 上圆角
borderRadiusTop: number;
// 下圆角
borderRadiusBottom: number;
// 间距
space: number;
// 商品编号列表
spuIds: number[];
// 组件样式
style: ComponentStyle;
}
// 商品字段
export interface ProductCardFieldProperty {
// 是否显示
show: boolean;
// 颜色
color: string;
bgBeginColor: string; // 文字按钮：背景渐变起始颜色
bgEndColor: string; // 文字按钮：背景渐变结束颜色
imgUrl: string; // 图片按钮：图片地址
text: string; // 文字
type: 'img' | 'text'; // 类型：文字 | 图片
}; // 按钮
borderRadiusTop: number; // 上圆角
borderRadiusBottom: number; // 下圆角
space: number; // 间距
spuIds: number[]; // 商品编号列表
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 商品字段属性 */
export interface ProductCardFieldProperty {
show: boolean; // 是否显示
color: string; // 颜色
}
/** 定义组件 */
export const component = {
id: 'ProductCard',
name: '商品卡片',

8
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
View File

@@ -32,7 +32,7 @@ watch(
* 计算商品的间距
* @param index 商品索引
*/
const calculateSpace = (index: number) => {
function calculateSpace(index: number) {
// 商品的列数
const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
// 第一列没有左边距
@@ -41,19 +41,19 @@ const calculateSpace = (index: number) => {
const marginTop = index < columns ? '0' : `${props.property.space}px`;
return { marginLeft, marginTop };
};
}
// 容器
const containerRef = ref();
// 计算商品的宽度
const calculateWidth = () => {
function calculateWidth() {
let width = '100%';
// 双列时每列的宽度为：（总宽度 - 间距）/ 2
if (props.property.layoutType === 'twoCol') {
width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
}
return { width };
};
}
</script>
<template>
<div

166
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
View File

@@ -1,4 +1,166 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { ProductCardProperty } from './config';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Card,
Checkbox,
Form,
FormItem,
Input,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { SpuShowcase } from '#/views/mall/product/spu/components';
import { ColorInput } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 商品卡片属性面板 */
defineOptions({ name: 'ProductCardProperty' });
const props = defineProps<{ modelValue: ProductCardProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Card title="商品列表" class="property-group">
<SpuShowcase v-model="formData.spuIds" />
</Card>
<Card title="商品样式" class="property-group">
<FormItem label="布局" name="type">
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="商品名称" name="fields.name.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.name.color" />
<Checkbox v-model:checked="formData.fields.name.show" />
</div>
</FormItem>
<FormItem label="商品简介" name="fields.introduction.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.introduction.color" />
<Checkbox v-model:checked="formData.fields.introduction.show" />
</div>
</FormItem>
<FormItem label="商品价格" name="fields.price.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.price.color" />
<Checkbox v-model:checked="formData.fields.price.show" />
</div>
</FormItem>
<FormItem label="市场价" name="fields.marketPrice.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.marketPrice.color" />
<Checkbox v-model:checked="formData.fields.marketPrice.show" />
</div>
</FormItem>
<FormItem label="商品销量" name="fields.salesCount.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.salesCount.color" />
<Checkbox v-model:checked="formData.fields.salesCount.show" />
</div>
</FormItem>
<FormItem label="商品库存" name="fields.stock.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.stock.color" />
<Checkbox v-model:checked="formData.fields.stock.show" />
</div>
</FormItem>
</Card>
<Card title="角标" class="property-group">
<FormItem label="角标" name="badge.show">
<Switch v-model:checked="formData.badge.show" />
</FormItem>
<FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
<UploadImg
v-model="formData.badge.imgUrl"
height="44px"
width="72px"
:show-description="false"
>
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</FormItem>
</Card>
<Card title="按钮" class="property-group">
<FormItem label="按钮类型" name="btnBuy.type">
<RadioGroup v-model:value="formData.btnBuy.type">
<RadioButton value="text">文字</RadioButton>
<RadioButton value="img">图片</RadioButton>
</RadioGroup>
</FormItem>
<template v-if="formData.btnBuy.type === 'text'">
<FormItem label="按钮文字" name="btnBuy.text">
<Input v-model:value="formData.btnBuy.text" />
</FormItem>
<FormItem label="左侧背景" name="btnBuy.bgBeginColor">
<ColorInput v-model="formData.btnBuy.bgBeginColor" />
</FormItem>
<FormItem label="右侧背景" name="btnBuy.bgEndColor">
<ColorInput v-model="formData.btnBuy.bgEndColor" />
</FormItem>
</template>
<template v-else>
<FormItem label="图片" name="btnBuy.imgUrl">
<UploadImg
v-model="formData.btnBuy.imgUrl"
height="56px"
width="56px"
:show-description="false"
>
<template #tip> 建议尺寸：56 * 56 </template>
</UploadImg>
</FormItem>
</template>
</Card>
<Card title="商品样式" class="property-group">
<FormItem label="上圆角" name="borderRadiusTop">
<Slider
v-model:value="formData.borderRadiusTop"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="下圆角" name="borderRadiusBottom">
<Slider
v-model:value="formData.borderRadiusBottom"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="间隔" name="space">
<Slider v-model:value="formData.space" :max="100" :min="0" />
</FormItem>
</Card>
</Form>
</ComponentContainerProperty>
</template>

51
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
View File

@@ -2,42 +2,29 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 商品栏属性 */
export interface ProductListProperty {
// 布局类型：双列 | 三列 | 水平滑动
layoutType: 'horizSwiper' | 'threeCol' | 'twoCol';
// 商品字段
layoutType: 'horizSwiper' | 'threeCol' | 'twoCol'; // 布局类型：双列 | 三列 | 水平滑动
fields: {
// 商品名称
name: ProductListFieldProperty;
// 商品价格
price: ProductListFieldProperty;
};
// 角标
name: ProductListFieldProperty; // 商品名称
price: ProductListFieldProperty; // 商品价格
}; // 商品字段
badge: {
// 角标图片
imgUrl: string;
// 是否显示
show: boolean;
};
// 上圆角
borderRadiusTop: number;
// 下圆角
borderRadiusBottom: number;
// 间距
space: number;
// 商品编号列表
spuIds: number[];
// 组件样式
style: ComponentStyle;
}
// 商品字段
export interface ProductListFieldProperty {
// 是否显示
show: boolean;
// 颜色
color: string;
imgUrl: string; // 角标图片
show: boolean; // 是否显示
}; // 角标
borderRadiusTop: number; // 上圆角
borderRadiusBottom: number; // 下圆角
space: number; // 间距
spuIds: number[]; // 商品编号列表
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 商品字段属性 */
export interface ProductListFieldProperty {
show: boolean; // 是否显示
color: string; // 颜色
}
/** 定义组件 */
export const component = {
id: 'ProductList',
name: '商品栏',

8
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
View File

@@ -2,13 +2,11 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 营销文章属性 */
export interface PromotionArticleProperty {
// 文章编号
id: number;
// 组件样式
style: ComponentStyle;
id: number; // 文章编号
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'PromotionArticle',
name: '营销文章',

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
View File

@@ -56,7 +56,7 @@ onMounted(() => {
filterable
:loading="loading"
:options="
articles.map((item) => ({ label: item.title, value: item.id }))
articles.map((item: any) => ({ label: item.title, value: item.id }))
"
@search="queryArticleList"
/>

76
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
View File

@@ -2,64 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 拼团属性 */
export interface PromotionCombinationProperty {
// 布局类型：单列 | 三列
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
// 商品字段
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
fields: {
// 商品简介
introduction: PromotionCombinationFieldProperty;
// 市场价
marketPrice: PromotionCombinationFieldProperty;
// 商品名称
name: PromotionCombinationFieldProperty;
// 商品价格
price: PromotionCombinationFieldProperty;
// 商品销量
salesCount: PromotionCombinationFieldProperty;
// 商品库存
stock: PromotionCombinationFieldProperty;
};
// 角标
introduction: PromotionCombinationFieldProperty; // 商品简介
marketPrice: PromotionCombinationFieldProperty; // 市场价
name: PromotionCombinationFieldProperty; // 商品名称
price: PromotionCombinationFieldProperty; // 商品价格
salesCount: PromotionCombinationFieldProperty; // 商品销量
stock: PromotionCombinationFieldProperty; // 商品库存
}; // 商品字段
badge: {
// 角标图片
imgUrl: string;
// 是否显示
show: boolean;
};
// 按钮
imgUrl: string; // 角标图片
show: boolean; // 是否显示
}; // 角标
btnBuy: {
// 文字按钮：背景渐变起始颜色
bgBeginColor: string;
// 文字按钮：背景渐变结束颜色
bgEndColor: string;
// 图片按钮：图片地址
imgUrl: string;
// 文字
text: string;
// 类型：文字 | 图片
type: 'img' | 'text';
};
// 上圆角
borderRadiusTop: number;
// 下圆角
borderRadiusBottom: number;
// 间距
space: number;
// 拼团活动编号
activityIds: number[];
// 组件样式
style: ComponentStyle;
bgBeginColor: string; // 文字按钮：背景渐变起始颜色
bgEndColor: string; // 文字按钮：背景渐变结束颜色
imgUrl: string; // 图片按钮：图片地址
text: string; // 文字
type: 'img' | 'text'; // 类型：文字 | 图片
}; // 按钮
borderRadiusTop: number; // 上圆角
borderRadiusBottom: number; // 下圆角
space: number; // 间距
activityIds: number[]; // 拼团活动编号
style: ComponentStyle; // 组件样式
}
// 商品字段
/** 商品字段属性 */
export interface PromotionCombinationFieldProperty {
// 是否显示
show: boolean;
// 颜色
color: string;
show: boolean; // 是否显示
color: string; // 颜色
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'PromotionCombination',
name: '拼团',

75
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
View File

@@ -2,64 +2,41 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 积分商城属性 */
export interface PromotionPointProperty {
// 布局类型：单列 | 三列
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
// 商品字段
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
fields: {
// 商品简介
introduction: PromotionPointFieldProperty;
// 市场价
marketPrice: PromotionPointFieldProperty;
// 商品名称
name: PromotionPointFieldProperty;
// 商品价格
price: PromotionPointFieldProperty;
// 商品销量
salesCount: PromotionPointFieldProperty;
// 商品库存
stock: PromotionPointFieldProperty;
};
// 角标
introduction: PromotionPointFieldProperty; // 商品简介
marketPrice: PromotionPointFieldProperty; // 市场价
name: PromotionPointFieldProperty; // 商品名称
price: PromotionPointFieldProperty; // 商品价格
salesCount: PromotionPointFieldProperty; // 商品销量
stock: PromotionPointFieldProperty; // 商品库存
}; // 商品字段
badge: {
// 角标图片
imgUrl: string;
// 是否显示
show: boolean;
};
imgUrl: string; // 角标图片
show: boolean; // 是否显示
}; // 角标
// 按钮
btnBuy: {
// 文字按钮：背景渐变起始颜色
bgBeginColor: string;
// 文字按钮：背景渐变结束颜色
bgEndColor: string;
// 图片按钮：图片地址
imgUrl: string;
// 文字
text: string;
// 类型：文字 | 图片
type: 'img' | 'text';
};
// 上圆角
borderRadiusTop: number;
// 下圆角
borderRadiusBottom: number;
// 间距
space: number;
// 秒杀活动编号
activityIds: number[];
// 组件样式
style: ComponentStyle;
bgBeginColor: string; // 文字按钮：背景渐变起始颜色
bgEndColor: string; // 文字按钮：背景渐变结束颜色
imgUrl: string; // 图片按钮：图片地址
text: string; // 文字
type: 'img' | 'text'; // 类型：文字 | 图片
}; // 按钮
borderRadiusTop: number; // 上圆角
borderRadiusBottom: number; // 下圆角
space: number; // 间距
activityIds: number[]; // 积分活动编号
style: ComponentStyle; // 组件样式
}
// 商品字段
/** 商品字段属性 */
export interface PromotionPointFieldProperty {
// 是否显示
show: boolean;
// 颜色
color: string;
show: boolean; // 是否显示
color: string; // 颜色
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'PromotionPoint',
name: '积分商城',

166
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
View File

@@ -1,4 +1,164 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
<script lang="ts" setup>
import type { PromotionPointProperty } from './config';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Card,
Checkbox,
Form,
FormItem,
Input,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { ColorInput } from '#/views/mall/promotion/components';
import { PointShowcase } from '#/views/mall/promotion/point/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 积分属性面板 */
defineOptions({ name: 'PromotionPointProperty' });
const props = defineProps<{ modelValue: PromotionPointProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Card title="积分商城活动" class="property-group">
<PointShowcase v-model="formData.activityIds" />
</Card>
<Card title="商品样式" class="property-group">
<FormItem label="布局" name="type">
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="商品名称" name="fields.name.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.name.color" />
<Checkbox v-model:checked="formData.fields.name.show" />
</div>
</FormItem>
<FormItem label="商品简介" name="fields.introduction.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.introduction.color" />
<Checkbox v-model:checked="formData.fields.introduction.show" />
</div>
</FormItem>
<FormItem label="商品价格" name="fields.price.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.price.color" />
<Checkbox v-model:checked="formData.fields.price.show" />
</div>
</FormItem>
<FormItem label="市场价" name="fields.marketPrice.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.marketPrice.color" />
<Checkbox v-model:checked="formData.fields.marketPrice.show" />
</div>
</FormItem>
<FormItem label="商品销量" name="fields.salesCount.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.salesCount.color" />
<Checkbox v-model:checked="formData.fields.salesCount.show" />
</div>
</FormItem>
<FormItem label="商品库存" name="fields.stock.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.stock.color" />
<Checkbox v-model:checked="formData.fields.stock.show" />
</div>
</FormItem>
</Card>
<Card title="角标" class="property-group">
<FormItem label="角标" name="badge.show">
<Switch v-model:checked="formData.badge.show" />
</FormItem>
<FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
<UploadImg
v-model="formData.badge.imgUrl"
height="44px"
width="72px"
:show-description="false"
>
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</FormItem>
</Card>
<Card title="按钮" class="property-group">
<FormItem label="按钮类型" name="btnBuy.type">
<RadioGroup v-model:value="formData.btnBuy.type">
<RadioButton value="text">文字</RadioButton>
<RadioButton value="img">图片</RadioButton>
</RadioGroup>
</FormItem>
<template v-if="formData.btnBuy.type === 'text'">
<FormItem label="按钮文字" name="btnBuy.text">
<Input v-model:value="formData.btnBuy.text" />
</FormItem>
<FormItem label="左侧背景" name="btnBuy.bgBeginColor">
<ColorInput v-model="formData.btnBuy.bgBeginColor" />
</FormItem>
<FormItem label="右侧背景" name="btnBuy.bgEndColor">
<ColorInput v-model="formData.btnBuy.bgEndColor" />
</FormItem>
</template>
<template v-else>
<FormItem label="图片" name="btnBuy.imgUrl">
<UploadImg
v-model="formData.btnBuy.imgUrl"
height="56px"
width="56px"
:show-description="false"
>
<template #tip> 建议尺寸：56 * 56 </template>
</UploadImg>
</FormItem>
</template>
</Card>
<Card title="商品样式" class="property-group">
<FormItem label="上圆角" name="borderRadiusTop">
<Slider
v-model:value="formData.borderRadiusTop"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="下圆角" name="borderRadiusBottom">
<Slider
v-model:value="formData.borderRadiusBottom"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="间隔" name="space">
<Slider v-model:value="formData.space" :max="100" :min="0" />
</FormItem>
</Card>
</Form>
</ComponentContainerProperty>
</template>

76
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
View File

@@ -2,64 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 秒杀属性 */
export interface PromotionSeckillProperty {
// 布局类型：单列 | 三列
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
// 商品字段
layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
fields: {
// 商品简介
introduction: PromotionSeckillFieldProperty;
// 市场价
marketPrice: PromotionSeckillFieldProperty;
// 商品名称
name: PromotionSeckillFieldProperty;
// 商品价格
price: PromotionSeckillFieldProperty;
// 商品销量
salesCount: PromotionSeckillFieldProperty;
// 商品库存
stock: PromotionSeckillFieldProperty;
};
// 角标
introduction: PromotionSeckillFieldProperty; // 商品简介
marketPrice: PromotionSeckillFieldProperty; // 市场价
name: PromotionSeckillFieldProperty; // 商品名称
price: PromotionSeckillFieldProperty; // 商品价格
salesCount: PromotionSeckillFieldProperty; // 商品销量
stock: PromotionSeckillFieldProperty; // 商品库存
}; // 商品字段
badge: {
// 角标图片
imgUrl: string;
// 是否显示
show: boolean;
};
// 按钮
imgUrl: string; // 角标图片
show: boolean; // 是否显示
}; // 角标
btnBuy: {
// 文字按钮：背景渐变起始颜色
bgBeginColor: string;
// 文字按钮：背景渐变结束颜色
bgEndColor: string;
// 图片按钮：图片地址
imgUrl: string;
// 文字
text: string;
// 类型：文字 | 图片
type: 'img' | 'text';
};
// 上圆角
borderRadiusTop: number;
// 下圆角
borderRadiusBottom: number;
// 间距
space: number;
// 秒杀活动编号
activityIds: number[];
// 组件样式
style: ComponentStyle;
bgBeginColor: string; // 文字按钮：背景渐变起始颜色
bgEndColor: string; // 文字按钮：背景渐变结束颜色
imgUrl: string; // 图片按钮：图片地址
text: string; // 文字
type: 'img' | 'text'; // 类型：文字 | 图片
}; // 按钮
borderRadiusTop: number; // 上圆角
borderRadiusBottom: number; // 下圆角
space: number; // 间距
activityIds: number[]; // 秒杀活动编号
style: ComponentStyle; // 组件样式
}
// 商品字段
/** 商品字段属性 */
export interface PromotionSeckillFieldProperty {
// 是否显示
show: boolean;
// 颜色
color: string;
show: boolean; // 是否显示
color: string; // 颜色
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'PromotionSeckill',
name: '秒杀',

167
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
View File

@@ -1,4 +1,167 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { PromotionSeckillProperty } from './config';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Card,
Checkbox,
Form,
FormItem,
Input,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import { ColorInput } from '#/views/mall/promotion/components';
// TODO: 添加组件
// import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 秒杀属性面板 */
defineOptions({ name: 'PromotionSeckillProperty' });
const props = defineProps<{ modelValue: PromotionSeckillProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Card title="秒杀活动" class="property-group">
<SeckillShowcase v-model="formData.activityIds" />
</Card>
<Card title="商品样式" class="property-group">
<FormItem label="布局" name="type">
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="商品名称" name="fields.name.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.name.color" />
<Checkbox v-model:checked="formData.fields.name.show" />
</div>
</FormItem>
<FormItem label="商品简介" name="fields.introduction.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.introduction.color" />
<Checkbox v-model:checked="formData.fields.introduction.show" />
</div>
</FormItem>
<FormItem label="商品价格" name="fields.price.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.price.color" />
<Checkbox v-model:checked="formData.fields.price.show" />
</div>
</FormItem>
<FormItem label="市场价" name="fields.marketPrice.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.marketPrice.color" />
<Checkbox v-model:checked="formData.fields.marketPrice.show" />
</div>
</FormItem>
<FormItem label="商品销量" name="fields.salesCount.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.salesCount.color" />
<Checkbox v-model:checked="formData.fields.salesCount.show" />
</div>
</FormItem>
<FormItem label="商品库存" name="fields.stock.show">
<div class="flex gap-2">
<ColorInput v-model="formData.fields.stock.color" />
<Checkbox v-model:checked="formData.fields.stock.show" />
</div>
</FormItem>
</Card>
<Card title="角标" class="property-group">
<FormItem label="角标" name="badge.show">
<Switch v-model:checked="formData.badge.show" />
</FormItem>
<FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
<UploadImg
v-model="formData.badge.imgUrl"
height="44px"
width="72px"
:show-description="false"
>
<template #tip> 建议尺寸：36 * 22 </template>
</UploadImg>
</FormItem>
</Card>
<Card title="按钮" class="property-group">
<FormItem label="按钮类型" name="btnBuy.type">
<RadioGroup v-model:value="formData.btnBuy.type">
<RadioButton value="text">文字</RadioButton>
<RadioButton value="img">图片</RadioButton>
</RadioGroup>
</FormItem>
<template v-if="formData.btnBuy.type === 'text'">
<FormItem label="按钮文字" name="btnBuy.text">
<Input v-model:value="formData.btnBuy.text" />
</FormItem>
<FormItem label="左侧背景" name="btnBuy.bgBeginColor">
<ColorInput v-model="formData.btnBuy.bgBeginColor" />
</FormItem>
<FormItem label="右侧背景" name="btnBuy.bgEndColor">
<ColorInput v-model="formData.btnBuy.bgEndColor" />
</FormItem>
</template>
<template v-else>
<FormItem label="图片" name="btnBuy.imgUrl">
<UploadImg
v-model="formData.btnBuy.imgUrl"
height="56px"
width="56px"
:show-description="false"
>
<template #tip> 建议尺寸：56 * 56</template>
</UploadImg>
</FormItem>
</template>
</Card>
<Card title="商品样式" class="property-group">
<FormItem label="上圆角" name="borderRadiusTop">
<Slider
v-model:value="formData.borderRadiusTop"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="下圆角" name="borderRadiusBottom">
<Slider
v-model:value="formData.borderRadiusBottom"
:max="100"
:min="0"
/>
</FormItem>
<FormItem label="间隔" name="space">
<Slider v-model:value="formData.space" :max="100" :min="0" />
</FormItem>
</Card>
</Form>
</ComponentContainerProperty>
</template>

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
View File

@@ -13,10 +13,10 @@ export interface SearchProperty {
style: ComponentStyle;
}
// 文字位置
/** 文字位置 */
export type PlaceholderPosition = 'center' | 'left';
// 定义组件
/** 定义组件 */
export const component = {
id: 'SearchBar',
name: '搜索框',

115
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
View File

@@ -1,4 +1,115 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { SearchProperty } from './config';
import { watch } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { isString } from '@vben/utils';
import { useVModel } from '@vueuse/core';
import {
Card,
Form,
FormItem,
Input,
RadioButton,
RadioGroup,
Slider,
Switch,
Tooltip,
} from 'ant-design-vue';
import { ColorInput, Draggable } from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 搜索框属性面板 */
defineOptions({ name: 'SearchProperty' });
const props = defineProps<{ modelValue: SearchProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
/** 监听热词数组变化 */
watch(
() => formData.value.hotKeywords,
(newVal) => {
// 找到非字符串项的索引
const nonStringIndex = newVal.findIndex((item) => !isString(item));
if (nonStringIndex !== -1) {
formData.value.hotKeywords[nonStringIndex] = '';
}
},
{ deep: true, flush: 'post' },
);
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData">
<Card title="搜索热词" class="property-group">
<Draggable
v-model="formData.hotKeywords"
:empty-item="{
type: 'input',
placeholder: '请输入热词',
}"
>
<template #default="{ index }">
<Input
v-model:value="formData.hotKeywords[index]"
placeholder="请输入热词"
/>
</template>
</Draggable>
</Card>
<Card title="搜索样式" class="property-group">
<FormItem label="框体样式">
<RadioGroup v-model:value="formData!.borderRadius">
<Tooltip title="方形" placement="top">
<RadioButton :value="0">
<IconifyIcon icon="tabler:input-search" />
</RadioButton>
</Tooltip>
<Tooltip title="圆形" placement="top">
<RadioButton :value="10">
<IconifyIcon icon="iconoir:input-search" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="提示文字" name="placeholder">
<Input v-model:value="formData.placeholder" />
</FormItem>
<FormItem label="文本位置" name="placeholderPosition">
<RadioGroup v-model:value="formData!.placeholderPosition">
<Tooltip title="居左" placement="top">
<RadioButton value="left">
<IconifyIcon icon="ant-design:align-left-outlined" />
</RadioButton>
</Tooltip>
<Tooltip title="居中" placement="top">
<RadioButton value="center">
<IconifyIcon icon="ant-design:align-center-outlined" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="扫一扫" name="showScan">
<Switch v-model:checked="formData!.showScan" />
</FormItem>
<FormItem label="框体高度" name="height">
<Slider v-model:value="formData!.height" :max="50" :min="28" />
</FormItem>
<FormItem label="框体颜色" name="backgroundColor">
<ColorInput v-model="formData.backgroundColor" />
</FormItem>
<FormItem label="文本颜色" name="textColor">
<ColorInput v-model="formData.textColor" />
</FormItem>
</Card>
</Form>
</ComponentContainerProperty>
</template>

42
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
View File

@@ -2,41 +2,29 @@ import type { DiyComponent } from '../../../util';
/** 底部导航菜单属性 */
export interface TabBarProperty {
// 选项列表
items: TabBarItemProperty[];
// 主题
theme: string;
// 样式
style: TabBarStyle;
items: TabBarItemProperty[]; // 选项列表
theme: string; // 主题
style: TabBarStyle; // 样式
}
// 选项属性
/** 选项属性 */
export interface TabBarItemProperty {
// 标签文字
text: string;
// 链接
url: string;
// 默认图标链接
iconUrl: string;
// 选中的图标链接
activeIconUrl: string;
text: string; // 标签文字
url: string; // 链接
iconUrl: string; // 默认图标链接
activeIconUrl: string; // 选中的图标链接
}
// 样式
/** 样式 */
export interface TabBarStyle {
// 背景类型
bgType: 'color' | 'img';
// 背景颜色
bgColor: string;
// 图片链接
bgImg: string;
// 默认颜色
color: string;
// 选中的颜色
activeColor: string;
bgType: 'color' | 'img'; // 背景类型
bgColor: string; // 背景颜色
bgImg: string; // 图片链接
color: string; // 默认颜色
activeColor: string; // 选中的颜色
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'TabBar',
name: '底部导航',

56
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
View File

@@ -2,46 +2,28 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 标题栏属性 */
export interface TitleBarProperty {
// 背景图
bgImgUrl: string;
// 偏移
marginLeft: number;
// 显示位置
textAlign: 'center' | 'left';
// 主标题
title: string;
// 副标题
description: string;
// 标题大小
titleSize: number;
// 描述大小
descriptionSize: number;
// 标题粗细
titleWeight: number;
// 描述粗细
descriptionWeight: number;
// 标题颜色
titleColor: string;
// 描述颜色
descriptionColor: string;
// 高度
height: number;
// 查看更多
bgImgUrl: string; // 背景图
marginLeft: number; // 偏移
textAlign: 'center' | 'left'; // 显示位置
title: string; // 主标题
description: string; // 副标题
titleSize: number; // 标题大小
descriptionSize: number; // 描述大小
titleWeight: number; // 标题粗细
descriptionWeight: number; // 描述粗细
titleColor: string; // 标题颜色
descriptionColor: string; // 描述颜色
height: number; // 高度
more: {
// 是否显示查看更多
show: false;
// 自定义文字
text: string;
// 样式选择
type: 'all' | 'icon' | 'text';
// 链接
url: string;
};
// 组件样式
style: ComponentStyle;
show: false; // 是否显示查看更多
text: string; // 自定义文字
type: 'all' | 'icon' | 'text'; // 样式选择
url: string; // 链接
}; // 查看更多
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'TitleBar',
name: '标题栏',

147
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
View File

@@ -1,4 +1,147 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import type { TitleBarProperty } from './config';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import {
Card,
Checkbox,
Form,
FormItem,
Input,
Radio,
RadioButton,
RadioGroup,
Slider,
Tooltip,
} from 'ant-design-vue';
import UploadImg from '#/components/upload/image-upload.vue';
import {
AppLinkInput,
InputWithColor,
} from '#/views/mall/promotion/components';
import ComponentContainerProperty from '../../component-container-property.vue';
/** 导航栏属性面板 */
defineOptions({ name: 'TitleBarProperty' });
const props = defineProps<{ modelValue: TitleBarProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
const rules = {}; // 表单校验
</script>
<template><Page>待完成</Page></template>
<template>
<ComponentContainerProperty v-model="formData.style">
<Form :model="formData" :rules="rules">
<Card title="风格" class="property-group">
<FormItem label="背景图片" name="bgImgUrl">
<UploadImg
v-model="formData.bgImgUrl"
width="100%"
height="40px"
:show-description="false"
>
<template #tip>建议尺寸 750*80</template>
</UploadImg>
</FormItem>
<FormItem label="标题位置" name="textAlign">
<RadioGroup v-model:value="formData!.textAlign">
<Tooltip title="居左" placement="top">
<RadioButton value="left">
<IconifyIcon icon="ant-design:align-left-outlined" />
</RadioButton>
</Tooltip>
<Tooltip title="居中" placement="top">
<RadioButton value="center">
<IconifyIcon icon="ant-design:align-center-outlined" />
</RadioButton>
</Tooltip>
</RadioGroup>
</FormItem>
<FormItem label="偏移量" name="marginLeft">
<Slider v-model:value="formData.marginLeft" :max="100" :min="0" />
</FormItem>
<FormItem label="高度" name="height">
<Slider v-model:value="formData.height" :max="200" :min="20" />
</FormItem>
</Card>
<Card title="主标题" class="property-group">
<FormItem label="文字" name="title">
<InputWithColor
v-model="formData.title"
v-model:color="formData.titleColor"
show-count
:maxlength="20"
/>
</FormItem>
<FormItem label="大小" name="titleSize">
<Slider v-model:value="formData.titleSize" :max="60" :min="10" />
</FormItem>
<FormItem label="粗细" name="titleWeight">
<Slider
v-model:value="formData.titleWeight"
:min="100"
:max="900"
:step="100"
/>
</FormItem>
</Card>
<Card title="副标题" class="property-group">
<FormItem label="文字" name="description">
<InputWithColor
v-model="formData.description"
v-model:color="formData.descriptionColor"
show-count
:maxlength="50"
/>
</FormItem>
<FormItem label="大小" name="descriptionSize">
<Slider
v-model:value="formData.descriptionSize"
:max="60"
:min="10"
/>
</FormItem>
<FormItem label="粗细" name="descriptionWeight">
<Slider
v-model:value="formData.descriptionWeight"
:min="100"
:max="900"
:step="100"
/>
</FormItem>
</Card>
<Card title="查看更多" class="property-group">
<FormItem label="是否显示" name="more.show">
<Checkbox v-model:checked="formData.more.show" />
</FormItem>
<!-- 更多按钮的 样式选择 -->
<template v-if="formData.more.show">
<FormItem label="样式" name="more.type">
<RadioGroup v-model:value="formData.more.type">
<Radio value="text">文字</Radio>
<Radio value="icon">图标</Radio>
<Radio value="all">文字+图标</Radio>
</RadioGroup>
</FormItem>
<FormItem
label="更多文字"
name="more.text"
v-show="formData.more.type !== 'icon'"
>
<Input v-model:value="formData.more.text" />
</FormItem>
<FormItem label="跳转链接" name="more.url">
<AppLinkInput v-model="formData.more.url" />
</FormItem>
</template>
</Card>
</Form>
</ComponentContainerProperty>
</template>

5
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
View File

@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 用户卡片属性 */
export interface UserCardProperty {
// 组件样式
style: ComponentStyle;
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'UserCard',
name: '用户卡片',

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts">
import type { UserCouponProperty } from './config';
import { Image } from 'ant-design-vue';
/** 用户卡券 */
defineOptions({ name: 'UserCoupon' });
// 定义属性

5
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
View File

@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 用户订单属性 */
export interface UserOrderProperty {
// 组件样式
style: ComponentStyle;
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'UserOrder',
name: '用户订单',

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts">
import type { UserOrderProperty } from './config';
import { Image } from 'ant-design-vue';
/** 用户订单 */
defineOptions({ name: 'UserOrder' });
// 定义属性

5
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
View File

@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 用户资产属性 */
export interface UserWalletProperty {
// 组件样式
style: ComponentStyle;
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'UserWallet',
name: '用户资产',

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts">
import type { UserWalletProperty } from './config';
import { Image } from 'ant-design-vue';
/** 用户资产 */
defineOptions({ name: 'UserWallet' });
// 定义属性

19
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
View File

@@ -2,23 +2,18 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 视频播放属性 */
export interface VideoPlayerProperty {
// 视频链接
videoUrl: string;
// 封面链接
posterUrl: string;
// 是否自动播放
autoplay: boolean;
// 组件样式
style: VideoPlayerStyle;
videoUrl: string; // 视频链接
posterUrl: string; // 封面链接
autoplay: boolean; // 是否自动播放
style: VideoPlayerStyle; // 组件样式
}
// 视频播放样式
/** 视频播放样式 */
export interface VideoPlayerStyle extends ComponentStyle {
// 视频高度
height: number;
height: number; // 视频高度
}
// 定义组件
/** 定义组件 */
export const component = {
id: 'VideoPlayer',
name: '视频播放',

185
apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
View File

@@ -3,12 +3,11 @@ import type { DiyComponent, DiyComponentLibrary, PageConfig } from './util';
import { onMounted, ref, unref, watch } from 'vue';
import { IFrame } from '@vben/common-ui';
import { useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { cloneDeep, isEmpty, isString } from '@vben/utils';
import { useQRCode } from '@vueuse/integrations/useQRCode';
import { Button, Card, Modal, Tag, Tooltip } from 'ant-design-vue';
import { Button, Card, QRCode, Tag, Tooltip } from 'ant-design-vue';
import draggable from 'vuedraggable';
import statusBarImg from '#/assets/imgs/diy/statusBar.png';
@@ -37,12 +36,7 @@ const props = defineProps({
previewUrl: { type: String, default: '' }, // 预览地址：提供了预览地址，才会显示预览按钮
});
const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue']); // 工具栏操作
const qrcode = useQRCode(props.previewUrl, {
errorCorrectionLevel: 'H',
margin: 4,
}); // 预览二维码
const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏操作
const componentLibrary = ref(); // 左侧组件库
const pageConfigComponent = ref<DiyComponent<any>>(
@@ -68,17 +62,20 @@ watch(
isString(props.modelValue) && !isEmpty(props.modelValue)
? (JSON.parse(props.modelValue) as PageConfig)
: props.modelValue;
// TODO @AI：这里可以简化么？idea 提示 Invalid 'typeof' check: 'modelValue' cannot have type 'string'
// noinspection SuspiciousTypeOfGuard
pageConfigComponent.value.property =
(typeof modelValue !== 'string' && modelValue?.page) ||
PAGE_CONFIG_COMPONENT.property;
// noinspection SuspiciousTypeOfGuard
navigationBarComponent.value.property =
(typeof modelValue !== 'string' && modelValue?.navigationBar) ||
NAVIGATION_BAR_COMPONENT.property;
// noinspection SuspiciousTypeOfGuard
tabBarComponent.value.property =
(typeof modelValue !== 'string' && modelValue?.tabBar) ||
TAB_BAR_COMPONENT.property;
// 查找对应的页面组件
// noinspection SuspiciousTypeOfGuard
pageComponents.value = (
(typeof modelValue !== 'string' && modelValue?.components) ||
[]
@@ -99,6 +96,11 @@ watch(
if (!val || selectedComponentIndex.value === -1) {
return;
}
// 如果是基础设置页，默认选中的索引改成 -1，为了防止删除组件后切换到此页导致报错
// https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/792
if (props.showTabBar) {
selectedComponentIndex.value = -1;
}
pageComponents.value[selectedComponentIndex.value] =
selectedComponent.value!;
},
@@ -224,7 +226,6 @@ function handleCopyComponent(index: number) {
/** 删除组件 */
function handleDeleteComponent(index: number) {
// 删除组件
pageComponents.value.splice(index, 1);
if (index < pageComponents.value.length) {
// 1. 不是最后一个组件时，删除后选中下面的组件
@@ -251,12 +252,17 @@ function handleReset() {
emits('reset');
}
// TODO @AI：搞成 modal 来？
const [PreviewModal, previewModalApi] = useVbenModal({
showConfirmButton: false,
showCancelButton: false,
onCancel() {
previewModalApi.close();
},
});
/** 预览 */
const previewDialogVisible = ref(false);
function handlePreview() {
previewDialogVisible.value = true;
emits('preview');
previewModalApi.open();
}
/** 设置默认选中的组件 */
@@ -312,7 +318,7 @@ onMounted(() => {
</div>
<!-- 中心区域 -->
<div class="editor-container flex flex-1">
<div class="editor-container h-[calc(100vh-135px)]">
<!-- 左侧：组件库（ComponentLibrary） -->
<ComponentLibrary
v-if="libs && libs.length > 0"
@@ -320,11 +326,15 @@ onMounted(() => {
:list="libs"
/>
<!-- 中心：设计区域（ComponentContainer） -->
<div class="editor-center page-prop-area" @click="handlePageSelected">
<div
class="editor-center page-prop-area relative mt-4 flex w-full flex-1 flex-col justify-center overflow-hidden"
:style="{ backgroundColor: 'var(--app-content-bg-color)' }"
@click="handlePageSelected"
>
<!-- 手机顶部 -->
<div class="editor-design-top">
<div class="editor-design-top mx-auto flex w-[375px] flex-col">
<!-- 手机顶部状态栏 -->
<img alt="" class="status-bar" :src="statusBarImg" />
<img alt="" class="h-5 w-[375px] bg-white" :src="statusBarImg" />
<!-- 手机顶部导航栏 -->
<ComponentContainer
v-if="showNavigationBar"
@@ -352,45 +362,47 @@ onMounted(() => {
</div>
<!-- 手机页面编辑区域 -->
<div
class="editor-design-center page-prop-area phone-container overflow-y-auto"
class="editor-design-center page-prop-area h-full w-full overflow-y-auto"
:style="{
backgroundColor: pageConfigComponent.property.backgroundColor,
backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
height: 'calc(100vh - 135px - 120px)',
}"
>
<draggable
v-model="pageComponents"
:animation="200"
:force-fallback="true"
class="page-prop-area drag-area"
filter=".component-toolbar"
ghost-class="draggable-ghost"
group="component"
item-key="index"
@change="handleComponentChange"
>
<template #item="{ element, index }">
<ComponentContainer
v-if="!element.position || element.position === 'center'"
:active="selectedComponentIndex === index"
:can-move-down="index < pageComponents.length - 1"
:can-move-up="index > 0"
:component="element"
@click="handleComponentSelected(element, index)"
@copy="handleCopyComponent(index)"
@delete="handleDeleteComponent(index)"
@move="
(direction: number) => handleMoveComponent(index, direction)
"
/>
</template>
</draggable>
<div class="phone-container">
<draggable
v-model="pageComponents"
:animation="200"
:force-fallback="false"
class="page-prop-area drag-area"
filter=".component-toolbar"
ghost-class="draggable-ghost"
group="component"
item-key="index"
@change="handleComponentChange"
>
<template #item="{ element, index }">
<ComponentContainer
v-if="!element.position || element.position === 'center'"
:active="selectedComponentIndex === index"
:can-move-down="index < pageComponents.length - 1"
:can-move-up="index > 0"
:component="element"
@click="handleComponentSelected(element, index)"
@copy="handleCopyComponent(index)"
@delete="handleDeleteComponent(index)"
@move="
(direction: number) =>
handleMoveComponent(index, direction)
"
/>
</template>
</draggable>
</div>
</div>
<!-- 手机底部导航 -->
<div
v-if="showTabBar"
class="editor-design-bottom component cursor-pointer"
class="editor-design-bottom component mx-auto w-[375px] cursor-pointer"
>
<ComponentContainer
:active="selectedComponent?.id === tabBarComponent.id"
@@ -400,7 +412,9 @@ onMounted(() => {
/>
</div>
<!-- 固定布局的组件 操作按钮区 -->
<div class="fixed-component-action-group gap-2">
<div
class="fixed-component-action-group absolute right-4 top-0 flex flex-col gap-2"
>
<Tag
v-if="showPageConfig"
:color="
@@ -409,6 +423,7 @@ onMounted(() => {
: 'default'
"
class="cursor-pointer"
size="large"
@click="handleComponentSelected(pageConfigComponent)"
>
<IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
@@ -422,6 +437,7 @@ onMounted(() => {
"
closable
class="cursor-pointer"
size="large"
@click="handleComponentSelected(component)"
@close="handleDeleteComponent(index)"
>
@@ -432,10 +448,13 @@ onMounted(() => {
</div>
</div>
<!-- 右侧：属性面板（ComponentContainerProperty） -->
<div v-if="selectedComponent?.property" class="editor-right w-[350px]">
<aside
v-if="selectedComponent?.property"
class="editor-right w-[350px] shrink-0 overflow-hidden shadow-[-8px_0_8px_-8px_rgb(0_0_0/0.12)]"
>
<Card
class="h-full"
:body-style="{ height: 'calc(100% - 57px)', padding: 0 }"
:body-style="{ padding: 0, height: 'calc(100% - 57px)' }"
>
<!-- 组件名称 -->
<template #title>
@@ -452,24 +471,23 @@ onMounted(() => {
/>
</div>
</Card>
</div>
</aside>
</div>
</div>
<!-- 预览弹框 -->
<Modal v-model:open="previewDialogVisible" title="预览" width="700">
<PreviewModal title="预览" class="w-[700px]">
<div class="flex justify-around">
<IFrame
<iframe
:src="previewUrl"
class="h-[667px] w-[375px] rounded-lg border-4 border-solid p-0.5"
/>
></iframe>
<div class="flex flex-col">
<div class="text-base">手机扫码预览</div>
<img :src="qrcode" alt="qrcode" class="w-1/2" />
<!-- <Qrcode :text="previewUrl" logo="/logo.gif" /> -->
<QRCode :value="previewUrl" error-level="H" />
</div>
</div>
</Modal>
</PreviewModal>
</div>
</template>
<style lang="scss" scoped>
@@ -512,14 +530,10 @@ $phone-width: 375px;
/* 中心操作区 */
.editor-container {
height: calc(100vh - 135px);
display: flex;
/* 右侧属性面板 */
:deep(.editor-right) {
flex-shrink: 0;
overflow: hidden;
box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
/* 属性面板顶部：减少内边距 */
:deep(.ant-card-head) {
padding: 8px 16px;
@@ -548,37 +562,6 @@ $phone-width: 375px;
/* 中心区域 */
.editor-center {
position: relative;
display: flex;
flex: 1 1 0;
flex-direction: column;
justify-content: center;
width: 100%;
margin: 16px 0 0;
overflow: hidden;
background-color: var(--app-content-bg-color);
/* 手机顶部 */
.editor-design-top {
display: flex;
flex-direction: column;
width: $phone-width;
margin: 0 auto;
/* 手机顶部状态栏 */
.status-bar {
width: $phone-width;
height: 20px;
background-color: #fff;
}
}
/* 手机底部导航 */
.editor-design-bottom {
width: $phone-width;
margin: 0 auto;
}
/* 手机页面编辑区域 */
:deep(.editor-design-center) {
width: 100%;
@@ -601,21 +584,11 @@ $phone-width: 375px;
/* 固定布局的组件 操作按钮区 */
.fixed-component-action-group {
position: absolute;
top: 0;
right: 16px;
display: flex;
flex-direction: column;
:deep(.ant-tag) {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
border: none;
box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
.anticon {
.ant-tag-icon {
margin-right: 4px;
}
}

25
apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
View File

@@ -45,7 +45,7 @@ const handleDelete = function (index: number) {
</script>
<template>
<div class="text-xs text-gray-500">拖动左上角的小圆点可对其排序</div>
<div class="text-sm text-gray-500">拖动左上角的小圆点可对其排序</div>
<VueDraggable
:list="formData"
:force-fallback="true"
@@ -58,21 +58,19 @@ const handleDelete = function (index: number) {
<div class="mb-1 flex flex-col gap-1 rounded border border-gray-200 p-2">
<!-- 操作按钮区 -->
<div
class="-m-2 mb-1 flex flex-row items-center justify-between p-2"
style="background-color: var(--app-content-bg-color)"
class="-m-2 mb-1 flex flex-row items-center justify-between rounded-t p-2"
style="background-color: var(--ant-color-bg-container-secondary)"
>
<Tooltip title="拖动排序">
<IconifyIcon
icon="ic:round-drag-indicator"
class="drag-icon cursor-move"
style="color: #8a909c"
class="drag-icon cursor-move text-gray-500"
/>
</Tooltip>
<Tooltip title="删除">
<Tooltip v-if="formData.length > min" title="删除">
<IconifyIcon
icon="ep:delete"
class="cursor-pointer text-red-500"
v-if="formData.length > min"
class="cursor-pointer text-red-500 hover:text-red-600"
@click="handleDelete(index)"
/>
</Tooltip>
@@ -82,7 +80,11 @@ const handleDelete = function (index: number) {
</div>
</template>
</VueDraggable>
<Tooltip :title="limit < 1 ? undefined : `最多添加${limit}个`">
<Tooltip
:title="
limit > 0 && limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined
"
>
<Button
type="primary"
ghost
@@ -90,7 +92,10 @@ const handleDelete = function (index: number) {
:disabled="limit > 0 && formData.length >= limit"
@click="handleAdd"
>
<IconifyIcon icon="ep:plus" /><span>添加</span>
<template #icon>
<IconifyIcon icon="ep:plus" />
</template>
添加
</Button>
</Tooltip>
</template>

30
apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
View File

@@ -1,8 +1,6 @@
<script lang="ts" setup>
// import { PREDEFINE_COLORS } from '@vben/constants';
import { useVModels } from '@vueuse/core';
import { Input, InputGroup } from 'ant-design-vue';
import { Input } from 'ant-design-vue';
/** 带颜色选择器输入框 */
defineOptions({ name: 'InputWithColor' });
@@ -24,11 +22,25 @@ const { modelValue, color } = useVModels(props, emit);
</script>
<template>
<InputGroup compact>
<div class="flex gap-2">
<Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" />
<!-- TODO 芋艿：后续在处理，antd 不支持该组件；
<ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-->
</InputGroup>
<input
v-model="color"
type="color"
class="h-8 w-10 cursor-pointer rounded border border-gray-300"
/>
</div>
</template>
<style scoped lang="scss"></style>
<style scoped lang="scss">
input[type='color'] {
&::-webkit-color-swatch-wrapper {
padding: 2px;
}
&::-webkit-color-swatch {
border: none;
border-radius: 2px;
}
}
</style>

66
apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
View File

@@ -7,16 +7,16 @@ import { IconifyIcon } from '@vben/icons';
import { createRect, isContains, isOverlap } from './util';
// TODO @AI: 改成标准注释
// 魔方编辑器
// 有两部分组成：
// 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
// 操作方法：
// 1.1 点击其中一个方块就会进入热区选择模式
// 1.2 再次点击另外一个方块时，结束热区选择模式
// 1.3 在两个方块中间的区域创建热区
// 如果两次点击的都是同一方块，就只创建一个格子的热区
// 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
/**
* 魔方编辑器，有两部分组成：
* 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
* 操作方法：
* 1.1 点击其中一个方块就会进入热区选择模式
* 1.2 再次点击另外一个方块时，结束热区选择模式
* 1.3 在两个方块中间的区域创建热区
* 如果两次点击的都是同一方块，就只创建一个格子的热区
* 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
*/
defineOptions({ name: 'MagicCubeEditor' });
/** 定义属性 */
@@ -34,7 +34,6 @@ const props = defineProps({
type: Number,
default: 4,
}, // 列数，默认 4 列
cubeSize: {
type: Number,
default: 75,
@@ -70,6 +69,7 @@ watch(
);
const hotAreas = ref<Rect[]>([]); // 热区列表
/** 初始化热区 */
watch(
() => props.modelValue,
@@ -86,20 +86,20 @@ const isHotAreaSelectMode = () => !!hotAreaBeginCube.value; // 是否开启了
* @param currentRow 当前行号
* @param currentCol 当前列号
*/
const handleCubeClick = (currentRow: number, currentCol: number) => {
function handleCubeClick(currentRow: number, currentCol: number) {
const currentCube = cubes.value[currentRow]?.[currentCol];
if (!currentCube) {
return;
}
// 情况1：进入热区选择模式
// 情况 1：进入热区选择模式
if (!isHotAreaSelectMode()) {
hotAreaBeginCube.value = currentCube;
hotAreaBeginCube.value!.active = true;
return;
}
// 情况2：结束热区选择模式
// 情况 2：结束热区选择模式
hotAreas.value.push(createRect(hotAreaBeginCube.value!, currentCube));
// 结束热区选择模式
exitHotAreaSelectMode();
@@ -111,7 +111,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
}
// 发送热区变动通知
emitUpdateModelValue();
};
}
/**
* 处理鼠标经过方块
@@ -119,7 +119,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
* @param currentRow 当前行号
* @param currentCol 当前列号
*/
const handleCellHover = (currentRow: number, currentCol: number) => {
function handleCellHover(currentRow: number, currentCol: number) {
// 当前没有进入热区选择模式
if (!isHotAreaSelectMode()) {
return;
@@ -138,7 +138,6 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
if (isOverlap(hotArea, currentSelectedArea)) {
// 结束热区选择模式
exitHotAreaSelectMode();
return;
}
}
@@ -147,13 +146,9 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
eachCube((_, __, cube) => {
cube.active = isContains(currentSelectedArea, cube);
});
};
}
/**
* 处理热区删除
*
* @param index 热区索引
*/
/** 处理热区删除 */
function handleDeleteHotArea(index: number) {
hotAreas.value.splice(index, 1);
// 结束热区选择模式
@@ -165,10 +160,12 @@ function handleDeleteHotArea(index: number) {
const emitUpdateModelValue = () => emit('update:modelValue', hotAreas.value); // 发送热区变动通知
const selectedHotAreaIndex = ref(0); // 热区选中
const handleHotAreaSelected = (hotArea: Rect, index: number) => {
/** 处理热区选中 */
function handleHotAreaSelected(hotArea: Rect, index: number) {
selectedHotAreaIndex.value = index;
emit('hotAreaSelected', hotArea, index);
};
}
/**
* 结束热区选择模式
@@ -189,7 +186,7 @@ function exitHotAreaSelectMode() {
* 迭代魔方矩阵
* @param callback 回调
*/
const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
function eachCube(callback: (x: number, y: number, cube: Cube) => void) {
for (const [x, row] of cubes.value.entries()) {
if (!row) continue;
for (const [y, cube] of row.entries()) {
@@ -198,7 +195,7 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
}
}
}
};
}
</script>
<template>
<div class="relative">
@@ -261,13 +258,14 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
.cube {
box-sizing: border-box;
color: var(--el-text-color-secondary);
line-height: 1;
color: var(--ant-color-text-secondary);
text-align: center;
cursor: pointer;
border: 1px solid var(--el-border-color);
border: 1px solid var(--ant-color-border);
&.active {
background: var(--el-color-primary-light-9);
background: color-mix(in srgb, var(--ant-color-primary) 10%, transparent);
}
}
@@ -277,12 +275,12 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
display: flex;
align-items: center;
justify-content: center;
color: var(--el-color-primary);
color: var(--ant-color-primary);
cursor: pointer;
border-spacing: 0;
border-collapse: collapse;
background: var(--el-color-primary-light-8);
border: 1px solid var(--el-color-primary);
background: color-mix(in srgb, var(--ant-color-primary) 20%, transparent);
border: 1px solid var(--ant-color-primary);
.btn-delete {
position: absolute;
@@ -294,7 +292,7 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
justify-content: center;
width: 16px;
height: 16px;
background-color: #fff;
background-color: var(--ant-color-bg-container);
border-radius: 50%;
}
}

45
apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
View File

@@ -1,51 +1,47 @@
// 坐标点
/** 坐标点 */
export interface Point {
x: number;
y: number;
}
// 矩形
/** 矩形 */
export interface Rect {
// 左上角 X 轴坐标
left: number;
// 左上角 Y 轴坐标
top: number;
// 右下角 X 轴坐标
right: number;
// 右下角 Y 轴坐标
bottom: number;
// 矩形宽度
width: number;
// 矩形高度
height: number;
left: number; // 左上角 X 轴坐标
top: number; // 左上角 Y 轴坐标
right: number; // 右下角 X 轴坐标
bottom: number; // 右下角 Y 轴坐标
width: number; // 矩形宽度
height: number; // 矩形高度
}
/**
* 判断两个矩形是否重叠
*
* @param a 矩形 A
* @param b 矩形 B
*/
export const isOverlap = (a: Rect, b: Rect): boolean => {
export function isOverlap(a: Rect, b: Rect): boolean {
return (
a.left < b.left + b.width &&
a.left + a.width > b.left &&
a.top < b.top + b.height &&
a.height + a.top > b.top
);
};
}
/**
* 检查坐标点是否在矩形内
* @param hotArea 矩形
* @param point 坐标
*/
export const isContains = (hotArea: Rect, point: Point): boolean => {
export function isContains(hotArea: Rect, point: Point): boolean {
return (
point.x >= hotArea.left &&
point.x < hotArea.right &&
point.y >= hotArea.top &&
point.y < hotArea.bottom
);
};
}
/**
* 在两个坐标点中间，创建一个矩形
@@ -59,14 +55,17 @@ export const isContains = (hotArea: Rect, point: Point): boolean => {
* @param a 坐标点一
* @param b 坐标点二
*/
export const createRect = (a: Point, b: Point): Rect => {
export function createRect(a: Point, b: Point): Rect {
// 计算矩形的范围
const [left, left2] = [a.x, b.x].sort();
const [top, top2] = [a.y, b.y].sort();
let [left, left2] = [a.x, b.x].sort();
left = left ?? 0;
left2 = left2 ?? 0;
let [top, top2] = [a.y, b.y].sort();
top = top ?? 0;
top2 = top2 ?? 0;
const right = left2 + 1;
const bottom = top2 + 1;
const height = bottom - top;
const width = right - left;
return { left, right, top, bottom, height, width };
};
}

28
apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
View File

@@ -3,15 +3,37 @@ import { ButtonGroup } from 'ant-design-vue';
/**
* 垂直按钮组
* Element 官方的按钮组只支持水平显示，通过重写样式实现垂直布局
* Ant Design Vue 的按钮组只支持水平显示，通过重写样式实现垂直布局
*/
defineOptions({ name: 'VerticalButtonGroup' });
</script>
<template>
<ButtonGroup direction="vertical" v-bind="$attrs">
<ButtonGroup v-bind="$attrs" class="!inline-flex !flex-col">
<slot></slot>
</ButtonGroup>
</template>
<style scoped lang="scss"></style>
<style scoped lang="scss">
// TODO @AI:圆角的样式不太对！
.ant-btn-group > :deep(.ant-btn:first-child) {
border-bottom-color: transparent;
border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
}
.ant-btn-group > :deep(.ant-btn:last-child) {
border-top-color: transparent;
border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius);
}
.ant-btn-group :deep(.ant-btn:not(:first-child):not(:last-child)) {
border-top-color: transparent;
border-bottom-color: transparent;
border-radius: 0;
}
.ant-btn-group > :deep(.ant-btn:not(:last-child)) {
margin-right: 0;
margin-bottom: -1px;
}
</style>

1
apps/web-antd/src/views/mall/trade/order/modules/remark-form.vue
View File

@@ -10,6 +10,7 @@ import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { updateOrderRemark } from '#/api/mall/trade/order';
import { $t } from '#/locales';
import { useRemarkFormSchema } from '../data';
const emit = defineEmits(['success']);

4
apps/web-antd/src/views/member/point/record/data.ts
View File

@@ -3,11 +3,11 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { Tag } from 'ant-design-vue';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */

4
apps/web-ele/src/components/description/description.vue
View File

@@ -127,9 +127,7 @@ export default defineComponent({
},
default: () => {
if (item.slot) {
// TODO @xingyu：这里要 inline 掉么？
const slotContent = getSlot(slots, item.slot, data);
return slotContent;
return getSlot(slots, item.slot, data);
}
if (!contentMinWidth) {
return getContent();

1
apps/web-ele/src/views/ai/music/manager/index.vue
View File

@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AiMusicApi } from '#/api/ai/music';
import { confirm, DocAlert, Page } from '@vben/common-ui';
import { AiMusicStatusEnum } from '@vben/constants';
import { ElButton, ElLoading, ElMessage } from 'element-plus';

2
apps/web-ele/src/views/mall/product/brand/index.vue
View File

@@ -40,7 +40,7 @@ async function handleDelete(row: MallBrandApi.Brand) {
});
try {
await deleteBrand(row.id!);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
loadingInstance.close();

4
apps/web-ele/src/views/mall/promotion/banner/data.ts
View File

@@ -141,7 +141,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
cellRender: {
name: 'CellDict',
props: {
dictType: DICT_TYPE.COMMON_STATUS,
type: DICT_TYPE.COMMON_STATUS,
},
},
},
@@ -152,7 +152,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
cellRender: {
name: 'CellDict',
props: {
dictType: DICT_TYPE.PROMOTION_BANNER_POSITION,
type: DICT_TYPE.PROMOTION_BANNER_POSITION,
},
},
},

23
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
View File

@@ -93,15 +93,11 @@ const handleDeleteComponent = () => {
};
</script>
<template>
<div class="component" :class="[{ active }]">
<div
:style="{
...style,
}"
>
<div class="component relative cursor-move" :class="[{ active }]">
<div :style="style">
<component :is="component.id" :property="component.property" />
</div>
<div class="component-wrap">
<div class="component-wrap absolute left-[-2px] top-0 block h-full w-full">
<!-- 左侧：组件名（悬浮的小贴条） -->
<div class="component-name" v-if="component.name">
{{ component.name }}
@@ -150,19 +146,8 @@ $hover-border-width: 1px;
$name-position: -85px;
$toolbar-position: -55px;
/* 组件 */
.component {
position: relative;
cursor: move;
.component-wrap {
position: absolute;
top: 0;
left: -$active-border-width;
display: block;
width: 100%;
height: 100%;
/* 鼠标放到组件上时 */
&:hover {
border: $hover-border-width dashed var(--el-color-primary);
@@ -228,7 +213,7 @@ $toolbar-position: -55px;
}
}
/* 组件选中时 */
/* 选中状态 */
&.active {
margin-bottom: 4px;

72
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
View File

@@ -61,7 +61,10 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
</script>
<template>
<ElAside class="editor-left" width="261px">
<ElAside
class="editor-left z-[1] shrink-0 select-none shadow-[8px_0_8px_-8px_rgb(0_0_0/0.12)]"
width="261px"
>
<ElScrollbar>
<ElCollapse v-model="extendGroups">
<ElCollapseItem
@@ -71,7 +74,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
:title="group.name"
>
<draggable
class="component-container"
class="flex flex-wrap items-center"
ghost-class="draggable-ghost"
item-key="index"
:list="group.components"
@@ -83,9 +86,18 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
>
<template #item="{ element }">
<div>
<div class="drag-placement">组件放置区域</div>
<div class="component">
<IconifyIcon :icon="element.icon" :size="32" />
<div class="hidden text-white">组件放置区域</div>
<div
class="component flex h-[86px] w-[86px] cursor-move flex-col items-center justify-center border-b border-r [&:nth-of-type(3n)]:border-r-0"
:style="{
borderColor: 'var(--el-border-color-lighter)',
}"
>
<IconifyIcon
:icon="element.icon"
:size="32"
class="mb-1 text-gray-500"
/>
<span class="mt-1 text-xs">{{ element.name }}</span>
</div>
</div>
@@ -99,11 +111,6 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
<style scoped lang="scss">
.editor-left {
z-index: 1;
flex-shrink: 0;
user-select: none;
box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
:deep(.el-collapse) {
border-top: none;
}
@@ -124,50 +131,19 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
border-bottom: none;
}
.component-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.component {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 86px;
height: 86px;
cursor: move;
border-right: 1px solid var(--el-border-color-lighter);
border-bottom: 1px solid var(--el-border-color-lighter);
.el-icon {
margin-bottom: 4px;
color: gray;
}
}
/* 组件 hover 和 active 状态（需要 CSS 变量） */
.component.active,
.component:hover {
color: var(--el-color-white);
background: var(--el-color-primary);
.el-icon {
:deep(.iconify) {
color: var(--el-color-white);
}
}
.component:nth-of-type(3n) {
border-right: none;
}
}
/* 拖拽占位提示，默认不显示 */
.drag-placement {
display: none;
color: #fff;
}
/* 拖拽区域全局样式 */
.drag-area {
/* 拖拽到手机区域时的样式 */
.draggable-ghost {
@@ -203,14 +179,12 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
background: #5487df;
}
/* 拖拽时隐藏组件 */
.component {
display: none;
display: none; /* 拖拽时隐藏组件 */
}
/* 拖拽时显示占位提示 */
.drag-placement {
display: block;
.hidden {
display: block !important; /* 拖拽时显示占位提示 */
}
}
}

2
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
View File

@@ -140,4 +140,4 @@ const formData = useVModel(props, 'modelValue', emit);
</ElCard>
</ElForm>
</ComponentContainerProperty>
</template>
</template>

15
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
View File

@@ -56,8 +56,8 @@ function handleToggleFab() {
<ElButton type="primary" size="large" circle @click="handleToggleFab">
<IconifyIcon
icon="ep:plus"
class="fab-icon"
:class="[{ active: expanded }]"
class="transition-transform duration-300"
:class="expanded ? 'rotate-[135deg]' : 'rotate-0'"
/>
</ElButton>
</div>
@@ -68,14 +68,3 @@ function handleToggleFab() {
@click="handleToggleFab"
></div>
</template>
<style scoped lang="scss">
.fab-icon {
transform: rotate(0deg);
transition: transform 0.3s;
&.active {
transform: rotate(135deg);
}
}
</style>

12
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
View File

@@ -193,7 +193,7 @@ const handleAppLinkChange = (appLink: AppLink) => {
<div
v-for="(item, hotZoneIndex) in formData"
:key="hotZoneIndex"
class="hot-zone absolute z-10 flex cursor-move items-center justify-center border text-base opacity-80"
class="group absolute z-10 flex cursor-move items-center justify-center border text-base opacity-80"
:style="{
width: `${item.width}px`,
height: `${item.height}px`,
@@ -211,7 +211,7 @@ const handleAppLinkChange = (appLink: AppLink) => {
</span>
<IconifyIcon
icon="ep:close"
class="delete absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white"
class="absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
:style="{ backgroundColor: 'var(--el-color-primary)' }"
:size="14"
@click="handleRemove(item)"
@@ -240,11 +240,3 @@ const handleAppLinkChange = (appLink: AppLink) => {
@app-link-change="handleAppLinkChange"
/>
</template>
<style scoped lang="scss">
.hot-zone:hover {
.delete {
display: block;
}
}
</style>

20
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
View File

@@ -28,10 +28,16 @@ defineProps<{ property: TabBarProperty }>();
:key="index"
class="tab-bar-item flex w-full flex-col items-center justify-center text-xs"
>
<ElImage :src="index === 0 ? item.activeIconUrl : item.iconUrl">
<ElImage
:src="index === 0 ? item.activeIconUrl : item.iconUrl"
class="h-[26px] w-[26px] rounded"
>
<template #error>
<div class="flex h-full w-full items-center justify-center">
<IconifyIcon icon="ep:picture" />
<IconifyIcon
icon="ep:picture"
class="h-[26px] w-[26px] rounded"
/>
</div>
</template>
</ElImage>
@@ -47,13 +53,3 @@ defineProps<{ property: TabBarProperty }>();
</div>
</div>
</template>
<style lang="scss" scoped>
.tab-bar-item {
:deep(img),
.el-icon {
width: 26px;
height: 26px;
border-radius: 4px;
}
}
</style>

88
apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
View File

@@ -304,9 +304,15 @@ onMounted(() => {
</script>
<template>
<div>
<ElContainer class="editor">
<ElContainer class="editor flex h-full flex-col">
<!-- 顶部：工具栏 -->
<ElHeader class="editor-header">
<ElHeader
class="editor-header flex !h-[42px] items-center justify-between !border-b !p-0"
:style="{
backgroundColor: 'var(--el-bg-color)',
borderBottomColor: 'var(--el-border-color)',
}"
>
<!-- 左侧操作区 -->
<slot name="toolBarLeft"></slot>
<!-- 中心操作区 -->
@@ -334,7 +340,7 @@ onMounted(() => {
</ElHeader>
<!-- 中心区域 -->
<ElContainer class="editor-container">
<ElContainer class="editor-container h-[calc(100vh-135px)]">
<!-- 左侧：组件库（ComponentLibrary） -->
<ElAside width="261px" class="editor-left">
<ComponentLibrary
@@ -344,11 +350,15 @@ onMounted(() => {
/>
</ElAside>
<!-- 中心：设计区域（ComponentContainer） -->
<div class="editor-center page-prop-area" @click="handlePageSelected">
<div
class="editor-center page-prop-area relative mt-4 flex w-full flex-1 flex-col justify-center overflow-hidden"
:style="{ backgroundColor: 'var(--app-content-bg-color)' }"
@click="handlePageSelected"
>
<!-- 手机顶部 -->
<div class="editor-design-top">
<div class="editor-design-top mx-auto flex w-[375px] flex-col">
<!-- 手机顶部状态栏 -->
<img alt="" class="status-bar" :src="statusBarImg" />
<img alt="" class="h-5 w-[375px] bg-white" :src="statusBarImg" />
<!-- 手机顶部导航栏 -->
<ComponentContainer
v-if="showNavigationBar"
@@ -415,7 +425,7 @@ onMounted(() => {
<!-- 手机底部导航 -->
<div
v-if="showTabBar"
class="editor-design-bottom component cursor-pointer"
class="editor-design-bottom component mx-auto w-[375px] cursor-pointer"
>
<ComponentContainer
:active="selectedComponent?.id === tabBarComponent.id"
@@ -425,7 +435,9 @@ onMounted(() => {
/>
</div>
<!-- 固定布局的组件 操作按钮区 -->
<div class="fixed-component-action-group">
<div
class="fixed-component-action-group absolute right-4 top-0 flex flex-col gap-2"
>
<ElTag
v-if="showPageConfig"
:effect="
@@ -467,7 +479,7 @@ onMounted(() => {
<!-- 右侧：属性面板（ComponentContainerProperty） -->
<ElAside
v-if="selectedComponent?.property"
class="editor-right"
class="editor-right shrink-0 overflow-hidden shadow-[-8px_0_8px_-8px_rgb(0_0_0/0.12)]"
width="350px"
>
<ElCard
@@ -516,22 +528,8 @@ onMounted(() => {
/* 手机宽度 */
$phone-width: 375px;
/* 根节点样式 */
.editor {
display: flex;
flex-direction: column;
height: 100%;
/* 顶部：工具栏 */
.editor-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 42px;
padding: 0;
background-color: var(--el-bg-color);
border-bottom: solid 1px var(--el-border-color);
/* 隐藏工具栏按钮的边框 */
:deep(.el-radio-button__inner),
:deep(.el-button) {
@@ -543,14 +541,8 @@ $phone-width: 375px;
/* 中心操作区 */
.editor-container {
height: calc(100vh - 135px);
/* 右侧属性面板 */
:deep(.editor-right) {
flex-shrink: 0;
overflow: hidden;
box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
/* 属性面板顶部：减少内边距 */
:deep(.el-card__header) {
padding: 8px 16px;
@@ -579,37 +571,6 @@ $phone-width: 375px;
/* 中心区域 */
.editor-center {
position: relative;
display: flex;
flex: 1 1 0;
flex-direction: column;
justify-content: center;
width: 100%;
margin: 16px 0 0;
overflow: hidden;
background-color: var(--app-content-bg-color);
/* 手机顶部 */
.editor-design-top {
display: flex;
flex-direction: column;
width: $phone-width;
margin: 0 auto;
/* 手机顶部状态栏 */
.status-bar {
width: $phone-width;
height: 20px;
background-color: #fff;
}
}
/* 手机底部导航 */
.editor-design-bottom {
width: $phone-width;
margin: 0 auto;
}
/* 手机页面编辑区域 */
:deep(.editor-design-center) {
width: 100%;
@@ -632,13 +593,6 @@ $phone-width: 375px;
/* 固定布局的组件 操作按钮区 */
.fixed-component-action-group {
position: absolute;
top: 0;
right: 16px;
display: flex;
flex-direction: column;
gap: 8px;
:deep(.el-tag) {
border: none;
box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);

69
apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
View File

@@ -196,23 +196,25 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
</script>
<template>
<div class="relative">
<table class="cube-table">
<table class="relative border-separate border-spacing-0">
<!-- 底层：魔方矩阵 -->
<tbody>
<tr v-for="(rowCubes, row) in cubes" :key="row">
<td
v-for="(cube, col) in rowCubes"
:key="col"
class="cube"
:class="[{ active: cube.active }]"
class="box-border cursor-pointer border text-center leading-none"
:class="cube.active ? 'bg-[var(--el-color-primary-light-9)]' : ''"
:style="{
width: `${cubeSize}px`,
height: `${cubeSize}px`,
color: 'var(--el-text-color-secondary)',
borderColor: 'var(--el-border-color)',
}"
@click="handleCubeClick(row, col)"
@mouseenter="handleCellHover(row, col)"
>
<IconifyIcon icon="ep-plus" />
<IconifyIcon icon="ep-plus" class="inline-block" />
</td>
</tr>
</tbody>
@@ -220,12 +222,15 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
<div
v-for="(hotArea, index) in hotAreas"
:key="index"
class="hot-area"
class="absolute box-border flex border-separate border-spacing-0 cursor-pointer items-center justify-center border"
:style="{
top: `${cubeSize * hotArea.top}px`,
left: `${cubeSize * hotArea.left}px`,
height: `${cubeSize * hotArea.height}px`,
width: `${cubeSize * hotArea.width}px`,
color: 'var(--el-color-primary)',
background: 'var(--el-color-primary-light-8)',
borderColor: 'var(--el-color-primary)',
}"
@click="handleHotAreaSelected(hotArea, index)"
@mouseover="exitHotAreaSelectMode"
@@ -235,7 +240,7 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
v-if="
selectedHotAreaIndex === index && hotArea.width && hotArea.height
"
class="btn-delete"
class="absolute -right-2 -top-2 z-[1] flex h-4 w-4 items-center justify-center rounded-full bg-white"
@click="handleDeleteHotArea(index)"
>
<IconifyIcon icon="ep:circle-close-filled" />
@@ -247,55 +252,3 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
</table>
</div>
</template>
<style lang="scss" scoped>
.cube-table {
position: relative;
border-spacing: 0;
border-collapse: collapse;
.cube {
box-sizing: border-box;
line-height: 1;
color: var(--el-text-color-secondary);
text-align: center;
cursor: pointer;
border: 1px solid var(--el-border-color);
:deep(.iconify) {
display: inline-block;
}
&.active {
background: var(--el-color-primary-light-9);
}
}
.hot-area {
position: absolute;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
color: var(--el-color-primary);
cursor: pointer;
border-spacing: 0;
border-collapse: collapse;
background: var(--el-color-primary-light-8);
border: 1px solid var(--el-color-primary);
.btn-delete {
position: absolute;
top: -8px;
right: -8px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
}
}
}
</style>

7
apps/web-ele/src/views/mall/promotion/components/vertical-button-group/index.vue
View File

@@ -9,17 +9,12 @@ defineOptions({ name: 'VerticalButtonGroup' });
</script>
<template>
<ElButtonGroup v-bind="$attrs">
<ElButtonGroup v-bind="$attrs" class="!inline-flex !flex-col">
<slot></slot>
</ElButtonGroup>
</template>
<style scoped lang="scss">
.el-button-group {
display: inline-flex;
flex-direction: column;
}
.el-button-group > :deep(.el-button:first-child) {
border-bottom-color: var(--el-button-divide-border-color);
border-top-right-radius: var(--el-border-radius-base);

1
apps/web-ele/src/views/mall/trade/order/modules/remark-form.vue
View File

@@ -10,6 +10,7 @@ import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { updateOrderRemark } from '#/api/mall/trade/order';
import { $t } from '#/locales';
import { useRemarkFormSchema } from '../data';
const emit = defineEmits(['success']);

2
apps/web-ele/src/views/mp/user/index.vue
View File

@@ -4,7 +4,7 @@ import type { MpUserApi } from '#/api/mp/user';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElMessage, ElLoading } from 'element-plus';
import { ElLoading, ElMessage } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getUserPage, syncUser } from '#/api/mp/user';

4
packages/effects/common-ui/src/components/index.ts
View File

@@ -1,5 +1,7 @@
export * from './api-component';
export * from './captcha';
export * from './card/statistic-card';
export * from './card/summary-card';
export * from './col-page';
export * from './content-wrap';
export * from './count-to';
@@ -11,8 +13,6 @@ export * from './json-viewer';
export * from './loading';
export * from './page';
export * from './resize';
export * from './card/statistic-card';
export * from './card/summary-card';
export * from './tippy';
export * from './tree';
export * from '@vben-core/form-ui';