style(editor): 代码块样式修改

packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue

@@ -8,11 +8,25 @@
     custom-class="code-editor-dialog"
   >
     <template v-if="mode === EditorMode.LIST">
-      <el-menu :default-active="selectedIds[0]" class="code-editor-side-menu">
+      <el-tree
-        <el-menu-item v-for="(value, key) in selectedValue" :index="key" :key="key" @click="menuSelectHandler">
+        v-if="!isEmpty(state.codeList)"
-          <template #title>{{ value.name }}（{{ key }}）</template>
+        ref="tree"
-        </el-menu-item>
+        node-key="id"
-      </el-menu>
+        empty-text="暂无代码块"
+        :data="state.codeList"
+        :highlight-current="true"
+        @node-click="selectHandler"
+        class="code-editor-side-menu"
+        :current-node-key="state.codeList[0].id"
+      >
+        <template #default="{ data }">
+          <div :id="data.id">
+            <div class="list-item">
+              <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
+            </div>
+          </div>
+        </template>
+      </el-tree>
     </template>
     <div
       v-if="!isEmpty(codeConfig)"
@@ -55,11 +69,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watchEffect } from 'vue';
+import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { ElMessage } from 'element-plus';
-import { isEmpty } from 'lodash-es';
+import { forIn, isEmpty } from 'lodash-es';
 
-import type { CodeBlockContent, CodeBlockDSL, Services } from '../../../type';
+import type { CodeBlockContent, CodeDslList, ListState, Services } from '../../../type';
 import { EditorMode } from '../../../type';
 
 const services = inject<Services>('services');
@@ -67,8 +81,10 @@ const services = inject<Services>('services');
 const codeEditor = ref<any | null>(null);
 // 编辑器当前需展示的代码块内容
 const codeConfig = ref<CodeBlockContent | null>(null);
-// select选择的内容(CodeBlockDSL)
+// select选择的内容(ListState)
-const selectedValue = ref<CodeBlockDSL | null>(null);
+const state = reactive<ListState>({
+  codeList: [],
+});
 
 // 是否展示代码编辑区
 const isShowCodeBlockEditor = computed(
@@ -85,7 +101,16 @@ watchEffect(async () => {
 });
 
 watchEffect(async () => {
-  selectedValue.value = (await services?.codeBlockService.getCodeDslByIds(selectedIds.value)) || null;
+  const codeDsl = (await services?.codeBlockService.getCodeDslByIds(selectedIds.value)) || null;
+  if (!codeDsl) return;
+  state.codeList = [];
+  forIn(codeDsl, (value: CodeBlockContent, key: string) => {
+    state.codeList.push({
+      id: key,
+      name: value.name,
+      content: value.content,
+    });
+  });
 });
 
 // 保存代码
@@ -118,7 +143,7 @@ const saveAndClose = async () => {
   }
 };
 
-const menuSelectHandler = (item: any) => {
+const selectHandler = (data: CodeDslList) => {
-  services?.codeBlockService.setId(item.index);
+  services?.codeBlockService.setId(data.id);
 };
 </script>

packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -8,22 +8,31 @@
     </slot>
 
     <!-- 代码块列表 -->
-    <div class="list-container" v-if="!isEmpty(codeList)">
+    <el-tree
-      <div v-for="(value, key) in codeList" :key="key">
+      v-if="!isEmpty(state.codeList)"
-        <div class="list-item">
+      ref="tree"
-          <div class="code-name">{{ value.name }}（{{ key }}）</div>
+      node-key="id"
-          <div class="right-tool">
+      empty-text="暂无代码块"
-            <el-tooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="top">
+      :data="state.codeList"
-              <Icon :icon="editable ? Edit : View" class="edit-icon" @click="editCode(`${key}`)"></Icon>
+      :highlight-current="true"
-            </el-tooltip>
+    >
-            <el-tooltip effect="dark" content="删除" placement="top" v-if="editable">
+      <template #default="{ data }">
-              <Icon :icon="Close" class="edit-icon" @click="deleteCode(`${key}`)"></Icon>
+        <div :id="data.id" class="list-container">
-            </el-tooltip>
+          <div class="list-item">
-            <slot name="code-block-panel-tool" :id="key"></slot>
+            <div class="code-name">{{ data.name }}（{{ data.id }}）</div>
+            <div class="right-tool">
+              <el-tooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="top">
+                <Icon :icon="editable ? Edit : View" class="edit-icon" @click="editCode(`${data.id}`)"></Icon>
+              </el-tooltip>
+              <el-tooltip effect="dark" content="删除" placement="top" v-if="editable">
+                <Icon :icon="Close" class="edit-icon" @click="deleteCode(`${data.id}`)"></Icon>
+              </el-tooltip>
+              <slot name="code-block-panel-tool" :id="data.id"></slot>
+            </div>
           </div>
         </div>
-      </div>
+      </template>
-    </div>
+    </el-tree>
 
     <!-- 代码块编辑区 -->
     <code-block-editor>
@@ -35,14 +44,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watchEffect } from 'vue';
+import { computed, inject, reactive, watchEffect } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
-import { flattenDeep, isEmpty, values } from 'lodash-es';
+import { flattenDeep, forIn, isEmpty, values } from 'lodash-es';
 
 import Icon from '../../../components/Icon.vue';
 import type { CodeBlockContent, Services } from '../../../type';
-import { CodeBlockDSL, EditorMode } from '../../../type';
+import { EditorMode, ListState } from '../../../type';
 
 import codeBlockEditor from './CodeBlockEditor.vue';
 
@@ -57,12 +66,23 @@ const props = defineProps<{
 
 const services = inject<Services>('services');
 // 代码块列表
-const codeList = ref<CodeBlockDSL | null>(null);
+const state = reactive<ListState>({
+  codeList: [],
+});
 
 const editable = computed(() => services?.codeBlockService.getEditStatus());
 
 watchEffect(async () => {
-  codeList.value = (await services?.codeBlockService.getCodeDsl()) || null;
+  const codeDsl = (await services?.codeBlockService.getCodeDsl()) || null;
+  if (!codeDsl) return;
+  state.codeList = [];
+  forIn(codeDsl, (value: CodeBlockContent, key: string) => {
+    state.codeList.push({
+      id: key,
+      name: value.name,
+      content: value.content,
+    });
+  });
 });
 
 // 新增代码块

packages/editor/src/theme/code-block.scss

@@ -13,6 +13,7 @@
   .list-container {
     width: 100%;
     overflow: hidden;
+    margin-left: -25px;
     .list-item {
       display: flex;
       align-items: center;
@@ -80,9 +81,19 @@
     height: 90%;
   }
   .code-editor-side-menu {
-    width: 20%;
+    width: 18%;
     height: 90%;
     overflow: auto;
+    margin-left: -25px;
+
+    .list-item {
+      width: 100%;
+      margin: 10px 0;
+      .code-name {
+        width: 100%;
+        font-size: 14px;
+      }
+    }
   }
   .m-editor-code-block-editor-panel-list-mode {
     width: 80%;

packages/editor/src/type.ts

@@ -348,3 +348,12 @@ export enum EditorMode {
 export type CompRelation = {
   [compId: string | number]: string[];
 };
+
+export interface CodeDslList {
+  id: string;
+  name: string;
+  content: any;
+}
+export interface ListState {
+  codeList: CodeDslList[];
+}