feat: change style for agent (#11805)

zhengkunwang223 · web-flow · commit d3cddd175a27 · 2026-02-05T11:32:55.000Z
diff --git a/frontend/src/views/ai/agents/agent/add/index.vue b/frontend/src/views/ai/agents/agent/add/index.vue
@@ -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();
 };
diff --git a/frontend/src/views/ai/agents/agent/index.vue b/frontend/src/views/ai/agents/agent/index.vue
@@ -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 = () => {
diff --git a/frontend/src/views/ai/agents/model/add/index.vue b/frontend/src/views/ai/agents/model/add/index.vue
@@ -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();
     }
 };
diff --git a/frontend/src/views/ai/agents/model/index.vue b/frontend/src/views/ai/agents/model/index.vue
@@ -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 = [
     {
