style(manager): 热区面板标题与 tab 同行展示

- 面板契约新增 hideDecorateTitle 标记,面板可自行接管标题行
- tab 分段控件改为自然宽度,右对齐
This commit is contained in:
pikachu1995@126.com
2026-10-12 15:46:02 +08:00
parent ae08a568bd
commit 76cc10c6af
2 changed files with 32 additions and 15 deletions

View File

@@ -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;

View File

@@ -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: {
// 选择分类(弹窗内暂存,确定后写回)