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

暂存

Browse Source
This commit is contained in:
xion 2024-11-01 23:53:45 +08:00
parent e4fe97f5e5
commit 673a982014
26 changed files with 2639 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/ui/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
dist

10
apps/ui/deploy/message.js
View File

@ -256,19 +256,19 @@ export class Message {
remove();
};
};
success = (message, timeout = 1000, onClose) => {
success = (message, timeout = 1000, onClose = () => {}) => {
return this.open(message, timeout, onClose, { type: 'success' });
};
info = (message, timeout = 1500, onClose) => {
info = (message, timeout = 1500, onClose = () => {}) => {
return this.open(message, timeout, onClose, { type: 'info' });
};
warning = (message, timeout = 3000, onClose) => {
warning = (message, timeout = 3000, onClose = () => {}) => {
return this.open(message, timeout, onClose, { type: 'warning' });
};
error = (message, timeout = 3000, onClose) => {
error = (message, timeout = 3000, onClose = () => {}) => {
return this.open(message, timeout, onClose, { type: 'error' });
};
loading = (message, timeout = 0, onClose) => {
loading = (message, timeout = 0, onClose = () => {}) => {
return this.open(message, timeout, onClose, { type: 'loading' });
};
}

15
apps/ui/index.html
View File

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./deploy/me.js"></script>
</body>
</html>

50
apps/ui/package.json
View File

@ -1,13 +1,51 @@
{
"name": "ui",
"version": "1.0.0",
"name": "@kevisual/system-ui",
"version": "0.0.1",
"description": "",
"main": "index.js",
"main": "dist/index.js",
"privite": false,
"type": "module",
"scripts": {
"dev": "rollup -c -w",
"build": "npm run clean && rollup -c",
"pub": "envision switchOrg system && envision deploy ./deploy -v 0.0.1 -k ui -y y",
"dev": "vite"
"clean": "rimraf dist"
},
"files": [
"dist",
"src",
"components"
],
"keywords": [],
"author": "",
"license": "ISC"
"author": "abearxiong",
"license": "MIT",
"dependencies": {
"dayjs": "^1.11.13",
"lodash-es": "^4.17.21",
"style-to-object": "^1.0.8"
},
"devDependencies": {
"@emotion/serialize": "^1.3.1",
"@rollup/plugin-commonjs": "^28.0.1",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "^11.1.6",
"@types/postcss-import": "^14.0.3",
"@types/react": "^18.3.8",
"autoprefixer": "^10.4.20",
"cross-env": "^7.0.3",
"cssnano": "^7.0.6",
"immer": "^10.1.1",
"nanoid": "^5.0.7",
"postcss-import": "^16.1.0",
"rollup": "^4.22.2",
"rollup-plugin-postcss": "^4.0.2",
"ts-lib": "^0.0.5",
"typescript": "^5.6.2",
"zustand": "5.0.0-rc.2"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/",
"access": "public"
}
}

60
apps/ui/rollup.config.js Normal file
View File

@ -0,0 +1,60 @@
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import commonjs from '@rollup/plugin-commonjs';
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';
const isApps = process.env.TYPE === 'apps';
const entrys = ['index'];
/**
* @type {import('rollup').RollupOptions[]}
*/
const configs = entrys.map((entry) => ({
input: `./src/${entry}.ts`, // 修改输入文件为 TypeScript 文件
output: {
file: `./dist/${entry}.js`,
// dir: 'dist',
format: 'es', // 输出格式为 ES Module
},
plugins: [
resolve({
browser: true, // 处理浏览器版本的依赖
}),
commonjs(),
typescript({
tsconfig: './tsconfig.json',
compilerOptions: {
declaration: !isApps, // 生成声明文件
declarationDir: './dist', // 声明文件输出目录
// outDir: './types', //
},
}), // 添加 TypeScript 插件
terser(), // 压缩输出的 ES Module 文件
],
}));
const entryCss = ['index'];
const configsCss = entryCss.map((entry) => ({
input: `./src/${entry}.css`, // 修改输入文件为 TypeScript 文件
output: {
file: `./dist/${entry}.css`,
},
include: ['src/**/*.css'],
plugins: [
// resolve(),
postcss({
// extract: true,
extract: true,
plugins: [
postcssImport(), // 处理 @import 语句
autoprefixer(),
],
}),
],
}));
export default [...configs, ...configsCss];

1
apps/ui/src/components/message/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './message';

277
apps/ui/src/components/message/message.ts Normal file
View File

@ -0,0 +1,277 @@
export class MessageContainer {
container;
id = 'for-message';
root = document.body;
constructor(opts?: any) {
const { id } = opts || {};
if (id) {
this.id = id;
}
this.initContainer();
}
initContainer() {
const id = this.id;
const root = this.root;
let forModal = document.querySelector('#' + id);
if (!forModal) {
forModal = document.createElement('div');
forModal.id = id;
// 点击穿透
root.appendChild(forModal);
}
this.initStyle();
this.container = forModal;
}
initStyle(force: boolean = false) {
const id = this.id;
const styleId = id + '-style';
const _style = document.querySelector('#' + styleId);
if (force && _style) {
_style.remove();
}
if (!force && _style) {
return;
}
const style = document.createElement('style');
style.id = styleId;
style.innerHTML = `
#${id} {
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 {
display: flex;
transition: transform 2s ease-in-out, opacity 1.2s ease-in-out; /* 缩小并淡出 */
}
.message-wrapper:first-child {
margin-top: 20px;
}
.message {
display: flex;
gap: 10px;
padding: 6px 10px;
margin: 0 auto;
border-radius: 4px;
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-item: center;
animation: message-slide-down 0.3s ease-out forwards; /* 应用动画 */
}
/* 添加消失类时 */
.message-wrapper.message-hide {
transform: scale(0);
opacity: 0;
pointer-events: none; /* 防止交互 */
}
.message-success {
}
@keyframes message-slide-down {
0% {
transform: translateY(-100px); /* 从上方开始 */
opacity: 0; /* 从不可见状态开始 */
}
50% {
opacity: 0.5; /* 渐渐变为半透明 */
}
100% {
transform: translateY(0); /* 移动到初始位置 */
opacity: 1; /* 最终完全可见 */
}
}
.message-icon {
position: relative;
width: 24px;
height: 24px;
box-sizing: border-box;
}
.message-icon::before {
content: "";
position: absolute;
left: 7px;
top: 3px;
width: 5px;
height: 10px;
}
.icon-success {
border: 2px solid green; /* 外圆圈 */
border-radius: 50%; /* 使其为圆形 */
}
.icon-success::before {
border-right: 2px solid green; /* 打勾的右边部分 */
border-bottom: 2px solid green; /* 打勾的下边部分 */
transform: rotate(45deg);
}
.icon-info {
border: 2px solid blue; /* 外圆圈 */
border-radius: 50%; /* 使其为圆形 */
}
.icon-info::before {
content: "i";
position: absolute;
top: 0px;
color: blue;
font-weight: bold;
font-size: 16px;
left: 8px;
}
.icon-error::before, .icon-error::after {
content: "";
position: absolute;
top: 4px;
left: 50%;
width: 2px;
height: 12px;
background-color: red;
transform-origin: center;
}
.icon-error {
border: 2px solid red; /* 外圆圈 */
border-radius: 50%; /* 使其为圆形 */
}
.icon-error::before {
transform: translateX(-50%) rotate(45deg); /* 旋转形成叉号的一部分 */
}
.icon-error::after {
transform: translateX(-50%) rotate(-45deg); /* 旋转形成叉号的另一部分 */
}
.icon-warning {
position: relative;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 24px solid orange; /* 三角形 */
display: inline-block;
transform: scale(0.8); /* 缩小三角形 */
}
.icon-warning::before {
content: "!";
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
color: white;
font-weight: bold;
font-size: 16px;
}
.icon-loading {
width: 24px;
height: 24px;
border: 3px solid #f3f3f3; /* 边框颜色，用于加载圈的背景 */
border-top: 3px solid #3498db; /* 顶部边框的颜色，用于显示加载进度 */
border-radius: 50%; /* 圆形 */
animation: spin 1s linear infinite; /* 旋转动画 */
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
`;
document.head.appendChild(style);
}
setRoot(root) {
if (root instanceof HTMLElement) {
this.root = root;
root.appendChild(this.container);
}
}
}
const controller = new MessageContainer();
export const createMessage = (content, opts) => {
let { icon, key, style, className, type } = opts || {};
const div = document.createElement('div');
div.className = 'message-wrapper' + (className ? ' ' + className : '');
if (style) {
div.style.cssText = style;
}
if (key) div.setAttribute('data-key', key);
const contentDiv = document.createElement('div');
contentDiv.className = 'message';
if (icon) {
const i = document.createElement('i');
i.className = icon;
i.classList.add('message-icon');
contentDiv.appendChild(i);
} else if (type) {
const i = document.createElement('div');
i.className = 'icon-' + type;
i.classList.add('message-icon');
contentDiv.appendChild(i);
}
if (content instanceof HTMLElement) {
contentDiv.appendChild(content);
} else {
const text = document.createElement('span');
text.innerText = content;
contentDiv.appendChild(text);
}
div.appendChild(contentDiv);
return div;
};
const methods = ['success', 'info', 'warning', 'error', 'loading'];
export class Message {
controller = controller;
constructor() {
this.controller = controller;
}
open = (message, timeout = 3000, onClose, opts) => {
const controller = this.controller;
const div = createMessage(message, opts);
const remove = () => {
div.classList.add('message-hide');
setTimeout(() => {
if (div?.isConnected) {
div.remove();
} else {
console.log('not connected');
controller.container.removeChild(div);
}
}, 1000);
onClose && onClose();
};
controller.container.appendChild(div);
controller.initStyle(true);
if (timeout === 0) {
return () => {
remove();
};
}
const time = setTimeout(() => {
remove();
}, timeout);
return () => {
clearTimeout(time);
remove();
};
};
success = (message: string, timeout = 1000, onClose = () => {}) => {
return this.open(message, timeout, onClose, { type: 'success' });
};
info = (message: string, timeout = 1500, onClose = () => {}) => {
return this.open(message, timeout, onClose, { type: 'info' });
};
warning = (message: string, timeout = 3000, onClose = () => {}) => {
return this.open(message, timeout, onClose, { type: 'warning' });
};
error = (message: string, timeout = 3000, onClose = () => {}) => {
return this.open(message, timeout, onClose, { type: 'error' });
};
loading = (message: string, timeout = 0, onClose = () => {}) => {
return this.open(message, timeout, onClose, { type: 'loading' });
};
}
export const message = new Message();

176
apps/ui/src/components/modal/blank-modal.ts Normal file
View File

@ -0,0 +1,176 @@
import { Modal, ModalOpts, KV } from './modal';
import { SelectEl, querySelector, elAddCS, ElStyle, elAddCS2 } from '../../utils/query-el';
import { ObjCss } from '../../utils/css';
export class BlankModal extends Modal {
constructor(opts: ModalOpts) {
super(opts);
}
}
type DialogModalOpts = {
dialogTitle?: string;
dialogTitleClassName?: string;
dialogTitleStyle?: ElStyle;
dialogTitleEl?: HTMLElement;
dialogTitleCloseIcon?: boolean;
dialogContentClassName?: string;
dialogContentStyle?: ElStyle;
dialogFooterClassName?: string;
dialogFooterStyle?: ElStyle;
} & ModalOpts<KV, DialogDefaultStyle>;
type DialogDefaultStyle = {
defaultDialogTitleStyle?: ObjCss;
defaultDialogContentStyle?: ObjCss;
defaultDialogFooterStyle?: ObjCss;
};
export class DialogModal extends Modal<DialogModalOpts, DialogDefaultStyle> {
dialogTitle?: string;
dialogTitleClassName?: string;
dialogTitleStyle?: ElStyle;
dialogTitleEl?: HTMLElement;
dialogTitleCloseIcon?: boolean;
dialogContentClassName?: string;
dialogContentStyle?: ElStyle;
dialogFooterShow?: boolean;
dialogFooterClassName?: string;
dialogFooterStyle?: ElStyle;
constructor(opts: ModalOpts<DialogModalOpts, DialogDefaultStyle>) {
super(opts);
this.dialogTitle = opts.dialogTitle;
this.dialogTitleClassName = opts.dialogTitleClassName;
this.dialogTitleStyle = opts.dialogTitleStyle;
this.dialogTitleEl = opts.dialogTitleEl;
this.dialogTitleCloseIcon = opts.dialogTitleCloseIcon;
this.dialogContentClassName = opts.dialogContentClassName;
this.dialogContentStyle = opts.dialogContentStyle;
this.dialogFooterClassName = opts.dialogFooterClassName;
this.dialogFooterStyle = opts.dialogFooterStyle;
this.dialogFooterShow = opts.dialogFooterShow ?? false;
this.setDefaultStyle('defaultContentStyle', {
position: 'absolute',
padding: '0px',
left: '50%',
top: '20%',
width: '600px',
background: '#fff',
borderRadius: '5px',
boxShadow: '0 0 10px rgba(0,0,0,.1)',
transform: 'translate(-50%, -50%)',
maxHeight: '80vh',
overflow: 'auto',
...opts?.defaultStyle?.defaultContentStyle,
});
this.setDefaultStyle('defaultDialogTitleStyle', {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
position: 'sticky',
padding: '10px 20px',
top: '0',
fontSize: '16px',
background: '#fff',
marginTop: '-10px',
borderBottom: '1px solid #f0f0f0',
marginBottom: '5px',
...opts?.defaultStyle?.defaultDialogTitleStyle,
});
this.setDefaultStyle('defaultDialogContentStyle', {
padding: '20px',
...opts?.defaultStyle?.defaultDialogContentStyle,
});
this.setDefaultStyle('defaultDialogFooterStyle', {
display: 'flex',
justifyItems: 'end',
borderTop: '1px solid #f0f0f0',
padding: '10px 20px',
...opts?.defaultStyle?.defaultDialogFooterStyle,
});
}
// static render(el: string | HTMLDivElement, id: string, opts?: DialogModalOpts): DialogModal;
// static render(el: string | HTMLDivElement, opts?: DialogModalOpts): DialogModal;
// static render(...args: any[]) {
// const [el, id, opts] = args;
// return super.render(el, id, opts);
// }
appendRoot(documentFragment: DocumentFragment): void {
const cacheFragment = document.createDocumentFragment();
// 拿出来
cacheFragment.appendChild(this.Element);
const DialogBox = documentFragment.querySelector('.ui-modal-content');
DialogBox.classList.add('ui-modal-dialog');
// 创建title
const title = document.createElement('div');
title.classList.add('ui-modal-dialog-title');
elAddCS2(title, this.dialogTitleClassName, this.dialogTitleStyle, this.defaultStyle.defaultDialogTitleStyle);
if (this.dialogTitleEl) {
title.appendChild(this.dialogTitleEl);
} else {
title.innerText = this.dialogTitle;
}
if (this.dialogTitleCloseIcon) {
const closeIcon = document.createElement('span');
closeIcon.className = 'ui-modal-dialog-close';
closeIcon.innerHTML = '&times;';
closeIcon.style.cssText = `
cursor: pointer;
font-size: 24px;
margin: -5px 10px 0 0;
`;
closeIcon.onclick = (e) => {
this.setOpen(false);
};
title.appendChild(closeIcon);
}
DialogBox.appendChild(title);
// 创建content
const content = document.createElement('div');
content.className = 'ui-modal-dialog-content';
elAddCS2(content, this.dialogContentClassName, this.dialogContentStyle, this.defaultStyle.defaultDialogContentStyle);
content.appendChild(cacheFragment);
if (this.dialogFooterShow) {
const footer = document.createElement('div');
footer.className = 'ui-modal-dialog-footer';
elAddCS2(footer, this.dialogFooterClassName, this.dialogFooterStyle, this.defaultStyle.defaultDialogFooterStyle);
DialogBox.appendChild(footer);
}
DialogBox.appendChild(content);
super.appendRoot(documentFragment);
}
renderEl(el: HTMLDivElement): this {
return super.renderEl(el);
}
renderFooter(el?: SelectEl): void {
const _el = querySelector(el);
if (!_el) return;
const footer = this.Element.querySelector('.ui-modal-dialog-footer');
if (!footer) return;
footer.innerHTML = '';
footer.appendChild(_el);
}
renerContent(el?: SelectEl): void {
const _el = querySelector(el);
if (!_el) return;
const content = this.Element.querySelector('.ui-modal-dialog-content');
if (!content) return;
content.innerHTML = '';
content.appendChild(_el);
}
}

39
apps/ui/src/components/modal/event.ts Normal file
View File

@ -0,0 +1,39 @@
import { modalStore } from './store';
// modal 事件实现
const ModalEvent = {
//
};
const onClick = (e: MouseEvent) => {
const target = e.target as HTMLElement;
if (!target) {
console.log('target is null');
return;
}
if (target.classList.contains('ui-modal-mask')) {
const modalState = modalStore.getState();
const modal = modalState.modals.find((modal) => modal.id === target.dataset.id);
if (modal && modal.open) {
modal.onMaskClose(e);
}
e.preventDefault();
return;
}
// const parentModalRoot = target.closest('.ui-modal-root');
// if (!parentModalRoot) {
// return;
// }
};
export const InitModalEvent = (el: HTMLDivElement) => {
const id = el.id;
if (ModalEvent[id] && el === ModalEvent[id]) {
return;
}
// Remove previous event listener to prevent memory leak
if (ModalEvent[id]) {
ModalEvent[id].removeEventListener('click', onClick);
}
ModalEvent[id] = null;
el.addEventListener('click', onClick);
ModalEvent[id] = el;
};

28
apps/ui/src/components/modal/index.css Normal file
View File

@ -0,0 +1,28 @@
#ui-modal-list {
position: relative;
}
.ui-modal-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 200;
}
.ui-modal-close {
display: none;
}
.ui-modal-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 201;
}
.ui-modal-content {
position: fixed;
z-index: 202;
}

5
apps/ui/src/components/modal/index.ts Normal file
View File

@ -0,0 +1,5 @@
export * from './modal';
export { modalStore } from './store';
export { BlankModal, DialogModal } from './blank-modal';

272
apps/ui/src/components/modal/modal.ts Normal file
View File

@ -0,0 +1,272 @@
import { querySelector, elAddCS, ElStyle, elAddCS2 } from '../../utils/query-el';
import { generateId } from '../../utils/nanoid';
import { modalStore } from './store';
import { InitModalEvent } from './event';
import { ObjCss } from '../../utils/css';
export type KV = {
[key: string]: any;
};
export type ModalOpts<
T = {
[key: string]: any;
},
U = {
[key: string]: any;
},
> = {
root?: HTMLDivElement | string;
id?: string;
mask?: boolean;
maskClassName?: string;
maskStyle?: ElStyle;
maskClose?: boolean;
contentClassName?: string;
contentStyle?: ElStyle;
destroyOnClose?: boolean; // 关闭，把Element移动到cacheFragment中
hideOnClose?: boolean; // 关闭后是否销毁，设置display:none
open?: boolean;
onClose?: () => void;
defaultStyle?: DefaultStyle<U>;
} & T;
export type DefaultStyle<T> = {
defaultContentStyle?: ObjCss;
defaultMaskStyle?: ObjCss;
} & T;
export class Modal<T = any, U = KV> {
static rootClassName = '#ui-modal-list';
root: HTMLDivElement;
id: string;
modalElement?: HTMLDivElement;
Element?: HTMLDivElement;
mask?: boolean;
maskClassName?: string;
maskStyle?: ElStyle;
// 点击mask是否关闭
maskClose?: boolean;
contentClassName?: string;
contentStyle?: ElStyle;
destroyOnClose?: boolean;
hideOnClose?: boolean;
open?: boolean;
isUse = true;
// 通知关闭
onClose?: (e: any) => void;
cacheFragment?: DocumentFragment;
defaultStyle?: DefaultStyle<U>;
constructor(opts: ModalOpts<T, U>) {
this.root = this.initRoot(opts.root);
InitModalEvent(this.root);
this.id = opts.id || generateId();
this.mask = opts.mask ?? true;
this.maskClassName = opts.maskClassName;
this.maskStyle = opts.maskStyle;
this.maskClose = opts.maskClose ?? true;
this.contentClassName = opts.contentClassName;
this.contentStyle = opts.contentStyle;
this.destroyOnClose = opts.destroyOnClose ?? true;
this.hideOnClose = opts.hideOnClose ?? true;
if (!this.destroyOnClose && !this.hideOnClose) {
this.destroyOnClose = true; // 必须要有一个为true
console.warn('destroyOnClose Or hideOnClose must one is true');
}
this.cacheFragment = new DocumentFragment();
this.defaultStyle = opts.defaultStyle || ({} as DefaultStyle<U>);
this.open = opts.open ?? true;
this.onClose = opts.onClose;
}
protected initRoot(root: ModalOpts['root']) {
let _root = querySelector(root);
if (!_root) {
// 查询ui-modal元素,不存在则创建一个ui-modal元素并添加到body上
const queryRoot = document.querySelector('#ui-modal-list') as HTMLDivElement;
if (queryRoot) {
_root = queryRoot;
_root.classList.add('ui-modal-root');
return _root;
}
_root = document.createElement('div');
_root.id = 'ui-modal-list';
_root.classList.add('ui-modal-root');
document.body.appendChild(_root);
return _root;
}
_root.classList.add('ui-custom-modal', 'ui-modal-root');
if (!_root.id) {
_root.id = 'ui-modal' + generateId();
}
return _root;
}
static render<T extends new (...args: any[]) => any>(this: T,el: string | HTMLDivElement, id: string, opts?: ConstructorParameters<T>[0]): InstanceType<T>;
static render<T extends new (...args: any[]) => any>(this: T,el: string | HTMLDivElement, opts?: ConstructorParameters<T>[0]): InstanceType<T>;
static render(...args: any[]) {
let [el, id, opts] = args;
const _el = querySelector(el);
if (!_el) {
console.warn('el is not exist', el);
return;
}
let _id: string = '';
if (typeof id === 'string' && id) {
// 如果id是字符串
_id = id;
} else if (typeof id === 'object') {
// 如果id是对象
_id = id.id;
opts = id;
id = id.id;
}
let _modal: Modal | undefined;
const modalState = modalStore.getState();
if (_id) {
// 如果存在id,则判断是否已经存在该id的modal
_modal = modalStore.getState().getModal(_id);
}
if (!_modal) {
// 不存在modal,则创建一个modal
// console.log('create modal', id, opts);
const newModal = new this({ id, ...opts });
_modal = newModal;
modalStore.setState({
modals: [...modalState.modals, newModal],
});
}
_modal.renderEl(_el);
return _modal;
}
static create<T extends new (...args: any[]) => any>(this:T, opts: ModalOpts):InstanceType<T> {
let _id = opts.id;
let _modal: Modal | undefined;
const modalState = modalStore.getState();
if (_id) {
// 如果存在id,则判断是否已经存在该id的modal
_modal = modalStore.getState().getModal(_id);
}
if (!_modal) {
// 不存在modal,则创建一个modal
// console.log('create modal', id, opts);
const newModal = new this({ ...opts, id: _id });
_modal = newModal;
modalStore.setState({
modals: [...modalState.modals, newModal],
});
}
return _modal as InstanceType<T>;
}
createMask() {
const mask = document.createElement('div');
mask.classList.add('ui-modal-mask');
mask.dataset.id = this.id;
elAddCS2(mask, this.maskClassName, this.maskStyle, this.defaultStyle?.defaultMaskStyle);
return mask;
}
renderEl(el: HTMLDivElement) {
const defaultContentStyle = this.defaultStyle?.defaultContentStyle || {
position: 'absolute',
padding: '20px',
left: '50%',
top: '20%',
width: '600px',
background: '#fff',
borderRadius: '5px',
boxShadow: '0 0 10px rgba(0,0,0,.1)',
transform: 'translate(-50%, -50%)',
maxHeight: '80vh',
overflow: 'auto',
};
const fragment = document.createDocumentFragment();
const _modalEl = document.createElement('div');
_modalEl.classList.add('ui-modal-wrapper');
_modalEl.id = this.id;
_modalEl.dataset.mid = this.id;
if (this.mask) {
const mask = this.createMask();
_modalEl.appendChild(mask);
}
const modalContent = document.createElement('div');
modalContent.classList.add('ui-modal-content');
elAddCS2(modalContent, this.contentClassName, this.contentStyle, defaultContentStyle);
modalContent.appendChild(el);
_modalEl.appendChild(modalContent);
fragment.appendChild(_modalEl);
this.modalElement = _modalEl;
this.Element = el;
this.appendRoot(fragment);
return this;
}
appendRoot(document: DocumentFragment) {
this.root.appendChild(document);
// 第一次渲染，open为true，显示弹窗
this.setOpen(this.open);
}
setOpen(open: boolean) {
this.open = open;
if (this.destroyOnClose) {
if (open) {
this.root.appendChild(this.modalElement);
} else {
this.cacheFragment.appendChild(this.modalElement);
}
return;
}
if (this.hideOnClose) {
if (open) {
this.modalElement.classList.remove('ui-modal-close');
} else {
this.modalElement.classList.add('ui-modal-close');
}
}
}
unMount() {
// 返回渲染的的Element, 然后删除modalElement
const fragment = document.createDocumentFragment();
fragment.appendChild(this.Element);
this.modalElement?.remove();
const modalState = modalStore.getState();
modalStore.setState({
modals: modalState.modals.filter((modal) => modal.id !== this.id),
});
this.isUse = false;
this.cacheFragment = new DocumentFragment();
return fragment;
}
/**
* 保留，暂时不用
* // TODO: 研究
* @param force
* @param opts
* @returns
*/
reRender(force?: boolean, opts?: ModalOpts) {
if (force) {
this.modalElement?.remove?.();
this.modalElement = undefined;
if (!this.Element) return;
this.renderEl(this.Element);
}
}
async onMaskClose(e?: any) {
if (this.maskClose) {
this.setOpen(false);
this.onClose?.(e);
}
}
setDefaultStyle(key: keyof DefaultStyle<U>, style: ObjCss) {
this.defaultStyle[key] = style as any;
}
}
// modal.render('#abc'||document.querySelector('#abc'));
// modal.unmount();

16
apps/ui/src/components/modal/store.ts Normal file
View File

@ -0,0 +1,16 @@
import { createStore } from '../../utils';
import { Modal } from './modal';
type ModeStore = {
modals: Modal[];
getModal: (id: string) => Modal | undefined;
};
export const modalStore = createStore<ModeStore>((set, get) => {
return {
modals: [],
getModal: (id: string) => {
return get().modals.find((model) => model.id === id) as Modal;
},
};
});

1
apps/ui/src/index.css Normal file
View File

@ -0,0 +1 @@
@import './components/modal/index.css';

9
apps/ui/src/index.ts Normal file
View File

@ -0,0 +1,9 @@
import { Modal, modalStore, BlankModal, DialogModal } from './components/modal';
export { Modal, modalStore, BlankModal, DialogModal };
import { createDOMElement } from './utils/dom/create-dom-element';
export { createDOMElement };
export * from './utils';

19
apps/ui/src/utils/css.ts Normal file
View File

@ -0,0 +1,19 @@
import { serializeStyles } from '@emotion/serialize';
export const getCssText = (obj?: ObjCss) => {
if (!obj) return '';
const serialized = serializeStyles([obj]);
return serialized.styles;
};
export const getCssTextObjs = (objs?: ObjCss[]) => {
if (!objs) return '';
const serialized = serializeStyles(objs);
return serialized.styles;
};
export type ObjCss = { [key: string]: number | string } & React.CSSProperties;
export const obj2css = (el?: HTMLDivElement, obj?: ObjCss) => {
if (!el) return;
if (!obj) return;
const serialized = serializeStyles([obj as unknown as Record<string, string>]);
el.style.cssText = serialized.styles;
};

82
apps/ui/src/utils/dom/create-dom-element.ts Normal file
View File

@ -0,0 +1,82 @@
type JSXElement = {
type: string | symbol;
props: Record<string, any>;
key?: string | number;
};
export function createDOMElement(jsxElement: JSXElement) {
// 如果 jsxElement 是 null, undefined 或者是布尔值，则直接跳过处理
if (jsxElement == null || typeof jsxElement === 'boolean') {
console.warn('Invalid JSX element:', jsxElement);
return null;
}
const { type, props } = jsxElement;
// React Fragment 的处理
if (type === Symbol.for('react.fragment')) {
const fragment = document.createDocumentFragment();
if (props.children) {
if (Array.isArray(props.children)) {
props.children.forEach((child) => {
const childElement = createDOMElement(child);
if (childElement) {
fragment.appendChild(childElement);
}
});
} else {
const childElement = createDOMElement(props.children);
if (childElement) {
fragment.appendChild(childElement);
}
}
}
return fragment;
}
const domElement = document.createElement(type as string);
// 处理 props
Object.keys(props).forEach((prop) => {
if (prop === 'children') {
// 递归处理 children
if (Array.isArray(props.children)) {
props.children.forEach((child) => {
const childElement = createDOMElement(child);
if (childElement) {
domElement.appendChild(childElement);
}
});
} else if (typeof props.children === 'string') {
domElement.appendChild(document.createTextNode(props.children));
} else if (typeof props.children === 'object' && props.children !== null) {
const childElement = createDOMElement(props.children);
if (childElement) {
domElement.appendChild(childElement);
}
}
} else if (prop.startsWith('on')) {
// 处理事件监听器
const eventType = prop.slice(2).toLowerCase(); // 提取事件类型（如 onClick -> click）
domElement.addEventListener(eventType, props[prop]);
} else if (prop === 'style' && typeof props[prop] === 'object') {
// 处理 style 属性
Object.assign(domElement.style, props[prop]);
} else if (prop === 'dangerouslySetInnerHTML') {
// 处理 dangerouslySetInnerHTML
if (props[prop] && typeof props[prop].__html === 'string') {
domElement.innerHTML = props[prop].__html;
} else {
console.warn('Invalid dangerouslySetInnerHTML content:', props[prop]);
}
} else if (prop === 'ref') {
// React 的 ref 在手动创建 DOM 时没有用处
console.warn('Ref prop is not supported in manual DOM creation');
} else if (prop === 'key') {
// React 的 key 属性是用于虚拟 DOM 的，不影响实际 DOM
console.warn('Key prop is not applicable in manual DOM creation');
} else {
// 处理其他普通属性
domElement.setAttribute(prop, props[prop]);
}
});
return domElement;
}

11
apps/ui/src/utils/extra.ts Normal file
View File

@ -0,0 +1,11 @@
export function extractKeysFromBraces(text: string) {
const regex = /\{\{\s*(.*?)\s*\}\}/g;
const keys: string[] = [];
let matches: RegExpExecArray | null;
while ((matches = regex.exec(text)) !== null) {
keys.push(matches[1]); // 获取{{}}中间的key
}
return keys;
}

22
apps/ui/src/utils/history.ts Normal file
View File

@ -0,0 +1,22 @@
type To = string | Location;
type State<T> = {
[key: string]: any;
} & T;
export const push = <T = any>(to: To, state?: State<T>, refresh = true) => {
const _history = window.history;
if (typeof to === 'string') {
// must key is default, so react navigate can work
_history.pushState({ key: 'default', usr: state }, '', to);
} else {
// const path = to.pathname;
_history.pushState({ key: 'default', usr: state }, '', to.pathname);
}
// must dispatch popstate event, so react navigate can work
refresh && window.dispatchEvent(new Event('popstate'));
};
export const history = {
push,
};
// import { createBrowserHistory } from 'history';
// export const history = createBrowserHistory();

7
apps/ui/src/utils/index.ts Normal file
View File

@ -0,0 +1,7 @@
export * from './css';
export * from './extra';
export * from './history';
export * from './is-null';
export * from './nanoid';
export * from './store';
export * from './query-el';

9
apps/ui/src/utils/is-null.ts Normal file
View File

@ -0,0 +1,9 @@
export const isObjectNull = (value: any) => {
if (value === null || value === undefined) {
return true;
}
if (JSON.stringify(value) === '{}') {
return true;
}
return false;
};

14
apps/ui/src/utils/nanoid.ts Normal file
View File

@ -0,0 +1,14 @@
import { customAlphabet } from 'nanoid';
// 全小写的字母和数字
const alphabetLetter = 'abcdefghijklmnopqrstuvwxyz';
const alphabet = '0123456789abcdefghijklmnopqrstuvwxyz';
export const alphabetLetterAll = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
export const generateId6 = customAlphabet(alphabet, 6);
export const customNanoid = customAlphabet(alphabetLetterAll, 12);
export const generateId = (size = 6) => {
return 'b-' + generateId6(size);
};
export const generate = (size = 6) => {
return customNanoid(size);
};

54
apps/ui/src/utils/query-el.ts Normal file
View File

@ -0,0 +1,54 @@
import { obj2css, ObjCss } from './css';
import parse from 'style-to-object';
export type SelectEl = string | HTMLDivElement;
export const querySelector = (el?: string | HTMLDivElement): HTMLDivElement | null => {
if (!el) {
return null;
}
if (typeof el === 'string') {
return document.querySelector(el) as HTMLDivElement;
}
return el;
};
export type ElStyle = ObjCss | string;
/**
* el add class and style
* @param el
* @param className
* @param style
* @returns
*/
export const elAddCS = (el: HTMLDivElement, className?: string, style?: ElStyle) => {
if (!el) return;
if (className) {
el.classList.add(className);
}
if (style && typeof style === 'string') {
el.style.cssText = style;
} else if (style) {
obj2css(el, style as ObjCss);
}
};
/**
* 添加style的同时保留默认的的style
* @param el
* @param className
* @param style
* @param defaultStyle
* @returns
*/
export const elAddCS2 = (el: HTMLDivElement, className?: string, style?: ElStyle, defaultStyle?: ObjCss) => {
if (!el) return;
if (className) {
el.classList.add(className);
}
let _style: ObjCss = { ...defaultStyle };
if (style && typeof style === 'string') {
_style = { ...defaultStyle, ...parse(style) };
} else if (style && typeof style === 'object') {
_style = { ...defaultStyle, ...style };
}
obj2css(el, _style);
};

3
apps/ui/src/utils/store.ts Normal file
View File

@ -0,0 +1,3 @@
import { createStore } from 'zustand/vanilla';
export { createStore };

23
apps/ui/tsconfig.json Normal file
View File

@ -0,0 +1,23 @@
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"lib": [
"DOM",
"ESNext"
],
"moduleResolution": "Node",
"declaration": true,
"esModuleInterop": true,
"skipLibCheck": true,
"outDir": "./dist",
"rootDir": "./src"
},
"include": [
"src"
],
"exclude": [
"node_modules",
"dist"
]
}

1462
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff