From 76cc10c6af870cf40988721909bcd546f37239fc Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Mon, 12 Oct 2026 15:46:02 +0800
Subject: [PATCH] =?UTF-8?q?style(manager):=20=E7=83=AD=E5=8C=BA=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E6=A0=87=E9=A2=98=E4=B8=8E=20tab=20=E5=90=8C=E8=A1=8C?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 面板契约新增 hideDecorateTitle 标记，面板可自行接管标题行
- tab 分段控件改为自然宽度，右对齐
---
 .../wap/config-panel/PanelFlexOne.vue         | 41 ++++++++++++-------
 .../views/page-decoration/wap/decorate.vue    |  6 ++-
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/manager/src/views/page-decoration/wap/config-panel/PanelFlexOne.vue b/manager/src/views/page-decoration/wap/config-panel/PanelFlexOne.vue
index c73a19afe..45ab12cb1 100644
--- a/manager/src/views/page-decoration/wap/config-panel/PanelFlexOne.vue
+++ b/manager/src/views/page-decoration/wap/config-panel/PanelFlexOne.vue
@@ -1,14 +1,17 @@
 <template>
   <div class="panel-flex-one">
-    <div class="panel-tabs">
-      <div
-        v-for="tab in tabs"
-        :key="tab.key"
-        class="panel-tab"
-        :class="{ active: activeTab === tab.key }"
-        @click="activeTab = tab.key"
-      >
-        {{ tab.title }}
+    <div class="panel-header">
+      <span class="panel-name">{{ res.name }}</span>
+      <div class="panel-tabs">
+        <div
+          v-for="tab in tabs"
+          :key="tab.key"
+          class="panel-tab"
+          :class="{ active: activeTab === tab.key }"
+          @click="activeTab = tab.key"
+        >
+          {{ tab.title }}
+        </div>
       </div>
     </div>
 
@@ -104,6 +107,7 @@ const DEFAULTS = {
 
 export default {
   name: "PanelFlexOne",
+  hideDecorateTitle: true,
   components: { ColorField, SliderField, hotzone, ossManage },
   props: {
     res: { type: Object, required: true },
@@ -164,16 +168,25 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.panel-tabs {
+.panel-header {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  margin-bottom: 4px;
+  .panel-name {
+    font-size: 14px;
+    font-weight: bold;
+    color: #303133;
+  }
+}
+.panel-tabs {
+  display: inline-flex;
   background: #f4f4f5;
   border-radius: 8px;
   padding: 3px;
-  margin-bottom: 14px;
   .panel-tab {
-    flex: 1;
-    text-align: center;
-    padding: 6px 0;
+    padding: 5px 14px;
     font-size: 13px;
     border-radius: 6px;
     cursor: pointer;
diff --git a/manager/src/views/page-decoration/wap/decorate.vue b/manager/src/views/page-decoration/wap/decorate.vue
index 7e56909d7..de748552b 100644
--- a/manager/src/views/page-decoration/wap/decorate.vue
+++ b/manager/src/views/page-decoration/wap/decorate.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="decorate">
-    <div class="decorate-title">
+    <div class="decorate-title" v-if="!hidePanelTitle">
       {{ res.name }}
 
       <el-button
@@ -591,6 +591,10 @@ export default {
     panelComponent() {
       return (this.res && panelMap[this.res.type]) || null;
     },
+    // 面板声明 hideDecorateTitle 时，标题行由面板自己渲染
+    hidePanelTitle() {
+      return !!(this.panelComponent && this.panelComponent.hideDecorateTitle);
+    },
   },
   methods: {
     // 选择分类（弹窗内暂存，确定后写回）