立项配置页初步优化

frontend/src/views/admin/Sites.vue

@@ -1,57 +1,66 @@
 <template>
   <div class="page">
-    <el-card shadow="never" class="main-content-card">
-      <div class="filter-container">
-        <div class="filter-form">
-          <div class="filter-spacer"></div>
-          <el-button type="primary" @click="openCreate" class="header-action-btn">
-            {{ TEXT.common.actions.add }}{{ TEXT.modules.adminSites.siteLabel }}
-          </el-button>
-        </div>
+    <el-card shadow="never" class="main-content-card unified-shell">
+      <div class="unified-action-bar actions-only-bar">
+        <div class="filter-spacer"></div>
+        <el-button type="primary" @click="openCreate">
+          {{ TEXT.common.actions.add }}{{ TEXT.modules.adminSites.siteLabel }}
+        </el-button>
+      </div>
+      <div class="unified-section site-table-section">
+        <el-table :data="displaySites" v-loading="loading" stripe :row-class-name="siteRowClass">
+          <el-table-column prop="name" :label="TEXT.common.fields.siteName" width="220">
+            <template #default="scope">
+              <div class="site-name-cell">
+                <span>{{ scope.row.name }}</span>
+                <el-tag v-if="isLeadUnitSite(scope.row)" type="warning" effect="light" size="small">
+                  {{ TEXT.modules.adminSites.leadUnitTag }}
+                </el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="city" :label="TEXT.common.fields.city" width="100" />
+          <el-table-column prop="pi_name" :label="TEXT.modules.adminSites.piLabel" width="120" />
+          <el-table-column :label="TEXT.common.fields.phone" width="140">
+            <template #default="scope">
+              {{ phoneText(scope.row) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="contact" :label="TEXT.common.fields.contact" width="160">
+            <template #default="scope">
+              {{ contactLabel(scope.row) }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.common.fields.status" width="100">
+            <template #default="scope">
+              <el-tag type="success" v-if="scope.row.is_active">已解锁</el-tag>
+              <el-tag type="danger" v-else>已锁定</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.common.labels.actions" width="200" align="center" class-name="action-column">
+            <template #default="scope">
+              <el-button link type="primary" size="small" @click="openEdit(scope.row)">{{ TEXT.common.actions.edit }}</el-button>
+              <el-button
+                link
+                :type="scope.row.is_active ? 'danger' : 'primary'"
+                size="small"
+                @click="toggleSite(scope.row)"
+              >
+                {{ scope.row.is_active ? "锁定" : "解锁" }}
+              </el-button>
+              <el-button
+                v-if="isAdmin"
+                link
+                type="danger"
+                size="small"
+                @click="confirmDelete(scope.row)"
+              >
+                {{ TEXT.common.actions.delete }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </div>
-      <el-table :data="sites" v-loading="loading" stripe :row-class-name="siteRowClass">
-        <el-table-column prop="name" :label="TEXT.common.fields.siteName" width="180" />
-        <el-table-column prop="city" :label="TEXT.common.fields.city" width="100" />
-        <el-table-column prop="pi_name" :label="TEXT.modules.adminSites.piLabel" width="120" />
-        <el-table-column :label="TEXT.common.fields.phone" width="140">
-          <template #default="scope">
-            {{ phoneText(scope.row) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="contact" :label="TEXT.common.fields.contact" width="160">
-          <template #default="scope">
-            {{ contactLabel(scope.row) }}
-          </template>
-        </el-table-column>
-        <el-table-column :label="TEXT.common.fields.status" width="100">
-          <template #default="scope">
-            <el-tag type="success" v-if="scope.row.is_active">已解锁</el-tag>
-            <el-tag type="danger" v-else>已锁定</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column :label="TEXT.common.labels.actions" width="200" align="center" class-name="action-column">
-          <template #default="scope">
-            <el-button link type="primary" size="small" @click="openEdit(scope.row)">{{ TEXT.common.actions.edit }}</el-button>
-            <el-button
-              link
-              :type="scope.row.is_active ? 'danger' : 'primary'"
-              size="small"
-              @click="toggleSite(scope.row)"
-            >
-              {{ scope.row.is_active ? "锁定" : "解锁" }}
-            </el-button>
-            <el-button
-              v-if="isAdmin"
-              link
-              type="danger"
-              size="small"
-              @click="confirmDelete(scope.row)"
-            >
-              {{ TEXT.common.actions.delete }}
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
     </el-card>
     <SiteForm
       v-if="projectId"
@@ -158,7 +167,32 @@ const contactLabel = (row: any) => {
 
 const phoneText = (row: any) => row?.phone || row?.contact_phone || TEXT.common.fallback;
 
-const siteRowClass = ({ row }: { row: Site }) => (row.is_active ? "" : "row-inactive");
+const normalizeSiteName = (value?: string | null) => String(value || "").trim().replace(/\s+/g, "").toLowerCase();
+const isLeadUnitSite = (row: Site): boolean => {
+  const leadUnitName = normalizeSiteName(project.value?.lead_unit);
+  const siteName = normalizeSiteName(row.name);
+  if (!leadUnitName || !siteName) return false;
+  return siteName === leadUnitName;
+};
+
+const displaySites = computed(() => {
+  return sites.value
+    .map((item, index) => ({ item, index }))
+    .sort((a, b) => {
+      const aLead = isLeadUnitSite(a.item) ? 1 : 0;
+      const bLead = isLeadUnitSite(b.item) ? 1 : 0;
+      if (aLead !== bLead) return bLead - aLead;
+      return a.index - b.index;
+    })
+    .map((entry) => entry.item);
+});
+
+const siteRowClass = ({ row }: { row: Site }) => {
+  const classes: string[] = [];
+  if (!row.is_active) classes.push("row-inactive");
+  if (isLeadUnitSite(row)) classes.push("row-lead-unit");
+  return classes.join(" ");
+};
 
 const openCreate = () => {
   loadUsers();
@@ -271,29 +305,21 @@ onMounted(async () => {
   flex-direction: column;
 }
 
-.main-content-card :deep(.el-card__body) {
-  padding: 20px;
-}
-
-.filter-container {
-  margin-bottom: 20px;
-}
-
-.filter-form {
+.actions-only-bar {
   display: flex;
-  width: 100%;
-  gap: 12px;
+  justify-content: flex-end;
   align-items: center;
 }
 
-.filter-spacer {
-  flex: 1;
+.site-table-section {
+  padding-top: 12px;
+  padding-bottom: 12px;
 }
 
-.header-action-btn {
-  height: 36px;
-  padding: 0 20px;
-  border-radius: 8px;
+.site-name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 }
 
 </style>
@@ -308,6 +334,14 @@ onMounted(async () => {
   opacity: 0.6;
 }
 
+.row-lead-unit td {
+  background-color: #f3f8ff !important;
+}
+
+.row-lead-unit.row-inactive td {
+  background-color: #edf2fb !important;
+}
+
 .el-table .action-column .cell {
   padding-left: 8px;
   padding-right: 8px;