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