fix: use module css in message module
This commit is contained in:
parent
5ed479e74f
commit
4c016e2693
3
apps/ui/.npmrc
Normal file
3
apps/ui/.npmrc
Normal file
@ -0,0 +1,3 @@
|
||||
//npm.xiongxiao.me/:_authToken=${ME_NPM_TOKEN}
|
||||
@abearxiong:registry=https://npm.pkg.github.com
|
||||
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
|
@ -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];
|
||||
})
|
||||
|
@ -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",
|
||||
|
@ -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];
|
||||
})
|
||||
|
158
apps/ui/src/components/message/message.css
Normal file
158
apps/ui/src/components/message/message.css
Normal file
@ -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);
|
||||
}
|
||||
}
|
@ -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();
|
||||
|
@ -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;
|
||||
};
|
||||
|
@ -11,10 +11,11 @@
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src"
|
||||
"rootDir": "./src",
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
"src",
|
||||
"typings.d.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
|
4
apps/ui/typings.d.ts
vendored
Normal file
4
apps/ui/typings.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
declare module '*.css' {
|
||||
const content: { [className: string]: string };
|
||||
export default content;
|
||||
}
|
48
pnpm-lock.yaml
generated
48
pnpm-lock.yaml
generated
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user