🐛 部分依赖优化 Cloudflare构建优化

configs/breakpoints.ts

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

content

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

layouts/UserLayout.vue

@@ -4,9 +4,7 @@ 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[]>([
   {
@@ -84,12 +82,12 @@ onMounted(() => {
         }" @mouseleave="collapsed = true">
           <div
               v-if="colorMode === 'light'"
-              class="flex w-full h-full absolute bg-[url('/79d52228c770808810a310115567e6790380823a.webp')] bg-cover bg-top ">
+              class="flex bg-top absolute w-full h-full bg-[url('/79d52228c770808810a310115567e6790380823a.webp')] ">
             <slot name="header"/>
           </div>
           <div
               v-else
-              class="flex w-full h-full max-h-80 absolute bg-[url('/anime-8788959.webp')] bg-cover bg-center">
+              class="flex bg-top absolute w-full h-full bg-[url('/anime-8788959.webp')]">
             <slot name="header"/>
           </div>
           <!-- header picture -->

package.json

@@ -33,11 +33,14 @@
     "vue-router": "^4.5.1",
     "word-count": "^0.3.1"
   },
-  "packageManager": "pnpm@10.18.0",
+  "packageManager": "pnpm@10.22.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",
@@ -47,5 +50,14 @@
     "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

@@ -1,37 +0,0 @@
-// 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,6 +4,9 @@ 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;
@@ -36,6 +39,9 @@ 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;
@@ -65,16 +71,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) {
-      hex = hex.split('').map((x) => x + x).join('');
+    if (hex!.length === 3) {
+      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,
@@ -97,14 +103,14 @@ export function toHexString(rgb: number[]): string {
 
 export function toLightColor(rgb: number[]): number[] {
   const hsl = rgbToHsl(rgb);
-  if (hsl[2] < 50)
-    hsl[2] = hsl[2] / 5 + 50; // 增加亮度
+  if (hsl[2]! < 50)
+    hsl[2] = hsl[2]! / 5 + 50; // 增加亮度
   return hslToRgb(hsl);
 }
 
 export function toDarkColor(rgb: number[]): number[] {
   const hsl = rgbToHsl(rgb);
-  if (hsl[2] > 50)
-    hsl[2] = 50 - (hsl[2] - 50) / 5; // 减少亮度
+  if (hsl[2]! > 50)
+    hsl[2] = 50 - (hsl[2]! - 50) / 5; // 减少亮度
   return hslToRgb(hsl);
 }