From ecace6eb882b736299c37cccf8074c1a34222ebd Mon Sep 17 00:00:00 2001
From: zyh <zhangyahao530@163.com>
Date: Wed, 27 Aug 2025 22:17:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=85=AC=E5=91=8A=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=95=8C=E9=9D=A2=EF=BC=8C=E6=94=AF=E6=8C=81=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E8=87=AA=E9=80=82=E5=BA=94=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=E6=9F=A5=E8=AF=A2=E5=8C=BA=E5=92=8C?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=8C=BA=E7=9A=84=E6=98=BE=E7=A4=BA=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=BC=BA=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=E5=92=8C=E5=8F=AF=E8=AE=BF=E9=97=AE=E6=80=A7=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/announcements/AnnouncementList.vue | 380 +++++++++++++------
 1 file changed, 256 insertions(+), 124 deletions(-)

diff --git a/src/views/announcements/AnnouncementList.vue b/src/views/announcements/AnnouncementList.vue
index 09c8c21..37457e7 100644
--- a/src/views/announcements/AnnouncementList.vue
+++ b/src/views/announcements/AnnouncementList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="announcements-page">
+  <div class="announcements-page" :class="{ mobile: isMobile }">
     <!-- 权限检查 -->
     <div v-if="!canViewAnnouncements" class="permission-denied">
       <el-result
@@ -12,72 +12,147 @@
         </template>
       </el-result>
     </div>
-    
+
     <!-- 公告管理内容 -->
     <div v-else>
+      <!-- 查询区 -->
       <el-card class="mb16" shadow="never">
-        <el-form :inline="true" :model="query" @submit.prevent>
-          <el-form-item label="关键词">
-            <el-input v-model.trim="query.keyword" placeholder="标题或内容" clearable style="width: 220px" />
+        <el-form
+          :inline="!isMobile"
+          :model="query"
+          :label-position="isMobile ? 'top' : 'right'"
+          class="query-form"
+          @submit.prevent
+        >
+          <el-form-item :label="isMobile ? '关键词' : '关键词'">
+            <el-input
+              v-model.trim="query.keyword"
+              :placeholder="isMobile ? '标题或内容' : '标题或内容'"
+              clearable
+              :style="isMobile ? '' : 'width:220px'"
+            />
           </el-form-item>
-          <el-form-item label="状态">
-            <el-select v-model="query.enabled" clearable placeholder="全部" style="width: 140px">
+
+          <el-form-item :label="isMobile ? '状态' : '状态'">
+            <el-select v-model="query.enabled" clearable placeholder="全部" :style="isMobile ? '' : 'width:140px'">
               <el-option :value="true" label="启用" />
               <el-option :value="false" label="禁用" />
             </el-select>
           </el-form-item>
-          <el-form-item>
+
+          <el-form-item class="query-actions">
             <el-button type="primary" :loading="loading" @click="onSearch">查询</el-button>
             <el-button @click="onReset">重置</el-button>
-          </el-form-item>
-          <el-form-item v-if="canCreateAnnouncement">
-            <el-button type="success" @click="openCreate">新增公告</el-button>
+            <el-button v-if="canCreateAnnouncement" type="success" @click="openCreate">新增公告</el-button>
           </el-form-item>
         </el-form>
       </el-card>
 
+      <!-- 列表区：桌面端=表格；移动端=卡片 -->
       <el-card shadow="never">
