XW-AIOT/aiot-platform-ui
4
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

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