refactor: migration to tailwind v4

.oxlintrc.json

@@ -12,6 +12,8 @@
     "scripts/**",
     "runtime/**",
     "docs/**",
-    "test/**"
+    "test/**",
+    "src/shared/**",
+    "src/shadcn/**"
   ]
 }

.prettierignore

@@ -23,3 +23,4 @@ src/renderer/src/components/ui/*
 electron.vite.config.ts
 *.md
 scripts/*
+src/shadcn/**/*

components.json

@@ -2,17 +2,19 @@
   "$schema": "https://shadcn-vue.com/schema.json",
   "style": "new-york",
   "typescript": true,
-  "tsConfigPath": "./tsconfig.web.json",
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "",
     "css": "src/renderer/src/assets/style.css",
     "baseColor": "zinc",
     "cssVariables": true,
     "prefix": ""
   },
-  "framework": "vite",
   "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
-  }
+    "components": "@shadcn/components",
+    "composables": "@shadcn/composables",
+    "utils": "@shadcn/lib/utils",
+    "ui": "@shadcn/components/ui",
+    "lib": "@shadcn/lib"
+  },
+  "iconLibrary": "lucide"
 }

electron-builder-macx64.yml

@@ -10,7 +10,7 @@ files:
   - '!electron.vite.config.{js,ts,mjs,cjs}'
   - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
   - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
-  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+  - '!{tsconfig.json,tsconfig.node.json,tsconfig.app.json}'
   - '!keys/*'
   - '!scripts/*'
   - '!.github/*'

electron-builder.yml

@@ -13,7 +13,7 @@ files:
   - '!electron.vite.config.{js,ts,mjs,cjs}'
   - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
   - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
-  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+  - '!{tsconfig.json,tsconfig.node.json,tsconfig.app.json}'
   - '!electron-builder.yml'
   - '!electron-builder-macx64.yml'
   - '!test/*'

electron.vite.config.ts

@@ -1,12 +1,12 @@
 import { resolve } from 'path'
 import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
 import vue from '@vitejs/plugin-vue'
-import autoprefixer from 'autoprefixer'
-import tailwind from 'tailwindcss'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import svgLoader from 'vite-svg-loader'
 import monacoEditorPlugin from 'vite-plugin-monaco-editor-esm'
 import path from 'node:path'