-        <el-table :data="list" v-loading="loading" border stripe>
-          <el-table-column type="index" label="#" width="60" />
-          <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
-          <el-table-column prop="content" label="内容" min-width="300" show-overflow-tooltip />
-          <el-table-column prop="jumpUrl" label="跳转链接" min-width="180" show-overflow-tooltip>
-            <template #default="{ row }">
-              <span v-if="row.jumpUrl">{{ row.jumpUrl }}</span>
-              <span v-else class="text-gray">无</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="状态" width="120" align="center">
-            <template #default="{ row }">
-              <el-switch 
-                :model-value="row.enabled" 
-                @change="(v) => onToggle(row, v)"
-                :disabled="!canEditAnnouncement"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column prop="createdAt" label="创建时间" min-width="180">
-            <template #default="{ row }">
-              {{ formatDateTime(row.createdAt) }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="updatedAt" label="更新时间" min-width="180">
-            <template #default="{ row }">
-              {{ formatDateTime(row.updatedAt) }}
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="200" fixed="right">
-            <template #default="{ row }">
-              <el-button v-if="canEditAnnouncement" size="small" @click="openEdit(row)">编辑</el-button>
-              <el-button v-if="canDeleteAnnouncement" size="small" type="danger" @click="onRemove(row)">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+        <!-- 桌面端表格 -->
+        <template v-if="!isMobile">
+          <el-table :data="list" v-loading="loading" border stripe>
+            <el-table-column type="index" label="#" width="60" />
+            <el-table-column prop="title" label="标题" min-width="220" show-overflow-tooltip />
+            <el-table-column prop="content" label="内容" min-width="320" show-overflow-tooltip />
+            <el-table-column prop="jumpUrl" label="跳转链接" min-width="200" show-overflow-tooltip>
+              <template #default="{ row }">
+                <el-link v-if="row.jumpUrl" :href="row.jumpUrl" target="_blank" :underline="false">
+                  {{ row.jumpUrl }}
+                </el-link>
+                <span v-else class="text-gray">无</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="状态" width="120" align="center">
+              <template #default="{ row }">
+                <el-switch
+                  :model-value="row.enabled"
+                  @change="(v) => onToggle(row, v)"
+                  :disabled="!canEditAnnouncement"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column prop="createdAt" label="创建时间" min-width="180">
+              <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+            </el-table-column>
+            <el-table-column prop="updatedAt" label="更新时间" min-width="180">
+              <template #default="{ row }">{{ formatDateTime(row.updatedAt) }}</template>
+            </el-table-column>
+            <el-table-column label="操作" width="200" fixed="right">
+              <template #default="{ row }">
+                <el-button v-if="canEditAnnouncement" size="small" @click="openEdit(row)">编辑</el-button>
+                <el-button v-if="canDeleteAnnouncement" size="small" type="danger" @click="onRemove(row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
 
+        <!-- 移动端卡片列表 -->
+        <template v-else>
+          <el-empty v-if="!loading && (!list || list.length === 0)" description="暂无数据" />
+          <div v-else class="mobile-list" v-loading="loading">
+            <el-card v-for="item in list" :key="item.id" class="mobile-card" shadow="never">
+              <div class="card-header">
+                <div class="title">{{ item.title || '-' }}</div>
+                <el-tag :type="item.enabled ? 'success' : 'info'" size="small">
+                  {{ item.enabled ? '启用' : '禁用' }}
+                </el-tag>
+              </div>
+
+              <div class="content" v-if="item.content">{{ item.content }}</div>
+
+              <div class="meta">
+                <div class="row">
+                  <span class="label">创建：</span>
+                  <span class="value">{{ formatDateTime(item.createdAt) }}</span>
+                </div>
+                <div class="row">
+                  <span class="label">更新：</span>
+                  <span class="value">{{ formatDateTime(item.updatedAt) }}</span>
+                </div>
+                <div class="row" v-if="item.jumpUrl">
+                  <span class="label">链接：</span>
+                  <el-link class="value" :href="item.jumpUrl" target="_blank" :underline="false">
+                    {{ item.jumpUrl }}
+                  </el-link>
+                </div>
+              </div>
+
+              <div class="actions">
+                <el-switch
+                  :model-value="item.enabled"
+                  size="small"
+                  @change="(v) => onToggle(item, v)"
+                  :disabled="!canEditAnnouncement"
+                />
+                <div class="op-buttons">
+                  <el-button
+                    v-if="canEditAnnouncement"
+                    size="small"
+                    type="primary"
+                    text
+                    @click="openEdit(item)"
+                  >编辑</el-button>
+                  <el-button
+                    v-if="canDeleteAnnouncement"
+                    size="small"
+                    type="danger"
+                    text
+                    @click="onRemove(item)"
+                  >删除</el-button>
+                </div>
+              </div>
+            </el-card>
+          </div>
+        </template>
+
+        <!-- 分页 -->
         <div class="pager">
           <el-pagination
             background
-            layout="total, sizes, prev, pager, next, jumper"
+            :small="isMobile"
+            :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
             :total="total"
             :page-size="query.size"
             :current-page="query.page"
@@ -89,25 +164,20 @@
       </el-card>
 
       <!-- 编辑/新增对话框 -->
-      <el-dialog v-model="visible" :title="isEdit ? '编辑公告' : '新增公告'" width="600px">
-        <el-form ref="formRef" :model="form" :rules="rules" label-width="88px">
+      <el-dialog
+        v-model="visible"
+        :title="isEdit ? '编辑公告' : '新增公告'"
+        :width="isMobile ? '92vw' : '600px'"
+      >
+        <el-form ref="formRef" :model="form" :rules="rules" :label-width="isMobile ? '72px' : '88px'">
           <el-form-item label="标题" prop="title">
             <el-input v-model.trim="form.title" placeholder="请输入公告标题" />
           </el-form-item>
           <el-form-item label="内容" prop="content">
-            <el-input
-              v-model.trim="form.content"
-              type="textarea"
-              :rows="6"
-              placeholder="请输入公告内容"
-            />
+            <el-input v-model.trim="form.content" type="textarea" :rows="6" placeholder="请输入公告内容" />
           </el-form-item>
           <el-form-item label="跳转链接" prop="jumpUrl">
-            <el-input 
-              v-model.trim="form.jumpUrl" 
-              placeholder="可选，点击公告后跳转的链接"
-              clearable
-            />
+            <el-input v-model.trim="form.jumpUrl" placeholder="可选，http(s):// 开头" clearable />
           </el-form-item>
           <el-form-item label="状态" prop="enabled">
             <el-switch v-model="form.enabled" />
@@ -124,14 +194,14 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { 
-  getAnnouncementList, 
-  createAnnouncement, 
-  updateAnnouncement, 
+import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import {
+  getAnnouncementList,
+  createAnnouncement,
+  updateAnnouncement,
   deleteAnnouncement,
-  updateAnnouncementStatus 
+  updateAnnouncementStatus
 } from '@/api/announcement'
 import { showErrorMessage, showSuccessMessage } from '@/utils/error'
 import { hasPermission, PERMISSIONS } from '@/utils/permission'
@@ -144,27 +214,29 @@ const query = reactive({
   page: 1,
   size: 10,
   keyword: '',
-  enabled: undefined,
+  enabled: undefined
 })
 
-// 权限检查
-const canViewAnnouncements = computed(() => hasPermission(PERMISSIONS.ANNOUNCEMENT_VIEW))
-const canCreateAnnouncement = computed(() => hasPermission(PERMISSIONS.ANNOUNCEMENT_CREATE))
-const canEditAnnouncement = computed(() => hasPermission(PERMISSIONS.ANNOUNCEMENT_UPDATE))
-const canDeleteAnnouncement = computed(() => hasPermission(PERMISSIONS.ANNOUNCEMENT_DELETE))
+// ===== 权限 =====
+const canViewAnnouncements   = computed(() => hasPermission(PERMISSIONS.ANNOUNCEMENT_VIEW))
+const canCreateAnnouncement  = computed(() => hasPermission(PERMISSIONS.ANNOUNCEMENT_CREATE))
+const canEditAnnouncement    = computed(() => hasPermission(PERMISSIONS.ANNOUNCEMENT_UPDATE))
+const canDeleteAnnouncement  = computed(() => hasPermission(PERMISSIONS.ANNOUNCEMENT_DELETE))
 
-// 格式化日期时间
+// ===== 自适应（小于 768 认为是移动端）=====
+const width = ref(window.innerWidth)
+const onResize = () => (width.value = window.innerWidth)
+onMounted(() => window.addEventListener('resize', onResize))
+onUnmounted(() => window.removeEventListener('resize', onResize))
+const isMobile = computed(() => width.value < 768)
+
+// ===== 工具方法 =====
 function formatDateTime(dateStr) {
   if (!dateStr) return '-'
   const date = new Date(dateStr)
-  return date.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  })
+  // 兼容移动端：固定格式，避免 locale 差异
+  const pad = (n) => String(n).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
 }
 
 function unwrap(res) {
@@ -173,17 +245,14 @@ function unwrap(res) {
   return d
 }
 
+// ===== 数据加载 =====
 async function load() {
   loading.value = true
   try {
     const params = { ...query }
-    // 过滤空值
-    Object.keys(params).forEach(key => {
-      if (params[key] === '' || params[key] === undefined) {
-        delete params[key]
-      }
+    Object.keys(params).forEach((k) => {
+      if (params[k] === '' || params[k] === undefined) delete params[k]
     })
-    
     const res = await getAnnouncementList(params)
     const data = unwrap(res) || {}
     list.value = data.items || []
@@ -229,50 +298,36 @@ async function onRemove(row) {
   }
 }
 
+// ===== 弹窗表单 =====
 const visible = ref(false)
 const isEdit = ref(false)
 const saving = ref(false)
 const formRef = ref()
-const form = reactive({ 
-  id: undefined, 
-  title: '', 
-  content: '', 
-  jumpUrl: '', 
-  enabled: true 
+const form = reactive({
+  id: undefined,
+  title: '',
+  content: '',
+  jumpUrl: '',
+  enabled: true
 })
 
 const rules = {
   title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
   content: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
-  jumpUrl: [
-    {
-      validator: (rule, value, callback) => {
-        if (!value) {
-          callback()
-          return
-        }
-        // 简单的URL格式验证
-        const urlPattern = /^https?:\/\/.+/
-        if (!urlPattern.test(value)) {
-          callback(new Error('请输入有效的URL地址（以http://或https://开头）'))
-        } else {
-          callback()
-        }
-      },
-      trigger: 'blur'
-    }
-  ]
+  jumpUrl: [{
+    validator: (rule, value, callback) => {
+      if (!value) return callback()
+      const urlPattern = /^https?:\/\/.+/
+      if (!urlPattern.test(value)) callback(new Error('请输入有效的URL地址（以http://或https://开头）'))
+      else callback()
+    },
+    trigger: 'blur'
+  }]
 }
 
 function openCreate() {
   isEdit.value = false
-  Object.assign(form, { 
-    id: undefined, 
-    title: '', 
-    content: '', 
-    jumpUrl: '', 
-    enabled: true 
-  })
+  Object.assign(form, { id: undefined, title: '', content: '', jumpUrl: '', enabled: true })
   visible.value = true
 }
 
@@ -289,10 +344,7 @@ function doSubmit() {
     jumpUrl: form.jumpUrl || null,
     enabled: form.enabled
   }
-  
-  return isEdit.value
-    ? updateAnnouncement(form.id, payload)
-    : createAnnouncement(payload)
+  return isEdit.value ? updateAnnouncement(form.id, payload) : createAnnouncement(payload)
 }
 
 async function onSubmit() {
@@ -321,4 +373,84 @@ onMounted(load)
 .ml8 { margin-left: 8px; }
 .text-gray { color: #999; }
 .pager { display: flex; justify-content: flex-end; margin-top: 12px; }
+
+/* ===== 移动端样式 ===== */
+.announcements-page.mobile .query-form :deep(.el-form-item) {
+  margin-right: 0;
+  width: 100%;
+}
+.announcements-page.mobile .query-actions :deep(.el-button) {
+  width: 100%;
+  margin: 6px 0 0 0;
+}
+.announcements-page.mobile .mobile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.announcements-page.mobile .mobile-card {
+  border-radius: 12px;
+}
+.announcements-page.mobile .card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.announcements-page.mobile .title {
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 1.2;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.announcements-page.mobile .content {
+  font-size: 13px;
+  color: #606266;
+  margin: 6px 0 10px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;      /* 多行省略 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+}
+.announcements-page.mobile .meta {
+  font-size: 12px;
+  color: #909399;
+  display: grid;
+  gap: 4px;
+}
+.announcements-page.mobile .meta .row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+.announcements-page.mobile .meta .label {
+  color: #a6a8ad;
+  flex: 0 0 auto;
+}
+.announcements-page.mobile .meta .value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.announcements-page.mobile .actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+.announcements-page.mobile .op-buttons :deep(.el-button) {
+  padding: 0 4px;
+}
+
+/* 小屏分页靠右间距缩小 */
+.announcements-page.mobile .pager {
+  margin-top: 8px;
+  justify-content: center;
+}
 </style>