refactor(@vben/web-antd): 重构 Word 页面布局和功能
This commit is contained in:
parent
53a0137cb4
commit
7107d16be9
@ -299,7 +299,7 @@ const [agent] = useXAgent({
|
||||
agentRequestLoading.value = true;
|
||||
const res = await sendWorkflow(
|
||||
{
|
||||
appid: 'baca08c1-e92b-4dc9-a445-3584803f54d4',
|
||||
appid: 'ee3889b6-50fa-463e-b956-3b93447727fc',
|
||||
},
|
||||
{
|
||||
userId: '1563',
|
||||
@ -311,9 +311,9 @@ const [agent] = useXAgent({
|
||||
},
|
||||
);
|
||||
agentRequestLoading.value = false;
|
||||
if (res.data.data.outputs.result) {
|
||||
onSuccess(`下载链接:${res.data.data.outputs.result}`);
|
||||
const url = new URL(res.data.data.outputs.result);
|
||||
if (res.data.outputs.result) {
|
||||
onSuccess(`下载链接:${res.data.outputs.result}`);
|
||||
const url = new URL(res.data.outputs.result);
|
||||
pptx.value = url.pathname;
|
||||
} else {
|
||||
onSuccess('发生异常，可以输入更多信息再让我来回答或重试。');
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<script setup lang="tsx">
|
||||
import type {
|
||||
AttachmentsProps,
|
||||
BubbleListProps,
|
||||
@ -53,6 +53,25 @@ defineOptions({ name: 'PlaygroundIndependentSetup' });
|
||||
|
||||
const { token } = theme.useToken();
|
||||
|
||||
const groupable: ConversationsProps['groupable'] = {
|
||||
sort(a, b) {
|
||||
if (a === b) return 0;
|
||||
|
||||
return a === 'history' ? -1 : 1;
|
||||
},
|
||||
title: (group, { components: { GroupTitle } }) =>
|
||||
group ? (
|
||||
<GroupTitle>
|
||||
<Space>
|
||||
<CommentOutlined />
|
||||
<span>{group === 'history' ? '会话记录' : 'PPT模板'}</span>
|
||||
</Space>
|
||||
</GroupTitle>
|
||||
) : (
|
||||
<GroupTitle />
|
||||
),
|
||||
};
|
||||
|
||||
const styles = computed(() => {
|
||||
return {
|
||||
layout: {
|
||||
@ -127,7 +146,7 @@ const styles = computed(() => {
|
||||
} as const;
|
||||
});
|
||||
|
||||
const pptx = ref<any>('/static/9e1c421e-991c-411f-8176-6350a97e70f3.docx');
|
||||
const docx = ref<any>('/static/9e1c421e-991c-411f-8176-6350a97e70f3.docx');
|
||||
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
|
||||
@ -170,21 +189,21 @@ const placeholderPromptsItems: PromptsProps['items'] = [
|
||||
key: '1',
|
||||
label: renderTitle(
|
||||
h(FireOutlined, { style: { color: '#FF4D4F' } }),
|
||||
'Hot Topics',
|
||||
'热门话题',
|
||||
),
|
||||
description: 'What are you interested in?',
|
||||
description: '你对什么感兴趣?',
|
||||
children: [
|
||||
{
|
||||
key: '1-1',
|
||||
description: `What's new in X?`,
|
||||
description: `X有什么新功能?`,
|
||||
},
|
||||
{
|
||||
key: '1-2',
|
||||
description: `What's AGI?`,
|
||||
description: `AGI是什么?`,
|
||||
},
|
||||
{
|
||||
key: '1-3',
|
||||
description: `Where is the doc?`,
|
||||
description: `医生在哪里？`,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -192,24 +211,24 @@ const placeholderPromptsItems: PromptsProps['items'] = [
|
||||
key: '2',
|
||||
label: renderTitle(
|
||||
h(ReadOutlined, { style: { color: '#1890FF' } }),
|
||||
'Design Guide',
|
||||
'设计指导',
|
||||
),
|
||||
description: 'How to design a good product?',
|
||||
description: '如何设计一个好的产品?',
|
||||
children: [
|
||||
{
|
||||
key: '2-1',
|
||||
icon: h(HeartOutlined),
|
||||
description: `Know the well`,
|
||||
description: `了解情况`,
|
||||
},
|
||||
{
|
||||
key: '2-2',
|
||||
icon: h(SmileOutlined),
|
||||
description: `Set the AI role`,
|
||||
description: `设置AI角色`,
|
||||
},
|
||||
{
|
||||
key: '2-3',
|
||||
icon: h(CommentOutlined),
|
||||
description: `Express the feeling`,
|
||||
description: `表达感受`,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -218,12 +237,12 @@ const placeholderPromptsItems: PromptsProps['items'] = [
|
||||
const senderPromptsItems: PromptsProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
description: 'Hot Topics',
|
||||
description: '热门话题',
|
||||
icon: h(FireOutlined, { style: { color: '#FF4D4F' } }),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
description: 'Design Guide',
|
||||
description: '设计指导',
|
||||
icon: h(ReadOutlined, { style: { color: '#1890FF' } }),
|
||||
},
|
||||
];
|
||||
@ -274,10 +293,10 @@ const [agent] = useXAgent({
|
||||
},
|
||||
);
|
||||
agentRequestLoading.value = false;
|
||||
if (res.data.answer) {
|
||||
onSuccess(res.data.answer);
|
||||
const url = new URL(res.data.answer);
|
||||
pptx.value = url.pathname;
|
||||
if (res.answer) {
|
||||
onSuccess(res.answer);
|
||||
const url = new URL(res.answer);
|
||||
docx.value = url.pathname;
|
||||
} else {
|
||||
onSuccess('发生异常，可以输入更多信息再让我来回答或重试。');
|
||||
}
|
||||
@ -319,7 +338,8 @@ function onAddConversation() {
|
||||
...conversationsItems.value,
|
||||
{
|
||||
key: `${conversationsItems.value.length}`,
|
||||
label: `New Conversation ${conversationsItems.value.length}`,
|
||||
label: `会话 ${conversationsItems.value.length}`,
|
||||
group: 'history',
|
||||
},
|
||||
];
|
||||
activeKey.value = `${conversationsItems.value.length}`;
|
||||
@ -341,16 +361,16 @@ const placeholderNode = computed(() =>
|
||||
h(Welcome, {
|
||||
variant: 'borderless',
|
||||
icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp',
|
||||
title: "Hello, I'm Ant Design X",
|
||||
title: '欢迎使用Word自动生成',
|
||||
description:
|
||||
'Base on Ant Design, AGI product interface solution, create a better intelligent vision~',
|
||||
'基于Ant Design，提供AGI产品接口解决方案，打造更好的智能视觉~',
|
||||
extra: h(Space, {}, [
|
||||
h(Button, { icon: h(ShareAltOutlined) }),
|
||||
h(Button, { icon: h(EllipsisOutlined) }),
|
||||
]),
|
||||
}),
|
||||
h(Prompts, {
|
||||
title: 'Do you want?',
|
||||
title: '你想要?',
|
||||
items: placeholderPromptsItems,
|
||||
styles: {
|
||||
list: {
|
||||
@ -393,14 +413,15 @@ const getConversationList = async () => {
|
||||
limit: '5',
|
||||
},
|
||||
);
|
||||
if (res.status === 200) {
|
||||
conversationsItems.value = res.data.data.map((item: any) => {
|
||||
if (res.data.length > 0) {
|
||||
conversationsItems.value = res.data.map((item: any) => {
|
||||
return {
|
||||
key: item.id,
|
||||
label: item.name,
|
||||
group: 'history',
|
||||
};
|
||||
});
|
||||
activeKey.value = res.data.data[0].id;
|
||||
activeKey.value = res.data[0].id;
|
||||
}
|
||||
};
|
||||
|
||||
@ -444,14 +465,14 @@ const handleQuoteClick = () => {
|
||||
|
||||
// 定义模板数据
|
||||
const templates = ref([
|
||||
{ label: '模板1', key: '1' },
|
||||
{ label: '模板2', key: '2' },
|
||||
{ label: '模板3', key: '3' },
|
||||
{ label: '模板34', key: '4' },
|
||||
{ label: '模板35', key: '5' },
|
||||
{ label: '模板36', key: '7' },
|
||||
{ label: '模板37', key: '8' },
|
||||
{ label: '模板38', key: '9' },
|
||||
{ label: '模板1', key: '333', group: 'model' },
|
||||
{ label: '模板2', key: '334', group: 'model' },
|
||||
{ label: '模板3', key: '335', group: 'model' },
|
||||
{ label: '模板34', key: '336', group: 'model' },
|
||||
{ label: '模板35', key: '337', group: 'model' },
|
||||
{ label: '模板36', key: '338', group: 'model' },
|
||||
{ label: '模板37', key: '339', group: 'model' },
|
||||
{ label: '模板38', key: '340', group: 'model' },
|
||||
]);
|
||||
|
||||
// 监听模板选择事件
|
||||
@ -459,7 +480,7 @@ const onModeClick: ConversationsProps['onActiveChange'] = (key) => {
|
||||
acticeModeKey.value = key;
|
||||
};
|
||||
|
||||
// 定义 pptx 的样式
|
||||
// 定义 docx 的样式
|
||||
const pptStyle = ref({
|
||||
height: 'calc(100vh - 150px) !import',
|
||||
width: '40%',
|
||||
@ -493,52 +514,58 @@ onMounted(() => {
|
||||
<div :style="styles.layout" style="height: calc(100vh - 70px)">
|
||||
<contextHolder />
|
||||
<div :style="styles.menu">
|
||||
<!-- 🌟 Logo -->
|
||||
<div :style="styles.logo">
|
||||
<img
|
||||
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original"
|
||||
draggable="false"
|
||||
alt="logo"
|
||||
:style="styles['logo-img']"
|
||||
/>
|
||||
<span :style="styles['logo-span']">Word文档生成</span>
|
||||
</div>
|
||||
|
||||
<!-- 🌟 添加会话 -->
|
||||
<Button type="link" :style="styles.addBtn" @click="onAddConversation">
|
||||
<Button
|
||||
type="link"
|
||||
:style="styles.addBtn"
|
||||
style="margin-top: 20px"
|
||||
@click="onAddConversation"
|
||||
>
|
||||
<PlusOutlined />
|
||||
新建会话
|
||||
</Button>
|
||||
|
||||
<!-- 🌟 会话管理 -->
|
||||
<Conversations
|
||||
:items="conversationsItems"
|
||||
:style="styles.conversations"
|
||||
:active-key="activeKey"
|
||||
:menu="menuConfig"
|
||||
@active-change="onConversationClick"
|
||||
/>
|
||||
<!-- 🌟 会话管理 -->
|
||||
<Typography.Title :level="5" style="margin: 0 0 8px">
|
||||
选择模板
|
||||
</Typography.Title>
|
||||
<Conversations
|
||||
:items="templates"
|
||||
:style="styles.conversations"
|
||||
:active-key="acticeModeKey"
|
||||
:menu="menuConfig"
|
||||
@active-change="onModeClick"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 70%;
|
||||
"
|
||||
>
|
||||
<Conversations
|
||||
:items="conversationsItems"
|
||||
:style="styles.conversations"
|
||||
style="height: 35%"
|
||||
:active-key="activeKey"
|
||||
:menu="menuConfig"
|
||||
:groupable="groupable"
|
||||
@active-change="onConversationClick"
|
||||
/>
|
||||
|
||||
<!-- 🌟 会话管理 -->
|
||||
<Conversations
|
||||
:items="templates"
|
||||
:style="styles.conversations"
|
||||
:active-key="acticeModeKey"
|
||||
:menu="menuConfig"
|
||||
:groupable="groupable"
|
||||
@active-change="onModeClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 🌟 项目名称输入 -->
|
||||
<Typography.Title :level="5" style="margin: 16px 0 8px">
|
||||
项目名称
|
||||
</Typography.Title>
|
||||
<a-input
|
||||
v-model:value="projectName"
|
||||
placeholder="请输入项目名称"
|
||||
:style="{ margin: '10px 5%', padding: '0 8px', width: '90%' }"
|
||||
/>
|
||||
<div style="height: 30%">
|
||||
<Typography.Title :level="5" style="margin: 16px 0 8px">
|
||||
项目名称
|
||||
</Typography.Title>
|
||||
<a-input
|
||||
v-model:value="projectName"
|
||||
placeholder="请输入项目名称"
|
||||
:style="{ margin: '10px 5%', padding: '0 8px', width: '90%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :style="styles.chat" style="margin-left: 20px">
|
||||
@ -621,7 +648,7 @@ onMounted(() => {
|
||||
</Sender>
|
||||
</div>
|
||||
<VueOfficeDocx
|
||||
:src="pptx"
|
||||
:src="docx"
|
||||
:style="pptStyle"
|
||||
@rendered="renderedHandler"
|
||||
@error="errorHandler"
|
||||
|
||||
@ -13,13 +13,13 @@ export default defineConfig(async () => {
|
||||
target: 'http://localhost:8081/api',
|
||||
ws: true,
|
||||
},
|
||||
'/static/**/*.docx': {
|
||||
changeOrigin: true,
|
||||
target: 'http://47.112.173.8:6805',
|
||||
},
|
||||
'/static': {
|
||||
changeOrigin: true,
|
||||
'/static/*.ppt': {
|
||||
target: 'http://47.112.173.8:6802',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/static/*.docx': {
|
||||
target: 'http://47.112.173.8:6805',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/v1': {
|
||||
changeOrigin: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user