no message

web3/apps/web/package.json

@@ -10,7 +10,10 @@
   },
   "dependencies": {
     "@mind-map/component": "workspace:*",
+    "autoprefixer": "^10.4.14",
     "pinia": "^2.1.6",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.3",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },

web3/apps/web/src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <h1 class="title">思维导图演示</h1>
+    <h1 class="title flex">思维导图演示</h1>
     <div class="mind-map-container">
       <MindMap />
     </div>

web3/apps/web/vite.config.ts

@@ -4,6 +4,7 @@ import { resolve } from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  root: __dirname,       
   plugins: [vue()],
   resolve: {
     alias: {

web3/packages/mind-map/package.json

@@ -11,10 +11,8 @@
   "dependencies": {
     "vue": "^3.3.4"
   },
-
   "main": "src/index.ts",
   "module": "src/index.ts",
-
   "exports": {
     ".": {
       "types": "./src/index.ts",

web3/packages/mind-map/postcss.config.ts

@@ -1,15 +1,10 @@
-import config from '.';
+import tailwindConfig from './tailwind.config';
 
 export default {
   plugins: {
     ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
-    // Specifying the config is not necessary in most cases, but it is included
     autoprefixer: {},
-    // 修复 element-plus 和 ant-design-vue 的样式和tailwindcss冲突问题
-    'postcss-antd-fixes': { prefixes: ['ant', 'el'] },
-    'postcss-import': {},
-    'postcss-preset-env': {},
-    tailwindcss: { config },
+    tailwindcss: { config: tailwindConfig },
     'tailwindcss/nesting': {},
   },
 };

web3/packages/mind-map/src/styles/index.css

@@ -1,3 +1,164 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+*{
+    
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before {
+    @apply border-border;
+
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  html {
+    @apply text-foreground bg-background font-sans text-[100%];
+
+    font-variation-settings: normal;
+    line-height: 1.15;
+    text-size-adjust: 100%;
+    font-synthesis-weight: none;
+    scroll-behavior: smooth;
+    text-rendering: optimizelegibility;
+    -webkit-tap-highlight-color: transparent;
+
+    /* -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; */
+  }
+
+  #app,
+  body,
+  html {
+    @apply size-full;
+
+    /* scrollbar-gutter: stable; */
+  }
+
+  body {
+    min-height: 100vh;
+
+    /* pointer-events: auto !important; */
+
+    /* overflow: overlay; */
+
+    /* -webkit-font-smoothing: antialiased; */
+
+    /* -moz-osx-font-smoothing: grayscale; */
+  }
+
+  a,
+  a:active,
+  a:hover,
+  a:link,
+  a:visited {
+    @apply no-underline;
+  }
+
+  ::view-transition-new(root),
+  ::view-transition-old(root) {
+    @apply animate-none mix-blend-normal;
+  }
+
+  ::view-transition-old(root) {
+    @apply z-[1];
+  }
+
+  ::view-transition-new(root) {
+    @apply z-[2147483646];
+  }
+
+  html.dark::view-transition-old(root) {
+    @apply z-[2147483646];
+  }
+
+  html.dark::view-transition-new(root) {
+    @apply z-[1];
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    @apply opacity-100;
+  }
+
+  /* input:-webkit-autofill {
+    @apply border-none;
+
+    box-shadow: 0 0 0 1000px transparent inset;
+  } */
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    @apply m-0 appearance-none;
+  }
+
+  /* 只有非mac下才进行调整，mac下使用默认滚动条 */
+  html:not([data-platform='macOs']) {
+    ::-webkit-scrollbar {
+      @apply h-[10px] w-[10px];
+    }
+
+    ::-webkit-scrollbar-thumb {
+      @apply bg-border rounded-sm border-none;
+    }
+
+    ::-webkit-scrollbar-track {
+      @apply rounded-sm border-none bg-transparent shadow-none;
+    }
+
+    ::-webkit-scrollbar-button {
+      @apply hidden;
+    }
+  }
+}
+
+@layer components {
+  .flex-center {
+    @apply flex items-center justify-center;
+  }
+
+  .flex-col-center {
+    @apply flex flex-col items-center justify-center;
+  }
+
+  .outline-box {
+    @apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1;
+  }
+
+  .outline-box::after {
+    @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[""];
+  }
+
+  .outline-box.outline-box-active {
+    @apply outline-primary outline outline-2;
+  }
+
+  .outline-box.outline-box-active::after {
+    display: none;
+  }
+
+  .outline-box:not(.outline-box-active):hover::after {
+    @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100;
+  }
+
+  .vben-link {
+    @apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer;
+  }
+
+  .card-box {
+    @apply bg-card text-card-foreground border-border rounded-xl border;
+  }
+}
+
+html.invert-mode {
+  @apply invert;
+}
+
+html.grayscale-mode {
+  @apply grayscale;
+}

web3/packages/mind-map/tailwind.config.ts

@@ -3,7 +3,7 @@ import type { Config } from 'tailwindcss'
 export default {
   content: [
     "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    "./src/**/*.{vue,js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {},

web3/packages/mind-map/vite.config.ts

@@ -10,18 +10,35 @@ export default defineConfig({
       '@': resolve(__dirname, 'src'),
     },
   },
+  css: {
+    postcss: './postcss.config.ts',
+    // 确保 CSS 被正确处理
+    preprocessorOptions: {
+      css: {
+        charset: false
+      }
+    }
+  },
   build: {
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'MindMap',
-      fileName: 'mind-map',
+      fileName: (format) => `mind-map.${format}.js`,
+      formats: ['es', 'umd', 'cjs'],
     },
+    cssCodeSplit: true,
+    sourcemap: true,
     rollupOptions: {
       external: ['vue'],
       output: {
         globals: {
           vue: 'Vue',
         },
+        exports: 'named',
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === 'style.css') return 'mind-map.css';
+          return assetInfo.name;
+        },
       },
     },
   },

web3/pnpm-lock.yaml

@@ -11,9 +11,18 @@ importers:
       '@mind-map/component':
         specifier: workspace:*
         version: link:../../packages/mind-map
+      autoprefixer:
+        specifier: ^10.4.14
+        version: 10.4.21(postcss@8.5.3)
       pinia:
         specifier: ^2.1.6
         version: 2.3.1(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
+      postcss:
+        specifier: ^8.4.27
+        version: 8.5.3
+      tailwindcss:
+        specifier: ^3.3.3
+        version: 3.4.17
       vue:
         specifier: ^3.3.4
         version: 3.5.13(typescript@5.8.3)