From 2dc810a9fd15ed9fe730d3d6046ed8addc68da9d Mon Sep 17 00:00:00 2001
From: parisma <parisma@tencent.com>
Date: Wed, 20 Dec 2023 11:40:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor,ui):=20=E9=A1=B5=E9=9D=A2=E7=89=87?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E9=80=89=E6=8B=A9=E6=A1=86=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=B7=B3=E8=BD=AC=E7=BC=96=E8=BE=91,?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E7=89=87=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?initvalue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/fields/PageFragmentSelect.vue  | 14 +++++++++++---
 .../editor/src/theme/page-fragment-select.scss     | 14 ++++++++++++++
 packages/editor/src/theme/theme.scss               |  1 +
 .../ui-react/src/page-fragment/src/initValue.ts    |  2 +-
 .../ui-vue2/src/page-fragment/src/initValue.ts     |  2 +-
 packages/ui/src/page-fragment/src/initValue.ts     |  2 +-
 6 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 packages/editor/src/theme/page-fragment-select.scss

diff --git a/packages/editor/src/fields/PageFragmentSelect.vue b/packages/editor/src/fields/PageFragmentSelect.vue
index dc20f195..2f6d215f 100644
--- 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
new file mode 100644
index 00000000..7676a586
--- /dev/null
+++ 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
index 7a0608e1..617e8b87 100644
--- 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
index ff74f6a6..00ae8e84 100644
--- 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
index ff74f6a6..00ae8e84 100644
--- 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
index ff74f6a6..00ae8e84 100644
--- 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',
   },
 };