refactor(AI): 重构智能助手页面

- 更新路由配置,设置页面标题为"智能助手"- 优化 TabBox 组件,使用 van-cell 替代自定义样式
- 重新设计 treasureBox 组件布局,使用表格展示产品知识
- 移除冗余代码,调整样式
This commit is contained in:
陈昱达
2025-06-09 14:16:16 +08:00
parent e8ddb69215
commit 85b1a0e697
3 changed files with 73 additions and 14 deletions

View File

@@ -4,7 +4,7 @@ export default [
name: 'chatPage',
component: () => import('@/views/AI/index.vue'),
meta: {
title: 'chatPage '
title: '智能助手'
}
},
]

View File

@@ -1,13 +1,13 @@
<template>
<div >
<div class='tab-box' v-for='item in list'>
<div class='box-title'>
{{item.title}}
</div>
<!-- <div class='box-title'>-->
<!-- {{item.title}}-->
<!-- </div>-->
<div class='box-container'>
<div v-for='list in item.list' :class='list.value?"link":"" ' @click='view(list)'>
<van-cell v-for='list in item.list' :class='list.value?"link":"" ' @click='view(list)' is-link>
{{list.title}}
</div>
</van-cell>
</div>
</div>
@@ -22,7 +22,7 @@
</div>
</template>
<script>
import {Dialog} from 'vant'
import {Dialog,CellGroup,Cell} from 'vant'
import pdf from '@/views/AI/components/pdf.vue'
export default {
name: 'box',
@@ -42,6 +42,8 @@ export default {
watch: {},
components: {
[Dialog.name]:Dialog,
[CellGroup.name]:CellGroup,
[Cell.name]:Cell,
pdf
},
filters: {},
@@ -72,7 +74,7 @@ $primary-trans-color: rgba(135, 162, 208, 0.5); // 使用rgba定义颜色
overflow: hidden;
margin-bottom: 10px;
background: #fff;
border: 1px solid $primary-trans-color;
//border: 1px solid $primary-trans-color;
.box-title{
padding: 10px 15px;
background:$primary-trans-color ;
@@ -82,14 +84,20 @@ $primary-trans-color: rgba(135, 162, 208, 0.5); // 使用rgba定义颜色
}
.box-container{
padding: 10px;
display: flex;
//padding: 10px;
//display: flex;
align-items: center;
//justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
//gap: 8px;
.link{
color:$primary-color
div,i{
color:$primary-color;
}
//padding: 5px 12px;
border-radius: 5px;
//background: $primary-trans-color;
}
}

View File

@@ -7,7 +7,46 @@
<!-- <TabBox></TabBox>-->
<!-- </van-tab>-->
<van-tab title="产品知识">
<TabBox :list='knowledge'></TabBox>
<!-- <van-collapse v-model="activeNames">-->
<!-- <van-collapse-item :title="item.title" :name="index" v-for="(item, index) in knowledge" >-->
<!-- <span v-for="(it, index) in item.list" :key="index" :title="item.title" class='cells'>-->
<!-- {{ it.title}}-->
<!-- </span>-->
<!-- </van-collapse-item>-->
<!-- </van-collapse>-->
<!-- -->
<table style='border-color :#87a2d0;text-align: left;border-radius:8px;overflow: hidden ' cellspacing='1' cellpadding='1' >
<tr v-for='item in knowledge' >
<th style='width: 120px;background: #87a2d0 ;color:#fff;text-align: center' class='fs12 fw600'>{{item.title}}</th>
<th style='padding: 5px 8px; color:#fff;background: #87a2d0;font-weight: unset;gap:5px' class='fs12 flex '>
<span v-for="(it, index) in item.list" :key="index" :title="item.title" class='cells'>
{{ it.title}}
</span>
</th>
</tr>
</table>
<!-- <van-cell-group>-->
<!-- <van-cell v-for="(item, index) in knowledge" :key="index" :title="item.title" class='cells'>-->
<!-- <template #default>-->
<!--&lt;!&ndash; 截取钱10个&ndash;&gt;-->
<!-- <span v-for='it in item.list'>{{-->
<!-- it.title.substring(0,8)}}...</span>-->
<!-- </template>-->
<!-- <template #right-icon>-->
<!-- <van-icon name="arrow" ></van-icon>-->
<!-- </template>-->
<!-- </van-cell>-->
<!-- </van-cell-group>-->
<!-- <TabBox :list='knowledge'></TabBox>-->
</van-tab>
<van-tab title="常用工具">
<TabBox :list='tools'></TabBox>
@@ -18,7 +57,7 @@
</template>
<script>
import { Tabs, Tab } from 'vant'
import { Tabs, Tab,CellGroup,Cell,Icon,Collapse, CollapseItem } from 'vant'
import TabBox from '@/views/AI/components/TabBox.vue'
import { productDetail } from '@/api/generatedApi'
export default {
@@ -32,6 +71,11 @@ export default {
components: {
[Tabs.name]: Tabs,
[Tab.name]: Tab,
[CellGroup.name]: CellGroup,
[Cell.name]: Cell,
[Icon.name]: Icon,
[CollapseItem.name]: CollapseItem,
[Collapse.name]: Collapse,
TabBox,
},
data() {
@@ -41,6 +85,7 @@ export default {
// 工具列表
tools: [],
knowledge: [],
activeNames:[1],
}
},
@@ -123,4 +168,10 @@ $primary-trans-color: #87a2d0;
margin-bottom: 20px;
}
}
.cells{
display: flex;
align-items: center;
}
</style>