feat(@vben/common-ui): 重构 PPT、Spider 和 Word 组件

apps/web-antd/src/views/ppt/components/index.ts

@@ -1,4 +1,2 @@
-export { default as PptHistoryView } from './ppt-history-view.vue';
 export { default as PptListView } from './ppt-list-view.vue';
 export { default as PptWorkView } from './ppt-work-view.vue';
-export type * from './typing';

apps/web-antd/src/views/ppt/components/ppt-list-view.vue

@@ -1,22 +1,15 @@
 <script setup lang="ts">
 import type { ConversationsProps } from 'ant-design-x-vue';
 
-import type { PptHistoryItem } from './typing';
+import type { Props } from '../typing';
 
 import { computed, ref } from 'vue';
 
-// import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';
 import { Menu } from 'ant-design-vue';
 import { Conversations } from 'ant-design-x-vue';
 
-interface Props {
-  items?: PptHistoryItem[];
-  title: string;
-  loading: boolean;
-}
-
 defineOptions({
-  name: 'WordListView',
+  name: 'PptListView',
 });
 
 const props = withDefaults(defineProps<Props>(), {
@@ -42,16 +35,6 @@ const itemsData = ref([
   },
 ]);
 
-// const items2: ItemType[] = reactive([
-//   getItem(
-//     '选择模板',
-//     'grp',
-//     null,
-//     [getItem('海南职创申报书生成', 'baca08c1-e92b-4dc9-a445-3584803f54d4')],
-//     'group',
-//   ),
-// ]);
-
 const handleMenuClick = (item: { key: string }) => {
   const selectedItem = itemsData.value.find((i) => i.key === item.key);
   if (selectedItem) {
@@ -75,20 +58,6 @@ const onConversationClick: ConversationsProps['onActiveChange'] = (key) => {
   }
 };
 
-// const menuConfig: ConversationsProps['menu'] = (conversation) => ({
-//   items: [
-//     {
-//       label: '删除此对话',
-//       key: conversation.key,
-//       icon: h(DeleteOutlined),
-//       danger: true,
-//     },
-//   ],
-//   onClick: (menuInfo) => {
-//     emit('delete', menuInfo.key)
-//   },
-// });
-
 const selectedKeys = ref([]);
 const openKeys = ref([]);
 </script>
@@ -104,11 +73,8 @@ const openKeys = ref([]);
       :items="itemsData"
       @click="handleMenuClick"
     />
-    <!-- 🌟 添加会话 -->
-    <!--        <Button type="link" class="addBtn">会话</Button>-->
-    <div class="addBtn">会话</div>
-    <!-- 🌟 添加会话 -->
 
+    <div class="addBtn">会话</div>
     <!-- 🌟 会话管理 -->
     <Conversations
       :items="conversationsItems"
@@ -161,10 +127,6 @@ const openKeys = ref([]);
   gap: 16px;
 }
 
-//.messages {
-//  flex: 1;
-//}
-
 .placeholder {
   padding-top: 32px;
   text-align: left;

apps/web-antd/src/views/ppt/components/ppt-work-view.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { AttachmentsProps, BubbleListProps } from 'ant-design-x-vue';
 
-import type { DrawerPlacement } from '@vben-core/popup-ui';
+import type { DrawerPlacement } from '@vben/common-ui';
 
-import type { PPTTempItem } from './typing';
+import type { PropsWork, ResultItem } from '../typing';
 
 import { h, ref, watch } from 'vue';
 
-import { useVbenDrawer } from '@vben-core/popup-ui';
+import { useVbenDrawer } from '@vben/common-ui';
+import { useUserStore } from '@vben/stores';
 
 import {
   CloudUploadOutlined,
@@ -17,39 +18,11 @@ import {
 import { Badge, Button, Flex, Space, Typography } from 'ant-design-vue';
 import { Attachments, Bubble, Sender, Welcome } from 'ant-design-x-vue';
 
-import PptPreview from './ppt-perview.vue';
+import PptPreview from './ppt-preview.vue';
 
-interface ResultItem {
+defineOptions({ name: 'PptWorkView' });
-  key: number;
-  role: 'ai' | 'user';
-  content: string;
-  footer?: any;
-}
 
-interface WorkflowContext {
+const props = withDefaults(defineProps<PropsWork>(), {
-  userId: string;
-  conversationId: string;
-  files: unknown[];
-  inputs: Record<string, unknown>;
-}
-
-interface WorkflowResult {
-  data: {
-    outputs: {
-      result: string;
-    };
-  };
-}
-
-interface Props {
-  itemMessage?: ResultItem;
-  item?: PPTTempItem;
-  runWorkflow?: (context: WorkflowContext) => Promise<WorkflowResult>;
-}
-
-defineOptions({ name: 'PlaygroundIndependentSetup' });
-
-const props = withDefaults(defineProps<Props>(), {
   itemMessage: () => null,
   item: () => null,
   runWorkflow: () => async () => ({
@@ -61,8 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
   }),
 });
 
-// const { token } = theme.useToken();
+const userStore = useUserStore();
-
 const roles: BubbleListProps['roles'] = {
   user: {
     placement: 'end',
@@ -158,7 +130,7 @@ const startFetching = async () => {
 
   try {
     const res = await props.runWorkflow({
-      userId: '1562',
+      userId: userStore.userInfo?.userId || '',
       conversationId: '',
       files: [],
       inputs: {
@@ -232,12 +204,6 @@ watch(
     resultItems.value = [];
     if (newVal && newVal.length > 0) {
       newVal.forEach((msg) => {
-        // resultItems.value.push({
-        //   key: resultItems.value.length + 1,
-        //   role: msg.role, // 'user' or 'ai'
-        //   content: msg.content,
-        //   footer: msg.footer,
-        // });
         if (msg.role === 'user') {
           resultItems.value.push({
             key: resultItems.value.length + 1,

apps/web-antd/src/views/word/components/index.ts

@@ -1,4 +1,2 @@
-export type * from './typing';
-export { default as WordHistoryView } from './word-history-view.vue';
 export { default as WordListView } from './word-list-view.vue';
 export { default as WordWorkView } from './word-work-view.vue';

apps/web-antd/src/views/word/components/word-list-view.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ConversationsProps } from 'ant-design-x-vue';
 
-import type { WordHistoryItem } from './typing';
+import type { PropsHistory } from '../typing';
 
 import { computed, h, ref } from 'vue';
 
@@ -10,17 +10,11 @@ import { DeleteOutlined } from '@ant-design/icons-vue';
 import { Menu } from 'ant-design-vue';
 import { Conversations } from 'ant-design-x-vue';
 
-interface Props {
-  items?: WordHistoryItem[];
-  title: string;
-  loading: boolean;
-}
-
 defineOptions({
   name: 'WordListView',
 });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<PropsHistory>(), {
   items: () => [],
 });
 const emit = defineEmits(['click', 'clickMode', 'delete']);

apps/web-antd/src/views/word/components/word-work-view.vue

@@ -5,13 +5,14 @@ import type {
   PromptsProps,
 } from 'ant-design-x-vue';
 
-import type { DrawerPlacement } from '@vben-core/popup-ui';
+import type { DrawerPlacement } from '@vben/common-ui';
 
-import type { WordTempItem } from './typing';
+import type { Props, ResultItem } from '../typing';
 
 import { computed, h, ref, watch } from 'vue';
 
-import { useVbenDrawer } from '@vben-core/popup-ui';
+import { useVbenDrawer } from '@vben/common-ui';
+import { useUserStore } from '@vben/stores';
 
 import {
   EditOutlined,
@@ -38,46 +39,13 @@ import {
   Bubble,
   Prompts,
   Sender,
-  useXAgent,
-  useXChat,
   Welcome,
 } from 'ant-design-x-vue';
 import markdownit from 'markdown-it';
 
 import WordPreview from './word-preview.vue';
 
-interface ResultItem {
+defineOptions({ name: 'WordWorkView' });
-  key: number;
-  role: 'ai' | 'user';
-  content: string;
-  footer?: any;
-}
-interface WorkflowContext {
-  userId: string;
-  conversationId: string;
-  content: string;
-  inputs: {
-    [key: string]: any;
-  };
-  files: [];
-}
-interface WorkflowResult {
-  conversationId: string;
-  answer: {};
-  data: {
-    outputs: {
-      result: string;
-    };
-  };
-}
-interface Props {
-  itemMessage?: ResultItem;
-  item?: WordTempItem;
-  paramsData?: {};
-  runChatflow?: (context: WorkflowContext) => Promise<WorkflowResult>;
-}
-
-defineOptions({ name: 'PlaygroundIndependentSetup' });
 
 const props = withDefaults(defineProps<Props>(), {
   item: () => null,
@@ -92,8 +60,6 @@ const props = withDefaults(defineProps<Props>(), {
   }),
 });
 
-// const { token } = theme.useToken();
-
 // 初始化 markdown 解析器
 const md = markdownit({ html: true, breaks: true });
 
@@ -112,23 +78,7 @@ const renderMarkdown: BubbleListProps['roles'][string]['messageRender'] = (
   ]);
 };
 
-const sleep = () => new Promise((resolve) => setTimeout(resolve, 500));
+// const sleep = () => new Promise((resolve) => setTimeout(resolve, 500));
-
-// function renderTitle(icon: VNode, title: string) {
-//   return h(Space, { align: 'start' }, [icon, h('span', title)]);
-// }
-
-const defaultConversationsItems = [
-  {
-    key: '0',
-    label: 'What is Ant Design X?',
-  },
-];
-// {
-//   key: '1',
-//     description: '生成项目摘要',
-//   icon: h(ReadOutlined, { style: { color: '#FF4D4F' } }),
-// },
 
 const senderPromptsItems = computed(() => {
   if (typeof props.paramsData !== 'object' || props.paramsData === null)
@@ -192,10 +142,10 @@ const roles: BubbleListProps['roles'] = {
 };
 
 // ==================== State ====================
+const userStore = useUserStore();
 const headerOpen = ref(false);
 const content = ref('');
 // const conversationsItems = ref(defaultConversationsItems);
-const activeKey = ref(defaultConversationsItems[0].key);
 const attachedFiles = ref<AttachmentsProps['items']>([]);
 const agentRequestLoading = ref(false);
 const projectInfo = ref({
@@ -215,14 +165,6 @@ const layout = {
   wrapperCol: { span: 16 },
 };
 // ==================== Runtime ====================
-const [agent] = useXAgent({
-  request: async ({ message }, { onSuccess }) => {
-    agentRequestLoading.value = true;
-    await sleep();
-    agentRequestLoading.value = false;
-    onSuccess(`Mock success return. You said: ${message}`);
-  },
-});
 
 const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
   // 连接抽离的组件
@@ -237,20 +179,6 @@ function openPreviewDrawer(
   previewDrawerApi.setState({ placement }).setData(fileData).open();
 }
 
-const { setMessages } = useXChat({
-  agent: agent.value,
-});
-
-watch(
-  activeKey,
-  () => {
-    if (activeKey.value !== undefined) {
-      setMessages([]);
-    }
-  },
-  { immediate: true },
-);
-
 // ==================== Event ====================
 
 // 判断是否是以 .docx 结尾的 URL
@@ -290,7 +218,7 @@ const startFetching = async () => {
 
   try {
     const res = await props.runChatflow({
-      userId: '1562',
+      userId: userStore.userInfo?.userId || '',
       conversationId: conversationId.value,
       files: [],
       inputs: {
@@ -370,9 +298,6 @@ const onPromptsItemClick: PromptsProps['onItemClick'] = (info) => {
   content.value = info.data.description;
 };
 
-// const handleFileChange: AttachmentsProps['onChange'] = (info) =>
-//   (attachedFiles.value = info.fileList);
-
 // 监听 itemMessage 变化并更新 resultItems
 watch(
   () => props.itemMessage,
@@ -528,47 +453,6 @@ watch(
             </Button>
           </Badge>
         </template>
-
-        <!--        <template #header>-->
-        <!--          <Sender.Header-->
-        <!--            title="Attachments"-->
-        <!--            :open="headerOpen"-->
-        <!--            :styles="{ content: { padding: 0 } }"-->
-        <!--            @open-change="(open) => (headerOpen = open)"-->
-        <!--          >-->
-        <!--            <Attachments-->
-        <!--              :before-upload="() => false"-->
-        <!--              :items="attachedFiles"-->
-        <!--              @change="handleFileChange"-->
-        <!--            >-->
-        <!--              <template #placeholder="type">-->
-        <!--                <Flex-->
-        <!--                  v-if="type && type.type === 'inline'"-->
-        <!--                  align="center"-->
-        <!--                  justify="center"-->
-        <!--                  vertical-->
-        <!--                  gap="2"-->
-        <!--                >-->
-        <!--                  <Typography.Text style="font-size: 30px; line-height: 1">-->
-        <!--                    <CloudUploadOutlined />-->
-        <!--                  </Typography.Text>-->
-        <!--                  <Typography.Title-->
-        <!--                    :level="5"-->
-        <!--                    style="margin: 0; font-size: 14px; line-height: 1.5"-->
-        <!--                  >-->
-        <!--                    Upload files-->
-        <!--                  </Typography.Title>-->
-        <!--                  <Typography.Text type="secondary">-->
-        <!--                    Click or drag files to this area to upload-->
-        <!--                  </Typography.Text>-->
-        <!--                </Flex>-->
-        <!--                <Typography.Text v-if="type && type.type === 'drop'">-->
-        <!--                  Drop file here-->
-        <!--                </Typography.Text>-->
-        <!--              </template>-->
-        <!--            </Attachments>-->
-        <!--          </Sender.Header>-->
-        <!--        </template>-->
       </Sender>
     </div>
   </div>