From d2f989b9c1c00ac00553743ad4b9a9d0ecc62cfb Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Wed, 19 Nov 2025 16:19:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2=E7=BE=8E?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/notice/list/index.vue | 296 ++++++++++++++----------------------
 1 file changed, 114 insertions(+), 182 deletions(-)

diff --git a/pages/notice/list/index.vue b/pages/notice/list/index.vue
index 734b38f..7f567f9 100644
--- a/pages/notice/list/index.vue
+++ b/pages/notice/list/index.vue
@@ -88,7 +88,12 @@
       <!-- 操作按钮 -->
       <view class="action-buttons">
         <uv-button type="primary" size="small" @click="handleSearch">搜索</uv-button>
-        <uv-button type="default" size="small" @click="handleReset">重置</uv-button>
+        <uv-button  type="primary" :plain="true" size="small" @click="handleReset">重置</uv-button>
+        <template v-if="isAdmin">
+          <uv-button type="primary" size="small" @click="handleCreate">+ 新增</uv-button>
+          <uv-button type="warning" size="small" @click="handleEdit">修改</uv-button>
+          <uv-button type="error" size="small"  @click="handleDelete">删除</uv-button>
+        </template>
       </view>
     </view>
 
@@ -99,37 +104,35 @@
       @scrolltolower="handleScrollToLower"
     >
       <view class="notice-container">
-        <template v-if="isAdmin">
-          <!-- 管理员操作按钮 -->
-          <view class="admin-action-row">
-            <uv-button type="primary" size="small" @click="handleCreate">+ 新增</uv-button>
-            <uv-button type="warning" size="small" @click="handleEdit">修改</uv-button>
-            <uv-button type="error" size="small" plain @click="handleDelete">删除</uv-button>
-          </view>
+        <!-- 公告卡片列表 -->
+        <view 
+          class="notice-card" 
+          v-for="notice in notices" 
+          :key="notice.id"
+          :class="{
+            'admin-selectable': isAdmin,
+            'selected': isAdmin && isNoticeSelected(notice.id)
+          }"
+          @click="goToNoticeDetail(notice)"
+        >
 
-          <!-- 管理员表格视图 -->
-          <view class="notice-table">
-            <view class="table-header">
-              <text class="table-cell select" @click.stop="handleSelectAll">
-                <view class="checkbox-indicator" :class="{ checked: isAllSelected }"></view>
-              </text>
-              <text class="table-cell title">标题</text>
-              <text class="table-cell level">重要程度</text>
-<!--              <text class="table-cell receive">接收对象</text>-->
-<!--              <text class="table-cell creator">创建人</text>-->
-              <text class="table-cell time">创建时间</text>
-            </view>
-            <view 
-              class="table-row" 
-              v-for="notice in notices" 
-              :key="notice.id"
-              :class="{ selected: isNoticeSelected(notice.id) }"
-              @click="goToNoticeDetail(notice)"
-            >
-              <view class="table-cell select" @click.stop="toggleNoticeSelection(notice.id)">
-                <view class="checkbox-indicator" :class="{ checked: isNoticeSelected(notice.id) }"></view>
-              </view>
-              <text class="table-cell title" :class="{ pinned: notice.top }">
+
+          <!-- 标题和标签行 -->
+          <view class="notice-header">
+
+            <view class="notice-title-row">
+              <template v-if="isAdmin">
+                <view
+                    class="card-select-btn"
+                    @click.stop="toggleNoticeSelection(notice.id)"
+                >
+                  <view
+                      class="checkbox-indicator"
+                      :class="{ checked: isNoticeSelected(notice.id) }"
+                  ></view>
+                </view>
+              </template>
+              <text class="notice-title" :class="{ 'pinned': notice.top }">
                 {{ notice.title }}
               </text>
               <view class="notice-tags">
@@ -138,97 +141,63 @@
                 <view v-if="notice.level === '2'" class="notice-tag tag-important">重要</view>
                 <view v-if="notice.level === '3'" class="notice-tag tag-urgent">紧急</view>
               </view>
