feat: add deps

package.json

@@ -7,13 +7,25 @@
 		"build:server": "vite build --outDir dist/server --ssr src/entry-server.js"
 	},
 	"dependencies": {
+		"@duannx/vue-client-only": "^1.0.3",
+		"@rollup/plugin-inject": "^5.0.5",
+		"@unhead/vue": "^1.8.9",
 		"axios": "^1.6.7",
 		"fontawesome-6-pro": "^6.4.0",
+		"jquery": "^3.7.1",
+		"localforage": "^1.10.0",
+		"misans": "^4.0.0",
+		"mitt": "^3.0.1",
+		"noto-sans-sc": "^36.0.1",
+		"pinia": "^2.1.7",
 		"primevue": "^3.47.2",
+		"swiper": "^11.0.5",
 		"vue": "^3.3.12",
-		"vue-router": "^4.2.5"
+		"vue-router": "^4.2.5",
+		"workbox-window": "^7.0.0"
 	},
 	"devDependencies": {
+		"@rollup/plugin-alias": "^5.1.0",
 		"@vitejs/plugin-vue": "latest",
 		"@vitejs/plugin-vue-jsx": "latest",
 		"autoprefixer": "^10.4.17",
@@ -22,6 +34,7 @@
 		"tailwindcss": "^3.4.1",
 		"unplugin-auto-import": "^0.17.5",
 		"unplugin-vue-components": "^0.26.0",
-		"vite": "latest"
+		"vite": "latest",
+		"vite-plugin-pwa": "^0.17.5"
 	}
 }

src/components/Main.vue

@@ -0,0 +1,33 @@
+<template>
+	<Menubar :model="items">
+		<template #start>
+			<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
+				<path d="..." fill="var(--primary-color)" />
+				<path d="..." fill="var(--text-color)" />
+			</svg>
+		</template>
+		<template #item="{ item, props, hasSubmenu, root }">
+			<a v-ripple class="flex align-items-center" v-bind="props.action">
+				<span :class="item.icon" />
+				<span class="ml-2">{{ item.label }}</span>
+				<Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
+				<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+				<i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+			</a>
+		</template>
+		<template #end>
+			<div class="flex align-items-center gap-2">
+				<InputText placeholder="Search" type="text" class="w-8rem sm:w-auto" />
+				<Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+			</div>
+		</template>
+	</Menubar>
+
+</template>
+
+<script setup>
+let items = reactive([]);
+</script>
+<style scoped>
+
+</style>

src/main.js

@@ -3,6 +3,9 @@ import {createSSRApp} from 'vue';
 import {createRouter} from './router';
 import PrimeVue from 'primevue/config';
 import Lara from '@/presets/lara';
+import Ripple from 'primevue/ripple';
+import AnimateOnScroll from 'primevue/animateonscroll';
+
 
 import "fontawesome-6-pro/css/all.css";
 import "./assets/main.css";
@@ -20,8 +23,17 @@ export function createApp() {
             mergeProps: false,
         },
     }
-    app.use( PrimeVue?.default ||PrimeVue, primeVueOptions);
-
+    app.use(PrimeVue?.default || PrimeVue, primeVueOptions);
     app.use(router);
+    app.use(directivePlugin());
     return {app, router};
 }
+
+function directivePlugin() {
+    return {
+        install(app) {
+            app.directive('ripple', Ripple);
+            app.directive('animateonscroll', AnimateOnScroll);
+        }
+    }
+}

vite.config.js

@@ -2,6 +2,8 @@ import vuePlugin from '@vitejs/plugin-vue'
 import {defineConfig} from "vite";
 import path from "path";
 
+import inject from '@rollup/plugin-inject';
+import {VitePWA} from 'vite-plugin-pwa'
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
 import {PrimeVueResolver} from 'unplugin-vue-components/resolvers';
@@ -76,6 +78,42 @@ export default defineConfig({
                 PrimeVueResolver()
             ]
         }),
+        inject({
+            $: 'jquery',  // 这里会自动载入 node_modules 中的 jquery   jquery全局变量
+            jQuery: 'jquery',
+            'windows.jQuery': 'jquery'
+        }),
+        VitePWA({
+            registerType: 'autoUpdate',
+            workbox: {
+                globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+                navigateFallbackDenylist: [
+                    /^\/api/,
+                    /^\/cdn-cgi/,
+                ],
+            },
+            manifest: {
+                'name': '兽人控小说站',
+                'short_name': '兽人控小说站',
+                'theme_color': '#008AFF',
+                'background_color': '#f7f7fc',
+                'display': 'standalone',
+                'orientation': 'portrait',
+                'lang': 'zh-CN',
+                'icons': [
+                    {
+                        'sizes': '192x192',
+                        'src': 'static/android-chrome-192x192.png',
+                        'type': 'image/png'
+                    },
+                    {
+                        'sizes': '512x512',
+                        'src': 'static/android-chrome-512x512.png',
+                        'type': 'image/png'
+                    }
+                ]
+            }
+        })
     ],
     build: {
         minify: false,