@tmagic/editor 1.2.0-beta.1 → 1.2.0-beta.3

package/src/layouts/sidebar/TabPane.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-tab-pane v-if="config" :name="config.text">
+  <TMagicTabPane v-if="config" :name="config.text">
     <template #label>
       <div :key="config.text">
         <m-icon v-if="config.icon" :icon="config.icon"></m-icon>
@@ -35,8 +35,8 @@
         <component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" />
       </template>
 
-      <template #code-block-panel-tool="{ id }" v-if="data === 'code-block' || config.slots?.codeBlockPanelTool">
-        <slot v-if="data === 'code-block'" name="code-block-panel-tool" :id="id"></slot>
+      <template #code-block-panel-tool="{ id, data }" v-if="data === 'code-block' || config.slots?.codeBlockPanelTool">
+        <slot v-if="data === 'code-block'" name="code-block-panel-tool" :id="id" :data="data"></slot>
         <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
       </template>
 
@@ -61,13 +61,15 @@
         />
       </template>
     </component>
-  </el-tab-pane>
+  </TMagicTabPane>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
 import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 
+import { TMagicTabPane } from '@tmagic/design';
+
 import MIcon from '../../components/Icon.vue';
 import { SideComponent, SideItem } from '../../type';
 
@@ -75,52 +77,42 @@ import CodeBlockList from './code-block/CodeBlockList.vue';
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';
 
-export default defineComponent({
-  components: { MIcon },
-
-  props: {
-    data: {
-      type: [Object, String] as PropType<SideItem>,
-    },
-  },
+const props = defineProps<{
+  data?: SideItem;
+}>();
 
-  setup(props) {
-    return {
-      config: computed<SideComponent | undefined>(() => {
-        if (typeof props.data !== 'string') {
-          return props.data;
-        }
+const config = computed<SideComponent | undefined>(() => {
+  if (typeof props.data !== 'string') {
+    return props.data;
+  }
 
-        switch (props.data) {
-          case 'component-list':
-            return {
-              type: 'component',
-              icon: Coin,
-              text: '组件',
-              component: ComponentListPanel,
-              slots: {},
-            };
-          case 'layer':
-            return {
-              type: 'component',
-              icon: Files,
-              text: '已选组件',
-              component: LayerPanel,
-              slots: {},
-            };
-          case 'code-block':
-            return {
-              type: 'component',
-              icon: EditPen,
-              text: '代码编辑',
-              component: CodeBlockList,
-              slots: {},
-            };
-          default:
-            return undefined;
-        }
-      }),
-    };
-  },
+  switch (props.data) {
+    case 'component-list':
+      return {
+        type: 'component',
+        icon: Coin,
+        text: '组件',
+        component: ComponentListPanel,
+        slots: {},
+      };
+    case 'layer':
+      return {
+        type: 'component',
+        icon: Files,
+        text: '已选组件',
+        component: LayerPanel,
+        slots: {},
+      };
+    case 'code-block':
+      return {
+        type: 'component',
+        icon: EditPen,
+        text: '代码编辑',
+        component: CodeBlockList,
+        slots: {},
+      };
+    default:
+      return undefined;
+  }
 });
 </script>

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

@@ -1,25 +1,24 @@
 <template>
-  <el-dialog
+  <TMagicDialog
     v-model="isShowCodeBlockEditor"
+    class="code-editor-dialog"
     :title="currentTitle"
     :fullscreen="true"
     :before-close="saveAndClose"
     :append-to-body="true"
-    custom-class="code-editor-dialog"
   >
     <layout v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 左侧列表 -->
       <template #left v-if="mode === CodeEditorMode.LIST">
-        <el-tree
+        <TMagicTree
           v-if="!isEmpty(state.codeList)"
-          ref="tree"
+          class="side-tree"
           node-key="id"
           empty-text="暂无代码块"
           :data="state.codeList"
           :highlight-current="true"
-          @node-click="selectHandler"
           :current-node-key="state.codeList[0].id"
-          class="side-tree"
+          @node-click="selectHandler"
         >
           <template #default="{ data }">
             <div :id="data.id" class="list-container">
@@ -28,7 +27,7 @@
               </div>
             </div>
           </template>
-        </el-tree>
+        </TMagicTree>
       </template>
       <!-- 右侧区域 -->
       <template #center>
@@ -41,11 +40,16 @@
           ]"
         >
           <slot name="code-block-edit-panel-header" :id="id"></slot>
-          <el-card shadow="never">
+          <TMagicCard shadow="never">
             <template #header>
               <div class="code-name-wrapper">
                 <div class="code-name-label">代码块名称</div>
-                <el-input v-if="codeConfig" class="code-name-input" v-model="codeConfig.name" :disabled="!editable" />
+                <TMagicInput
+                  v-if="codeConfig"
+                  class="code-name-input"
+                  v-model="codeConfig.name"
+                  :disabled="!editable"
+                />
               </div>
             </template>
             <div class="m-editor-wrapper">
@@ -63,26 +67,27 @@
                 }"
               ></magic-code-editor>
               <div class="m-editor-content-bottom" v-if="editable">
