From 4c016e2693c44fb29ac8d15676cd880ca9a77abd Mon Sep 17 00:00:00 2001
From: xion <xiongxiao1012@outlook.com>
Date: Tue, 26 Nov 2024 12:20:14 +0800
Subject: [PATCH] fix: use module css in message module

---
 apps/ui/.npmrc                             |   3 +
 apps/ui/config/rollup.components.config.js |  29 +++-
 apps/ui/package.json                       |   7 +-
 apps/ui/rollup.config.js                   |  17 ++-
 apps/ui/src/components/message/message.css | 158 +++++++++++++++++++++
 apps/ui/src/components/message/message.ts  |  10 +-
 apps/ui/src/components/modal/modal.ts      |   2 +
 apps/ui/tsconfig.json                      |   5 +-
 apps/ui/typings.d.ts                       |   4 +
 pnpm-lock.yaml                             |  48 +++++++
 10 files changed, 270 insertions(+), 13 deletions(-)
 create mode 100644 apps/ui/.npmrc
 create mode 100644 apps/ui/src/components/message/message.css
 create mode 100644 apps/ui/typings.d.ts

diff --git a/apps/ui/.npmrc b/apps/ui/.npmrc
new file mode 100644
index 0000000..a4d9caf
--- /dev/null
+++ b/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}
\ No newline at end of file
diff --git a/apps/ui/config/rollup.components.config.js b/apps/ui/config/rollup.components.config.js
index 7517931..e024132 100644
--- a/apps/ui/config/rollup.components.config.js
+++ b/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];
   })
diff --git a/apps/ui/package.json b/apps/ui/package.json
index ed51033..db6a4a0 100644
--- a/apps/ui/package.json
+++ b/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",
diff --git a/apps/ui/rollup.config.js b/apps/ui/rollup.config.js
index 4765fa6..8b0ed66 100644
--- a/apps/ui/rollup.config.js
+++ b/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];
   })
diff --git a/apps/ui/src/components/message/message.css b/apps/ui/src/components/message/message.css
new file mode 100644
index 0000000..c9bec18
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/apps/ui/src/components/message/message.ts b/apps/ui/src/components/message/message.ts
index e1da26c..1313d92 100644
--- a/apps/ui/src/components/message/message.ts
+++ b/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();
diff --git a/apps/ui/src/components/modal/modal.ts b/apps/ui/src/components/modal/modal.ts
index 19bc627..5d80ef1 100644
--- a/apps/ui/src/components/modal/modal.ts
+++ b/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;
 };
diff --git a/apps/ui/tsconfig.json b/apps/ui/tsconfig.json
index cea3ee7..97c2e99 100644
--- a/apps/ui/tsconfig.json
+++ b/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",
diff --git a/apps/ui/typings.d.ts b/apps/ui/typings.d.ts
new file mode 100644
index 0000000..d535de2
--- /dev/null
+++ b/apps/ui/typings.d.ts
@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8f10780..419e027 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -129,6 +129,9 @@ importers:
       cssnano:
         specifier: ^7.0.6
         version: 7.0.6(postcss@8.4.47)
+      fast-glob:
+        specifier: ^3.3.2
+        version: 3.3.2
       immer:
         specifier: ^10.1.1
         version: 10.1.1
@@ -138,6 +141,9 @@ importers:
       postcss-import:
         specifier: ^16.1.0
         version: 16.1.0(postcss@8.4.47)
+      postcss-nesting:
+        specifier: ^13.0.1
+        version: 13.0.1(postcss@8.4.47)
       rollup:
         specifier: ^4.22.2
         version: 4.24.0
@@ -402,6 +408,18 @@ packages:
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
+  '@csstools/selector-resolve-nested@3.0.0':
+    resolution: {integrity: sha512-ZoK24Yku6VJU1gS79a5PFmC8yn3wIapiKmPgun0hZgEI5AOqgH2kiPRsPz1qkGv4HL+wuDLH83yQyk6inMYrJQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+
+  '@csstools/selector-specificity@5.0.0':
+    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+
   '@emotion/hash@0.9.2':
     resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
 
@@ -3336,6 +3354,12 @@ packages:
     peerDependencies:
       postcss: ^8.2.14
 
+  postcss-nesting@13.0.1:
+    resolution: {integrity: sha512-VbqqHkOBOt4Uu3G8Dm8n6lU5+9cJFxiuty9+4rcoyRPO9zZS1JIs6td49VIoix3qYqELHlJIn46Oih9SAKo+yQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
   postcss-normalize-charset@5.1.0:
     resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -3484,6 +3508,10 @@ packages:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
 
+  postcss-selector-parser@7.0.0:
+    resolution: {integrity: sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==}
+    engines: {node: '>=4'}
+
   postcss-svgo@5.1.0:
     resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -4374,6 +4402,14 @@ snapshots:
       - '@chromatic-com/playwright'
       - react
 
+  '@csstools/selector-resolve-nested@3.0.0(postcss-selector-parser@7.0.0)':
+    dependencies:
+      postcss-selector-parser: 7.0.0
+
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.0.0)':
+    dependencies:
+      postcss-selector-parser: 7.0.0
+
   '@emotion/hash@0.9.2': {}
 
   '@emotion/memoize@0.9.0': {}
@@ -7479,6 +7515,13 @@ snapshots:
       postcss: 8.4.47
       postcss-selector-parser: 6.1.2
 
+  postcss-nesting@13.0.1(postcss@8.4.47):
+    dependencies:
+      '@csstools/selector-resolve-nested': 3.0.0(postcss-selector-parser@7.0.0)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.0.0)
+      postcss: 8.4.47
+      postcss-selector-parser: 7.0.0
+
   postcss-normalize-charset@5.1.0(postcss@8.4.47):
     dependencies:
       postcss: 8.4.47
@@ -7609,6 +7652,11 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  postcss-selector-parser@7.0.0:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-svgo@5.1.0(postcss@8.4.47):
     dependencies:
       postcss: 8.4.47