fix(公告预览): 标题独占一行并居中显示，返回按钮置于上方左侧；调整样式避免外部布局影响

src/views/announcement/index.vue

@@ -1,7 +1,29 @@
 <template>
     <basic-container>
+        <!-- 公告预览（全屏容器） -->
+        <div v-if="announcementPreviewVisible" class="announcement-preview-container basic-container">
+            <div class="preview-header">
+                <div class="header-top">
+                    <el-button
+                        type="text"
+                        icon="el-icon-arrow-left"
+                        size="small"
+                        class="back-btn"
+                        @click="handlePreviewBack"
+                    >
+                        返回列表
+                    </el-button>
+                </div>
+                <div class="preview-title">{{ currentDetail.title || '公告预览' }}</div>
+            </div>
+            <div class="preview-content">
+                <div class="detail-body" v-html="currentDetail.content"></div>
+            </div>
+        </div>
+
         <!-- 公告表单组件 -->
         <announcement-form
+            v-else-if="announcementFormVisible"
             :visible.sync="announcementFormVisible"
             :is-edit="isEditMode"
             :announcement-id="editAnnouncementId"
@@ -10,7 +32,7 @@
 
         <!-- 公告列表 -->
         <avue-crud
-            v-if="!announcementFormVisible"
+            v-else
             :option="option"
             :data="data"
             ref="crud"
@@ -93,16 +115,6 @@
             </template>
         </avue-crud>
 
-        <!-- 详情对话框 -->
-        <el-dialog title="公告详情" :visible.sync="detailVisible" append-to-body width="60%" :close-on-click-modal="false">
-            <div class="detail-content" v-if="currentDetail.id">
-                <!-- 仅展示富文本内容 -->
-                <div class="detail-body" v-html="currentDetail.content"></div>
-            </div>
-            <span slot="footer" class="dialog-footer">
-                <el-button @click="detailVisible = false">关 闭</el-button>
-            </span>
-        </el-dialog>
     </basic-container>
 </template>
 
@@ -135,4 +147,48 @@ export default {
 
 <style lang="scss" scoped>
 @import './index.scss';
+
+.announcement-preview-container {
+  padding: 0;
+}
+
+.preview-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; /* 显式左对齐头部子项，避免外部样式影响 */
+  padding: 12px 16px;
+  background-color: #ffffff;
+  border-radius: 8px 8px 0 0;
+  margin-bottom: 8px;
+}
+
+.header-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.back-btn {
+  padding-left: 0;
+}
+
+.preview-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  text-align: center;
+  margin-top: 4px;
+  align-self: center; /* 让标题在交叉轴居中 */
+  width: 100%;        /* 占满一行，文本居中更明显 */
+}
+
+.preview-content {
+  background-color: #ffffff;
+  padding: 16px;
+  border-radius: 0 0 8px 8px;
+}
+
+.detail-body {
+  min-height: 300px;
+}
 </style>

src/views/announcement/mixins/announcementIndex.js

@@ -139,6 +139,8 @@ export default {
             loading: true,
             /** @type {boolean} 详情对话框显示状态 */
             detailVisible: false,
+            /** 用于全屏预览的可见性控制 */
+            announcementPreviewVisible: false,
             /** @type {Partial<NoticeRecord>} 当前查看的详情数据 */
             currentDetail: {},
             /** @type {PageInfo} 分页信息 */
@@ -394,6 +396,14 @@ export default {
                 // 关闭表单后，avue-crud 会通过 v-if 重新渲染，需等 DOM 恢复后再刷新字典
                 this.$nextTick(() => this.loadCategoryOptions());
             }
+        },
+        announcementPreviewVisible(val) {
+            if (val === true) {
+                // 打开预览时不需要刷新列表
+            } else {
+                // 关闭预览后，avue-crud 会通过 v-if 重新渲染，需等 DOM 恢复后再刷新字典
+                this.$nextTick(() => this.loadCategoryOptions());
+            }
         }
     },
 
@@ -475,7 +485,7 @@ export default {
         },
 
         /**
-         * 查看详情（支持行内操作）
+         * 查看详情（支持行内操作）- 改为进入全屏预览模式
          * @async
          * @this {import('@/views/announcement/types').AnnouncementComponent & import('vue').default}
          * @param {Partial<NoticeRecord>} [row] - 可选，当前行数据
@@ -492,13 +502,23 @@ export default {
             try {
                 const response = await getAnnouncement(id);
                 this.currentDetail = response.data?.data || {};
-                this.detailVisible = true;
+                // 打开全屏预览
+                this.announcementPreviewVisible = true;
             } catch (error) {
                 console.error('获取详情失败:', error);
                 this.$message.error('获取详情失败，请稍后重试');
             }
         },
 
+        /**
+         * 关闭全屏预览并返回列表
+         */
+        handlePreviewBack() {
+            this.announcementPreviewVisible = false;
+            // 可按需清理当前详情
+            // this.currentDetail = {};
+        },
+
         // 新增：单行删除（操作列按钮）
         /**
          * 行删除（操作列按钮）