@cicctencent/low-code-editor 0.0.0-stage → 1.1.9-beta.6

package/src/DataSource/index.vue

@@ -0,0 +1,640 @@
+<template>
+  <div class="datapool" :style="{ width: dataPoolWidth + 'px' }">
+    <div class="datapool-view-group">
+      <div class="datapool-view-group-title">数据源</div>
+      <div class="datapool-view-operation-group">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-select v-model="dataSourceType" @change="onSelectChange">
+              <el-option
+                v-for="item in typeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-col>
+          <el-col :span="16">
+            <el-input
+              v-model="keyword"
+              @input="onInputChange"
+              placeholder="搜索"
+              :suffix-icon="Search"
+            />
+          </el-col>
+        </el-row>
+        <div class="datapool-view-button-group">
+          <el-dropdown trigger="click" @command="onAddItem">
+            <el-button type="primary">添加</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="variable">变量</el-dropdown-item>
+                <el-dropdown-item command="method"
+                  >新建远程API</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </div>
+      <div class="datapool-view-group-list">
+        <Draggable
+          :model-value="itemList"
+          handle=".icon-drag"
+          :move="() => !readOnly"
+          @change="onItemChange"
+        >
+          <template #item="{ element, index }">
+            <div class="datapool-list-item">
+              <div class="datapool-list-item-title">
+                <div class="title-icon icon-drag">
+                  <svg
+                    fill="currentColor"
+                    preserveAspectRatio="xMidYMid meet"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 5 16"
+                    class="ve-svgicon"
+                    style="vertical-align: middle"
+                  >
+                    <path
+                      d="M0.499972716,6 L1.50002728,6 C1.77615459,6 2,6.22384541 2,6.49997272 C2,6.77610002 1.77615459,6.99994543 1.50002728,6.99994543 L0.499972716,6.99994543 C0.22384541,6.99994543 3.38158422e-17,6.77610002 0,6.49997272 C-3.38158422e-17,6.22384541 0.22384541,6 0.499972716,6 Z M0.499972716,3 L1.50002728,3 C1.77615459,3 2,3.22384541 2,3.49997272 C2,3.77610002 1.77615459,3.99994543 1.50002728,3.99994543 L0.499972716,3.99994543 C0.22384541,3.99994543 3.38158422e-17,3.77610002 0,3.49997272 C-3.38158422e-17,3.22384541 0.22384541,3 0.499972716,3 Z M0.499972716,7.28787148e-18 L1.50002728,5.55666624e-14 C1.77615459,7.07214574e-14 2,0.22384541 2,0.499972716 C2,0.776100022 1.77615459,0.999945432 1.50002728,0.999945432 L0.499972716,0.999945432 C0.22384541,0.999945432 3.38158422e-17,0.776100022 0,0.499972716 C-3.38158422e-17,0.22384541 0.22384541,5.0723721e-17 0.499972716,0 Z M0.5,9.00002729 L1.5,9.00002729 C1.77614237,9.00002729 2,9.22388491 2,9.50002729 C2,9.77616966 1.77614237,10.0000273 1.5,10.0000273 L0.5,10.0000273 C0.223857625,10.0000273 3.38176876e-17,9.77616966 0,9.50002729 C-3.38176876e-17,9.22388491 0.223857625,9.00002729 0.5,9.00002729 Z M0.5,12.0000273 L1.5,12.0000273 C1.77614237,12.0000273 2,12.2238849 2,12.5000273 C2,12.7761697 1.77614237,13.0000273 1.5,13.0000273 L0.5,13.0000273 C0.223857625,13.0000273 3.38176876e-17,12.7761697 0,12.5000273 C-3.38176876e-17,12.2238849 0.223857625,12.0000273 0.5,12.0000273 Z M0.5,15.0000273 L1.5,15.0000273 C1.77614237,15.0000273 2,15.2238849 2,15.5000273 C2,15.7761697 1.77614237,16.0000273 1.5,16.0000273 L0.5,16.0000273 C0.223857625,16.0000273 3.38176876e-17,15.7761697 0,15.5000273 C-3.38176876e-17,15.2238849 0.223857625,15.0000273 0.5,15.0000273 Z M3.49997272,6 L4.50002728,6 C4.77615459,6 5,6.22384541 5,6.49997272 C5,6.77610002 4.77615459,6.99994543 4.50002728,6.99994543 L3.49997272,6.99994543 C3.22384541,6.99994543 3,6.77610002 3,6.49997272 C3,6.22384541 3.22384541,6 3.49997272,6 Z M3.49997272,3 L4.50002728,3 C4.77615459,3 5,3.22384541 5,3.49997272 C5,3.77610002 4.77615459,3.99994543 4.50002728,3.99994543 L3.49997272,3.99994543 C3.22384541,3.99994543 3,3.77610002 3,3.49997272 C3,3.22384541 3.22384541,3 3.49997272,3 Z M3.49997272,7.28787148e-18 L4.50002728,5.55666624e-14 C4.77615459,7.07214574e-14 5,0.22384541 5,0.499972716 C5,0.776100022 4.77615459,0.999945432 4.50002728,0.999945432 L3.49997272,0.999945432 C3.22384541,0.999945432 3,0.776100022 3,0.499972716 C3,0.22384541 3.22384541,5.0723721e-17 3.49997272,0 Z M3.5,9.00002729 L4.5,9.00002729 C4.77614237,9.00002729 5,9.22388491 5,9.50002729 C5,9.77616966 4.77614237,10.0000273 4.5,10.0000273 L3.5,10.0000273 C3.22385763,10.0000273 3,9.77616966 3,9.50002729 C3,9.22388491 3.22385763,9.00002729 3.5,9.00002729 Z M3.5,12.0000273 L4.5,12.0000273 C4.77614237,12.0000273 5,12.2238849 5,12.5000273 C5,12.7761697 4.77614237,13.0000273 4.5,13.0000273 L3.5,13.0000273 C3.22385763,13.0000273 3,12.7761697 3,12.5000273 C3,12.2238849 3.22385763,12.0000273 3.5,12.0000273 Z M3.5,15.0000273 L4.5,15.0000273 C4.77614237,15.0000273 5,15.2238849 5,15.5000273 C5,15.7761697 4.77614237,16.0000273 4.5,16.0000273 L3.5,16.0000273 C3.22385763,16.0000273 3,15.7761697 3,15.5000273 C3,15.2238849 3.22385763,15.0000273 3.5,15.0000273 Z"
+                      id="Combined-Shape"
+                    ></path>
+                  </svg>
+                </div>
+                <div class="title-icon icon-arrow">
+                  <svg
+                    fill="currentColor"
+                    preserveAspectRatio="xMidYMid meet"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 1024 1024"
+                    class="ve-svgicon"
+                    style="vertical-align: middle"
+                    data-spm-anchor-id="a2q5o.26736379.0.i38.c2202a4b1qWlpv"
+                  >
+                    <path
+                      d="M342.016 214.016l468.010667 297.984-468.010667 297.984 0-596.010667z"
+                      data-spm-anchor-id="a2q5o.26736379.0.i37.c2202a4b1qWlpv"
+                    ></path>
+                  </svg>
+                </div>
+                <div
+                  :class="[
+                    'title-protocal',
+                    element.type === DataSourceType.METHOD
+                      ? 'METHOD'
+                      : 'VARIABLE',
+                  ]"
+                >
+                  {{ element.type === DataSourceType.METHOD ? '远程' : '变量' }}
+                </div>
+                <div class="title-name">
+                  <span>{{ element.name }}</span>
+                </div>
+                <div class="title-right-icons">
+                  <div
+                    class="title-icon icon-edit"
+                    @click="onEditItem(element, index)"
+                  >
+                    <svg
+                      fill="currentColor"
+                      preserveAspectRatio="xMidYMid meet"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 1024 1024"
+                      class="ve-svgicon"
+                      style="vertical-align: middle"
+                      data-spm-anchor-id="a2q5o.26736379.0.i33.c2202a4b1qWlpv"
+                    >
+                      <path
+                        d="M707.872 289.6l-256.32 256.32 56.576 33.952 33.92 56.576 256.32-256.32-90.496-90.528z m45.28-45.248l90.496 90.496 22.624-22.624a32 32 0 0 0 0-45.248L821.024 221.76a32 32 0 0 0-45.248 0l-22.624 22.624z m-346.88 346.848l-15.168 15.2v90.496h90.496l15.2-15.2-33.92-56.544-56.576-33.952zM843.68 153.856l90.496 90.496a64 64 0 0 1 0 90.496L508.16 760.896h-181.024v-181.024L753.152 153.856a64 64 0 0 1 90.496 0zM576 96a32 32 0 0 1-32 32H160c-17.696 0-32 14.208-32 31.744v704.512c0 17.184 14.336 31.744 32 31.744h704c17.696 0 32-14.208 32-31.744V608a32 32 0 0 1 64 0v287.84C960 931.264 931.2 960 896.288 960H127.68C92.512 960 64 931.296 64 895.84V128.16C64 92.736 92.8 64 127.712 64H544a32 32 0 0 1 32 32z"
+                        data-spm-anchor-id="a2q5o.26736379.0.i58.c2202a4b1qWlpv"
+                      ></path>
+                    </svg>
+                  </div>
+                  <div
+                    class="title-icon icon-copy"
+                    @click="onCopyItem(element, index)"
+                  >
+                    <svg
+                      fill="currentColor"
+                      preserveAspectRatio="xMidYMid meet"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 1024 1024"
+                      class="ve-svgicon"
+                      style="vertical-align: middle"
+                    >
+                      <path
+                        d="M192 256.16C192 220.736 220.704 192 256.16 192h639.68C931.264 192 960 220.704 960 256.16v639.68A64.16 64.16 0 0 1 895.84 960H256.16A64.16 64.16 0 0 1 192 895.84V256.16z m64 31.584v576.512a32 32 0 0 0 31.744 31.744h576.512a32 32 0 0 0 31.744-31.744V287.744A32 32 0 0 0 864.256 256H287.744A32 32 0 0 0 256 287.744zM288 192v64h64V192H288z m128 0v64h64V192h-64z m128 0v64h64V192h-64z m128 0v64h64V192h-64z m128 0v64h64V192h-64z m96 96v64h64V288h-64z m0 128v64h64v-64h-64z m0 128v64h64v-64h-64z m0 128v64h64v-64h-64z m0 128v64h64v-64h-64z m-96 96v64h64v-64h-64z m-128 0v64h64v-64h-64z m-128 0v64h64v-64h-64z m-128 0v64h64v-64h-64z m-128 0v64h64v-64H288z m-96-96v64h64v-64H192z m0-128v64h64v-64H192z m0-128v64h64v-64H192z m0-128v64h64v-64H192z m0-128v64h64V288H192z m160 416c0-17.664 14.592-32 32.064-32h319.872a31.968 31.968 0 1 1 0 64h-319.872A31.968 31.968 0 0 1 352 704z m0-128c0-17.664 14.4-32 32.224-32h383.552c17.792 0 32.224 14.208 32.224 32 0 17.664-14.4 32-32.224 32H384.224A32.032 32.032 0 0 1 352 576z m0-128c0-17.664 14.4-32 32.224-32h383.552c17.792 0 32.224 14.208 32.224 32 0 17.664-14.4 32-32.224 32H384.224A32.032 32.032 0 0 1 352 448z m512 47.936V192h-64V159.968A31.776 31.776 0 0 0 768.032 128H160A31.776 31.776 0 0 0 128 159.968V768c0 17.92 14.304 31.968 31.968 31.968H192v64h303.936H128.128A63.968 63.968 0 0 1 64 799.872V128.128C64 92.704 92.48 64 128.128 64h671.744C835.296 64 864 92.48 864 128.128v367.808z"
+                        data-spm-anchor-id="a2q5o.26736379.0.i55.c2202a4b1qWlpv"
+                      ></path>
+                    </svg>
+                  </div>
+                  <div
+                    class="title-icon icon-delete"
+                    @click="onDeleteItem(element, index)"
+                  >
+                    <svg
+                      fill="currentColor"
+                      preserveAspectRatio="xMidYMid meet"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 1024 1024"
+                      class="ve-svgicon"
+                      style="vertical-align: middle"
+                    >
+                      <path
+                        d="M224 256v639.84A64 64 0 0 0 287.84 960h448.32A64 64 0 0 0 800 895.84V256h64a32 32 0 1 0 0-64H160a32 32 0 1 0 0 64h64zM384 96c0-17.664 14.496-32 31.904-32h192.192C625.696 64 640 78.208 640 96c0 17.664-14.496 32-31.904 32H415.904A31.872 31.872 0 0 1 384 96z m-96 191.744C288 270.208 302.4 256 320.224 256h383.552C721.6 256 736 270.56 736 287.744v576.512C736 881.792 721.6 896 703.776 896H320.224A32.224 32.224 0 0 1 288 864.256V287.744zM352 352c0-17.696 14.208-32.032 32-32.032 17.664 0 32 14.24 32 32v448c0 17.664-14.208 32-32 32-17.664 0-32-14.24-32-32V352z m128 0c0-17.696 14.208-32.032 32-32.032 17.664 0 32 14.24 32 32v448c0 17.664-14.208 32-32 32-17.664 0-32-14.24-32-32V352z m128 0c0-17.696 14.208-32.032 32-32.032 17.664 0 32 14.24 32 32v448c0 17.664-14.208 32-32 32-17.664 0-32-14.24-32-32V352z"
+                      ></path>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </Draggable>
+      </div>
+    </div>
+    <div v-if="showForm" class="datapool-form-wrap">
+      <div class="datapool-form-wrap-title">
+        <div>{{ formType + '数据源' }}</div>
+        <div class="form-button-group">
+          <el-button type="primary" @click="onSave">保存</el-button>
+          <el-button @click="onCancel">取消</el-button>
+        </div>
+      </div>
+      <div class="datapool-form-wrap-content">
+        <el-form :model="formModel" ref="formRef" label-position="left">
+          <el-form-item label="名 称" prop="name" label-width="50px">
+            <el-input v-model="formModel.name" />
+          </el-form-item>
+          <el-form-item label="描 述" prop="desc" label-width="50px">
+            <el-input v-model="formModel.desc" />
+          </el-form-item>
+          <el-form-item prop="type" label-width="0px">
+            <el-radio-group v-model="formModel.type">
+              <el-radio label="method">方法</el-radio>
+              <el-radio label="variable">变量</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-row v-if="formModel.type === 'method'" :gutter="12">
+            <el-col :span="11">
+              <el-form-item prop="entityId" label-width="0px">
+                <el-select
+                  v-model="formModel.entityId"
+                  placeholder="实体"
+                  :loading="entityData.loading"
+                >
+                  <el-option
+                    v-for="item in entityData.list"
+                    :key="item.key"
+                    :label="item.title"
+                    :value="item.entityId"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="11">
+              <el-form-item prop="methodId" label-width="0px">
+                <el-select
+                  v-model="formModel.methodId"
+                  placeholder="方法"
+                  :loading="methodData.loading"
+                >
+                  <el-option
+                    v-for="item in methodData.list"
+                    :key="item.key"
+                    :label="item.title"
+                    :value="item.methodId"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="2">
+              <el-icon><Warning /></el-icon>
+            </el-col>
+          </el-row>
+          <el-form-item
+            v-if="formModel.type === 'method'"
+            style="flex-direction: column"
+            prop="queryDSL"
+            label-width="150px"
+          >
+            <template #label>
+              请求参数<el-icon><Warning /></el-icon>
+            </template>
+            <v-ace-editor
+              v-model:value="formModel.queryDSL"
+              :options="{ showPrintMargin: false }"
+              theme="chrome"
+              lang="typescript"
+              style="height: 220px; width: 100%"
+            />
+          </el-form-item>
+          <el-form-item
+            v-else
+            style="flex-direction: column"
+            label="初始值"
+            prop="default"
+            required
+          >
+            <v-ace-editor
+              v-model:value="formModel.default"
+              :options="{ showPrintMargin: false }"
+              theme="chrome"
+              lang="typescript"
+              style="height: 220px; width: 100%"
+            />
+          </el-form-item>
+          <el-form-item
+            style="flex-direction: column"
+            prop="exeDSL"
+            label-width="150px"
+          >
+            <template #label>
+              {{ formModel.type === 'method' ? '回包处理' : '变量取值脚本'
+              }}<el-icon><Warning /></el-icon>
+            </template>
+            <v-ace-editor
+              v-model:value="formModel.exeDSL"
+              :options="{ showPrintMargin: false }"
+              theme="chrome"
+              lang="typescript"
+              style="height: 220px; width: 100%"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+//@ts-nocheck
+import { watch, ref, reactive, withDefaults, defineProps, defineEmits } from 'vue';
+import { Search, Warning } from '@cicctencent/icons-vue';
+import Draggable from 'vuedraggable';
+import '../config/ace.config';
+import { VAceEditor } from 'vue3-ace-editor';
+import { DataSource, DataSourceType } from '@cicctencent/low-code-core';
+import { FormInstance } from '@jt/jtui';
+enum DataPoolWidth {
+  FOLD = 300,
+  EXPAND = 710,
+}
+enum FormType {
+  ADD = '新建',
+  EDIT = '编辑',
+  COPY = '复制',
+}
+
+const props = withDefaults(
+  defineProps<{
+    sourceList: DataSource[];
+    readOnly?: boolean;
+  }>(),
+  {
+    sourceList: () => [],
+    readOnly: false,
+  }
+);
+
+const emits = defineEmits([
+  'getEntityList',
+  'getMethodList',
+  'dataSourceChange',
+]);
+
+const typeOptions = [
+  { label: '全部', value: '' },
+  { label: '变量', value: 'variable' },
+  { label: '远程', value: 'method' },
+];
+// 数据源类型
+const dataSourceType = ref('');
+// 关键字
+const keyword = ref('');
+// 显示宽度
+const dataPoolWidth = ref(DataPoolWidth.FOLD);
+// 是否展示表单
+const showForm = ref(false);
+/* 实际展示的数据源列表 */
+const itemList = ref<DataSource[]>([]);
+// 表单类型
+const formType = ref<FormType>();
+// 表单数据
+const emptyFormModel = {
+  type: '',
+  name: '',
+  desc: '',
+  default: '',
+  queryDSL: '',
+  exeDSL: '',
+  entityId: null,
+  methodId: null,
+};
+const formModel = reactive<any>({ ...emptyFormModel });
+// 实体数据
+const entityData = reactive({
+  list: [],
+  loading: false,
+});
+// 方法数据
+const methodData = reactive({
+  list: [],
+  loading: false,
+});
+// 表单实例
+const formRef = ref<FormInstance>();
+// 当前编辑/复制的数据源序号
+let currentIndex = 0;
+
+watch(
+  () => props.sourceList,
+  val => {
+    itemList.value = val;
+  },
+  { deep: true, immediate: true }
+);
+
+watch(showForm, val => {
+  if (val && formModel.type === DataSourceType.METHOD) {
+    entityData.loading = true;
+    emits('getEntityList', list => {
+      entityData.loading = false;
+      entityData.list = list;
+    });
+    if (formModel.entityId) {
+      methodData.loading = true;
+      emits(
+        'getMethodList',
+        list => {
+          methodData.loading = false;
+          methodData.list = list;
+        },
+        formModel.entityId
+      );
+    }
+  }
+});
+
+watch(
+  () => formModel.entityId,
+  id => {
+    methodData.loading = true;
+    emits(
+      'getMethodList',
+      list => {
+        methodData.loading = false;
+        methodData.list = list;
+      },
+      id
+    );
+  }
+);
+
+/* 筛选数据源类型 */
+const onSelectChange = value => {
+  itemList.value = props.sourceList.filter(
+    item => value === '' || item.type === value
+  );
+};
+/* 根据数据源名称关键字筛选数据源 */
+const onInputChange = value => {
+  itemList.value = props.sourceList.filter(item => item.name.includes(value));
+};
+/* 数据源顺序发生变化 */
+const onItemChange = ({ element, newIndex, oldIndex }) => {
+  emits('dataSourceChange', {
+    type: 'drag',
+    data: { element, newIndex, oldIndex },
+  });
+};
+/* 清空表单 */
+const clearForm = () => {
+  Object.keys(emptyFormModel).forEach(key => {
+    formModel[key] = emptyFormModel[key];
+  });
+};
+/* 新建数据源 */
+let countAdd = 1;
+const onAddItem = (command: string) => {
+  dataPoolWidth.value = DataPoolWidth.EXPAND;
+  formType.value = FormType.ADD;
+  showForm.value = true;
+  // 初始表单数据
+  clearForm();
+  formModel.type = command;
+  formModel.name = command + countAdd++;
+  // 尚未保存 仅作为展示
+  itemList.value.push({ ...formModel });
+};
+/* 点击保存按钮触发的事件 */
+const onSave = () => {
+  // emit事件新增/编辑/复制数据源
+  switch (formType.value) {
+    case FormType.ADD:
+      emits('dataSourceChange', {
+        type: 'add',
+        data: { element: formModel },
+      });
+      break;
+    case FormType.EDIT:
+      emits('dataSourceChange', {
+        type: 'edit',
+        data: { element: formModel, index: currentIndex },
+      });
+      break;
+    case FormType.COPY:
+      emits('dataSourceChange', {
+        type: 'copy',
+        data: { element: formModel },
+      });
+      break;
+    default:
+      break;
+  }
+};
+/* 点击取消按钮触发的事件 */
+const onCancel = (element, index) => {
+  dataPoolWidth.value = DataPoolWidth.FOLD;
+  showForm.value = false;
+  // 新增和复制取消后删除预先增加的一项
+  [FormType.ADD, FormType.COPY].includes(formType.value) &&
+    itemList.value.pop();
+  clearForm();
+};
+/* 点击编辑图标 */
+const onEditItem = (element, index) => {
+  dataPoolWidth.value = DataPoolWidth.EXPAND;
+  formType.value = FormType.EDIT;
+  showForm.value = true;
+  Object.keys(element).forEach(key => {
+    formModel[key] = element[key];
+  });
+  currentIndex = index;
+};
+/* 点击复制图标 */
+const onCopyItem = (element, index) => {
+  dataPoolWidth.value = DataPoolWidth.EXPAND;
+  formType.value = FormType.COPY;
+  showForm.value = true;
+  Object.keys(element).forEach(key => {
+    if (key === 'name') formModel[key] = `${element[key]}_copy`;
+    else formModel[key] = element[key];
+  });
+  // 尚未保存 仅作为展示
+  itemList.value.push({ ...formModel });
+};
+/* 点击删除图标 */
+const onDeleteItem = (element, index) => {
+  // emit事件通知领域对象删除数据源配置
+  emits('dataSourceChange', { type: 'delete', data: { element, index } });
+};
+</script>
+
+<style lang="scss" scoped>
+.datapool {
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  overflow: auto;
+  background: #fff;
+  .datapool-view-group {
+    padding-top: 44px;
+    width: 300px;
+    user-select: initial;
+    display: inline-block;
+    vertical-align: top;
+    height: 100%;
+    overflow: auto;
+    border-right: 1px solid rgba(31, 56, 88, 0.1);
+    .datapool-view-group-title {
+      box-sizing: border-box;
+      line-height: 44px;
+      width: 100%;
+      top: 0;
+      text-align: left;
+      padding: 0 12px;
+      position: absolute;
+      background: #f6f7f8;
+    }
+    .datapool-view-operation-group {
+      margin-top: 8px;
+      padding: 0 12px;
+      .datapool-view-button-group {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10px;
+      }
+    }
+    .datapool-view-group-list {
+      overflow-y: auto;
+      margin-top: 10px;
+      .datapool-list-item {
+        margin-bottom: 6px;
+        border-radius: 2px;
+        padding: 0 12px;
+        position: relative;
+        .datapool-list-item-title {
+          line-height: 28px;
+          font-size: 12px;
+          font-weight: 700;
+          border: 1px solid rgba(31, 56, 88, 0.1);
+          border-radius: 3px;
+          padding: 0 4px;
+          box-sizing: border-box;
+          position: relative;
+          transition: border 0.3s ease;
+          display: flex;
+          align-items: center;
+          .title-icon {
+            width: 16px;
+            height: 16px;
+            max-height: 100%;
+            max-width: 100%;
+            opacity: 0.7;
+            overflow: hidden;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            cursor: pointer;
+          }
+          .icon-drag {
+            cursor: ns-resize;
+          }
+          .title-protocal {
+            padding: 0 4px;
+            border-radius: 5px;
+            text-align: center;
+          }
+          .title-protocal.METHOD {
+            color: #33a4ff;
+          }
+          .title-protocal.VARIABLE {
+            color: #66bc5c;
+          }
+          .title-protocal.URI {
+            color: #fabd0e;
+          }
+          .title-name {
+            max-width: calc(100% - 145px);
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            word-wrap: normal;
+          }
+          .title-right-icons {
+            position: absolute;
+            right: 5px;
+            display: flex;
+            align-items: center;
+            height: 24px;
+          }
+          .icon-edit,
+          .icon-copy {
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+  }
+  .datapool-form-wrap {
+    position: relative;
+    padding-top: 44px;
+    flex: 1;
+    height: 100%;
+    box-sizing: border-box;
+    border-right: 1px solid rgba(31, 56, 88, 0.1);
+    overflow: auto;
+    vertical-align: top;
+    font-size: 12px;
+    .datapool-form-wrap-title {
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      line-height: 44px;
+      padding: 0 12px;
+      position: absolute;
+      top: 0;
+      width: 409px;
+      background: #f6f7f8;
+      font-size: 14px;
+      z-index: 10;
+    }
+    .datapool-form-wrap-content {
+      width: 100%;
+      height: calc(100% - 37px);
+      box-sizing: border-box;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 8px 12px;
+    }
+  }
+}
+</style>

package/src/HeaderBar/components/BarDialog.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="trigger-area" @click="dialogVisible = true">
+    <slot></slot>
+  </div>
+  <el-dialog v-model="dialogVisible" :title="title" width="30%">
+    <VueForm :schema="schema" v-model="dataRef"></VueForm>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确定</el-button
+        >
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+// @ts-nocheck
+import { ref, withDefaults, defineProps, computed } from 'vue';
+import { VueForm } from '@jt/formily';
+import { Schema } from '@cicctencent/low-code-core';
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    schema: Schema;
+    data?: Record<string, any>;
+  }>(),
+  {}
+);
+
+const dataRef = computed(() => props.data);
+
+const dialogVisible = ref(false);
+</script>
+
+<style lang="scss" scoped>
+.trigger-area {
+  display: flex;
+  align-items: center;
+}
+</style>