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

fix: 新分支迁移mp

Browse Source
This commit is contained in:
hw
2025-11-25 14:42:56 +08:00
parent f22b390380
commit b4c77f5498
29 changed files with 320 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web-antd/src/views/mp/autoReply/index.vue
View File

@@ -162,14 +162,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
<Tabs.TabPane :key="String(AutoReplyMsgType.Follow)">
<template #tab>
<Row align="middle">
<IconifyIcon icon="ep:star" class="mr-2px" /> 关注时回复
<IconifyIcon icon="lucide:star" class="mr-2px" /> 关注时回复
</Row>
</template>
</Tabs.TabPane>
<Tabs.TabPane :key="String(AutoReplyMsgType.Message)">
<template #tab>
<Row align="middle">
<IconifyIcon icon="ep:chat-line-round" class="mr-2px" />
<IconifyIcon icon="lucide:message-circle-more" class="mr-2px" />
消息回复
</Row>
</template>
@@ -177,7 +177,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
<Tabs.TabPane :key="String(AutoReplyMsgType.Keyword)">
<template #tab>
<Row align="middle">
<IconifyIcon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
<IconifyIcon icon="lucide:newspaper" class="mr-2px" />
关键词回复
</Row>
</template>
</Tabs.TabPane>

94
apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
View File

