feat: add NewsPage

Author: Iori Ichinose

src/components/SideBar/SideBar.vue

@@ -32,6 +32,6 @@ const onInput = useDebounce(setFilter);
     <NSpace vertical style="padding: 0 12px">
       <NInput :placeholder="t('sider.searchText')" @input="onInput" />
     </NSpace>
-    <NMenu :options="options" :value="route.path" default-expand-all />
+    <NMenu :options="options" :value="route.path" />
   </NSpace>
 </template>

src/components/SideBar/SidePanel.vue

@@ -1,62 +1,35 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import {
-  NCard,
-  NTabs,
-  NTabPane,
-  NDivider,
-  NRow,
-  NButton,
-  NModal
-} from 'naive-ui';
-
-import {
-  fetchNewsList,
-  fetchJokes,
-  JokeEntry,
-  NewsEntry,
-  fetchNews
-} from '@/models/news';
-import { convertTimestamp } from '@/utils/time';
+import { NCard, NTabs, NTabPane, NDivider, NRow, NButton } from 'naive-ui';
 
+import { useStore } from '@/store';
 import { useMutableRef, usePromiseEffect } from '@/hooks';
+import { fetchJokes, JokeEntry } from '@/models/news';
+import { convertTimestamp } from '@/utils/time';
 
-import MarkdownContainer from '@/components/MarkdownContainer';
-
-interface NewsEntryWithContent extends NewsEntry {
-  content: string;
-}
-
+const store = useStore();
 const { t, locale } = useI18n();
-const [news, setNews] = useMutableRef([] as NewsEntry[]);
 const [jokes, setJokes] = useMutableRef([] as JokeEntry[]);
-const [selected, setSelected] = useMutableRef<NewsEntryWithContent | null>(
-  null
-);
-const [show, setShow] = useMutableRef(false);
+const router = useRouter();
 
-usePromiseEffect(fetchNewsList, setNews);
-usePromiseEffect(fetchJokes, setJokes);
+const panelLimit = 6;
+const entries = computed(() => store.state.newsEntries.slice(0, panelLimit));
+usePromiseEffect(() => fetchJokes(panelLimit), setJokes);
 
-async function handleClick(link: NewsEntry) {
-  setSelected({ ...link, content: await fetchNews(link) });
-  setShow(true);
-}
+const handleClick = (index: number) => router.push(`/news/${index}`);
 </script>
 
 <template>
   <NDivider title-placement="left">{{ t('sider.news') }}</NDivider>
   <NCard content-style="padding: 0 20px;" :bordered="false">
     <NTabs type="segment" size="small" pane-class="tab-pane">
       <NTabPane name="Mirror">
-        <NRow v-for="link in news" :key="link.content">
-          <NButton text tag="a" @click="handleClick(link)">
+        <NRow v-for="(entry, index) in entries" :key="entry.content">
+          <NButton text tag="a" @click="handleClick(index)">
             <span class="link-title">
-              {{
-                convertTimestamp(link.time, locale as 'zh' | 'en') +
-                ' - ' +
-                link.name
-              }}
+              {{ convertTimestamp(entry.time, locale) + ' - ' + entry.name }}
             </span>
           </NButton>
         </NRow>