-                <el-button type="primary" class="button" @click="saveCode">保存</el-button>
-                <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
+                <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
+                <TMagicButton type="primary" class="button" @click="saveAndClose">关闭</TMagicButton>
               </div>
               <div class="m-editor-content-bottom" v-else>
-                <el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
+                <TMagicButton type="primary" class="button" @click="saveAndClose">关闭</TMagicButton>
               </div>
             </div>
-          </el-card>
+          </TMagicCard>
         </div>
       </template>
     </layout>
-  </el-dialog>
+  </TMagicDialog>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
-import { ElMessage } from 'element-plus';
 import { forIn, isEmpty } from 'lodash-es';
 import type * as monaco from 'monaco-editor';
 
+import { TMagicButton, TMagicCard, TMagicDialog, TMagicInput, tMagicMessage, TMagicTree } from '@tmagic/design';
+
 import type { CodeBlockContent, CodeDslList, ListState, Services } from '../../../type';
 import { CodeEditorMode } from '../../../type';
 import MagicCodeEditor from '../../CodeEditor.vue';
@@ -122,7 +127,6 @@ watchEffect(async () => {
     state.codeList.push({
       id: key,
       name: value.name,
-      content: value.content,
     });
   });
   currentTitle.value = state.codeList[0]?.name || '';
@@ -138,7 +142,7 @@ const saveCode = async (): Promise<boolean> => {
     /* eslint no-eval: "off" */
     codeConfig.value.content = eval(codeContent);
   } catch (e: any) {
-    ElMessage.error(e.stack);
+    tMagicMessage.error(e.stack);
     return false;
   }
   // 存入dsl
@@ -146,7 +150,7 @@ const saveCode = async (): Promise<boolean> => {
     name: codeConfig.value.name,
     content: codeConfig.value.content,
   });
-  ElMessage.success('代码保存成功');
+  tMagicMessage.success('代码保存成功');
   return true;
 };
 

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

@@ -2,22 +2,22 @@
   <div class="m-editor-code-block-list">
     <slot name="code-block-panel-header">
       <div class="code-header-wrapper">
-        <el-input
+        <TMagicInput
           :class="[editable ? 'code-filter-input' : 'code-filter-input-no-btn']"
           size="small"
           placeholder="输入关键字进行过滤"
           clearable
           v-model="filterText"
           @input="filterTextChangeHandler"
-        ></el-input>
-        <el-button class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
-          >新增</el-button
+        ></TMagicInput>
+        <TMagicButton class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
+          >新增</TMagicButton
         >
       </div>
     </slot>
 
     <!-- 代码块列表 -->
-    <el-tree
+    <TMagicTree
       v-if="!isEmpty(state.codeList)"
       ref="tree"
       node-key="id"
@@ -33,21 +33,21 @@
             <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
             <!-- 右侧工具栏 -->
             <div class="right-tool">
-              <el-tooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+              <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
                 <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
-              </el-tooltip>
-              <el-tooltip
+              </TMagicTooltip>
+              <TMagicTooltip
                 effect="dark"
                 content="查看绑定关系"
                 placement="bottom"
                 v-if="state.bindComps[data.id] && state.bindComps[data.id].length > 0"
               >
                 <Icon :icon="Link" class="edit-icon" @click.stop="toggleCombineRelation(data)"></Icon>
-              </el-tooltip>
-              <el-tooltip effect="dark" content="删除" placement="bottom" v-if="editable">
+              </TMagicTooltip>
+              <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
                 <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
-              </el-tooltip>
-              <slot name="code-block-panel-tool" :id="data.id"></slot>
+              </TMagicTooltip>
+              <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
             </div>
           </div>
           <!-- 展示代码块下绑定的组件 -->
@@ -62,27 +62,27 @@
               ></path>
             </svg>
             <!-- todo 功能暂时隐藏 -->
-            <!-- <el-button
+            <!-- <TMagicButton
               v-for="(comp, index) in state.bindComps[data.id]"
               :key="index"
               class="code-comp"
               size="small"
               :plain="true"
               >{{ comp.name }}<Icon :icon="Close" class="comp-delete-icon" @click.stop="unbind(comp.id, data.id)"></Icon
-            ></el-button> -->
-            <el-button
+            ></TMagicButton> -->
+            <TMagicButton
               v-for="(comp, index) in state.bindComps[data.id]"
               :key="index"
               class="code-comp"
               size="small"
               :plain="true"
               @click.stop="selectComp(comp.id)"
