verce-vue-test 0.0.16 → 0.0.18

package/package.json

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

package/src/App.vue

@@ -13,11 +13,13 @@ import {
   DataLine,
   InfoFilled,
   TrendCharts,
+  Bell,
 } from '@element-plus/icons-vue'
 
 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
@@ -87,6 +89,10 @@ function toggleCollapse() {
             <el-icon><TrendCharts /></el-icon>
             <span>总行管理员首页</span>
           </el-menu-item>
+          <el-menu-item index="/notice-announcement">
+            <el-icon><Bell /></el-icon>
+            <span>通知公告</span>
+          </el-menu-item>
           <el-menu-item index="/about">
             <el-icon><InfoFilled /></el-icon>
             <span>关于</span>
@@ -116,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/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import './assets/reset.css'
 
 import App from './App.vue'
@@ -11,6 +12,6 @@ const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
-app.use(ElementPlus)
+app.use(ElementPlus, { locale: zhCn })
 
 app.mount('#app')

package/src/router/index.ts

@@ -66,6 +66,16 @@ const router = createRouter({
       meta: { fullscreen: true },
       component: () => import('../views/ExecutiveManagementView/index.vue'),
     },
+    {
+      path: '/notice-announcement',
+      name: 'noticeAnnouncement',
+      component: () => import('../views/NoticeAnnouncementView.vue'),
+    },
+    {
+      path: '/notice-announcement/detail',
+      name: 'noticeDetail',
+      component: () => import('../views/NoticeDetailView.vue'),
+    },
   ],
 })
 

package/src/views/NoticeAnnouncementView.vue

