feat(editor,ui): 页面片下拉选择框支持点击跳转编辑,修改页面片组件initvalue

Tencent · Dec 21, 2023 · 2dc810a · 2dc810a
1 parent 2dcef44
commit 2dc810a
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 6 deletions.
diff --git a/packages/editor/src/fields/PageFragmentSelect.vue b/packages/editor/src/fields/PageFragmentSelect.vue
@@ -9,16 +9,20 @@
         :size="size"
         @change="changeHandler"
       ></m-form-container>
+      <!-- 编辑按钮 -->
+      <Icon v-if="model[name]" class="icon" :icon="Edit" @click="editPageFragment(model[name])"></Icon>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
+import { Edit } from '@element-plus/icons-vue';
 
 import { FieldProps } from '@tmagic/form';
-import { NodeType } from '@tmagic/schema';
+import { Id, NodeType } from '@tmagic/schema';
 
+import Icon from '@editor/components/Icon.vue';
 import type { PageFragmentSelectConfig, Services } from '@editor/type';
 
 defineOptions({
@@ -41,8 +45,8 @@ const selectConfig = {
   options: () => {
     if (pageList.value) {
       return pageList.value.map((item) => ({
-        text: `${item.name}（${item.id}）`,
-        label: `${item.name}（${item.id}）`,
+        text: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
+        label: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
         value: item.id,
       }));
     }
@@ -52,4 +56,8 @@ const selectConfig = {
 const changeHandler = async () => {
   emit('change', props.model[props.name]);
 };
+
+const editPageFragment = (id: Id) => {
+  services?.editorService.select(id);
+};
 </script>
diff --git a/packages/editor/src/theme/page-fragment-select.scss b/packages/editor/src/theme/page-fragment-select.scss
@@ -0,0 +1,14 @@
+.m-fields-page-fragment-select {
+  width: 100%;
+  .page-fragment-select-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .select {
+      flex: 1;
+    }
+    .icon {
+      margin-left: 10px;
+    }
+  }
+}
diff --git a/packages/editor/src/theme/theme.scss b/packages/editor/src/theme/theme.scss
@@ -24,3 +24,4 @@
 @import "./floatbox.scss";
 @import "./tree.scss";
 @import "./floating-box.scss";
+@import "./page-fragment-select.scss";
diff --git a/packages/ui-react/src/page-fragment/src/initValue.ts b/packages/ui-react/src/page-fragment/src/initValue.ts
@@ -20,6 +20,6 @@ export default {
   items: [],
   style: {
     width: '375',
-    height: '950',
+    height: '817',
   },
 };
diff --git a/packages/ui-vue2/src/page-fragment/src/initValue.ts b/packages/ui-vue2/src/page-fragment/src/initValue.ts
@@ -20,6 +20,6 @@ export default {
   items: [],
   style: {
     width: '375',
-    height: '950',
+    height: '817',
   },
 };
diff --git a/packages/ui/src/page-fragment/src/initValue.ts b/packages/ui/src/page-fragment/src/initValue.ts
@@ -20,6 +20,6 @@ export default {
   items: [],
   style: {
     width: '375',
-    height: '950',
+    height: '817',
   },
 };