@@ -72,17 +45,6 @@ async function handleClick(link: NewsEntry) {
       </NTabPane>
     </NTabs>
   </NCard>
-  <NModal
-    style="width: min(600px, 90%)"
-    preset="card"
-    size="huge"
-    :title="selected?.name"
-    v-if="selected"
-    v-model:show="show"
-    bordered
-  >
-    <MarkdownContainer :content="selected.content" />
-  </NModal>
 </template>
 
 <style scoped lang="less">

src/components/TopNavi/TopNavi.vue

@@ -53,6 +53,7 @@ const options = [
   createRoute('/', 'mirrors'),
   createRoute('/download', 'downloads'),
   createRoute('/help', 'help'),
+  createRoute('/news', 'news'),
   createRoute('/about', 'about'),
   localeButton,
   darkMode

src/i18n/en.json

@@ -5,6 +5,7 @@
     "mirrors": "Mirrors",
     "downloads": "Downloads",
     "help": "Help",
+    "news": "News",
     "doc": "Documentation",
     "about": "About",
     "error": "Error"
@@ -28,6 +29,12 @@
     "title": "RTFM",
     "description": "Select menu to view help"
   },
+  "news": {
+    "date": "Date",
+    "author": "Author",
+    "title": "News",
+    "description": "Select menu to view news"
+  },
   "footer": {
     "maintainer": "This mirror site is maintained by {name}",
     "developer": "Frontend by {name}",

src/i18n/zh.json

@@ -5,6 +5,7 @@
     "mirrors": "镜像列表",
     "downloads": "下载",
     "help": "帮助",
+    "news": "新闻",
     "doc": "帮助文档",
     "about": "关于",
     "error": "出错了"
@@ -28,6 +29,12 @@
     "title": "去读手册",
     "description": "浏览菜单即可打开帮助"
   },
+  "news": {
+    "date": "发布日期",
+    "author": "作者",
+    "title": "镜像站新闻",
+    "description": "浏览菜单即可查看新闻"
+  },
   "footer": {
     "maintainer": "本镜像站由{name}维护",
     "developer": "前端由{name}构建",

src/models/news.ts

@@ -6,30 +6,41 @@ export interface NewsEntry {
   name: string;
   time: number;
   content: string;
+  author?: string;
+  tags?: string[];
 }
 
 export interface JokeEntry {
   title: string;
   web_url: string;
 }
 
-export async function fetchJokes() {
-  const links: JokeEntry[] = await json(
+export async function fetchJokes(limit?: number) {
+  let links: JokeEntry[] = await json(
     'https://git.nju.edu.cn/api/v4/projects/2412/issues'
   );
-  return links
-    .map(link => ({
-      ...link,
-      title: link.title.replace(/\d+$/g, '')
-    }))
-    .slice(0, 6);
+  if (limit != undefined) {
+    links = links.slice(0, limit);
+  }
+  return links.map(link => ({
+    ...link,
+    title: link.title.replace(/\d+$/g, '')
+  }));
 }
 
-export async function fetchNewsList(): Promise<NewsEntry[]> {
-  return await json(ServerPrefix + 'news/index.json');
+export async function fetchNewsList(limit?: number): Promise<NewsEntry[]> {
+  let data: NewsEntry[] = await json(ServerPrefix + 'news/index.json');
+  data.sort((a, b) => b.time - a.time);
+  if (limit != undefined) {
+    data = data.slice(0, limit);
+  }
+  return data;
 }
 
-export async function fetchNews(item: NewsEntry): Promise<string> {
+export async function fetchNews(item?: NewsEntry): Promise<string> {
+  if (item == undefined) {
+    return Promise.resolve('No document available.');
+  }
   return await text(ServerPrefix + `news/${item.content}`, data =>
     marked(data)
   );

src/routes/index.ts

@@ -3,6 +3,7 @@ import { LoadingBarApi, MenuOption } from 'naive-ui';
 import fetchDocRoutes from '@/routes/docs';
 import fetchDownloadRoutes from '@/routes/downloads';
 import { State } from '@/store';
+import fetchNewsRoutes from './news';
 
 export const loadingRef: { value?: LoadingBarApi } = {};
 export const setLoadingRef = (loadingBar: LoadingBarApi) => {
@@ -48,6 +49,21 @@ const routes: RouteRecordRaw[] = [
       sider: fetchDownloadRoutes
     }
   },
+  {
+    name: 'News',
+    path: '/news',
+    component: () => import('@/views/NewsPage.vue'),
+    children: [
+      {
+        path: ':title',
+        component: () => import('@/views/NewsPage.vue')
+      }
+    ],
+    meta: {
+      title: 'News',
+      sider: fetchNewsRoutes
+    }
+  },
   {
     name: 'About',
     path: '/about',

src/routes/news.tsx

@@ -0,0 +1,29 @@
+import { State } from '@/store';
+import { convertTimestamp } from '@/utils/time';
+import { MenuOption } from 'naive-ui';
+import { RouterLink } from 'vue-router';
+
+export default function fetchNewsRoutes(state: State, filter = '') {
+  const entries = state.newsEntries.filter(e =>
+    e.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())
+  );
+  return entries.map(
+    (item, index) =>
+      ({
+        key: '/news/' + index,
+        label: () => {
+          return (
+            <RouterLink
+              to={'/news/' + index}
+              style="display: flex; justify-content: space-between; align-items: center"
+            >
+              <span>{item.name}</span>
+              <span style="font-size: 12px; line-height: 1.0">
+                {convertTimestamp(item.time, 'zh')}
+              </span>
+            </RouterLink>
+          );
+        }
+      } as MenuOption)
+  );
+}

src/store/index.ts

@@ -3,11 +3,13 @@ import { createStore, useStore as baseUseStore, Store } from 'vuex';
 import { MobileWidth } from '@/configs';
 import { DocItem } from '@/models/documents';
 import { DownloadContent } from '@/models/downloads';
+import { NewsEntry } from '@/models/news';
 
 export interface State {
   isMobile: boolean;
   darkMode: boolean;
   locale: 'zh' | 'en';
+  newsEntries: NewsEntry[];
   docItems: DocItem[];
   downloadContents: DownloadContent[];
 }
@@ -19,6 +21,7 @@ export const store = createStore<State>({
     isMobile: document.body.clientWidth < MobileWidth,
     darkMode: sessionStorage.getItem('darkMode') == 'true',
     locale: 'zh',
+    newsEntries: [],
     docItems: [],
     downloadContents: []
   },
@@ -30,6 +33,9 @@ export const store = createStore<State>({
       state.darkMode = darkMode;
       sessionStorage.setItem('darkMode', darkMode.toString());
     },
+    setNews(state, entries: NewsEntry[]) {
+      state.newsEntries = entries;
+    },
     setDocs(state, items: DocItem[]) {
       state.docItems = items;
     },

src/utils/time.ts

@@ -7,12 +7,12 @@ dayjs.extend(relativeTime);
 
 export function convertTimestamp(
   ts: number,
-  locale: 'zh' | 'en',
+  locale: string,
   format = 'YYYY.M.D'
 ) {
   return dayjs.unix(ts).locale(locale).format(format);
 }
 
-export function timeFromNow(ts: number, locale: 'zh' | 'en') {
+export function timeFromNow(ts: number, locale: string) {
   return ts <= 0 ? '-' : dayjs.unix(ts).locale(locale).fromNow();
 }