verce-vue-test 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verce-vue-test",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "private": false,
   "type": "module",
   "scripts": {

package/src/App.vue

@@ -19,6 +19,7 @@ import {
 const isCollapse = ref(false)
 const route = useRoute()
 const isFullscreenRoute = computed(() => route.meta.fullscreen === true)
+const isNoticeRoute = computed(() => route.path.startsWith('/notice-announcement'))
 
 function toggleCollapse() {
   isCollapse.value = !isCollapse.value
@@ -121,9 +122,38 @@ function toggleCollapse() {
         </el-dropdown>
       </el-header>
 
-      <el-main style="height: calc(100vh - 60px); overflow-y: auto">
+      <el-main
+        class="app-main"
+        :class="{ 'is-notice-route': isNoticeRoute }"
+        style="height: calc(100vh - 60px); overflow-y: auto"
+      >
         <RouterView />
       </el-main>
     </el-container>
   </el-container>
 </template>
+
+<style scoped>
+.app-main.is-notice-route {
+  scrollbar-width: thin;
+  scrollbar-color: #8fa7c9 #edf4ff;
+}
+
+.app-main.is-notice-route::-webkit-scrollbar {
+  width: 8px;
+}
+
+.app-main.is-notice-route::-webkit-scrollbar-track {
+  background: #edf4ff;
+}
+
+.app-main.is-notice-route::-webkit-scrollbar-thumb {
+  border: 2px solid #edf4ff;
+  border-radius: 999px;
+  background: #8fa7c9;
+}
+
+.app-main.is-notice-route::-webkit-scrollbar-thumb:hover {
+  background: #6f8cb7;
+}
+</style>

package/src/views/NoticeAnnouncementView.vue

@@ -1,38 +1,53 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { Search, Top } from '@element-plus/icons-vue'
 import noticeHeroBanner from '@/assets/notice-hero-banner.jpg'
 
 interface NoticeItem {
+  id: number
   title: string
   date: string
   pinned?: boolean
-  detailPath?: string
 }
 
 const notices: NoticeItem[] = [
   {
+    id: 1001,
     title: '关于系统维护升级的公告（2024年6月15日）',
     date: '2024-06-10',
     pinned: true,
-    detailPath: '/notice-announcement/detail',
   },
-  { title: '关于优化预填报流程的通知', date: '2024-06-08' },
-  { title: '端午节放假安排通知', date: '2024-06-05' },
-  { title: '系统性能优化完成公告', date: '2024-06-03' },
-  { title: '数据安全重要提醒', date: '2024-05-30' },
-  { title: '关于系统新增功能的使用说明', date: '2024-05-28' },
-  { title: '五一劳动节放假安排通知', date: '2024-04-25' },
-  { title: '系统升级完成公告', date: '2024-04-15' },
+  { id: 1002, title: '关于优化预填报流程的通知', date: '2024-06-08' },
+  { id: 1003, title: '端午节放假安排通知', date: '2024-06-05' },
+  { id: 1004, title: '系统性能优化完成公告', date: '2024-06-03' },
+  { id: 1005, title: '数据安全重要提醒', date: '2024-05-30' },
+  { id: 1006, title: '关于系统新增功能的使用说明', date: '2024-05-28' },
+  { id: 1007, title: '五一劳动节放假安排通知', date: '2024-04-25' },
+  { id: 1008, title: '系统升级完成公告', date: '2024-04-15' },
 ]
 
 const currentPage = ref(1)
+const router = useRouter()
+
+function goToNoticeDetail(item: NoticeItem) {
+  router.push({
+    name: 'noticeDetail',
+    query: { id: String(item.id) },
+  })
+}
 </script>
 
 <template>
   <main class="notice-page">
     <section class="notice-hero" aria-label="通知公告">
-      <img class="notice-hero__image" :src="noticeHeroBanner" alt="" aria-hidden="true" />
+      <img
+        class="notice-hero__image"
+        :src="noticeHeroBanner"
+        alt=""
+        aria-hidden="true"
+        decoding="async"
+      />
 
       <div class="notice-hero__copy">
         <h1>通知公告</h1>
@@ -54,13 +69,13 @@ const currentPage = ref(1)
 
       <ul class="notice-list">
         <li v-for="item in notices" :key="`${item.title}-${item.date}`" class="notice-row">
-          <RouterLink class="notice-title" :to="item.detailPath || '/notice-announcement/detail'">
+          <button class="notice-title" type="button" @click="goToNoticeDetail(item)">
             <span v-if="item.pinned" class="pin-tag">
               <el-icon :size="18"><Top /></el-icon>
               置顶
             </span>
             <span>{{ item.title }}</span>
-          </RouterLink>
+          </button>
           <time :datetime="item.date">{{ item.date }}</time>
         </li>
       </ul>
@@ -81,13 +96,10 @@ const currentPage = ref(1)
 
 <style scoped>
 .notice-page {
-  height: 100vh;
-  min-height: 100vh;
-  overflow-x: hidden;
-  overflow-y: auto;
+  min-height: 100%;
+  overflow: visible;
   color: #10182d;
   background:
-    radial-gradient(circle at 86% 20%, rgba(26, 111, 255, 0.1), transparent 24%),
     linear-gradient(180deg, #f9fbff 0%, #f4f7fc 42%, #f7f9fd 100%);
   font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
 }
@@ -95,10 +107,11 @@ const currentPage = ref(1)
 .notice-hero {
   position: relative;
   overflow: hidden;
-  min-height: 283px;
-  padding: 56px clamp(28px, 4.6vw, 72px) 34px;
+  min-height: 150px;
+  padding: 32px clamp(28px, 4.6vw, 72px) 24px;
   border-bottom: 1px solid rgba(219, 226, 237, 0.82);
   background: #eef6ff;
+  transform: translateZ(0);
 }
 
 .notice-hero__image {
@@ -120,7 +133,7 @@ const currentPage = ref(1)
 
 .notice-hero__copy h1 {
   margin: 0;
-  font-size: clamp(32px, 3vw, 42px);
+  font-size: clamp(28px, 2.6vw, 36px);
   line-height: 1.18;
   font-weight: 800;
   letter-spacing: 0;
@@ -128,8 +141,8 @@ const currentPage = ref(1)
 }
 
 .notice-hero__copy p {
-  margin: 22px 0 0;
-  font-size: 17px;
+  margin: 18px 0 0;
+  font-size: 15px;
   line-height: 1.7;
   color: #748098;
 }
@@ -142,7 +155,7 @@ const currentPage = ref(1)
   display: flex;
   align-items: center;
   width: min(288px, calc(100vw - 56px));
-  height: 45px;
+  height: 42px;
   padding: 0 15px 0 16px;
   border: 1px solid #d5ddea;
   border-radius: 8px;
@@ -157,7 +170,7 @@ const currentPage = ref(1)
   color: #24314b;
   background: transparent;
   font: inherit;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .notice-search input::placeholder {
@@ -174,11 +187,11 @@ const currentPage = ref(1)
   z-index: 4;
   width: calc(100% - clamp(36px, 3.7vw, 56px));
   margin: -1px auto 32px;
-  padding: 37px 42px 22px;
+  padding: 32px 42px 20px;
   border: 1px solid #e1e7f0;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.93);
-  box-shadow: 0 14px 42px rgba(32, 58, 95, 0.06);
+  box-shadow: 0 8px 24px rgba(32, 58, 95, 0.05);
 }
 
 .notice-table__head,
@@ -190,11 +203,11 @@ const currentPage = ref(1)
 }
 
 .notice-table__head {
-  height: 44px;
+  height: 40px;
   padding: 0 23px;
   border-bottom: 1px solid #dfe6f0;
   color: #6e7b94;
-  font-size: 17px;
+  font-size: 15px;
   font-weight: 500;
 }
 
@@ -205,7 +218,7 @@ const currentPage = ref(1)
 }
 
 .notice-row {
-  min-height: 67px;
+  min-height: 60px;
   padding: 0 23px;
   border-bottom: 1px solid #e8edf5;
 }
@@ -215,11 +228,17 @@ const currentPage = ref(1)
   align-items: center;
   min-width: 0;
   gap: 16px;
+  padding: 0;
+  border: 0;
   color: #0e172b;
+  background: transparent;
+  cursor: pointer;
   text-decoration: none;
-  font-size: 18px;
+  font-size: 16px;
   line-height: 1.45;
   font-weight: 500;
+  font-family: inherit;
+  text-align: left;
 }
 
 .notice-title:hover {
@@ -236,13 +255,13 @@ const currentPage = ref(1)
   border-radius: 4px;
   color: #ff2e25;
   background: #ffe8e6;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
 }
 
 .notice-row time {
   color: #71809c;
-  font-size: 18px;
+  font-size: 16px;
   line-height: 1.4;
 }
 
@@ -256,8 +275,8 @@ const currentPage = ref(1)
 
 @media (max-width: 920px) {
   .notice-hero {
-    min-height: 300px;
-    padding-top: 94px;
+    min-height: 150px;
+    padding-top: 68px;
   }
 
   .notice-hero__image {
@@ -283,8 +302,8 @@ const currentPage = ref(1)
 
 @media (max-width: 640px) {
   .notice-hero {
-    min-height: 260px;
-    padding: 86px 22px 26px;
+    min-height: 150px;
+    padding: 64px 22px 20px;
   }
 
   .notice-search {
@@ -334,55 +353,4 @@ const currentPage = ref(1)
   }
 }
 
-:deep(.el-pagination) {
-  --el-pagination-button-width: 45px;
-  --el-pagination-button-height: 43px;
-  --el-pagination-border-radius: 7px;
-  --el-pagination-bg-color: #ffffff;
-  --el-pagination-button-color: #0f1729;
-  --el-pagination-hover-color: #0b75ff;
-  --el-pagination-font-size: 17px;
-  align-items: center;
-  gap: 11px;
-  font-weight: 400;
-}
-
-:deep(.el-pagination.is-background .btn-prev),
-:deep(.el-pagination.is-background .btn-next),
-:deep(.el-pagination.is-background .el-pager li) {
-  margin: 0;
-  border: 1px solid #dde4ee;
-  background: #ffffff;
-  box-shadow: 0 5px 14px rgba(31, 59, 94, 0.04);
-}
-
-:deep(.el-pagination.is-background .el-pager li.is-active) {
-  border-color: #0075ff;
-  background: linear-gradient(180deg, #1486ff, #006df0);
-  box-shadow: 0 8px 18px rgba(0, 110, 245, 0.24);
-}
-
-:deep(.el-pagination__jump) {
-  margin-left: 28px;
-  color: #6a778f;
-  font-size: 17px;
-}
-
-:deep(.el-pagination__goto) {
-  margin-right: 12px;
-}
-
-:deep(.el-pagination__classifier) {
-  margin-left: 12px;
-}
-
-:deep(.el-pagination__editor.el-input) {
-  width: 67px;
-  height: 43px;
-}
-
-:deep(.el-pagination__editor.el-input .el-input__wrapper) {
-  border-radius: 7px;
-  box-shadow: 0 0 0 1px #dde4ee inset, 0 5px 14px rgba(31, 59, 94, 0.04);
-}
 </style>

package/src/views/NoticeDetailView.vue

@@ -1,60 +1,106 @@
 <script setup lang="ts">
-import { Top } from '@element-plus/icons-vue'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ArrowLeft, Top } from '@element-plus/icons-vue'
+
+interface NoticeDetail {
+  id: number
+  title: string
+  publishTime: string
+  views: number
+  pinned?: boolean
+  contentHtml: string
+}
+
+const noticeDetails: NoticeDetail[] = [
+  {
+    id: 1001,
+    title: '关于系统维护升级的公告（2024年6月15日）',
+    publishTime: '2024-06-10 10:00:00',
+    views: 1268,
+    pinned: true,
+    contentHtml: `
+      <p><strong>尊敬的用户：</strong></p>
+      <p style="text-indent: 2em;">为提供更稳定、高效的服务，系统将于以下时间进行维护升级。维护期间，系统部分功能将受到影响，给您带来的不便，敬请谅解！</p>
+      <h2>一、维护时间</h2>
+      <p>2024年6月15日（周六）02:00 - 06:00（预计4小时）</p>
+      <h2>二、维护范围</h2>
+      <p>系统整体升级维护，期间将暂停服务。</p>
+      <h2>三、影响范围</h2>
+      <ol>
+        <li>系统登录、项目管理、任务协作等功能将无法使用；</li>
+        <li>维护期间可能无法正常访问平台；</li>
+        <li>已进行的操作将在系统恢复后正常保存。</li>
+      </ol>
+      <blockquote>温馨提示：维护期间请勿重复提交业务数据，避免恢复后出现重复记录。</blockquote>
+      <h2>四、注意事项</h2>
+      <ul>
+        <li>请您提前安排好相关工作，避免在维护期间进行重要操作；</li>
+        <li>维护完成后，系统将自动恢复服务，无需您进行任何操作；</li>
+        <li>如有紧急问题，请联系管理员。</li>
+      </ul>
+      <p>感谢您对我们工作的支持与理解！</p>
+      <p style="text-align: right;">项目管理平台运营团队<br />2024年6月10日</p>
+    `,
+  },
+  {
+    id: 1002,
+    title: '关于优化预填报流程的通知',
+    publishTime: '2024-06-08 09:30:00',
+    views: 986,
+    contentHtml: `
+      <p><strong>尊敬的用户：</strong></p>
+      <p>为提升预填报效率，平台已对填报步骤、校验提示和保存逻辑进行优化，请您在办理相关业务时关注页面提示。</p>
+      <h2>一、优化内容</h2>
+      <ul>
+        <li>精简重复填写字段；</li>
+        <li>优化必填项校验提示；</li>
+        <li>增强草稿保存稳定性。</li>
+      </ul>
+      <h2>二、生效时间</h2>
+      <p>本次优化自2024年6月8日起正式生效。</p>
+      <p style="text-align: right;">项目管理平台运营团队<br />2024年6月8日</p>
+    `,
+  },
+]
+
+const route = useRoute()
+const router = useRouter()
+const noticeId = computed(() => Number(route.query.id))
+const notice = computed(() => noticeDetails.find((item) => item.id === noticeId.value))
+
+function goBack() {
+  router.back()
+}
 </script>
 
 <template>
   <main class="notice-detail-page">
-    <article class="notice-article">
-      <div class="pin-tag">
-        <el-icon :size="18"><Top /></el-icon>
-        置顶
+    <article v-if="notice" class="notice-article">
+      <button class="back-button" type="button" @click="goBack">
+        <el-icon :size="16"><ArrowLeft /></el-icon>
+        返回
+      </button>
+
+      <div class="article-title-row">
+        <div v-if="notice.pinned" class="pin-tag">
+          <el-icon :size="18"><Top /></el-icon>
+          置顶
+        </div>
+        <h1>{{ notice.title }}</h1>
       </div>
 
-      <h1>关于系统维护升级的公告（2024年6月15日）</h1>
-
       <div class="article-meta">
-        <span>发布时间： 2024-06-10 10:00:00</span>
-        <span>浏览量： 1268</span>
+        <span>发布时间： {{ notice.publishTime }}</span>
+        <span>浏览量： {{ notice.views }}</span>
       </div>
 
       <div class="article-divider"></div>
 
-      <section class="article-content">
-        <p class="salutation">尊敬的用户：</p>
-
-        <p class="indent">
-          为提供更稳定、高效的服务，系统将于以下时间进行维护升级。维护期间，系统部分功能将受到影响，
-          给您带来的不便，敬请谅解！
-        </p>
-
-        <h2>一、维护时间</h2>
-        <p>2024年6月15日（周六）02:00 - 06:00（预计4小时）</p>
-
-        <h2>二、维护范围</h2>
-        <p>系统整体升级维护，期间将暂停服务。</p>
-
-        <h2>三、影响范围</h2>
-        <ol>
-          <li>系统登录、项目管理、任务协作等功能将无法使用；</li>
-          <li>维护期间可能无法正常访问平台；</li>
-          <li>已进行的操作将在系统恢复后正常保存。</li>
-        </ol>
-
-        <h2>四、注意事项</h2>
-        <ol>
-          <li>请您提前安排好相关工作，避免在维护期间进行重要操作；</li>
-          <li>维护完成后，系统将自动恢复服务，无需您进行任何操作；</li>
-          <li>如有紧急问题，请联系管理员。</li>
-        </ol>
-
-        <p>感谢您对我们工作的支持与理解！</p>
-
-        <footer class="article-signature">
-          <p>项目管理平台运营团队</p>
-          <p>2024年6月10日</p>
-        </footer>
-      </section>
+      <section class="article-content" v-html="notice.contentHtml"></section>
     </article>
+
+    <el-empty v-else class="notice-empty" description="未找到公告详情" />
   </main>
 </template>
 
@@ -73,30 +119,59 @@ import { Top } from '@element-plus/icons-vue'
 .notice-article {
   width: min(100%, 1174px);
   margin: 0 auto;
-  padding: 46px 46px 62px;
+  padding: 34px 42px 54px;
   border: 1px solid #e1e7f0;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.96);
   box-shadow: 0 14px 42px rgba(32, 58, 95, 0.06);
 }
 
+.back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 32px;
+  margin: 0 0 22px;
+  padding: 0 12px;
+  border: 1px solid #d8e1ee;
+  border-radius: 6px;
+  color: #52627a;
+  background: #ffffff;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 14px;
+}
+
+.back-button:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+}
+
 .pin-tag {
   display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
   gap: 4px;
-  height: 37px;
-  padding: 0 10px;
+  height: 30px;
+  padding: 0 9px;
   border-radius: 4px;
   color: #ff2e25;
   background: #ffe8e6;
-  font-size: 17px;
+  font-size: 14px;
   font-weight: 600;
 }
 
+.article-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 22px 0 18px;
+}
+
 .notice-article h1 {
-  margin: 33px 0 22px;
+  margin: 0;
   color: #080f20;
-  font-size: clamp(28px, 3vw, 38px);
+  font-size: clamp(24px, 2.3vw, 32px);
   line-height: 1.26;
   font-weight: 800;
   letter-spacing: 0;
@@ -107,59 +182,66 @@ import { Top } from '@element-plus/icons-vue'
   flex-wrap: wrap;
   gap: 34px 90px;
   color: #6f7e98;
-  font-size: 18px;
+  font-size: 15px;
   line-height: 1.5;
 }
 
 .article-divider {
   height: 1px;
-  margin: 35px 0 26px;
+  margin: 28px 0 22px;
   background: #dfe6f0;
 }
 
 .article-content {
-  font-size: 21px;
-  line-height: 2.08;
+  font-size: 16px;
+  line-height: 1.95;
 }
 
-.article-content p {
-  margin: 0 0 28px;
+.article-content :deep(p) {
+  margin: 0 0 18px;
 }
 
-.article-content .salutation {
-  margin-bottom: 32px;
+.article-content :deep(strong) {
   font-weight: 700;
 }
 
-.article-content .indent {
-  text-indent: 2em;
-}
-
-.article-content h2 {
-  margin: 43px 0 10px;
+.article-content :deep(h2) {
+  margin: 30px 0 8px;
   color: #0d1527;
-  font-size: 22px;
+  font-size: 17px;
   line-height: 1.75;
   font-weight: 800;
   letter-spacing: 0;
 }
 
-.article-content ol {
-  margin: 0 0 28px 30px;
+.article-content :deep(ol),
+.article-content :deep(ul) {
+  margin: 0 0 20px 26px;
   padding: 0;
 }
 
-.article-content li {
+.article-content :deep(li) {
   padding-left: 7px;
+  margin-bottom: 5px;
 }
 
-.article-signature {
-  margin-top: 52px;
-  text-align: right;
+.article-content :deep(blockquote) {
+  margin: 18px 0 22px;
+  padding: 12px 16px;
+  border-left: 4px solid #1677ff;
+  border-radius: 4px;
+  color: #52627a;
+  background: #f4f8ff;
 }
 
-.article-signature p {
-  margin: 0 0 8px;
+.notice-empty {
+  width: min(100%, 1174px);
+  min-height: 420px;
+  margin: 0 auto;
+  border: 1px solid #e1e7f0;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 14px 42px rgba(32, 58, 95, 0.06);
 }
 
 @media (max-width: 768px) {
@@ -168,7 +250,13 @@ import { Top } from '@element-plus/icons-vue'
   }
 
   .notice-article {
-    padding: 28px 20px 42px;
+    padding: 22px 18px 38px;
+  }
+
+  .article-title-row {
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 8px;
   }
 
   .article-meta {
@@ -177,12 +265,12 @@ import { Top } from '@element-plus/icons-vue'
   }
 
   .article-content {
-    font-size: 17px;
-    line-height: 1.9;
+    font-size: 15px;
+    line-height: 1.85;
   }
 
-  .article-content h2 {
-    font-size: 18px;
+  .article-content :deep(h2) {
+    font-size: 16px;
   }
 }
 </style>