[+] Top markdown

package.json

@@ -20,6 +20,8 @@
     "fs-extra": "^11.2.0",
     "katex": "^0.16.10",
     "less": "^4.2.0",
+    "markd": "^1.2.0",
+    "marked": "^13.0.1",
     "moment": "^2.30.1",
     "pinia": "^2.1.7",
     "sass": "^1.77.6",

src/assets/top.md

@@ -0,0 +1,7 @@
+## TDP-FT
+
+本页面内容不保证时效性, 请自行斟酌.
+
+部分链接为推测而得或无法访问, 已在页面中作出标记.
+
+请勿将此项目用于迫害目的.

src/components/ContentCard.vue

@@ -16,12 +16,12 @@ export default class ContentCard extends Vue {
             <summary>点击查看网络站点</summary>
             <a v-for="s in content.sites" :key="s"
                v-bind:href="s.replaceAll('(无法正常访问)', '').replaceAll('(推测而得)', '')">
-                <span><Icon class="icon-link-off" icon="uil:link-broken" v-if="s.includes('(无法正常访问)')"/></span>
-                <span><Icon class="icon-sync-off" icon="uil:sync-slash" v-if="s.includes('(推测而得)')"/></span>
+                <span><Icon class="icon-link-off" icon="uil:link-broken" v-if="s.includes('(无法正常访问)')" title="无法正常访问"/></span>
+                <span><Icon class="icon-sync-off" icon="uil:sync-slash" v-if="s.includes('(推测而得)')" title="推测而得"/></span>
                 <span>{{ s.replaceAll('(无法正常访问)', '').replaceAll('(推测而得)', '') }}</span>
             </a>
         </details>
-        <details v-if="content.locations.length > 0">
+        <details v-if="(content.locations.length > 0) && (!content.locations[0].includes('UNKNOWN'))">
             <summary>点击查看地址</summary>
             <p v-for="l in content.locations" :key="l" v-text="l"/>
         </details>

src/global.d.ts

@@ -0,0 +1,2 @@
+declare module '*.md';
+declare module '*.vue';

src/shims.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+/* eslint-disable */
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue';
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}
+
+declare module '*.md' {
+    const html: string;
+    export default html;
+}

src/style/markdown.scss

@@ -0,0 +1,41 @@
+@import "./mocha.sass";
+
+.markdown {
+  color: $text;
+
+  .head {
+    color: $rosewater;
+    border-bottom: 1px solid $rosewater;
+  }
+
+  h1 {
+    @extend .head;
+
+    font-size: 2.5rem;
+  }
+
+  h2 {
+    @extend .head;
+
+    font-size: 2rem;
+  }
+
+  h3, h4, h5, h6 {
+    color: $rosewater;
+    font-size: 1.5rem;
+  }
+
+  a {
+    color: $teal;
+
+    &:active {
+      color: $lavender;
+    }
+  }
+
+  blockquote {
+    background-color: $yellow-opacity;
+    border-left: 2px solid $yellow;
+    border-radius: 1em;
+  }
+}

src/style/mocha.sass

@@ -23,4 +23,31 @@ $surface1: #45475a
 $surface2: #585b70
 $base: #1e1e2e
 $mantle: #181825
-$crust: #11111b
+$crust: #11111b
+
+$rosewater-opacity: #f5e0dc4e
+$flamingo-opacity: #f2cdcd4e
+$pink-opacity: #f5c2e74e
+$mauve-opacity: #cba6f74e
+$red-opacity: #f38ba84e
+$maroon-opacity: #eba0ac4e
+$peach-opacity: #fab3874e
+$yellow-opacity: #f9e2af4e
+$green-opacity: #a6e3a14e
+$teal-opacity: #94e2d54e
+$sky-opacity: #89dceb4e
+$sapphire-opacity: #74c7ec4e
+$blue-opacity: #89b4fa4e
+$lavender-opacity: #b4befe4e
+$text-opacity: #cdd6f44e
+$subtext0-opacity: #a6adc84e
+$subtext1-opacity: #bac2de4e
+$overlay0-opacity: #6c70864e
+$overlay1-opacity: #7f849c4e
+$overlay2-opacity: #9399b24e
+$surface0-opacity: #3132444e
+$surface1-opacity: #45475a4e
+$surface2-opacity: #585b704e
+$base-opacity: #1e1e2e4e
+$mantle-opacity: #1818254e
+$crust-opacity: #11111b4e

src/views/ContentField.vue

@@ -3,10 +3,12 @@ import {Content, Data} from "@/logic/data";
 import {fetchWithParams, gShuffle} from "@/logic/helper";
 import {Vue, Component} from 'vue-facing-decorator';
 import ContentCard from "@/components/ContentCard.vue";
+import topHtml from '@/assets/top.md';
 
 @Component({components: {ContentCard}})
 export default class ContentField extends Vue {
     contents = [] as Content[]
+    topHtml = topHtml;
 
     created() {
         fetchWithParams('https://raw.githubusercontent.com/FunctionSir/TransDefenseProject/master/institute_list.json')
@@ -20,12 +22,15 @@ export default class ContentField extends Vue {
 </script>
 
 <template>
+    <div class="head-message markdown" v-html="topHtml"/>
     <div class="content-field">
         <ContentCard v-for="content in contents" :key="content" :content="content" class="content-card"/>
     </div>
 </template>
 
-<style lang="less">
+<style lang="scss">
+@import "@/style/markdown.scss";
+
 .content-field {
     column-count: 3;
     width: 100%;
@@ -38,6 +43,13 @@ export default class ContentField extends Vue {
     }
 }
 
+.head-message {
+    width: 100%;
+    height: fit-content;
+    max-width: 1293px;
+    margin: auto auto 2rem;
+}
+
 @media screen and (max-width: 976px) {
     .content-field {
         column-count: 2;

vite.config.ts

@@ -3,13 +3,11 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import markdown from './vite/markdown'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    vueJsx(),
-  ],
+  plugins: [vue(), vueJsx(), markdown()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))

vite/markdown.ts

@@ -0,0 +1,15 @@
+import { Plugin } from "vite";
+
+import * as marked from "marked";
+
+export default function vitePluginMarkdown(): Plugin {
+    return {
+        name: "vite-plugin-markdown",
+        transform(code, id) {
+            if (!id.endsWith(".md")) return;
+
+            const html = marked.marked(code);
+            return `export default ${JSON.stringify(html)}`;
+        }
+    }
+}