starred/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2026-09-23 16:00:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: change style for agent (#11805)

Browse Source
This commit is contained in:
CityFun
2026-02-05 11:32:55 +00:00
committed by GitHub
parent 6cd130677e
commit d3cddd175a
4 changed files with 126 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/ai/agents/agent/add/index.vue
+27 -5
View File
@@ -17,7 +17,12 @@
</el-form-item>
<el-form-item :label="$t('aiTools.agents.provider')" prop="provider">
<el-select v-model="form.provider" @change="handleProviderChange">
<el-option v-for="item in providerOptions" :key="item" :label="item" :value="item" />
<el-option
v-for="item in providerOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item v-if="accountOptions.length > 0" :label="$t('aiTools.agents.account')" prop="accountId">
@@ -82,7 +87,7 @@ const open = ref(false);
const formRef = ref<FormInstance>();
const versions = ref<string[]>([]);
const accountOptions = ref<AI.AgentAccountItem[]>([]);
const providerOptions = ref<string[]>([]);
const providerOptions = ref<Array<{ label: string; value: string }>>([]);
const providerModels = ref<Record<string, AI.ProviderModelInfo[]>>({});
const manualModel = ref(false);
const appInfo = ref<App.AppDTO>();
@@ -146,16 +151,33 @@ const loadCompose = async () => {
form.dockerCompose = res.data.dockerCompose || '';
};
const providerLabelMap: Record<string, string> = {
openai: 'OpenAI',
ollama: 'Ollama',
minimax: 'MiniMax',
qwen: 'Qwen',
deepseek: 'DeepSeek',
anthropic: 'Anthropic',
gemini: 'Gemini',
};
const getProviderLabel = (value: string) => {
return providerLabelMap[value] || value;
};
const loadProviders = async () => {
const res = await getAgentProviders();
const data = res.data || [];
providerOptions.value = data.map((item) => item.provider);
providerOptions.value = data.map((item) => ({
value: item.provider,
label: getProviderLabel(item.provider),
}));
providerModels.value = data.reduce((acc, item) => {
acc[item.provider] = item.models || [];
return acc;
}, {} as Record<string, AI.ProviderModelInfo[]>);
if (!providerOptions.value.includes(form.provider) && providerOptions.value.length > 0) {
form.provider = providerOptions.value[0];
if (!providerOptions.value.find((item) => item.value === form.provider) && providerOptions.value.length > 0) {
form.provider = providerOptions.value[0].value;
}
setDefaultModel();
};
frontend/src/views/ai/agents/agent/index.vue
+52 -20
View File
@@ -1,7 +1,13 @@
<template>
<div>
<RouterMenu />
<LayoutContent :title="$t('aiTools.agents.agentList')">
<DockerStatus v-model:isActive="isActive" v-model:isExist="isExist" />
<LayoutContent
v-loading="loading"
v-if="isExist"
:class="{ mask: !isActive }"
:title="$t('aiTools.agents.agentList')"
>
<template #leftToolBar>
<el-button type="primary" @click="openCreate">{{ $t('aiTools.agents.createAgent') }}</el-button>
</template>
@@ -21,7 +27,11 @@
</template>
</el-table-column>
<el-table-column :label="$t('aiTools.agents.bridgePort')" prop="bridgePort" width="120" />
<el-table-column :label="$t('aiTools.agents.provider')" prop="provider" width="120" />
<el-table-column :label="$t('aiTools.agents.provider')" prop="provider" width="120">
<template #default="{ row }">
{{ getProviderLabel(row.provider) }}
</template>
</el-table-column>
<el-table-column :label="$t('aiTools.model.model')" prop="model" min-width="180" />
<el-table-column :label="$t('aiTools.agents.token')" width="120">
<template #default="{ row }">
@@ -42,10 +52,10 @@
/>
<fu-table-operations
:buttons="buttons"
min-width="300"
min-width="200"
:label="$t('commons.table.operate')"
fixed="right"
:ellipsis="5"
:ellipsis="2"
/>
</ComplexTable>
</template>
@@ -75,17 +85,42 @@ import ComposeLogs from '@/components/log/compose/index.vue';
import TerminalDialog from '@/views/container/container/terminal/index.vue';
import i18n from '@/lang';
import PortJumpDialog from '@/components/port-jump/index.vue';
import DockerStatus from '@/views/container/docker-status/index.vue';
const items = ref<AI.AgentItem[]>([]);
const loading = ref(false);
const addRef = ref();
const taskLogRef = ref();
const deleteRef = ref();
const composeLogRef = ref();
const dialogTerminalRef = ref();
const dialogPortJumpRef = ref();
const isActive = ref(false);
const isExist = ref(false);
const searchName = ref('');
const providerLabelMap: Record<string, string> = {
openai: 'OpenAI',
ollama: 'Ollama',
minimax: 'MiniMax',
qwen: 'Qwen',
deepseek: 'DeepSeek',
anthropic: 'Anthropic',
gemini: 'Gemini',
};
const getProviderLabel = (value: string) => {
return providerLabelMap[value] || value;
};
const buttons = [
{
label: i18n.global.t('menu.terminal'),
click: (row: AI.AgentItem) => openTerminal(row),
},
{
label: i18n.global.t('commons.button.log'),
click: (row: AI.AgentItem) => openLog(row),
},
{
label: i18n.global.t('commons.operate.start'),
click: (row: AI.AgentItem) => onOperate(row, 'start'),
@@ -100,14 +135,6 @@ const buttons = [
label: i18n.global.t('commons.operate.restart'),
click: (row: AI.AgentItem) => onOperate(row, 'restart'),
},
{
label: i18n.global.t('commons.button.log'),
click: (row: AI.AgentItem) => openLog(row),
},
{
label: i18n.global.t('menu.terminal'),
click: (row: AI.AgentItem) => openTerminal(row),
},
{
label: i18n.global.t('commons.button.delete'),
click: (row: AI.AgentItem) => onDelete(row),
@@ -121,14 +148,19 @@ const paginationConfig = reactive({
});
const search = async () => {
const req: SearchWithPage = {
page: paginationConfig.currentPage,
pageSize: paginationConfig.pageSize,
info: searchName.value || '',
};
const res = await pageAgents(req);
items.value = res.data.items || [];
paginationConfig.total = res.data.total || 0;
loading.value = true;
try {
const req: SearchWithPage = {
page: paginationConfig.currentPage,
pageSize: paginationConfig.pageSize,
info: searchName.value || '',
};
const res = await pageAgents(req);
items.value = res.data.items || [];
paginationConfig.total = res.data.total || 0;
} finally {
loading.value = false;
}
};
const openCreate = () => {
frontend/src/views/ai/agents/model/add/index.vue
+28 -9
View File
@@ -1,14 +1,19 @@
<template>
<DrawerPro v-model="open" :header="headerTitle" size="large" @close="handleClose">
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" v-loading="loading">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item :label="$t('aiTools.agents.provider')" prop="provider">
<el-select v-model="form.provider" @change="handleProviderChange" :disabled="form.id > 0">
<el-option v-for="item in providerOptions" :key="item" :label="item" :value="item" />
<el-option
v-for="item in providerOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('aiTools.agents.accountName')" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item :label="$t('aiTools.agents.baseUrl')" prop="baseURL">
<el-input v-model="form.baseURL" :disabled="form.provider !== 'ollama'" />
</el-form-item>
@@ -39,16 +44,28 @@ import { computed, onMounted, reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { Rules } from '@/global/form-rules';
import { createAgentAccount, getAgentProviders, updateAgentAccount } from '@/api/modules/ai';
import { MsgSuccess } from '@/utils/message';
import i18n from '@/lang';
const emit = defineEmits(['search']);
const open = ref(false);
const formRef = ref<FormInstance>();
const providerOptions = ref<string[]>([]);
const providerOptions = ref<Array<{ label: string; value: string }>>([]);
const providerBaseURL = ref<Record<string, string>>({});
const loading = ref(false);
const providerLabelMap: Record<string, string> = {
openai: 'OpenAI',
ollama: 'Ollama',
minimax: 'MiniMax',
qwen: 'Qwen',
deepseek: 'DeepSeek',
anthropic: 'Anthropic',
gemini: 'Gemini',
};
const getProviderLabel = (value: string) => {
return providerLabelMap[value] || value;
};
const form = reactive({
id: 0,
@@ -95,7 +112,6 @@ const submit = async () => {
remark: form.remark,
});
}
MsgSuccess();
emit('search');
open.value = false;
} finally {
@@ -147,13 +163,16 @@ const openDrawer = (params?: OpenParams) => {
const loadProviders = async () => {
const res = await getAgentProviders();
const data = res.data || [];
providerOptions.value = data.map((item) => item.provider);
providerOptions.value = data.map((item) => ({
value: item.provider,
label: getProviderLabel(item.provider),
}));
providerBaseURL.value = data.reduce((acc, item) => {
acc[item.provider] = item.baseUrl || '';
return acc;
}, {} as Record<string, string>);
if (!form.provider && providerOptions.value.length > 0) {
form.provider = providerOptions.value[0];
form.provider = providerOptions.value[0].value;
handleProviderChange();
}
};
frontend/src/views/ai/agents/model/index.vue
+19 -2
View File
@@ -11,8 +11,12 @@
</template>
<template #main>
<ComplexTable :data="items" :pagination-config="paginationConfig" @search="search">
<el-table-column :label="$t('aiTools.agents.provider')" prop="provider" width="120" />
<el-table-column :label="$t('aiTools.agents.accountName')" prop="name" min-width="200" />
<el-table-column :label="$t('commons.table.name')" prop="name" min-width="200" />
<el-table-column :label="$t('aiTools.agents.provider')" prop="provider" width="120">
<template #default="{ row }">
{{ getProviderLabel(row.provider) }}
</template>
</el-table-column>
<el-table-column :label="$t('aiTools.agents.baseUrl')" prop="baseUrl" min-width="200" />
<el-table-column :label="$t('aiTools.agents.apiKey')" prop="apiKey" min-width="160">
<template #default="{ row }">
@@ -53,6 +57,19 @@ import { dateFormat } from '@/utils/util';
const items = ref<AI.AgentAccountItem[]>([]);
const addRef = ref();
const searchName = ref('');
const providerLabelMap: Record<string, string> = {
openai: 'OpenAI',
ollama: 'Ollama',
minimax: 'MiniMax',
qwen: 'Qwen',
deepseek: 'DeepSeek',
anthropic: 'Anthropic',
gemini: 'Gemini',
};
const getProviderLabel = (value: string) => {
return providerLabelMap[value] || value;
};
const buttons = [
{