@tmagic/editor 1.2.14 → 1.3.0-alpha.0

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -1,7 +1,7 @@
 <template>
-  <TMagicScrollbar class="m-editor-code-block-list">
+  <TMagicScrollbar class="m-editor-code-block-list m-editor-dep-list-panel">
     <slot name="code-block-panel-header">
-      <div class="code-header-wrapper">
+      <div class="search-wrapper">
         <SearchInput @search="filterTextChangeHandler"></SearchInput>
         <TMagicButton class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
           >新增</TMagicButton
@@ -18,6 +18,7 @@
       :default-expanded-keys="expandedKeys"
       :expand-on-click-node="false"
       :data="codeList"
+      :props="treeProps"
       :highlight-current="true"
       :filter-node-method="filterNode"
       @node-click="clickHandler"
@@ -27,8 +28,8 @@
           <div class="list-item">
             <CodeIcon v-if="data.type === 'code'" class="codeIcon"></CodeIcon>
             <AppManageIcon v-if="data.type === 'node'" class="compIcon"></AppManageIcon>
-            <span class="code-name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
-              >{{ data.name }}（{{ data.id }}）</span
+            <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
+              >{{ data.name }} ({{ data.id }})</span
             >
             <!-- 右侧工具栏 -->
             <div class="right-tool" v-if="data.type === 'code'">
@@ -75,6 +76,12 @@ const props = defineProps<{
   paramsColConfig?: ColumnConfig;
 }>();
 
