feat:【antd】【ai】modal 部分的代码优化

This commit is contained in:
YunaiV
2025-10-26 16:05:10 +08:00
parent 0bb0c656b8
commit 178a0a3bb2
13 changed files with 98 additions and 22 deletions

View File

@@ -5,6 +5,7 @@ import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
@@ -25,24 +26,33 @@ export function useFormSchema(): VbenFormSchema[] {
options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
allowClear: true,
},
rules: z.string().min(1, { message: '请输入平台' }),
rules: 'required',
},
{
component: 'Input',
fieldName: 'name',
label: '名称',
rules: 'required',
componentProps: {
placeholder: '请输入名称',
},
},
{
component: 'Input',
fieldName: 'apiKey',
label: '密钥',
rules: 'required',
componentProps: {
placeholder: '请输入密钥',
},
},
{
component: 'Input',
fieldName: 'url',
label: '自定义 API URL',
componentProps: {
placeholder: '请输入自定义 API URL',
},
},
{
fieldName: 'status',
@@ -65,6 +75,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '名称',
component: 'Input',
componentProps: {
placeholder: '请输入名称',
allowClear: true,
},
},
{
fieldName: 'platform',
@@ -72,6 +86,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
allowClear: true,
placeholder: '请选择平台',
options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
},
},
@@ -81,6 +96,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
allowClear: true,
placeholder: '请选择状态',
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
},
@@ -97,18 +113,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
name: 'CellDict',
props: { type: DICT_TYPE.AI_PLATFORM },
},
minWidth: 100,
},
{
field: 'name',
title: '名称',
minWidth: 120,
},
{
field: 'apiKey',
title: '密钥',
minWidth: 140,
},
{
field: 'url',
title: '自定义 API URL',
minWidth: 180,
},
{
field: 'status',
@@ -117,6 +137,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
minWidth: 80,
},
{
title: '操作',

View File

@@ -41,9 +41,7 @@ async function handleDelete(row: AiModelApiKeyApi.ApiKey) {
});
try {
await deleteApiKey(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
});
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
hideLoading();
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,

View File

