@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/components/base/Input/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="formily-input-wrap" ref="triggerRef">
+    <el-input v-bind="$attrs" :modelValue="modelValue" @input="onChange">
+      <template #suffix>
+        <template v-if="appendToTrigger">
+          <el-tooltip
+            :raw-content="openRaw"
+            effect="light"
+            v-if="tipContent"
+            :content="tipContent"
+            :append-to="triggerRef"
+          >
+            <div class="tool-tip"></div>
+          </el-tooltip>
+        </template>
+        <template v-else>
+          <el-tooltip
+            :raw-content="openRaw"
+            effect="light"
+            v-if="tipContent"
+            :content="tipContent"
+          >
+            <div class="tool-tip"></div>
+          </el-tooltip>
+        </template>
+      </template>
+      <template #prepend v-if="prependSlot">
+        <span>{{ prependSlot }}</span>
+      </template>
+      <template #append v-if="appendSlot">
+        <span>{{ appendSlot }}</span>
+      </template>
+    </el-input>
+    <span class="description">{{ description }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref } from 'vue';
+
+export default defineComponent({
+  name: 'FormilyInput',
+  props: {
+    modelValue: String,
+    toolTip: {
+      type: [String, Object],
+      default: '',
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    // 挂载到Trigger
+    appendToTrigger: {
+      type: Boolean,
+      default: false,
+    },
+    prependSlot: {
+      type: String,
+      default: '',
+    },
+    appendSlot: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const triggerRef = ref();
+    const onChange = (value: string) => {
+      if (value.trim() === '') {
+        emit('change', value);
+      } else {
+        emit('change', value.trim());
+      }
+    };
+
+    const tipContent = computed(() => {
+      if (props.toolTip.indexOf('埋点名') !== -1) {
+        return `<div class="buryReport-tip">输入埋点名，系统将补全埋点信息：<br>例 运营.可视化创造.<span>输入埋点名</span>.点击</div>`;
+      }
+      return props.toolTip;
+    });
+    // 是否打开HTML渲染
+    const openRaw = computed(() => {
+      return props.toolTip.indexOf('埋点名') !== -1;
+    });
+
+    return { tipContent, openRaw, onChange, triggerRef };
+  },
+});
+</script>
+
+<style lang="scss">
+.buryReport-tip {
+  color: rgba(30, 37, 54, 0.4) !important;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 21px;
+  span {
+    background: #b9e2ff;
+    color: #b9c7d7;
+    padding: 3px 3px 3px 7px;
+    position: relative;
+    &::before {
+      content: '';
+      display: block;
+      width: 2px;
+      height: 13px;
+      background-color: #6b6a6a;
+      margin-right: 4px;
+      position: absolute;
+      left: 3px;
+      top: 5px;
+    }
+  }
+}
+.formily-color-input {
+  .el-input--prefix .el-input__inner {
+    //   padding-left: 34px !important;
+  }
+}
+
+.formily-input-wrap {
+  min-height: 40px;
+  .tool-tip {
+    width: 24px;
+    height: 24px;
+    object-fit: cover;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMyAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxyZWN0IG9wYWNpdHk9IjAuNiIgd2lkdGg9IjIyLjIyMjIiIGhlaWdodD0iMjQiIGZpbGw9InVybCgjcGF0dGVybjApIi8+CjxkZWZzPgo8cGF0dGVybiBpZD0icGF0dGVybjAiIHBhdHRlcm5Db250ZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIj4KPHVzZSB4bGluazpocmVmPSIjaW1hZ2UwXzQzM183NDI2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0wLjAwMzgxMjYyKSBzY2FsZSgwLjAxNDcwNTkgMC4wMTM2MTY2KSIvPgo8L3BhdHRlcm4+CjxpbWFnZSBpZD0iaW1hZ2UwXzQzM183NDI2IiB3aWR0aD0iNjgiIGhlaWdodD0iNzQiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBRVFBQUFCS0NBWUFBQUFDR2ZMQ0FBQURNRWxFUVZSNEFlMlpNVzRiUVF4RmZjQTBQa0I2TjZtTkZHbmRHbkNYQXdSd2xTcElrMHRJY3VRN0NEbkVHbC93VDZpUGtiSkRjbFlTd0FFR0k2NVdKUC9iUDdNR2ZEUFZPQ0J3Y3hCVk1CVVFNVUVCS1NCQ1FNSnlTQUVSQWhLV1F3cUlFSkN3SEZKQWhJQ0U1WkFDSWdRa0xJY1VFQ0VnWVRua2tvQnNYbDRuem0vUDN5ZE9YcE5lRndrWGRRaUZmdjd5TUgyNC9UaHI0bDZBV21vc0FnUWdlaUFjZzBVSGpZUXpGTWovUUFBU0o4Vmk1YlZUWUVaQkdRWUV3bHFDSUJhZzVnNkNhdVhDZDlsakNKQVdqRjRRTGFHdHZObFEwb0ZBdUgyYUdTQVVUcXVHM3VPTlU0Rm9vOWxQejRwVXQ2QjJ4a2dEb2cyT2hFSGhJMnFtQUlrMnRsci9udTQrM2UvbmFyMmwzbGxydExZV0NRUEJHOE9lR2IzTzJPMytIUHdldVhDdFp5aVVucmVZMWdrRHNjMzB3a0F6OXZjRTY4bGp6Ni9JZVJJQ29tS1U5cHc0d3lHb28wNzF1aVFOaU9lcEV0aHFzLzEzaG16NnpoRG13SnJoa2hBUVdoenJKWXdNbDdpQjJPMFNjVWMyU09zU3o3WnhBN0dGbzBEd2Uwd0k4SWl3VUsxTFBJZXJHMGpXZHJGZ2tkTWp3Z0xCNTBodkxpRFJwMkFGS0pDTTg4am03SFhjMllHZ1lRdjRLb0ZndjlPVzBmT0RibUcrQXZKT0pCTkk1SUc1dGt5a0lCMmg2MVVEc1hzKzQ2MEFPQVZFTEpJSjVLcmZNdVJ5MVVDeUxaNmRMd0xYZGFoQ1FNU1dkSVZkSXlKc0hudmdlODQzTjVEc2czVUVFTS9mU0NsQUlBYUFJaU1MU0RTUEd3akUyMjNqc2VlUG43Lysvc2ZmQ3NHVHhjVDNQY051RjQ4N1VDc0V4RzZiWHBkQXJJVnc3SE1QRkp2akxFQWlMc2tHWXQzcWhSRjJDQktvUzNxYUFSVGNqL240OUhVL0dXT2Q2dzdjYTkyQnZyd2p0R1ZZVkJ0Q3ZOVElycDBDQk9Lekc1c0RkRVROTkNBUVlQY3hMRHpTS1FyRDg1WnJRVThGMG9LUzFTaWJ4NW1sNEROcnBBTkI0L3IwTXR6U0FwR1JsNkM1RGdGeURBb0Y5R3lsWXlDWWkwS3kxbUZBMkdETExSQ0RDYXRqNGg1T1hzUEsrM1RGZHdBMVlnd0hncVlwVm9YMXhpTkJFTzRpUUZpTWNFNDlmWVZFQ0tNY1lYdkQ1OFdCMkFZZ0VwTU93c3ByU3dHdy9ad2RpRFp6Q2ZGWkhYSUpBTFNIQWlKRUNrZ0JFUUlTbGtNS2lCQ1FzQnhTUUlTQWhPV1FBaUlFSkN5SEZCQWhJR0U1UklDOEFiM1VzWnR1eFNuaEFBQUFBRWxGVGtTdVFtQ0MiLz4KPC9kZWZzPgo8L3N2Zz4K');
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  .color-box {
+    width: 20px !important;
+    display: block;
+    height: 20px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    margin-right: 20px;
+  }
+
+  .description {
+    display: block;
+    font-size: 12px;
+    color: #86909c;
+    line-height: 20px;
+    margin-top: 5px;
+  }
+}
+</style>

package/src/components/base/LayoutGroup/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :style="style" class="layout-group" :class="{ borderBottom: borderBottom }">
+    <span v-if="title" class="layout-group-title">{{title}}</span>
+      <slot></slot>
+  </div>
+</template>
+<script lang="ts" setup>
+defineProps({
+  title:{
+    type:String,
+    default:"",
+  },
+  style:{
+    type:[Object,String],
+    default:""
+  },
+  borderBottom:{
+    type:Boolean,
+    default: true
+  }
+})
+</script>
+<style lang="scss">
+.layout-group{
+  padding:0 17px;
+  margin-bottom: 16px;
+  &.borderBottom{
+    border-bottom: 1px solid rgba(0,0,0,.1);
+  }
+  &-title{
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    /* identical to box height, or 150% */
+    color: #020202;
+    display: block;
+    margin-bottom: 24px;
+  }
+}
+</style>

package/src/components/base/Link/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="link-wrap">
+        <el-link v-for="item in links" :key="item.href" :href="item.href" :type="type"  :target="target">{{item.label}}</el-link>
+    </div>
+</template>
+
+<script  lang="ts">
+
+// @ts-ignore
+import {defineComponent,PropType} from 'vue'
+
+export default defineComponent({
+    name:'Link',
+    props:{
+        links:{
+            type: Array as PropType<any[]>,
+            default:() =>{
+                return [] as any[]
+            }
+        },
+        target:{
+            type:String,
+            default: '_blank'
+        },
+        type:{
+          type: String,
+          default: 'primary'
+        }
+    },
+    setup(){
+
+        return {}
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+  .link-wrap{
+    .el-link+.el-link{
+      margin-left: 14px;
+    }
+  }
+</style>

package/src/components/base/Middleware/index.ts

@@ -0,0 +1,235 @@
+import { createForm, Form, onFormInit, onFormValuesChange } from "@formily/core";
+import { transformSchema } from "../../../transform/transform";
+import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
+import { ElMessage } from "@cicctencent/jtui";
+import { cloneDeep, isEqual } from '@cicctencent/ark-util'
+
+interface ParametersDescriptorConfig{
+    key: string;
+    schema: Record<string,any>;
+    form?: Form;
+    initValues?: any;
+    title: string
+}
+
+export default function(props,emits){
+  const ctx = getCurrentInstance();
+  // 显示对话框
+  const dialogVisible = ref<boolean>(false);
+  // 中间件name value
+  const nameValue = ref<string[]>([])
+  // 参数配置信息
+   const parametersDescriptorConfig = ref<ParametersDescriptorConfig[]>([])
+  // 是否存在未填字段
+  const parametersError = ref<boolean>(false);
+  // 中间件数据
+  const middlewareData = ref<any[]>([]);
+  // 额外参数配置信息
+  const parametersDescriptor = computed(()=> {
+    return JSON.parse(props.parametersDescriptor || '{}')
+  })
+  // 是否显示配置图标
+  const showConfigIcon  = computed(()=>{
+
+    // 用来统计隐藏表单的数量
+    let hideCount = 0;
+
+    parametersDescriptorConfig.value.forEach(it => {
+      const res = showFormItem(it.schema);
+      // false  这个表单的数据是隐藏的
+      if(!res){
+        hideCount++;
+      }
+    })
+    // 所有表单都隐藏了,就不显示图标
+    if(hideCount === parametersDescriptorConfig.value.length){
+      return false;
+    }
+    return true
+  })
+
+  onMounted(() => {
+    // 初始化
+    initMiddleware();
+  })
+
+  watch(() => props.modelValue, (newVal,oldVal) =>{
+    if(!isEqual(newVal,oldVal)){
+      // 数据变化重新初始化
+      initMiddleware();
+    }
+  },{ deep: true})
+
+
+  /**
+   *  点击配置额外属性
+   * @returns
+   */
+  function handleConfigParametersDescriptor(){
+    //  没有选择中间件,不需要配置参数
+    if(!nameValue.value.length || props.readonly){
+        return;
+    }
+    // 生成schema
+    // generateParametersDescriptorConfig();
+    dialogVisible.value = true;
+  }
+  /**
+   *  初始化中间件
+   */
+  function initMiddleware(){
+    // 初始化中间件选择框
+    console.log('initMiddleware',props.modelValue);
+    if(Array.isArray(props.modelValue)){
+       middlewareData.value = props.modelValue
+       nameValue.value = props.modelValue.map(it => it.name)
+    }
+  }
+  /**
+   *  生成optionsSchema
+   */
+  function generateParametersDescriptorConfig(){
+    // 生成配置之前,先清除之前的数据
+    parametersDescriptorConfig.value = []
+    middlewareData.value.forEach(it =>{
+        // 判断配置信息是否存在
+        if(parametersDescriptor.value[it.name] && !isEqual(parametersDescriptor.value[it.name], {})){
+          parametersDescriptorConfig.value.push({
+            key: it.name,
+            title: getMiddlewareName(it.name),
+            schema: transformSchema({schema: {
+              type: 'object',
+              properties: parametersDescriptor.value[it.name]
+            },ctx }),
+            initValues: it?.options || {}
+          })
+        }
+    })
+
+    parametersDescriptorConfig.value.forEach(it=>{
+        it.form = createForm({
+          effects(){
+            onFormInit(form => {
+              form.setValues(it.initValues)
+            })
+            onFormValuesChange(form => {
+              console.log('onFormValuesChange', form.values)
+              const middleware =  middlewareData.value.find(m => m.name === it.key)
+              middleware.options = form.values
+              emitsData();
+            })
+          }
+        })
+    })
+  }
+  /**
+   *  获取中间件名称
+   * @param data
+   * @returns
+   */
+  function getMiddlewareName(data: string){
+    let name = null;
+    for(let it of props.options){
+      if(it.value === data){
+          name = it.label
+      }
+    }
+    return  name;
+  }
+
+  /**
+   *  校验表单
+   */
+  async function validateForms(){
+    const forms = parametersDescriptorConfig.value.map(m => m.form)
+    for(let i in forms){
+      // 失败会调用 reject
+      await forms[i].validate();
+    }
+  }
+
+  /**
+   *  提交额外属性配置
+   *  @deprecated
+   */
+  async function sumbitParametersDescripto(){
+    // 获取所有表单
+     const forms = parametersDescriptorConfig.value.map(m => m.form)
+    try {
+      for(let i in forms){
+        // 失败会调用 reject
+        await forms[i].validate();
+      }
+      // 关闭弹窗
+      dialogVisible.value = false;
+       // 更新中间件
+      emitsData()
+      return;
+    } catch (error) {
+      ElMessage.error({message: '请完善信息之后再提交', zIndex: 99999})
+    }
+  }
+  /**
+   *  更新数据
+   */
+  let timer;
+   function emitsData(){
+
+      if(timer) clearTimeout(timer)
+      // 设置500毫秒的防抖
+      timer = setTimeout(async ()=>{
+        // 校验表单
+        try {
+          await validateForms()
+          parametersError.value = false
+        } catch (error) {
+          parametersError.value = true
+        }
+        emits('change', middlewareData.value);
+      },500)
+  }
+
+  /**
+   *  监听下拉选择框的变化
+   */
+  watch(() => nameValue.value, () =>{
+      const _middlewareData = [];
+      nameValue.value.forEach(it =>{
+          const middleware = middlewareData.value.find(m => m.name === it)
+          // middlewareData存在了这个信息,不需要重新处理
+          if(middleware){
+            _middlewareData.push(middleware)
+          }else{
+             // 不存在
+             _middlewareData.push({name: it, options: {}})
+          }
+      })
+      middlewareData.value = cloneDeep(_middlewareData);
+      generateParametersDescriptorConfig();
+      emitsData();
+  })
+
+  function showFormItem(descriptor){
+    const keys = Object.keys(descriptor?.properties || {})
+    for(let i = 0; i < keys.length ; i++){
+      if(!descriptor.properties[keys[i]]?.['x-hidden']){
+        // 不完全是hiddle
+        return true;
+      }
+    }
+    return false;
+  }
+
+  async function closeDialog(){
+     try {
+        // 批量校验表单
+        await validateForms();
+     } catch (error) {
+        //todo 处理校验失败的逻辑
+     }
+     dialogVisible.value = false;
+  }
+
+
+  return { dialogVisible, parametersError, showConfigIcon, nameValue, parametersDescriptorConfig, handleConfigParametersDescriptor, sumbitParametersDescripto, showFormItem, closeDialog}
+}

package/src/components/base/Middleware/index.vue

@@ -0,0 +1,169 @@
+<template>
+    <div class="formily-middleware">
+        <div class="formily-middleware--select-box">
+            <div style="flex:1;">
+                <el-select  collapse-tags multiple placeholder="请选择" v-model="nameValue" :disabled="readonly">
+                    <el-option v-for="it in options" :label="it.label" :value="it.value"></el-option>
+                </el-select>
+            </div>
+            <div class="formily-middleware--icon" @click="handleConfigParametersDescriptor" v-if="showConfigIcon">
+                <el-tooltip
+                content="参数配置"
+                placement="top-start"
+                effect="light"
+                >
+                    <svg t="1678179509077" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2806" width="24" height="24"><path d="M660.992 997.376c-14.848 0-29.696-5.632-40.448-15.36-15.872-14.336-69.12-55.808-107.008-55.808-38.4 0-91.648 41.472-107.008 55.808-16.384 15.36-43.008 19.456-62.976 10.752l-3.072-1.536-154.112-89.088c-17.92-13.312-27.136-38.4-22.016-59.904 4.608-20.992 13.824-87.552-5.12-120.832-18.944-32.768-81.408-58.368-101.888-65.024-20.48-6.144-37.888-26.112-41.472-47.104-0.512-2.048-9.216-54.272-9.216-92.672 0-38.4 8.704-90.112 9.216-92.672 3.584-20.992 20.992-40.96 41.472-47.104 20.48-6.144 82.944-31.744 101.888-65.024 18.944-33.28 9.728-99.84 5.12-120.832-5.12-21.504 4.096-46.592 22.016-59.904l3.072-2.048L342.528 40.448c20.48-9.216 47.104-4.608 62.976 10.752 15.872 14.336 69.12 55.808 107.008 55.808 38.4 0 91.648-41.472 107.008-55.808 16.384-15.36 43.008-19.456 62.976-10.752l3.072 1.536L839.68 131.072c17.92 13.312 27.136 38.4 22.016 59.904-4.608 20.992-13.824 87.552 5.12 120.832 18.944 32.768 81.408 58.368 101.888 65.024 20.48 6.144 37.888 26.112 41.472 47.104 0.512 2.048 9.216 54.272 9.216 92.672 0 38.4-8.704 90.112-9.216 92.672-3.584 20.992-20.992 40.96-41.472 47.104s-82.944 31.744-101.888 65.024c-18.944 33.28-9.728 99.84-5.12 120.832 5.12 21.504-4.096 46.592-22.016 59.904l-3.072 2.048-154.112 89.088c-6.144 2.56-13.824 4.096-21.504 4.096zM225.28 852.48l140.288 81.408c15.36-13.824 82.432-70.656 147.456-70.656s132.096 56.832 147.456 70.656l140.288-81.408c-4.096-19.968-19.968-106.496 12.8-162.816 33.28-57.856 120.832-87.552 136.192-92.672 1.536-8.704 8.192-50.688 8.192-80.384 0-29.696-6.656-72.192-8.192-80.384-15.872-5.12-102.912-34.816-136.192-92.672-32.256-56.32-16.896-142.848-12.8-162.816L660.48 99.328c-15.36 13.824-82.432 70.656-147.456 70.656S380.928 113.152 365.568 99.328L225.28 180.224c4.096 19.968 19.968 106.496-12.8 162.816C179.2 400.896 92.16 430.592 76.288 435.712c-1.536 8.704-8.192 50.688-8.192 80.384 0 29.696 6.656 72.192 8.192 80.384 15.872 5.12 102.912 34.816 136.192 92.672 32.256 56.832 16.896 143.36 12.8 163.328z" :fill="parametersError?'#f56c6c':'#333333'" p-id="2807"></path><path d="M513.024 729.6c-117.76 0-212.992-95.744-212.992-213.504s95.744-213.504 213.504-213.504 212.992 95.744 212.992 213.504-95.744 213.504-213.504 213.504z m0-364.032c-82.944 0-150.528 67.584-150.528 150.528s67.584 150.528 150.528 150.528 150.528-67.584 150.528-150.528-67.584-150.528-150.528-150.528z" :fill="parametersError?'#f56c6c':'#333333'" p-id="2808"></path></svg>
+                    <!-- :fill="parametersError? '#f56c6c':'#8A8A8A'" -->
+                </el-tooltip>
+            </div>
+        </div>
+        <span style="color: #f56c6c;" v-if="parametersError">请配置额外参数</span>
+        <div v-show="dialogVisible">
+            <el-dialog
+                :modelValue="true"
+                title="中间件编辑"
+                :width="width"
+                :show-close="false"
+                :close-on-press-escape="false"
+                :close-on-click-modal="false"
+            >
+            <div class="formily-middleware--parameters-descriptor-config-item" v-for="item in parametersDescriptorConfig" :key="item.title" v-show="showFormItem(item.schema)">
+                <span  class="title">{{ item.title }}</span>
+                <div class="formily-middleware--parameters-descriptor-config-item--schema-box">
+                    <FormProvider :form="item.form">
+                        <SchemaField :schema="item.schema"></SchemaField>
+                    </FormProvider>
+                </div>
+            </div>
+            <template #header>
+               <div class="dialog-header">
+                    <span>中间件参数编辑</span>
+                    <div @click="closeDialog">
+                            <svg t="1678098563971" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2899" width="12" height="12"><path d="M512 456.310154L94.247385 38.557538a39.542154 39.542154 0 0 0-55.689847 0 39.266462 39.266462 0 0 0 0 55.689847L456.310154 512 38.557538 929.752615a39.542154 39.542154 0 0 0 0 55.689847 39.266462 39.266462 0 0 0 55.689847 0L512 567.689846l417.752615 417.752616c15.163077 15.163077 40.290462 15.36 55.689847 0a39.266462 39.266462 0 0 0 0-55.689847L567.689846 512 985.442462 94.247385a39.542154 39.542154 0 0 0 0-55.689847 39.266462 39.266462 0 0 0-55.689847 0L512 456.310154z" fill="#999999" p-id="2900"></path></svg>
+                    </div>
+               </div>
+            </template>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import useMiddleware from './index';
+import { FormProvider, createSchemaField } from '@formily/vue';
+const props = defineProps({
+    modelValue:{
+        type: Array,
+        default: () => []
+    },
+    options:{
+        type: Array,
+        default: []
+    },
+    parametersDescriptor:{
+        type: String,
+        default: ''
+    },
+    readonly:{
+        type: Boolean,
+        default: false
+    },
+    width:{
+        type: String,
+        default: '900px'
+    }
+})
+const emits = defineEmits(['change'])
+
+const { dialogVisible, showConfigIcon, parametersError, nameValue, parametersDescriptorConfig, handleConfigParametersDescriptor, sumbitParametersDescripto, showFormItem, closeDialog } = useMiddleware(props,emits);
+</script>
+
+<style scope  lang="scss">
+.proper-box{
+    /* z-index: 2044 !important; */
+}
+
+.formily-middleware{
+    &--select-box{
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+    .formily-element-plus-form-item-label{
+        height:  auto !important;
+    }
+    &--icon{
+        margin-left: 8px;
+        .el-tooltip__trigger,svg{
+            display: block;
+            height: 100%;
+        }
+    }
+    &--parameters-descriptor-config-item{
+        width: 100%;
+        .title{
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid #f5f6f7;
+            padding-bottom: 4px;
+            margin-bottom: 14px;
+            &:before{
+                content: "";
+                display: block;
+                width:2px;
+                height:14px;
+                background-color: #F5DBC1;
+                margin-right: 8px;
+            }
+        }
+        &--schema-box{
+            display: flex !important;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+    }
+
+    svg{
+        /* margin-left: 8px; */
+        &:hover{
+            cursor: pointer;
+        }
+    }
+
+    .formily-element-plus-form-item{
+        width: 44% !important;
+        display: flex;
+        align-items: flex-start;
+
+        .formily-element-plus-form-item-label,
+        .formily-element-plus-form-item-label-content{
+            min-width: 102px;
+            max-width: 160px;
+        }
+
+    }
+
+    .dialog-header{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .el-dialog__header{
+        padding: 12px 24px;
+        /* padding-bottom: 0; */
+        border-bottom: 1px solid #f5f6f7;
+        margin-right: 0;
+    }
+
+    .el-dialog{
+        padding: 0;
+        .el-dialog__body{
+            padding: 12px 24px;
+            height: 100%;
+        }
+    }
+
+}
+
+</style>