ZF/yudao-ui-admin-vben
1
0
Fork 0
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git synced 2025-12-30 02:22:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat：【antd/ele】【mp】图文草稿箱的 review

Browse Source
This commit is contained in:
YunaiV
2025-11-23 20:52:13 +08:00
parent 97e337ef16
commit 5622b810e4
13 changed files with 79 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/api/mp/account/index.ts
View File

@@ -68,5 +68,5 @@ export function generateAccountQrCode(id: number) {
/** 清空公众号账号 API 配额 */
export function clearAccountQuota(id: number) {
return requestClient.post(`/mp/account/clear-quota?id=${id}`);
return requestClient.put(`/mp/account/clear-quota?id=${id}`);
}

1
apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
View File

@@ -22,6 +22,7 @@ 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">

31
apps/web-antd/src/views/mp/draft/index.vue
View File

@@ -5,11 +5,10 @@ import type { MpDraftApi } from '#/api/mp/draft';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { message } from 'ant-design-vue';
import { Image, message, Typography } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { createEmptyNewsItem, deleteDraft, getDraftPage } from '#/api/mp/draft';
// import { getDraftPage } from '#/api/mp/draft'; // 调试时注释掉
import { submitFreePublish } from '#/api/mp/freePublish';
import { WxAccountSelect } from '#/views/mp/components';
@@ -72,7 +71,6 @@ async function handleDelete(row: MpDraftApi.DraftArticle) {
message.warning('请先选择公众号');
return;
}
await confirm('此操作将永久删除该草稿, 是否继续?');
const hideLoading = message.loading({
content: '删除中...',
duration: 0,
@@ -128,7 +126,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
// 调试用：跳过请求，直接返回模拟数据
const drafts = await getDraftPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
@@ -143,10 +140,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
});
}
});
return {
list: drafts.list,
total: drafts.total, // 模拟总数
total: drafts.total,
};
},
},
@@ -194,18 +190,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
v-if="row.content?.newsItem && row.content.newsItem.length > 0"
class="flex flex-col items-center justify-center gap-1"
>
<a
<Image
v-for="(item, index) in row.content.newsItem"
:key="index"
:href="(item as any).url"
target="_blank"
>
<img
:src="item.picUrl || item.thumbUrl"
class="h-36 w-[50px] rounded object-cover"
:alt="`文章${index + 1}封面图`"
/>
</a>
:src="item.picUrl || item.thumbUrl"
class="h-36 !w-[300px] rounded object-cover"
:alt="`文章 ${index + 1} 封面图`"
/>
</div>
<span v-else class="text-gray-400">-</span>
</template>
@@ -219,7 +210,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
:key="index"
class="flex h-36 items-center justify-center"
>
{{ item.title }}
<Typography.Link :href="(item as any).url" target="_blank">
{{ item.title }}
</Typography.Link>
</div>
</div>
<span v-else class="text-gray-400">-</span>
@@ -266,10 +259,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
.vxe-cell {
height: auto !important;
padding: 0;
img {
width: 300px !important;
}
}
}
}

5
apps/web-antd/src/views/mp/draft/modules/cover-select.vue
View File

