renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
-调整了智能体卡片的布局结构，优化了标题和描述的显示方式
- 改进了历史对话的展示样式，增加了滚动指示器
- 统一了标签和图标的样式，提升了视觉一致性
- 优化了搜索框和卡片列表的样式，提高了用户体验
This commit is contained in:
林志军
2025-07-28 19:59:54 +08:00
parent aa13941a83
commit f13384309a
7 changed files with 80 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/agent/chat/components/HistoryChat.vue
View File

@ -28,18 +28,7 @@
{{cozeInfo.description}}
</div>
</div>
<div class="divider"></div>
<!-- <div class="history-section">-->
<!-- <div class="history-title">-->
<!-- <div class="text">历史对话</div>-->
<!-- </div>-->
<!-- <div class="history-list">-->
<!-- <div class="history-item">-->
<!-- <div class="item-text">梳理这次舆情的时间线和关键节点</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</template>

11
src/views/agent/chat/components/history.scss
View File

@ -37,7 +37,7 @@
.info-section {
align-self: stretch;
padding: 15px;
padding: 10px 0 0 10px;
display: flex;
justify-content: space-between;
align-items: flex-start;
@ -110,7 +110,7 @@
}
.label {
left: 43px;
left: 22px;
top: 10px;
position: absolute;
color: var(--Text-3, #737478);
@ -142,12 +142,7 @@
}
}
.divider {
align-self: stretch;
height: 0px;
outline: 1px var(--Border-2, #E6E6E8) solid;
outline-offset: -0.50px;
}
.history-section {
align-self: stretch;

33
src/views/agent/chat/index.vue
View File

@ -14,20 +14,23 @@
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">
:xl="isCollapsed ? 24 : 16" class="chat-content-col">
<div id="coze-chat-container" style="width: 100%; margin-left: 100px"></div>
<a-card :bordered="false">
<div class="chat-content-col" style="min-height: fit-content;">
<div class="toggle-btn" @click="toggleCollapse">
<a-tooltip :content="isCollapsed ? '展开' : '折叠'">
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
</a-tooltip>
</div>
<div id="coze-chat-container" style="width: 100%; margin-left: 100px"></div>
</div>
</a-card>
</a-col>
</a-row>
@ -107,7 +110,7 @@ const initChat = async () => {
}
Object.assign(cozeInfo, data.info);
await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.17/libs/cn/index.js');
let cozeConfig = await cozeWebSdkConfig(data.info.bot_id, data.info.name, data.info.auth, data.info.user_info);
cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(cozeConfig);
showChatPage();
@ -124,7 +127,7 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
ui: {
chatBot: {
el: document.getElementById('coze-chat-container'),
width: '80%',
width: '95%',
height: '100%',
title: name,
isNeedFunctionCallMessage: true,
@ -132,10 +135,20 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
base: {
icon: '',
zIndex: 1000,
lang:'zh-CN'
},
footer: {
expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
},
header: {
isShow: true,
isNeedClose: true
},
conversations: {
isNeed: true,
isNeedAddNewConversationBoolean: true,
isNeedQuoteBoolean: true,
}
},
auth: auth,
userInfo: userInfo,

25
src/views/agent/work-flow/components/DynamicForm.vue
View File

@ -17,12 +17,20 @@
/>
<a-textarea
v-if="field.type === 'textarea'"
style="width: 500px; height: 200px;"
style="width: 500px; height: 200px"
v-model="formData[field.props.name]"
:placeholder="field?.props?.placeholder"
/>
<ImageUpload v-if="field.type == 'upload_image'" v-model="formData[field.props.name]" :limit="field.props.limit"></ImageUpload>
<FileUpload v-if="field.type == 'upload_file'" v-model="formData[field.props.name]" :limit="field.props.limit"></FileUpload>
<ImageUpload
v-if="field.type == 'upload_image'"
v-model="formData[field.props.name]"
:limit="field.props.limit"
></ImageUpload>
<FileUpload
v-if="field.type == 'upload_file'"
v-model="formData[field.props.name]"
:limit="field.props.limit"
></FileUpload>
<a-select
v-else-if="field.type === 'select'"
v-model="formData[field.props.name]"
@ -32,10 +40,9 @@
{{ option.label }}
</a-option>
</a-select>
</a-form-item>
</a-form>
<a-button type="primary" :disabled="loading" @click="handleSubmit">提交执行</a-button>
<a-button class="submit-btn" type="primary" :disabled="loading" @click="handleSubmit">提交执行</a-button>
</div>
</template>
<script setup>
@ -72,7 +79,8 @@ const handleSubmit = async () => {
padding: 24px;
border: 1px solid #d7d7d9; /* 添加灰色边框 */
background: var(--BG-White, white);
height:70vh;
height: 70vh;
:deep(.arco-input-wrapper),
:deep(.arco-textarea-wrapper) {
border-radius: 4px;
@ -92,5 +100,10 @@ const handleSubmit = async () => {
height: 60px;
}
}
.submit-btn {
display: block;
margin: 0 auto;
}
}
</style>

11
src/views/agent/work-flow/components/HistoryChat.vue
View File

@ -28,18 +28,7 @@
{{cozeInfo.description}}
</div>
</div>
<div class="divider"></div>
<!-- <div class="history-section">-->
<!-- <div class="history-title">-->
<!-- <div class="text">历史对话</div>-->
<!-- </div>-->
<!-- <div class="history-list">-->
<!-- <div class="history-item">-->
<!-- <div class="item-text">梳理这次舆情的时间线和关键节点</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</template>

15
src/views/agent/work-flow/components/history.scss
View File

@ -36,8 +36,6 @@
.info-section {
align-self: stretch;
padding-top: 15px;
padding-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: flex-start;
@ -47,7 +45,7 @@
justify-content: flex-start;
align-items: center;
gap: 4px;
padding: 24px;
padding: 10px 24px 0 24px;
.title {
color: var(--Text-1, #211F24);
font-size: 18px;
@ -97,10 +95,10 @@
width: 79px;
height: 34px;
position: relative;
margin-top: 24px;
margin-top: 10px;
margin-right: 24px;
.count {
left: 0px;
left: 20px;
top: 10px;
position: absolute;
color: var(--Text-2, #3C4043);
@ -143,12 +141,7 @@
}
}
.divider {
align-self: stretch;
height: 0px;
outline: 1px var(--Border-2, #E6E6E8) solid;
outline-offset: -0.50px;
}
.history-section {
align-self: stretch;

60
src/views/agent/work-flow/index.vue
View File

@ -5,45 +5,48 @@
<div class="chat-contain">
<a-row class="grid-layout">
<!-- 左侧历史聊天 -->
<a-col :xs="isCollapsed ? 0 : 3"
:sm="isCollapsed ? 0 : 3"
:md="isCollapsed ? 0 : 4"
:lg="isCollapsed ? 0 : 6"
:xl="isCollapsed ? 0 : 7"
:xxl="isCollapsed ? 0 : 5" >
<a-col
:xs="isCollapsed ? 0 : 3"
:sm="isCollapsed ? 0 : 3"
:md="isCollapsed ? 0 : 4"
:lg="isCollapsed ? 0 : 6"
:xl="isCollapsed ? 0 : 7"
:xxl="isCollapsed ? 0 : 5"
>
<HistoryChat v-if="!isCollapsed" :cozeInfo="cozeInfo" />
</a-col>
<div class="toggle-btn" @click="toggleCollapse">
<a-tooltip :content="isCollapsed ? '展开' : '折叠'">
<img class="status-icon" :src="isCollapsed ? menuFold : menuUnfold" />
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
</a-tooltip>
</div>
<!-- 动态表单 -->
<a-col :xs="isCollapsed ? 3 : 3"
:sm="isCollapsed ? 3 : 3"
:md="isCollapsed ? 4 : 4"
:lg="isCollapsed ? 6 : 6"
:xl="isCollapsed ? 6 : 6"
:xxl="isCollapsed ? 5 : 5" class="dynamic-form">
<DynamicForm
:formFields="formFields.form"
:formData="formData"
:loading="loading"
@submit="handleSubmit"
/>
<a-col
:xs="isCollapsed ? 3 : 3"
:sm="isCollapsed ? 3 : 3"
:md="isCollapsed ? 4 : 4"
:lg="isCollapsed ? 6 : 6"
:xl="isCollapsed ? 6 : 6"
:xxl="isCollapsed ? 5 : 5"
class="dynamic-form"
>
<DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
</a-col>
<!-- 主内容区域 -->
<a-col class="right-box content-container" style="height: 70vh;" :xs="isCollapsed ? 4 : 2"
:sm="isCollapsed ? 4 : 4"
:md="isCollapsed ? 6 : 6"
:lg="isCollapsed ? 8 : 8"
:xl="isCollapsed ? 10 : 10"
:xxl="isCollapsed ? 12 : 12" >
<a-col
class="right-box content-container"
style="height: 70vh"
:xs="isCollapsed ? 4 : 2"
:sm="isCollapsed ? 4 : 4"
:md="isCollapsed ? 6 : 6"
:lg="isCollapsed ? 8 : 8"
:xl="isCollapsed ? 10 : 10"
:xxl="isCollapsed ? 12 : 12"
>
<a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
<div v-if="workFlowRes?.output != ''" class="work-res" v-html="renderedMarkdown"></div>
<NoData v-else />
<NoData v-if="loading == false && workFlowRes?.output == ''" />
</a-col>
</a-row>
</div>
@ -113,7 +116,7 @@ const renderedMarkdown = computed(() => {
const handleSubmit = async (formData) => {
try {
const param = { form_data: formData, workflow_id: cozeInfo.workflow_id, bot_id: formFields.value.bot_id };
console.log(param, 'param');
workFlowRes.output = '';
loading.value = true;
const { code, data } = await executeWorkFlow(param);
if (code === 200) {
@ -121,7 +124,6 @@ const handleSubmit = async (formData) => {
loading.value = false;
}
} catch (error) {
console.log(error, 'error');
loading.value = false;
}
};