@@ -27,7 +27,7 @@ const [Form, formApi] = useVbenForm({
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 100,
labelWidth: 120,
},
layout: 'horizontal',
schema: useFormSchema(),
@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Modal :title="getTitle" class="w-2/5">
<Form class="mx-4" />
</Modal>
</template>

View File

@@ -8,6 +8,7 @@ import { z } from '#/adapter/form';
import { getSimpleKnowledgeList } from '#/api/ai/knowledge/knowledge';
import { getModelSimpleList } from '#/api/ai/model/model';
import { getToolSimpleList } from '#/api/ai/model/tool';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
@@ -32,6 +33,9 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '角色名称',
rules: 'required',
componentProps: {
placeholder: '请输入角色名称',
},
},
{
component: 'ImageUpload',
@@ -62,6 +66,9 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'category',
label: '角色类别',
rules: 'required',
componentProps: {
placeholder: '请输入角色类别',
},
dependencies: {
triggerFields: ['formType'],
show: (values) => {
@@ -113,6 +120,17 @@ export function useFormSchema(): VbenFormSchema[] {
allowClear: true,
},
},
{
fieldName: 'mcpClientNames',
label: '引用 MCP',
component: 'Select',
componentProps: {
placeholder: '请选择 MCP',
options: getDictOptions(DICT_TYPE.AI_MCP_CLIENT_NAME, 'string'),
mode: 'multiple',
allowClear: true,
},
},
{
fieldName: 'publicStatus',
label: '是否公开',
@@ -254,6 +272,16 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
: `引用${cellValue.length}`;
},
},
{
title: 'MCP',
field: 'mcpClientNames',
minWidth: 100,
formatter: ({ cellValue }) => {
return !cellValue || cellValue.length === 0
? '-'
: `引用${cellValue.length}`;
},
},
{
field: 'publicStatus',
title: '是否公开',

View File

@@ -41,9 +41,7 @@ async function handleDelete(row: AiModelChatRoleApi.ChatRole) {
});
try {
await deleteChatRole(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
});
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
hideLoading();
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,

View File

@@ -82,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Modal :title="getTitle" class="w-2/5">
<Form class="mx-4" />
</Modal>
</template>

View File

@@ -35,7 +35,7 @@ export function useFormSchema(): VbenFormSchema[] {
options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
allowClear: true,
},
rules: z.string().min(1, { message: '请输入平台' }),
rules: 'required',
},
{
fieldName: 'type',
@@ -56,7 +56,7 @@ export function useFormSchema(): VbenFormSchema[] {
label: 'API 秘钥',
component: 'ApiSelect',
componentProps: {
placeholder: '请选择API 秘钥',
placeholder: '请选择 API 秘钥',
api: getApiKeySimpleList,
labelField: 'name',
valueField: 'id',
@@ -69,12 +69,18 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '模型名字',
rules: 'required',
componentProps: {
placeholder: '请输入模型名字',
},
},
{
component: 'Input',
fieldName: 'model',
label: '模型标识',
rules: 'required',
componentProps: {
placeholder: '请输入模型标识',
},
},
{
fieldName: 'sort',
@@ -161,16 +167,28 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '模型名字',
component: 'Input',
componentProps: {
placeholder: '请输入模型名字',
allowClear: true,
},
},
{
fieldName: 'model',
label: '模型标识',
component: 'Input',
componentProps: {
placeholder: '请输入模型标识',
allowClear: true,
},
},
{
fieldName: 'platform',
label: '模型平台',
component: 'Input',
componentProps: {
placeholder: '请输入模型平台',
allowClear: true,
},
},
];
}
@@ -233,7 +251,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'temperature',
title: '温度参数',
minWidth: 80,
minWidth: 100,
},
{
title: '回复数 Token 数',
@@ -243,7 +261,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
title: '上下文数量',
field: 'maxContexts',
minWidth: 100,
minWidth: 120,
},
{
title: '操作',

View File

@@ -41,9 +41,7 @@ async function handleDelete(row: AiModelModelApi.Model) {
});
try {
await deleteModel(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
});
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
hideLoading();
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,

View File

@@ -77,7 +77,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Modal :title="getTitle" class="w-2/5">
<Form class="mx-4" />
</Modal>
</template>

View File

@@ -22,6 +22,9 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '工具名称',
rules: 'required',
componentProps: {
placeholder: '请输入工具名称',
},
},
{
component: 'Textarea',
@@ -52,6 +55,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '工具名称',
component: 'Input',
componentProps: {
placeholder: '请输入工具名称',
allowClear: true,
},
},
{
fieldName: 'status',
@@ -60,6 +67,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择状态',
},
},
{
@@ -80,14 +88,17 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'id',
title: '工具编号',
minWidth: 100,
},
{
field: 'name',
title: '工具名称',
minWidth: 120,
},
{
field: 'description',
title: '工具描述',
minWidth: 140,
},
{
field: 'status',
@@ -96,6 +107,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
minWidth: 80,
},
{
field: 'createTime',

View File

@@ -41,9 +41,7 @@ async function handleDelete(row: AiModelToolApi.Tool) {
});
try {
await deleteTool(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
});
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
hideLoading();
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,

View File

@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Modal :title="getTitle" class="w-2/5">
<Form class="mx-4" />
</Modal>
</template>

View File

@@ -143,6 +143,7 @@ const AI_DICT = {
AI_WRITE_LENGTH: 'ai_write_length', // AI 写作长度
AI_WRITE_TONE: 'ai_write_tone', // AI 写作语气
AI_WRITE_TYPE: 'ai_write_type', // AI 写作类型
AI_MCP_CLIENT_NAME: 'ai_mcp_client_name', // AI MCP Client 名字
} as const;
/** ========== IOT - 物联网模块 ========== */