feat(project): 添加项目详情页边距设置功能

- 新增marginSettings响应式变量管理页面边距数值
- 计算marginStyle以动态应用边距padding样式
- 在页面右上角添加边距设置按钮，使用Popover弹出控制面板
- 边距面板支持上下左右边距数值调整，限制输入范围
- 提供恢复默认边距功能按钮
- 为边距设置按钮与面板添加样式，固定位置，提升交互体验

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>