调整部分前端布局和后端增删改逻辑

shierfeng-fastapi-frontend/src/views/master/site/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <el-form ref="queryRef" :model="queryParams" :inline="true">
+  <div class="app-container master-page">
+    <el-form ref="queryRef" class="master-query page-filter" :model="queryParams" :inline="true">
       <el-form-item label="客户ID" prop="customerId">
         <el-input-number v-model="queryParams.customerId" :min="1" :step="1" step-strictly controls-position="right" placeholder="请输入客户ID" />
       </el-form-item>
@@ -21,7 +21,7 @@
       </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
+    <el-row :gutter="10" class="mb8 master-toolbar">
       <el-col :span="1.5"><el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['master:site:add']">新增</el-button></el-col>
       <el-col :span="1.5">
         <el-button
@@ -35,7 +35,7 @@
     </el-row>
 
     <el-alert v-if="loadError" :title="loadError" type="error" :closable="false" show-icon class="mb8" />
-    <el-table v-loading="loading" empty-text="暂无数据" :data="siteList" @selection-change="handleSelectionChange">
+    <el-table class="master-table data-table" v-loading="loading" empty-text="暂无数据" :data="siteList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="现场ID" prop="siteId" align="center" />
       <el-table-column label="客户ID" prop="customerId" align="center" />
@@ -114,6 +114,14 @@
   </div>
 </template>
 
+<style scoped>
+.master-query { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 14px; padding:16px 18px 4px; margin-bottom:14px; background:var(--el-bg-color); border:1px solid var(--el-border-color-lighter); border-radius:8px; }
+.master-query :deep(.el-form-item) { margin-right:0; width:100%; } .master-query :deep(.el-input), .master-query :deep(.el-select) { width:100% !important; } .master-query :deep(.el-form-item:last-child) { align-self:end; }
+.master-toolbar { display:flex; flex-wrap:wrap; gap:8px; } .master-toolbar :deep(.el-col) { width:auto; }
+.master-table :deep(.el-table__header th) { background:var(--el-fill-color-light); font-weight:600; } .master-table :deep(.el-table__cell) { padding:10px 0; } .master-table :deep(.fixed-width) { position:sticky; right:0; z-index:2; background:var(--el-bg-color); box-shadow:-4px 0 8px rgba(0,0,0,.04); }
+@media (max-width:768px) { .master-query { grid-template-columns:1fr; padding:14px 14px 2px; } .master-query :deep(.el-form-item:last-child) { margin-bottom:12px; } .master-toolbar :deep(.el-button) { margin-left:0; } }
+</style>
+
 <script setup name="Site">
 import BusinessUserAssignDialog from "@/components/BusinessUserAssignDialog";
 import { addSite, delSite, getSite, listSite, updateSite } from "@/api/master/site";