fix: use module css in message module

apps/ui/.npmrc

@@ -0,0 +1,3 @@
+//npm.xiongxiao.me/:_authToken=${ME_NPM_TOKEN}
+@abearxiong:registry=https://npm.pkg.github.com
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

apps/ui/config/rollup.components.config.js

@@ -5,11 +5,12 @@ import postcss from 'rollup-plugin-postcss';
 import autoprefixer from 'autoprefixer';
 import cssnano from 'cssnano';
 import terser from '@rollup/plugin-terser';
-
 import postcssImport from 'postcss-import';
+import postcssNesting from 'postcss-nesting';
+
 import dts from 'rollup-plugin-dts';
 
-import * as glob from 'glob';
+import glob from 'fast-glob';
 import path from 'path';
 const isApps = process.env.TYPE === 'apps';
 const components = glob.sync('./src/components/**/index.ts');
@@ -38,6 +39,19 @@ const configs = entrys
           browser: true, // 处理浏览器版本的依赖
         }),
         commonjs(),
+        postcss({
+          inject: true, // 将 CSS 作为 <style> 标签插入
+          minimize: true, // 压缩 CSS
+          extract: false, // 将 CSS 写入文件
+          sourceMap: false, // 可选，是否生成 source map
+          modules: true, // 可选，启用 CSS Modules
+          plugins: [
+            postcssNesting(), //
+            postcssImport(),
+            autoprefixer(),
+            // cssnano(),
+          ],
+        }),
         typescript({
           tsconfig: './tsconfig.json',
           compilerOptions: {
@@ -46,7 +60,7 @@ const configs = entrys
             // outDir: './types', //
           },
         }), // 添加 TypeScript 插件
-        // terser(), // 压缩输出的 ES Module 文件
+        terser(), // 压缩输出的 ES Module 文件
       ],
     };
     const tsConfig = {
@@ -55,7 +69,14 @@ const configs = entrys
         file: path.join(output, `./${lastDirectory}.d.ts`),
         format: 'esm',
       },
-      plugins: [dts()],
+      plugins: [
+        dts({
+          compilerOptions: {
+            skipLibCheck: true,
+          },
+          exclude: ['**/*.css'],
+        }),
+      ],
     };
     return [buildConfig, tsConfig];
   })

apps/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kevisual/system-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
   "main": "dist/index.js",
   "privite": false,
@@ -23,9 +23,7 @@
   "license": "MIT",
   "dependencies": {
     "dayjs": "^1.11.13",
-    "glob": "^11.0.0",
     "lodash-es": "^4.17.21",
-    "rollup-plugin-dts": "^6.1.1",
     "style-to-object": "^1.0.8"
   },
   "devDependencies": {
@@ -40,10 +38,13 @@
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
     "cssnano": "^7.0.6",
+    "fast-glob": "^3.3.2",
     "immer": "^10.1.1",
     "nanoid": "^5.0.7",
     "postcss-import": "^16.1.0",
+    "postcss-nesting": "^13.0.1",
     "rollup": "^4.22.2",
+    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "ts-lib": "^0.0.5",
     "typescript": "^5.6.2",

apps/ui/rollup.config.js

@@ -27,6 +27,14 @@ const configs = entrys
           browser: true, // 处理浏览器版本的依赖
         }),
         commonjs(),
+        postcss({
+          // extract: true,
+          extract: true,
+          plugins: [
+            postcssImport(), // 处理 @import 语句
+            autoprefixer(),
+          ],
+        }),
         typescript({
           tsconfig: './tsconfig.json',
           compilerOptions: {
@@ -45,7 +53,14 @@ const configs = entrys
         file: `./dist/${entry}.d.ts`,
         format: 'esm',
       },
-      plugins: [dts()],
+      plugins: [
+        dts({
+          compilerOptions: {
+            skipLibCheck: true,
+          },
+          exclude: ['**/*.css'],
+        }),
+      ],
     };
     return [buildConfig, dtsConfig];
   })

apps/ui/src/components/message/message.css

