XW-AIOT/iot-device-management-frontend
4
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: resolve todo

Browse Source
This commit is contained in:
dylanmay
2025-11-27 09:55:24 +08:00
parent eb27bd5c6d
commit 5374e64bcb
33 changed files with 718 additions and 1001 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,10 +104,18 @@ function selectMaterial(item: any) {
<template>
<div>
<!-- 情况一：已经选择好素材、或者上传好图片 -->
<div v-if="reply.url" class="select-item">
<img class="material-img" :src="reply.url" alt="图片素材" />
<p v-if="reply.name" class="item-name">{{ reply.name }}</p>
<Row class="ope-row" justify="center">
<div
v-if="reply.url"
class="mx-auto mb-[10px] border border-[#eaeaea] p-[10px]"
>
<img class="w-full" :src="reply.url" alt="图片素材" />
<p
v-if="reply.name"
class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
>
{{ reply.name }}
</p>
<Row class="pt-[10px] text-center" justify="center">
<Button danger shape="circle" @click="onDelete">
<template #icon>
<IconifyIcon icon="lucide:trash-2" />
@@ -119,7 +127,10 @@ function selectMaterial(item: any) {
<!-- 情况二：未做完上述操作 -->
<Row v-else class="text-center" align="middle">
<!-- 选择素材 -->
<Col :span="12" class="col-select">
<Col
:span="12"
class="flex h-[160px] w-[49.5%] flex-col items-center justify-center border border-[#eaeaea] py-[50px]"
>
<Button type="primary" @click="showDialog = true">
素材库选择
<template #icon>
@@ -142,7 +153,10 @@ function selectMaterial(item: any) {
</Col>
<!-- 文件上传 -->
<Col :span="12" class="col-add">
<Col
:span="12"
class="float-right flex h-[160px] w-[49.5%] flex-col items-center justify-center border border-[#eaeaea] py-[50px]"
>
<Upload
:custom-request="customRequest"
:multiple="true"
@@ -158,65 +172,10 @@ function selectMaterial(item: any) {
</template>
</Button>
</Upload>
<div class="upload-tip">
<div class="mt-2 text-center text-xs leading-[18px] text-[#666]">
支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
</div>
</Col>
</Row>
</div>
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.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;
}
.ope-row {
padding-top: 10px;
text-align: center;
}
.col-select,
.col-add {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
}
.col-select {
width: 49.5%;
}
.col-add {
float: right;
width: 49.5%;
}
.upload-tip {
margin-top: 8px;
font-size: 12px;
line-height: 18px;
color: #666;
text-align: center;
}
</style>

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

@@ -105,13 +105,15 @@ function selectMaterial(item: any) {
<div>
<Row align="middle" justify="center">
<Col :span="6">
<div class="thumb-container">
<div class="thumb-preview">
<div class="flex flex-col items-center gap-2">
<div
class="flex h-[100px] w-[100px] items-center justify-center rounded border border-[#d9d9d9]"
>
<img
v-if="reply.thumbMediaUrl"
:src="reply.thumbMediaUrl"
alt="音乐封面"
class="thumb-img"
class="h-full w-full object-cover"
/>
<IconifyIcon
v-else
@@ -120,7 +122,7 @@ function selectMaterial(item: any) {
class="text-gray-400"
/>
</div>
<div class="thumb-actions">
<div class="flex items-center justify-center">
<Upload
:custom-request="customRequest"
:multiple="true"
@@ -136,10 +138,9 @@ function selectMaterial(item: any) {
</Button>
</div>
</div>
<!-- TODO @dylan：这里应该不是图片哇？ -->
<Modal
v-model:open="showDialog"
title="选择图片"
title="选择封面图"
:width="1200"
:footer="null"
destroy-on-close
@@ -152,8 +153,7 @@ function selectMaterial(item: any) {
</Modal>
</Col>
<Col :span="18">
<!-- TODO @dylan：input 两个之间的间距可以调整下。现在和左侧的图片，距离有点远了。 -->
<div class="input-group">
<div class="flex flex-col gap-4">
<Input
:value="reply.title || undefined"
placeholder="请输入标题"
@@ -183,41 +183,3 @@ function selectMaterial(item: any) {
</div>
</div>
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.thumb-container {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.thumb-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
.thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumb-actions {
display: flex;
align-items: center;
justify-content: center;
}
.input-group {
display: flex;
flex-direction: column;
gap: 20px;
}
</style>

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

@@ -45,10 +45,10 @@ function onDelete() {
<Row>
<div
v-if="reply.articles && reply.articles.length > 0"
class="select-item"
class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
>
<WxNews :articles="reply.articles" />
<Col class="ope-row">
<Col class="pt-[10px] text-center">
<Button danger shape="circle" @click="onDelete">
<template #icon>
<IconifyIcon icon="lucide:trash-2" />
@@ -91,18 +91,3 @@ function onDelete() {
</Row>
</div>
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.select-item {
width: 280px;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
}
.ope-row {
padding-top: 10px;
text-align: center;
}
</style>

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

@@ -130,7 +130,7 @@ function selectMaterial(item: any) {
/>
</Col>
<Col :span="24">
<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>
@@ -182,12 +182,3 @@ function selectMaterial(item: any) {
</Row>
</div>
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.ope-row {
width: 100%;
padding-top: 10px;
text-align: center;
}
</style>

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

@@ -105,12 +105,19 @@ function selectMaterial(item: Reply) {
<template>
<div>
<div v-if="reply.url" class="select-item">
<p class="item-name">{{ reply.name }}</p>
<Row class="ope-row" justify="center">
<div
v-if="reply.url"
class="mx-auto mb-[10px] border border-[#eaeaea] p-[10px]"
>
<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 danger shape="circle" @click="onDelete">
<template #icon>
<IconifyIcon icon="lucide:trash-2" />
@@ -121,7 +128,10 @@ function selectMaterial(item: Reply) {
<Row v-else class="text-center">
<!-- 选择素材 -->
<Col :span="12" class="col-select">
<Col
:span="12"
class="flex h-[160px] w-[49.5%] flex-col items-center justify-center border border-[#eaeaea] py-[50px]"
>
<Button type="primary" @click="showDialog = true">
素材库选择
<template #icon>
@@ -144,7 +154,10 @@ function selectMaterial(item: Reply) {
</Col>
<!-- 文件上传 -->
<Col :span="12" class="col-add">
<Col
:span="12"
class="float-right flex h-[160px] w-[49.5%] flex-col items-center justify-center border border-[#eaeaea] py-[50px]"
>
<Upload
:custom-request="customRequest"
:multiple="true"
@@ -160,61 +173,10 @@ function selectMaterial(item: Reply) {
</template>
</Button>
</Upload>
<div class="upload-tip">
<div class="mt-2 text-center text-xs leading-[18px] text-[#666]">
格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
</div>
</Col>
</Row>
</div>
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.select-item {
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,
.col-add {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
}
.col-select {
width: 49.5%;
}
.col-add {
float: right;
width: 49.5%;
}
.upload-tip {
margin-top: 8px;
font-size: 12px;
line-height: 18px;
color: #666;
text-align: center;
}
</style>

82
apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
View File

@@ -181,85 +181,3 @@ defineExpose({
</Tabs.TabPane>
</Tabs>
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.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>