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

fix: 图文草稿箱样式调整、todo修复

Browse Source
This commit is contained in:
hw
2025-11-26 10:46:24 +08:00
parent eb27bd5c6d
commit c014f2a188
10 changed files with 88 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/package.json
View File

@@ -18,7 +18,7 @@
"scripts": {
"build": "pnpm vite build --mode production",
"build:analyze": "pnpm vite build --mode analyze",
"dev": "pnpm vite --mode development",
"dev": "pnpm vite --mode .local",
"preview": "vite preview",
"typecheck": "vue-tsc --noEmit --skipLibCheck"
},

2
apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
View File

@@ -7,8 +7,6 @@ import { Typography } from 'ant-design-vue';
/** 微信消息 - 音乐 */
defineOptions({ name: 'WxMusic' });
// TODO @hw：antd 和 ele 的代码风格不一致，例如说：props；
const props = withDefaults(defineProps<WxMusicProps>(), {
title: '',
description: '',

29
apps/web-antd/src/views/mp/draft/modules/news-form.vue
View File

@@ -86,7 +86,6 @@ function plusNews() {
<Layout>
<Layout.Sider width="40%" theme="light">
<div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
<!-- TODO @hw：头条、次条的展示不对。微信聊过的呀~ -->
<div v-for="(news, index) in newsList" :key="index">
<div
class="group relative mx-auto mb-[10px] w-full cursor-pointer border-[2px] bg-white"
@@ -99,15 +98,18 @@ function plusNews() {
@click="activeNewsIndex = index"
>
<div class="relative w-full bg-[#acadae]">
<img class="h-full w-full" :src="news.thumbUrl" />
<img
class="max-h-[200px] min-h-[100px] w-full object-cover"
:src="news.thumbUrl"
/>
<div
class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
class="absolute bottom-0 left-0 mb-[5px] ml-[5px] inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap p-[1%] text-[18px] text-white"
>
{{ news.title }}
</div>
</div>
<div
class="relative flex justify-center gap-[10px] py-[5px] text-center"
class="absolute bottom-0 right-[-45px] top-0 flex flex-col justify-center gap-[10px] py-[5px] text-center"
v-if="newsList.length > 1"
>
<Button
@@ -140,18 +142,19 @@ function plusNews() {
"
@click="activeNewsIndex = index"
>
<div class="relative">
<div class="bg-[#acadae]">
<img class="block h-full w-full" :src="news.thumbUrl" />
<div
class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
>
{{ news.title }}
</div>
<div class="relative flex items-center justify-between">
<div
class="mb-[5px] ml-[5px] h-[25px] flex-1 overflow-hidden text-ellipsis whitespace-nowrap p-[1%] text-[16px]"
>
{{ news.title }}
</div>
<img
class="block h-[90px] w-[90px] object-cover"
:src="news.thumbUrl"
/>
</div>
<div
class="relative flex justify-center gap-[10px] py-[5px] text-center"
class="absolute bottom-0 right-[-45px] top-0 flex flex-col justify-center gap-[10px] py-[5px] text-center"
>
<Button
v-if="newsList.length > index + 1"

2
apps/web-ele/package.json
View File

@@ -18,7 +18,7 @@
"scripts": {
"build": "pnpm vite build --mode production",
"build:analyze": "pnpm vite build --mode analyze",
"dev": "pnpm vite --mode development",
"dev": "pnpm vite --mode .local",
"preview": "vite preview",
"typecheck": "vue-tsc --noEmit --skipLibCheck"
},

16
apps/web-ele/src/views/mp/components/wx-msg/msg.vue
View File

@@ -1,6 +1,4 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { MpMsgType } from '@vben/constants';
import Location from '#/views/mp/components/wx-location/wx-location.vue';
@@ -11,14 +9,16 @@ import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
import MsgEvent from './msg-event.vue';
// TODO @hw：antd 和 ele 保持一致；例如说：1）props；2）WxVoicePlayer 这种；
defineOptions({ name: 'Msg' });
const props = defineProps<{
item: any;
}>();
const item = ref<any>(props.item);
withDefaults(
defineProps<{
item?: any;
}>(),
{
item: {},
},
);
</script>
<template>

7
apps/web-ele/src/views/mp/components/wx-music/types.ts Normal file
View File

@@ -0,0 +1,7 @@
export interface WxMusicProps {
title?: string;
description?: string;
musicUrl?: string;
hqMusicUrl?: string;
thumbMediaUrl: string;
}

43
apps/web-ele/src/views/mp/components/wx-music/wx-music.vue
View File

@@ -1,37 +1,22 @@
<script lang="ts" setup>
import type { WxMusicProps } from './types';
import { computed } from 'vue';
import { ElLink } from 'element-plus';
/** 微信消息 - 音乐 */
defineOptions({ name: 'Music' });
// TODO @hw：antd 和 ele 的代码风格不一致，例如说：props；
defineOptions({ name: 'WxMusic' });
const props = defineProps({
title: {
required: false,
type: String,
default: '',
},
description: {
required: false,
type: String,
default: '',
},
musicUrl: {
required: false,
type: String,
default: '',
},
hqMusicUrl: {
required: false,
type: String,
default: '',
},
thumbMediaUrl: {
required: true,
type: String,
},
const props = withDefaults(defineProps<WxMusicProps>(), {
title: '',
description: '',
musicUrl: '',
hqMusicUrl: '',
thumbMediaUrl: '',
});
const href = computed(() => props.hqMusicUrl || props.musicUrl);
defineExpose({
musicUrl: props.musicUrl,
});
@@ -43,7 +28,7 @@ defineExpose({
type="success"
:underline="false"
target="_blank"
:href="hqMusicUrl ? hqMusicUrl : musicUrl"
:href="href"
class="block"
>
<div

84
apps/web-ele/src/views/mp/components/wx-news/wx-news.vue
View File

@@ -17,18 +17,21 @@ defineExpose({
</script>
<template>
<div class="news-home">
<div class="mx-auto flex w-full flex-col gap-[10px] bg-white">
<div v-for="(article, index) in articles" :key="index" class="news-div">
<!-- 头条 -->
<a v-if="index === 0" :href="article.url" target="_blank">
<div class="news-main">
<div class="news-content">
<div class="mx-auto w-full">
<div class="relative w-full bg-[#acadae]">
<img
:src="article.picUrl"
:preview="false"
class="material-img flex w-[100px] items-center justify-center"
class="flex w-[100%] items-center justify-center object-cover"
/>
<div class="news-content-title">
<div
class="absolute bottom-0 left-0 ml-[10px] inline-block w-[98%] whitespace-normal p-[1%] text-base text-white"
style="box-sizing: unset !important"
>
<span>{{ article.title }}</span>
</div>
</div>
@@ -36,10 +39,10 @@ defineExpose({
</a>
<!-- 二条/三条等等 -->
<a v-else :href="article.url" target="_blank">
<div class="news-main-item">
<div class="news-content-item">
<div class="news-content-item-img">
<div class="news-content-item-title">{{ article.title }}</div>
<div class="bg-white">
<div class="relative box-border p-[10px]">
<div class="flex items-center">
<div class="flex-1 text-sm">{{ article.title }}</div>
<img
:src="article.picUrl"
@@ -53,66 +56,3 @@ defineExpose({
</div>
</div>
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.news-home {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin: auto;
background-color: #fff;
}
.news-main {
width: 100%;
margin: auto;
}
.news-content {
position: relative;
width: 100%;
background-color: #acadae;
}
.news-content-title {
position: absolute;
bottom: 0;
left: 0;
box-sizing: unset !important;
display: inline-block;
width: 98%;
padding: 1%;
margin-left: 10px;
font-size: 16px;
color: #fff;
white-space: normal;
}
.news-main-item {
background-color: #fff;
}
.news-content-item {
position: relative;
box-sizing: border-box;
padding: 10px;
}
.news-content-item-title {
flex: 1;
font-size: 14px;
}
.news-content-item-img {
display: flex;
align-items: center;
}
.material-img {
width: auto;
object-fit: cover;
}
</style>

32
apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue
View File

@@ -5,6 +5,7 @@ import { IconifyIcon } from '@vben/icons';
// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
import BenzAMRRecorder from 'benz-amr-recorder';
import { ElTag } from 'element-plus';
/** 微信消息 - 语音 */
defineOptions({ name: 'WxVoicePlayer' });
@@ -67,37 +68,22 @@ function amrStop() {
</script>
<template>
<div class="wx-voice-div" @click="playVoice">
<el-icon>
<div
class="flex min-h-[50px] min-w-[120px] flex-col items-center justify-center rounded-[10px] bg-[#eaeaea] px-3 py-2"
@click="playVoice"
>
<div class="flex items-center">
<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>
<span class="ml-2 text-xs" v-if="duration">{{ duration }} 秒</span>
</div>
<div v-if="content">
<el-tag type="success" size="small">语音识别</el-tag>
<ElTag type="success" size="small">语音识别</ElTag>
{{ content }}
</div>
</div>
</template>
<style lang="scss" scoped>
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
.wx-voice-div {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 50px;
padding: 5px;
background-color: #eaeaea;
border-radius: 10px;
}
.amr-duration {
margin-left: 5px;
font-size: 11px;
}
</style>

33
apps/web-ele/src/views/mp/draft/modules/news-form.vue
View File

@@ -106,15 +106,18 @@ function plusNews() {
@click="activeNewsIndex = index"
>
<div class="relative w-full bg-[#acadae]">
<img class="h-full w-full" :src="news.thumbUrl" />
<img
class="max-h-[200px] min-h-[100px] w-full object-cover"
:src="news.thumbUrl"
/>
<div
class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
class="absolute bottom-0 left-0 mb-[5px] ml-[5px] inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap p-[1%] text-[18px] text-white"
>
{{ news.title }}
</div>
</div>
<div
class="relative flex justify-center gap-[10px] py-[5px] text-center"
class="absolute bottom-0 right-[-45px] top-0 flex flex-col justify-center gap-[10px] py-[5px] text-center"
v-if="newsList.length > 1"
>
<ElButton
@@ -130,6 +133,7 @@ function plusNews() {
type="danger"
circle
size="small"
style="margin-left: 0"
@click="() => removeNews(index)"
>
<IconifyIcon icon="lucide:trash-2" />
@@ -146,25 +150,26 @@ function plusNews() {
"
@click="activeNewsIndex = index"
>
<div class="relative">
<div class="bg-[#acadae]">
<img class="block h-full w-full" :src="news.thumbUrl" />
<div
class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
>
{{ news.title }}
</div>
<div class="relative flex items-center justify-between">
<div
class="mb-[5px] ml-[5px] h-[25px] flex-1 overflow-hidden text-ellipsis whitespace-nowrap p-[1%] text-[16px]"
>
{{ news.title }}
</div>
<img
class="block h-[90px] w-[90px] object-cover"
:src="news.thumbUrl"
/>
</div>
<div
class="relative flex justify-center gap-[10px] py-[5px] text-center"
class="absolute bottom-0 right-[-45px] top-0 flex flex-col justify-center gap-[10px] py-[5px] text-center"
>
<ElButton
v-if="newsList.length > index + 1"
circle
type="info"
size="small"
class="ml-0"
@click="() => moveDownNews(index)"
>
<IconifyIcon icon="lucide:arrow-down" />
@@ -174,6 +179,7 @@ function plusNews() {
type="info"
circle
size="small"
style="margin-left: 0"
@click="() => moveUpNews(index)"
>
<IconifyIcon icon="lucide:arrow-up" />
@@ -183,6 +189,7 @@ function plusNews() {
type="danger"
size="small"
circle
style="margin-left: 0"
@click="() => removeNews(index)"
>
<IconifyIcon icon="lucide:trash-2" />