@@ -291,11 +291,19 @@ watch(
<!-- TODO @dylan：看看图片的小卡片，是不是可以整齐点，类似微信公众号，图片的高度是一致的哈；https://mp.weixin.qq.com/cgi-bin/filepage?type=2&begin=0&count=12&token=1646383362&lang=zh_CN -->
<template v-if="props.type === 'image'">
<Spin :spinning="loading">
<div class="waterfall">
<div v-for="item in list" :key="item.mediaId" class="waterfall-item">
<img class="material-img" :src="item.url" alt="素材图片" />
<p class="item-name">{{ item.name }}</p>
<Row class="ope-row">
<div
class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
>
<div
v-for="item in list"
:key="item.mediaId"
class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
>
<img class="w-full" :src="item.url" alt="素材图片" />
<p class="truncate text-center text-xs leading-[30px]">
{{ item.name }}
</p>
<Row class="flex justify-center pt-2.5">
<Button type="primary" @click="selectMaterialFun(item)">
选择
<template #icon>
@@ -353,11 +361,17 @@ watch(
<!-- 类型：news -->
<template v-else-if="props.type === 'news'">
<Spin :spinning="loading">
<div class="waterfall">
<div v-for="item in list" :key="item.mediaId" class="waterfall-item">
<div
class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
>
<div
v-for="item in list"
:key="item.mediaId"
class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
>
<div v-if="item.content && item.content.newsItem">
<WxNews :articles="item.content.newsItem" />
<Row class="ope-row">
<Row class="flex justify-center pt-2.5">
<Button type="primary" @click="selectMaterialFun(item)">
选择
<template #icon>
@@ -380,67 +394,3 @@ watch(
</template>
</Page>
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
@media (width >= 992px) and (width <= 1300px) {
.waterfall {
column-count: 3;
}
p {
color: red;
}
}
@media (width >= 768px) and (width <= 991px) {
.waterfall {
column-count: 2;
}
p {
color: orange;
}
}
@media (width <= 767px) {
.waterfall {
column-count: 1;
}
}
.waterfall {
column-count: 5;
column-gap: 10px;
width: 100%;
margin: 0 auto;
}
.waterfall-item {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #eaeaea;
break-inside: avoid;
}
.material-img {
width: 100%;
}
p {
line-height: 30px;
}
.ope-row {
padding-top: 10px;
text-align: center;
}
.item-name {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
text-align: center;
white-space: nowrap;
}
</style>

55
apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
View File

@@ -32,25 +32,44 @@ function getNickname(sendFrom: number) {
<template>
<div class="execution" v-for="item in props.list" :key="item.id">
<div
class="mp-comment"
:class="{ 'mp-comment--reverse': item.sendFrom === SendFrom.MpBot }"
class="mb-[30px] flex items-start"
:class="{ 'flex-row-reverse': item.sendFrom === SendFrom.MpBot }"
>
<div class="avatar-div">
<img :src="getAvatar(item.sendFrom)" class="mp-comment__avatar" />
<div class="mp-comment__author">
<div class="flex w-20 flex-col items-center text-center">
<img
:src="getAvatar(item.sendFrom)"
class="mb-2 h-12 w-12 rounded-full border border-transparent object-cover"
/>
<div class="text-sm font-semibold text-[#999]">
{{ getNickname(item.sendFrom) }}
</div>
</div>
<div class="mp-comment__main">
<div class="mp-comment__header">
<div class="mp-comment__create_time">
<div class="relative mx-2 flex-1 rounded-[5px] border border-[#dedede]">
<span
class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#dedede]"
:class="{
'-right-2 left-auto border-l-[8px] border-r-0 border-l-[#dedede]':
item.sendFrom === SendFrom.MpBot,
}"
></span>
<span
class="pointer-events-none absolute -left-[7px] top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#f8f8f8]"
:class="{
'-right-[7px] left-auto border-l-[8px] border-r-0 border-l-[#f8f8f8]':
item.sendFrom === SendFrom.MpBot,
}"
></span>
<div
class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
>
<div class="text-xs text-gray-500">
{{ formatDateTime(item.createTime) }}
</div>
</div>
<div
class="mp-comment__body"
:style="
item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
class="overflow-hidden rounded-b-[5px] p-[15px] text-sm text-[#333]"
:class="
item.sendFrom === SendFrom.MpBot ? 'bg-[#6BED72]' : 'bg-white'
"
>
<Msg :item="item" />
@@ -59,17 +78,3 @@ function getNickname(sendFrom: number) {
</div>
</div>
</template>
<style lang="scss" scoped>
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
/** TODO @dylan： 看看有没适合 tindwind 的哈。 */
@import url('./comment.scss');
@import url('./card.scss');
.avatar-div {
width: 80px;
text-align: center;
}
</style>

73
apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
View File

@@ -28,64 +28,27 @@ defineExpose({
<template>
<div>
<Link :href="href" target="_blank" class="text-success no-underline">
<div class="music-card">
<div class="music-avatar">
<img :src="thumbMediaUrl" alt="音乐封面" />
<div
class="flex items-center rounded-[5px] border border-[#e8e8e8] bg-white p-2.5 transition hover:border-black/10 hover:shadow-sm"
>
<div
class="mr-3 h-[60px] w-[60px] overflow-hidden rounded-[4px] border border-transparent"
>
<img
:src="thumbMediaUrl"
alt="音乐封面"
class="h-full w-full object-cover"
/>
</div>
<div class="music-detail">
<div class="music-title">{{ title }}</div>
<div class="music-description">{{ description }}</div>
<div class="min-w-0 flex-1">
<div class="mb-2 truncate text-sm font-medium text-[#333]">
{{ title }}
</div>
<div class="truncate text-xs text-[#666]">
{{ description }}
</div>
</div>
</div>
</Link>
</div>
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.music-card {
display: flex;
padding: 10px;
background-color: #fff;
border-radius: 5px;
}
.music-avatar {
flex-shrink: 0;
width: 60px;
height: 60px;
margin-right: 12px;
overflow: hidden;
border-radius: 4px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.music-detail {
flex: 1;
overflow: hidden;
}
.music-title {
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
font-weight: 500;
color: #333;
white-space: nowrap;
}
.music-description {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
color: #666;
white-space: nowrap;
}
</style>

45
apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
View File

@@ -1,6 +1,4 @@
<script lang="ts" setup>
import { Image } from 'ant-design-vue';
/** 微信消息 - 图文 */
defineOptions({ name: 'WxNews' });
@@ -22,14 +20,13 @@ defineExpose({
<div class="news-home">
<div v-for="(article, index) in articles" :key="index" class="news-div">
<!-- 头条 -->
<!-- TODO @hw：第一篇文章（头条）图片是铺满，不过要限制高度；第二篇文章开始（次条），图片是在右侧，也是需要限制宽高 -->
<a v-if="index === 0" :href="article.url" target="_blank">
<div class="news-main">
<div class="news-content">
<Image
<img
:src="article.picUrl"
:preview="false"
class="material-img flex items-center justify-center"
class="material-img flex w-[100px] items-center justify-center"
/>
<div class="news-content-title">
<span>{{ article.title }}</span>
@@ -41,9 +38,14 @@ defineExpose({
<a v-else :href="article.url" target="_blank">
<div class="news-main-item">
<div class="news-content-item">
<div class="news-content-item-title">{{ article.title }}</div>
<div class="news-content-item-img">
<img :src="article.picUrl" class="material-img" alt="文章图片" />
<div class="news-content-item-title">{{ article.title }}</div>
<img
:src="article.picUrl"
class="h-[70px] w-[70px] object-cover"
alt="文章图片"
/>
</div>
</div>
</div>
@@ -59,6 +61,9 @@ defineExpose({
width: 100%;
margin: auto;
background-color: #fff;
display: flex;
flex-direction: column;
gap: 10px;
}
.news-main {
@@ -80,39 +85,35 @@ defineExpose({
display: inline-block;
width: 98%;
padding: 1%;
font-size: 12px;
font-size: 16px;
color: #fff;
white-space: normal;
background-color: black;
opacity: 0.65;
margin-left: 10px;
}
.news-main-item {
padding: 5px 0;
background-color: #fff;
border-top: 1px solid #eaeaea;
}
.news-content-item {
padding: 10px;
box-sizing: border-box;
position: relative;
}
.news-content-item-title {
display: inline-block;
width: 70%;
margin-left: 1%;
font-size: 10px;
white-space: normal;
flex: 1;
font-size: 14px;
// padding-left: 10px;
}
.news-content-item-img {
display: inline-block;
width: 25%;
margin-right: 1%;
background-color: #acadae;
display: flex;
align-items: center;
}
.material-img {
width: 100%;
width: auto;
object-fit: cover;
}
</style>

2
apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
View File

@@ -167,7 +167,7 @@ function selectMaterial(item: any) {
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.select-item {
width: 280px;
// width: 280px;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;

2
apps/web-ele/package.json
View File

@@ -18,7 +18,7 @@
"scripts": {
"build": "pnpm vite build --mode production",
"build:analyze": "pnpm vite build --mode analyze",
"dev": "pnpm vite --mode development",
"dev": "pnpm vite --mode .local",
"preview": "vite preview",
"typecheck": "vue-tsc --noEmit --skipLibCheck"
},

9
apps/web-ele/src/views/mp/autoReply/index.vue
View File

@@ -161,14 +161,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
<ElTabPane :name="String(AutoReplyMsgType.Follow)">
<template #label>
<ElRow align="middle">
<IconifyIcon icon="ep:star" class="mr-[2px]" /> 关注时回复
<IconifyIcon icon="lucide:star" class="mr-[2px]" /> 关注时回复
</ElRow>
</template>
</ElTabPane>
<ElTabPane :name="String(AutoReplyMsgType.Message)">
<template #label>
<ElRow align="middle">
<IconifyIcon icon="ep:chat-line-round" class="mr-[2px]" />
<IconifyIcon
icon="lucide:message-circle-more"
class="mr-[2px]"
/>
消息回复
</ElRow>
</template>
@@ -176,7 +179,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<ElTabPane :name="String(AutoReplyMsgType.Keyword)">
<template #label>
<ElRow align="middle">
<IconifyIcon icon="fa:newspaper-o" class="mr-[2px]" />
<IconifyIcon icon="lucide:newspaper" class="mr-[2px]" />
关键词回复
</ElRow>
</template>

40
apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
View File

@@ -4,32 +4,54 @@
<script lang="ts" setup>
import type { WxLocationProps } from './types';
import { computed } from 'vue';
import { computed, onMounted, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
// TODO @dylan：@hw：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
import { ElCol, ElLink, ElRow } from 'element-plus';
import { ElCol, ElLink, ElMessage, ElRow } from 'element-plus';
import { getTradeConfig } from '#/api/mall/trade/config';
defineOptions({ name: 'Location' });
const props = withDefaults(defineProps<WxLocationProps>(), {
qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
});
const props = defineProps<WxLocationProps>();
const fetchedQqMapKey = ref('');
const resolvedQqMapKey = computed(
() => props.qqMapKey || fetchedQqMapKey.value || '',
);
const mapUrl = computed(() => {
return `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${props.locationY}&pointy=${props.locationX}&name=${props.label}&ref=yudao`;
});
const mapImageUrl = computed(() => {
return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${props.qqMapKey}&size=250*180`;
return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${resolvedQqMapKey.value}&size=250*180`;
});
async function fetchQqMapKey() {
try {
const data = await getTradeConfig();
fetchedQqMapKey.value = data.tencentLbsKey ?? '';
if (!fetchedQqMapKey.value) {
ElMessage.warning('请先配置腾讯位置服务密钥');
}
} catch {
ElMessage.error('获取腾讯位置服务密钥失败');
}
}
onMounted(async () => {
if (!props.qqMapKey) {
await fetchQqMapKey();
}
});
defineExpose({
locationX: props.locationX,
locationY: props.locationY,
label: props.label,
qqMapKey: props.qqMapKey,
qqMapKey: resolvedQqMapKey,
});
</script>
@@ -42,7 +64,7 @@ defineExpose({
<img :src="mapImageUrl" alt="地图位置" />
</ElRow>
<ElRow>
<IconifyIcon icon="ep:location" />
<IconifyIcon icon="lucide:map-pin" />
{{ label }}
</ElRow>
</ElCol>

96
apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
View File

@@ -36,8 +36,9 @@ const props = withDefaults(
},
);
const emit = defineEmits(['selectMaterial']);
const emit = defineEmits<{
(e: 'selectMaterial', item: any): void;
}>();
const loading = ref(false); // 遮罩层
const total = ref(0); // 总条数
const list = ref<any[]>([]); // 数据列表
@@ -116,14 +117,23 @@ onMounted(async () => {
<div class="pb-30px">
<!-- 类型：image -->
<div v-if="props.type === 'image'">
<div class="waterfall" v-loading="loading">
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
<img class="material-img" :src="item.url" />
<p class="item-name">{{ item.name }}</p>
<ElRow class="ope-row">
<div
class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
v-loading="loading"
>
<div
class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
v-for="item in list"
:key="item.mediaId"
>
<img class="w-full" :src="item.url" />
<p class="truncate text-center text-xs leading-[30px]">
{{ item.name }}
</p>
<ElRow class="flex justify-center pt-2.5">
<ElButton type="success" @click="selectMaterialFun(item)">
选择
<IconifyIcon icon="ep:circle-check" />
<IconifyIcon icon="lucide:circle-check" />
</ElButton>
</ElRow>
</div>
@@ -163,7 +173,7 @@ onMounted(async () => {
<template #default="scope">
<ElButton type="primary" link @click="selectMaterialFun(scope.row)">
选择
<IconifyIcon icon="ep:plus" />
<IconifyIcon icon="lucide:plus" />
</ElButton>
</template>
</ElTableColumn>
@@ -210,7 +220,7 @@ onMounted(async () => {
<template #default="scope">
<ElButton type="primary" link @click="selectMaterialFun(scope.row)">
选择
<IconifyIcon icon="akar-icons:circle-plus" />
<IconifyIcon icon="lucide:circle-plus" />
</ElButton>
</template>
</ElTableColumn>
@@ -228,14 +238,21 @@ onMounted(async () => {
</div>
<!-- 类型：news -->
<div v-else-if="props.type === 'news'">
<div class="waterfall" v-loading="loading">
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
<div
class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
v-loading="loading"
>
<div
class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
v-for="item in list"
:key="item.mediaId"
>
<div v-if="item.content && item.content.newsItem">
<News :articles="item.content.newsItem" />
<ElRow class="ope-row">
<ElRow class="flex justify-center pt-2.5">
<ElButton type="success" @click="selectMaterialFun(item)">
选择
<IconifyIcon icon="ep:circle-check" />
<IconifyIcon icon="lucide:circle-check" />
</ElButton>
</ElRow>
</div>
@@ -254,54 +271,3 @@ onMounted(async () => {
</div>
</div>
</template>
<style lang="scss" scoped>
@media (width >= 992px) and (width <= 1300px) {
.waterfall {
column-count: 3;
}
p {
color: red;
}
}
@media (width >= 768px) and (width <= 991px) {
.waterfall {
column-count: 2;
}
p {
color: orange;
}
}
@media (width <= 767px) {
.waterfall {
column-count: 1;
}
}
/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
.waterfall {
column-gap: 10px;
width: 100%;
margin: 0 auto;
column-count: 5;
}
.waterfall-item {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #eaeaea;
break-inside: avoid;
}
.material-img {
width: 100%;
}
p {
line-height: 30px;
}
</style>

10
apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue
View File

@@ -1,15 +1,11 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { ElTag } from 'element-plus';
const props = defineProps<{
defineOptions({ name: 'MsgEvent' });
defineProps<{
item: any;
}>();
// TODO @hw：看看用 antd 的风格，还是 ele 的风格，就是下面的 item。
// 等antd修改完再调整
const item = ref(props.item);
</script>
<template>

55
apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue
View File

@@ -32,25 +32,44 @@ function getNickname(sendFrom: number) {
<template>
<div class="execution" v-for="item in props.list" :key="item.id">
<div
class="mp-comment"
:class="{ 'mp-comment--reverse': item.sendFrom === SendFrom.MpBot }"
class="mb-[30px] flex items-start"
:class="{ 'flex-row-reverse': item.sendFrom === SendFrom.MpBot }"
>
<div class="avatar-div">
<img :src="getAvatar(item.sendFrom)" class="mp-comment__avatar" />
<div class="mp-comment__author">
<div class="flex w-20 flex-col items-center text-center">
<img
:src="getAvatar(item.sendFrom)"
class="mb-2 h-12 w-12 rounded-full border border-transparent object-cover"
/>
<div class="text-sm font-semibold text-[#999]">
{{ getNickname(item.sendFrom) }}
</div>
</div>
<div class="mp-comment__main">
<div class="mp-comment__header">
<div class="mp-comment__create_time">
<div class="relative mx-2 flex-1 rounded-[5px] border border-[#dedede]">
<span
class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#dedede]"
:class="{
'-right-2 left-auto border-l-[8px] border-r-0 border-l-[#dedede]':
item.sendFrom === SendFrom.MpBot,
}"
></span>
<span
class="pointer-events-none absolute -left-[7px] top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#f8f8f8]"
:class="{
'-right-[7px] left-auto border-l-[8px] border-r-0 border-l-[#f8f8f8]':
item.sendFrom === SendFrom.MpBot,
}"
></span>
<div
class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
>
<div class="text-xs text-gray-500">
{{ formatDateTime(item.createTime) }}
</div>
</div>
<div
class="mp-comment__body"
:style="
item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
class="overflow-hidden rounded-b-[5px] p-[15px] text-sm text-[#333]"
:class="
item.sendFrom === SendFrom.MpBot ? 'bg-[#6BED72]' : 'bg-white'
"
>
<Msg :item="item" />
@@ -59,17 +78,3 @@ function getNickname(sendFrom: number) {
</div>
</div>
</template>
<style lang="scss" scoped>
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
/** TODO @hw： 看看有没适合 tindwind 的哈。 */
@import url('./comment.scss');
@import url('./card.scss');
.avatar-div {
width: 80px;
text-align: center;
}
</style>

24
apps/web-ele/src/views/mp/components/wx-music/wx-music.vue
View File

@@ -42,16 +42,21 @@ defineExpose({
:underline="false"
target="_blank"
:href="hqMusicUrl ? hqMusicUrl : musicUrl"
class="block"
>
<div class="mp-card__body rounded-sm bg-background p-2.5">
<div class="mp-card__avatar">
<img :src="thumbMediaUrl" alt="" />
<div
class="bg-background flex items-center rounded-sm border border-[#e8e8e8] p-4 transition hover:border-black/10 hover:shadow-sm"
>
<div
class="mr-3 h-12 w-12 overflow-hidden rounded-full border border-transparent"
>
<img :src="thumbMediaUrl" alt="" class="h-full w-full object-cover" />
</div>
<div class="mp-card__detail">
<div class="mp-card__title" style="margin-bottom: unset">
<div class="flex-1">
<div class="mb-3 text-base font-medium text-[#000000d9]">
{{ title }}
</div>
<div class="mp-card__info" style="height: unset">
<div class="line-clamp-3 h-16 overflow-hidden text-sm text-black/45">
{{ description }}
</div>
</div>
@@ -59,10 +64,3 @@ defineExpose({
</ElLink>
</div>
</template>
<style lang="scss" scoped>
/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss */
@import url('../wx-msg/card.scss');
</style>

56
apps/web-ele/src/views/mp/components/wx-news/wx-news.vue
View File

@@ -1,6 +1,4 @@
<script lang="ts" setup>
import { ElImage } from 'element-plus';
/** 微信消息 - 图文 */
defineOptions({ name: 'WxNews' });
@@ -22,13 +20,13 @@ defineExpose({
<div class="news-home">
<div v-for="(article, index) in articles" :key="index" class="news-div">
<!-- 头条 -->
<!-- TODO @hw：第一篇文章（头条）图片是铺满，不过要限制高度；第二篇文章开始（次条），图片是在右侧，也是需要限制宽高 -->
<a v-if="index === 0" :href="article.url" target="_blank">
<div class="news-main">
<div class="news-content flex items-center justify-center">
<ElImage
:src="article.picUrl || article.thumbUrl"
class="material-img"
<div class="news-content">
<img
:src="article.picUrl"
:preview="false"
class="material-img flex w-[100px] items-center justify-center"
/>
<div class="news-content-title">
<span>{{ article.title }}</span>
@@ -40,12 +38,13 @@ defineExpose({
<a v-else :href="article.url" target="_blank">
<div class="news-main-item">
<div class="news-content-item">
<div class="news-content-item-title">{{ article.title }}</div>
<div class="news-content-item-img flex items-center justify-center">
<div class="news-content-item-img">
<div class="news-content-item-title">{{ article.title }}</div>
<img
:src="article.picUrl || article.thumbUrl"
class="material-img"
height="100%"
:src="article.picUrl"
class="h-[70px] w-[70px] object-cover"
alt="文章图片"
/>
</div>
</div>
@@ -56,12 +55,15 @@ defineExpose({
</template>
<style lang="scss" scoped>
/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.news-home {
width: 100%;
margin: auto;
background-color: #fff;
display: flex;
flex-direction: column;
gap: 10px;
}
.news-main {
@@ -83,42 +85,34 @@ defineExpose({
display: inline-block;
width: 98%;
padding: 1%;
font-size: 12px;
font-size: 16px;
color: #fff;
white-space: normal;
background-color: black;
opacity: 0.65;
margin-left: 10px;
}
.news-main-item {
padding: 5px 0;
background-color: #fff;
border-top: 1px solid #eaeaea;
}
.news-content-item {
padding: 10px;
box-sizing: border-box;
position: relative;
}
.news-content-item-title {
display: inline-block;
width: 70%;
margin-left: 1%;
font-size: 10px;
white-space: normal;
flex: 1;
font-size: 14px;
}
.news-content-item-img {
display: inline-block;
width: 25%;
margin-right: 1%;
background-color: #acadae;
display: flex;
align-items: center;
}
.material-img {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
width: auto;
object-fit: cover;
}
</style>

5
apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue
View File

@@ -100,7 +100,7 @@ function selectMaterial(item: any) {
</p>
<ElRow class="pt-[10px] text-center" justify="center">
<ElButton type="danger" circle @click="onDelete">
<IconifyIcon icon="ep:delete" />
<IconifyIcon icon="lucide:trash-2" />
</ElButton>
</ElRow>
</div>
@@ -112,7 +112,7 @@ function selectMaterial(item: any) {
class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
>
<ElButton type="success" @click="showDialog = true">
素材库选择 <IconifyIcon icon="ep:circle-check" />
素材库选择 <IconifyIcon icon="lucide:circle-check" />
</ElButton>
<ElDialog
title="选择图片"
@@ -133,7 +133,6 @@ function selectMaterial(item: any) {
:span="12"
class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
>
{{ uploadData }}
<ElUpload
:action="UPLOAD_URL"
:headers="HEADERS"

2
apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue
View File

@@ -87,7 +87,7 @@ function selectMaterial(item: any) {
v-if="reply.thumbMediaUrl"
:src="reply.thumbMediaUrl"
/>
<IconifyIcon v-else icon="ep:plus" />
<IconifyIcon v-else icon="lucide:plus" />
</ElRow>
<ElRow align="middle" justify="center" class="mt-[2%]">
<div>

4
apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
View File

@@ -51,7 +51,7 @@ function onDelete() {
<News :articles="reply.articles" />
<ElCol class="pt-[10px] text-center">
<ElButton type="danger" circle @click="onDelete">
<IconifyIcon icon="ep:delete" />
<IconifyIcon icon="lucide:trash-2" />
</ElButton>
</ElCol>
</div>
@@ -65,7 +65,7 @@ function onDelete() {
? '选择已发布图文'
: '选择草稿箱图文'
}}
<IconifyIcon icon="ep:circle-check" />
<IconifyIcon icon="lucide:circle-check" />
</ElButton>
</ElCol>
</ElRow>

4
apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue
View File

@@ -104,7 +104,7 @@ function selectMaterial(item: any) {
<!-- 选择素材 -->
<ElCol :span="12">
<ElButton type="success" @click="showDialog = true">
素材库选择 <IconifyIcon icon="ep:circle-check" />
素材库选择 <IconifyIcon icon="lucide:circle-check" />
</ElButton>
<ElDialog
title="选择视频"
@@ -133,7 +133,7 @@ function selectMaterial(item: any) {
:on-success="onUploadSuccess"
>
<ElButton type="primary">
新建视频 <IconifyIcon icon="ep:upload" />
新建视频 <IconifyIcon icon="lucide:upload" />
</ElButton>
</ElUpload>
</ElCol>

4
apps/web-ele/src/views/mp/components/wx-reply/tab-voice.vue
View File

@@ -103,7 +103,7 @@ function selectMaterial(item: Reply) {
</ElRow>
<ElRow class="w-full pt-[10px] text-center" justify="center">
<ElButton type="danger" circle @click="onDelete">
<IconifyIcon icon="ep:delete" />
<IconifyIcon icon="lucide:trash-2" />
</ElButton>
</ElRow>
</div>
@@ -114,7 +114,7 @@ function selectMaterial(item: Reply) {
class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
>
<ElButton type="success" @click="showDialog = true">
素材库选择<IconifyIcon icon="ep:circle-check" />
素材库选择<IconifyIcon icon="lucide:circle-check" />
</ElButton>
<ElDialog
title="选择语音"

16
apps/web-ele/src/views/mp/components/wx-reply/wx-reply.vue
View File

@@ -117,7 +117,9 @@ defineExpose({
<!-- 类型 1：文本 -->
<ElTabPane :name="ReplyType.Text">
<template #label>
<ElRow align="middle"><IconifyIcon icon="ep:document" /> 文本</ElRow>
<ElRow align="middle">
<IconifyIcon icon="lucide:file-text" /> 文本
</ElRow>
</template>
<TabText v-model="reply.content" />
</ElTabPane>
@@ -126,7 +128,7 @@ defineExpose({
<ElTabPane :name="ReplyType.Image">
<template #label>
<ElRow align="middle">
<IconifyIcon icon="ep:picture" class="mr-5px" /> 图片
<IconifyIcon icon="lucide:image" class="mr-5px" /> 图片
</ElRow>
</template>
<TabImage v-model="reply" />
@@ -135,7 +137,7 @@ defineExpose({
<!-- 类型 3：语音 -->
<ElTabPane :name="ReplyType.Voice">
<template #label>
<ElRow align="middle"><IconifyIcon icon="ep:phone" /> 语音</ElRow>
<ElRow align="middle"> <IconifyIcon icon="lucide:mic" /> 语音 </ElRow>
</template>
<TabVoice v-model="reply" />
</ElTabPane>
@@ -143,7 +145,7 @@ defineExpose({
<!-- 类型 4：视频 -->
<ElTabPane :name="ReplyType.Video">
<template #label>
<ElRow align="middle"><IconifyIcon icon="ep:share" /> 视频</ElRow>
<ElRow align="middle"><IconifyIcon icon="lucide:video" /> 视频</ElRow>
</template>
<TabVideo v-model="reply" />
</ElTabPane>
@@ -151,7 +153,9 @@ defineExpose({
<!-- 类型 5：图文 -->
<ElTabPane :name="ReplyType.News">
<template #label>
<ElRow align="middle"><IconifyIcon icon="ep:reading" /> 图文</ElRow>
<ElRow align="middle">
<IconifyIcon icon="lucide:newspaper" /> 图文
</ElRow>
</template>
<TabNews v-model="reply" :news-type="newsType" />
</ElTabPane>
@@ -159,7 +163,7 @@ defineExpose({
<!-- 类型 6：音乐 -->
<ElTabPane :name="ReplyType.Music">
<template #label>
<ElRow align="middle"><IconifyIcon icon="ep:service" />音乐</ElRow>
<ElRow align="middle"> <IconifyIcon icon="lucide:music" />音乐 </ElRow>
</template>
<TabMusic v-model="reply" />
</ElTabPane>

2
apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue
View File

@@ -26,7 +26,7 @@ const playVideo = () => {
<div @click="playVideo()">
<!-- 提示 -->
<div class="flex cursor-pointer flex-col items-center">
<IconifyIcon icon="ep:video-play" :size="32" class="mr-5px" />
<IconifyIcon icon="lucide:circle-play" :size="32" class="mr-5px" />
<p class="text-sm">点击播放视频</p>
</div>

27
apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue
View File

@@ -9,18 +9,15 @@ import BenzAMRRecorder from 'benz-amr-recorder';
/** 微信消息 - 语音 */
defineOptions({ name: 'VoicePlayer' });
// TODO @hw：antd 和 ele 代码风格一致；
const props = defineProps({
url: {
type: String, // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
required: true,
const props = withDefaults(
defineProps<{
content?: string; // 语音文本
url: string; // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
}>(),
{
content: '',
},
content: {
type: String, // 语音文本
required: false,
default: '',
},
});
);
const amr = ref();
const playing = ref(false);
@@ -72,8 +69,12 @@ const amrStop = () => {
<template>
<div class="wx-voice-div" @click="playVoice">
<el-icon>
<IconifyIcon v-if="playing !== true" icon="ep:video-play" :size="32" />
<IconifyIcon v-else icon="ep:video-pause" :size="32" />
<IconifyIcon
v-if="playing !== true"
icon="lucide:circle-play"
:size="32"
/>
<IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
<span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
</el-icon>
<div v-if="content">

2
apps/web-ele/src/views/mp/draft/modules/cover-select.vue
View File

@@ -93,7 +93,7 @@ function onUploadError(err: Error) {
/>
<IconifyIcon
v-else
icon="ep:plus"
icon="lucide:plus"
class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
:class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
/>

56
apps/web-ele/src/views/mp/draft/modules/form.vue
View File

@@ -1,32 +1,27 @@
<script lang="ts" setup>
import type { NewsItem } from './types';
import type { MpDraftApi } from '#/api/mp/draft';
import { computed, provide, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
import * as MpDraftApi from '#/api/mp/draft';
import { createDraft, updateDraft } from '#/api/mp/draft';
import NewsForm from './news-form.vue';
const emit = defineEmits(['success']);
// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
const formData = ref<{
accountId: number;
isCreating: boolean;
mediaId?: string;
newsList?: NewsItem[];
newsList?: MpDraftApi.NewsItem[];
}>();
const newsList = ref<NewsItem[]>([]);
const isSubmitting = ref(false);
const isSaved = ref(false);
const newsList = ref<MpDraftApi.NewsItem[]>([]);
const getTitle = computed(() => {
return formData.value?.isCreating ? '新建图文' : '修改图文';
return formData.value?.mediaId ? '修改图文' : '新建图文';
});
// 提供 accountId 给子组件
@@ -39,59 +34,45 @@ const [Modal, modalApi] = useVbenModal({
if (!formData.value) {
return;
}
isSubmitting.value = true;
modalApi.lock();
try {
if (formData.value.isCreating) {
await MpDraftApi.createDraft(formData.value.accountId, newsList.value);
ElMessage.success('新增成功');
} else if (formData.value.mediaId) {
await MpDraftApi.updateDraft(
if (formData.value.mediaId) {
await updateDraft(
formData.value.accountId,
formData.value.mediaId,
newsList.value,
);
ElMessage.success('更新成功');
} else {
await createDraft(formData.value.accountId, newsList.value);
ElMessage.success('新增成功');
}
isSaved.value = true;
await modalApi.close();
emit('success');
} finally {
isSubmitting.value = false;
modalApi.unlock();
}
},
async onBeforeClose() {
// 如果已经成功保存，直接关闭，不显示提示
if (isSaved.value) {
return true;
}
try {
await ElMessageBox.confirm('修改内容可能还未保存，确定关闭吗?');
return true;
} catch {
return false;
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
newsList.value = [];
isSaved.value = false;
return;
}
isSaved.value = false;
const data = modalApi.getData<{
accountId: number;
isCreating: boolean;
mediaId?: string;
newsList?: NewsItem[];
newsList?: MpDraftApi.NewsItem[];
}>();
if (!data) {
return;
}
formData.value = data;
formData.value = {
accountId: data.accountId,
mediaId: data.mediaId,
newsList: data.newsList,
};
newsList.value = data.newsList || [];
},
});
@@ -102,8 +83,7 @@ const [Modal, modalApi] = useVbenModal({
<NewsForm
v-if="formData"
v-model="newsList"
v-loading="isSubmitting"
:is-creating="formData.isCreating"
:is-creating="!formData.mediaId"
/>
</Modal>
</template>

23
apps/web-ele/src/views/mp/draft/modules/news-form.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { NewsItem } from './types';
import type { MpDraftApi } from '#/api/mp/draft';
import { computed, ref } from 'vue';
@@ -16,24 +16,23 @@ import {
ElRow,
} from 'element-plus';
import { createEmptyNewsItem } from '#/api/mp/draft';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import CoverSelect from './cover-select.vue';
import { createEmptyNewsItem } from './types';
defineOptions({ name: 'NewsForm' });
const props = defineProps<{
isCreating: boolean;
modelValue: NewsItem[] | null;
modelValue: MpDraftApi.NewsItem[] | null;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', v: NewsItem[]): void;
(e: 'update:modelValue', v: MpDraftApi.NewsItem[]): void;
}>();
// TODO @hw: 对齐 antd，应该是 MpDraftApi.NewsItem 这种哈。
const newsList = computed<NewsItem[]>({
const newsList = computed<MpDraftApi.NewsItem[]>({
get() {
return props.modelValue === null
? [createEmptyNewsItem()]
@@ -124,7 +123,7 @@ function plusNews() {
size="small"
@click="() => moveDownNews(index)"
>
<IconifyIcon icon="ep:arrow-down-bold" />
<IconifyIcon icon="lucide:arrow-down" />
</ElButton>
<ElButton
v-if="isCreating"
@@ -133,7 +132,7 @@ function plusNews() {
size="small"
@click="() => removeNews(index)"
>
<IconifyIcon icon="ep:delete" />
<IconifyIcon icon="lucide:trash-2" />
</ElButton>
</div>
</div>
@@ -168,7 +167,7 @@ function plusNews() {
size="small"
@click="() => moveDownNews(index)"
>
<IconifyIcon icon="ep:arrow-down-bold" />
<IconifyIcon icon="lucide:arrow-down" />
</ElButton>
<ElButton
v-if="index > 0"
@@ -177,7 +176,7 @@ function plusNews() {
size="small"
@click="() => moveUpNews(index)"
>
<IconifyIcon icon="ep:arrow-up-bold" />
<IconifyIcon icon="lucide:arrow-up" />
</ElButton>
<ElButton
v-if="isCreating"
@@ -186,7 +185,7 @@ function plusNews() {
circle
@click="() => removeNews(index)"
>
<IconifyIcon icon="ep:delete" />
<IconifyIcon icon="lucide:trash-2" />
</ElButton>
</div>
</div>
@@ -201,7 +200,7 @@ function plusNews() {
@click="plusNews"
v-if="newsList.length < 8 && isCreating"
>
<IconifyIcon icon="ep:plus" />
<IconifyIcon icon="lucide:plus" />
</ElButton>
</ElRow>
</div>

42
apps/web-ele/src/views/mp/draft/modules/types.ts
View File

@@ -1,42 +0,0 @@
// TODO @hw：合并到 api 里，参考 antd 的做法；
interface NewsItem {
title: string;
thumbMediaId: string;
author: string;
digest: string;
showCoverPic: number;
content: string;
contentSourceUrl: string;
needOpenComment: number;
onlyFansCanComment: number;
thumbUrl: string;
picUrl?: string; // 用于预览封面
}
interface NewsItemList {
newsItem: NewsItem[];
}
interface Article {
mediaId: string;
content: NewsItemList;
updateTime: number;
}
const createEmptyNewsItem = (): NewsItem => {
return {
title: '',
thumbMediaId: '',
author: '',
digest: '',
showCoverPic: 0,
content: '',
contentSourceUrl: '',
needOpenComment: 0,
onlyFansCanComment: 0,
thumbUrl: '',
};
};
export type { Article, NewsItem, NewsItemList };
export { createEmptyNewsItem };

20
apps/web-ele/src/views/mp/menu/index.vue
View File

@@ -291,7 +291,6 @@ function menuToBackend(menu: any) {
};
return result;
}
// TODO @hw：antd 和 ele 版本，基本没用自定义组件，他们的 tindwind 需要进一步对齐么？（主要还是考虑维护性哈。）
</script>
<template>
@@ -310,21 +309,21 @@ function menuToBackend(menu: any) {
>
<!--左边配置菜单-->
<div
class="left relative box-border block h-[715px] w-[350px] flex-shrink-0 bg-[length:100%_auto] bg-no-repeat px-[25px] pb-[88px] pt-[518px]"
class="relative float-left box-border block h-[715px] w-[350px] bg-[length:100%_auto] bg-no-repeat p-[518px_25px_88px]"
:style="{ backgroundImage: `url(${iphoneBackImg})` }"
>
<div
class="relative bottom-[426px] left-0 h-[64px] w-[300px] bg-[length:100%_auto] bg-no-repeat text-center text-white"
class="relative bottom-[426px] left-0 h-[64px] w-[300px] bg-[length:100%] bg-[position:0_0] bg-no-repeat text-center text-white"
:style="{ backgroundImage: `url(${menuHeadImg})` }"
>
<div
class="absolute left-0 top-[33px] w-full text-center text-[14px] text-white"
class="absolute left-0 top-[33px] w-full text-center text-sm text-white"
>
{{ accountName }}
</div>
</div>
<div
class="h-[46px] bg-no-repeat pl-[43px] text-[12px]"
class="bg-[position:0_0] bg-no-repeat pl-[43px] text-xs after:clear-both after:table after:content-['']"
:style="{ backgroundImage: `url(${menuFootImg})` }"
>
<Previewer
@@ -336,7 +335,7 @@ function menuToBackend(menu: any) {
@submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
/>
</div>
<div class="mt-[15px] text-center">
<div class="mt-[15px] flex items-center justify-center gap-[10px]">
<ElButton
class="mx-2"
type="success"
@@ -357,7 +356,7 @@ function menuToBackend(menu: any) {
</div>
<!--右边配置-->
<div
class="right box-border flex-1 basis-[63%] bg-[#e8e7e7] p-[20px]"
class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5"
v-if="showRightPanel"
>
<Editor
@@ -368,11 +367,8 @@ function menuToBackend(menu: any) {
/>
</div>
<!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
<div
v-else
class="right box-border flex-1 basis-[63%] bg-[#e8e7e7] p-[20px]"
>
<p class="text-left">请选择菜单配置</p>
<div v-else class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5">
<p>请选择菜单配置</p>
</div>
</div>
</ContentWrap>

17
apps/web-ele/src/views/mp/menu/modules/editor.vue
View File

@@ -14,10 +14,7 @@ import {
ElSelect,
} from 'element-plus';
// TODO @hw：import { WxMaterialSelect, WxNews, WxReply } from '#/views/mp/components';
import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
import News from '#/views/mp/components/wx-news/wx-news.vue';
import ReplySelect from '#/views/mp/components/wx-reply/wx-reply.vue';
import { WxMaterialSelect, WxNews, WxReply } from '#/views/mp/components';
import { menuOptions } from './types';
@@ -79,7 +76,7 @@ function deleteMaterial() {
<div class="space-y-5">
<div class="flex justify-end">
<ElButton type="danger" @click="emit('delete')">
<IconifyIcon icon="ep:delete" />
<IconifyIcon icon="lucide:trash-2" />
删除当前菜单
</ElButton>
</div>
@@ -183,10 +180,10 @@ function deleteMaterial() {
class="mx-auto mb-2.5 w-[280px] border border-[#eaeaea] p-2.5"
v-if="menu && menu.replyArticles"
>
<News :articles="menu.replyArticles" />
<WxNews :articles="menu.replyArticles" />
<ElRow class="pt-2.5 text-center" justify="center" align="middle">
<ElButton type="danger" circle @click="deleteMaterial">
<IconifyIcon icon="ep:delete" />
<IconifyIcon icon="ep:trash-2" />
</ElButton>
</ElRow>
</div>
@@ -195,7 +192,7 @@ function deleteMaterial() {
<ElCol :span="24" class="text-center">
<ElButton type="success" @click="showNewsDialog = true">
素材库选择
<IconifyIcon icon="ep:circle-check" />
<IconifyIcon icon="lucide:circle-check" />
</ElButton>
</ElCol>
</ElRow>
@@ -206,7 +203,7 @@ function deleteMaterial() {
width="80%"
destroy-on-close
>
<MaterialSelect
<WxMaterialSelect
type="news"
:account-id="props.accountId"
@select-material="selectMaterial"
@@ -218,7 +215,7 @@ function deleteMaterial() {
class="rounded bg-white px-3 py-5 shadow-sm"
v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
>
<ReplySelect v-model="menu.reply" />
<WxReply v-model="menu.reply" />
</div>
</div>
</div>

11
apps/web-ele/src/views/mp/menu/modules/previewer.vue
View File

@@ -140,8 +140,9 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
"
@click="menuClicked(parent, x)"
>
<!-- TODO @hw：尽量用中立的 lucide icon -->
<IconifyIcon icon="ep:fold" color="black" />{{ parent.name }}
<IconifyIcon icon="lucide:list-collapse" color="black" />{{
parent.name
}}
</div>
<!-- 以下为二级菜单-->
<div
@@ -180,8 +181,7 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
v-if="!parent.children || parent.children.length < 5"
@click="addSubMenu(x, parent)"
>
<!-- TODO @hw：尽量用中立的 lucide icon -->
<IconifyIcon icon="ep:plus" class="" />
<IconifyIcon icon="lucide:plus" class="" />
</div>
</div>
</div>
@@ -194,8 +194,7 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
v-if="menuList.length < 3"
@click="addMenu"
>
<!-- TODO @hw：尽量用中立的 lucide icon -->
<IconifyIcon icon="ep:plus" class="" />
<IconifyIcon icon="lucide:plus" class="" />
</div>
</template>