<template>
|
<!-- 应用场景 -->
|
<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">
|
<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" >
|
<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="product.children && product.children.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" v-for="item in product.children" :key="item.section_id" @click="changeApp(product.section_id, item)">
|
<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>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, reactive } from 'vue';
|
import { getSectionByAllList } from '/@/api/ai/chat';
|
|
import router from '/@/router';
|
let state = reactive({
|
recentlyList: [
|
{
|
ID: 1,
|
Name: '项目管理',
|
Icon: '/static/images/scene/scene_1.png',
|
},
|
{
|
ID: 2,
|
Name: '工作内容',
|
Icon: '/static/images/scene/scene_2.png',
|
},
|
], //最近使用
|
productivityList: [], //通用的场景
|
});
|
//切换到应用场景详情的事件
|
const changeApp = (section_id, item: any) => {
|
if (section_id === 'office_assistant') {
|
router.push({
|
name: 'ScenarioDetails',
|
query: {
|
ID: section_id,
|
Name: item.section_name,
|
Title: item.section_title,
|
},
|
});
|
}
|
};
|
const getSectionByList = async () => {
|
const res = await getSectionByAllList();
|
const iconList = ['/static/images/scene/scene_1.png', '/static/images/scene/scene_2.png', '/static/images/scene/scene_3.png'];
|
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;
|
});
|
}
|
});
|
state.productivityList = res.sections;
|
};
|
onMounted(() => {
|
getSectionByList();
|
});
|
</script>
|
<style scoped lang="scss">
|
.set-body {
|
max-width: 1000px;
|
min-height: calc(100% - 42px);
|
margin: 0 auto;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
border-radius: 8px;
|
margin-top: 32px;
|
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.16);
|
box-shadow: 0 0 1px rgba(0, 0, 0, 0.16);
|
.productivity {
|
padding: 24px 30px 10px;
|
background-color: #fff;
|
margin-bottom: 20px;
|
border-radius: 12px;
|
p {
|
span {
|
font-size: 14px;
|
color: #081735;
|
line-height: 20px;
|
display: flex;
|
align-items: center;
|
}
|
}
|
.list_app {
|
width: 180px;
|
display: flex;
|
align-items: center;
|
border-radius: 8px;
|
border: 1px solid #ccc;
|
padding: 15px;
|
margin-right: 14px;
|
margin-bottom: 14px;
|
cursor: pointer;
|
position: relative;
|
background-color: #fff;
|
&:hover {
|
border: 1px solid #1c86ff;
|
}
|
}
|
.productivity-span {
|
font-size: 14px;
|
color: #081735;
|
line-height: 20px;
|
display: flex;
|
align-items: center;
|
i {
|
display: block;
|
width: 4px;
|
height: 14px;
|
background: #1c86ff;
|
border-radius: 0 100px 100px 0;
|
margin-right: 10px;
|
}
|
}
|
}
|
.recently {
|
border: 1px solid #e5eaf9;
|
background-color: #e9eff8;
|
}
|
}
|
</style>
|
