@epxing/business 5.3.0-beta.1 → 5.3.0-beta.3

package/src/base/ServiceMenu.vue

@@ -183,8 +183,9 @@ export default {
       this.clickItem = { id: item.id, ...item }
       const { detailPageFlag, detailPageFlagM } = this.$configs
       // this.load = false
-      this.pageFlag = this.mode === 'pc' ? detailPageFlag : detailPageFlagM
-      this.$emit('createPage', {
+      const isMobileMenu = this.mode === 'move' || (this.mode === 'all' && item.TERMINAL === 'move')
+      this.pageFlag = isMobileMenu ? detailPageFlagM : detailPageFlag
+      this.emitCreatePage({
         metaId: 'FM_MODULE',
         flag: this.pageFlag,
         component: 'entity-add-page',
@@ -207,7 +208,7 @@ export default {
         return
       }
       const { detailPageFlag, detailPageFlagM } = this.$configs
-      this.$emit('createPage', {
+      this.emitCreatePage({
         metaId: 'FM_MODULE',
         flag: this.mode === 'pc' ? detailPageFlag : detailPageFlagM,
         component: 'entity-add-page',
@@ -224,7 +225,7 @@ export default {
       const { detailPageFlag, detailPageFlagM } = this.configs
       this.load = false
       this.pageFlag = this.mode === 'pc' ? detailPageFlag : detailPageFlagM
-      this.$emit('createPage', {
+      this.emitCreatePage({
         metaId: 'FM_MODULE',
         flag: this.pageFlag,
         pageType: 'EDIT',
@@ -256,7 +257,7 @@ export default {
       const defaultValue = { }
       defaultValue[field] = id
       defaultValue[field + '#'] = text
-      this.$emit('createPage', {
+      this.emitCreatePage({
         metaId: 'FM_MODULE',
         flag: this.mode === 'pc' ? addPageFlag : addPageFlagM,
         component: 'entity-add-page',

package/src/components/AiList.vue

@@ -1,132 +1,458 @@
-<script>
-// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+<template>
+  <div class="ai-registry" :style="{ height: registryHeight ? registryHeight + 'px' : null }" v-loading="registryLoading">
+    <div class="ai-registry__heading">
+      <div><h2>模型注册</h2><p>按接入组管理模型，一次配置连接，按需添加多个模型。</p></div>
+      <el-button size="small" icon="el-icon-plus" @click="openGroup()">新建接入组</el-button>
+    </div>
+    <el-alert v-if="registryError" :title="registryError" type="error" :closable="false" show-icon>
+      <el-button type="text" @click="reloadData">重新加载</el-button>
+    </el-alert>
+    <div v-if="registryReady" class="ai-registry__layout">
+      <aside class="ai-registry__groups">
+        <div class="ai-registry__between"><strong>接入组</strong><span class="ai-registry__muted">{{ realGroups.length }} 个组</span></div>
+        <el-input v-model="groupKeyword" size="small" placeholder="搜索接入组" prefix-icon="el-icon-search" clearable />
+        <div class="ai-registry__group-list">
+          <button v-for="group in visibleGroups" :key="group.ID || 'ungrouped'" type="button" class="ai-registry__group" :class="{ 'is-active': activeGroupId === group.ID }" @click="selectGroup(group.ID)">
+            <el-image v-if="group.LOGO" class="ai-registry__group-logo" :src="$util.getFileUrl(group.LOGO)" fit="contain"><template #error><i  class="el-icon-folder-opened" /></template></el-image><i v-else :class="group.ID ? 'el-icon-folder-opened' : 'el-icon-folder'" />
+            <span><strong>{{ group.NAME }}</strong><small>{{ group.ID ? codeName(providerOptions, group.TYPE) : '保留原有独立连接' }}</small></span>
+            <em>{{ group.MODEL_COUNT }}</em>
+          </button>
+          <p v-if="!visibleGroups.length" class="ai-registry__muted">没有匹配的接入组</p>
+        </div>
+        <p class="ai-registry__group-tip"><i class="el-icon-info" /> 一个组对应一套接入配置，同一提供商可创建多个接入组。</p>
+      </aside>
+      <div class="ai-registry__detail">
+        <section class="ai-registry__panel" v-if="activeGroup.ID">
+          <div class="ai-registry__between">
+            <div class="ai-registry__identity"><span class="ai-registry__icon"><el-image v-if="activeGroup.LOGO" :src="$util.getFileUrl(activeGroup.LOGO)" fit="contain"><template #error><i  class="el-icon-connection" /></template></el-image><i v-else class="el-icon-connection" /></span><div><h3>{{ activeGroup.NAME }}</h3><p v-show="connectionExpanded">{{ activeGroup.NOTE || '管理组内模型与共享连接' }}</p></div></div>
+            <div><el-button size="small" type="text" :icon="connectionExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" @click="connectionExpanded = !connectionExpanded">{{ connectionExpanded ? '收起' : '展开' }}</el-button><el-button size="small" icon="el-icon-setting" @click="openGroup(activeGroup)">编辑组配置</el-button></div>
+          </div>
+          <div v-show="connectionExpanded" class="ai-registry__connection">
+            <div><small>模型提供商</small><span>{{ codeName(providerOptions, activeGroup.TYPE) }}</span></div>
+            <div><small>接口基础地址</small><code>{{ activeGroup.BASE_URL }}</code></div>
+            <div><small>接口密钥</small><span>{{ activeGroup.HAS_SECRET ? '•••••••••••• 已配置' : '未配置' }}</span></div>
+          </div>
+          <div v-show="connectionExpanded" class="ai-registry__notice"><i class="el-icon-link" /> 组内模型共用以上连接配置，修改后对本组全部模型生效。</div>
+        </section>
+        <el-alert v-else title="未分组模型继续使用各自的原有连接配置。编辑模型并选择接入组后，将改为使用组内共享连接。" type="info" :closable="false" show-icon />
+        <section class="ai-registry__panel ai-registry__models">
+          <div class="ai-registry__between"><h3>{{ activeGroup.ID ? '组内模型' : '未分组模型' }} <el-tag size="small" type="info">{{ activeGroup.MODEL_COUNT || 0 }} 个</el-tag></h3><el-button type="primary" size="small" icon="el-icon-plus" @click="openModel()">添加模型</el-button></div>
+          <div class="ai-registry__filters">
+            <el-input v-model="modelKeyword" size="small" placeholder="搜索模型名称或编号" prefix-icon="el-icon-search" clearable @input="scheduleSearch" />
+            <el-select v-model="modelCategory" size="small" placeholder="全部分类" clearable @change="getData(1)"><el-option v-for="item in categoryOptions" :key="item.code" :label="item.name" :value="item.code" /></el-select>
+            <el-select v-model="modelStatus" size="small" placeholder="全部状态" clearable @change="getData(1)"><el-option label="已启用" value="1" /><el-option label="已停用" value="0" /></el-select>
+          </div>
+          <el-alert v-if="modelError" :title="modelError" type="error" :closable="false" show-icon />
+          <div class="ai-registry__table">
+          <el-table v-loading="loading" :data="data" height="100%" empty-text="暂无模型，请添加模型或调整筛选条件">
+            <el-table-column label="模型名称 / 编号" min-width="220"><template #default="scope"><div class="ai-registry__name">{{ scope.row.NAME }} <el-tag v-if="scope.row.IS_DEFAULT === '1'" size="small">分类默认</el-tag></div><code class="ai-registry__model-code">{{ scope.row.CODE }}</code></template></el-table-column>
+            <el-table-column label="分类" min-width="100"><template #default="scope"><el-tag size="small" type="info" class="ai-registry__category" :class="'ai-registry__category--' + scope.row.MODE_TYPE">{{ codeName(categoryOptions, scope.row.MODE_TYPE) }}</el-tag></template></el-table-column>
+            <el-table-column label="能力" min-width="160"><template #default="scope"><el-tag v-if="scope.row.THINK === '1'" size="small" type="info">慢思考</el-tag> <el-tag v-if="scope.row.SEARCH === '1'" size="small" type="info">联网搜索</el-tag> <el-tag v-if="scope.row.MULTIMODAL === '1'" size="small" type="info">多模态</el-tag><span v-if="!hasCapabilities(scope.row)" class="ai-registry__muted">—</span></template></el-table-column>
+            <el-table-column label="输入上限 / 向量维度" min-width="170"><template #default="scope">{{ formatLimit(scope.row.MAX_TOKEN) }} <span class="ai-registry__muted">{{ scope.row.MODE_TYPE === 'embedding' ? '维' : 'tokens' }}</span></template></el-table-column>
+            <el-table-column label="状态" width="100"><template #default="scope"><el-switch :model-value="scope.row.ENABLE === '1'" :disabled="mutationLoading" @change="toggleModel(scope.row, $event)" /></template></el-table-column>
+            <el-table-column label="操作" width="220"><template #default="scope"><el-button size="small" type="text" @click="openModel(scope.row)">编辑</el-button><el-button size="small" type="text" :disabled="scope.row.IS_DEFAULT === '1' || scope.row.ENABLE !== '1' || mutationLoading" @click="setDefault(scope.row)">设为默认</el-button><el-button size="small" type="text" class="ai-registry__delete" :disabled="mutationLoading" @click="deleteModel(scope.row)">删除</el-button></template></el-table-column>
+          </el-table>
+          </div>
+          <div class="ai-registry__footer"><span class="ai-registry__muted">默认模型按分类设置，跨接入组保持唯一。</span><el-pagination layout="total, prev, pager, next" :total="total" :current-page="currentPage" :page-size="20" @current-change="getData" /></div>
+        </section>
+      </div>
+    </div>
+    <el-dialog :title="groupForm.ID ? '编辑组配置' : '新建接入组'" v-model="groupDialog" width="640px" append-to-body :close-on-click-modal="false" :before-close="closeGroup">
+      <div class="ai-registry__dialog">
+        <el-alert :title="groupForm.ID ? '修改连接配置将影响本组全部模型；密钥留空时保留原配置。' : '先配置接入渠道，再向组内添加模型。以下连接信息由组内模型共用。'" type="info" :closable="false" show-icon />
+        <el-form ref="groupForm" :model="groupForm" label-position="top" :rules="groupRules" size="small">
+          <el-form-item label="组图标（可选）"><div class="ai-registry__logo-editor"><el-image v-if="groupForm.LOGO" class="ai-registry__logo-preview" :src="$util.getFileUrl(groupForm.LOGO)" fit="contain" /><el-upload action="#" accept=".png,.jpg,.jpeg,.gif" :show-file-list="false" :http-request="uploadGroupLogo" :disabled="saving || logoUploading"><el-button size="small" :loading="logoUploading" :disabled="saving">上传图标</el-button></el-upload><el-button v-if="groupForm.LOGO" type="text" :disabled="saving || logoUploading" @click="groupForm.LOGO = ''">移除</el-button></div></el-form-item>
+          <div class="ai-registry__form-row"><el-form-item label="组名称" prop="NAME"><el-input v-model.trim="groupForm.NAME" maxlength="100" /></el-form-item><el-form-item label="模型提供商" prop="TYPE"><el-select v-model="groupForm.TYPE"><el-option v-for="item in providerOptions" :key="item.code" :label="item.name" :value="item.code" /></el-select></el-form-item></div>
+          <el-form-item label="接口基础地址" prop="BASE_URL"><el-input v-model.trim="groupForm.BASE_URL" placeholder="https://…/v1" maxlength="1024" /></el-form-item>
+          <el-form-item :label="groupForm.ID ? '接口密钥（留空保留原值）' : '接口密钥'" prop="API_SECRET" :rules="groupForm.ID ? [] : [{ required: true, message: '请输入接口密钥', trigger: 'blur' }]"><el-input v-model="groupForm.API_SECRET" type="password" autocomplete="new-password" maxlength="1024" /></el-form-item>
+          <el-form-item label="应用 ID（可选）"><el-input v-model.trim="groupForm.APP_ID" /></el-form-item><el-form-item label="分组说明（可选）"><el-input v-model.trim="groupForm.NOTE" maxlength="500" /></el-form-item>
+        </el-form>
+      </div>
+      <template #footer><span ><el-button size="small" :disabled="saving || logoUploading" @click="groupDialog = false">取消</el-button><el-button size="small" type="primary" :loading="saving" :disabled="logoUploading" @click="saveGroup">{{ groupForm.ID ? '保存组配置' : '创建并添加模型' }}</el-button></span></template>
+    </el-dialog>
+    <el-dialog :title="modelForm.ID ? '编辑模型' : '添加模型'" v-model="modelDialog" width="680px" append-to-body :close-on-click-modal="false" :before-close="closeModel">
+      <div class="ai-registry__dialog">
+        <el-alert :title="modelForm.GROUP_ID ? '自动使用所选接入组的提供商、接口地址和密钥。' : '此模型尚未分组，继续保留原有连接；选择接入组后将使用组配置。'" type="info" :closable="false" show-icon />
+        <el-form ref="modelForm" :model="modelForm" :rules="modelRules" label-position="top" size="small">
+          <el-form-item label="所属接入组" prop="GROUP_ID"><el-select v-model="modelForm.GROUP_ID"><el-option v-if="modelForm.ID && !originalModelGroup" label="未分组（保留原配置）" value="" /><el-option v-for="group in realGroups" :key="group.ID" :label="group.NAME" :value="group.ID" /></el-select></el-form-item>
+          <div class="ai-registry__form-row"><el-form-item label="模型名称" prop="NAME"><el-input v-model.trim="modelForm.NAME" maxlength="100" /></el-form-item><el-form-item label="模型编号" prop="CODE"><el-input v-model.trim="modelForm.CODE" maxlength="100" /></el-form-item></div>
+          <div class="ai-registry__form-row"><el-form-item label="模型分类" prop="MODE_TYPE"><el-select v-model="modelForm.MODE_TYPE"><el-option v-for="item in categoryOptions" :key="item.code" :label="item.name" :value="item.code" /></el-select></el-form-item><el-form-item :label="modelForm.MODE_TYPE === 'embedding' ? '向量维度' : '输入上限（tokens）'" prop="MAX_TOKEN"><el-input-number v-model="modelForm.MAX_TOKEN" :min="1" :max="2147483647" :precision="0" /></el-form-item></div>
+          <el-form-item label="模型能力"><el-checkbox v-model="modelForm.THINK" true-label="1" false-label="0">慢思考</el-checkbox><el-checkbox v-model="modelForm.SEARCH" true-label="1" false-label="0">联网搜索</el-checkbox><el-checkbox v-model="modelForm.MULTIMODAL" true-label="1" false-label="0">多模态</el-checkbox></el-form-item>
+          <el-form-item><el-checkbox v-model="modelForm.ENABLE" true-label="1" false-label="0">启用模型</el-checkbox><el-checkbox v-model="modelForm.IS_DEFAULT" true-label="1" false-label="0">设为该分类默认模型</el-checkbox></el-form-item>
+          <div v-if="modelForm.ID && !modelForm.GROUP_ID" class="ai-registry__legacy"><p class="ai-registry__muted">原有独立连接配置</p><el-form-item label="模型提供商"><el-select v-model="modelForm.TYPE"><el-option v-for="item in providerOptions" :key="item.code" :label="item.name" :value="item.code" /></el-select></el-form-item><el-form-item label="接口基础地址"><el-input v-model.trim="modelForm.BASE_URL" /></el-form-item><el-form-item label="接口密钥（留空保留原值）"><el-input v-model="modelForm.API_SECRET" type="password" autocomplete="new-password" /></el-form-item><el-form-item label="应用 ID"><el-input v-model.trim="modelForm.APP_ID" /></el-form-item></div>
+          <p class="ai-registry__muted">模型编号需与接入渠道提供的调用标识一致。</p>
+        </el-form>
+      </div>
+      <template #footer><span ><el-button size="small" :disabled="saving" @click="modelDialog = false">取消</el-button><el-button size="small" type="primary" :loading="saving" @click="saveModel">{{ modelForm.ID ? '保存模型' : '添加到本组' }}</el-button></span></template>
+    </el-dialog>
+  </div>
+</template>
 
+<script>
 import EntityList from '@epxing/components/src/entity-list'
+
+const modelFields = ['ID', 'NAME', 'CODE', 'GROUP_ID', 'MODE_TYPE', 'MAX_TOKEN', 'ENABLE', 'IS_DEFAULT', 'THINK', 'SEARCH', 'MULTIMODAL']
+
 export default {
   name: 'epx-ai-list',
+  // 保留平台列表的页面上下文、权限入口和刷新事件，重写注册页布局与取数。
   extends: EntityList,
-  methods: {
-    command (key, item) {
-      if (key === 'edit') {
-        this.editEntity({}, item)
-      } else if (key === 'remove') {
-        this.removeEntity({}, item)
-      } else if (key === 'default') {
-        this.setDefault(item)
+  data () {
+    return {
+      data: [],
+      loading: false,
+      registryHeight: 0,
+      connectionExpanded: false,
+      currentPage: 1,
+      total: 0,
+      groups: [],
+      activeGroupId: null,
+      groupKeyword: '',
+      modelKeyword: '',
+      modelCategory: '',
+      modelStatus: '',
+      registryReady: false,
+      registryLoading: false,
+      registryError: '',
+      modelError: '',
+      providerOptions: [],
+      categoryOptions: [],
+      groupDialog: false,
+      modelDialog: false,
+      groupForm: {},
+      modelForm: {},
+      originalModelGroup: '',
+      saving: false,
+      logoUploading: false,
+      mutationLoading: false,
+      // 序号隔离快速切组、搜索产生的旧响应。
+      requestSerial: 0,
+      searchTimer: null,
+      groupRules: {
+        NAME: [{ required: true, message: '请输入组名称', trigger: 'blur' }],
+        TYPE: [{ required: true, message: '请选择模型提供商', trigger: 'change' }],
+        BASE_URL: [{ required: true, message: '请输入接口基础地址', trigger: 'blur' }]
+      },
+      modelRules: {
+        NAME: [{ required: true, message: '请输入模型名称', trigger: 'blur' }],
+        CODE: [{ required: true, message: '请输入模型编号', trigger: 'blur' }],
+        MODE_TYPE: [{ required: true, message: '请选择模型分类', trigger: 'change' }],
+        MAX_TOKEN: [{ required: true, type: 'number', min: 1, message: '请输入正整数', trigger: 'change' }]
       }
+    }
+  },
+  computed: {
+    realGroups () {
+      return this.groups.filter(group => group.ID)
     },
-    setDefault (item) {
-      this.$http.update({
-        action: 'setDefault',
-        entityId: this.$metaId,
-        id: item.ID
-      })
-        .then(() => {
-          this.$message.success('修改成功')
-          this.reloadData()
-        })
-        .catch(err => {
-          this.$message.error(err.message)
-        })
+    visibleGroups () {
+      const keyword = this.groupKeyword.trim().toLowerCase()
+      return this.groups.filter(group => group.NAME.toLowerCase().includes(keyword))
+    },
+    activeGroup () {
+      return this.groups.find(group => group.ID === this.activeGroupId) || {}
     }
   },
-  render () {
-    return (
-      <div class="container">
-        <ul class="ai-list">
-          <li class="ai-item ai-item--add" onClick={() => this.addEntity({})}>
-            <div class="ai-item__add-btn">
-              <i class="el-icon-plus"></i>
-            </div>
-            <span>添加大模型</span>
-          </li>
-          {
-            this.data.map(item => (
-              <li class="ai-item" onClick={() => this.viewEntity({}, item)}>
-                <div class="ai-item__content">
-                  { item.LOGO && <img src={this.$util.getFileUrl(item.LOGO)} /> }
-                </div>
-                <div class="ai-item__title">
-                  <span>{item.NAME}{item.IS_DEFAULT === '1' && <epx-tag plain class="ai-item__default">默认</epx-tag>}</span>
-                  <el-dropdown class="ai-item__dropdown" onCommand={command => this.command(command, item)} v-slots={{
-                    dropdown: () => (<el-dropdown-menu>
-                      <el-dropdown-item command="edit"><i class="el-icon-edit-outline"></i>编辑</el-dropdown-item>
-                      {item.IS_DEFAULT !== '1' && <el-dropdown-item command="default"><i class="el-icon-star-off"></i>设为默认</el-dropdown-item>}
-                      <el-dropdown-item command="remove" divided style={{ color: 'red' }}><i class="el-icon-delete"></i>删除</el-dropdown-item>
-                    </el-dropdown-menu>)
-                  }}>
-                    <i class="ai-item__operate el-icon-more" onClick={e => e.stopPropagation()} ></i>
-
-                  </el-dropdown>
-                </div>
-              </li>
-            ))
-          }
-
-        </ul>
-      </div>
-    )
+  mounted () {
+    this.registryPage = this.$el.closest('.epx-base-page')
+    if (this.registryPage) {
+      this.registryResizeObserver = new ResizeObserver(this.updateRegistryHeight)
+      this.registryResizeObserver.observe(this.registryPage)
+      this.updateRegistryHeight()
+    }
+  },
+  beforeUnmount () {
+    if (this.registryResizeObserver) this.registryResizeObserver.disconnect()
+    clearTimeout(this.searchTimer)
+    this.requestSerial++
+  },
+  methods: {
+    updateRegistryHeight () {
+      const page = this.registryPage
+      if (!page || !page.clientHeight) return
+      const offset = this.$el.getBoundingClientRect().top - page.getBoundingClientRect().top + page.scrollTop
+      const margin = parseFloat(getComputedStyle(this.$el).marginBottom) || 0
+      this.registryHeight = Math.max(0, Math.floor(page.clientHeight - offset - margin))
+    },
+    initComponent () {
+      this.reloadData()
+    },
+    async reloadData () {
+      if (this.registryLoading) return
+      this.registryLoading = true
+      this.registryError = ''
+      try {
+        // 摘要只含安全连接信息与服务端统计；代码项直接复用平台码表。
+        const [groups, providers, categories] = await Promise.all([
+          this.$http.$post({ entityId: this.$metaId, action: 'registryGroups' }),
+          this.$http.getCodes({ key: 'AI_TYPE' }),
+          this.$http.getCodes({ key: 'MODE_FUN' })
+        ])
+        this.groups = groups
+        this.providerOptions = providers
+        this.categoryOptions = categories
+        if (!groups.some(group => group.ID === this.activeGroupId)) this.activeGroupId = groups.length ? groups[0].ID : ''
+        this.registryReady = true
+        await this.getData(this.currentPage)
+      } catch (err) {
+        this.registryError = (err && (err.msg || err.message)) || '加载模型接入组失败'
+        this.$message.error(this.registryError)
+      } finally {
+        this.registryLoading = false
+      }
+    },
+    async getData (page = 1, callback) {
+      if (!this.registryReady) return
+      const serial = ++this.requestSerial
+      this.loading = true
+      this.modelError = ''
+      this.currentPage = Number(page) || 1
+      try {
+        // 标准列表接口负责分页与过滤，显式投影避免列表传输密钥。
+        const params = {
+          entityId: this.$metaId,
+          page: this.currentPage,
+          limit: 20,
+          columnFields: modelFields.map(attriName => ({ attriName })),
+          order_field: 'NAME',
+          order_mode: 'asc',
+          'scope.MODE_TYPE': this.modelCategory,
+          'scope.ENABLE': this.modelStatus,
+          ...(this.activeGroupId ? { 'scope.GROUP_ID': this.activeGroupId } : { 'scope.GROUP_ID#is_null': '1' })
+        }
+        const filters = (this.scopeParams || []).map(item => ({ ...item }))
+        if (this.modelKeyword.trim()) {
+          if (filters.length) filters[filters.length - 1].link = 'and'
+          filters.push(
+            { lb: '(', field: 'NAME', mode: 'like', values: this.modelKeyword.trim(), link: 'or' },
+            { field: 'CODE', mode: 'like', values: this.modelKeyword.trim(), rb: ')' }
+          )
+        }
+        if (filters.length) params.scopeParams = JSON.stringify(filters)
+        const result = await this.$http.list(params)
+        if (serial !== this.requestSerial) return
+        this.data = result.entitys || []
+        this.total = result.total || 0
+        if (callback) callback(this.data)
+      } catch (err) {
+        if (serial !== this.requestSerial) return
+        this.data = []
+        this.total = 0
+        this.modelError = (err && (err.msg || err.message)) || '加载模型失败'
+        this.$message.error(this.modelError)
+      } finally {
+        if (serial === this.requestSerial) this.loading = false
+      }
+    },
+    selectGroup (id) {
+      this.activeGroupId = id
+      this.modelKeyword = ''
+      this.modelCategory = ''
+      this.modelStatus = ''
+      clearTimeout(this.searchTimer)
+      this.getData(1)
+    },
+    scheduleSearch () {
+      clearTimeout(this.searchTimer)
+      this.searchTimer = setTimeout(() => this.getData(1), 250)
+    },
+    codeName (options, code) {
+      const item = options.find(item => item.code === code)
+      return item ? item.name : code
+    },
+    formatLimit (value) {
+      return Number(value || 0).toLocaleString()
+    },
+    hasCapabilities (model) {
+      return ['THINK', 'SEARCH', 'MULTIMODAL'].some(key => model[key] === '1')
+    },
+    openGroup (group) {
+      this.groupForm = { NAME: '', TYPE: '', BASE_URL: '', APP_ID: '', NOTE: '', LOGO: '', ...group, API_SECRET: '' }
+      this.groupDialog = true
+      this.$nextTick(() => this.$refs.groupForm.clearValidate())
+    },
+    async uploadGroupLogo ({ file }) {
+      this.logoUploading = true
+      try {
+        const meta = await this.$http.getMeta({ metaId: 'FM_AI_MODEL_GROUP' })
+        const attribute = meta.attributes.LOGO
+        if (!attribute) throw new Error('接入组图标字段尚未配置')
+        const result = await this.$http.$post({ action: 'uploadOfEntity', metaId: 'FM_AI_MODEL_GROUP', attributeId: attribute.id, file }, { requestType: 'formData' })
+        const id = result.bean || result.id
+        if (!id) throw new Error((result.fileCheck && result.fileCheck.checkResult) || '上传图标失败')
+        this.groupForm.LOGO = id
+      } catch (err) {
+        this.$message.error((err && (err.msg || err.message)) || '上传图标失败')
+      } finally {
+        this.logoUploading = false
+      }
+    },
+    async saveGroup () {
+      if (this.saving || this.logoUploading) return
+      const valid = await this.$refs.groupForm.validate().catch(() => false)
+      if (!valid) return
+      this.saving = true
+      const create = !this.groupForm.ID
+      try {
+        const id = await this.$http.$post({ entityId: this.$metaId, action: 'saveModelGroup', bean: { ...this.groupForm } })
+        this.groupForm.API_SECRET = ''
+        this.groupDialog = false
+        this.activeGroupId = id
+        this.currentPage = 1
+        await this.reloadData()
+        this.$message.success('接入组已保存')
+        if (create && !this.registryError) this.openModel()
+      } catch (err) {
+        this.$message.error((err && (err.msg || err.message)) || '保存接入组失败')
+      } finally {
+        this.saving = false
+      }
+    },
+    async openModel (model) {
+      if (!model && !this.activeGroupId) {
+        if (!this.realGroups.length) return this.openGroup()
+        this.selectGroup(this.realGroups[0].ID)
+      }
+      try {
+        // 标准详情读取保留旧模型的独立连接，密钥始终留空，不将脱敏值回写。
+        const detail = model ? await this.$http.get({ entityId: this.$metaId, id: model.ID }) : null
+        const value = detail ? detail.data : {}
+        this.modelForm = {
+          NAME: '',
+          CODE: '',
+          GROUP_ID: this.activeGroupId,
+          MODE_TYPE: 'text',
+          MAX_TOKEN: 32768,
+          ENABLE: '1',
+          IS_DEFAULT: '0',
+          THINK: '0',
+          SEARCH: '0',
+          MULTIMODAL: '0',
+          ...value,
+          API_SECRET: ''
+        }
+        this.modelForm.GROUP_ID = this.modelForm.GROUP_ID || ''
+        this.modelForm.MAX_TOKEN = Number(this.modelForm.MAX_TOKEN)
+        this.originalModelGroup = this.modelForm.GROUP_ID
+        this.modelDialog = true
+        this.$nextTick(() => this.$refs.modelForm.clearValidate())
+      } catch (err) {
+        this.$message.error((err && (err.msg || err.message)) || '读取模型配置失败')
+      }
+    },
+    async saveModel () {
+      if (this.saving) return
+      const valid = await this.$refs.modelForm.validate().catch(() => false)
+      if (!valid) return
+      this.saving = true
+      try {
+        await this.$http.$post({ entityId: this.$metaId, action: 'saveRegistryModel', bean: { ...this.modelForm } })
+        this.modelForm.API_SECRET = ''
+        this.modelDialog = false
+        this.activeGroupId = this.modelForm.GROUP_ID || ''
+        await this.reloadData()
+        this.$message.success('模型已保存')
+      } catch (err) {
+        this.$message.error((err && (err.msg || err.message)) || '保存模型失败')
+      } finally {
+        this.saving = false
+      }
+    },
+    async toggleModel (model, enabled) {
+      this.mutationLoading = true
+      try {
+        await this.$http.$post({ entityId: this.$metaId, action: 'setModelEnabled', id: model.ID, enabled: enabled ? '1' : '0' })
+        await this.reloadData()
+      } catch (err) {
+        this.$message.error((err && (err.msg || err.message)) || '修改模型状态失败')
+      } finally {
+        this.mutationLoading = false
+      }
+    },
+    async setDefault (model) {
+      this.mutationLoading = true
+      try {
+        await this.$http.$post({ entityId: this.$metaId, action: 'setDefault', id: model.ID })
+        await this.reloadData()
+        this.$message.success('已设置分类默认模型')
+      } catch (err) {
+        this.$message.error((err && (err.msg || err.message)) || '设置默认模型失败')
+      } finally {
+        this.mutationLoading = false
+      }
+    },
+    async deleteModel (model) {
+      try {
+        await this.$confirm('确认删除模型“' + model.NAME + '”？删除后无法恢复。', '删除模型', { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' })
+        this.mutationLoading = true
+        await this.$http.removeMulti({ entityId: this.$metaId, ids: model.ID })
+        await this.reloadData()
+        this.$message.success('模型已删除')
+      } catch (err) {
+        if (err !== 'cancel' && err !== 'close') this.$message.error((err && (err.msg || err.message)) || '删除模型失败')
+      } finally {
+        this.mutationLoading = false
+      }
+    },
+    closeGroup (done) {
+      if (!this.saving && !this.logoUploading) { this.groupForm.API_SECRET = ''; done() }
+    },
+    closeModel (done) {
+      if (!this.saving) { this.modelForm.API_SECRET = ''; done() }
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.ai-list {
-  display: flex;
-  flex-wrap: wrap;
-}
-.ai-item {
-  margin: 10px;
-  width: calc(16.6% - 20px);
-  background: var(--epx-bg-card);
-  border-radius: var(--epx-radius-base);
-  overflow: hidden;
-}
-.ai-item__content {
-  width: 100%;
-  height: 132px;
-  background: url(@/assets/images/ai_bg.webp) no-repeat center;
-  background-size:cover ;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  >img {
-    height: 80px;
-  }
-}
-.ai-item__title {
-  padding: 0 20px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.ai-item__operate {
-  cursor: pointer;
-}
-.ai-item--add {
-  color: #444;
-  line-height: 20px;
+.ai-registry {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-.ai-item__add-btn {
-  width: 100px;
-  height: 100px;
-  border: 1px dashed var(--epx-border);
-  margin-bottom: 10px;
-  text-align: center;
-  i {
-    font-size: 28px;
-    line-height: 100px;
-    color: var(--epx-text-secondary);
+  overflow: hidden;
+  padding: 12px 16px;
+  color: var(--color-text-primary, #444);
+  h2, h3, p { margin: 0; }
+  h2 { font-size: 18px; font-weight: 600; white-space: nowrap; }
+  h3 { font-size: 16px; font-weight: 600; }
+  &__heading, &__between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+  &__heading { flex-shrink: 0; margin-bottom: 12px; > div { display: flex; align-items: baseline; gap: 12px; } p { font-size: 12px; color: var(--color-text-secondary, #888); } }
+  &__layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; overflow: hidden; }
+  &__groups, &__panel { border-radius: 4px; background: var(--background-color, #fff); padding: 16px; }
+  &__groups { padding: 16px; display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: hidden; > :not(.ai-registry__group-list) { flex-shrink: 0; } }
+  &__group-list { flex: 1; min-height: 0; overflow-y: auto; }
+  &__group-logo { width: 32px; height: 32px; flex-shrink: 0; }
+  &__logo-editor { display: flex; align-items: center; gap: 12px; }
+  &__logo-preview { width: 48px; height: 48px; }
+  &__group { display: flex; align-items: center; gap: 12px; padding: 16px 12px; margin-bottom: 8px; width: 100%; border: 1px solid transparent; border-radius: 4px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; strong { display: block; font-weight: 500; } small { display: block; margin-top: 4px; color: var(--color-text-secondary, #888); } em { margin-left: auto; font-style: normal; } &:hover { background: var(--background-color-base, #f5f7fa); } &.is-active { background: var(--epx-bg-card, #edf5ff); border-color: transparent; color: var(--el-color-primary, #1765c1); box-shadow: inset 2px 0 #0874e7; } }
+  &__group-tip { font-size: 12px; line-height: 1.8; color: var(--color-text-secondary, #888); border-top: 1px solid var(--border-color-base, #e4e7ed); padding-top: 16px; }
+  &__detail { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; overflow: hidden; > :not(.ai-registry__models) { flex-shrink: 0; } }
+  &__models { flex: 1; min-height: 0; display: flex; flex-direction: column; > :not(.ai-registry__table) { flex-shrink: 0; } }
+  &__table { flex: 1; min-height: 0; overflow: hidden; &:deep() { .el-table td, .el-table th { padding: 4px 0; } .el-table .cell { line-height: 18px; } } }
+  &__identity { display: flex; gap: 12px; align-items: center; p { margin-top: 8px; color: var(--color-text-secondary, #888); } }
+  &__icon { display: grid; place-items: center; height: 36px; width: 36px; flex-shrink: 0; background: var(--background-color-base, #f2f3f7); font-size: 22px; border-radius: 4px; .el-image { width: 32px; height: 32px; } }
+  &__connection { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 24px; margin-top: 20px; padding: 20px 0; border-top: 1px solid var(--border-color-base, #e4e7ed); small { display: block; margin-bottom: 8px; color: var(--color-text-secondary, #888); } code { font-size: 13px; overflow-wrap: anywhere; } }
+  &__notice { background: var(--background-color-base, #f5f7fa); padding: 12px; color: var(--color-text-secondary, #888); font-size: 13px; }
+  &__filters { display: flex; gap: 12px; margin: 12px 0; > .el-input { max-width: 280px; } > .el-select { max-width: 150px; } }
+  &__name { font-weight: 600; line-height: 20px; }
+  &__model-code { display: block; line-height: 14px; font-size: 11px; color: var(--color-text-secondary, #888); }
+  &__category {
+    font-weight: 600;
+    &--text { color: var(--el-color-primary, #1765c1); background: var(--epx-bg, #eaf3ff); border-color: var(--epx-border, #cbdfff); }
+    &--multimodal { color: var(--epx-text, #7543bd); background: var(--epx-bg, #f3ecff); border-color: var(--epx-border, #e1d0fa); }
+    &--embedding { color: var(--epx-text, #21844a); background: var(--epx-bg-card, #eaf8ef); border-color: var(--epx-border, #c6e9d2); }
+    &--rerank { color: var(--epx-text-secondary, #ad6816); background: var(--epx-bg-card, #fff4e3); border-color: var(--epx-border, #f5d8a8); }
+    &--speech2text { color: var(--epx-text, #087e8b); background: var(--epx-bg, #e5f7fa); border-color: var(--epx-border, #b9e5ec); }
+    &--tts { color: var(--epx-text-secondary, #b63d78); background: var(--epx-bg-card, #ffedf5); border-color: var(--epx-border, #f5c9dd); }
   }
+  &__delete { color: var(--epx-text-secondary, #d64646); &:hover, &:focus { color: var(--epx-text, #b63131); } }
+  &__muted { color: var(--color-text-secondary, #888); font-size: 13px; }
+  &__footer { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding-top: 8px; }
+  &__dialog { .el-form { margin-top: 20px; } .el-select, .el-input-number { width: 100%; } }
+  &__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+  &__legacy { border-top: 1px solid var(--border-color-base, #e4e7ed); padding-top: 16px; }
 }
-.ai-item__default {
-  margin-left: 4px;
-}
-
+@media (max-width: 1200px) { .ai-registry { &__layout { grid-template-columns: 210px minmax(0, 1fr); } &__panel { padding: 16px; } &__connection { grid-template-columns: 1fr; gap: 12px; } &__footer { align-items: flex-start; flex-direction: column; } } }
 </style>