@@ -0,0 +1,356 @@
+<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
+}
+
+const notices: NoticeItem[] = [
+  {
+    id: 1001,
+    title: '关于系统维护升级的公告（2024年6月15日）',
+    date: '2024-06-10',
+    pinned: true,
+  },
+  { 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"
+        decoding="async"
+      />
+
+      <div class="notice-hero__copy">
+        <h1>通知公告</h1>
+        <p>了解平台最新动态和重要通知</p>
+      </div>
+
+      <div class="notice-search" role="search">
+        <input type="search" placeholder="请输入关键词" aria-label="请输入关键词" />
+        <el-icon :size="22"><Search /></el-icon>
+      </div>
+
+    </section>
+
+    <section class="notice-panel" aria-label="公告列表">
+      <div class="notice-table__head">
+        <span>公告标题</span>
+        <span>发布时间</span>
+      </div>
+
+      <ul class="notice-list">
+        <li v-for="item in notices" :key="`${item.title}-${item.date}`" class="notice-row">
+          <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>
+          </button>
+          <time :datetime="item.date">{{ item.date }}</time>
+        </li>
+      </ul>
+
+      <div class="notice-pagination">
+        <el-pagination
+          v-model:current-page="currentPage"
+          :page-size="8"
+          :pager-count="5"
+          :total="40"
+          background
+          layout="prev, pager, next, jumper"
+        />
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.notice-page {
+  min-height: 100%;
+  overflow: visible;
+  color: #10182d;
+  background:
+    linear-gradient(180deg, #f9fbff 0%, #f4f7fc 42%, #f7f9fd 100%);
+  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+}
+
+.notice-hero {
+  position: relative;
+  overflow: hidden;
+  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 {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  user-select: none;
+  pointer-events: none;
+}
+
+.notice-hero__copy {
+  position: relative;
+  z-index: 2;
+  padding-top: 3px;
+}
+
+.notice-hero__copy h1 {
+  margin: 0;
+  font-size: clamp(28px, 2.6vw, 36px);
+  line-height: 1.18;
+  font-weight: 800;
+  letter-spacing: 0;
+  color: #0c172d;
+}
+
+.notice-hero__copy p {
+  margin: 18px 0 0;
+  font-size: 15px;
+  line-height: 1.7;
+  color: #748098;
+}
+
+.notice-search {
+  position: absolute;
+  z-index: 3;
+  top: 24px;
+  right: clamp(28px, 4.6vw, 72px);
+  display: flex;
+  align-items: center;
+  width: min(288px, calc(100vw - 56px));
+  height: 42px;
+  padding: 0 15px 0 16px;
+  border: 1px solid #d5ddea;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 8px 22px rgba(29, 63, 112, 0.05);
+}
+
+.notice-search input {
+  width: 100%;
+  border: 0;
+  outline: 0;
+  color: #24314b;
+  background: transparent;
+  font: inherit;
+  font-size: 14px;
+}
+
+.notice-search input::placeholder {
+  color: #9aa6ba;
+}
+
+.notice-search .el-icon {
+  flex: 0 0 auto;
+  color: #65738e;
+}
+
+.notice-panel {
+  position: relative;
+  z-index: 4;
+  width: calc(100% - clamp(36px, 3.7vw, 56px));
+  margin: -1px auto 32px;
+  padding: 32px 42px 20px;
+  border: 1px solid #e1e7f0;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.93);
+  box-shadow: 0 8px 24px rgba(32, 58, 95, 0.05);
+}
+
+.notice-table__head,
+.notice-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 190px;
+  column-gap: 32px;
+  align-items: center;
+}
+
+.notice-table__head {
+  height: 40px;
+  padding: 0 23px;
+  border-bottom: 1px solid #dfe6f0;
+  color: #6e7b94;
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.notice-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.notice-row {
+  min-height: 60px;
+  padding: 0 23px;
+  border-bottom: 1px solid #e8edf5;
+}
+
+.notice-title {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 16px;
+  padding: 0;
+  border: 0;
+  color: #0e172b;
+  background: transparent;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 16px;
+  line-height: 1.45;
+  font-weight: 500;
+  font-family: inherit;
+  text-align: left;
+}
+
+.notice-title:hover {
+  color: #006fff;
+}
+
+.pin-tag {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+  height: 32px;
+  padding: 0 7px;
+  border-radius: 4px;
+  color: #ff2e25;
+  background: #ffe8e6;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.notice-row time {
+  color: #71809c;
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+.notice-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 66px;
+  padding-top: 11px;
+}
+
+@media (max-width: 920px) {
+  .notice-hero {
+    min-height: 150px;
+    padding-top: 68px;
+  }
+
+  .notice-hero__image {
+    object-position: 62% center;
+  }
+
+  .notice-panel {
+    padding-inline: 20px;
+  }
+
+  .notice-table__head,
+  .notice-row {
+    grid-template-columns: minmax(0, 1fr) 128px;
+    column-gap: 18px;
+    padding-inline: 10px;
+  }
+
+  .notice-title,
+  .notice-row time {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 640px) {
+  .notice-hero {
+    min-height: 150px;
+    padding: 64px 22px 20px;
+  }
+
+  .notice-search {
+    left: 22px;
+    right: 22px;
+    width: auto;
+  }
+
+  .notice-hero__image {
+    object-position: 66% center;
+  }
+
+  .notice-panel {
+    width: calc(100% - 24px);
+    padding: 20px 14px 18px;
+  }
+
+  .notice-table__head {
+    display: none;
+  }
+
+  .notice-row {
+    display: flex;
+    min-height: 82px;
+    align-items: flex-start;
+    justify-content: center;
+    flex-direction: column;
+    gap: 7px;
+  }
+
+  .notice-title {
+    gap: 9px;
+  }
+
+  .pin-tag {
+    height: 28px;
+    font-size: 14px;
+  }
+
+  .notice-row time {
+    font-size: 14px;
+  }
+
+  .notice-pagination {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+}
+
+</style>

package/src/views/NoticeDetailView.vue

@@ -0,0 +1,267 @@
+<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 v-if="notice" class="notice-article">
+      <div v-if="notice.pinned" class="pin-tag">
+        <el-icon :size="18"><Top /></el-icon>
+        置顶
+      </div>
+
+      <h1>{{ notice.title }}</h1>
+
+      <div class="article-meta">
+        <span>发布时间： {{ notice.publishTime }}</span>
+        <span>浏览量： {{ notice.views }}</span>
+      </div>
+
+      <div class="article-divider"></div>
+
+      <section class="article-content">
+        <p class="salutation">{{ notice.salutation }}</p>
+
+        <p class="indent">{{ notice.intro }}</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>
+
+        <p>{{ notice.closing }}</p>
+
+        <footer class="article-signature">
+          <p>{{ notice.team }}</p>
+          <p>{{ notice.signatureDate }}</p>
+        </footer>
+      </section>
+    </article>
+
+    <el-empty v-else class="notice-empty" description="未找到公告详情" />
+  </main>
+</template>
+
+<style scoped>
+.notice-detail-page {
+  min-height: 100%;
+  padding: 0 0 30px;
+  overflow-x: hidden;
+  color: #0f172a;
+  background:
+    radial-gradient(circle at 18% 10%, rgba(35, 116, 255, 0.06), transparent 30%),
+    linear-gradient(180deg, #f8fbff 0%, #f5f8fc 100%);
+  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+}
+
+.notice-article {
+  width: min(100%, 1174px);
+  margin: 0 auto;
+  padding: 46px 46px 62px;
+  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);
+}
+
+.pin-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 37px;
+  padding: 0 10px;
+  border-radius: 4px;
+  color: #ff2e25;
+  background: #ffe8e6;
+  font-size: 17px;
+  font-weight: 600;
+}
+
+.notice-article h1 {
+  margin: 33px 0 22px;
+  color: #080f20;
+  font-size: clamp(28px, 3vw, 38px);
+  line-height: 1.26;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.article-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 34px 90px;
+  color: #6f7e98;
+  font-size: 18px;
+  line-height: 1.5;
+}
+
+.article-divider {
+  height: 1px;
+  margin: 35px 0 26px;
+  background: #dfe6f0;
+}
+
+.article-content {
+  font-size: 21px;
+  line-height: 2.08;
+}
+
+.article-content p {
+  margin: 0 0 28px;
+}
+
+.article-content .salutation {
+  margin-bottom: 32px;
+  font-weight: 700;
+}
+
+.article-content .indent {
+  text-indent: 2em;
+}
+
+.article-content h2 {
+  margin: 43px 0 10px;
+  color: #0d1527;
+  font-size: 22px;
+  line-height: 1.75;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.article-content ol {
+  margin: 0 0 28px 30px;
+  padding: 0;
+}
+
+.article-content li {
+  padding-left: 7px;
+}
+
+.article-signature {
+  margin-top: 52px;
+  text-align: right;
+}
+
+.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) {
+  .notice-detail-page {
+    padding: 0 0 20px;
+  }
+
+  .notice-article {
+    padding: 28px 20px 42px;
+  }
+
+  .article-meta {
+    gap: 8px 28px;
+    font-size: 15px;
+  }
+
+  .article-content {
+    font-size: 17px;
+    line-height: 1.9;
+  }
+
+  .article-content h2 {
+    font-size: 18px;
+  }
+}
+</style>