verce-vue-test 0.0.17 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verce-vue-test",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "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,129 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { Top } from '@element-plus/icons-vue'
+
+interface ArticleSection {
+  heading: string
+  paragraphs?: string[]
+  items?: string[]
+}
+
+interface NoticeDetail {
+  id: number
+  title: string
+  publishTime: string
+  views: number
+  pinned?: boolean
+  salutation: string
+  intro: string
+  sections: ArticleSection[]
+  closing: string
+  team: string
+  signatureDate: string
+}
+
+const noticeDetails: NoticeDetail[] = [
+  {
+    id: 1001,
+    title: '关于系统维护升级的公告（2024年6月15日）',
+    publishTime: '2024-06-10 10:00:00',
+    views: 1268,
+    pinned: true,
+    salutation: '尊敬的用户：',
+    intro: '为提供更稳定、高效的服务，系统将于以下时间进行维护升级。维护期间，系统部分功能将受到影响，给您带来的不便，敬请谅解！',
+    sections: [
+      {
+        heading: '一、维护时间',
+        paragraphs: ['2024年6月15日（周六）02:00 - 06:00（预计4小时）'],
+      },
+      {
+        heading: '二、维护范围',
+        paragraphs: ['系统整体升级维护，期间将暂停服务。'],
+      },
+      {
+        heading: '三、影响范围',
+        items: [
+          '系统登录、项目管理、任务协作等功能将无法使用；',
+          '维护期间可能无法正常访问平台；',
+          '已进行的操作将在系统恢复后正常保存。',
+        ],
+      },
+      {
+        heading: '四、注意事项',
+        items: [
+          '请您提前安排好相关工作，避免在维护期间进行重要操作；',
+          '维护完成后，系统将自动恢复服务，无需您进行任何操作；',
+          '如有紧急问题，请联系管理员。',
+        ],
+      },
+    ],
+    closing: '感谢您对我们工作的支持与理解！',
+    team: '项目管理平台运营团队',
+    signatureDate: '2024年6月10日',
+  },
+  {
+    id: 1002,
+    title: '关于优化预填报流程的通知',
+    publishTime: '2024-06-08 09:30:00',
+    views: 986,
+    salutation: '尊敬的用户：',
+    intro: '为提升预填报效率，平台已对填报步骤、校验提示和保存逻辑进行优化，请您在办理相关业务时关注页面提示。',
+    sections: [
+      { heading: '一、优化内容', items: ['精简重复填写字段；', '优化必填项校验提示；', '增强草稿保存稳定性。'] },
+      { heading: '二、生效时间', paragraphs: ['本次优化自2024年6月8日起正式生效。'] },
+    ],
+    closing: '感谢您的配合。',
+    team: '项目管理平台运营团队',
+    signatureDate: '2024年6月8日',
+  },
+]
+
+const route = useRoute()
+const noticeId = computed(() => Number(route.query.id))
+const notice = computed(() => noticeDetails.find((item) => item.id === noticeId.value))
 </script>
 
 <template>
   <main class="notice-detail-page">
-    <article class="notice-article">
-      <div class="pin-tag">
+    <article v-if="notice" class="notice-article">
+      <div v-if="notice.pinned" class="pin-tag">
         <el-icon :size="18"><Top /></el-icon>
         置顶
       </div>
 
-      <h1>关于系统维护升级的公告（2024年6月15日）</h1>
+      <h1>{{ notice.title }}</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="salutation">{{ notice.salutation }}</p>
 
-        <p class="indent">
-          为提供更稳定、高效的服务，系统将于以下时间进行维护升级。维护期间，系统部分功能将受到影响，
-          给您带来的不便，敬请谅解！
-        </p>
+        <p class="indent">{{ notice.intro }}</p>
 
-        <h2>一、维护时间</h2>
-        <p>2024年6月15日（周六）02:00 - 06:00（预计4小时）</p>
+        <template v-for="section in notice.sections" :key="section.heading">
+          <h2>{{ section.heading }}</h2>
+          <p v-for="paragraph in section.paragraphs" :key="paragraph">{{ paragraph }}</p>
+          <ol v-if="section.items?.length">
+            <li v-for="item in section.items" :key="item">{{ item }}</li>
+          </ol>
+        </template>
 
-        <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>
+        <p>{{ notice.closing }}</p>
 
         <footer class="article-signature">
-          <p>项目管理平台运营团队</p>
-          <p>2024年6月10日</p>
+          <p>{{ notice.team }}</p>
+          <p>{{ notice.signatureDate }}</p>
         </footer>
       </section>
     </article>
+
+    <el-empty v-else class="notice-empty" description="未找到公告详情" />
   </main>
 </template>
 
@@ -162,6 +231,16 @@ import { Top } from '@element-plus/icons-vue'
   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) {
   .notice-detail-page {
     padding: 0 0 20px;