-<!--              <text class="table-cell receive">-->
-<!--                {{ formatReceiveInfo(notice) }}-->
-<!--              </text>-->
-<!--              <text class="table-cell creator">-->
-<!--                {{ notice.userName || '未知' }}-->
-<!--              </text>-->
-              <text class="table-cell time">
-                {{ formatTime(notice.createTime) }}
-              </text>
             </view>
           </view>
-        </template>
-
-        <template v-else>
-          <!-- 公告卡片列表 -->
-          <view 
-            class="notice-card" 
-            v-for="notice in notices" 
-            :key="notice.id"
-            @click="goToNoticeDetail(notice)"
-          >
-            <!-- 标题和标签行 -->
-            <view class="notice-header">
-              <view class="notice-title-row">
-                <text class="notice-title" :class="{ 'pinned': notice.top }">
-                  {{ notice.title }}
+          
+          <!-- 内容预览 -->
+          <view class="notice-content">
+            <text class="notice-content-text">{{ truncateText(notice.content, 50) }}</text>
+          </view>
+          
+          <!-- 元信息 -->
+          <view class="notice-meta">
+            <view class="meta-item">
+              <text class="meta-icon">👤</text>
+              <text class="meta-text">{{ notice.userName || '未知' }}</text>
+            </view>
+            <view class="meta-item">
+              <text class="meta-icon">🕐</text>
+              <text class="meta-text">{{ formatTime(notice.createTime) }}</text>
+            </view>
+          </view>
+          
+          <!-- 接收信息 -->
+          <view class="notice-receive" v-if="notice.receiveUserList?.length > 0 || notice.receiveDeptList?.length > 0">
+            <view class="receive-item" v-if="notice.receiveUserList?.length > 0">
+              <text class="receive-label">接收用户:</text>
+              <view class="receive-users">
+                <view 
+                  class="user-avatar" 
+                  v-for="(user, index) in notice.receiveUserList.slice(0, 3)" 
+                  :key="user.userId"
+                >
+                  <image 
+                    v-if="user.avatar" 
+                    :src="user.avatar" 
+                    class="avatar-img"
+                    mode="aspectFill"
+                  />
+                  <text v-else class="avatar-text">{{ user.nickName?.charAt(0) || '?' }}</text>
+                </view>
+                <text v-if="notice.receiveUserList.length > 3" class="more-text">
+                  等{{ notice.receiveUserList.length }}项
                 </text>
-                <view class="notice-tags">
-                  <view v-if="notice.top" class="notice-tag tag-pinned">置顶</view>
-                <view v-if="notice.level === '1'" class="notice-tag tag-general">一般</view>
-                  <view v-if="notice.level === '2'" class="notice-tag tag-important">重要</view>
-                  <view v-if="notice.level === '3'" class="notice-tag tag-urgent">紧急</view>
-                </view>
               </view>
             </view>
-            
-            <!-- 内容预览 -->
-            <view class="notice-content">
-              <text class="notice-content-text">{{ truncateText(notice.content, 50) }}</text>
-            </view>
-            
-            <!-- 元信息 -->
-            <view class="notice-meta">
-              <view class="meta-item">
-                <text class="meta-icon">👤</text>
-                <text class="meta-text">{{ notice.userName || '未知' }}</text>
-              </view>
-              <view class="meta-item">
-                <text class="meta-icon">🕐</text>
-                <text class="meta-text">{{ formatTime(notice.createTime) }}</text>
-              </view>
-            </view>
-            
-            <!-- 接收信息 -->
-            <view class="notice-receive" v-if="notice.receiveUserList?.length > 0 || notice.receiveDeptList?.length > 0">
-              <view class="receive-item" v-if="notice.receiveUserList?.length > 0">
-                <text class="receive-label">接收用户:</text>
-                <view class="receive-users">
-                  <view 
-                    class="user-avatar" 
-                    v-for="(user, index) in notice.receiveUserList.slice(0, 3)" 
-                    :key="user.userId"
-                  >
-                    <image 
-                      v-if="user.avatar" 
-                      :src="user.avatar" 
-                      class="avatar-img"
-                      mode="aspectFill"
-                    />
-                    <text v-else class="avatar-text">{{ user.nickName?.charAt(0) || '?' }}</text>
-                  </view>
-                  <text v-if="notice.receiveUserList.length > 3" class="more-text">
-                    等{{ notice.receiveUserList.length }}项
-                  </text>
-                </view>
-              </view>
-              <view class="receive-item" v-if="notice.receiveDeptList?.length > 0">
-                <text class="receive-label">接收部门:</text>
-                <view class="receive-depts">
-                  <view 
-                    class="dept-tag" 
-                    v-for="dept in notice.receiveDeptList" 
-                    :key="dept.deptId"
-                  >
-                    {{ dept.deptName }}
-                  </view>
+            <view class="receive-item" v-if="notice.receiveDeptList?.length > 0">
+              <text class="receive-label">接收部门:</text>
+              <view class="receive-depts">
+                <view 
+                  class="dept-tag" 
+                  v-for="dept in notice.receiveDeptList" 
+                  :key="dept.deptId"
+                >
+                  {{ dept.deptName }}
                 </view>
               </view>
             </view>
           </view>
