fix/model-driven-bugs

Author: betterdancing

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

@@ -6,32 +6,33 @@
     :visible-arrow="false"
     :popper-class="['option-popper', 'fixed-left']"
     :offset="isSecond ? 652 : 0"
-    width="860"
+    width="640"
   >
     <div class="model-function-wrap">
       <div class="model-title">
         <span>选择模型方法</span>
         <div class="right">
-          <tiny-button @click="closePopover">取消</tiny-button>
-          <tiny-button type="primary" @click="setModelFunction" :disabled="!selectedFunction">确定</tiny-button>
-          <tiny-icon-close class="tiny-svg-size" @click="closePopover"></tiny-icon-close>
+          <button-group>
+            <tiny-button type="primary" @click="setModelFunction" :disabled="!selectedFunction">确定</tiny-button>
+            <tiny-icon-close class="tiny-svg-size" @click="closePopover"></tiny-icon-close>
+          </button-group>
         </div>
       </div>
       <div class="model-set-wrap">
         <div class="model-param-wrap" v-if="selectedFunction">
           <tiny-form
             ref="ruleFormRef"
-            :model="methodBasicData"
+            :model="selectedFunction"
             :rules="methodBasicData.rules"
             label-width="100px"
             label-position="left"
           >
             <tiny-form-item label="请求URL" prop="url">
-              <tiny-input v-model="methodBasicData.url"></tiny-input>
+              <tiny-input v-model="selectedFunction.url"></tiny-input>
             </tiny-form-item>
             <tiny-form-item label="请求方式" prop="method">
               <tiny-select
-                v-model="methodBasicData.method"
+                v-model="selectedFunction.method"
                 :disabled="methodDisabled"
                 :options="methodBasicData.options"
               ></tiny-select>
@@ -74,6 +75,7 @@ import {
 } from '@opentiny/vue'
 import { iconClose, iconEdit } from '@opentiny/vue-icon'
 import { useCanvas } from '@opentiny/tiny-engine-meta-register'
+import { ButtonGroup } from '@opentiny/tiny-engine-common'
 import { getModelDetail } from '../model-common/http'
 import ParamsBindGrid from './ParamsBindGrid.vue'
 
@@ -188,7 +190,7 @@ const setModelApis = () => {
           }
         : null
     })
-    .filter(api !== null)
+    .filter((api) => api !== null)
   emit('update:modelValue', modelValue.value)
 }
 

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

@@ -1,9 +1,8 @@
 <template>
   <tiny-grid :data="data" :tree-config="{ children: 'children', indent: 6 }">
-    <tiny-grid-column type="index" title="序号" width="60" align="left"></tiny-grid-column>
-    <tiny-grid-column field="prop" title="字段" width="140" tree-node></tiny-grid-column>
+    <tiny-grid-column field="prop" title="字段" width="100" tree-node></tiny-grid-column>
     <tiny-grid-column field="type" title="类型" width="60"></tiny-grid-column>
-    <tiny-grid-column field="description" show-overflow title="描述" width="100"></tiny-grid-column>
+    <tiny-grid-column field="description" show-overflow title="描述" width="80"></tiny-grid-column>
     <tiny-grid-column field="required" title="是否必填" width="66">
       <template #default="data">
         <span>{{ data.row?.required ? '是' : '否' }}</span>

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

@@ -11,8 +11,10 @@
         <div class="model-title">
           <span>绑定模型数据</span>
           <div class="right">
-            <tiny-button type="primary" plain @click="setModel"> 确认 </tiny-button>
-            <tiny-icon-close class="tiny-svg-size" @click="closePopover"></tiny-icon-close>
+            <button-group>
+              <tiny-button type="primary" @click="setModel"> 确认 </tiny-button>
+              <tiny-icon-close class="tiny-svg-size" @click="closePopover"></tiny-icon-close>
+            </button-group>
           </div>
         </div>
         <div class="model-wrap">
@@ -21,7 +23,7 @@
           </div>
           <div class="model-parameters">
             <tiny-grid :data="selectedModel?.parameters || []" min-height="296" max-height="560">
-              <tiny-grid-column field="prop" title="字段名" width="180"> </tiny-grid-column>
+              <tiny-grid-column field="prop" title="字段名" show-overflow> </tiny-grid-column>
               <tiny-grid-column field="label" title="标签名" show-overflow></tiny-grid-column>
               <tiny-grid-column field="originType" title="类型" show-overflow></tiny-grid-column>
             </tiny-grid>
