feat(model): refactor model manager plugins component

Author: betterdancing

packages/configurator/src/model-api-configurator/ModelApiConfigurator.vue

@@ -13,14 +13,20 @@
         <span>选择模型方法</span>
         <div class="right">
           <tiny-button @click="closePopover">取消</tiny-button>
-          <tiny-button type="primary" @click="setModelFunction">确定</tiny-button>
+          <tiny-button type="primary" @click="setModelFunction" :disabled="!selectedFunction">确定</tiny-button>
           <tiny-icon-close class="tiny-svg-size" @click="closePopover"></tiny-icon-close>
         </div>
       </div>
       <div class="model-set-wrap">
         <div class="model-wrap">
           <div class="model-groups">
-            <model-select :model-page-size="5" @model-select="getModel" :meta="meta" :isShow="isShow"></model-select>
+            <model-select
+              :model-page-size="5"
+              @model-select="getModel"
+              :meta="meta"
+              :isShow="isShow"
+              :isModelApi="true"
+            ></model-select>
           </div>
           <div class="model-parameters">
             <tiny-grid

packages/configurator/src/model-common/ModelSelect.vue

@@ -54,6 +54,10 @@ export default {
     isShow: {
       type: Boolean,
       default: false
+    },
+    isModelApi: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['modelSelect'],
@@ -90,8 +94,20 @@ export default {
 
     const selectModel = async (data) => {
       // 处理parameters
-      currentSelectedModel.value = await handleSelectedModelParameters(data.row)
-      emit('modelSelect', currentSelectedModel.value)
+      if (props.isModelApi) {
+        emit('modelSelect', {
+          id: data.row.id,
+          name: data.row.nameCn,
+          nameEn: data.row.nameEn,
+          description: data.row.description,
+          version: data.row.version,
+          baseUrl: data.row.modelUrl ?? '',
+          method: data.row.method
+        })
+      } else {
+        currentSelectedModel.value = await handleSelectedModelParameters(data.row)
+        emit('modelSelect', currentSelectedModel.value)
+      }
     }
 
     watch(

packages/configurator/src/model-common/utils.js

@@ -46,8 +46,7 @@ export const handleSelectedModelParameters = async (model) => {
         description: model.description,
         version: model.version,
         baseUrl: model.modelUrl ?? '',
-        parameters,
-        method: model.method
+        parameters
       }
     : parameters
 }

packages/configurator/src/model-configurator/ModelConfigurator.vue

@@ -216,12 +216,12 @@ const searchUnused = ref('')
 const searchValue = ref('')
 
 const selectedModel = ref()
+const originModelData = ref()
 
 const getModel = (data) => {
   selectedModel.value = data
 }
 
-const originModelData = ref()
 const modelDetail = ref(props.meta.widget.props.modelValue)
 
 const unusedParameters = ref([])

packages/design-core/assets/plugin-icon-modelmanager.svg

@@ -1,5 +1,6 @@
 import entry from './src/Main.vue'
 import metaData from './meta'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,

packages/plugins/model-manager/index.ts

@@ -2,6 +2,6 @@ export default {
   id: 'engine.plugins.modelmanager',
   title: '模型管理',
   type: 'plugins',
-  width: 600,
+  width: 280,
   icon: 'plugin-icon-modelmanager'
 }

packages/plugins/model-manager/meta.js

@@ -29,7 +29,8 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@opentiny/tiny-engine-meta-register": "workspace:*"
+    "@opentiny/tiny-engine-meta-register": "workspace:*",
+    "@opentiny/tiny-engine-common": "workspace:*"
   },
   "devDependencies": {
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",

packages/plugins/model-manager/package.json

@@ -42,7 +42,7 @@
               </div>
             </div>
           </template>
-          <div v-else class="empty-tip">当前数据为空，请先添加模型</div>
+          <search-empty v-else />
         </div>
       </template>
     </plugin-panel>
@@ -59,7 +59,7 @@
 import { ref, reactive, provide, computed, onMounted } from 'vue'
 import { TinySearch, Modal } from '@opentiny/vue'
 import { IconSearch } from '@opentiny/vue-icon'
-import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
+import { PluginPanel, SvgButton, SearchEmpty } from '@opentiny/tiny-engine-common'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'
 import ModelSetting, { openModelSettingPanel, closeModelSettingPanel } from './components/ModelSetting.vue'
 import { getModelList, deleteModel, getModelSql, getModelSqlById } from './composable/useModelManager'
@@ -213,13 +213,13 @@ onMounted(async () => {
       align-items: center;
 
       &:hover {
-        background-color: var(--te-page-manage-draggable-row-bg-color-hover);
-        color: var(--te-page-manage-draggable-text-color);
+        background-color: var(--te-model-manage-draggable-row-bg-color-hover);
+        color: var(--te-model-manage-draggable-text-color);
       }
 
       &.active {
-        background-color: var(--te-page-manage-draggable-row-bg-color-hover);
-        color: var(--te-page-manage-draggable-text-color);
+        background-color: var(--te-model-manage-draggable-row-bg-color-hover);
+        color: var(--te-model-manage-draggable-text-color);
       }
 
       svg {
@@ -239,7 +239,7 @@ onMounted(async () => {
         }
         .model-desc {
           font-size: 12px;
-          color: var(--te-page-manage-tip-text-color);
+          color: var(--te-model-manage-tip-text-color);
           display: -webkit-box;
           overflow: hidden;
         }

packages/plugins/model-manager/src/Main.vue

@@ -281,15 +281,15 @@ defineExpose({
   }
 
   :deep(.tiny-grid-body__expanded-row) {
-    background-color: var(--te-page-manage-input-bg-color);
+    background-color: var(--te-model-manage-input-bg-color);
   }
   .expand-section {
     margin-bottom: 16px;
 
     h4 {
       font-size: 14px;
       font-weight: 600;
-      color: var(--te-page-manage-title-text-color);
+      color: var(--te-model-manage-title-text-color);
       margin: 0 0 8px 0;
       padding-bottom: 1px;
     }
@@ -299,7 +299,7 @@ defineExpose({
       align-items: center;
       margin-bottom: 8px;
       padding: 8px;
-      background-color: var(--te-page-manage-input-bg-color);
+      background-color: var(--te-model-manage-input-bg-color);
       border-radius: 4px;
     }