+const treeProps = {
+  children: 'children',
+  label: 'name',
+  value: 'id',
+};
+
 const { codeBlockService, depService, editorService } = inject<Services>('services') || {};
 
 // 代码块列表

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -0,0 +1,84 @@
+<template>
+  <TMagicDrawer
+    v-model="visible"
+    :title="title"
+    :close-on-press-escape="true"
+    :append-to-body="true"
+    :show-close="true"
+    :close-on-click-modal="true"
+    :size="size"
+  >
+    <MForm ref="form" :config="dataSourceConfig" :init-values="initValues" @change="changeHandler"></MForm>
+
+    <template #footer>
+      <div>
+        <TMagicButton type="primary" @click="submitHandler">确定</TMagicButton>
+        <TMagicButton @click="hide">关闭</TMagicButton>
+      </div>
+    </template>
+  </TMagicDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, watchEffect } from 'vue';
+
+import { TMagicButton, TMagicDrawer, tMagicMessage } from '@tmagic/design';
+import { MForm } from '@tmagic/form';
+
+import type { Services } from '@editor/type';
+
+const props = defineProps<{
+  title?: string;
+  values: any;
+}>();
+
+const type = ref('base');
+
+const emit = defineEmits(['submit']);
+
+const services = inject<Services>('services');
+
+const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+
+const dataSourceConfig = computed(() => services?.dataSourceService.getFormConfig(type.value) || []);
+
+const form = ref<InstanceType<typeof MForm>>();
+
+const initValues = ref({});
+
+watchEffect(() => {
+  initValues.value = props.values;
+  type.value = props.values.type || 'base';
+});
+
+const changeHandler = (value: Record<string, any>) => {
+  if (value.type === type.value) {
+    return;
+  }
+  type.value = value.type || 'base';
+  initValues.value = value;
+};
+
+const submitHandler = async () => {
+  try {
+    const values = await form.value?.submitForm();
+    emit('submit', values);
+  } catch (error: any) {
+    tMagicMessage.error(error.message);
+  }
+};
+
+const visible = ref(false);
+
+const hide = () => {
+  visible.value = false;
+};
+
+defineExpose({
+  show() {
+    visible.value = true;
+  },
+
+  hide,
+});
+</script>

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -0,0 +1,130 @@
+<template>
+  <TMagicScrollbar class="data-source-list-panel m-editor-dep-list-panel">
+    <div class="search-wrapper">
+      <SearchInput @search="filterTextChangeHandler"></SearchInput>
+      <TMagicButton type="primary" size="small" @click="addHandler">新增</TMagicButton>
+    </div>
+
+    <!-- 数据源列表 -->
+    <TMagicTree
+      ref="tree"
+      class="magic-editor-layer-tree"
+      node-key="id"
+      empty-text="暂无代码块"
+      default-expand-all
+      :expand-on-click-node="false"
+      :data="list"
+      :highlight-current="true"
+    >
+      <template #default="{ data }">
+        <div :id="data.id" class="list-container">
+          <div class="list-item">
+            <Icon v-if="data.type === 'code'" class="codeIcon" :icon="Coin"></Icon>
+            <Icon v-if="data.type === 'node'" class="compIcon" :icon="Aim"></Icon>
+            <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
+              >{{ data.name }}（{{ data.id }}）</span
+            >
+            <!-- 右侧工具栏 -->
+            <div class="right-tool" v-if="data.type === 'code'">
+              <TMagicTooltip effect="dark" content="编辑" placement="bottom">
+                <Icon class="edit-icon" :icon="Edit" @click.stop="editHandler(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <TMagicTooltip effect="dark" content="删除" placement="bottom">
+                <Icon :icon="Close" class="edit-icon" @click.stop="removeHandler(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <slot name="data-source-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
+            </div>
+          </div>
+        </div>
+      </template>
+    </TMagicTree>
+
+    <DataSourceConfigPanel
+      ref="editDialog"
+      :values="dataSourceValues"
+      :title="typeof dataSourceValues.id !== 'undefined' ? `编辑${dataSourceValues.title}` : '新增'"
+      @submit="submitDataSourceHandler"
+    ></DataSourceConfigPanel>
+  </TMagicScrollbar>
+</template>
+
+<script setup lang="ts" name="MEditorDataSourceListPanel">
+import { computed, inject, ref } from 'vue';
+import { Aim, Close, Coin, Edit } from '@element-plus/icons-vue';
+
+import { TMagicButton, tMagicMessageBox, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import { DataSourceSchema } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import SearchInput from '@editor/components/SearchInput.vue';
+import type { Services } from '@editor/type';
+
+import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
+
+const services = inject<Partial<Services>>('services', {});
+const { dataSourceService, depService } = inject<Services>('services') || {};
+
+const list = computed(() =>
+  Object.values(depService?.targets['data-source'] || {}).map((target) => ({
+    id: target.id,
+    name: target.name,
+    type: 'code',
+    children: Object.entries(target.deps).map(([id, dep]) => ({
+      name: dep.name,
+      type: 'node',
+      id,
+      children: dep.keys.map((key) => ({ name: key, id: key, type: 'key' })),
+    })),
+  })),
+);
+
+const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
+
+const dataSourceValues = ref<Record<string, any>>({});
+
+const addHandler = () => {
+  if (!editDialog.value) return;
+
+  dataSourceValues.value = {};
+
+  editDialog.value.show();
+};
+
+const editHandler = (id: string) => {
+  if (!editDialog.value || !services) return;
+
+  dataSourceValues.value = {
+    ...dataSourceService?.getDataSourceById(id),
+  };
+
+  editDialog.value.show();
+};
+
+const removeHandler = async (id: string) => {
+  await tMagicMessageBox.confirm('确定删除?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+
+  dataSourceService?.remove(id);
+};
+
+const submitDataSourceHandler = (value: DataSourceSchema) => {
+  if (!services) return;
+
+  if (value.id) {
+    dataSourceService?.update(value);
+  } else {
+    dataSourceService?.add(value);
+  }
+
+  editDialog.value?.hide();
+};
+
+const tree = ref<InstanceType<typeof TMagicTree>>();
+
+const filterTextChangeHandler = (val: string) => {
+  tree.value?.filter(val);
+};
+</script>

package/src/services/codeBlock.ts

@@ -23,7 +23,6 @@ import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 
 import type { CodeState } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
-import { info } from '@editor/utils/logger';
 
 import BaseService from './BaseService';
 
@@ -55,7 +54,6 @@ class CodeBlock extends BaseService {
    */
   public async setCodeDsl(codeDsl: CodeBlockDSL): Promise<void> {
     this.state.codeDsl = codeDsl;
-    info('[code-block]:code-dsl-change', this.state.codeDsl);
     this.emit('code-dsl-change', this.state.codeDsl);
   }
 

package/src/services/dataSource.ts

@@ -0,0 +1,90 @@
+import { reactive } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+import type { FormConfig } from '@tmagic/form';
+import { DataSourceSchema } from '@tmagic/schema';
+import { guid } from '@tmagic/utils';
+
+import { getFormConfig } from '@editor/utils/data-source';
+
+import BaseService from './BaseService';
+
+interface State {
+  dataSources: DataSourceSchema[];
+  configs: Record<string, FormConfig>;
+}
+
+type StateKey = keyof State;
+class DataSource extends BaseService {
+  private state = reactive<State>({
+    dataSources: [],
+    configs: {},
+  });
+
+  public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
+    this.state[name] = value;
+  }
+
+  public get<K extends StateKey>(name: K): State[K] {
+    return this.state[name];
+  }
+
+  public getFormConfig(type = 'base') {
+    return getFormConfig(type, this.get('configs'));
+  }
+
+  public setFormConfig(type: string, config: FormConfig) {
+    this.get('configs')[type] = config;
+  }
+
+  public add(config: DataSourceSchema) {
+    const newConfig = {
+      ...config,
+      id: this.createId(),
+    };
+
+    this.get('dataSources').push(newConfig);
+
+    this.emit('add', newConfig);
+  }
+
+  public update(config: DataSourceSchema) {
+    const dataSources = this.get('dataSources');
+
+    const index = dataSources.findIndex((ds) => ds.id === config.id);
+
+    dataSources[index] = cloneDeep(config);
+
+    this.emit('update', config);
+  }
+
+  public remove(id: string) {
+    const dataSources = this.get('dataSources');
+    const index = dataSources.findIndex((ds) => ds.id === id);
+    dataSources.splice(index, 1);
+
+    this.emit('remove', id);
+  }
+
+  public getDataSourceById(id: string) {
+    return this.get('dataSources').find((ds) => ds.id === id);
+  }
+
+  public resetState() {
+    this.set('dataSources', []);
+  }
+
+  public destroy() {
+    this.removeAllListeners();
+    this.resetState();
+    this.removeAllPlugins();
+  }
+
+  private createId(): string {
+    return `ds_${guid()}`;
+  }
+}
+
+export type DataSourceService = DataSource;
+
+export default new DataSource();

package/src/services/props.ts

@@ -21,7 +21,7 @@ import { cloneDeep, mergeWith } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
 import type { MComponent, MNode } from '@tmagic/schema';
-import { toLine } from '@tmagic/utils';
+import { guid, toLine } from '@tmagic/utils';
 
 import type { PropsState } from '@editor/type';
 import { fillConfig } from '@editor/utils/props';
@@ -130,7 +130,7 @@ class Props extends BaseService {
   }
 
   public async createId(type: string | number): Promise<string> {
-    return `${type}_${this.guid()}`;
+    return `${type}_${guid()}`;
   }
 
   /**
@@ -181,19 +181,6 @@ class Props extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
-
-  /**
-   * 生成指定位数的GUID，无【-】格式
-   * @param digit 位数，默认值8
-   * @returns
-   */
-  private guid(digit = 8): string {
-    return 'x'.repeat(digit).replace(/[xy]/g, (c) => {
-      const r = (Math.random() * 16) | 0;
-      const v = c === 'x' ? r : (r & 0x3) | 0x8;
-      return v.toString(16);
-    });
-  }
 }
 
 export type PropsService = Props;

package/src/theme/code-block.scss

@@ -1,81 +1,19 @@
 .m-editor-code-block-list {
   height: 100%;
 
-  .magic-editor-layer-tree {
-    padding-top: 48px;
-  }
-
-  .code-header-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 1;
-
-    .search-input {
-      flex: 1;
-      position: relative;
-    }
-
-    .create-code-button {
-      margin-left: 2px;
-      margin-right: 10px;
-    }
-  }
-
-  .divider {
-    margin: 10px 0 0 0;
-  }
-
   .list-container {
-    width: 100%;
-    overflow: hidden;
     .list-item {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      align-items: center;
-
-      .right-tool {
-        display: flex;
-        width: fit-content !important;
-        align-items: center;
-        margin-right: 10px;
-        .edit-icon {
-          margin: 0 5px;
-        }
-      }
-
       .codeIcon {
-        width: 20px;
-        height: 20px;
+        width: 22px;
+        height: 22px;
         margin-right: 5px;
       }
 
       .compIcon {
-        width: 15px;
-        height: 15px;
+        width: 22px;
+        height: 22px;
         margin-right: 5px;
       }
-
-      .code-name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 0 !important;
-        flex: 1;
-        line-height: 22px;
-
-        &.code {
-          color: #000;
-        }
-
-        &.hook {
-          color: #909399;
-        }
-      }
     }
   }
 }