@@ -179,6 +181,7 @@ import {
 import { iconUpWard, iconDownWard, iconClose, iconEdit } from '@opentiny/vue-icon'
 import { defineEmits, defineProps, ref, reactive, nextTick, computed, watch, onMounted } from 'vue'
 import { VueDraggableNext } from 'vue-draggable-next'
+import { ButtonGroup } from '@opentiny/tiny-engine-common'
 import MetaListItem from './MetaListItem.vue'
 import ModelSelect from '../model-common/ModelSelect.vue'
 import MetaChildItem from '../operator-group-configurator/MetaChildItem.vue'
@@ -502,12 +505,12 @@ onMounted(() => {
   border: 1px solid #e6e6e6;
   border-radius: 4px;
   .model-groups {
-    width: 380px;
+    width: 280px;
     padding: 12px;
     border-right: 1px solid #e6e6e6;
   }
   .model-parameters {
-    width: 380px;
+    width: 280px;
     padding: 12px;
   }
 }

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

@@ -7,7 +7,6 @@
       @close="pluginPanelClosed"
     >
       <template #header>
-        <svg-button class="add-icon" name="add" placement="bottom" tips="新建模型" @click="handleAddModel"></svg-button>
         <svg-button
           class="flow-download-icon"
           name="flow-download"
@@ -17,6 +16,7 @@
         ></svg-button>
       </template>
       <template #content>
+        <tiny-button class="add-model" @click="handleAddModel"> <svg-icon name="add"></svg-icon>新建模型 </tiny-button>
         <div class="model-manager-search" clearable placeholder="搜索">
           <tiny-search v-model="localKeyword">
             <template #prefix>
@@ -30,16 +30,26 @@
               v-for="model in filteredModels"
               :key="model.id"
               :class="['model-item', { active: selectedModel?.id === model.id }]"
-              @click="selectModel(model)"
             >
-              <div class="model-info">
-                <div class="model-name">{{ model.nameCn }}</div>
-                <div class="model-english-name">{{ model.nameEn }}</div>
-                <div class="model-desc">{{ model.description || '暂无描述' }}</div>
+              <div class="item-label">
+                <div class="item-name">
+                  <svg-icon name="plugin-icon-data" class="plugin-icon-data"> </svg-icon>
+                  {{ model.nameCn }}
+                </div>
+                <div class="item-handler">
+                  <svg-button
+                    class="set-page"
+                    :hoverBgColor="false"
+                    tips="设置模型"
+                    name="setting"
+                    @mousedown.stop.prevent="selectModel(model)"
+                  >
+                  </svg-button>
+                </div>
               </div>
-              <div class="model-actions">
+              <!-- <div class="model-actions">
                 <svg-icon name="delete" @click.stop="handleDeleteModel(model)"></svg-icon>
-              </div>
+              </div> -->
             </div>
           </template>
           <search-empty :isShow="!models.length" />
@@ -49,6 +59,7 @@
     <model-setting
       :model="selectedModel"
       :models="models"
+      @deleteCallback="handleDeleteModel"
       @editCallback="editCallback"
       @exportModel="exportModel"
     ></model-setting>
@@ -57,7 +68,7 @@
 
 <script setup>
 import { ref, reactive, provide, computed, onMounted } from 'vue'
-import { TinySearch, Modal } from '@opentiny/vue'
+import { TinySearch, Modal, TinyButton } from '@opentiny/vue'
 import { IconSearch } from '@opentiny/vue-icon'
 import { PluginPanel, SvgButton, SearchEmpty } from '@opentiny/tiny-engine-common'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'
@@ -193,7 +204,10 @@ onMounted(async () => {
 .plugin-modelmanager {
   height: 100%;
   width: 280px;
-
+  .add-model {
+    margin: 0 12px 12px 12px;
+    width: calc(100% - 24px);
+  }
   .model-manager-search {
     padding: 0 12px 12px 12px;
   }
@@ -206,44 +220,43 @@ onMounted(async () => {
     font-size: var(--te-base-font-size-base);
 
     .model-item {
-      padding: 10px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+      box-shadow: var(--te-datasource-tabs-border-color) 0, -1px;
+      height: 24px;
+      line-height: 24px;
       align-items: center;
-
-      &:hover {
-        background-color: var(--te-model-manage-draggable-row-bg-color-hover);
-        color: var(--te-model-manage-draggable-text-color);
-      }
-
+      display: grid;
+      padding: 0 12px;
+      position: relative;
+      color: var(--te-datasource-list-main-text-color);
+      cursor: pointer;
+      &:hover,
       &.active {
-        background-color: var(--te-model-manage-draggable-row-bg-color-hover);
-        color: var(--te-model-manage-draggable-text-color);
-      }
-
-      svg {
-        cursor: pointer;
-      }
-
-      .model-info {
-        .model-name {
-          font-weight: 600;
-          margin-bottom: 2px;
-          font-size: 14px;
+        background: var(--te-datasource-list-text-color-hover);
+        .item-handler {
+          display: inline-block;
         }
-        .model-english-name {
-          font-size: 11px;
-          margin-bottom: 4px;
-          font-family: monospace;
+      }
+      .item-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: var(--te-datasource-list-item-text-color);
+        .item-name {
+          display: flex;
+          align-items: center;
         }
-        .model-desc {
-          font-size: 12px;
-          color: var(--te-model-manage-tip-text-color);
-          display: -webkit-box;
-          overflow: hidden;
+        .plugin-icon-data {
+          color: var(--te-datasource-list-item-icon-color);
+          margin-right: 8px;
         }
       }
+      .item-handler {
+        height: 24px;
+        line-height: 24px;
+        display: none;
+      }
     }
   }
 }

packages/plugins/model-manager/src/components/FieldManager.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="section">
-    <tiny-button class="add-field-btn" size="mini" @click="$emit('add-field')"> <svg-icon name="add"></svg-icon> 添加字段 </tiny-button>
+    <tiny-button class="add-field-btn" size="mini" @click="$emit('add-field')">
+      <svg-icon name="add"></svg-icon> 添加字段
+    </tiny-button>
     <div class="field-table">
       <tiny-grid
         :data="model.parameters"
@@ -10,7 +12,6 @@
         ref="fieldGrid"
         style="height: 100%"
       >
-        <tiny-grid-column type="index" width="60" title="序号"></tiny-grid-column>
         <tiny-grid-column type="expand" width="20">
           <template #default="{ row }">
             <div v-if="row.type === 'Enum'" class="expand-content">
@@ -63,15 +64,15 @@
             </div>
           </template>
         </tiny-grid-column>
-        <tiny-grid-column field="prop" title="字段名称" width="120">
+        <tiny-grid-column field="prop" title="字段名称" width="100">
           <template #default="{ row }">
             <div v-if="row.isEditing" class="editing-cell">
               <tiny-input v-model="row.prop" placeholder="请输入字段名称" size="small" />
             </div>
             <div v-else class="readonly-cell">{{ row.prop || '点击编辑' }}</div>
           </template>
         </tiny-grid-column>
-        <tiny-grid-column field="type" title="类型" width="110">
+        <tiny-grid-column field="type" title="类型" width="80">
           <template #default="{ row }">
             <div v-if="row.isEditing" class="editing-cell">
               <tiny-select v-model="row.type" size="small" @change="handleTypeChange(row)">
@@ -86,7 +87,7 @@
             <div v-else class="readonly-cell">{{ getFieldTypeLabel(row.type) }}</div>
           </template>
         </tiny-grid-column>
-        <tiny-grid-column field="defaultValue" title="默认值" width="120">
+        <tiny-grid-column field="defaultValue" title="默认值" width="100">
           <template #default="{ row }">
             <div v-if="row.isEditing" class="editing-cell">
               <tiny-input v-model="row.defaultValue" placeholder="请输入默认值" size="small" />
@@ -102,7 +103,7 @@
             <div v-else class="readonly-cell"><tiny-checkbox v-model="row.required" disabled /></div>
           </template>
         </tiny-grid-column>
-        <tiny-grid-column field="description" title="描述" width="120">
+        <tiny-grid-column field="description" title="描述" width="100">
           <template #default="{ row }">
             <div v-if="row.isEditing" class="editing-cell">
               <tiny-input v-model="row.description" placeholder="请输入字段描述" size="small" />

packages/plugins/model-manager/src/components/ModelBasicForm.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="section">
-    <tiny-form ref="ruleFormRef" :model="localValue" :rules="rules">
+    <tiny-form
+      ref="ruleFormRef"
+      :model="localValue"
+      :rules="rules"
+      label-width="120px"
+      validate-type="text"
+      :inline-message="true"
+      :label-align="true"
+      label-position="top"
+    >
       <div class="form-item">
         <tiny-form-item label="中文名称" prop="nameCn">
           <tiny-input v-model="localValue.nameCn" placeholder="请输入模型中文名称" />

packages/plugins/model-manager/src/components/ModelSetting.vue

@@ -10,6 +10,7 @@
       <button-group>
         <tiny-button @click="$emit('exportModel', selectedModel?.id)">导出SQL</tiny-button>
         <tiny-button type="primary" @click="saveModel">保存</tiny-button>
+        <svg-button name="delete" v-if="selectedModel?.id" @click="$emit('deleteCallback', selectedModel)"></svg-button>
         <svg-button name="close" @click="closeModelSettingPanel"></svg-button>
       </button-group>
     </template>
@@ -45,7 +46,7 @@ import ModelBasicForm from './ModelBasicForm.vue'
 import FieldManager from './FieldManager.vue'
 import { createModel, updateModel } from '../composable/useModelManager'
 
-const isShow = ref(false) 
+const isShow = ref(false)
 
 export const openModelSettingPanel = () => {
   isShow.value = true
@@ -76,7 +77,7 @@ export default {
       default: () => []
     }
   },
-  emits: ['editCallback', 'exportModel'],
+  emits: ['editCallback', 'exportModel', 'deleteCallback'],
   setup(props, { emit }) {
     const { PLUGIN_NAME } = useLayout()
     const activeName = ref(['general', 'fields'])