feat: 增加图片压缩和数据

package.json

@@ -14,6 +14,9 @@
     "axios": "^1.6.2",
     "naive-ui": "^2.35.0",
     "pinia": "^2.1.7",
+    "sharp": "^0.32.6",
+    "svgo": "^3.0.4",
+    "vite-plugin-image-optimizer": "^1.1.7",
     "vue": "^3.3.8",
     "vue-router": "^4.0.13"
   },

src/components/infoBox.vue

@@ -11,7 +11,7 @@
         <span> {{ time }}</span>
         <div class="see-more" @click="$router.push(`/info-detail/${id}`)">
           查看
-          <img class="see-more-img" src="img/see_more.png" alt="see more" />
+          <img class="see-more-img" src="/img/see_more.png" alt="see more" />
         </div>
       </div>
     </div>

src/components/noticeBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card :title="title" class="notice-box">
+  <n-card :title="title" class="notice-box" @click="handleDetail">
     {{ content }}
     <template #footer>
       {{ time }}
@@ -7,11 +7,17 @@
   </n-card>
 </template>
 <script setup>
+import { useRouter } from "vue-router";
+const router = useRouter();
 defineOptions({
   name: "notice-box",
 });
 
-defineProps({
+const props = defineProps({
+  id: {
+    type: [String, Number],
+    default: () => "",
+  },
   title: {
     type: String,
     default: () => "",
@@ -25,6 +31,14 @@ defineProps({
     default: () => "",
   },
 });
+
+const handleDetail = () => {
+  if (props.id) {
+    router.push("/info-detail/" + props.id);
+  } else {
+    console.warn("missing id");
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -36,6 +50,7 @@ defineProps({
   // background-image: url("/img/notice_list_bg.png");
   background-size: contain;
   background-repeat: no-repeat;
+  cursor: pointer;
   // background-color: transparent;
 }
 </style>

src/views/collect.vue

@@ -51,9 +51,10 @@
           </n-tab-pane>
           <n-tab-pane name="通知" tab="通知">
             <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
-              <template v-for="item in 16">
+              <template v-for="(_, index) in 16">
                 <n-gi>
                   <notice-box
+                    :id="`${index + 2}_notice`"
                     title="这是一段标题这是一段标题"
                     content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
                     time="2023-01-02"
@@ -88,6 +89,4 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/views/exhibition.vue

@@ -6,7 +6,7 @@
         <n-tabs type="line" pane-class="tab-content">
           <template #prefix>
             <span class="meta-title">
-              <img src="img/subtitle_2.png" />
+              <img src="/img/subtitle_2.png" />
             </span>
           </template>
           <n-tab-pane name="all" tab="全部展览">

src/views/home.vue

@@ -32,7 +32,7 @@
     </div>
     <div class="right">
       <div class="home_logo">
-        <img src="img/logo.png" />
+        <img src="/img/logo.png" />
       </div>
       <n-space class="navigate" justify="flex-start" align="center">
         <n-button class="btn btn_1" @click="push('/info')" text>

src/views/info.vue

@@ -51,9 +51,10 @@
           </n-tab-pane>
           <n-tab-pane name="通知" tab="通知">
             <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
-              <template v-for="item in 16">
+              <template v-for="(_, index) in 16">
                 <n-gi>
                   <notice-box
+                    :id="`${index + 2}_notice`"
                     title="这是一段标题这是一段标题"
                     content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
                     time="2023-01-02"
@@ -88,6 +89,4 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

vite.config.js

@@ -4,7 +4,7 @@ import path from "path";
 import AutoImport from "unplugin-auto-import/vite";
 import Components from "unplugin-vue-components/vite";
 import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
-
+import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -25,6 +25,14 @@ export default defineConfig({
     Components({
       resolvers: [NaiveUiResolver()],
     }),
+    ViteImageOptimizer({
+      png: {
+        quality: 100,
+      },
+      jpg: {
+        quality: 100,
+      },
+    }),
   ],
   resolve: {
     alias: {