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

View File

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