+import tailwindcss from '@tailwindcss/vite'
+
 
 export default defineConfig({
   main: {
@@ -23,7 +23,7 @@ export default defineConfig({
     },
     build: {
       rollupOptions: {
-        external: ['sharp','@duckdb/node-api'],
+        external: ['sharp', '@duckdb/node-api'],
         output: {
           inlineDynamicImports: true,
           manualChunks: undefined,  // Disable automatic chunk splitting
@@ -48,6 +48,11 @@ export default defineConfig({
     }
   },
   renderer: {
+    define: {
+      'import.meta.env.VITE_ENABLE_PLAYGROUND': JSON.stringify(
+        process.env.VITE_ENABLE_PLAYGROUND ?? 'false'
+      )
+    },
     optimizeDeps: {
       include: [
         'monaco-editor',
@@ -59,19 +64,15 @@ export default defineConfig({
         '@': resolve('src/renderer/src'),
         '@shell': resolve('src/renderer/shell'),
         '@shared': resolve('src/shared'),
+        "@shadcn": resolve('src/shadcn'),
         vue: 'vue/dist/vue.esm-bundler.js'
       }
     },
-    css: {
-      postcss: {
-        // @ts-ignore
-        plugins: [tailwind(), autoprefixer()]
-      }
-    },
     server: {
       host: '0.0.0.0' // 防止代理干扰，导致vite-electron之间ws://localhost:5713和http://localhost:5713通信失败、页面组件无法加载
     },
     plugins: [
+      tailwindcss(),
       monacoEditorPlugin({
         languageWorkers: ['editorWorkerService', 'typescript', 'css', 'html', 'json'],
         customDistPath(_root, buildOutDir, _base) {
@@ -80,10 +81,7 @@ export default defineConfig({
       }),
       vue(),
       svgLoader(),
-      vueDevTools({
-        // use export LAUNCH_EDITOR=cursor instead
-        // launchEditor: 'cursor'
-      })
+      vueDevTools()
     ],
     build: {
       minify: 'esbuild',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "DeepChat",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "DeepChat，一个简单易用的AI客户端",
   "main": "./out/main/index.js",
   "author": "ThinkInAIXYZ",
@@ -22,10 +22,10 @@
     "format": "prettier --write .",
     "lint": "npx -y oxlint .",
     "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
-    "typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
+    "typecheck:web": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "typecheck": "pnpm run typecheck:node && pnpm run typecheck:web",
     "start": "electron-vite preview",
-    "dev": "electron-vite dev --watch",
+    "dev": "VITE_ENABLE_PLAYGROUND=true electron-vite dev --watch",
     "dev:inspect": "electron-vite dev --watch --inspect=9229",
     "dev:linux": "electron-vite dev --watch --noSandbox",
     "build": "pnpm run typecheck && electron-vite build",
@@ -53,7 +53,8 @@
     "i18n": "i18n-check -s zh-CN -f i18next --locales src/renderer/src/i18n",
     "i18n:en": "i18n-check -s en-US -f i18next --locales src/renderer/src/i18n",
     "i18n:types": "node scripts/generate-i18n-types.js",
-    "cleanRuntime": "rm -rf runtime/uv runtime/bun runtime/node"
+    "cleanRuntime": "rm -rf runtime/uv runtime/bun runtime/node",
+    "update-shadcn": "node scripts/update-shadcn.js"
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.53.0",
@@ -102,10 +103,11 @@
     "@iconify-json/lucide": "^1.2.66",
     "@iconify-json/vscode-icons": "^1.2.30",
     "@iconify/vue": "^5.0.0",
+    "@internationalized/date": "^3.9.0",
     "@lingual/i18n-check": "^0.8.6",
     "@radix-icons/vue": "^1.0.0",
-    "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.1.12",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.13",
     "@tiptap/core": "^2.11.7",
     "@tiptap/extension-code-block": "^2.11.9",
     "@tiptap/extension-document": "^2.11.7",
@@ -129,26 +131,28 @@
     "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "electron": "^37.3.0",
+    "electron": "^37.6.0",
     "electron-builder": "26.0.12",
     "electron-vite": "^4.0.0",
     "jsdom": "^26.1.0",
     "katex": "^0.16.22",
     "lint-staged": "^16.1.6",
-    "lucide-vue-next": "^0.511.0",
+    "lucide-vue-next": "^0.544.0",
     "mermaid": "^11.10.1",
     "minimatch": "^10.0.3",
     "monaco-editor": "^0.52.2",
     "picocolors": "^1.1.1",
     "pinia": "^3.0.3",
     "prettier": "^3.5.3",
     "radix-vue": "^1.9.17",
+    "reka-ui": "^2.5.0",
     "simple-git-hooks": "^2.13.1",
     "tailwind-merge": "^3.3.1",
-    "tailwind-scrollbar-hide": "^2.0.0",
-    "tailwindcss": "3.4.17",
+    "tailwind-scrollbar-hide": "^4.0.0",
+    "tailwindcss": "^4.1.13",
     "tailwindcss-animate": "^1.0.7",
     "tippy.js": "^6.3.7",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.8.3",
     "vite": "7.1.5",
     "vite-plugin-monaco-editor-esm": "^2.0.2",
@@ -159,11 +163,17 @@
     "vue-i18n": "^11.1.11",
     "vue-renderer-markdown": "0.0.54-beta.8",
     "vue-router": "4",
+    "vue-sonner": "^2.0.8",
     "vue-tsc": "^2.2.12",
     "vue-use-monaco": "^0.0.33",
     "vue-virtual-scroller": "^2.0.0-beta.8",
     "vuedraggable": "^4.1.0",
     "yaml": "^2.8.1",
+    "@tanstack/vue-table": "^8.21.3",
+    "@vee-validate/zod": "^4.15.1",
+    "embla-carousel-vue": "^8.6.0",
+    "vaul-vue": "^0.4.1",
+    "vee-validate": "^4.15.1",
     "zod-to-json-schema": "^3.24.6"
   },
   "simple-git-hooks": {
@@ -194,4 +204,4 @@
       "vue-demi"
     ]
   }
-}
+}

scripts/update-shadcn.js

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+
+import { execSync } from 'child_process'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const projectRoot = join(__dirname, '..')
+
+// 这里放你要维护的shadcn组件列表
+const components = [
+  "accordion",
+  "alert",
+  "alert-dialog",
+  "aspect-ratio",
+  "avatar",
+  "badge",
+  "breadcrumb",
+  "button",
+  "card",
+  "checkbox",
+  "collapsible",
+  "context-menu",
+  "dialog",
+  "dropdown-menu",
+  "hover-card",
+  "input",
+  "label",
+  "menubar",
+  "navigation-menu",
+  "popover",
+  "progress",
+  "radio-group",
+  "select",
+  "separator",
+  "sheet",
+  "sidebar",
+  "skeleton",
+  "switch",
+  "tabs",
+  "textarea",
+  "tooltip",
+  "toggle",
+  'sonner',
+  'table',
+  'form',
+  'calendar',
+  'drawer',
+  'combobox',
+  'slider',
+  'scroll-area'
+]
+
+// 批量更新组件
+function updateComponents() {
+  if (components.length === 0) {
+    console.log('组件列表为空，请在脚本中配置组件')
+    return
+  }
+
+  console.log(`正在更新 ${components.length} 个组件: ${components.join(', ')}`)
+
+  try {
+    const command = `cd "${projectRoot}" && pnpm dlx shadcn-vue@latest add ${components.join(' ')} -o`
+    execSync(command, { stdio: 'inherit' })
+    console.log('组件更新完成 ✓')
+  } catch (error) {
+    console.error('更新组件时出错:', error.message)
+  }
+}
+
+// 执行更新
+updateComponents()

src/renderer/shell/App.vue

@@ -29,6 +29,6 @@ onMounted(() => {
 <style>
 html,
 body {
-  @apply bg-transparent;
+  background-color: transparent;
 }
 </style>