feat: UI rewrite R1-R3 (30 pages redesigned)

- R1: inspection + problem pages (9)
- R2: maintenance + check + yxkjzy (7)
- R3: report forms + supervisor + menuEdit (13)
All pages: #1E74FF NavBar, warm white bg, cards 10px radius

src/views/supervisor/index.vue

@@ -4,6 +4,7 @@
  *
  * 展示监督人员列表，支持搜索和状态筛选（全部/在岗/离岗），
  * 点击卡片跳转人员详情。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px.
  */
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -60,40 +61,82 @@ function goDetail(id: number) {
 
 <template>
   <div class="supervisor-page">
-    <van-nav-bar title="第三方监督人员" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="第三方监督人员"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <van-search v-model="searchText" placeholder="搜索姓名、公司、项目" shape="round" />
+    <!-- Search -->
+    <div class="search-wrapper">
+      <van-search
+        v-model="searchText"
+        placeholder="搜索姓名、公司、项目"
+        shape="round"
+        background="transparent"
+      />
+    </div>
 
-    <van-tabs v-model:active="activeTab" sticky>
+    <!-- Tabs -->
+    <van-tabs
+      v-model:active="activeTab"
+      sticky
+      :duration="0.3"
+      swipeable
+      color="#1E74FF"
+      title-active-color="#1E74FF"
+      title-inactive-color="#646566"
+      line-width="20"
+      line-height="3"
+    >
       <van-tab title="全部" />
       <van-tab title="在岗" />
       <van-tab title="离岗" />
     </van-tabs>
 
+    <!-- Supervisor List -->
     <div class="supervisor-list">
-      <van-empty v-if="filteredSupervisors.length === 0" description="暂无监督人员" />
-      <van-card
-        v-for="supervisor in filteredSupervisors"
-        :key="supervisor.id"
-        :title="supervisor.name"
-        :desc="supervisor.company"
-        @click="goDetail(supervisor.id)"
+      <van-empty
+        v-if="filteredSupervisors.length === 0"
+        image="search"
+        description="暂无监督人员"
+      />
+      <div
+        v-for="item in filteredSupervisors"
+        :key="item.id"
+        class="supervisor-card"
+        @click="goDetail(item.id)"
       >
-        <template #tags>
-          <van-tag :type="statusColorMap[supervisor.status]" size="medium">
-            {{ statusMap[supervisor.status] }}
-          </van-tag>
-          <van-tag type="primary" size="medium" plain>
-            {{ supervisor.rating }} 分
-          </van-tag>
-        </template>
-        <template #footer>
-          <div class="supervisor-meta">
-            <span>{{ supervisor.phone }}</span>
-            <span>{{ supervisor.project }}</span>
+        <div class="supervisor-card__header">
+          <div class="supervisor-card__name-row">
+            <h4 class="supervisor-card__name">{{ item.name }}</h4>
+            <div class="supervisor-card__rating">
+              <van-icon name="star" size="14" color="#FF976A" />
+              <span>{{ item.rating }}</span>
+            </div>
           </div>
-        </template>
-      </van-card>
+          <van-tag :type="statusColorMap[item.status]" size="medium" round>
+            {{ statusMap[item.status] }}
+          </van-tag>
+        </div>
+        <div class="supervisor-card__body">
+          <span class="info-item">
+            <van-icon name="user-o" size="14" />
+            {{ item.company }}
+          </span>
+          <span class="info-item">
+            <van-icon name="phone-o" size="14" />
+            {{ item.phone }}
+          </span>
+        </div>
+        <div class="supervisor-card__footer">
+          <van-icon name="location-o" size="12" color="#969799" />
+          <span class="project-text">{{ item.project }}</span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -101,35 +144,109 @@ function goDetail(id: number) {
 <style lang="scss" scoped>
 .supervisor-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
+}
+
+.search-wrapper {
+  padding: 8px 12px 0;
+  background: #F4F7F8;
+
+  :deep(.van-search__content) {
+    border-radius: 10px;
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 }
 
+:deep(.van-tabs) { background: #fff; }
+:deep(.van-tabs__wrap) { padding: 0 8px; }
+:deep(.van-tab) { font-size: 14px; }
+
 .supervisor-list {
-  padding: 0 8px;
+  padding: 8px 12px 16px;
+}
 
-  :deep(.van-card) {
-    margin: 8px;
-    border-radius: 10px;
-    background: var(--color-bg-card);
-  }
+.supervisor-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
 
-  :deep(.van-tag) {
-    margin-right: 4px;
+  &:active {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
 }
 
-.supervisor-meta {
+.supervisor-card__header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.supervisor-card__name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.supervisor-card__name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.supervisor-card__rating {
+  display: flex;
+  align-items: center;
   gap: 2px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #FF976A;
+  flex-shrink: 0;
+}
+
+.supervisor-card__body {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 8px;
+  font-size: 13px;
+  color: var(--color-text-regular);
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.supervisor-card__footer {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.project-text {
   font-size: 12px;
-  color: var(--color-text-secondary);
+  color: var(--color-text-placeholder);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>