vertoryao/dify-proxy-fontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(@vben/common-ui): 优化文档处理功能

Browse Source 
- 添加 markdown 解析功能
- 优化文档预览和工作视图组件
- 添加文档生成相关功能
- 修复一些与文档处理相关的问题
This commit is contained in:
Kven 2025-05-12 19:52:53 +08:00
parent 851794c127
commit e4745ae789
13 changed files with 243 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/.env.production
View File

@ -1,7 +1,7 @@
VITE_BASE=/
# 接口地址
VITE_GLOB_API_URL=http://dify.vertoryao.xyz/api
VITE_GLOB_API_URL=https://mock-napi.vben.pro/api
# 是否开启压缩，可以设置为 none, brotli, gzip
VITE_COMPRESS=none

6
apps/web-antd/src/views/dept/list.vue
View File

@ -138,7 +138,11 @@ function refreshGrid() {
<FormModal @success="refreshGrid" />
<Grid table-title="部门列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate">
<Button
type="primary"
@click="onCreate"
v-access:code="'system:dept:create'"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['部门']) }}
</Button>

6
apps/web-antd/src/views/ppt/index.vue
View File

@ -56,6 +56,10 @@ async function handleClick(item: PPTTempItem) {
}
}
async function handleClickMode(item: PPTTempItem) {
temp = item;
}
onMounted(() => {
getLogs(temp.id);
});
@ -71,7 +75,7 @@ onMounted(() => {
title="运行历史"
@click="handleClick"
/>
<PptListView title="选择模板" @click="handleClick" />
<PptListView title="选择模板" @click="handleClickMode" />
</div>
<div class="w-full lg:w-3/4">
<PptWorkView

2
apps/web-antd/src/views/role/data.ts
View File

@ -23,7 +23,7 @@ export function useFormSchema(): VbenFormSchema[] {
optionType: 'button',
},
defaultValue: true,
fieldName: 'enable',
fieldName: 'enabled',
label: '状态',
},
{

1
apps/web-antd/src/views/user/data.ts
View File

@ -87,6 +87,7 @@ export function useFormSchema(): VbenFormSchema[] {
},
{
component: 'Select',
rules: 'required',
componentProps: {
allowClear: true,
mode: 'multiple',

2
apps/web-antd/vite.config.mts
View File

@ -12,6 +12,7 @@ export default defineConfig(async () => {
// mock代理目标地址
// target: 'http://localhost:8081/api',
target: 'http://43.139.10.64:8082/api',
// target: 'http://192.168.3.238:8081/api',
ws: true,
},
'/docx': {
@ -29,6 +30,7 @@ export default defineConfig(async () => {
rewrite: (path) => path.replace(/^\/v1/, ''),
// target: 'http://localhost:8081/v1',
target: 'http://43.139.10.64:8082/v1',
// target: 'http://192.168.3.238:8081/v1',
},
},
},

1
packages/effects/common-ui/package.json
View File

@ -45,6 +45,7 @@
"@vueuse/integrations": "catalog:",
"ant-design-vue": "catalog:",
"ant-design-x-vue": "^1.1.2",
"markdown-it": "^14.1.0",
"qrcode": "catalog:",
"tippy.js": "catalog:",
"vue": "catalog:",

12
packages/effects/common-ui/src/ui/ppt/ppt-perview.vue
View File

@ -4,10 +4,12 @@ import { ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import VueOfficePptx from '@vue-office/pptx';
import { message } from 'ant-design-vue';
// import '@vue-office/pptx/lib/index.css';
// http://47.112.173.8:6802/static/66f3cfd95e364a239d8036390db658ae.pptx
// const url = ref('');
const isLoading = ref(false); // 新增：加载状态变量
const pptx = ref('/pptx/66f3cfd95e364a239d8036390db658ae.pptx');
const pptStyle = ref({
height: 'calc(100vh - 100px)',
@ -16,10 +18,12 @@ const pptStyle = ref({
background: '#ffffff',
});
const renderedHandler = () => {
console.warn('渲染完成');
isLoading.value = false; // 文档渲染完成，关闭加载状态
message.success('渲染完成');
};
const errorHandler = (err) => {
console.error(`渲染失败:${err}`);
const errorHandler = () => {
isLoading.value = false; // 出错时也关闭加载状态
message.error('渲染失败');
};
const [Drawer, drawerApi] = useVbenDrawer({
onCancel() {
@ -32,6 +36,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
if (isOpen) {
const data = drawerApi.getData<Record<string, any>>();
if (data) {
isLoading.value = true; // 开始加载文档，开启加载状态
pptx.value = `/pptx/${data}`; // 更新 docx 的值
}
// url.value = drawerApi.getData<Record<string, any>>();
@ -41,6 +46,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
</script>
<template>
<Drawer title="文档预览" :footer="false">
<div v-if="isLoading" class="loading-overlay">正在加载文档，请稍候...</div>
<VueOfficePptx
:src="pptx"
:style="pptStyle"

47
packages/effects/common-ui/src/ui/ppt/ppt-work-view.vue
View File

@ -12,8 +12,9 @@ import { useVbenDrawer } from '@vben/common-ui';
import { Card } from '@vben-core/shadcn-ui';
import { UserOutlined } from '@ant-design/icons-vue';
import { Button, Flex } from 'ant-design-vue';
import { Button, Flex, Typography } from 'ant-design-vue';
import { Attachments, BubbleList, Sender } from 'ant-design-x-vue';
import markdownit from 'markdown-it';
import PptPreview from './ppt-perview.vue';
@ -68,6 +69,24 @@ const props = withDefaults(defineProps<Props>(), {
}),
});
// 初始化 markdown 解析器
const md = markdownit({ html: true, breaks: true });
const renderMarkdown: BubbleListProps['roles'][string]['messageRender'] = (
content: string,
) => {
return h(Typography, [
h('div', {
innerHTML: content,
style: {
padding: '8px',
lineHeight: '1.6',
whiteSpace: 'break-spaces',
},
}),
]);
};
const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
// 连接抽离的组件
connectedComponent: PptPreview,
@ -162,7 +181,6 @@ const startFetching = async () => {
),
]),
});
value.value = '';
} catch (error) {
console.error(error);
}
@ -191,6 +209,17 @@ const roles: BubbleListProps['roles'] = {
},
},
avatar: { icon: h(UserOutlined), style: { background: '#fde3cf' } },
messageRender: (content) =>
h(Typography, [
h('div', {
innerHTML: md.render(content),
style: {
padding: '8px',
lineHeight: '1.6',
whiteSpace: 'break-spaces',
},
}),
]),
},
file: {
placement: 'start',
@ -287,17 +316,21 @@ watch(
</script>
<template>
<div>
<PreviewDrawer />
<div class="flex h-[765px] flex-col">
<div class="flex-1 overflow-y-auto">
<div style="margin: 20px; overflow-y: auto">
<BubbleList :auto-scroll="true" :roles="roles" :items="resultItems" />
</div>
<div style="height: calc(67vh - 120px); margin: 20px; overflow-y: auto">
<BubbleList
:roles="roles"
:typing="true"
:items="resultItems"
:message-render="renderMarkdown"
/>
</div>
<Card class="w-full">
<Sender
v-model:value="value"
:loading="isFetching"
:disabled="isFetching"
:auto-size="{ minRows: 6, maxRows: 12 }"
@submit="startFetching"
/>

22
packages/effects/common-ui/src/ui/spider/spider-work-view.vue
View File

@ -12,6 +12,8 @@ import {
CardTitle,
} from '@vben-core/shadcn-ui';
import { RangePicker } from 'ant-design-vue';
interface SpiderParams {
appid: string;
}
@ -57,11 +59,21 @@ const props = withDefaults(defineProps<Props>(), {
}),
});
const selectedDateRange = ref<string[]>([]);
const startFetching = async () => {
// 更新状态为“抓取中”
isFetching.value = true;
fetchStatus.value = 'fetching';
let publishStartTime = ''; // 默认值
let publishEndTime = ''; // 默认值
if (selectedDateRange.value && selectedDateRange.value.length === 2) {
publishStartTime = selectedDateRange.value[0] || '';
publishEndTime = selectedDateRange.value[1] || '';
}
try {
const res = await props.runSpider(
{
@ -71,7 +83,10 @@ const startFetching = async () => {
userId: '1562',
conversationId: '',
files: [],
inputs: {},
inputs: {
publishStartTime,
publishEndTime,
},
},
);
// 保存抓取结果
@ -123,6 +138,11 @@ const fetchStatus = ref('');
{{ item ? item.name : '请选择右侧爬虫' }}
</CardContent>
<CardFooter class="flex justify-end">
<RangePicker
class="mx-2"
v-model:value="selectedDateRange"
format="YYYY-MM-DD"
/>
<Button :disabled="!item" @click="startFetching">
{{ isFetching ? '抓取中...' : '开始抓取' }}
</Button>

12
packages/effects/common-ui/src/ui/word/word-preview.vue
View File

@ -4,10 +4,12 @@ import { ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import VueOfficeDocx from '@vue-office/docx';
import { message } from 'ant-design-vue';
import '@vue-office/docx/lib/index.css';
// const url = ref('');
const isLoading = ref(false); // 新增：加载状态变量
const docx = ref<any>(`/docx/027c6b7c-fea6-4964-839b-27857c4d3181.docx`);
const pptStyle = ref({
height: 'calc(100vh - 100px)',
@ -15,10 +17,12 @@ const pptStyle = ref({
margin: 'auto',
});
const renderedHandler = () => {
console.warn('渲染完成');
isLoading.value = false; // 文档渲染完成，关闭加载状态
message.success('渲染完成');
};
const errorHandler = (err) => {
console.error(`渲染失败:${err}`);
const errorHandler = () => {
isLoading.value = false; // 出错时也关闭加载状态
message.error('渲染失败');
};
const [Drawer, drawerApi] = useVbenDrawer({
onCancel() {
@ -31,6 +35,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
if (isOpen) {
const data = drawerApi.getData<Record<string, any>>();
if (data) {
isLoading.value = false; // 出错时也关闭加载状态
docx.value = `/docx/${data}`; // 更新 docx 的值
}
// url.value = drawerApi.getData<Record<string, any>>();
@ -40,6 +45,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
</script>
<template>
<Drawer class="w-[880px]" title="文档预览" :footer="false">
<div v-if="isLoading" class="loading-overlay">正在加载文档，请稍候...</div>
<VueOfficeDocx
:src="docx"
:style="pptStyle"

121
packages/effects/common-ui/src/ui/word/word-work-view.vue
View File

@ -12,8 +12,9 @@ import { useVbenDrawer } from '@vben/common-ui';
import { Card } from '@vben-core/shadcn-ui';
import { UserOutlined } from '@ant-design/icons-vue';
import { Button, Flex, notification } from 'ant-design-vue';
import { Button, Flex, Typography } from 'ant-design-vue';
import { Attachments, BubbleList, Sender } from 'ant-design-x-vue';
import markdownit from 'markdown-it';
import WordPreview from './word-preview.vue';
@ -62,6 +63,24 @@ const props = withDefaults(defineProps<Props>(), {
}),
});
// 初始化 markdown 解析器
const md = markdownit({ html: true, breaks: true });
const renderMarkdown: BubbleListProps['roles'][string]['messageRender'] = (
content,
) => {
return h(Typography, [
h('div', {
innerHTML: content,
style: {
padding: '8px',
lineHeight: '1.6',
whiteSpace: 'break-spaces',
},
}),
]);
};
const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
// 连接抽离的组件
connectedComponent: WordPreview,
@ -75,16 +94,7 @@ function openPreviewDrawer(
previewDrawerApi.setState({ placement }).setData(fileData).open();
}
const inputStatus = ref<string>('');
const startFetching = async () => {
if (!projectName.value) {
inputStatus.value = 'error';
notification.error({
duration: 3,
message: '请填写项目名称',
});
return;
}
isFetching.value = true;
fetchStatus.value = 'fetching';
resultItems.value.push({
@ -185,12 +195,41 @@ const startFetching = async () => {
resultItems.value.push({
key: resultItems.value.length + 1,
role: 'ai',
content: res.answer,
content: res.answer.trim(),
});
}
fetchResult.value = `/static/${filename.value}`;
value.value = '';
// resultItems.value.push({
// key: resultItems.value.length + 1,
// role: 'ai',
// content: '文档已生成',
// footer: h(Flex, null, [
// h(
// Button,
// {
// size: 'nomarl',
// type: 'primary',
// onClick: () => {
// openPreviewDrawer('right');
// },
// },
// '文档预览',
// ),
// h(
// Button,
// {
// size: 'nomarl',
// type: 'primary',
// style: {
// marginLeft: '10px',
// },
// onClick: () => {},
// },
// '文档下载',
// ),
// ]),
// });
} catch (error) {
console.error(error);
}
@ -219,6 +258,17 @@ const roles: BubbleListProps['roles'] = {
},
},
avatar: { icon: h(UserOutlined), style: { background: '#fde3cf' } },
messageRender: (content) =>
h(Typography, [
h('div', {
innerHTML: md.render(content),
style: {
padding: '8px',
lineHeight: '1.6',
whiteSpace: 'break-spaces',
},
}),
]),
},
file: {
placement: 'start',
@ -248,33 +298,56 @@ interface ResultItem {
footer?: any;
}
const insertTextToInput = (text: string) => {
value.value = text + value.value;
};
const resultItems = ref<ResultItem[]>([]);
</script>
<template>
<div>
<PreviewDrawer />
<div class="flex h-[765px] flex-col">
<div class="flex-1 overflow-y-auto">
<a-space class="w-full" direction="vertical">
<a-input
size="large"
v-model:value="projectName"
:status="inputStatus"
required
placeholder="项目名称(必填)"
/>
<a-input v-model:value="projectName" required placeholder="项目名称" />
</a-space>
<div style="margin: 20px; overflow-y: auto">
<BubbleList :auto-scroll="true" :roles="roles" :items="resultItems" />
</div>
<div style="height: calc(67vh - 180px); margin: 20px; overflow-y: auto">
<BubbleList
:roles="roles"
:typing="true"
:items="resultItems"
:message-render="renderMarkdown"
/>
</div>
<Flex wrap="wrap" :gap="12">
<Button @click="insertTextToInput('生成项目摘要')">生成项目摘要</Button>
<Button @click="insertTextToInput('生成目前存在问题')">
生成目前存在问题
</Button>
<Button @click="insertTextToInput('生成项目采用的技术原理')">
生成项目采用的技术原理
</Button>
<Button @click="insertTextToInput('生成能解决的主要问题')">
生成能解决的主要问题
</Button>
<Button @click="insertTextToInput('生成技术关键点和创新点')">
生成技术关键点和创新点
</Button>
<Button @click="insertTextToInput('生成应用前景')">生成应用前景</Button>
<Button @click="insertTextToInput('生成项目实施及效益预测')">
生成项目实施及效益预测
</Button>
<Button @click="insertTextToInput('生成预期成果')">生成预期成果</Button>
<Button @click="insertTextToInput('生成导出doc')">生成导出doc</Button>
<Card class="w-full">
<Sender
v-model:value="value"
:loading="isFetching"
:disabled="isFetching"
:auto-size="{ minRows: 6, maxRows: 12 }"
@submit="startFetching"
/>
</Card>
</Flex>
</div>
</template>

39
pnpm-lock.yaml
View File

@ -1344,6 +1344,9 @@ importers:
ant-design-x-vue:
specifier: ^1.1.2
version: 1.1.2(ant-design-vue@4.2.6(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))
markdown-it:
specifier: ^14.1.0
version: 14.1.0
qrcode:
specifier: 'catalog:'
version: 1.5.4
@ -7053,6 +7056,9 @@ packages:
lines-and-columns@1.2.4:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
linkify-it@5.0.0:
resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
lint-staged@15.5.1:
resolution: {integrity: sha512-6m7u8mue4Xn6wK6gZvSCQwBvMBR36xfY24nF5bMTf2MHDYG6S3yhJuOgdYVw99hsjyDt2d4z168b3naI8+NWtQ==}
engines: {node: '>=18.12.0'}
@ -7220,6 +7226,10 @@ packages:
resolution: {integrity: sha512-EsS89h6l4vbfJEtBZnENTOFk8mCRpY5ru36Xe5bcX1KYIli2mkSHqoFsp5O1wMDvTJJzxe/4THpCTtygjeeGWQ==}
engines: {node: '>= 10'}
markdown-it@14.1.0:
resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
hasBin: true
math-intrinsics@1.1.0:
resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
engines: {node: '>= 0.4'}
@ -7239,6 +7249,9 @@ packages:
mdn-data@2.21.0:
resolution: {integrity: sha512-+ZKPQezM5vYJIkCxaC+4DTnRrVZR1CgsKLu5zsQERQx6Tea8Y+wMx5A24rq8A8NepCeatIQufVAekKNgiBMsGQ==}
mdurl@2.0.0:
resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
meow@12.1.1:
resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
engines: {node: '>=16.10'}
@ -8489,6 +8502,10 @@ packages:
pump@3.0.2:
resolution: {integrity: sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==}
punycode.js@2.3.1:
resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
engines: {node: '>=6'}
punycode@2.3.1:
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
engines: {node: '>=6'}
@ -9520,6 +9537,9 @@ packages:
engines: {node: '>=14.17'}
hasBin: true
uc.micro@2.1.0:
resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
ufo@1.6.1:
resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
@ -16276,6 +16296,10 @@ snapshots:
lines-and-columns@1.2.4: {}
linkify-it@5.0.0:
dependencies:
uc.micro: 2.1.0
lint-staged@15.5.1:
dependencies:
chalk: 5.4.1
@ -16480,6 +16504,15 @@ snapshots:
- bluebird
- supports-color
markdown-it@14.1.0:
dependencies:
argparse: 2.0.1
entities: 4.5.0
linkify-it: 5.0.0
mdurl: 2.0.0
punycode.js: 2.3.1
uc.micro: 2.1.0
math-intrinsics@1.1.0: {}
mathml-tag-names@2.1.3: {}
@ -16492,6 +16525,8 @@ snapshots:
mdn-data@2.21.0: {}
mdurl@2.0.0: {}
meow@12.1.1: {}
meow@13.2.0: {}
@ -17753,6 +17788,8 @@ snapshots:
end-of-stream: 1.4.4
once: 1.4.0
punycode.js@2.3.1: {}
punycode@2.3.1: {}
pupa@3.1.0:
@ -18916,6 +18953,8 @@ snapshots:
typescript@5.8.3: {}
uc.micro@2.1.0: {}
ufo@1.6.1: {}
ultrahtml@1.6.0: {}