refactor(dify): 移除 dify 相关页面组件- 删除了 workflow 和 dify 页面的组件代码

- 优化了 intelligent-agent 页面的样式,为卡片添加阴影效果
- 调整了智能代理卡片的样式,增加了 agent-action 类
This commit is contained in:
Huangzhe
2025-04-24 20:10:49 +08:00
parent b7dea4e24f
commit 23ae005682
4 changed files with 94 additions and 75 deletions

View File

@@ -1,14 +1,21 @@
<script>
import { agentList, agentDelete, agentDetail } from '@/api/intelligent-agent/list'
import Info from '@/views/intelligent-agent/components/info'
import agent from '@/views/agent'
export default {
name: 'intelligent-agent',
components: {
Info
Info,
agent
},
data() {
return {
agentConfig: {
title: '',
component: 'agent',
visible: false,
},
searchOption: {
nameLike: '',
handleSearch: async () => {
@@ -70,6 +77,11 @@ export default {
this.dialog.agent = { name: '', description: '' }
this.dialog.title = '创建智能体'
this.dialog.visible = true
},
handleClickAgent(agent) {
this.agentConfig.agent = agent
this.agentConfig.title = '智能体详情'
this.agentConfig.visible = true
}
},
created() {
@@ -98,17 +110,18 @@ export default {
<!-- 智能体的列表 -->
<article>
<el-row class="agent-item" :gutter="10">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="listItem in list" :key="listItem.id">
<el-card>
<el-col class="agent-item__col" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="listItem in list"
:key="listItem.id">
<el-card shadow="hover">
<section class="agent-item__info">
<el-avatar shape="square" :src="listItem.url">{{ listItem.name[0] }}</el-avatar>
<span>
<h4>{{ listItem.name }}</h4>
<h4><a @click="handleClickAgent(listItem)">{{ listItem.name }}</a></h4>
<p class="dataset-desc">{{ listItem.description }}</p>
</span>
</section>
<el-row type="flex" justify="end">
<el-row type="flex" justify="end" class="agent-action">
<el-button class="default render-button" size="small" icon="el-icon-delete"
@click.stop="handleDeleteAgent(listItem.id)">删除</el-button>
<el-button class="render-button line-button" size="small" icon="el-icon-edit"
@@ -123,18 +136,34 @@ export default {
<el-dialog :visible.sync="dialog.visible" :title="dialog.title" :close-on-click-modal="false">
<component :is="dialog.component" />
</el-dialog>
<el-drawer :visible.sync="agentConfig.visible" :title="agentConfig.title" size="90%">
<component :is="agentConfig.component" />
</el-drawer>
</div>
</template>
<style scoped lang="scss">
.container {
.render-container {
font-family: PingFangSC, PingFang SC;
* {
transition: all 0.3s ease;
transition: all 0.5s ease;
}
}
.agent-item__col {
& .agent-action {
opacity: 0;
}
&:hover .agent-action {
opacity: 1;
}
}
.agent-item {
&>.el-col {
margin: 7px auto;

View File

@@ -1,57 +1,64 @@
<template>
<div>
<!-- 添加预处理结果预览对话框 -->
<el-drawer
:title="currentId ? (isPreview ? '预览' : '编辑') + '知识拆分规则' : '新增知识拆分规则'"
:visible.sync="dialogVisible"
size="40%"
:before-close="handleClose"
>
<el-drawer :title="currentId ? (isPreview ? '预览' : '编辑') + '知识拆分规则' : '新增知识拆分规则'" :visible.sync="dialogVisible"
size="40%" :before-close="handleClose">
<div class="content">
<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
<div class="form-section">
<div class="section-title">基本信息</div>
<el-row :gutter="20">
<el-col :span="isPreview ? 24 : 12">
<el-form-item label="规则名称" prop="ruleName">
<el-input :disabled="isPreview" v-model="form.ruleName" placeholder="请输入规则名称" />
</el-form-item>
</el-col>
<el-col v-if="!isPreview" :span="12">
<el-select v-model="searchValue" @change="queryExistingRules" filterable clearable placeholder="查询并导入现有规则">
<el-option v-for="item in ruleList" :key="item.id" :label="item.ruleName" :value="item.id" />
</el-select>
</el-col>
</el-row>
<p v-if="!isPreview" class="tips">支持中文英文数字下划线(_)50个字符以内不能以下划线为开头</p>
<el-form-item label="备注" prop="description">
<el-input :disabled="isPreview" v-model="form.description" placeholder="请输入规则备注" type="textarea" />
</el-form-item>
</div>
<el-form ref="ruleForm" :model="form" :rules="rules" label-position="top" inline>
<div class="section-title">基本信息</div>
<el-row v-if="isPreview" :gutter="20" style="display: flex; align-items: end;">
<el-col :span="isPreview ? 24 : 14" :class="isPreview ? 'full-width-item' : ''">
<el-form-item label="规则名称" prop="ruleName" style="width: 100%;">
<el-input :disabled="isPreview" v-model="form.ruleName" placeholder="请输入规则名称" />
</el-form-item>
</el-col>
</el-row>
<el-row v-else :gutter="20" style="display: flex; align-items: end;">
<el-col span="24" :class="isPreview ? 'full-width-item' : ''">
<el-form-item label="规则名称" prop="ruleName">
<el-input :disabled="isPreview" v-model="form.ruleName" placeholder="请输入规则名称" />
</el-form-item>
</el-col>
<el-col v-if="!isPreview" :span="14" style="padding-bottom: 24px;">
<el-select v-model="searchValue" @change="queryExistingRules" filterable clearable
placeholder="查询并导入现有规则">
<el-option v-for="item in ruleList" :key="item.id" :label="item.ruleName" :value="item.id" />
</el-select>
</el-col>
</el-row>
<el-form-item label="备注" prop="description" class="full-width-item">
<el-input :disabled="isPreview" v-model="form.description" placeholder="请输入规则备注" type="textarea" />
</el-form-item>
<div class="form-section" v-for="(rule, index) in form.ruleList" :key="index">
<div class="section-title">
拆分规则 {{ index + 1 }}
<div>
<el-button v-if="!isPreview && form.ruleList.length > 1" type="text" class="delete-btn" @click="removeRule(index)">
<el-button v-if="!isPreview && form.ruleList.length > 1" type="text" class="delete-btn"
@click="removeRule(index)">
<i class="el-icon-delete"></i> 删除
</el-button>
<el-button v-if="!isPreview" type="text" class="copy-btn" @click="copyRule(index)"> <i class="el-icon-copy-document"></i> 复制 </el-button>
<el-button v-if="!isPreview" type="text" class="copy-btn" @click="copyRule(index)"> <i
class="el-icon-copy-document"></i> 复制 </el-button>
</div>
</div>
<el-form-item label="样式" :prop="'ruleList.' + index + '.titleLevel'">
<el-form-item label="样式" :prop="'ruleList.' + index + '.titleLevel'" class="full-width-item">
<el-select :disabled="isPreview" v-model="rule.titleLevel" placeholder="请选择标题级别">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="规则" :prop="'ruleList.' + index + '.ruleRegex'">
<el-input :disabled="isPreview" type="textarea" v-model="rule.ruleRegex" placeholder="请输入规则表达式"></el-input>
<el-form-item label="规则" :prop="'ruleList.' + index + '.ruleRegex'" class="full-width-item">
<el-input :disabled="isPreview" type="textarea" v-model="rule.ruleRegex"
placeholder="请输入规则表达式"></el-input>
</el-form-item>
<el-form-item label="备注" :prop="'ruleList.' + index + '.description'">
<el-input :disabled="isPreview" type="textarea" v-model="rule.description" placeholder="请输入规则备注"></el-input>
<el-form-item label="备注" :prop="'ruleList.' + index + '.description'" class="full-width-item">
<el-input :disabled="isPreview" type="textarea" v-model="rule.description"
placeholder="请输入规则备注"></el-input>
</el-form-item>
</div>
<div class="add-rule-btn">
<el-button v-if="!isPreview" type="primary" size="medium" @click="addSplitRule">
<i class="el-icon-plus"></i>
@@ -264,68 +271,51 @@ export default {
<style scoped lang="scss">
.content {
padding: 20px;
height: calc(100vh - 120px);
overflow-y: auto;
font-family: PingFangSC, PingFang SC;
overflow: hidden;
.form-section {
margin-bottom: 24px;
padding: 16px;
background: #f8f9fa;
border-radius: 4px;
.section-title {
margin-top: 20px;
font-size: 16px;
font-weight: 500;
margin-bottom: 16px;
color: #303133;
display: flex;
justify-content: space-between;
align-items: center;
.delete-btn {
color: #f56c6c;
font-size: 14px;
&:hover {
color: #f78989;
}
color: #f78989;
}
.copy-btn {
color: #70b936;
font-size: 14px;
&:hover {
color: #70b936;
}
}
}
}
.tips {
font-size: 12px;
color: #999;
margin-left: 100px;
margin-bottom: 20px;
}
.w100 {
width: 300px;
}
.add-rule-btn {
text-align: center;
margin-top: 20px;
margin-bottom: 60px;
}
.full-width-item {
width: 100%;
margin-bottom: 10px;
}
}
.drawer-footer {
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #e8e8e8;
padding: 10px 20px;
text-align: right;
left: 0;
right: 0;
padding: 20px;
background: #fff;
border-top: 1px solid #e4e7ed;
text-align: right;
}
</style>