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

fix: 组件名称修改 css样式使用tindwind

Browse Source
This commit is contained in:
hw
2025-11-07 11:33:32 +08:00
parent 92a1909ad8
commit dcc543cd7f
29 changed files with 240 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web-antd/.env.development
View File

@@ -4,9 +4,9 @@ VITE_PORT=5666
VITE_BASE=/
# 请求路径
VITE_BASE_URL=http://127.0.0.1:48080
VITE_BASE_URL=http://47.103.66.220:48080
# 接口地址
VITE_GLOB_API_URL=/admin-api
VITE_GLOB_API_URL=http://47.103.66.220:48080/admin-api
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
VITE_UPLOAD_TYPE=server
# 是否打开 devtools，true 为打开，false 为关闭

2
apps/web-antd/src/views/mp/autoReply/modules/form.vue
View File

@@ -9,7 +9,7 @@ import { message } from 'ant-design-vue';
import * as MpAutoReplyApi from '#/api/mp/autoReply';
import { $t } from '#/locales';
import { ReplyType } from '#/views/mp/modules/wx-reply/components/types';
import { ReplyType } from '#/views/mp/modules/wx-reply/modules/types';
import ReplyForm from './ReplyForm.vue';
import { MsgType } from './types';

53
apps/web-antd/src/views/mp/modules/wx-msg/main.vue
View File