@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import WxMaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
import { WxMaterialSelect } from '#/views/mp/components/';
const props = defineProps<{
isFirst: boolean;
@@ -33,9 +33,8 @@ const newsItem = computed<MpDraftApi.NewsItem>({
},
});
const dialogVisible = ref(false);
const accountId = inject<number>('accountId');
const dialogVisible = ref(false);
const fileList = ref<UploadFile[]>([]);
interface UploadData {

2
apps/web-ele/src/api/mp/account/index.ts
View File

@@ -68,5 +68,5 @@ export function generateAccountQrCode(id: number) {
/** 清空公众号账号 API 配额 */
export function clearAccountQuota(id: number) {
return requestClient.post(`/mp/account/clear-quota?id=${id}`);
return requestClient.put(`/mp/account/clear-quota?id=${id}`);
}

5
apps/web-ele/src/views/mp/components/wx-account-select/wx-account-select.vue
View File

@@ -70,8 +70,3 @@ onMounted(handleQuery);
/>
</ElSelect>
</template>
<style lang="scss" scoped>
:deep(.el-select__wrapper) {
width: 240px !important;
}
</style>

2
apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
View File

@@ -1,5 +1,5 @@
<!--
【微信消息 - 定位】TODO @Dhb52 目前未启用；；；；@hw：看看目前是不是没用起来哈？
【微信消息 - 定位】TODO @Dhb52 目前未启用；；；；@dylan：看看目前是不是没用起来哈？
-->
<script lang="ts" setup>
import type { WxLocationProps } from './types';

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

@@ -1,10 +1,3 @@
<!--
- Copyright (C) 2018-2019
- All rights reserved, Designed By www.joolun.com
【微信消息 - 图文】
芋道源码：
① 代码优化，补充注释，提升阅读性
-->
<script lang="ts" setup>
import { ElImage } from 'element-plus';
@@ -29,6 +22,7 @@ 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 flex items-center justify-center">

22
apps/web-ele/src/views/mp/draft/data.ts
View File

@@ -1,14 +1,28 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { formatDateTime } from '@vben/utils';
/** 获取表格列配置 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'content',
title: '图文内容',
minWidth: 300,
slots: { default: 'content' },
field: 'cover',
title: '图片',
width: 360,
slots: { default: 'cover' },
},
{
field: 'title',
title: '标题',
slots: { default: 'title' },
},
{
field: 'updateTime',
title: '修改时间',
formatter: ({ row }) => {
return formatDateTime(row.updateTime * 1000);
},
},
{
title: '操作',

59
apps/web-ele/src/views/mp/draft/index.vue
View File

@@ -2,18 +2,17 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MpDraftApi } from '#/api/mp/draft';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
import { ElImage, ElLink, ElLoading, ElMessage } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteDraft, getDraftPage } from '#/api/mp/draft';
import { createEmptyNewsItem, deleteDraft, getDraftPage } from '#/api/mp/draft';
import { submitFreePublish } from '#/api/mp/freePublish';
import { WxAccountSelect } from '#/views/mp/components';
import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
import { useGridColumns, useGridFormSchema } from './data';
import DraftTableCell from './modules/draft-table.vue';
import Form from './modules/form.vue';
defineOptions({ name: 'MpDraft' });
@@ -72,7 +71,6 @@ async function handleDelete(row: MpDraftApi.DraftArticle) {
ElMessage.warning('请先选择公众号');
return;
}
await ElMessageBox.confirm('此操作将永久删除该草稿, 是否继续?');
const hideLoading = ElLoading.service({
text: '删除中...',
});
@@ -93,7 +91,7 @@ async function handlePublish(row: MpDraftApi.DraftArticle) {
ElMessage.warning('请先选择公众号');
return;
}
await ElMessageBox.confirm(
await confirm(
'你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。' +
'已发布内容不会推送给用户，也不会展示在公众号主页中。 ' +
'发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。',
@@ -126,7 +124,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
// 调试用：跳过请求，直接返回模拟数据
const drafts = await getDraftPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
@@ -141,13 +138,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
});
}
});
// 模拟数据
// const mockList = [
return {
list: drafts.list,
total: drafts.total, // 模拟总数
total: drafts.total,
};
},
},
@@ -190,15 +183,45 @@ const [Grid, gridApi] = useVbenVxeGrid({
]"
/>
</template>
<template #content="{ row }">
<DraftTableCell :row="row" />
<template #cover="{ row }">
<div
v-if="row.content?.newsItem && row.content.newsItem.length > 0"
class="flex flex-col items-center justify-center gap-1"
>
<ElImage
v-for="(item, index) in row.content.newsItem"
:key="index"
:src="item.picUrl || item.thumbUrl"
:preview-src-list="[item.picUrl || item.thumbUrl]"
class="h-36 !w-[300px] rounded object-cover"
:alt="`文章 ${index + 1} 封面图`"
/>
</div>
<span v-else class="text-gray-400">-</span>
</template>
<template #title="{ row }">
<div
v-if="row.content?.newsItem && row.content.newsItem.length > 0"
class="space-y-1"
>
<div
v-for="(item, index) in row.content.newsItem"
:key="index"
class="flex h-36 items-center justify-center"
>
<ElLink :href="(item as any).url" target="_blank">
{{ item.title }}
</ElLink>
</div>
</div>
<span v-else class="text-gray-400">-</span>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '发布',
type: 'success',
type: 'primary',
link: true,
icon: ACTION_ICON.UPLOAD,
auth: ['mp:free-publish:submit'],
@@ -237,10 +260,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
.vxe-cell {
height: auto !important;
padding: 0;
img {
width: 300px !important;
}
}
}
}

8
apps/web-ele/src/views/mp/draft/modules/cover-select.vue
View File

@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
import { ElButton, ElDialog, ElImage, ElMessage, ElUpload } from 'element-plus';
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
import { WxMaterialSelect } from '#/views/mp/components/';
const props = defineProps<{
isFirst: boolean;
@@ -50,7 +50,7 @@ function handleOpenDialog() {
dialogVisible.value = true;
}
/** 素材选择完成事件*/
/** 素材选择完成事件 */
function onMaterialSelected(item: any) {
dialogVisible.value = false;
newsItem.value.thumbMediaId = item.mediaId;
@@ -68,12 +68,12 @@ function onUploadSuccess(res: any) {
// 重置上传文件的表单
fileList.value = [];
// 设置草稿的封面字段
newsItem.value.thumbMediaId = res.data.mediaId;
newsItem.value.thumbUrl = res.data.url;
}
/** 上传失败处理 */
function onUploadError(err: Error) {
ElMessage.error(`上传失败: ${err.message}`);
}
@@ -134,7 +134,7 @@ function onUploadError(err: Error) {
append-to-body
destroy-on-close
>
<MaterialSelect
<WxMaterialSelect
type="image"
:account-id="accountId!"
@select-material="onMaterialSelected"

20
apps/web-ele/src/views/mp/draft/modules/draft-table.vue
View File

@@ -1,20 +0,0 @@
<script lang="ts" setup>
import type { Article } from './types';
import News from '#/views/mp/components/wx-news/wx-news.vue';
// TODO @hw：按照微信里说的，感觉这个可以干掉。少点组件哈。= = mp 模块，小组件可太多了。。。
defineOptions({ name: 'DraftTableCell' });
const props = defineProps<{
row: Article;
}>();
</script>
<template>
<div class="p-2.5">
<div v-if="props.row.content && props.row.content.newsItem">
<News :articles="props.row.content.newsItem" />
</div>
</div>
</template>

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

@@ -32,6 +32,7 @@ const emit = defineEmits<{
(e: 'update:modelValue', v: NewsItem[]): void;
}>();
// TODO @hw: 对齐 antd，应该是 MpDraftApi.NewsItem 这种哈。
const newsList = computed<NewsItem[]>({
get() {
return props.modelValue === null