oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 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

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>