kevisual/system-apps
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use module css in message module

Browse Source
This commit is contained in:
xion 2024-11-26 12:20:14 +08:00
parent 5ed479e74f
commit 4c016e2693
10 changed files with 270 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/ui/.npmrc Normal file
View 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}

29
apps/ui/config/rollup.components.config.js
View File

@ -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];
})

7
apps/ui/package.json
View File

@ -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",

17
apps/ui/rollup.config.js
View File

@ -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
View 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);
}
}

10
apps/ui/src/components/message/message.ts
View File

@ -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();

2
apps/ui/src/components/modal/modal.ts
View File

@ -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;
};

5
apps/ui/tsconfig.json
View File

@ -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
View File

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

48
pnpm-lock.yaml generated
View File

@ -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