@@ -19,7 +19,7 @@ import { getUser } from '#/api/mp/user';
import profile from '#/assets/imgs/profile.jpg';
import WxReplySelect, { ReplyType } from '#/views/mp/modules/wx-reply';
import MsgList from './components/MsgList.vue';
import MsgList from './modules/msg-list.vue';
defineOptions({ name: 'WxMsg' });
@@ -168,14 +168,21 @@ async function scrollToBottom() {
<template>
<ContentWrap>
<Spin :spinning="loading">
<div class="msg-div" ref="msgDivRef">
<div
class="ml-[10px] mr-[10px] h-[50vh] overflow-auto bg-[#eaeaea]"
ref="msgDivRef"
>
<!-- 加载更多 -->
<div v-if="!loading">
<div class="empty-block" v-if="hasMore" @click="loadMore">
<span class="empty-text">点击加载更多</span>
<div
class="cursor-pointer py-5 text-center"
v-if="hasMore"
@click="loadMore"
>
<span class="text-[#999]">点击加载更多</span>
</div>
<div class="empty-block" v-if="!hasMore">
<span class="empty-text">没有更多了</span>
<div class="py-5 text-center" v-if="!hasMore">
<span class="text-[#999]">没有更多了</span>
</div>
</div>
@@ -185,9 +192,9 @@ async function scrollToBottom() {
</Spin>
<Spin :spinning="sendLoading">
<div class="msg-send">
<div class="p-[10px]">
<WxReplySelect ref="replySelectRef" v-model="reply" />
<Button type="primary" class="send-but" @click="sendMsg">
<Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
发送(S)
</Button>
</div>
@@ -195,32 +202,4 @@ async function scrollToBottom() {
</ContentWrap>
</template>
<style lang="scss" scoped>
.msg-div {
height: 50vh;
margin-right: 10px;
margin-left: 10px;
overflow: auto;
background-color: #eaeaea;
}
.msg-send {
padding: 10px;
}
.send-but {
float: right;
margin-top: 8px;
margin-bottom: 8px;
}
.empty-block {
padding: 20px;
text-align: center;
cursor: pointer;
}
.empty-text {
color: #999;
}
</style>
<style lang="scss" scoped></style>

0
apps/web-antd/src/views/mp/modules/wx-msg/components/MsgEvent.vue → apps/web-antd/src/views/mp/modules/wx-msg/modules/msg-event.vue
View File

30
apps/web-antd/src/views/mp/modules/wx-msg/components/MsgList.vue → apps/web-antd/src/views/mp/modules/wx-msg/modules/msg-list.vue
View File

@@ -5,7 +5,7 @@ import { formatDateTime } from '@vben/utils';
import avatarWechat from '#/assets/imgs/wechat.png';
import Msg from './Msg.vue';
import Msg from './msg.vue';
// 确保 User 类型被识别为已使用
type PropsUser = User;
@@ -37,25 +37,30 @@ const getNickname = (sendFrom: SendFromType) =>
sendFrom === UserValue ? props.user.nickname : '公众号';
</script>
<template>
<div class="execution" v-for="item in props.list" :key="item.id">
<div v-for="item in props.list" :key="item.id">
<div
class="avue-comment"
:class="{ 'avue-comment--reverse': item.sendFrom === MpBotValue }"
class="mb-[30px] flex items-start"
:class="{ 'flex-row-reverse': item.sendFrom === MpBotValue }"
>
<div class="avatar-div">
<img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
<div class="avue-comment__author">
<div class="w-20 text-center">
<img
:src="getAvatar(item.sendFrom)"
class="box-border h-12 w-12 rounded-full border border-transparent align-middle"
/>
<div class="text-sm font-bold text-[#999]">
{{ getNickname(item.sendFrom) }}
</div>
</div>
<div class="avue-comment__main">
<div class="avue-comment__header">
<div class="relative mx-5 flex-1 rounded-[5px] border border-[#dedede]">
<div
class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
>
<div class="avue-comment__create_time">
{{ formatDateTime(item.createTime) }}
</div>
</div>
<div
class="avue-comment__body"
class="overflow-hidden rounded-b-[5px] bg-white px-[15px] py-[15px] text-sm text-[#333]"
:style="item.sendFrom === MpBotValue ? 'background: #6BED72;' : ''"
>
<Msg :item="item" />
@@ -69,9 +74,4 @@ const getNickname = (sendFrom: SendFromType) =>
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
@import url('../comment.scss');
@import url('../card.scss');
.avatar-div {
width: 80px;
text-align: center;
}
</style>

19
apps/web-antd/src/views/mp/modules/wx-msg/components/Msg.vue → apps/web-antd/src/views/mp/modules/wx-msg/modules/msg.vue
View File

@@ -8,7 +8,7 @@ import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
import { MsgType } from '../types';
import MsgEvent from './MsgEvent.vue';
import MsgEvent from './msg-event.vue';
defineOptions({ name: 'Msg' });
@@ -31,24 +31,29 @@ const item = ref<any>(props.item);
<div v-else-if="item.type === MsgType.Image">
<a target="_blank" :href="item.mediaUrl">
<img :src="item.mediaUrl" style="width: 100px" />
<img :src="item.mediaUrl" class="w-[100px]" />
</a>
</div>
<div
v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
style="text-align: center"
class="text-center"
>
<WxVideoPlayer :url="item.mediaUrl" />
</div>
<div v-else-if="item.type === MsgType.Link" class="avue-card__detail">
<div v-else-if="item.type === MsgType.Link" class="flex-1">
<a target="_blank" :href="item.url">
<div class="avue-card__title">
<div
class="mb-3 text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]"
>
<Icon icon="ep:link" />{{ item.title }}
</div>
</a>
<div class="avue-card__info" style="height: unset">
<div
class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
style="height: unset"
>
{{ item.description }}
</div>
</div>
@@ -61,7 +66,7 @@ const item = ref<any>(props.item);
/>
</div>
<div v-else-if="item.type === MsgType.News" style="width: 300px">
<div v-else-if="item.type === MsgType.News" class="w-[300px]">
<WxNews :articles="item.articles" />
</div>

6
apps/web-antd/src/views/mp/modules/wx-reply/index.ts
View File

@@ -1,8 +1,8 @@
export { default } from './main.vue';
export {
createEmptyReply,
NewsType,
type Reply,
ReplyType,
} from './components/types';
export { default } from './main.vue';
} from './modules/types';

97
apps/web-antd/src/views/mp/modules/wx-reply/main.vue
View File

@@ -8,7 +8,7 @@
④ 支持发送【视频】消息时，支持新建视频
-->
<script lang="ts" setup>
import type { Reply } from './components/types';
import type { Reply } from './modules/types';
import { computed, ref, unref, watch } from 'vue';
@@ -16,13 +16,13 @@ import { IconifyIcon } from '@vben/icons';
import { Row, Tabs } from 'ant-design-vue';
import TabImage from './components/TabImage.vue';
import TabMusic from './components/TabMusic.vue';
import TabNews from './components/TabNews.vue';
import TabText from './components/TabText.vue';
import TabVideo from './components/TabVideo.vue';
import TabVoice from './components/TabVoice.vue';
import { createEmptyReply, NewsType, ReplyType } from './components/types';
import TabImage from './modules/tab-image.vue';
import TabMusic from './modules/tab-music.vue';
import TabNews from './modules/tab-news.vue';
import TabText from './modules/tab-text.vue';
import TabVideo from './modules/tab-video.vue';
import TabVoice from './modules/tab-voice.vue';
import { createEmptyReply, NewsType, ReplyType } from './modules/types';
defineOptions({ name: 'WxReplySelect' });
@@ -137,83 +137,4 @@ defineExpose({
</Tabs>
</template>
<style lang="scss" scoped>
.select-item {
width: 280px;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
}
.select-item2 {
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
}
.ope-row {
padding-top: 10px;
text-align: center;
}
.input-margin-bottom {
margin-bottom: 2%;
}
.item-name {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
text-align: center;
white-space: nowrap;
}
.el-form-item__content {
line-height: unset !important;
}
.col-select {
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
}
.col-select2 {
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
}
.col-add {
float: right;
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
}
.avatar-uploader-icon {
width: 100px !important;
height: 100px !important;
font-size: 28px;
line-height: 100px !important;
color: #8c939d;
text-align: center;
border: 1px solid #d9d9d9;
}
.material-img {
width: 100%;
}
.thumb-div {
display: inline-block;
text-align: center;
}
.item-infos {
width: 30%;
margin: auto;
}
</style>
<style lang="scss" scoped></style>

81
apps/web-antd/src/views/mp/modules/wx-reply/components/TabImage.vue → apps/web-antd/src/views/mp/modules/wx-reply/modules/tab-image.vue
View File

@@ -82,19 +82,30 @@ function selectMaterial(item: any) {
<template>
<div>
<!-- 情况一：已经选择好素材、或者上传好图片 -->
<div class="select-item" v-if="reply.url">
<img class="material-img" :src="reply.url" />
<p class="item-name" v-if="reply.name">{{ reply.name }}</p>
<Row class="ope-row" justify="center">
<div
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
v-if="reply.url"
>
<img class="w-full" :src="reply.url" />
<p
class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
v-if="reply.name"
>
{{ reply.name }}
</p>
<Row class="pt-[10px] text-center" justify="center">
<Button type="primary" danger shape="circle" @click="onDelete">
<IconifyIcon icon="ep:delete" />
</Button>
</Row>
</div>
<!-- 情况二：未做完上述操作 -->
<Row v-else style="text-align: center" align="middle">
<Row v-else class="text-center" align="middle">
<!-- 选择素材 -->
<Col :span="12" class="col-select">
<Col
:span="12"
class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
>
<Button type="primary" @click="showDialog = true">
素材库选择 <IconifyIcon icon="ep:circle-check" />
</Button>
@@ -112,7 +123,10 @@ function selectMaterial(item: any) {
</Modal>
</Col>
<!-- 文件上传 -->
<Col :span="12" class="col-add">
<Col
:span="12"
class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
>
<Upload
:action="UPLOAD_URL"
:headers="HEADERS"
@@ -130,7 +144,7 @@ function selectMaterial(item: any) {
<Button type="primary">上传图片</Button>
<template #tip>
<span>
<div class="upload-tip">
<div class="text-center leading-[18px]">
支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
</div>
</span>
@@ -141,53 +155,4 @@ function selectMaterial(item: any) {
</div>
</template>
<style lang="scss" scoped>
.select-item {
width: 280px;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
.material-img {
width: 100%;
}
.item-name {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
text-align: center;
white-space: nowrap;
.item-infos {
width: 30%;
margin: auto;
}
.ope-row {
padding-top: 10px;
text-align: center;
}
}
.col-select {
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
}
.col-add {
float: right;
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
.upload-tip {
line-height: 18px;
text-align: center;
}
}
}
</style>
<style lang="scss" scoped></style>

20
apps/web-antd/src/views/mp/modules/wx-reply/components/TabMusic.vue → apps/web-antd/src/views/mp/modules/wx-reply/modules/tab-music.vue
View File

@@ -85,18 +85,18 @@ function selectMaterial(item: any) {
<div>
<Row align="middle" justify="center">
<Col :span="6">
<Row align="middle" justify="center" class="thumb-div">
<Row align="middle" justify="center" class="inline-block text-center">
<Col :span="24">
<Row align="middle" justify="center">
<img
style="width: 100px"
class="w-[100px]"
v-if="reply.thumbMediaUrl"
:src="reply.thumbMediaUrl"
/>
<IconifyIcon v-else icon="ep:plus" />
</Row>
<Row align="middle" justify="center" style="margin-top: 2%">
<div class="thumb-but">
<Row align="middle" justify="center" class="mt-[2%]">
<div>
<Upload
:action="UPLOAD_URL"
:headers="HEADERS"
@@ -115,11 +115,7 @@ function selectMaterial(item: any) {
<Button type="link">本地上传</Button>
</template>
</Upload>
<Button
type="link"
@click="showDialog = true"
style="margin-left: 5px"
>
<Button type="link" @click="showDialog = true" class="ml-[5px]">
素材库选择
</Button>
</div>
@@ -141,19 +137,19 @@ function selectMaterial(item: any) {
</Col>
<Col :span="18">
<Input v-model:value="reply.title as string" placeholder="请输入标题" />
<div style="margin: 20px 0"></div>
<div class="my-5"></div>
<Input
v-model:value="reply.description as string"
placeholder="请输入描述"
/>
</Col>
</Row>
<div style="margin: 20px 0"></div>
<div class="my-5"></div>
<Input
v-model:value="reply.musicUrl as string"
placeholder="请输入音乐链接"
/>
<div style="margin: 20px 0"></div>
<div class="my-5"></div>
<Input
v-model:value="reply.hqMusicUrl as string"
placeholder="请输入高质量音乐链接"

20
apps/web-antd/src/views/mp/modules/wx-reply/components/TabNews.vue → apps/web-antd/src/views/mp/modules/wx-reply/modules/tab-news.vue
View File

@@ -42,11 +42,11 @@ function onDelete() {
<div>
<Row>
<div
class="select-item"
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
v-if="reply.articles && reply.articles.length > 0"
>
<WxNews :articles="reply.articles" />
<Col class="ope-row">
<Col class="pt-[10px] text-center">
<Button type="primary" danger shape="circle" @click="onDelete">
<IconifyIcon icon="ep:delete" />
</Button>
@@ -54,7 +54,7 @@ function onDelete() {
</div>
<!-- 选择素材 -->
<Col :span="24" v-if="!reply.content">
<Row style="text-align: center" align="middle">
<Row class="text-center" align="middle">
<Col :span="24">
<Button type="primary" @click="showDialog = true">
{{
@@ -84,16 +84,4 @@ function onDelete() {
</div>
</template>
<style lang="scss" scoped>
.select-item {
width: 280px;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
.ope-row {
padding-top: 10px;
text-align: center;
}
}
</style>
<style lang="scss" scoped></style>

1
apps/web-antd/src/views/mp/modules/wx-reply/components/TabText.vue → apps/web-antd/src/views/mp/modules/wx-reply/modules/tab-text.vue
View File

@@ -26,5 +26,6 @@ const content = computed({
:rows="5"
placeholder="请输入内容"
v-model:value="content as string"
class="w-full"
/>
</template>

20
apps/web-antd/src/views/mp/modules/wx-reply/components/TabVideo.vue → apps/web-antd/src/views/mp/modules/wx-reply/modules/tab-video.vue
View File

@@ -149,19 +149,19 @@ function selectMaterial(item: any) {
<Row>
<Input
v-model:value="reply.title as string"
class="input-margin-bottom"
class="mb-[2%]"
placeholder="请输入标题"
/>
<Input
class="input-margin-bottom"
class="mb-[2%]"
v-model:value="reply.description as string"
placeholder="请输入描述"
/>
<Row class="ope-row" justify="center">
<Row class="w-full pt-[10px] text-center" justify="center">
<WxVideoPlayer v-if="reply.url" :url="reply.url" />
</Row>
<Col class="w-full">
<Row style="text-align: center" align="middle">
<Row class="text-center" align="middle">
<!-- 选择素材 -->
<Col :span="12">
<Button type="primary" @click="showDialog = true">
@@ -198,14 +198,4 @@ function selectMaterial(item: any) {
</div>
</template>
<style lang="scss" scoped>
.input-margin-bottom {
margin-bottom: 2%;
}
.ope-row {
width: 100%;
padding-top: 10px;
text-align: center;
}
</style>
<style lang="scss" scoped></style>

71
apps/web-antd/src/views/mp/modules/wx-reply/components/TabVoice.vue → apps/web-antd/src/views/mp/modules/wx-reply/modules/tab-voice.vue
View File

@@ -83,20 +83,30 @@ function selectMaterial(item: Reply) {
</script>
<template>
<div>
<div class="select-item2" v-if="reply.url">
<p class="item-name">{{ reply.name }}</p>
<Row class="ope-row" justify="center">
<div
class="mx-auto mb-[10px] border border-[#eaeaea] p-[10px]"
v-if="reply.url"
>
<p
class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
>
{{ reply.name }}
</p>
<Row class="w-full pt-[10px] text-center" justify="center">
<WxVoicePlayer :url="reply.url" />
</Row>
<Row class="ope-row" justify="center">
<Row class="w-full pt-[10px] text-center" justify="center">
<Button type="primary" danger shape="circle" @click="onDelete">
<IconifyIcon icon="ep:delete" />
</Button>
</Row>
</div>
<Row v-else style="text-align: center">
<Row v-else class="text-center">
<!-- 选择素材 -->
<Col :span="12" class="col-select">
<Col
:span="12"
class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
>
<Button type="primary" @click="showDialog = true">
素材库选择<IconifyIcon icon="ep:circle-check" />
</Button>
@@ -114,7 +124,10 @@ function selectMaterial(item: Reply) {
</Modal>
</Col>
<!-- 文件上传 -->
<Col :span="12" class="col-add">
<Col
:span="12"
class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
>
<Upload
:action="UPLOAD_URL"
:headers="HEADERS"
@@ -131,7 +144,7 @@ function selectMaterial(item: Reply) {
>
<Button type="primary">点击上传</Button>
<template #tip>
<div class="upload-tip">
<div class="text-center leading-[18px]">
格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
</div>
</template>
@@ -141,44 +154,4 @@ function selectMaterial(item: Reply) {
</div>
</template>
<style lang="scss" scoped>
.select-item2 {
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
.item-name {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
text-align: center;
white-space: nowrap;
.ope-row {
width: 100%;
padding-top: 10px;
text-align: center;
}
}
.col-select {
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
}
.col-add {
float: right;
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
.upload-tip {
line-height: 18px;
text-align: center;
}
}
}
</style>
<style lang="scss" scoped></style>

0
apps/web-antd/src/views/mp/modules/wx-reply/components/types.ts → apps/web-antd/src/views/mp/modules/wx-reply/modules/types.ts
View File

2
apps/web-ele/src/views/mp/autoReply/modules/form.vue
View File

@@ -9,7 +9,7 @@ import { ElMessage } from 'element-plus';
import * as MpAutoReplyApi from '#/api/mp/autoReply';
import { $t } from '#/locales';
import { ReplyType } from '#/views/mp/modules/wx-reply/components/types';
import { ReplyType } from '#/views/mp/modules/wx-reply/modules/types';
import ReplyForm from './ReplyForm.vue';
import { MsgType } from './types';

43
apps/web-ele/src/views/mp/modules/wx-msg/main.vue
View File

@@ -19,7 +19,7 @@ import { getUser } from '#/api/mp/user';
import profile from '#/assets/imgs/profile.jpg';
import WxReplySelect, { ReplyType } from '#/views/mp/modules/wx-reply';
import MsgList from './components/MsgList.vue';
import MsgList from './modules/msg-list.vue';
defineOptions({ name: 'WxMsg' });
@@ -167,15 +167,22 @@ async function scrollToBottom() {
<template>
<ContentWrap>
<div class="msg-div" ref="msgDivRef">
<div
class="ml-[10px] mr-[10px] h-[50vh] overflow-auto bg-[#eaeaea]"
ref="msgDivRef"
>
<!-- 加载更多 -->
<div v-loading="loading"></div>
<div v-if="!loading">
<div class="el-table__empty-block" v-if="hasMore" @click="loadMore">
<span class="el-table__empty-text">点击加载更多</span>
<div
class="cursor-pointer py-5 text-center"
v-if="hasMore"
@click="loadMore"
>
<span class="text-[#999]">点击加载更多</span>
</div>
<div class="el-table__empty-block" v-if="!hasMore">
<span class="el-table__empty-text">没有更多了</span>
<div class="py-5 text-center" v-if="!hasMore">
<span class="text-[#999]">没有更多了</span>
</div>
</div>
@@ -183,31 +190,13 @@ async function scrollToBottom() {
<MsgList :list="list" :account-id="accountId" :user="user" />
</div>
<div class="msg-send" v-loading="sendLoading">
<div class="p-[10px]" v-loading="sendLoading">
<WxReplySelect ref="replySelectRef" v-model="reply" />
<el-button type="success" class="send-but" @click="sendMsg">
<el-button type="success" class="float-right mb-2 mt-2" @click="sendMsg">
发送(S)
</el-button>
</div>
</ContentWrap>
</template>
<style lang="scss" scoped>
.msg-div {
height: 50vh;
margin-right: 10px;
margin-left: 10px;
overflow: auto;
background-color: #eaeaea;
}
.msg-send {
padding: 10px;
}
.send-but {
float: right;
margin-top: 8px;
margin-bottom: 8px;
}
</style>
<style lang="scss" scoped></style>

0
apps/web-ele/src/views/mp/modules/wx-msg/components/MsgEvent.vue → apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-event.vue
View File

30
apps/web-ele/src/views/mp/modules/wx-msg/components/MsgList.vue → apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-list.vue
View File

@@ -5,7 +5,7 @@ import { formatDateTime } from '@vben/utils';
import avatarWechat from '#/assets/imgs/wechat.png';
import Msg from './Msg.vue';
import Msg from './msg.vue';
// 确保 User 类型被识别为已使用
type PropsUser = User;
@@ -37,25 +37,30 @@ const getNickname = (sendFrom: SendFromType) =>
sendFrom === UserValue ? props.user.nickname : '公众号';
</script>
<template>
<div class="execution" v-for="item in props.list" :key="item.id">
<div v-for="item in props.list" :key="item.id">
<div
class="avue-comment"
:class="{ 'avue-comment--reverse': item.sendFrom === MpBotValue }"
class="mb-[30px] flex items-start"
:class="{ 'flex-row-reverse': item.sendFrom === MpBotValue }"
>
<div class="avatar-div">
<img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
<div class="avue-comment__author">
<div class="w-20 text-center">
<img
:src="getAvatar(item.sendFrom)"
class="box-border h-12 w-12 rounded-full border border-transparent align-middle"
/>
<div class="text-sm font-bold text-[#999]">
{{ getNickname(item.sendFrom) }}
</div>
</div>
<div class="avue-comment__main">
<div class="avue-comment__header">
<div class="relative mx-5 flex-1 rounded-[5px] border border-[#dedede]">
<div
class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
>
<div class="avue-comment__create_time">
{{ formatDateTime(item.createTime) }}
</div>
</div>
<div
class="avue-comment__body"
class="overflow-hidden rounded-b-[5px] bg-white px-[15px] py-[15px] text-sm text-[#333]"
:style="item.sendFrom === MpBotValue ? 'background: #6BED72;' : ''"
>
<Msg :item="item" />
@@ -69,9 +74,4 @@ const getNickname = (sendFrom: SendFromType) =>
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
@import url('../comment.scss');
@import url('../card.scss');
.avatar-div {
width: 80px;
text-align: center;
}
</style>

19
apps/web-ele/src/views/mp/modules/wx-msg/components/Msg.vue → apps/web-ele/src/views/mp/modules/wx-msg/modules/msg.vue
View File

@@ -8,7 +8,7 @@ import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
import { MsgType } from '../types';
import MsgEvent from './MsgEvent.vue';
import MsgEvent from './msg-event.vue';
defineOptions({ name: 'Msg' });
@@ -31,29 +31,34 @@ const item = ref<any>(props.item);
<div v-else-if="item.type === MsgType.Image">
<a target="_blank" :href="item.mediaUrl">
<img :src="item.mediaUrl" style="width: 100px" />
<img :src="item.mediaUrl" class="w-[100px]" />
</a>
</div>
<div
v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
style="text-align: center"
class="text-center"
>
<WxVideoPlayer :url="item.mediaUrl" />
</div>
<div v-else-if="item.type === MsgType.Link" class="avue-card__detail">
<div v-else-if="item.type === MsgType.Link" class="flex-1">
<el-link
type="success"
:underline="false"
target="_blank"
:href="item.url"
>
<div class="avue-card__title">
<div
class="mb-3 text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]"
>
<i class="el-icon-link"></i>{{ item.title }}
</div>
</el-link>
<div class="avue-card__info" style="height: unset">
<div
class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
style="height: unset"
>
{{ item.description }}
</div>
</div>
@@ -66,7 +71,7 @@ const item = ref<any>(props.item);
/>
</div>
<div v-else-if="item.type === MsgType.News" style="width: 300px">
<div v-else-if="item.type === MsgType.News" class="w-[300px]">
<WxNews :articles="item.articles" />
</div>

6
apps/web-ele/src/views/mp/modules/wx-reply/index.ts
View File

@@ -1,8 +1,8 @@
export { default } from './main.vue';
export {
createEmptyReply,
NewsType,
type Reply,
ReplyType,
} from './components/types';
export { default } from './main.vue';
} from './modules/types';

97
apps/web-ele/src/views/mp/modules/wx-reply/main.vue
View File

@@ -8,7 +8,7 @@
④ 支持发送【视频】消息时，支持新建视频
-->
<script lang="ts" setup>
import type { Reply } from './components/types';
import type { Reply } from './modules/types';
import { computed, ref, unref, watch } from 'vue';
@@ -16,13 +16,13 @@ import { IconifyIcon } from '@vben/icons';
import { ElRow, ElTabPane, ElTabs } from 'element-plus';
import TabImage from './components/TabImage.vue';
import TabMusic from './components/TabMusic.vue';
import TabNews from './components/TabNews.vue';
import TabText from './components/TabText.vue';
import TabVideo from './components/TabVideo.vue';
import TabVoice from './components/TabVoice.vue';
import { createEmptyReply, NewsType, ReplyType } from './components/types';
import TabImage from './modules/tab-image.vue';
import TabMusic from './modules/tab-music.vue';
import TabNews from './modules/tab-news.vue';
import TabText from './modules/tab-text.vue';
import TabVideo from './modules/tab-video.vue';
import TabVoice from './modules/tab-voice.vue';
import { createEmptyReply, NewsType, ReplyType } from './modules/types';
defineOptions({ name: 'WxReplySelect' });
@@ -137,83 +137,4 @@ defineExpose({
</ElTabs>
</template>
<style lang="scss" scoped>
.select-item {
width: 280px;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
}
.select-item2 {
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
}
.ope-row {
padding-top: 10px;
text-align: center;
}
.input-margin-bottom {
margin-bottom: 2%;
}
.item-name {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
text-align: center;
white-space: nowrap;
}
.el-form-item__content {
line-height: unset !important;
}
.col-select {
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
}
.col-select2 {
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
}
.col-add {
float: right;
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
}
.avatar-uploader-icon {
width: 100px !important;
height: 100px !important;
font-size: 28px;
line-height: 100px !important;
color: #8c939d;
text-align: center;
border: 1px solid #d9d9d9;
}
.material-img {
width: 100%;
}
.thumb-div {
display: inline-block;
text-align: center;
}
.item-infos {
width: 30%;
margin: auto;
}
</style>
<style lang="scss" scoped></style>

81
apps/web-ele/src/views/mp/modules/wx-reply/components/TabImage.vue → apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-image.vue
View File

@@ -88,19 +88,30 @@ function selectMaterial(item: any) {
<template>
<div>
<!-- 情况一：已经选择好素材、或者上传好图片 -->
<div class="select-item" v-if="reply.url">
<img class="material-img" :src="reply.url" />
<p class="item-name" v-if="reply.name">{{ reply.name }}</p>
<ElRow class="ope-row" justify="center">
<div
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
v-if="reply.url"
>
<img class="w-full" :src="reply.url" />
<p
class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
v-if="reply.name"
>
{{ reply.name }}
</p>
<ElRow class="pt-[10px] text-center" justify="center">
<ElButton type="danger" circle @click="onDelete">
<IconifyIcon icon="ep:delete" />
</ElButton>
</ElRow>
</div>
<!-- 情况二：未做完上述操作 -->
<ElRow v-else style="text-align: center" align="middle">
<ElRow v-else class="text-center" align="middle">
<!-- 选择素材 -->
<ElCol :span="12" class="col-select">
<ElCol
:span="12"
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" />
</ElButton>
@@ -119,7 +130,10 @@ function selectMaterial(item: any) {
</ElDialog>
</ElCol>
<!-- 文件上传 -->
<ElCol :span="12" class="col-add">
<ElCol
:span="12"
class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
>
<ElUpload
:action="UPLOAD_URL"
:headers="HEADERS"
@@ -133,7 +147,7 @@ function selectMaterial(item: any) {
<ElButton type="primary">上传图片</ElButton>
<template #tip>
<span>
<div class="el-upload__tip">
<div class="text-center leading-[18px]">
支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
</div>
</span>
@@ -144,53 +158,4 @@ function selectMaterial(item: any) {
</div>
</template>
<style lang="scss" scoped>
.select-item {
width: 280px;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
.material-img {
width: 100%;
}
.item-name {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
text-align: center;
white-space: nowrap;
.item-infos {
width: 30%;
margin: auto;
}
.ope-row {
padding-top: 10px;
text-align: center;
}
}
.col-select {
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
}
.col-add {
float: right;
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
.el-upload__tip {
line-height: 18px;
text-align: center;
}
}
}
</style>
<style lang="scss" scoped></style>

16
apps/web-ele/src/views/mp/modules/wx-reply/components/TabMusic.vue → apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-music.vue
View File

@@ -84,18 +84,18 @@ function selectMaterial(item: any) {
<div>
<ElRow align="middle" justify="center">
<ElCol :span="6">
<ElRow align="middle" justify="center" class="thumb-div">
<ElRow align="middle" justify="center" class="inline-block text-center">
<ElCol :span="24">
<ElRow align="middle" justify="center">
<img
style="width: 100px"
class="w-[100px]"
v-if="reply.thumbMediaUrl"
:src="reply.thumbMediaUrl"
/>
<IconifyIcon v-else icon="ep:plus" />
</ElRow>
<ElRow align="middle" justify="center" style="margin-top: 2%">
<div class="thumb-but">
<ElRow align="middle" justify="center" class="mt-[2%]">
<div>
<ElUpload
:action="UPLOAD_URL"
:headers="HEADERS"
@@ -113,7 +113,7 @@ function selectMaterial(item: any) {
type="primary"
link
@click="showDialog = true"
style="margin-left: 5px"
class="ml-[5px]"
>
素材库选择
</ElButton>
@@ -138,13 +138,13 @@ function selectMaterial(item: any) {
</ElCol>
<ElCol :span="18">
<ElInput v-model="reply.title" placeholder="请输入标题" />
<div style="margin: 20px 0"></div>
<div class="my-5"></div>
<ElInput v-model="reply.description" placeholder="请输入描述" />
</ElCol>
</ElRow>
<div style="margin: 20px 0"></div>
<div class="my-5"></div>
<ElInput v-model="reply.musicUrl" placeholder="请输入音乐链接" />
<div style="margin: 20px 0"></div>
<div class="my-5"></div>
<ElInput v-model="reply.hqMusicUrl" placeholder="请输入高质量音乐链接" />
</div>
</template>

20
apps/web-ele/src/views/mp/modules/wx-reply/components/TabNews.vue → apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-news.vue
View File

@@ -42,11 +42,11 @@ function onDelete() {
<div>
<ElRow>
<div
class="select-item"
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
v-if="reply.articles && reply.articles.length > 0"
>
<WxNews :articles="reply.articles" />
<ElCol class="ope-row">
<ElCol class="pt-[10px] text-center">
<ElButton type="danger" circle @click="onDelete">
<IconifyIcon icon="ep:delete" />
</ElButton>
@@ -54,7 +54,7 @@ function onDelete() {
</div>
<!-- 选择素材 -->
<ElCol :span="24" v-if="!reply.content">
<ElRow style="text-align: center" align="middle">
<ElRow class="text-center" align="middle">
<ElCol :span="24">
<ElButton type="success" @click="showDialog = true">
{{
@@ -85,16 +85,4 @@ function onDelete() {
</div>
</template>
<style lang="scss" scoped>
.select-item {
width: 280px;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
.ope-row {
padding-top: 10px;
text-align: center;
}
}
</style>
<style lang="scss" scoped></style>

1
apps/web-ele/src/views/mp/modules/wx-reply/components/TabText.vue → apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-text.vue
View File

@@ -27,5 +27,6 @@ const content = computed({
:rows="5"
placeholder="请输入内容"
v-model="content"
class="w-full"
/>
</template>

24
apps/web-ele/src/views/mp/modules/wx-reply/components/TabVideo.vue → apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-video.vue
View File

@@ -90,21 +90,17 @@ function selectMaterial(item: any) {
<template>
<div>
<ElRow>
<ElInput v-model="reply.title" class="mb-[2%]" placeholder="请输入标题" />
<ElInput
v-model="reply.title"
class="input-margin-bottom"
placeholder="请输入标题"
/>
<ElInput
class="input-margin-bottom"
class="mb-[2%]"
v-model="reply.description"
placeholder="请输入描述"
/>
<ElRow class="ope-row" justify="center">
<ElRow class="w-full pt-[10px] text-center" justify="center">
<WxVideoPlayer v-if="reply.url" :url="reply.url" />
</ElRow>
<ElCol>
<ElRow style="text-align: center" align="middle">
<ElRow class="text-center" align="middle">
<!-- 选择素材 -->
<ElCol :span="12">
<ElButton type="success" @click="showDialog = true">
@@ -147,14 +143,4 @@ function selectMaterial(item: any) {
</div>
</template>
<style lang="scss" scoped>
.input-margin-bottom {
margin-bottom: 2%;
}
.ope-row {
width: 100%;
padding-top: 10px;
text-align: center;
}
</style>
<style lang="scss" scoped></style>

71
apps/web-ele/src/views/mp/modules/wx-reply/components/TabVoice.vue → apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-voice.vue
View File

@@ -89,20 +89,30 @@ function selectMaterial(item: Reply) {
</script>
<template>
<div>
<div class="select-item2" v-if="reply.url">
<p class="item-name">{{ reply.name }}</p>
<ElRow class="ope-row" justify="center">
<div
class="mx-auto mb-[10px] border border-[#eaeaea] p-[10px]"
v-if="reply.url"
>
<p
class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
>
{{ reply.name }}
</p>
<ElRow class="w-full pt-[10px] text-center" justify="center">
<WxVoicePlayer :url="reply.url" />
</ElRow>
<ElRow class="ope-row" justify="center">
<ElRow class="w-full pt-[10px] text-center" justify="center">
<ElButton type="danger" circle @click="onDelete">
<IconifyIcon icon="ep:delete" />
</ElButton>
</ElRow>
</div>
<ElRow v-else style="text-align: center">
<ElRow v-else class="text-center">
<!-- 选择素材 -->
<ElCol :span="12" class="col-select">
<ElCol
:span="12"
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" />
</ElButton>
@@ -121,7 +131,10 @@ function selectMaterial(item: Reply) {
</ElDialog>
</ElCol>
<!-- 文件上传 -->
<ElCol :span="12" class="col-add">
<ElCol
:span="12"
class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
>
<ElUpload
:action="UPLOAD_URL"
:headers="HEADERS"
@@ -134,7 +147,7 @@ function selectMaterial(item: Reply) {
>
<ElButton type="primary">点击上传</ElButton>
<template #tip>
<div class="el-upload__tip">
<div class="text-center leading-[18px]">
格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
</div>
</template>
@@ -144,44 +157,4 @@ function selectMaterial(item: Reply) {
</div>
</template>
<style lang="scss" scoped>
.select-item2 {
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
.item-name {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
text-align: center;
white-space: nowrap;
.ope-row {
width: 100%;
padding-top: 10px;
text-align: center;
}
}
.col-select {
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
}
.col-add {
float: right;
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
.el-upload__tip {
line-height: 18px;
text-align: center;
}
}
}
</style>
<style lang="scss" scoped></style>

0
apps/web-ele/src/views/mp/modules/wx-reply/components/types.ts → apps/web-ele/src/views/mp/modules/wx-reply/modules/types.ts
View File