update

packages/frontend/package.json

@@ -2,34 +2,37 @@
    "name": "@nexus-terminal/frontend",
    "version": "0.1.0",
    "private": true,
+   "type": "module",
    "scripts": {
-     "dev": "vite",
-     "build": "vue-tsc --noEmit && vite build",
-     "preview": "vite preview"
+      "dev": "vite",
+      "build": "vue-tsc --noEmit && vite build",
+      "preview": "vite preview"
    },
    "dependencies": {
-     "@fortawesome/fontawesome-free": "^6.7.2",
-     "@simplewebauthn/browser": "^13.1.0",
-     "@xterm/addon-search": "^0.15.0",
-     "axios": "^1.8.4",
-     "monaco-editor": "^0.52.2",
-     "pinia": "^3.0.2",
-     "pinia-plugin-persistedstate": "^4.2.0",
-     "splitpanes": "^4.0.3",
-     "vite-plugin-monaco-editor": "^1.1.0",
-     "vue": "^3.3.0",
-     "vue-i18n": "^9.14.4",
-     "vue-router": "^4.5.0",
-     "vuedraggable": "^4.1.0",
-     "xterm": "^5.3.0",
-     "xterm-addon-fit": "^0.8.0",
-     "xterm-addon-web-links": "^0.9.0"
+      "@fortawesome/fontawesome-free": "^6.7.2",
+      "@simplewebauthn/browser": "^13.1.0",
+      "@tailwindcss/vite": "^4.1.4",
+      "@xterm/addon-search": "^0.15.0",
+      "axios": "^1.8.4",
+      "monaco-editor": "^0.52.2",
+      "pinia": "^3.0.2",
+      "pinia-plugin-persistedstate": "^4.2.0",
+      "splitpanes": "^4.0.3",
+      "tailwindcss": "^4.1.4",
+      "vite-plugin-monaco-editor": "^1.1.0",
+      "vue": "^3.3.0",
+      "vue-i18n": "^9.14.4",
+      "vue-router": "^4.5.0",
+      "vuedraggable": "^4.1.0",
+      "xterm": "^5.3.0",
+      "xterm-addon-fit": "^0.8.0",
+      "xterm-addon-web-links": "^0.9.0"
    },
    "devDependencies": {
-     "@types/splitpanes": "^2.2.6",
-     "@vitejs/plugin-vue": "^4.2.0",
-     "typescript": "^5.0.0",
-     "vite": "^4.4.0",
-     "vue-tsc": "^2.2.8"
+      "@types/splitpanes": "^2.2.6",
+      "@vitejs/plugin-vue": "^4.2.0",
+      "typescript": "^5.0.0",
+      "vite": "^5.2.0",
+      "vue-tsc": "^2.2.8"
    }
- }
+}

packages/frontend/src/App.vue

@@ -242,6 +242,17 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
 </script>
 
 <template>
+    <div class="bg-gray-100 flex items-center justify-center min-h-screen">
+    <div class="bg-white rounded-lg shadow-lg p-8 max-w-sm w-full">
+      <h2 class="text-2xl font-bold mb-4 text-gray-800">欢迎使用 Tailwind CSS (Vite + Vue)</h2>
+      <p class="text-gray-600 mb-6">这是一个使用 Tailwind CSS 构建的简单卡片示例。</p>
+      <div class="flex justify-end">
+        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+          了解更多
+        </button>
+      </div>
+    </div>
+  </div>
   <div id="app-container">
     <!-- *** 修改 v-if 条件以使用 isHeaderVisible *** -->
     <header v-if="!isWorkspaceRoute || isHeaderVisible">

packages/frontend/src/style.css

@@ -1,4 +1,4 @@
-
+@import "tailwindcss";
 /* 全局样式和 CSS 变量定义 */
 :root {
   /* 基础颜色 */

packages/frontend/vite.config.ts

@@ -1,13 +1,14 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import monacoEditorPlugin from 'vite-plugin-monaco-editor';
-
+import tailwindcss from '@tailwindcss/vite'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    tailwindcss(),
     // @ts-ignore because the plugin type might not perfectly match Vite's expected PluginOption type
-    monacoEditorPlugin({})
+    (monacoEditorPlugin as any).default({})
   ],
   server: {
     proxy: {