-              >{{ comp.name }}</el-button
+              >{{ comp.name }}</TMagicButton
             >
           </div>
         </div>
       </template>
-    </el-tree>
+    </TMagicTree>
 
     <!-- 代码块编辑区 -->
     <code-block-editor>
@@ -96,9 +96,9 @@
 <script lang="ts" setup>
 import { computed, inject, reactive, ref, watch } from 'vue';
 import { Close, Edit, Link, View } from '@element-plus/icons-vue';
-import { ElMessage } from 'element-plus';
 import { forIn, isEmpty } from 'lodash-es';
 
+import { TMagicButton, TMagicInput, tMagicMessage, TMagicTooltip, TMagicTree } from '@tmagic/design';
 import { Id } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 
@@ -148,7 +148,7 @@ const initList = async () => {
     state.codeList.push({
       id: codeId,
       name: value.name,
-      content: value.content,
+      codeBlockContent: value,
       showRelation: true,
     });
   });
@@ -184,7 +184,7 @@ watch(
 const createCodeBlock = async () => {
   const { codeBlockService } = services || {};
   if (!codeBlockService) {
-    ElMessage.error('新增代码块失败');
+    tMagicMessage.error('新增代码块失败');
     return;
   }
   const codeConfig: CodeBlockContent = {
@@ -214,7 +214,7 @@ const deleteCode = (key: string) => {
     if (typeof props.customError === 'function') {
       props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
     } else {
-      ElMessage.error('代码块删除失败');
+      tMagicMessage.error('代码块删除失败');
     }
   }
 };

package/src/layouts/workspace/PageBar.vue

@@ -9,39 +9,39 @@
     >
       <div class="m-editor-page-bar-title">
         <slot name="page-bar-title" :page="item">
-          <el-tooltip effect="dark" placement="top-start" :content="item.name">
+          <TMagicTooltip effect="dark" placement="top-start" :content="item.name">
             <span>{{ item.name || item.id }}</span>
-          </el-tooltip>
+          </TMagicTooltip>
         </slot>
       </div>
 
-      <el-popover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+      <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
         <div>
           <slot name="page-bar-popover" :page="item">
-            <tool-button
+            <ToolButton
               :data="{
                 type: 'button',
                 text: '复制',
                 icon: DocumentCopy,
                 handler: () => copy(item),
               }"
-            ></tool-button>
-            <tool-button
+            ></ToolButton>
+            <ToolButton
               :data="{
                 type: 'button',
                 text: '删除',
                 icon: Delete,
                 handler: () => remove(item),
               }"
-            ></tool-button>
+            ></ToolButton>
           </slot>
         </div>
         <template #reference>
-          <el-icon class="m-editor-page-bar-menu-icon">
+          <TMagicIcon class="m-editor-page-bar-menu-icon">
             <CaretBottom></CaretBottom>
-          </el-icon>
+          </TMagicIcon>
         </template>
-      </el-popover>
+      </TMagicPopover>
     </div>
   </PageBarScrollContainer>
 </template>
@@ -50,6 +50,7 @@
 import { computed, inject } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
+import { TMagicIcon, TMagicPopover, TMagicTooltip } from '@tmagic/design';
 import type { MApp, MPage } from '@tmagic/schema';
 
 import ToolButton from '../../components/ToolButton.vue';

package/src/services/codeBlock.ts

@@ -69,7 +69,7 @@ class CodeBlock extends BaseService {
   }
 
   /**
-   * 获取活动的代码块dsl数据源（默认从dsl中的codeBlock字段读取）
+   * 获取活动的代码块dsl数据源（默认从dsl中的codeBlocks字段读取）
    * @param {boolean} forceRefresh 是否强制从活动dsl拉取刷新
    * @returns {CodeBlockDSL | null}
    */
