From 374588fa3cbc2786adbccdb6caa1366ca6feb06c Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期一, 24 三月 2025 15:52:22 +0800 Subject: [PATCH] 语音朗读 --- src/views/project/ch/home/Scenario.vue | 118 +++++++++++++++++----------------------------------------- 1 files changed, 35 insertions(+), 83 deletions(-) diff --git a/src/views/project/ch/home/Scenario.vue b/src/views/project/ch/home/Scenario.vue index e9cc23e..53529f8 100644 --- a/src/views/project/ch/home/Scenario.vue +++ b/src/views/project/ch/home/Scenario.vue @@ -1,61 +1,46 @@ <template> <!-- 搴旂敤鍦烘櫙 --> - <div class="w100 h100 box-border text-[14px] bg-[#f7f8fa] overflow-hidden pr-[32px] pb-[50px] pl-[32px] pt-[42px]"> + <div class="w100 h100 box-border text-[14px] bg-[#f7f8fa] overflow-auto pr-[32px] pb-[50px] pl-[32px] pt-[42px]"> <div class="set-body"> - <div class="productivity recently"> + <!-- <div class="productivity recently"> <p class="mb-[24px] flex items-center"> <el-icon color="#409eff" :size="20" class="mr-2"><Clock /></el-icon> <span>鏈�杩戜娇鐢�</span> </p> <div class="flex flex-wrap items-center"> - <div class="list_app" v-for="item in state.recentlyList" :key="item.ID" @click="changeApp(item)"> - <img :src="item.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" /> - <span class="text-[14px] text-[#333f4e]">{{ item.Name }}</span> - </div> - </div> - </div> - <div class="productivity" v-for="product in state.productivityList" :key="product.section_id"> - <div class="mb-[24px]"> - <span class="productivity-span"><i></i>{{ product.section_name }}</span> - </div> - <div class="flex flex-wrap items-center" v-show="product.children && product.children.length > 0"> - <div class="list_app" v-for="item in product.children" :key="item.section_id"> - <img :src="item.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" /> - <span class="text-[14px] text-[#333f4e]">{{ item.section_name }}</span> - </div> - </div> - </div> - <!-- <div class="productivity"> - <div class="mb-[24px]"> - <span class="productivity-span"><i></i>姘村姟搴旂敤鍦烘櫙</span> - </div> - <div class="flex flex-wrap items-center"> - <div class="list_app" v-for="item in state.waterApplicationList" :key="item.ID"> - <img :src="item.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" /> - <span class="text-[14px] text-[#333f4e]">{{ item.Name }}</span> - </div> - </div> - </div> - <div class="productivity"> - <div class="mb-[24px]"> - <span class="productivity-span"><i></i>杈呭姪瀛︿範</span> - </div> - <div class="flex flex-wrap items-center"> - <div class="list_app" v-for="item in state.studyList" :key="item.ID"> + <div class="list_app" v-for="item in state.recentlyList" :key="item.ID" > <img :src="item.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" /> <span class="text-[14px] text-[#333f4e]">{{ item.Name }}</span> </div> </div> </div> --> + <div + class="productivity" + v-for="product in state.productivityList" + :key="product.section_id" + v-show="state.productivityList && state.productivityList.length > 0" + > + <div class="mb-[24px]"> + <span class="productivity-span"><i></i>{{ product.section_name }}</span> + </div> + <div class="flex flex-wrap items-center"> + <div class="list_app" @click="changeApp(product.section_id, product)"> + <img :src="product.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" /> + <span class="text-[14px] text-[#333f4e]">{{ product.section_name }}</span> + </div> + </div> + </div> + <el-empty description="鏆傛棤鏁版嵁" v-show="state.productivityList.length === 0" /> </div> </div> </template> <script setup lang="ts"> import { onMounted, reactive } from 'vue'; -import { getSectionByAllList } from '/@/api/ai/chat'; - +import { useRoute } from 'vue-router'; +import { getSectionByIdList } from '/@/api/ai/chat'; import router from '/@/router'; +const route = useRoute(); let state = reactive({ recentlyList: [ { @@ -70,64 +55,31 @@ }, ], //鏈�杩戜娇鐢� productivityList: [], //閫氱敤鐨勫満鏅� - waterApplicationList: [ - { - ID: 1, - Name: '姘村巶鐢熶骇', - Icon: '/static/images/scene/scene_1.png', - }, - { - ID: 2, - Name: '绠$綉鐩戞祴', - Icon: '/static/images/scene/scene_2.png', - }, - { - ID: 3, - Name: '绠$綉杩愯', - Icon: '/static/images/scene/scene_3.png', - }, - { - ID: 4, - Name: '浜ч攢宸�', - Icon: '/static/images/scene/scene_2.png', - }, - ], - studyList: [ - { - ID: 1, - Name: '璁烘枃鍔╂墜', - Icon: '/static/images/scene/scene_1.png', - }, - { - ID: 2, - Name: '鍏朵粬', - Icon: '/static/images/scene/scene_2.png', - }, - ], + scenarioID: null, }); //鍒囨崲鍒板簲鐢ㄥ満鏅鎯呯殑浜嬩欢 -const changeApp = (item: any) => { - if (item.ID === 2) { +const changeApp = (section_id, item: any) => { + if (section_id === 'office_summarize') { router.push({ name: 'ScenarioDetails', + query: { + ID: section_id, + Name: item.section_name, + Title: item.section_title, + }, }); } }; const getSectionByList = async () => { - const res = await getSectionByAllList(); + const res = await getSectionByIdList({ section_a_id: state.scenarioID }); const iconList = ['/static/images/scene/scene_1.png', '/static/images/scene/scene_2.png', '/static/images/scene/scene_3.png']; - console.log('馃殌 ~ res:', res); - res.sections.forEach((item: any) => { - if (item.children && item.children.length > 0) { - item.children = item.children.map((child: any) => { - child.Icon = iconList[Math.floor(Math.random() * 3)]; - return child; - }); - } + res.sections.forEach((child: any) => { + child.Icon = iconList[Math.floor(Math.random() * 3)]; }); state.productivityList = res.sections; }; onMounted(() => { + state.scenarioID = route.query.ID; getSectionByList(); }); </script> -- Gitblit v1.9.3