refactor(agent): 重构智能体页面布局和样式

-调整了智能体卡片的布局结构,优化了标题和描述的显示方式
- 改进了历史对话的展示样式,增加了滚动指示器
- 统一了标签和图标的样式,提升了视觉一致性
- 优化了搜索框和卡片列表的样式,提高了用户体验
This commit is contained in:
林志军
2025-07-28 16:08:02 +08:00
parent 6a43cfad75
commit 2e25f840f6
8 changed files with 56 additions and 19 deletions

View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 5.41667H2.5V3.75H17.5V5.41667ZM17.5 10.8333L9.16667 10.8333V9.16667L17.5 9.16667V10.8333ZM2.5 16.25L17.5 16.25V14.5833L2.5 14.5833V16.25ZM5.88166 7.49938C6.1589 7.31999 6.52469 7.51898 6.52469 7.8492V11.9793C6.52469 12.3095 6.1589 12.5085 5.88167 12.3291L2.69031 10.264C2.43656 10.0999 2.43656 9.7286 2.69031 9.5644L5.88166 7.49938Z" fill="#737478"/>
</svg>

After

Width:  |  Height:  |  Size: 509 B

View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 5.41667H17.5V3.75H2.5V5.41667ZM9.16667 10.8333L17.5 10.8333V9.16667L9.16667 9.16667V10.8333ZM17.5 16.25L2.5 16.25V14.5833L17.5 14.5833V16.25ZM2.5 7.93499C2.5 7.60478 2.86579 7.40578 3.14302 7.58517L6.33438 9.6502C6.58813 9.81439 6.58812 10.1856 6.33438 10.3498L3.14302 12.4149C2.86579 12.5943 2.5 12.3953 2.5 12.065V7.93499Z" fill="#737478"/>
</svg>

After

Width:  |  Height:  |  Size: 500 B

View File

@ -8,6 +8,7 @@ const route = useRoute();
const routerKey = computed(() => {
return route.path + Math.random();
});
const hideFooter = computed(() => route.meta?.hideFooter);
/*** - end */
</script>
@ -19,7 +20,7 @@ const routerKey = computed(() => {
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</transition>
<view class="footer">
<view class="footer" v-if="!hideFooter">
<view>闽公网安备 352018502850842 闽ICP备20250520582号 © 2025小题科技All Rights Reserved.</view>
<view>* 数据通过公开渠道获取灵机进行统计分析</view>
</view>

View File

@ -25,6 +25,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
locale:'智能体应用',
requiresAuth: false,
requireLogin: true,
hideFooter: true,
},
}
],

View File

@ -1,19 +1,36 @@
<template>
<div class="chat-wrap">
<span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
<span @click="goChatIndex"> <icon-left /> 返回空间 </span>
<div class="chat-contain">
<a-layout>
<a-layout-sider class="custom-sider" >
<HistoryChat v-if="cozeInfo?.bot_id" :cozeInfo="cozeInfo" />
</a-layout-sider>
<a-layout>
<a-layout-content style="padding: 24px; background: #fff; min-height: 280px">
<!-- 使用 arco-design 栅格布局 -->
<a-row :gutter="24" class="chat-grid">
<!-- 左侧 HistoryChat -->
<a-col :xs="isCollapsed ? 0 : 24"
:sm="isCollapsed ? 0 : 12"
:md="isCollapsed ? 0 : 8"
:lg="isCollapsed ? 0 : 6"
:xl="isCollapsed ? 0 : 7"
:xxl="isCollapsed ? 0 : 4"
class="history-chat-col">
<HistoryChat v-if="cozeInfo?.bot_id && !isCollapsed" :cozeInfo="cozeInfo" />
</a-col>
<!-- 右侧聊天内容 -->
<a-col :xs="24"
:sm="isCollapsed ? 24 : 12"
:md="isCollapsed ? 24 : 16"
:lg="isCollapsed ? 24 : 18"
:xl="isCollapsed ? 24 : 15" class="chat-content-col">
<div class="toggle-btn" @click="toggleCollapse">
<a-tooltip :content="isCollapsed ? '展开' : '折叠'">
<img class="status-icon" :src="isCollapsed ? menuFold : menuUnfold" />
</a-tooltip>
</div>
<a-card :bordered="false">
<div id="coze-chat-container" style="width: 100%; margin-left: 100px"></div>
</a-card>
</a-layout-content>
</a-layout>
</a-layout>
</a-col>
</a-row>
</div>
</div>
</template>
@ -23,11 +40,19 @@ import { ref, onMounted } from 'vue';
import { getChatAgent } from '@/api/all/agent';
import HistoryChat from './components/HistoryChat.vue';
import { useRouter } from 'vue-router';
import menuFold from '@/assets/svg/menu-fold.svg';
import menuUnfold from '@/assets/svg/menu-unfold.svg';
const router = useRouter();
// 存储认证令牌
const authToken = ref('');
const isCollapsed = ref(false);
// 切换折叠状态
const toggleCollapse = () => {
isCollapsed.value = !isCollapsed.value;
};
// 模拟从API获取token
const fetchToken = async () => {
@ -136,5 +161,4 @@ onUnmounted(() => {
<style scoped lang="scss">
@import './style.scss';
</style>

View File

@ -39,4 +39,6 @@
width: 15% !important;
}
}
}

View File

@ -1,7 +1,7 @@
<template>
<div class="agent-wrap">
<a-input
style="float: right; width: 400px"
style="float: right;"
v-model="query.name"
@blur="getData()"
placeholder="搜索智能体"
@ -14,12 +14,14 @@
</a-input>
<div v-for="(item, index) in list" :key="index">
<span class="span-title">{{ item.name }}</span>
<a-row class="grid-demo" :gutter="24" v-if="item.agent_products.length > 0">
<a-row class="grid-demo " :gutter="24" v-if="item.agent_products.length > 0">
<a-col :xs="24"
:sm="12"
:md="8"
:lg="6"
:xl="4" v-for="(product, k) in item.agent_products">
:lg="5"
:xl="6"
:xxl="6"
v-for="(product, k) in item.agent_products">
<div class="card-container" @click="goDetail(product?.type, product?.id)">
<div class="card-image-container">
<img

View File

@ -31,6 +31,7 @@
justify-content: flex-start;
align-items: flex-start;
gap: 8px;
margin: 5px;
}
.card-image-container {