@@ -100,15 +100,21 @@ class CodeBlock extends BaseService {
    */
   public async setCodeDslById(id: string, codeConfig: CodeBlockContent): Promise<void> {
     let codeDsl = await this.getCodeDsl();
-    if (!codeDsl) return;
-    const existContent = codeDsl[id] || {};
-    codeDsl = {
-      ...codeDsl,
-      [id]: {
-        ...existContent,
-        ...codeConfig,
-      },
-    };
+    if (!codeDsl) {
+      // dsl中无代码块字段
+      codeDsl = {
+        [id]: codeConfig,
+      };
+    } else {
+      const existContent = codeDsl[id] || {};
+      codeDsl = {
+        ...codeDsl,
+        [id]: {
+          ...existContent,
+          ...codeConfig,
+        },
+      };
+    }
     await this.setCodeDsl(codeDsl);
   }
 

package/src/services/editor.ts

@@ -767,23 +767,23 @@ class Editor extends BaseService {
   }
 
   /**
-   * 从dsl中的codeBlock字段读取活动的代码块
+   * 从dsl中的codeBlocks字段读取活动的代码块
    * @returns {CodeBlockDSL | null}
    */
   public async getCodeDsl(): Promise<CodeBlockDSL | null> {
     const root = this.get<MApp | null>('root');
     if (!root) return null;
-    return root.codeBlock || null;
+    return root.codeBlocks || null;
   }
 
   /**
-   * 设置代码块到dsl的codeBlock字段
+   * 设置代码块到dsl的codeBlocks字段
    * @param {CodeBlockDSL} codeDsl 代码DSL
    * @returns {void}
    */
   public async setCodeDsl(codeDsl: CodeBlockDSL): Promise<void> {
     if (!this.state.root) return;
-    this.state.root.codeBlock = codeDsl;
+    this.state.root.codeBlocks = codeDsl;
   }
 
   private addModifiedNodeId(id: Id) {

package/src/theme/index.scss

@@ -1,16 +1,2 @@
 @import "./common/var.scss";
-@import "./nav-menu.scss";
-@import "./framework.scss";
-@import "./sidebar.scss";
-@import "./layer-panel.scss";
-@import "./component-list-panel.scss";
-@import "./resizer.scss";
-@import "./workspace.scss";
-@import "./page-bar.scss";
-@import "./props-panel.scss";
-@import "./content-menu.scss";
-@import "./stage.scss";
-@import "./code-editor.scss";
-@import "./icon.scss";
-@import "./code-block.scss";
-@import "./layout.scss";
+@import "./theme.scss";

package/src/theme/theme.scss

@@ -0,0 +1,15 @@
+@import "./nav-menu.scss";
+@import "./framework.scss";
+@import "./sidebar.scss";
+@import "./layer-panel.scss";
+@import "./component-list-panel.scss";
+@import "./resizer.scss";
+@import "./workspace.scss";
+@import "./page-bar.scss";
+@import "./props-panel.scss";
+@import "./content-menu.scss";
+@import "./stage.scss";
+@import "./code-editor.scss";
+@import "./icon.scss";
+@import "./code-block.scss";
+@import "./layout.scss";

package/src/type.ts

@@ -358,7 +358,7 @@ export interface CodeDslList {
   /** 代码块名称 */
   name: string;
   /** 代码块函数内容 */
-  content: any;
+  codeBlockContent?: CodeBlockContent;
   /** 是否展示代码绑定关系 */
   showRelation?: boolean;
 }

package/types/Editor.vue.d.ts

@@ -97,7 +97,7 @@ declare const _default: import("vue").DefineComponent<{
     updateDragEl: {
         type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
     };
-}, Services, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("props-panel-mounted" | "update:modelValue")[], "props-panel-mounted" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, Services, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "props-panel-mounted")[], "update:modelValue" | "props-panel-mounted", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /** 页面初始值 */
     modelValue: {
         type: PropType<MApp>;
@@ -191,8 +191,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
     };
 }>> & {
-    "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
 }, {
     menu: MenuBarData;
     codeOptions: Record<string, any>;

package/types/fields/Code.vue.d.ts

@@ -7,6 +7,8 @@ declare const _default: {
             name: string;
             config: {
                 language?: string | undefined;
+                options?: Object | undefined;
+                height?: string | undefined;
             };
             prop: string;
         }>>> & {
@@ -30,6 +32,8 @@ declare const _default: {
             name: string;
             config: {
                 language?: string | undefined;
+                options?: Object | undefined;
+                height?: string | undefined;
             };
             prop: string;
         }>>> & {
@@ -59,6 +63,8 @@ declare const _default: {
         name: string;
         config: {
             language?: string | undefined;
+            options?: Object | undefined;
+            height?: string | undefined;
         };
         prop: string;
     }>>> & {
@@ -72,6 +78,8 @@ declare const _default: {
     name: string;
     config: {
         language?: string | undefined;
+        options?: Object | undefined;
+        height?: string | undefined;
     };
     prop: string;
 }>>> & {

package/types/fields/CodeLink.vue.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
                 name: string;
                 text?: string;
                 formTitle?: string;
+                codeOptions?: Object;
             };
             model: any;
             name: string;
@@ -34,6 +35,7 @@ declare const _default: {
                 name: string;
                 text?: string;
                 formTitle?: string;
+                codeOptions?: Object;
             };
             model: any;
             name: string;
@@ -66,6 +68,7 @@ declare const _default: {
             name: string;
             text?: string;
             formTitle?: string;
+            codeOptions?: Object;
         };
         model: any;
         name: string;
@@ -82,6 +85,7 @@ declare const _default: {
         name: string;
         text?: string;
         formTitle?: string;
+        codeOptions?: Object;
     };
     model: any;
     name: string;

package/types/index.d.ts

@@ -15,6 +15,7 @@ export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
+export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';