✨ cnb 自定义开发容器

.gitignore

@@ -29,3 +29,4 @@ pnpm-workspace.yaml
 /nuxt.run.xml
 /server_ nuxt.run.xml
 /output.tar.gz
+.pnpm-store

.ide/Dockerfile

@@ -0,0 +1,33 @@
+FROM cnbcool/default-build-env:latest
+
+RUN apt-get update && \
+    apt-get install -y wget unzip lsof nload htop net-tools dnsutils openssh-server zsh openssh-server command-not-found && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+
+WORKDIR /root
+RUN git clone https://git.lichx.top/li_chx/shell-config.git && \
+    cp -r shell-config/.* . && \
+    wget https://download.jetbrains.com/webstorm/WebStorm-2025.2.5.tar.gz && \
+    mkdir -p /ide_cnb && \
+    tar -zxvf WebStorm-2025.2.5.tar.gz -C /ide_cnb && \
+    rm WebStorm-2025.2.5.tar.gz && \
+    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash && \
+    source ~/.bashrc && \
+    nvm install 24 && \
+    npm install --global corepack@latest && \
+    corepack enable pnpm && \
+    apt update
+
+# 单独处理 zsh 配置
+RUN zsh -c "source ~/.zshrc" && \
+    echo "zsh" >> ~/.bashrc
+
+RUN curl -fsSL https://code-server.dev/install.sh | sh \
+  && code-server --install-extension nuxtr.nuxt-vscode-extentions \
+  && code-server --install-extension bradlc.vscode-tailwindcss \
+  && code-server --install-extension tencent-cloud.coding-copilot \
+  && code-server --install-extension ms-vscode.vs-keybindings
+    
+ENV LANG C.UTF-8
+ENV LANGUAGE C.UTF-8

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "vue.volar",
+    "vue.vscode-typescript-vue-plugin",
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "ms-vscode.vscode-typescript-next",
+    "nuxtr.nuxt-vscode-extentions"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,26 @@
+{
+  "typescript.preferences.includePackageJsonAutoImports": "on",
+  "typescript.suggest.autoImports": true,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "vue.codeActions.enabled": true,
+  "vue.complete.casing.tags": "kebab",
+  "vue.complete.casing.props": "camel",
+  "vetur.validation.template": false,
+  "vetur.validation.script": false,
+  "vetur.validation.style": false,
+  "emmet.includeLanguages": {
+    "vue": "html"
+  },
+  "files.associations": {
+    "*.vue": "vue"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
+}

configs/breakpoints.ts

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

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) {
+    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,
@@ -97,14 +103,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);
 }