@@ -0,0 +1,158 @@
+.message-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.message-container :global(.message-wrapper) {
+  display: flex;
+  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* 缩小并淡出 */
+}
+.message-container :global(.message-wrapper:first-child) {
+  margin-top: 20px;
+}
+.message-container :global(.message) {
+  display: flex;
+  gap: 10px;
+  padding: 4px 10px;
+  margin: 0 auto;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  justify-content: center;
+  align-items: center;
+  animation: message-slide-down 0.3s ease-out forwards; /* 应用动画 */
+}
+/* 添加消失类时 */
+.message-container :global(.message-wrapper.message-hide) {
+  transform: scale(0);
+  opacity: 0;
+  pointer-events: none; /* 防止交互 */
+}
+
+.message-container :global(.message-icon) {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  box-sizing: border-box;
+}
+.message-container :global(.message-icon::before) {
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: 3px;
+  width: 5px;
+  height: 10px;
+}
+.message-container :global(.icon-success) {
+  background: green; /* 背景颜色为绿色 */
+  color: white; /* 文字颜色为白色 */
+  border: 1px solid green; /* 外圆圈2 */
+  border-radius: 50%; /* 使其为圆形 */
+  width: 20px;
+  height: 20px;
+  position: relative;
+  box-sizing: border-box;
+}
+.message-container :global(.icon-success::before) {
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: 3px;
+  width: 5px;
+  height: 10px;
+  border-right: 2px solid white; /* 打勾的右边部分 */
+  border-bottom: 2px solid white; /* 打勾的下边部分 */
+  transform: rotate(45deg); /* 旋转形成勾形 */
+  box-sizing: border-box;
+}
+.message-container :global(.icon-info) {
+  border: 1px solid blue; /* 外圆圈 */
+  border-radius: 50%; /* 使其为圆形 */
+  background: blue; /* 背景颜色为蓝色 */
+  width: 20px;
+  height: 20px;
+}
+.message-container :global(.icon-info::before) {
+  content: 'i';
+  position: absolute;
+  top: -2px;
+  color: white; /* 文字颜色为白色 */
+  font-weight: bold;
+  font-size: 16px;
+}
+.message-container :global(.icon-error::before),
+.message-container :global(.icon-error::after) {
+  content: '';
+  position: absolute;
+  top: 4px;
+  left: 50%;
+  width: 2px;
+  height: 10px;
+  background-color: white; /* 线条颜色为白色 */
+  transform-origin: center;
+}
+.message-container :global(.icon-error) {
+  border: 1px solid red; /* 外圆圈 */
+  border-radius: 50%; /* 使其为圆形 */
+  background: red; /* 背景颜色为红色 */
+  width: 20px;
+  height: 20px;
+}
+.message-container :global(.icon-error::before) {
+  transform: translateX(-50%) rotate(45deg); /* 旋转形成叉号的一部分 */
+}
+.message-container :global(.icon-error::after) {
+  transform: translateX(-50%) rotate(-45deg); /* 旋转形成叉号的另一部分 */
+}
+.message-container :global(.icon-warning) {
+  border: 1px solid orange; /* 外圆圈 */
+  border-radius: 50%; /* 使其为圆形 */
+  background: orange; /* 背景颜色为蓝色 */
+  width: 20px;
+  height: 20px;
+}
+.message-container :global(.icon-warning::before) {
+  content: '!';
+  position: absolute;
+  top: -2px;
+  color: white; /* 文字颜色为白色 */
+  font-weight: bold;
+  font-size: 16px;
+}
+.message-container :global(.icon-loading) {
+  width: 20px;
+  height: 20px;
+  border: 3px solid #f3f3f3; /* 边框颜色，用于加载圈的背景 */
+  border-top: 3px solid #3498db; /* 顶部边框的颜色，用于显示加载进度 */
+  border-radius: 50%; /* 圆形 */
+  animation: spin 1s linear infinite; /* 旋转动画 */
+}
+@keyframes message-slide-down {
+  0% {
+    transform: translateY(-100px); /* 从上方开始 */
+    opacity: 0; /* 从不可见状态开始 */
+  }
+  50% {
+    opacity: 0.5; /* 渐渐变为半透明 */
+  }
+  100% {
+    transform: translateY(0); /* 移动到初始位置 */
+    opacity: 1; /* 最终完全可见 */
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

apps/ui/src/components/message/message.ts

@@ -1,3 +1,5 @@
+import styels from './message.css';
+export const name = styels['message-container'];
 export class MessageContainer {
   container;
   id = 'for-message';
@@ -16,10 +18,12 @@ export class MessageContainer {
     if (!forModal) {
       forModal = document.createElement('div');
       forModal.id = id;
+      // forModal.className = 'message-container';
+      forModal.classList.add(name, 'message-container');
       // 点击穿透
       root.appendChild(forModal);
     }
-    this.initStyle();
+    // this.initStyle();
     this.container = forModal;
   }
   initStyle(force: boolean = false) {
@@ -36,7 +40,7 @@ export class MessageContainer {
     style.id = styleId;
 
     style.innerHTML = `
-      #${id} {
+      .message-container {
         position: fixed; top: 0; left: 0; z-index: 1000; width: 100vw;height: 100vh;pointer-events: none; display: flex; flex-direction: column; gap: 10px;
       }
       .message-wrapper {
@@ -265,7 +269,7 @@ export class Message {
       onClose && onClose();
     };
     controller.container.appendChild(div);
-    controller.initStyle(true);
+    // controller.initStyle(true);
     if (timeout === 0) {
       return () => {
         remove();

apps/ui/src/components/modal/modal.ts

@@ -3,6 +3,8 @@ import { generateId } from '../../utils/nanoid';
 import { modalStore } from './store';
 import { InitModalEvent } from './event';
 import { ObjCss } from '../../utils/css';
+// import './index.css'
+
 export type KV = {
   [key: string]: any;
 };

apps/ui/tsconfig.json

@@ -11,10 +11,11 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "outDir": "./dist",
-    "rootDir": "./src"
+    "rootDir": "./src",
   },
   "include": [
-    "src"
+    "src",
+    "typings.d.ts"
   ],
   "exclude": [
     "node_modules",

apps/ui/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}