configs/breakpoints.ts

@@ -4,5 +4,6 @@ const breakpoints = {
   'lg': '1024px',
   'xl': '1280px',
   '2xl': '1536px',
+  'hidden-logo': '1736px',
 };
 export default breakpoints;

content

@@ -1 +1 @@
-Subproject commit 2865b12ed961e0d4d066e11c04052bd710cf24e2
+Subproject commit c2459db584158403a05821f8a56327b9936cdbe1

layouts/UserLayout.vue

@@ -4,7 +4,9 @@ import useColorModeStore from '~/stores/colorModeStore';
 import { useWindowScroll } from '@vueuse/core';
 
 const { colorMode } = storeToRefs(useColorModeStore());
-
+watch(colorMode, () => {
+  console.log('colorMode changed:', colorMode.value);
+});
 const isHome = computed(() => useRoute().path === '/');
 const items = ref<NavigationMenuItem[]>([
   {
@@ -82,12 +84,12 @@ onMounted(() => {
         }" @mouseleave="collapsed = true">
           <div
               v-if="colorMode === 'light'"
-              class="flex bg-top absolute w-full h-full bg-[url('/79d52228c770808810a310115567e6790380823a.webp')] ">
+              class="flex w-full h-full absolute bg-[url('/79d52228c770808810a310115567e6790380823a.webp')] bg-cover bg-top ">
             <slot name="header"/>
           </div>
           <div
               v-else
-              class="flex bg-top absolute w-full h-full bg-[url('/anime-8788959.webp')]">
+              class="flex w-full h-full max-h-80 absolute bg-[url('/anime-8788959.webp')] bg-cover bg-center">
             <slot name="header"/>
           </div>
           <!-- header picture -->

package.json

@@ -33,14 +33,11 @@
     "vue-router": "^4.5.1",
     "word-count": "^0.3.1"
   },
-  "packageManager": "pnpm@10.22.0",
+  "packageManager": "pnpm@10.18.0",
   "devDependencies": {
     "@iconify-json/clarity": "^1.2.4",
-    "@iconify-json/codicon": "^1.2.32",
-    "@iconify-json/fluent": "^1.2.34",
     "@iconify-json/lucide": "^1.2.68",
     "@iconify-json/material-symbols": "^1.2.40",
-    "@iconify-json/octicon": "^1.2.19",
     "@stylistic/eslint-plugin": "^5.4.0",
     "@stylistic/eslint-plugin-jsx": "^4.4.1",
     "@vue/eslint-config-typescript": "^14.6.0",
@@ -50,14 +47,5 @@
     "overlayscrollbars": "^2.12.0",
     "typescript-eslint": "^8.44.1",
     "vue-eslint-parser": "^10.2.0"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "@parcel/watcher",
-      "better-sqlite3",
-      "esbuild",
-      "unrs-resolver",
-      "vue-demi"
-    ]
   }
 }

tailwind.config.js

@@ -0,0 +1,37 @@
+// tailwind config file
+import plugin from 'tailwindcss/plugin';
+import tailwindScrollbar from 'tailwind-scrollbar';
+import breakpoints from '~/configs/breakpoints';
+
+export default {
+  mode: 'jit',
+  darkMode: 'class',
+  theme: {
+    screens: breakpoints,
+  },
+  plugins: [
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        '.scrollbar-hide': {
+          /* IE and Edge */
+          '-ms-overflow-style': 'none',
+
+          /* Firefox */
+          'scrollbar-width': 'none',
+
+          /* Safari and Chrome */
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+        },
+      });
+    }),
+    tailwindScrollbar,
+  ],
+  content: [
+    './app.vue',
+    './components/**/*.{vue,js,ts}',
+    './layouts/**/*.vue',
+    './pages/**/*.vue',
+  ],
+};

utils/ColorHelper.ts

@@ -4,9 +4,6 @@ export function rgbToHsl(rgb: number[]) {
     throw new Error('Input must be an array of three numbers representing RGB values.');
   }
   let [r, g, b] = rgb;
-  r = r!;
-  b = b!;
-  g = g!;
   r /= 255;
   g /= 255;
   b /= 255;
@@ -39,9 +36,6 @@ export function hslToRgb(hsl: number[]) {
     throw new Error('Input must be an array of three numbers representing HSL values.');
   }
   let [h, s, l] = hsl;
-  h = h!;
-  s = s!;
-  l = l!;
   h /= 360;
   s /= 100;
   l /= 100;
@@ -71,16 +65,16 @@ export function toRGBArray(color: string): number[] {
   // 处理 rgb/rgba
   const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
   if (rgbMatch) {
-    return [parseInt(rgbMatch[1]!), parseInt(rgbMatch[2]!), parseInt(rgbMatch[3]!)];
+    return [parseInt(rgbMatch[1]), parseInt(rgbMatch[2]), parseInt(rgbMatch[3])];
   }
   // 处理 #fff 或 #ffffff
   const hexMatch = color.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/);
   if (hexMatch) {
     let hex = hexMatch[1];
-    if (hex!.length === 3) {
+    if (hex.length === 3) {
-      hex = hex!.split('').map((x) => x + x).join('');
+      hex = hex.split('').map((x) => x + x).join('');
     }
-    const num = parseInt(hex!, 16);
+    const num = parseInt(hex, 16);
     return [
       (num >> 16) & 255,
       (num >> 8) & 255,
@@ -103,14 +97,14 @@ export function toHexString(rgb: number[]): string {
 
 export function toLightColor(rgb: number[]): number[] {
   const hsl = rgbToHsl(rgb);
-  if (hsl[2]! < 50)
+  if (hsl[2] < 50)
-    hsl[2] = hsl[2]! / 5 + 50; // 增加亮度
+    hsl[2] = hsl[2] / 5 + 50; // 增加亮度
   return hslToRgb(hsl);
 }
 
 export function toDarkColor(rgb: number[]): number[] {
   const hsl = rgbToHsl(rgb);
-  if (hsl[2]! > 50)
+  if (hsl[2] > 50)
-    hsl[2] = 50 - (hsl[2]! - 50) / 5; // 减少亮度
+    hsl[2] = 50 - (hsl[2] - 50) / 5; // 减少亮度
   return hslToRgb(hsl);
 }