-        </template>
+        </view>
 
         <!-- 加载状态 -->
         <view class="empty-state" v-if="loading">
@@ -600,7 +569,7 @@ onBeforeUnmount(() => {
   background: #f5f5f5;
   border-radius: 8px;
   padding: 8px 12px;
-  min-height: 36px;
+
 }
 
 .picker-text {
@@ -629,7 +598,7 @@ onBeforeUnmount(() => {
   justify-content: center;
   background: #f5f5f5;
   border-radius: 8px;
-  padding: 8px 12px;
+
   border: 2px solid transparent;
   
   &.active {
@@ -639,6 +608,7 @@ onBeforeUnmount(() => {
 }
 
 .radio-text {
+  padding:4px;
   font-size: 14px;
   color: #333;
 }
@@ -669,54 +639,7 @@ onBeforeUnmount(() => {
 .admin-action-row {
   display: flex;
   gap: 12px;
-  margin-bottom: 12px;
-}
 
-.notice-table {
-  background: #fff;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-.table-header,
-.table-row {
-  display: grid;
-  grid-template-columns: 0.6fr 1fr 1fr 2fr;
-  gap: 12px;
-  padding: 14px 16px;
-  align-items: center;
-}
-
-.table-header {
-  background: #f8fafc;
-  font-weight: 600;
-  color: #333;
-}
-
-.table-row {
-  border-top: 1px solid #f0f0f0;
-  background: #fff;
-  transition: background 0.2s;
-}
-
-.table-row:active {
-  background: #f5f5f5;
-}
-
-.table-row.selected {
-  background: #f0f6ff;
-}
-
-.table-cell {
-  font-size: 14px;
-  color: #555;
-}
-
-.table-cell.select {
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .checkbox-indicator {
@@ -747,25 +670,6 @@ onBeforeUnmount(() => {
   transform: rotate(45deg);
 }
 
-.table-cell.title {
-  font-weight: 500;
-  color: #333;
-}
-
-.table-cell.title.pinned {
-  color: #f56c6c;
-}
-
-.table-cell.level {
-  color: #ff9800;
-}
-
-.table-cell.time,
-.table-cell.creator {
-  font-size: 13px;
-  color: #888;
-}
-
 .notice-card {
   background: #fff;
   border-radius: 12px;
@@ -782,6 +686,34 @@ onBeforeUnmount(() => {
   opacity: 0.9;
 }
 
+.notice-card.admin-selectable {
+  position: relative;
+  padding-top: 32px;
+}
+
+.notice-card.selected {
+  box-shadow: 0 4px 18px rgba(40, 133, 255, 0.18);
+}
+
+.card-select-btn {
+
+  top: 12px;
+  left: 12px;
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.98);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  z-index: 1;
+}
+
+.card-select-btn:active {
+  transform: scale(0.92);
+}
+
 .notice-header {
   display: flex;
   flex-direction: column;
@@ -1043,7 +975,7 @@ onBeforeUnmount(() => {
   gap: 12px;
   margin-top: 20px;
   padding-top: 20px;
-  border-top: 1px solid #f0f0f0;
+
 }
 
 .modal-btn {