package/src/theme/data-source-fields.scss

@@ -0,0 +1,13 @@
+.m-editor-data-source-fields {
+  width: 100%;
+
+  .tmagic-design-table {
+    width: 100%;
+  }
+
+  .m-editor-data-source-fields-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+  }
+}

package/src/theme/data-source.scss

@@ -0,0 +1,17 @@
+.data-source-list-panel {
+  .list-container {
+    .list-item {
+      .codeIcon {
+        width: 22px;
+        height: 22px;
+        margin-right: 5px;
+      }
+
+      .compIcon {
+        width: 22px;
+        height: 22px;
+        margin-right: 5px;
+      }
+    }
+  }
+}

package/src/theme/dep-list.scss

@@ -0,0 +1,59 @@
+.m-editor-dep-list-panel {
+  .magic-editor-layer-tree {
+    padding-top: 48px;
+  }
+
+  .search-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+
+    .search-input {
+      flex: 1;
+      position: relative;
+    }
+
+    .tmagic-design-button {
+      margin-right: 10px;
+    }
+  }
+
+  .list-container {
+    width: 100%;
+    overflow: hidden;
+    .list-item {
+      display: flex;
+      width: 100%;
+      align-items: center;
+
+      .right-tool {
+        display: flex;
+        width: fit-content !important;
+        align-items: center;
+        .edit-icon {
+          margin: 0 5px;
+        }
+      }
+      .name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 0 !important;
+        flex: 1;
+        line-height: 22px;
+
+        &.code {
+          color: #000;
+        }
+
+        &.hook {
+          color: #909399;
+        }
+      }
+    }
+  }
+}

