refactor(enterpriseZone): 优化公告查看功能

- 移除 ElMessageBox 弹框显示方式- 添加详情页面和列表页面切换逻辑
- 优化公告内容展示样式
- 增加返回列表按钮

src/views/enterpriseZone/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import NavMenu from 'components/Navmenu/index.vue'
-import { ElMessageBox } from 'element-plus'
 import {
     getListApi, //列表
 } from 'http/api/info'
+
 const leaseList = ref([
     {
         noticeContent: '',
@@ -11,6 +11,14 @@ const leaseList = ref([
     },
 ])
 
+// 添加控制显示详情的状态
+const showDetail = ref(false)
+const currentNotice = ref({
+    noticeContent: '',
+    noticeTitle: '',
+    createTime: ''
+})
+
 const getList = async () => {
     leaseList.value = []
     const { data: res }: any = await getListApi()
@@ -20,13 +28,18 @@ const getList = async () => {
 
 const handleRowClick = (row: any) => {
     console.log('🚀 ~ handleRowClick ~ row', row)
-    // 弹框显示消息内容
-    ElMessageBox.alert(row.noticeContent, '消息内容', {
-        showConfirmButton: false,
-        showCancelButton: true,
-        cancelButtonText: '关闭',
-        dangerouslyUseHTMLString: true,
-    })
+    // 设置当前选中的公告并显示详情页面
+    currentNotice.value = {
+        noticeContent: decodeURIComponent(row.noticeContent),
+        noticeTitle: row.noticeTitle,
+        createTime: row.createTime
+    }
+    showDetail.value = true
+}
+
+// 返回列表
+const handleBack = () => {
+    showDetail.value = false
 }
 
 onMounted(() => {
@@ -39,25 +52,96 @@ onMounted(() => {
     <NavMenu />
 
     <div class="container">
-        <el-table
-            :data="leaseList"
-            style="width: 100%"
-            :header-cell-style="{ background: '#00a288', color: '#fff' }"
-            @row-click="handleRowClick"
-        >
-            <el-table-column align="center" type="index" label="序号" width="80" />
-            <el-table-column align="center" prop="createTime" label="消息发布时间" />
-            <el-table-column align="center" prop="noticeContent" label="公告标题">
-                <template #default="{ row }">
-                    <div v-html="row.noticeTitle"></div>
-                </template>
-            </el-table-column>
-        </el-table>
+        <!-- 列表页面 -->
+        <div v-if="!showDetail">
+            <el-table
+                :data="leaseList"
+                style="width: 100%"
+                :header-cell-style="{ background: '#00a288', color: '#fff' }"
+                @row-click="handleRowClick"
+            >
+                <el-table-column align="center" type="index" label="序号" width="80" />
+                <el-table-column align="center" prop="createTime" label="消息发布时间" />
+                <el-table-column align="center" prop="noticeContent" label="公告标题">
+                    <template #default="{ row }">
+                        <div v-html="row.noticeTitle"></div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <!-- 详情页面 -->
+        <div v-else class="detail-container">
+            <div class="detail-header">
+                <el-button @click="handleBack" style="margin-bottom: 20px;color: #00a288;">
+                    <el-icon><ArrowLeft /></el-icon>
+                    返回列表
+                </el-button>
+                <h2 class="detail-title" v-html="currentNotice.noticeTitle"></h2>
+                <p class="detail-time">发布时间：{{ currentNotice.createTime }}</p>
+            </div>
+            <div class="detail-content">
+                <div v-html="currentNotice.noticeContent"></div>
+            </div>
+        </div>
     </div>
 </template>
 
 <style scoped>
 .container {
     height: 600px;
+    padding: 20px;
+}
+
+.detail-container {
+    height: 100%;
+    overflow-y: auto;
+}
+
+.detail-header {
+    border-bottom: 1px solid #e4e7ed;
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+}
+
+.detail-title {
+    font-size: 24px;
+    font-weight: bold;
+    color: #303133;
+    margin: 10px 0;
+    line-height: 1.4;
+}
+
+.detail-time {
+    color: #909399;
+    font-size: 14px;
+    margin: 0;
+}
+
+.detail-content {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    line-height: 1.6;
+}
+
+.detail-content :deep(img) {
+    max-width: 100%;
+    height: auto;
+}
+
+.detail-content :deep(p) {
+    margin-bottom: 15px;
+}
+
+.detail-content :deep(h1),
+.detail-content :deep(h2),
+.detail-content :deep(h3),
+.detail-content :deep(h4),
+.detail-content :deep(h5),
+.detail-content :deep(h6) {
+    margin: 20px 0 15px 0;
+    font-weight: bold;
 }
 </style>