EasyFlow-Tech-Dev/EasyFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 卡片入口视觉效果重做

Browse Source
This commit is contained in:
陈子默
2026-03-11 20:30:36 +08:00
parent 0a8a7c8046
commit 219fa566ef
6 changed files with 507 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
easyflow-ui-admin/app/src/views/ai/bots/index.vue
View File

@@ -3,7 +3,10 @@ import type { FormInstance } from 'element-plus';
import type { BotInfo } from '@easyflow/types';
import type { ActionButton } from '#/components/page/CardList.vue';
import type {
ActionButton,
CardPrimaryAction,
} from '#/components/page/CardList.vue';
import { computed, markRaw, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
@@ -70,36 +73,35 @@ const headerButtons = [
function resolveNavTitle(row: BotInfo) {
return (row as Record<string, any>)?.title || row?.name || '';
}
const primaryAction: CardPrimaryAction = {
icon: Setting,
text: $t('button.setting'),
onClick(row: BotInfo) {
router.push({
path: `/ai/bots/setting/${row.id}`,
query: {
pageKey: '/ai/bots',
navTitle: resolveNavTitle(row),
},
});
},
};
const actions: ActionButton[] = [
{
icon: Edit,
text: $t('button.edit'),
className: '',
permission: '',
placement: 'inline',
onClick(row: BotInfo) {
modalRef.value?.open('edit', row);
},
},
{
icon: Setting,
text: $t('button.setting'),
className: '',
permission: '',
onClick(row: BotInfo) {
router.push({
path: '/ai/bots/setting/' + row.id,
query: {
pageKey: '/ai/bots',
navTitle: resolveNavTitle(row),
},
});
},
},
{
icon: Delete,
text: $t('button.delete'),
className: 'item-danger',
tone: 'danger',
permission: '/api/v1/bot/remove',
placement: 'inline',
onClick(row: BotInfo) {
removeBot(row);
},
@@ -298,6 +300,7 @@ const getSideList = async () => {
<CardList
:default-icon="defaultAvatar"
:data="pageList"
:primary-action="primaryAction"
:actions="actions"
/>
</template>

81
easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollection.vue
View File

@@ -1,29 +1,22 @@
<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import type {FormInstance} from 'element-plus';
import {ElForm, ElFormItem, ElInput, ElInputNumber, ElMessage, ElMessageBox,} from 'element-plus';
import type { ActionButton } from '#/components/page/CardList.vue';
import type {ActionButton, CardPrimaryAction,} from '#/components/page/CardList.vue';
import CardPage from '#/components/page/CardList.vue';
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import {computed, onMounted, ref} from 'vue';
import {useRouter} from 'vue-router';
import { EasyFlowFormModal } from '@easyflow/common-ui';
import { $t } from '@easyflow/locales';
import {EasyFlowFormModal} from '@easyflow/common-ui';
import {$t} from '@easyflow/locales';
import { Delete, Edit, Notebook, Plus, Search } from '@element-plus/icons-vue';
import {
ElForm,
ElFormItem,
ElInput,
ElInputNumber,
ElMessage,
ElMessageBox,
} from 'element-plus';
import { tryit } from 'radash';
import {Delete, Edit, Notebook, Plus, Search} from '@element-plus/icons-vue';
import {tryit} from 'radash';
import { api } from '#/api/request';
import {api} from '#/api/request';
import defaultIcon from '#/assets/ai/knowledge/book.svg';
import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
import CardPage from '#/components/page/CardList.vue';
import PageData from '#/components/page/PageData.vue';
import PageSide from '#/components/page/PageSide.vue';
import DocumentCollectionModal from '#/views/ai/documentCollection/DocumentCollectionModal.vue';
@@ -37,6 +30,17 @@ const collectionTypeLabelMap = {
function resolveNavTitle(row: Record<string, any>) {
return row?.title || row?.name || '';
}
function openKnowledgeDetail(row: { id: string; name?: string; title?: string }) {
router.push({
path: '/ai/documentCollection/document',
query: {
id: row.id,
pageKey: '/ai/documentCollection',
navTitle: resolveNavTitle(row),
},
});
}
interface FieldDefinition {
// 字段名称
prop: string;
@@ -49,38 +53,29 @@ interface FieldDefinition {
// 占位符
placeholder?: string;
}
// 操作按钮配置
const primaryAction: CardPrimaryAction = {
icon: Notebook,
text: $t('documentCollection.actions.knowledge'),
permission: '/api/v1/documentCollection/save',
onClick(row) {
openKnowledgeDetail(row);
},
};
const actions: ActionButton[] = [
{
icon: Edit,
text: $t('button.edit'),
className: '',
permission: '/api/v1/documentCollection/save',
placement: 'inline',
onClick(row) {
aiKnowledgeModalRef.value.openDialog(row);
},
},
{
icon: Notebook,
text: $t('documentCollection.actions.knowledge'),
className: '',
permission: '/api/v1/documentCollection/save',
onClick(row) {
router.push({
path: '/ai/documentCollection/document',
query: {
id: row.id,
pageKey: '/ai/documentCollection',
navTitle: resolveNavTitle(row),
},
});
},
},
{
icon: Search,
text: $t('documentCollection.actions.retrieve'),
className: '',
permission: '',
placement: 'inline',
onClick(row) {
router.push({
path: '/ai/documentCollection/document',
@@ -96,8 +91,9 @@ const actions: ActionButton[] = [
{
text: $t('button.delete'),
icon: Delete,
className: 'item-danger',
tone: 'danger',
permission: '/api/v1/documentCollection/remove',
placement: 'inline',
onClick(row) {
handleDelete(row);
},
@@ -314,10 +310,11 @@ function changeCategory(category: any) {
<template #default="{ pageList }">
<CardPage
:default-icon="defaultIcon"
title-key="title"
avatar-key="icon"
description-key="description"
title-field="title"
icon-field="icon"
desc-field="description"
:data="pageList"
:primary-action="primaryAction"
:actions="actions"
tag-field="collectionType"
:tag-map="collectionTypeLabelMap"

92
easyflow-ui-admin/app/src/views/ai/plugin/AddPluginModal.vue
View File

@@ -1,11 +1,5 @@
<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { onMounted, ref } from 'vue';
import { EasyFlowFormModal } from '@easyflow/common-ui';
import { Plus, Remove } from '@element-plus/icons-vue';
import type {FormInstance} from 'element-plus';
import {
ElForm,
ElFormItem,
@@ -18,13 +12,20 @@ import {
ElSelect,
} from 'element-plus';
import { api } from '#/api/request';
import {onMounted, ref} from 'vue';
import {EasyFlowFormModal} from '@easyflow/common-ui';
import {Plus, Remove} from '@element-plus/icons-vue';
import {api} from '#/api/request';
import UploadAvatar from '#/components/upload/UploadAvatar.vue';
import { $t } from '#/locales';
import {$t} from '#/locales';
const emit = defineEmits(['reload']);
const embeddingLlmList = ref<any>([]);
const rerankerLlmList = ref<any>([]);
const categoryList = ref<any[]>([]);
interface headersType {
label: string;
value: string;
@@ -46,6 +47,11 @@ onMounted(() => {
api.get('/api/v1/model/list?supportRerankerLlmList=true').then((res) => {
rerankerLlmList.value = res.data;
});
api.get('/api/v1/pluginCategory/list').then((res) => {
if (res.errorCode === 0) {
categoryList.value = res.data;
}
});
});
defineExpose({
openDialog,
@@ -57,6 +63,7 @@ const isAdd = ref(true);
const tempAddHeaders = ref<headersType[]>([]);
const entity = ref<any>({
alias: '',
categoryIds: [],
deptId: '',
icon: '',
title: '',
@@ -91,6 +98,7 @@ const rules = ref({
// functions
function openDialog(row: any) {
tempAddHeaders.value = [];
if (row.id) {
isAdd.value = false;
if (row.headers) {
@@ -100,26 +108,62 @@ function openDialog(row: any) {
entity.value = {
...row,
authType: row.authType || 'none',
categoryIds: row.categoryIds?.map((item: any) => item.id) || [],
};
dialogVisible.value = true;
}
async function syncPluginCategories(pluginId: string, categoryIds: string[]) {
if (!pluginId) {
return;
}
const relationRes = await api.post(
'/api/v1/pluginCategoryMapping/updateRelation',
{
pluginId,
categoryIds,
},
);
if (relationRes.errorCode !== 0) {
throw new Error(relationRes.message || 'sync categories failed');
}
}
function save() {
saveForm.value?.validate((valid) => {
if (valid) {
btnLoading.value = true;
const plainEntity = { ...entity.value };
const plainHeaders = [...tempAddHeaders.value];
const categoryIds = [...(plainEntity.categoryIds || [])];
delete plainEntity.categoryIds;
if (isAdd.value) {
api
.post('/api/v1/plugin/plugin/save', {
...plainEntity,
headers: plainHeaders,
})
.then((res) => {
.then(async (res) => {
if (res.errorCode === 0) {
const pluginId =
res.data?.id ||
res.data ||
plainEntity.id ||
entity.value.id ||
'';
await syncPluginCategories(pluginId, categoryIds);
dialogVisible.value = false;
ElMessage.success($t('message.saveOkMessage'));
emit('reload');
} else {
ElMessage.error(res.message);
}
})
.catch((error) => {
ElMessage.error(error?.message || $t('message.saveFailMessage'));
})
.finally(() => {
btnLoading.value = false;
});
} else {
api
@@ -127,12 +171,21 @@ function save() {
...plainEntity,
headers: plainHeaders,
})
.then((res) => {
.then(async (res) => {
if (res.errorCode === 0) {
await syncPluginCategories(entity.value.id, categoryIds);
dialogVisible.value = false;
ElMessage.success($t('message.updateOkMessage'));
emit('reload');
} else {
ElMessage.error(res.message);
}
})
.catch((error) => {
ElMessage.error(error?.message || $t('message.saveFailMessage'));
})
.finally(() => {
btnLoading.value = false;
});
}
}
@@ -141,6 +194,7 @@ function save() {
function closeDialog() {
saveForm.value?.resetFields();
isAdd.value = true;
tempAddHeaders.value = [];
entity.value = {};
dialogVisible.value = false;
}
@@ -199,6 +253,22 @@ function removeHeader(index: number) {
:placeholder="$t('plugin.placeholder.description')"
/>
</ElFormItem>
<ElFormItem prop="categoryIds" :label="$t('plugin.category')">
<ElSelect
v-model="entity.categoryIds"
multiple
collapse-tags
collapse-tags-tooltip
:max-collapse-tags="3"
>
<ElOption
v-for="item in categoryList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</ElSelect>
</ElFormItem>
<ElFormItem prop="Headers" label="Headers">
<div
class="headers-container-reduce flex flex-row gap-4"

67
easyflow-ui-admin/app/src/views/ai/plugin/Plugin.vue
View File

@@ -1,5 +1,8 @@
<script setup lang="ts">
import type { ActionButton } from '#/components/page/CardList.vue';
import type {
ActionButton,
CardPrimaryAction,
} from '#/components/page/CardList.vue';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
@@ -19,13 +22,11 @@ import {
import { api } from '#/api/request';
import defaultPluginIcon from '#/assets/ai/plugin/defaultPluginIcon.png';
import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
import CategorizeIcon from '#/components/icons/CategorizeIcon.vue';
import PluginToolIcon from '#/components/icons/PluginToolIcon.vue';
import CardPage from '#/components/page/CardList.vue';
import PageData from '#/components/page/PageData.vue';
import PageSide from '#/components/page/PageSide.vue';
import AddPluginModal from '#/views/ai/plugin/AddPluginModal.vue';
import CategoryPluginModal from '#/views/ai/plugin/CategoryPluginModal.vue';
const router = useRouter();
@@ -52,47 +53,42 @@ function resolveNavTitle(item: PluginRecord) {
return (item.title as string) || (item.name as string) || '';
}
// 操作按钮配置
function openPluginTools(item: PluginRecord) {
router.push({
path: '/ai/plugin/tools',
query: {
id: item.id,
pageKey: '/ai/plugin',
navTitle: resolveNavTitle(item),
},
});
}
const primaryAction: CardPrimaryAction = {
icon: PluginToolIcon,
text: $t('plugin.button.tools'),
permission: '/api/v1/plugin/save',
onClick(item) {
openPluginTools(item);
},
};
const actions: ActionButton[] = [
{
icon: Edit,
text: $t('button.edit'),
className: '',
permission: '/api/v1/plugin/save',
placement: 'inline',
onClick(item) {
aiPluginModalRef.value.openDialog(item);
},
},
{
icon: PluginToolIcon,
text: $t('plugin.button.tools'),
className: '',
permission: '/api/v1/plugin/save',
onClick(item) {
router.push({
path: '/ai/plugin/tools',
query: {
id: item.id,
pageKey: '/ai/plugin',
navTitle: resolveNavTitle(item),
},
});
},
},
{
icon: CategorizeIcon,
text: $t('plugin.button.categorize'),
className: '',
permission: '/api/v1/plugin/save',
onClick(item) {
categoryCategoryModal.value.openDialog(item);
},
},
{
icon: Delete,
text: $t('button.delete'),
className: 'item-danger',
tone: 'danger',
permission: '/api/v1/plugin/remove',
placement: 'inline',
onClick(item) {
handleDelete(item);
},
@@ -162,7 +158,6 @@ const handleDelete = (item: PluginRecord) => {
const pageDataRef = ref();
const aiPluginModalRef = ref();
const categoryCategoryModal = ref();
const headerButtons = [
{
key: 'add',
@@ -267,10 +262,11 @@ const handleClickCategory = (item: PluginCategory) => {
>
<template #default="{ pageList }">
<CardPage
title-key="title"
avatar-key="icon"
description-key="description"
title-field="title"
icon-field="icon"
desc-field="description"
:data="pageList"
:primary-action="primaryAction"
:actions="actions"
:default-icon="defaultPluginIcon"
/>
@@ -279,7 +275,6 @@ const handleClickCategory = (item: PluginCategory) => {
</div>
</div>
<AddPluginModal ref="aiPluginModalRef" @reload="handleSearch" />
<CategoryPluginModal ref="categoryCategoryModal" @reload="handleSearch" />
<EasyFlowFormModal
:title="isEdit ? `${$t('button.edit')}` : `${$t('button.add')}`"
v-model:open="dialogVisible"

65
easyflow-ui-admin/app/src/views/ai/workflow/WorkflowList.vue
View File

@@ -1,11 +1,13 @@
<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import type {FormInstance} from 'element-plus';
import {ElForm, ElFormItem, ElInput, ElInputNumber, ElMessage, ElMessageBox,} from 'element-plus';
import type { ActionButton } from '#/components/page/CardList.vue';
import type {ActionButton, CardPrimaryAction,} from '#/components/page/CardList.vue';
import CardList from '#/components/page/CardList.vue';
import { computed, markRaw, onMounted, ref } from 'vue';
import {computed, markRaw, onMounted, ref} from 'vue';
import { EasyFlowFormModal } from '@easyflow/common-ui';
import {EasyFlowFormModal} from '@easyflow/common-ui';
import {
CopyDocument,
@@ -17,27 +19,18 @@ import {
Upload,
VideoPlay,
} from '@element-plus/icons-vue';
import {
ElForm,
ElFormItem,
ElInput,
ElInputNumber,
ElMessage,
ElMessageBox,
} from 'element-plus';
import { tryit } from 'radash';
import {tryit} from 'radash';
import { api } from '#/api/request';
import {api} from '#/api/request';
import workflowIcon from '#/assets/ai/workflow/workflowIcon.png';
// import workflowSvg from '#/assets/workflow.svg';
import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
import DesignIcon from '#/components/icons/DesignIcon.vue';
import CardList from '#/components/page/CardList.vue';
import PageData from '#/components/page/PageData.vue';
import PageSide from '#/components/page/PageSide.vue';
import { $t } from '#/locales';
import { router } from '#/router';
import { useDictStore } from '#/store';
import {$t} from '#/locales';
import {router} from '#/router';
import {useDictStore} from '#/store';
import WorkflowModal from './WorkflowModal.vue';
@@ -54,30 +47,29 @@ interface FieldDefinition {
placeholder?: string;
}
const primaryAction: CardPrimaryAction = {
icon: DesignIcon,
text: $t('button.design'),
permission: '/api/v1/workflow/save',
onClick: (row: any) => {
toDesignPage(row);
},
};
const actions: ActionButton[] = [
{
icon: Edit,
text: $t('button.edit'),
className: '',
permission: '/api/v1/workflow/save',
placement: 'inline',
onClick: (row: any) => {
showDialog(row);
},
},
{
icon: DesignIcon,
text: $t('button.design'),
className: '',
permission: '/api/v1/workflow/save',
onClick: (row: any) => {
toDesignPage(row);
},
},
{
icon: VideoPlay,
text: $t('button.run'),
className: '',
permission: '',
placement: 'inline',
onClick: (row: any) => {
router.push({
name: 'RunPage',
@@ -90,8 +82,8 @@ const actions: ActionButton[] = [
{
icon: Tickets,
text: $t('aiWorkflowExecRecord.moduleName'),
className: '',
permission: '/api/v1/workflow/save',
placement: 'menu',
onClick: (row: any) => {
router.push({
name: 'ExecRecord',
@@ -104,8 +96,7 @@ const actions: ActionButton[] = [
{
icon: Download,
text: $t('button.export'),
className: '',
permission: '',
placement: 'menu',
onClick: (row: any) => {
exportJson(row);
},
@@ -113,8 +104,7 @@ const actions: ActionButton[] = [
{
icon: CopyDocument,
text: $t('button.copy'),
className: '',
permission: '',
placement: 'menu',
onClick: (row: any) => {
showDialog({
title: `${row.title}Copy`,
@@ -125,8 +115,8 @@ const actions: ActionButton[] = [
{
icon: Delete,
text: $t('button.delete'),
className: 'item-danger',
permission: '',
tone: 'danger',
placement: 'inline',
onClick: (row: any) => {
remove(row);
},
@@ -402,6 +392,7 @@ function handleHeaderButtonClick(data: any) {
<CardList
:default-icon="workflowIcon"
:data="pageList"
:primary-action="primaryAction"
:actions="actions"
/>
</template>