package/src/theme/key-value.scss

@@ -0,0 +1,13 @@
+.m-fields-key-value-item {
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+}
+
+.m-fileds-key-value-delimiter {
+  margin: 0 10px;
+}
+
+.m-fileds-key-value-delete {
+  margin-left: 10px;
+}

package/src/theme/sidebar.scss

@@ -1,11 +1,24 @@
-.m-editor-sidebar {
+.m-editor-sidebar.tmagic-design-tabs {
   height: 100%;
 
-  &.el-tabs--left .el-tabs__header {
+  .el-tabs__header,
+  .t-tabs__header {
     background: $--sidebar-heder-background-color;
     border: 0;
+    height: 100%;
+
+    .t-tabs__nav--card {
+      background-color: transparent;
+    }
 
-    &.is-left {
+    .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(
+        .t-is-active
+      ):hover {
+      background-color: transparent;
+    }
+
+    &.is-left,
+    &.t-is-left {
       width: 40px;
       margin-right: 0;
     }
@@ -23,7 +36,8 @@
       margin-left: 2px;
     }
 
-    .el-tabs__item.is-left {
+    .el-tabs__item.is-left,
+    .t-tabs__nav-item {
       line-height: 15px;
       border: 0;
       height: auto;
@@ -31,8 +45,10 @@
       color: rgb(255, 255, 255);
       box-sizing: border-box;
 
-      &.is-left {
-        &.is-active {
+      &.is-left,
+      &.t-is-left {
+        &.is-active,
+        &.t-is-active {
           background: $--sidebar-content-background-color;
           border: 0;
 
@@ -51,6 +67,10 @@
       }
     }
 
+    .t-tabs__nav-item {
+      padding: 7px;
+    }
+
     i {
       font-size: 25px;
       color: rgba(255, 255, 255, 0.6);

package/src/theme/theme.scss

@@ -16,3 +16,7 @@
 @import "./event.scss";
 @import "./layout.scss";
 @import "./breadcrumb.scss";
+@import "./dep-list.scss";
+@import "./data-source.scss";
+@import "./data-source-fields.scss";
+@import "./key-value.scss";

package/src/type.ts

@@ -30,6 +30,7 @@ import type {
 
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
+import { DataSourceService } from './services/dataSource';
 import type { DepService } from './services/dep';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -56,6 +57,7 @@ export interface Services {
   uiService: UiService;
   codeBlockService: CodeBlockService;
   depService: DepService;
+  dataSourceService: DataSourceService;
 }
 
 export interface StageOptions {
@@ -264,7 +266,7 @@ export interface SideComponent extends MenuComponent {
  * layer: 已选组件树
  * code-block: 代码块
  */
-export type SideItem = 'component-list' | 'layer' | 'code-block' | SideComponent;
+export type SideItem = 'component-list' | 'layer' | 'code-block' | 'data-source' | SideComponent;
 
 /** 工具栏 */
 export interface SideBarData {