From c145e4fd8cb6f32677a66909a8f3733478808e10 Mon Sep 17 00:00:00 2001
From: JiaoTianBo <jtb200411@qq.com>
Date: Sat, 28 Mar 2026 19:28:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(project):=20=E6=B7=BB=E5=8A=A0=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E8=AF=A6=E6=83=85=E9=A1=B5=E8=BE=B9=E8=B7=9D=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增marginSettings响应式变量管理页面边距数值
- 计算marginStyle以动态应用边距padding样式
- 在页面右上角添加边距设置按钮，使用Popover弹出控制面板
- 边距面板支持上下左右边距数值调整，限制输入范围
- 提供恢复默认边距功能按钮
- 为边距设置按钮与面板添加样式，固定位置，提升交互体验
---
 src/views/project/detail.vue | 117 ++++++++++++++++++++++++++++++++++-
 1 file changed, 116 insertions(+), 1 deletion(-)

diff --git a/src/views/project/detail.vue b/src/views/project/detail.vue
index 3a7fd1c..d142ae8 100644
--- a/src/views/project/detail.vue
+++ b/src/views/project/detail.vue
@@ -39,6 +39,19 @@ const projectId = ref<string>(route.params.id as string);
 const loading = ref(false);
 const ganttLoading = ref(false);
 
+// 边距设置
+const marginSettings = ref({
+  top: 16,
+  right: 80,
+  bottom: 16,
+  left: 16
+});
+
+// 计算边距样式
+const marginStyle = computed(() => ({
+  padding: `${marginSettings.value.top}px ${marginSettings.value.right}px ${marginSettings.value.bottom}px ${marginSettings.value.left}px`
+}));
+
 // 项目详情数据
 const projectDetail = ref<ProjectDetail | null>(null);
 
@@ -407,7 +420,62 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="project-detail w-full">
+  <div class="project-detail w-full" :style="marginStyle">
+    <!-- 边距设置按钮 -->
+    <el-popover placement="bottom-end" :width="200" trigger="click">
+      <template #reference>
+        <el-button link class="margin-setting-btn" title="边距设置">
+          <component :is="useRenderIcon('ri/layout-line')" />
+        </el-button>
+      </template>
+      <div class="margin-setting-panel">
+        <div class="setting-title">页面边距设置 (px)</div>
+        <div class="setting-item">
+          <span>上边距</span>
+          <el-input-number
+            v-model="marginSettings.top"
+            :min="0"
+            :max="100"
+            size="small"
+          />
+        </div>
+        <div class="setting-item">
+          <span>右边距</span>
+          <el-input-number
+            v-model="marginSettings.right"
+            :min="0"
+            :max="200"
+            size="small"
+          />
+        </div>
+        <div class="setting-item">
+          <span>下边距</span>
+          <el-input-number
+            v-model="marginSettings.bottom"
+            :min="0"
+            :max="100"
+            size="small"
+          />
+        </div>
+        <div class="setting-item">
+          <span>左边距</span>
+          <el-input-number
+            v-model="marginSettings.left"
+            :min="0"
+            :max="200"
+            size="small"
+          />
+        </div>
+        <el-button
+          type="primary"
+          size="small"
+          @click="marginSettings = { top: 16, right: 80, bottom: 16, left: 16 }"
+        >
+          恢复默认
+        </el-button>
+      </div>
+    </el-popover>
+
     <!-- 顶部导航 -->
     <div class="flex-bc mb-4">
       <div class="flex items-center gap-3">
@@ -917,4 +985,51 @@ onMounted(() => {
   line-height: 1.5;
   color: #909399;
 }
+
+// 边距设置按钮
+.margin-setting-btn {
+  position: fixed;
+  top: 80px;
+  right: 20px;
+  z-index: 100;
+  width: 36px;
+  height: 36px;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
+
+  &:hover {
+    background-color: #f5f7fa;
+  }
+}
+
+// 边距设置面板
+.margin-setting-panel {
+  padding: 8px;
+
+  .setting-title {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+    text-align: center;
+  }
+
+  .setting-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+
+    span {
+      font-size: 13px;
+      color: #606266;
+    }
+  }
+
+  .el-button {
+    width: 100%;
+    margin-top: 8px;
+  }
+}
 </style>