mm
This commit is contained in:
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"name": "@defgov/bookmark-sync",
|
||||
"version": "1.0",
|
||||
"manifest_version": 3,
|
||||
"permissions": ["bookmarks", "storage"],
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "newtab.html"
|
||||
},
|
||||
"host_permissions": ["<all_urls>"],
|
||||
"background": {
|
||||
"service_worker": "controller.js"
|
||||
},
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "bookmark-sync@example.com",
|
||||
"strict_min_version": "109.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"name": "defgov-bookmark-sync",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"typescript": "^6.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/chrome": "^0.1.40",
|
||||
"@types/firefox-webext-browser": "^143.0.0",
|
||||
"@types/node": "^25.6.0",
|
||||
"@types/webextension-polyfill": "^0.12.5",
|
||||
"webextension-polyfill": "^0.12.0"
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import browser from "webextension-polyfill";
|
||||
|
||||
export class Controller {
|
||||
/**
|
||||
* 书签栏 (Bookmarks Bar) 固定ID为 "1"
|
||||
*
|
||||
* 其他书签 (Other Bookmarks) 固定ID为 "2"
|
||||
*
|
||||
* 移动设备书签 (Mobile Bookmarks) 固定ID为 "3"
|
||||
*/
|
||||
rootFolder: string;
|
||||
|
||||
constructor(rootFolder: string = "1") {
|
||||
this.rootFolder = rootFolder;
|
||||
}
|
||||
|
||||
init() {}
|
||||
|
||||
setRootFolder(rootFolder: string) {
|
||||
this.rootFolder = rootFolder;
|
||||
}
|
||||
|
||||
async createBookmark(parentId: string, title: string, url?: string) {
|
||||
try {
|
||||
await browser.bookmarks.create({
|
||||
parentId: parentId,
|
||||
title: title,
|
||||
url: url,
|
||||
type: "bookmark",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("❌ 创建书签失败:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async createFolder(parentId: string, title: string, url?: string) {
|
||||
try {
|
||||
await browser.bookmarks.create({
|
||||
parentId: parentId,
|
||||
title: title,
|
||||
url: url,
|
||||
type: "folder",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async createSeparator(parentId: string) {
|
||||
try {
|
||||
await browser.bookmarks.create({
|
||||
parentId: parentId,
|
||||
type: "separator",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async deleteNode(id: string) {
|
||||
const results = await browser.bookmarks.get(id);
|
||||
if (results[0].type === "bookmark" || results[0].type === "separator") {
|
||||
deleteBookmarkOrSeparator(id);
|
||||
} else if (results[0].type === "folder") {
|
||||
deleteFolder(id);
|
||||
}
|
||||
}
|
||||
|
||||
async moveNode(id: string, destinationId: string, index: number) {
|
||||
try {
|
||||
await browser.bookmarks.move(id, {
|
||||
parentId: destinationId,
|
||||
index: index,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>我的自定义书签</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
#bookmark-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.bookmark-item {
|
||||
display: block;
|
||||
width: 120px;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
.bookmark-item:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>我的书签管理器</h2>
|
||||
<!-- 文件夹切换下拉框 -->
|
||||
<select id="folder-selector">
|
||||
<option value="1">书签栏 (ID: 1)</option>
|
||||
<!-- 其他文件夹可以通过代码动态加载到这里 -->
|
||||
</select>
|
||||
|
||||
<!-- 书签渲染容器 -->
|
||||
<div id="bookmark-container"></div>
|
||||
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,76 +0,0 @@
|
||||
// 递归提取某个节点下的所有书签 URL（防止文件夹嵌套）
|
||||
function extractUrls(
|
||||
bookmarkNode: chrome.bookmarks.BookmarkTreeNode[],
|
||||
): string[] {
|
||||
let urls: string[] = [];
|
||||
for (const node of bookmarkNode) {
|
||||
if (node.url) {
|
||||
urls.push(node.url);
|
||||
} else if (node.children) {
|
||||
urls = urls.concat(extractUrls(node.children));
|
||||
}
|
||||
}
|
||||
return urls;
|
||||
}
|
||||
|
||||
// 渲染指定 ID 文件夹下的书签
|
||||
async function renderBookmarksByFolderId(folderId: string) {
|
||||
try {
|
||||
const results = await chrome.bookmarks.getSubTree(folderId);
|
||||
const folderNode = results[0];
|
||||
|
||||
if (!folderNode || !folderNode.children) return;
|
||||
|
||||
const container = document.getElementById("bookmark-container");
|
||||
if (container) container.innerHTML = "";
|
||||
|
||||
// 遍历直接子节点
|
||||
folderNode.children.forEach((bookmark) => {
|
||||
if (bookmark.url) {
|
||||
const link = document.createElement("a");
|
||||
link.className = "bookmark-item";
|
||||
link.href = bookmark.url;
|
||||
link.textContent = bookmark.title || bookmark.url;
|
||||
// 自动获取网站 favicon 图标
|
||||
const faviconUrl = `https://www.google.com/s2/favicons?domain=${new URL(bookmark.url).hostname}&sz=32`;
|
||||
link.innerHTML = `<img src="${faviconUrl}" style="vertical-align: middle; margin-right: 5px;">${bookmark.title}`;
|
||||
container?.appendChild(link);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("获取书签失败:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化：自动获取所有一级文件夹并填充到下拉框
|
||||
async function initFolderSelector() {
|
||||
const results = await chrome.bookmarks.getTree();
|
||||
const bookmarkBar = results[0].children?.[0]; // ID为1的书签栏
|
||||
const selector = document.getElementById(
|
||||
"folder-selector",
|
||||
) as HTMLSelectElement;
|
||||
|
||||
if (bookmarkBar && bookmarkBar.children) {
|
||||
bookmarkBar.children.forEach((folder) => {
|
||||
// 只把文件夹加到下拉框里
|
||||
if (!folder.url && folder.id !== "1") {
|
||||
const option = document.createElement("option");
|
||||
option.value = folder.id || "";
|
||||
option.textContent = folder.title || "未命名文件夹";
|
||||
selector.appendChild(option);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定切换事件
|
||||
selector.addEventListener("change", (e) => {
|
||||
const targetId = (e.target as HTMLSelectElement).value;
|
||||
renderBookmarksByFolderId(targetId);
|
||||
});
|
||||
|
||||
// 默认渲染书签栏
|
||||
renderBookmarksByFolderId("1");
|
||||
}
|
||||
|
||||
// 页面加载完成后启动
|
||||
document.addEventListener("DOMContentLoaded", initFolderSelector);
|
||||
@@ -1,5 +0,0 @@
|
||||
import browser from "webextension-polyfill";
|
||||
|
||||
export type Account = { id: string; email: string; password: string };
|
||||
|
||||
export type BookmarkTreeNode = browser.Bookmarks.BookmarkTreeNode;
|
||||
@@ -1,20 +0,0 @@
|
||||
async function getLastIndex(parentId: string) {
|
||||
const children = await browser.bookmarks.getChildren(parentId);
|
||||
return children.length > 0 ? children[children.length - 1].index : 0;
|
||||
}
|
||||
|
||||
async function deleteBookmarkOrSeparator(id: string) {
|
||||
try {
|
||||
await browser.bookmarks.remove(id);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteFolder(id: string) {
|
||||
try {
|
||||
await browser.bookmarks.removeTree(id);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
@@ -1,118 +0,0 @@
|
||||
{
|
||||
// tsconfig.lib.json
|
||||
// 直接复制本文件内容到子项目的 tsconfig.json 即可，不要用 entends 继承本文件
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
/**
|
||||
* Browser api，需要加 "DOM"，"DOM.Iterable"
|
||||
* Node api，需要加 "ES2025"，始终使用带版本号的最新版本
|
||||
* NextJs api，属于同构，server 端会预处理 DOM，计算url，三个都需要 "ES2025", "DOM", "DOM.Iterable"
|
||||
*/
|
||||
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
||||
|
||||
/**
|
||||
* React JSX 编译模式
|
||||
* - 使用 React 17+ 新 JSX Transform
|
||||
* - 不需要手动 import React
|
||||
*/
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/**
|
||||
* 编译输出目录
|
||||
* - tsc / tsc -b 都会用到
|
||||
*/
|
||||
"outDir": "./dist",
|
||||
|
||||
/**
|
||||
* 源码根目录
|
||||
* - 确保 dist 结构与 src 一致
|
||||
* - 对 declaration 路径至关重要
|
||||
*/
|
||||
"rootDir": "./src",
|
||||
|
||||
/**
|
||||
* 生成 .d.ts 类型声明文件
|
||||
* - 组件库 / npm 包发布必需
|
||||
* - 对应用项目无害，仅影响类型输出
|
||||
*/
|
||||
"declaration": true,
|
||||
|
||||
/**
|
||||
* 只做类型检查，不生成 JS 输出
|
||||
* - 适用于 Vite / Next / Nuxt 等 bundler 场景
|
||||
* - 防止 tsc 与构建工具重复 emit
|
||||
*/
|
||||
"noEmit": true,
|
||||
|
||||
/**
|
||||
* 强制单文件可独立编译
|
||||
* - 适配 esbuild / SWC / bundler 编译模型
|
||||
* - 禁止依赖跨文件类型推断（enum / namespace 等）
|
||||
*/
|
||||
"isolatedModules": true,
|
||||
|
||||
/**
|
||||
* 允许在 import 中显式使用 .ts / .tsx 后缀
|
||||
* - 兼容 Node ESM / bundler 对文件扩展名的严格要求
|
||||
* - 避免 `import './foo'` 在 TS + ESM 下歧义
|
||||
*/
|
||||
"allowImportingTsExtensions": true
|
||||
},
|
||||
/**
|
||||
* 参与类型检查和编译的文件
|
||||
* - 只扫描 src
|
||||
* - 其它目录通过 exclude 排除
|
||||
*/
|
||||
"include": ["src", "scripts"],
|
||||
|
||||
/**
|
||||
* 明确排除非源码内容
|
||||
* - 避免污染类型系统
|
||||
* - 防止误入 dist / test / config
|
||||
* - 保证发布包干净
|
||||
*/
|
||||
"exclude": [
|
||||
"scripts",
|
||||
"node_modules",
|
||||
"dist",
|
||||
|
||||
// ---------- build / cache ----------
|
||||
".turbo/**/*",
|
||||
".cache/**/*",
|
||||
".vite/**/*",
|
||||
|
||||
// ---------- 配置文件 ----------
|
||||
"vite.config.ts",
|
||||
"*.config.ts",
|
||||
"*.config.js",
|
||||
"tsconfig.*.json",
|
||||
|
||||
// ---------- 测试相关 ----------
|
||||
"__tests__/**/*",
|
||||
"test/**/*",
|
||||
"tests/**/*",
|
||||
"**/*.test.ts",
|
||||
"**/*.test.tsx",
|
||||
"**/*.spec.ts",
|
||||
"**/*.spec.tsx",
|
||||
|
||||
// ---------- Storybook ----------
|
||||
".storybook/**/*",
|
||||
"stories/**/*",
|
||||
|
||||
// ---------- 示例 / 脚本 ----------
|
||||
"example/**/*",
|
||||
"examples/**/*",
|
||||
"scripts/**/*",
|
||||
|
||||
// ---------- 环境与静态资源 ----------
|
||||
".env",
|
||||
".env.*",
|
||||
"public/**/*",
|
||||
|
||||
// ---------- 文档 ----------
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"LICENSE"
|
||||
]
|
||||
}
|
||||
44
packages/css/package.json
Normal file
44
packages/css/package.json
Normal file
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "@dg/css",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"sideEffects": [
|
||||
"*.css"
|
||||
],
|
||||
"module": "./dist/index.es.js",
|
||||
"main": "./dist/index.cjs.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"style": "./dist/index.css",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/index.es.js",
|
||||
"require": "./dist/index.cjs.js",
|
||||
"types": "./dist/index.d.ts"
|
||||
},
|
||||
"./index.css": "./dist/index.css"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"gen-index": "ts-node scripts/gen-index.ts",
|
||||
"gen-dts": "tsc -p tsconfig.build.json",
|
||||
"dev": "pnpm gen-index && vite build --watch",
|
||||
"build": "pnpm gen-index && vite build && pnpm gen-dts"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^25.6.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"tinyglobby": "^0.2.16",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^6.0.3",
|
||||
"vite": "^8.0.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19",
|
||||
"react-dom": "^19"
|
||||
}
|
||||
}
|
||||
254
packages/css/scripts/gen-index.ts
Normal file
254
packages/css/scripts/gen-index.ts
Normal file
@@ -0,0 +1,254 @@
|
||||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
|
||||
/**
|
||||
* 默认测试 / story / example / fixture / type 文件匹配规则
|
||||
* 仅用于“识别”，不直接决定是否排除
|
||||
*/
|
||||
const DEFAULT_TEST_FILE_PATTERNS: RegExp[] = [
|
||||
// =========================
|
||||
// Test / Spec
|
||||
// =========================
|
||||
/\.(test|spec)\.(ts|tsx|js|jsx)$/,
|
||||
/\.(test|spec)\.(ts|tsx|js|jsx)\?.*$/, // query param safe
|
||||
|
||||
// =========================
|
||||
// E2E / Playwright / Cypress
|
||||
// =========================
|
||||
/\.(cy|playwright|e2e)\.(ts|tsx|js|jsx)$/,
|
||||
|
||||
// =========================
|
||||
// Storybook
|
||||
// =========================
|
||||
/\.(story|stories)\.(ts|tsx|js|jsx|mdx)$/,
|
||||
|
||||
// =========================
|
||||
// Snapshot / Mock / Fixture
|
||||
// =========================
|
||||
/\.snap$/,
|
||||
/\.mock\.(ts|tsx|js|jsx)$/,
|
||||
/\.fixture\.(ts|tsx|js|jsx)$/,
|
||||
|
||||
// =========================
|
||||
// Type declarations
|
||||
// =========================
|
||||
/\.d\.ts$/,
|
||||
|
||||
// =========================
|
||||
// Examples / Demos / Docs
|
||||
// =========================
|
||||
/\.(example|demo|docs)\.(ts|tsx|js|jsx)$/,
|
||||
];
|
||||
|
||||
/**
|
||||
* 测试 / 辅助目录（目录级排除）
|
||||
*/
|
||||
const DEFAULT_TEST_DIR_PATTERNS: RegExp[] = [
|
||||
/[/\\](__tests__|tests|test|spec|__mocks__|__fixtures__|__snapshots__)[\/\\]/,
|
||||
/[/\\](cypress|playwright|e2e|__e2e__|__playwright__)[\/\\]/,
|
||||
/[/\\](story|stories|\.storybook)[\/\\]/,
|
||||
/[/\\](types|type|typings|interfaces)[\/\\]/,
|
||||
/[/\\](examples|example|demo|demos|docs)[\/\\]/,
|
||||
];
|
||||
|
||||
type Config = {
|
||||
outputDir: string;
|
||||
outputFile: string;
|
||||
scanDirs: string[];
|
||||
preamble?: string[];
|
||||
importPrefix?: string;
|
||||
entryFilePatterns?: RegExp[];
|
||||
barrelFirstMode?: boolean;
|
||||
includeFilePatterns?: RegExp[];
|
||||
excludeFilePatterns?: RegExp[];
|
||||
excludeDirPatterns?: RegExp[];
|
||||
};
|
||||
|
||||
const tsConfig: Config = {
|
||||
outputDir: "src",
|
||||
outputFile: "index.ts",
|
||||
scanDirs: ["src"],
|
||||
importPrefix: "export * from",
|
||||
barrelFirstMode: true,
|
||||
preamble: ["import './index.css';"],
|
||||
entryFilePatterns: [/^index\.(js|ts|jsx|tsx)$/],
|
||||
includeFilePatterns: [/\.(js|ts|jsx|tsx)$/],
|
||||
excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
|
||||
excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
|
||||
};
|
||||
|
||||
const cssConfig: Config = {
|
||||
outputDir: "src",
|
||||
outputFile: "index.css",
|
||||
scanDirs: ["src"],
|
||||
importPrefix: "@import",
|
||||
barrelFirstMode: false,
|
||||
entryFilePatterns: [/^index\.(css)$/],
|
||||
includeFilePatterns: [/\.(css)$/],
|
||||
excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
|
||||
excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
|
||||
};
|
||||
|
||||
function isEntryFile(fileName: string, config: Config): boolean {
|
||||
const regExps = config.entryFilePatterns;
|
||||
|
||||
if (!regExps || regExps.length === 0) return false;
|
||||
|
||||
return regExps.some((regExp) => regExp.test(fileName));
|
||||
}
|
||||
|
||||
function isIncludeFile(fileName: string, config: Config): boolean {
|
||||
const regExps = config.includeFilePatterns;
|
||||
|
||||
if (!regExps || regExps.length === 0) return false;
|
||||
|
||||
return regExps.some((regExp) => regExp.test(fileName));
|
||||
}
|
||||
|
||||
function isExcludeFile(fileName: string, config: Config): boolean {
|
||||
const regExps = config.excludeFilePatterns;
|
||||
|
||||
if (!regExps || regExps.length === 0) return false;
|
||||
|
||||
return regExps.some((regExp) => regExp.test(fileName));
|
||||
}
|
||||
|
||||
function isExcludeDir(filePath: string, config: Config): boolean {
|
||||
const regExps = config.excludeDirPatterns;
|
||||
|
||||
if (!regExps || regExps.length === 0) return false;
|
||||
|
||||
return regExps.some((regExp) => regExp.test(filePath));
|
||||
}
|
||||
|
||||
function isValidDir(filePath: string, config: Config): boolean {
|
||||
if (isExcludeDir(filePath, config)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function isValidFile(fileName: string, config: Config): boolean {
|
||||
if (isIncludeFile(fileName, config) && !isExcludeFile(fileName, config)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
const buildExportStatement = (filePath: string, config: Config) => {
|
||||
// 文件夹（不是文件）与目标文件的相对路径
|
||||
let exportFilePath = path.relative(config.outputDir, filePath);
|
||||
|
||||
// 去除扩展名，并且转化成正斜杠
|
||||
const exportFilePathWithoutExt = path
|
||||
.join(
|
||||
path.dirname(exportFilePath),
|
||||
path.basename(exportFilePath, path.extname(exportFilePath)),
|
||||
)
|
||||
.replace(/\\/g, "/");
|
||||
|
||||
// 加上 ./ 前缀
|
||||
return `${config.importPrefix} './${exportFilePathWithoutExt}';`;
|
||||
};
|
||||
|
||||
function isOutputEntry(filePath: string, config: Config) {
|
||||
const outputFilePath = path.resolve(config.outputDir, config.outputFile);
|
||||
const targetFilePath = path.resolve(filePath);
|
||||
|
||||
return outputFilePath === targetFilePath;
|
||||
}
|
||||
|
||||
function generateExports(dirPath: string, config: Config): string[] {
|
||||
const fileNames = fs.readdirSync(dirPath);
|
||||
const exports: string[] = [];
|
||||
|
||||
// =========================
|
||||
// 逻辑分支：Barrel First Mode
|
||||
// =========================
|
||||
if (config.barrelFirstMode) {
|
||||
// 查找当前目录有没有 index.ts
|
||||
const entryFileName = fileNames.find((fileName) => {
|
||||
const filePath = path.join(dirPath, fileName);
|
||||
return fs.statSync(filePath).isFile() && isEntryFile(fileName, config);
|
||||
});
|
||||
// 如果有
|
||||
if (entryFileName) {
|
||||
const entryFilePath = path.join(dirPath, entryFileName);
|
||||
|
||||
// 如果是 outputFile 自身，则跳过
|
||||
if (isOutputEntry(entryFilePath, config)) {
|
||||
console.log(`⏭️ 跳过自身入口文件: ${entryFilePath}`);
|
||||
} else {
|
||||
exports.push(buildExportStatement(entryFilePath, config));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =========================
|
||||
// 逻辑分支：index.ts 不存在，则继续正常遍历与递归
|
||||
// =========================
|
||||
fileNames.forEach((fileName) => {
|
||||
const filePath = path.join(dirPath, fileName);
|
||||
const stat = fs.statSync(filePath);
|
||||
|
||||
// 情况1：是文件，且通过了校验
|
||||
if (
|
||||
stat.isFile() &&
|
||||
isValidFile(fileName, config) &&
|
||||
!isEntryFile(fileName, config)
|
||||
) {
|
||||
exports.push(buildExportStatement(filePath, config));
|
||||
}
|
||||
// 情况2：是文件夹，且通过了校验，递归扫描子文件夹
|
||||
else if (stat.isDirectory() && isValidDir(filePath, config)) {
|
||||
const subExports = generateExports(filePath, config);
|
||||
exports.push(...subExports);
|
||||
}
|
||||
});
|
||||
|
||||
return exports;
|
||||
}
|
||||
|
||||
function genIndexFile(config: Config) {
|
||||
// 确保输出目录存在，如果不存在就递归创建
|
||||
if (!fs.existsSync(config.outputDir)) {
|
||||
fs.mkdirSync(config.outputDir, { recursive: true });
|
||||
}
|
||||
|
||||
const allExports: string[] = [];
|
||||
|
||||
// 遍历所有需要扫描的根目录
|
||||
config.scanDirs.forEach((scanDir) => {
|
||||
// 只有当目录真实存在时才进行扫描
|
||||
if (fs.existsSync(scanDir)) {
|
||||
const exports = generateExports(scanDir, config);
|
||||
allExports.push(...exports);
|
||||
} else {
|
||||
console.warn(`⚠️ 警告：扫描目录不存在，已跳过 -> ${scanDir}`);
|
||||
}
|
||||
});
|
||||
|
||||
// 拼接最终的文件内容：前言 + 导出语句（使用 Set 自动去重）
|
||||
const fileContent = [
|
||||
...(config.preamble ?? []),
|
||||
...Array.from(new Set(allExports)),
|
||||
].join("\n");
|
||||
|
||||
// 将内容写入到最终的 index.ts 文件中
|
||||
const outputFilePath = path.join(config.outputDir, config.outputFile);
|
||||
fs.writeFileSync(outputFilePath, fileContent, "utf-8");
|
||||
|
||||
console.log(`✨ 成功生成入口文件: ${outputFilePath}`);
|
||||
}
|
||||
|
||||
// ================= 脚本执行入口 =================
|
||||
try {
|
||||
console.log("🚀 开始扫描并生成入口文件...");
|
||||
genIndexFile(tsConfig);
|
||||
genIndexFile(cssConfig);
|
||||
console.log("✅ 脚本执行完毕！");
|
||||
} catch (error) {
|
||||
console.error("❌ 脚本执行失败:", error);
|
||||
process.exit(1); // 如果报错，让进程以非 0 状态码退出
|
||||
}
|
||||
36
packages/css/src/index.css
Normal file
36
packages/css/src/index.css
Normal file
@@ -0,0 +1,36 @@
|
||||
@import './styles/base/root';
|
||||
@import './styles/utility/size-insensitive/align-content';
|
||||
@import './styles/utility/size-insensitive/align-items';
|
||||
@import './styles/utility/size-insensitive/align-self';
|
||||
@import './styles/utility/size-insensitive/animation';
|
||||
@import './styles/utility/size-insensitive/box-decoration';
|
||||
@import './styles/utility/size-insensitive/box-inside';
|
||||
@import './styles/utility/size-insensitive/box-sizing';
|
||||
@import './styles/utility/size-insensitive/brand';
|
||||
@import './styles/utility/size-insensitive/break-after';
|
||||
@import './styles/utility/size-insensitive/break-before';
|
||||
@import './styles/utility/size-insensitive/cursor';
|
||||
@import './styles/utility/size-insensitive/display';
|
||||
@import './styles/utility/size-insensitive/drop-shadow';
|
||||
@import './styles/utility/size-insensitive/flex-direction';
|
||||
@import './styles/utility/size-insensitive/flex-wrap';
|
||||
@import './styles/utility/size-insensitive/font-family';
|
||||
@import './styles/utility/size-insensitive/justify-content';
|
||||
@import './styles/utility/size-insensitive/justify-items';
|
||||
@import './styles/utility/size-insensitive/justify-self';
|
||||
@import './styles/utility/size-insensitive/overflow';
|
||||
@import './styles/utility/size-insensitive/overscroll-behavior';
|
||||
@import './styles/utility/size-insensitive/position';
|
||||
@import './styles/utility/size-insensitive/screen-reader';
|
||||
@import './styles/utility/size-insensitive/theme';
|
||||
@import './styles/utility/size-insensitive/user-select';
|
||||
@import './styles/utility/size-insensitive/variant';
|
||||
@import './styles/utility/size-insensitive/z-index';
|
||||
@import './styles/utility/size-sensitive/border-radius';
|
||||
@import './styles/utility/size-sensitive/font-size';
|
||||
@import './styles/utility/size-sensitive/font-weight';
|
||||
@import './styles/utility/size-sensitive/gap';
|
||||
@import './styles/utility/size-sensitive/height';
|
||||
@import './styles/utility/size-sensitive/margin';
|
||||
@import './styles/utility/size-sensitive/padding';
|
||||
@import './styles/utility/size-sensitive/width';
|
||||
7
packages/css/src/index.ts
Normal file
7
packages/css/src/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import './index.css';
|
||||
export * from './recipes/brandRecipe';
|
||||
export * from './recipes/inlineSizeRecipe';
|
||||
export * from './recipes/itemSizeRecipe';
|
||||
export * from './recipes/variantRecipe';
|
||||
export * from './styles/utils/cpm';
|
||||
export * from './styles/utils/cvr';
|
||||
13
packages/css/src/recipes/brandRecipe.ts
Normal file
13
packages/css/src/recipes/brandRecipe.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { cvr } from "../styles/utils/cvr";
|
||||
|
||||
export const brandRecipe = cvr({
|
||||
variants: {
|
||||
brand: {
|
||||
success: "brand--success",
|
||||
danger: "brand--danger",
|
||||
info: "brand--info",
|
||||
warning: "brand--warning",
|
||||
emphasize: "brand--emphasize",
|
||||
},
|
||||
},
|
||||
});
|
||||
15
packages/css/src/recipes/inlineSizeRecipe.ts
Normal file
15
packages/css/src/recipes/inlineSizeRecipe.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { cvr } from "../styles/utils/cvr";
|
||||
|
||||
export const inlineSizeRecipe = cvr({
|
||||
base: "display--flex flex--nowrap justify--center items--center",
|
||||
variants: {
|
||||
size: {
|
||||
xs: "text--xs h--inline-xs gap--xs",
|
||||
sm: "text--sm h--inline-sm gap--sm",
|
||||
md: "text--md h--inline-md gap--md",
|
||||
lg: "text--lg h--inline-lg gap--lg",
|
||||
xl: "text--xl h--inline-xl gap--xl",
|
||||
"2xl": "text--2xl h--inline-2xl gap--2xl",
|
||||
},
|
||||
},
|
||||
});
|
||||
46
packages/css/src/recipes/itemSizeRecipe.ts
Normal file
46
packages/css/src/recipes/itemSizeRecipe.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { cvr } from "../styles/utils/cvr";
|
||||
|
||||
export const itemSizeRecipe = cvr({
|
||||
base: "select--none display--flex flex--nowrap justify--center items--center",
|
||||
variants: {
|
||||
size: {
|
||||
xs: "text--xs h--item-xs gap--xs px--xs",
|
||||
sm: "text--sm h--item-sm gap-sm px--sm",
|
||||
md: "text--md h--item-md gap-md px--md",
|
||||
lg: "text--lg h--item-lg gap-lg px--lg",
|
||||
xl: "text--xl h--item-xl gap-xl px--xl",
|
||||
"2xl": "text--2xl h--item-2xl gap--2xl px--2xl",
|
||||
},
|
||||
shape: {
|
||||
square: "rounded--none",
|
||||
rounded: "",
|
||||
circle: "rounded--full",
|
||||
},
|
||||
iconOnly: {
|
||||
true: "px--none",
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
{ iconOnly: false, size: "xs", class: "px--xs" },
|
||||
{ iconOnly: false, size: "sm", class: "px--sm" },
|
||||
{ iconOnly: false, size: "md", class: "px--md" },
|
||||
{ iconOnly: false, size: "lg", class: "px--lg" },
|
||||
{ iconOnly: false, size: "xl", class: "px--xl" },
|
||||
{ iconOnly: false, size: "2xl", class: "px--2xl" },
|
||||
// ==================================================
|
||||
{ shape: "rounded", size: "xs", class: "rounded--sm" },
|
||||
{ shape: "rounded", size: "sm", class: "rounded--md" },
|
||||
{ shape: "rounded", size: "md", class: "rounded--lg" },
|
||||
{ shape: "rounded", size: "lg", class: "rounded--xl" },
|
||||
{ shape: "rounded", size: "xl", class: "rounded--2xl" },
|
||||
{ shape: "rounded", size: "2xl", class: "rounded--3xl" },
|
||||
// ==================================================
|
||||
{ iconOnly: true, size: "xs", class: "w--item-xs" },
|
||||
{ iconOnly: true, size: "sm", class: "w--item-sm" },
|
||||
{ iconOnly: true, size: "md", class: "w--item-md" },
|
||||
{ iconOnly: true, size: "lg", class: "w--item-lg" },
|
||||
{ iconOnly: true, size: "xl", class: "w--item-xl" },
|
||||
{ iconOnly: true, size: "2xl", class: "w--item-2xl" },
|
||||
],
|
||||
});
|
||||
58
packages/css/src/recipes/variantRecipe.ts
Normal file
58
packages/css/src/recipes/variantRecipe.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
import { cvr } from "../styles/utils/cvr";
|
||||
|
||||
export const variantRecipe = cvr({
|
||||
variants: {
|
||||
variant: {
|
||||
filled: "",
|
||||
outline: "",
|
||||
subtle: "",
|
||||
ghost: "",
|
||||
},
|
||||
disabled: {
|
||||
true: "",
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
{
|
||||
disabled: false,
|
||||
variant: "filled",
|
||||
class: "variant--filled",
|
||||
},
|
||||
{
|
||||
disabled: false,
|
||||
variant: "outline",
|
||||
class: "variant--outline",
|
||||
},
|
||||
{
|
||||
disabled: false,
|
||||
variant: "subtle",
|
||||
class: "variant--subtle",
|
||||
},
|
||||
{
|
||||
disabled: false,
|
||||
variant: "ghost",
|
||||
class: "variant--ghost",
|
||||
},
|
||||
{
|
||||
disabled: true,
|
||||
variant: "filled",
|
||||
class: "variant--filled-disabled",
|
||||
},
|
||||
{
|
||||
disabled: true,
|
||||
variant: "outline",
|
||||
class: "variant--outline-disabled",
|
||||
},
|
||||
{
|
||||
disabled: true,
|
||||
variant: "subtle",
|
||||
class: "variant--subtle-disabled",
|
||||
},
|
||||
{
|
||||
disabled: true,
|
||||
variant: "ghost",
|
||||
class: "variant--ghost-disabled",
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -1,3 +1,5 @@
|
||||
@layer utility;
|
||||
|
||||
:root {
|
||||
--color-red-50: oklch(97.1% 0.013 17.38);
|
||||
--color-red-100: oklch(93.6% 0.032 17.717);
|
||||
@@ -317,12 +319,12 @@
|
||||
--warning-bg-low-hover: var(--color-yellow-200);
|
||||
--warning-bg-low-active: var(--color-yellow-300);
|
||||
|
||||
--default-bg: var(--color-neutral-600);
|
||||
--default-bg-hover: var(--color-neutral-500);
|
||||
--default-bg-active: var(--color-neutral-400);
|
||||
--default-bg-low: var(--color-neutral-100);
|
||||
--default-bg-low-hover: var(--color-neutral-200);
|
||||
--default-bg-low-active: var(--color-neutral-300);
|
||||
--emphasize-bg: var(--color-neutral-600);
|
||||
--emphasize-bg-hover: var(--color-neutral-500);
|
||||
--emphasize-bg-active: var(--color-neutral-400);
|
||||
--emphasize-bg-low: var(--color-neutral-100);
|
||||
--emphasize-bg-low-hover: var(--color-neutral-200);
|
||||
--emphasize-bg-low-active: var(--color-neutral-300);
|
||||
|
||||
--disabled-fg: var(--color-gray-400);
|
||||
--disabled-bg: var(--color-gray-100);
|
||||
@@ -7,6 +7,7 @@
|
||||
--brand-bg-low-hover: var(--info-bg-low-hover);
|
||||
--brand-bg-low-active: var(--info-bg-low-active);
|
||||
}
|
||||
|
||||
.brand--danger {
|
||||
--brand-bg: var(--danger-bg);
|
||||
--brand-bg-hover: var(--danger-bg-hover);
|
||||
@@ -15,6 +16,7 @@
|
||||
--brand-bg-low-hover: var(--danger-bg-low-hover);
|
||||
--brand-bg-low-active: var(--danger-bg-low-active);
|
||||
}
|
||||
|
||||
.brand--success {
|
||||
--brand-bg: var(--success-bg);
|
||||
--brand-bg-hover: var(--success-bg-hover);
|
||||
@@ -23,6 +25,7 @@
|
||||
--brand-bg-low-hover: var(--success-bg-low-hover);
|
||||
--brand-bg-low-active: var(--success-bg-low-active);
|
||||
}
|
||||
|
||||
.brand--warning {
|
||||
--brand-bg: var(--warning-bg);
|
||||
--brand-bg-hover: var(--warning-bg-hover);
|
||||
@@ -31,12 +34,13 @@
|
||||
--brand-bg-low-hover: var(--warning-bg-low-hover);
|
||||
--brand-bg-low-active: var(--warning-bg-low-active);
|
||||
}
|
||||
.brand--default {
|
||||
--brand-bg: var(--default-bg);
|
||||
--brand-bg-hover: var(--default-bg-hover);
|
||||
--brand-bg-active: var(--default-bg-active);
|
||||
--brand-bg-low: var(--default-bg-low);
|
||||
--brand-bg-low-hover: var(--default-bg-low-hover);
|
||||
--brand-bg-low-active: var(--default-bg-low-active);
|
||||
|
||||
.brand--emphasize {
|
||||
--brand-bg: var(--emphasize-bg);
|
||||
--brand-bg-hover: var(--emphasize-bg-hover);
|
||||
--brand-bg-active: var(--emphasize-bg-active);
|
||||
--brand-bg-low: var(--emphasize-bg-low);
|
||||
--brand-bg-low-hover: var(--emphasize-bg-low-hover);
|
||||
--brand-bg-low-active: var(--emphasize-bg-low-active);
|
||||
}
|
||||
}
|
||||
@@ -11,27 +11,27 @@
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
.overscroll--x--auto {
|
||||
.overscroll--x-auto {
|
||||
overscroll-behavior-x: auto;
|
||||
}
|
||||
|
||||
.overscroll--x--contain {
|
||||
.overscroll--x-contain {
|
||||
overscroll-behavior-x: contain;
|
||||
}
|
||||
|
||||
.overscroll--x--none {
|
||||
.overscroll--x-none {
|
||||
overscroll-behavior-x: none;
|
||||
}
|
||||
|
||||
.overscroll--y--auto {
|
||||
.overscroll--y-auto {
|
||||
overscroll-behavior-y: auto;
|
||||
}
|
||||
|
||||
.overscroll--y--contain {
|
||||
.overscroll--y-contain {
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
.overscroll--y--none {
|
||||
.overscroll--y-none {
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.position--static {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.position--fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.position--absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.position--relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.position--sticky {
|
||||
position: sticky;
|
||||
}
|
||||
206
packages/css/src/styles/utility/size-insensitive/variant.css
Normal file
206
packages/css/src/styles/utility/size-insensitive/variant.css
Normal file
@@ -0,0 +1,206 @@
|
||||
@layer utility {
|
||||
.variant--filled {
|
||||
--filled-fg: var(--color-white);
|
||||
--filled-fg-hover: var(--color-white);
|
||||
--filled-fg-active: var(--color-white);
|
||||
--filled-bg: var(--brand-bg);
|
||||
--filled-bg-hover: var(--brand-bg-hover);
|
||||
--filled-bg-active: var(--brand-bg-active);
|
||||
--filled-border-color: var(--color-transparent);
|
||||
|
||||
color: var(--filled-fg);
|
||||
background-color: var(--filled-bg);
|
||||
border-color: var(--filled-border-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--filled-bg-hover);
|
||||
color: var(--filled-fg-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--filled-bg-active);
|
||||
color: var(--filled-fg-active);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--filled-bg-hover);
|
||||
color: var(--filled-fg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.variant--outline {
|
||||
--outline-fg: var(--brand-bg);
|
||||
--outline-fg-hover: var(--brand-bg);
|
||||
--outline-fg-active: var(--brand-bg);
|
||||
--outline-bg: var(--color-transparent);
|
||||
--outline-bg-hover: var(--brand-bg-low);
|
||||
--outline-bg-active: var(--brand-bg-low-hover);
|
||||
--outline-border-color: var(--brand-bg);
|
||||
|
||||
color: var(--outline-fg);
|
||||
background-color: var(--outline-bg);
|
||||
border: solid 1px;
|
||||
border-color: var(--outline-border-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--outline-bg-hover);
|
||||
color: var(--outline-fg-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--outline-bg-active);
|
||||
color: var(--outline-fg-active);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--outline-bg-hover);
|
||||
color: var(--outline-fg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.variant--subtle {
|
||||
--subtle-fg: var(--brand-bg);
|
||||
--subtle-fg-hover: var(--brand-bg);
|
||||
--subtle-fg-active: var(--brand-bg);
|
||||
--subtle-bg: var(--brand-bg-low);
|
||||
--subtle-bg-hover: var(--brand-bg-low-hover);
|
||||
--subtle-bg-active: var(--brand-bg-low-active);
|
||||
--subtle-border-color: var(--color-transparent);
|
||||
|
||||
color: var(--subtle-fg);
|
||||
background-color: var(--subtle-bg);
|
||||
border-color: var(--subtle-border-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--subtle-bg-hover);
|
||||
color: var(--subtle-fg-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--subtle-bg-active);
|
||||
color: var(--subtle-fg-active);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--subtle-bg-hover);
|
||||
color: var(--subtle-fg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.variant--ghost {
|
||||
--ghost-fg: var(--brand-bg);
|
||||
--ghost-fg-hover: var(--brand-bg);
|
||||
--ghost-fg-active: var(--brand-bg);
|
||||
--ghost-bg: var(--color-transparent);
|
||||
--ghost-bg-hover: var(--brand-bg-low);
|
||||
--ghost-bg-active: var(--brand-bg-low-hover);
|
||||
--ghost-border-color: var(--color-transparent);
|
||||
|
||||
color: var(--ghost-fg);
|
||||
background-color: var(--ghost-bg);
|
||||
border-color: var(--ghost-border-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--ghost-bg-hover);
|
||||
color: var(--ghost-fg-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--ghost-bg-active);
|
||||
color: var(--ghost-fg-active);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--ghost-bg-hover);
|
||||
color: var(--ghost-fg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.variant--filled-disabled {
|
||||
color: var(--disabled-fg);
|
||||
background-color: var(--disabled-bg);
|
||||
border-color: var(--disabled-border-color);
|
||||
filter: grayscale(100%);
|
||||
|
||||
&:hover {
|
||||
color: var(--disabled-fg);
|
||||
background-color: var(--disabled-bg);
|
||||
border-color: var(--disabled-border-color);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--disabled-fg);
|
||||
background-color: var(--disabled-bg);
|
||||
border-color: var(--disabled-border-color);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
color: var(--disabled-fg);
|
||||
background-color: var(--disabled-bg);
|
||||
border-color: var(--disabled-border-color);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.variant--outline-disabled {
|
||||
color: var(--disabled-fg);
|
||||
background-color: var(--disabled-bg);
|
||||
border: solid 1px;
|
||||
border-color: var(--disabled-border-color);
|
||||
filter: grayscale(100%);
|
||||
|
||||
&:hover {
|
||||
color: var(--disabled-fg);
|
||||
background-color: var(--disabled-bg);
|
||||
border: solid 1px;
|
||||
border-color: var(--disabled-border-color);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--disabled-fg);
|
||||
background-color: var(--disabled-bg);
|
||||
border: solid 1px;
|
||||
border-color: var(--disabled-border-color);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
color: var(--disabled-fg);
|
||||
background-color: var(--disabled-bg);
|
||||
border: solid 1px;
|
||||
border-color: var(--disabled-border-color);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.variant--ghost-disabled {
|
||||
color: var(--ghost-fg);
|
||||
background-color: var(--ghost-bg);
|
||||
border-color: var(--ghost-border-color);
|
||||
filter: grayscale(50%);
|
||||
|
||||
&:hover {
|
||||
color: var(--ghost-fg);
|
||||
background-color: var(--ghost-bg);
|
||||
border-color: var(--ghost-border-color);
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--ghost-fg);
|
||||
background-color: var(--ghost-bg);
|
||||
border-color: var(--ghost-border-color);
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
color: var(--ghost-fg);
|
||||
background-color: var(--ghost-bg);
|
||||
border-color: var(--ghost-border-color);
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,10 @@
|
||||
@layer utility {
|
||||
|
||||
/* 自动 & 零 */
|
||||
.z--auto {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.z--0 {
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -11,33 +13,41 @@
|
||||
.z--10 {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.z--20 {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.z--30 {
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.z--40 {
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.z--50 {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
/* 负值（negative） */
|
||||
.z--n--10 {
|
||||
.z--n-10 {
|
||||
z-index: -10;
|
||||
}
|
||||
.z--n--20 {
|
||||
|
||||
.z--n-20 {
|
||||
z-index: -20;
|
||||
}
|
||||
.z--n--30 {
|
||||
|
||||
.z--n-30 {
|
||||
z-index: -30;
|
||||
}
|
||||
.z--n--40 {
|
||||
|
||||
.z--n-40 {
|
||||
z-index: -40;
|
||||
}
|
||||
.z--n--50 {
|
||||
|
||||
.z--n-50 {
|
||||
z-index: -50;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,47 +1,58 @@
|
||||
@layer utility {
|
||||
.h--item--xs {
|
||||
.h--item-xs {
|
||||
/* 24px minimum touch size for text line */
|
||||
height: var(--height-item-xs);
|
||||
}
|
||||
.h--item--sm {
|
||||
|
||||
.h--item-sm {
|
||||
/* 28px save space for most used size */
|
||||
height: var(--height-item-sm);
|
||||
}
|
||||
.h--item--md {
|
||||
|
||||
.h--item-md {
|
||||
/* 34px most used size */
|
||||
height: var(--height-item-md);
|
||||
}
|
||||
.h--item--lg {
|
||||
|
||||
.h--item-lg {
|
||||
/* 44px maximum touch size without waste */
|
||||
height: var(--height-item-lg);
|
||||
}
|
||||
.h--item--xl {
|
||||
|
||||
.h--item-xl {
|
||||
/* 56px section-header bar */
|
||||
height: var(--height-item-xl);
|
||||
}
|
||||
.h--item--2xl {
|
||||
|
||||
.h--item-2xl {
|
||||
/* 64px navigation bar */
|
||||
height: var(--height-item-2xl);
|
||||
}
|
||||
|
||||
/* -------------- */
|
||||
.h--inline--xs {
|
||||
.h--inline-xs {
|
||||
/* 16px */
|
||||
height: calc(var(--font-size-xs) * var(--line-height-xs));
|
||||
}
|
||||
.h--inline--sm {
|
||||
|
||||
.h--inline-sm {
|
||||
/* 20px */
|
||||
height: calc(var(--font-size-sm) * var(--line-height-sm));
|
||||
}
|
||||
.h--inline--md {
|
||||
|
||||
.h--inline-md {
|
||||
height: calc(var(--font-size-md) * var(--line-height-md));
|
||||
}
|
||||
.h--inline--lg {
|
||||
|
||||
.h--inline-lg {
|
||||
height: calc(var(--font-size-lg) * var(--line-height-lg));
|
||||
}
|
||||
.h--inline--xl {
|
||||
|
||||
.h--inline-xl {
|
||||
height: calc(var(--font-size-xl) * var(--line-height-xl));
|
||||
}
|
||||
.h--inline--2xl {
|
||||
|
||||
.h--inline-2xl {
|
||||
height: calc(var(--font-size-2xl) * var(--line-height-2xl));
|
||||
}
|
||||
}
|
||||
}
|
||||
59
packages/css/src/styles/utility/size-sensitive/margin.css
Normal file
59
packages/css/src/styles/utility/size-sensitive/margin.css
Normal file
@@ -0,0 +1,59 @@
|
||||
@layer utility {
|
||||
.my--none {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
.my--xs {
|
||||
margin-block: var(--margin-xs);
|
||||
}
|
||||
|
||||
.my--sm {
|
||||
margin-block: var(--margin-sm);
|
||||
}
|
||||
|
||||
.my--md {
|
||||
margin-block: var(--margin-md);
|
||||
}
|
||||
|
||||
.my--lg {
|
||||
margin-block: var(--margin-lg);
|
||||
}
|
||||
|
||||
.my--xl {
|
||||
margin-block: var(--margin-xl);
|
||||
}
|
||||
|
||||
.my--2xl {
|
||||
margin-block: var(--margin-2xl);
|
||||
}
|
||||
|
||||
/* ======================== */
|
||||
|
||||
.mx--none {
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.mx--xs {
|
||||
margin-inline: var(--margin-xs);
|
||||
}
|
||||
|
||||
.mx--sm {
|
||||
margin-inline: var(--margin-sm);
|
||||
}
|
||||
|
||||
.mx--md {
|
||||
margin-inline: var(--margin-md);
|
||||
}
|
||||
|
||||
.mx--lg {
|
||||
margin-inline: var(--margin-lg);
|
||||
}
|
||||
|
||||
.mx--xl {
|
||||
margin-inline: var(--margin-xl);
|
||||
}
|
||||
|
||||
.mx--2xl {
|
||||
margin-inline: var(--margin-2xl);
|
||||
}
|
||||
}
|
||||
@@ -2,48 +2,90 @@
|
||||
.px--none {
|
||||
padding-inline: 0px;
|
||||
}
|
||||
|
||||
.px--xs {
|
||||
/* 4px, 24px - 16px = 8px */
|
||||
padding-inline: var(--padding-xs);
|
||||
}
|
||||
|
||||
.px--sm {
|
||||
/* 4px, 28px - 20px = 8px */
|
||||
padding-inline: var(--padding-sm);
|
||||
}
|
||||
|
||||
.px--md {
|
||||
/* 10px */
|
||||
padding-inline: var(--padding-md);
|
||||
}
|
||||
|
||||
.px--lg {
|
||||
/* 16px */
|
||||
padding-inline: var(--padding-lg);
|
||||
}
|
||||
|
||||
.px--xl {
|
||||
padding-inline: var(--padding-xl);
|
||||
}
|
||||
|
||||
.px--2xl {
|
||||
padding-inline: var(--padding-2xl);
|
||||
}
|
||||
|
||||
/* ------------------------ */
|
||||
.py--none {
|
||||
padding-block: 0px;
|
||||
}
|
||||
|
||||
.py--xs {
|
||||
padding-block: var(--padding-xs);
|
||||
}
|
||||
|
||||
.py--sm {
|
||||
padding-block: var(--padding-sm);
|
||||
}
|
||||
|
||||
.py--md {
|
||||
padding-block: var(--padding-md);
|
||||
}
|
||||
|
||||
.py--lg {
|
||||
padding-block: var(--padding-lg);
|
||||
}
|
||||
|
||||
.py--xl {
|
||||
padding-block: var(--padding-xl);
|
||||
}
|
||||
|
||||
.py--2xl {
|
||||
padding-block: var(--padding-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================== */
|
||||
.px--long-xs {
|
||||
/* 6px */
|
||||
padding-inline: var(--padding-long-xs);
|
||||
}
|
||||
|
||||
.px--long-sm {
|
||||
/* 8px */
|
||||
padding-inline: var(--padding-long-sm);
|
||||
}
|
||||
|
||||
.px--long-md {
|
||||
/* 10px */
|
||||
padding-inline: var(--padding-long-md);
|
||||
}
|
||||
|
||||
.px--long-lg {
|
||||
/* 16px */
|
||||
padding-inline: var(--padding-long-lg);
|
||||
}
|
||||
|
||||
.px--long-xl {
|
||||
padding-inline: var(--padding-long-xl);
|
||||
}
|
||||
|
||||
.px--long-2xl {
|
||||
padding-inline: var(--padding-long-2xl);
|
||||
}
|
||||
}
|
||||
@@ -1,45 +1,56 @@
|
||||
@layer utility {
|
||||
.w--item--xs {
|
||||
.w--item-xs {
|
||||
/* 24px minimum touch size for text line */
|
||||
width: var(--height-item-xs);
|
||||
}
|
||||
.w--item--sm {
|
||||
|
||||
.w--item-sm {
|
||||
/* 30px save space for most used size */
|
||||
width: var(--height-item-sm);
|
||||
}
|
||||
.w--item--md {
|
||||
|
||||
.w--item-md {
|
||||
/* 34px most used size */
|
||||
width: var(--height-item-lg);
|
||||
}
|
||||
|
||||
.w--item-lg {
|
||||
/* 44px maximum touch size without waste */
|
||||
width: var(--height-item-lg);
|
||||
}
|
||||
.w--item--xl {
|
||||
|
||||
.w--item-xl {
|
||||
/* 56px section-header bar */
|
||||
width: var(--height-item-xl);
|
||||
}
|
||||
|
||||
.w--item--2xl {
|
||||
/* 64px navigation bar */
|
||||
width: var(--height-item-xl);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------- */
|
||||
.w--inline--xs {
|
||||
.w--inline-xs {
|
||||
width: calc(var(--font-size-xs) * var(--line-height-xs));
|
||||
}
|
||||
.w--inline--sm {
|
||||
|
||||
.w--inline-sm {
|
||||
width: calc(var(--font-size-sm) * var(--line-height-sm));
|
||||
}
|
||||
.w--inline--md {
|
||||
|
||||
.w--inline-md {
|
||||
width: calc(var(--font-size-md) * var(--line-height-md));
|
||||
}
|
||||
.w--inline--lg {
|
||||
|
||||
.w--inline-lg {
|
||||
width: calc(var(--font-size-lg) * var(--line-height-lg));
|
||||
}
|
||||
.w--inline--xl {
|
||||
|
||||
.w--inline-xl {
|
||||
width: calc(var(--font-size-xl) * var(--line-height-xl));
|
||||
}
|
||||
.w--inline--xl {
|
||||
|
||||
.w--inline-xl {
|
||||
width: calc(var(--font-size-2xl) * var(--line-height-2xl));
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/css/src/styles/utils/cpm.ts
Normal file
27
packages/css/src/styles/utils/cpm.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
export function cpm(...classes: (string[] | string)[]) {
|
||||
const map = new Map<string, string>();
|
||||
|
||||
function dealClass(cls: string) {
|
||||
// 提取前缀和后缀
|
||||
const prifix = cls.split("--")[0];
|
||||
|
||||
// 使用set覆盖（自动新建），而不是push
|
||||
map.set(prifix, cls);
|
||||
}
|
||||
|
||||
classes.forEach((item) => {
|
||||
// 如果是 string 直接处理
|
||||
if (typeof item === "string") {
|
||||
dealClass(item);
|
||||
} else {
|
||||
// 否则肯定是 string[]
|
||||
item.forEach((i) => {
|
||||
dealClass(i);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const resultString = Array.from(map.values()).join(" ");
|
||||
|
||||
return resultString;
|
||||
}
|
||||
41
packages/css/tsconfig.build.json
Normal file
41
packages/css/tsconfig.build.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"noEmit": false,
|
||||
"emitDeclarationOnly": true,
|
||||
"declaration": true,
|
||||
"rootDir": "./src",
|
||||
"outDir": "./dist",
|
||||
"declarationDir": "./dist"
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"dist",
|
||||
".turbo/**/*",
|
||||
".cache/**/*",
|
||||
".vite/**/*",
|
||||
"vite.config.ts",
|
||||
"*.config.ts",
|
||||
"*.config.js",
|
||||
"tsconfig.*.json",
|
||||
"__tests__/**/*",
|
||||
"test/**/*",
|
||||
"tests/**/*",
|
||||
"**/*.test.ts",
|
||||
"**/*.test.tsx",
|
||||
"**/*.spec.ts",
|
||||
"**/*.spec.tsx",
|
||||
".storybook/**/*",
|
||||
"stories/**/*",
|
||||
"example/**/*",
|
||||
"examples/**/*",
|
||||
"scripts/**/*",
|
||||
".env",
|
||||
".env.*",
|
||||
"public/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"LICENSE"
|
||||
]
|
||||
}
|
||||
@@ -14,8 +14,7 @@
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src", "scripts", "vite.config.ts"]
|
||||
}
|
||||
39
packages/css/vite.config.ts
Normal file
39
packages/css/vite.config.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import path from "path";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
|
||||
build: {
|
||||
cssMinify: false,
|
||||
|
||||
lib: {
|
||||
entry: path.resolve(import.meta.dirname, "src/index.ts"),
|
||||
formats: ["es", "cjs"],
|
||||
fileName: (format) => `index.${format}.js`,
|
||||
},
|
||||
|
||||
rolldownOptions: {
|
||||
external: ["react", "react-dom", "react/jsx-runtime"],
|
||||
output: {
|
||||
// 强制将生成的 CSS 命名为 index.css
|
||||
assetFileNames: (assetInfo) => {
|
||||
if (assetInfo.name && assetInfo.name.endsWith(".css")) {
|
||||
return "index.css";
|
||||
}
|
||||
return "[name].[hash][extname]";
|
||||
},
|
||||
globals: {
|
||||
react: "React",
|
||||
"react-dom": "ReactDOM",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
emptyOutDir: true,
|
||||
sourcemap: true,
|
||||
cssCodeSplit: false,
|
||||
outDir: "dist",
|
||||
},
|
||||
});
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@defgov/ui-web",
|
||||
"name": "@dg/ui-react",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
@@ -24,9 +24,11 @@
|
||||
"scripts": {
|
||||
"gen-index": "ts-node scripts/gen-index.ts",
|
||||
"gen-dts": "tsc -p tsconfig.build.json",
|
||||
"dev": "pnpm gen-index && vite",
|
||||
"build": "pnpm gen-index && vite build && pnpm gen-dts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dg/css": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^25.6.0",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
254
packages/ui-react/scripts/gen-index.ts
Normal file
254
packages/ui-react/scripts/gen-index.ts
Normal file
@@ -0,0 +1,254 @@
|
||||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
|
||||
/**
|
||||
* 默认测试 / story / example / fixture / type 文件匹配规则
|
||||
* 仅用于“识别”，不直接决定是否排除
|
||||
*/
|
||||
const DEFAULT_TEST_FILE_PATTERNS: RegExp[] = [
|
||||
// =========================
|
||||
// Test / Spec
|
||||
// =========================
|
||||
/\.(test|spec)\.(ts|tsx|js|jsx)$/,
|
||||
/\.(test|spec)\.(ts|tsx|js|jsx)\?.*$/, // query param safe
|
||||
|
||||
// =========================
|
||||
// E2E / Playwright / Cypress
|
||||
// =========================
|
||||
/\.(cy|playwright|e2e)\.(ts|tsx|js|jsx)$/,
|
||||
|
||||
// =========================
|
||||
// Storybook
|
||||
// =========================
|
||||
/\.(story|stories)\.(ts|tsx|js|jsx|mdx)$/,
|
||||
|
||||
// =========================
|
||||
// Snapshot / Mock / Fixture
|
||||
// =========================
|
||||
/\.snap$/,
|
||||
/\.mock\.(ts|tsx|js|jsx)$/,
|
||||
/\.fixture\.(ts|tsx|js|jsx)$/,
|
||||
|
||||
// =========================
|
||||
// Type declarations
|
||||
// =========================
|
||||
/\.d\.ts$/,
|
||||
|
||||
// =========================
|
||||
// Examples / Demos / Docs
|
||||
// =========================
|
||||
/\.(example|demo|docs)\.(ts|tsx|js|jsx)$/,
|
||||
];
|
||||
|
||||
/**
|
||||
* 测试 / 辅助目录（目录级排除）
|
||||
*/
|
||||
const DEFAULT_TEST_DIR_PATTERNS: RegExp[] = [
|
||||
/[/\\](__tests__|tests|test|spec|__mocks__|__fixtures__|__snapshots__)[\/\\]/,
|
||||
/[/\\](cypress|playwright|e2e|__e2e__|__playwright__)[\/\\]/,
|
||||
/[/\\](story|stories|\.storybook)[\/\\]/,
|
||||
/[/\\](types|type|typings|interfaces)[\/\\]/,
|
||||
/[/\\](examples|example|demo|demos|docs)[\/\\]/,
|
||||
];
|
||||
|
||||
type Config = {
|
||||
outputDir: string;
|
||||
outputFile: string;
|
||||
scanDirs: string[];
|
||||
preamble?: string[];
|
||||
importPrefix?: string;
|
||||
entryFilePatterns?: RegExp[];
|
||||
barrelFirstMode?: boolean;
|
||||
includeFilePatterns?: RegExp[];
|
||||
excludeFilePatterns?: RegExp[];
|
||||
excludeDirPatterns?: RegExp[];
|
||||
};
|
||||
|
||||
const tsConfig: Config = {
|
||||
outputDir: "src",
|
||||
outputFile: "index.ts",
|
||||
scanDirs: ["src"],
|
||||
importPrefix: "export * from",
|
||||
barrelFirstMode: true,
|
||||
preamble: ["import './index.css';"],
|
||||
entryFilePatterns: [/^index\.(js|ts|jsx|tsx)$/],
|
||||
includeFilePatterns: [/\.(js|ts|jsx|tsx)$/],
|
||||
excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
|
||||
excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
|
||||
};
|
||||
|
||||
const cssConfig: Config = {
|
||||
outputDir: "src",
|
||||
outputFile: "index.css",
|
||||
scanDirs: ["src"],
|
||||
importPrefix: "@import",
|
||||
barrelFirstMode: false,
|
||||
entryFilePatterns: [/^index\.(css)$/],
|
||||
includeFilePatterns: [/\.(css)$/],
|
||||
excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
|
||||
excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
|
||||
};
|
||||
|
||||
function isEntryFile(fileName: string, config: Config): boolean {
|
||||
const regExps = config.entryFilePatterns;
|
||||
|
||||
if (!regExps || regExps.length === 0) return false;
|
||||
|
||||
return regExps.some((regExp) => regExp.test(fileName));
|
||||
}
|
||||
|
||||
function isIncludeFile(fileName: string, config: Config): boolean {
|
||||
const regExps = config.includeFilePatterns;
|
||||
|
||||
if (!regExps || regExps.length === 0) return false;
|
||||
|
||||
return regExps.some((regExp) => regExp.test(fileName));
|
||||
}
|
||||
|
||||
function isExcludeFile(fileName: string, config: Config): boolean {
|
||||
const regExps = config.excludeFilePatterns;
|
||||
|
||||
if (!regExps || regExps.length === 0) return false;
|
||||
|
||||
return regExps.some((regExp) => regExp.test(fileName));
|
||||
}
|
||||
|
||||
function isExcludeDir(filePath: string, config: Config): boolean {
|
||||
const regExps = config.excludeDirPatterns;
|
||||
|
||||
if (!regExps || regExps.length === 0) return false;
|
||||
|
||||
return regExps.some((regExp) => regExp.test(filePath));
|
||||
}
|
||||
|
||||
function isValidDir(filePath: string, config: Config): boolean {
|
||||
if (isExcludeDir(filePath, config)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function isValidFile(fileName: string, config: Config): boolean {
|
||||
if (isIncludeFile(fileName, config) && !isExcludeFile(fileName, config)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
const buildExportStatement = (filePath: string, config: Config) => {
|
||||
// 文件夹（不是文件）与目标文件的相对路径
|
||||
let exportFilePath = path.relative(config.outputDir, filePath);
|
||||
|
||||
// 去除扩展名，并且转化成正斜杠
|
||||
const exportFilePathWithoutExt = path
|
||||
.join(
|
||||
path.dirname(exportFilePath),
|
||||
path.basename(exportFilePath, path.extname(exportFilePath)),
|
||||
)
|
||||
.replace(/\\/g, "/");
|
||||
|
||||
// 加上 ./ 前缀
|
||||
return `${config.importPrefix} './${exportFilePathWithoutExt}';`;
|
||||
};
|
||||
|
||||
function isOutputEntry(filePath: string, config: Config) {
|
||||
const outputFilePath = path.resolve(config.outputDir, config.outputFile);
|
||||
const targetFilePath = path.resolve(filePath);
|
||||
|
||||
return outputFilePath === targetFilePath;
|
||||
}
|
||||
|
||||
function generateExports(dirPath: string, config: Config): string[] {
|
||||
const fileNames = fs.readdirSync(dirPath);
|
||||
const exports: string[] = [];
|
||||
|
||||
// =========================
|
||||
// 逻辑分支：Barrel First Mode
|
||||
// =========================
|
||||
if (config.barrelFirstMode) {
|
||||
// 查找当前目录有没有 index.ts
|
||||
const entryFileName = fileNames.find((fileName) => {
|
||||
const filePath = path.join(dirPath, fileName);
|
||||
return fs.statSync(filePath).isFile() && isEntryFile(fileName, config);
|
||||
});
|
||||
// 如果有
|
||||
if (entryFileName) {
|
||||
const entryFilePath = path.join(dirPath, entryFileName);
|
||||
|
||||
// 如果是 outputFile 自身，则跳过
|
||||
if (isOutputEntry(entryFilePath, config)) {
|
||||
console.log(`⏭️ 跳过自身入口文件: ${entryFilePath}`);
|
||||
} else {
|
||||
exports.push(buildExportStatement(entryFilePath, config));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =========================
|
||||
// 逻辑分支：index.ts 不存在，则继续正常遍历与递归
|
||||
// =========================
|
||||
fileNames.forEach((fileName) => {
|
||||
const filePath = path.join(dirPath, fileName);
|
||||
const stat = fs.statSync(filePath);
|
||||
|
||||
// 情况1：是文件，且通过了校验
|
||||
if (
|
||||
stat.isFile() &&
|
||||
isValidFile(fileName, config) &&
|
||||
!isEntryFile(fileName, config)
|
||||
) {
|
||||
exports.push(buildExportStatement(filePath, config));
|
||||
}
|
||||
// 情况2：是文件夹，且通过了校验，递归扫描子文件夹
|
||||
else if (stat.isDirectory() && isValidDir(filePath, config)) {
|
||||
const subExports = generateExports(filePath, config);
|
||||
exports.push(...subExports);
|
||||
}
|
||||
});
|
||||
|
||||
return exports;
|
||||
}
|
||||
|
||||
function genIndexFile(config: Config) {
|
||||
// 确保输出目录存在，如果不存在就递归创建
|
||||
if (!fs.existsSync(config.outputDir)) {
|
||||
fs.mkdirSync(config.outputDir, { recursive: true });
|
||||
}
|
||||
|
||||
const allExports: string[] = [];
|
||||
|
||||
// 遍历所有需要扫描的根目录
|
||||
config.scanDirs.forEach((scanDir) => {
|
||||
// 只有当目录真实存在时才进行扫描
|
||||
if (fs.existsSync(scanDir)) {
|
||||
const exports = generateExports(scanDir, config);
|
||||
allExports.push(...exports);
|
||||
} else {
|
||||
console.warn(`⚠️ 警告：扫描目录不存在，已跳过 -> ${scanDir}`);
|
||||
}
|
||||
});
|
||||
|
||||
// 拼接最终的文件内容：前言 + 导出语句（使用 Set 自动去重）
|
||||
const fileContent = [
|
||||
...(config.preamble ?? []),
|
||||
...Array.from(new Set(allExports)),
|
||||
].join("\n");
|
||||
|
||||
// 将内容写入到最终的 index.ts 文件中
|
||||
const outputFilePath = path.join(config.outputDir, config.outputFile);
|
||||
fs.writeFileSync(outputFilePath, fileContent, "utf-8");
|
||||
|
||||
console.log(`✨ 成功生成入口文件: ${outputFilePath}`);
|
||||
}
|
||||
|
||||
// ================= 脚本执行入口 =================
|
||||
try {
|
||||
console.log("🚀 开始扫描并生成入口文件...");
|
||||
genIndexFile(tsConfig);
|
||||
genIndexFile(cssConfig);
|
||||
console.log("✅ 脚本执行完毕！");
|
||||
} catch (error) {
|
||||
console.error("❌ 脚本执行失败:", error);
|
||||
process.exit(1); // 如果报错，让进程以非 0 状态码退出
|
||||
}
|
||||
12
packages/ui-react/src/assets/svg/BoldSvg.tsx
Normal file
12
packages/ui-react/src/assets/svg/BoldSvg.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export const BoldSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
8
packages/ui-react/src/assets/svg/CheckIndicatorSvg.tsx
Normal file
8
packages/ui-react/src/assets/svg/CheckIndicatorSvg.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
export const CheckIndicatorSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
12
packages/ui-react/src/assets/svg/ChevronRightSvg.tsx
Normal file
12
packages/ui-react/src/assets/svg/ChevronRightSvg.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export const ChevronRightSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m9 6l6 6l-6 6"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
8
packages/ui-react/src/assets/svg/CutSvg.tsx
Normal file
8
packages/ui-react/src/assets/svg/CutSvg.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
export const CutSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12.14 9.342L7.37 2.329a.75.75 0 1 0-1.24.844l5.13 7.545l-2.395 3.743a4 4 0 1 0 1.178.943l2.135-3.337l2.065 3.036a4 4 0 1 0 1.261-.813l-2.447-3.597l.002-.002zM4.5 18a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m10 0a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m-.562-8.684l3.943-6.162a.75.75 0 1 0-1.263-.808L13.02 7.968z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
8
packages/ui-react/src/assets/svg/DownloadSvg.tsx
Normal file
8
packages/ui-react/src/assets/svg/DownloadSvg.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
export const DownloadSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M20 16a1 1 0 0 1 1 1v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2a1 1 0 0 1 2 0v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a1 1 0 0 1 1-1M12 3a1 1 0 0 1 1 1v9.585l3.293-3.292a1 1 0 0 1 1.414 1.414l-5 5a1 1 0 0 1-.09.08l.09-.08a1 1 0 0 1-.674.292L12 17h-.032l-.054-.004L12 17a1 1 0 0 1-.617-.213a1 1 0 0 1-.09-.08l-5-5a1 1 0 0 1 1.414-1.414L11 13.585V4a1 1 0 0 1 1-1"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
14
packages/ui-react/src/assets/svg/FileSvg.tsx
Normal file
14
packages/ui-react/src/assets/svg/FileSvg.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
export const FileSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
|
||||
<path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
8
packages/ui-react/src/assets/svg/KeySvg.tsx
Normal file
8
packages/ui-react/src/assets/svg/KeySvg.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
export const KeySvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7 14q-.825 0-1.412-.587T5 12t.588-1.412T7 10t1.413.588T9 12t-.587 1.413T7 14m0 4q-2.5 0-4.25-1.75T1 12t1.75-4.25T7 6q1.675 0 3.038.825T12.2 9h8.375q.2 0 .388.075t.337.225l2 2q.15.15.212.325t.063.375t-.063.375t-.212.325l-3.175 3.175q-.125.125-.3.2t-.35.1t-.35-.025t-.325-.175L17.5 15l-1.425 1.075q-.125.1-.275.15t-.3.05t-.313-.05t-.287-.15L13.375 15H12.2q-.8 1.35-2.163 2.175T7 18m0-2q1.4 0 2.463-.85T10.875 13H14l1.45 1.025v.013v-.013L17.5 12.5l1.775 1.375L21.15 12h-.012h.012l-1-1v-.012V11h-9.275q-.35-1.3-1.412-2.15T7 8Q5.35 8 4.175 9.175T3 12t1.175 2.825T7 16"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
14
packages/ui-react/src/assets/svg/MeshSvg.tsx
Normal file
14
packages/ui-react/src/assets/svg/MeshSvg.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
export const MeshSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M3 9h18M3 15h18M8 4c.485.445 3.5 3.312 3.5 8c0 .663-.07 4.848-3.5 8m7-16a17 17 0 0 1 2.004 8c0 1.51-.201 4.628-2.004 8" />
|
||||
<path d="M18.778 20H5.222A2.22 2.22 0 0 1 3 17.778V6.222C3 4.995 3.995 4 5.222 4h13.556C20.005 4 21 4.995 21 6.222v11.556A2.22 2.22 0 0 1 18.778 20" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
12
packages/ui-react/src/assets/svg/MoonSvg.tsx
Normal file
12
packages/ui-react/src/assets/svg/MoonSvg.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export const MoonSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
8
packages/ui-react/src/assets/svg/PasteSvg.tsx
Normal file
8
packages/ui-react/src/assets/svg/PasteSvg.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
export const PasteSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12.753 2c1.158 0 2.111.875 2.234 2h1.763a2.25 2.25 0 0 1 2.245 2.096L19 6.25a.75.75 0 0 1-.647.742L18.249 7a.75.75 0 0 1-.742-.647L17.5 6.25a.75.75 0 0 0-.648-.743L16.75 5.5h-2.132a2.24 2.24 0 0 1-1.865.993H9.247a2.24 2.24 0 0 1-1.865-.992L5.25 5.5a.75.75 0 0 0-.743.648L4.5 6.25v13.505c0 .38.282.693.648.743l.102.007h3a.75.75 0 0 1 .743.647l.007.102a.75.75 0 0 1-.75.75h-3a2.25 2.25 0 0 1-2.245-2.095L3 19.755V6.25a2.25 2.25 0 0 1 2.096-2.245L5.25 4h1.763a2.247 2.247 0 0 1 2.234-2zm5.997 6a2.25 2.25 0 0 1 2.245 2.096l.005.154v9.5a2.25 2.25 0 0 1-2.096 2.245L18.75 22h-6.5a2.25 2.25 0 0 1-2.245-2.096L10 19.75v-9.5a2.25 2.25 0 0 1 2.096-2.245L12.25 8zm0 1.5h-6.5a.75.75 0 0 0-.743.648l-.007.102v9.5c0 .38.282.694.648.743l.102.007h6.5a.75.75 0 0 0 .743-.648l.007-.102v-9.5a.75.75 0 0 0-.648-.743zm-5.997-6H9.247a.747.747 0 0 0 0 1.493h3.506a.747.747 0 1 0 0-1.493"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
12
packages/ui-react/src/assets/svg/Ruler.tsx
Normal file
12
packages/ui-react/src/assets/svg/Ruler.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export const RulerSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 4h14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7a1 1 0 0 0-1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1M4 8h2m-2 4h3m-3 4h2M8 4v2m4-2v3m4-3v2"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
8
packages/ui-react/src/assets/svg/SearchSvg.tsx
Normal file
8
packages/ui-react/src/assets/svg/SearchSvg.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
export const SearchSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
9
packages/ui-react/src/assets/svg/SettingSvg.tsx
Normal file
9
packages/ui-react/src/assets/svg/SettingSvg.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
export const SettingSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
d="M12.563 3.2h-1.126l-.645 2.578l-.647.2a6.3 6.3 0 0 0-1.091.452l-.599.317l-2.28-1.368l-.796.797l1.368 2.28l-.317.598a6.3 6.3 0 0 0-.453 1.091l-.199.647l-2.578.645v1.126l2.578.645l.2.647q.173.568.452 1.091l.317.599l-1.368 2.28l.797.796l2.28-1.368l.598.317q.523.278 1.091.453l.647.199l.645 2.578h1.126l.645-2.578l.647-.2a6.3 6.3 0 0 0 1.091-.452l.599-.317l2.28 1.368l.796-.797l-1.368-2.28l.317-.598q.278-.523.453-1.091l.199-.647l2.578-.645v-1.126l-2.578-.645l-.2-.647a6.3 6.3 0 0 0-.452-1.091l-.317-.599l1.368-2.28l-.797-.796l-2.28 1.368l-.598-.317a6.3 6.3 0 0 0-1.091-.453l-.647-.199zm2.945 2.17l1.833-1.1a1 1 0 0 1 1.221.15l1.018 1.018a1 1 0 0 1 .15 1.221l-1.1 1.833q.33.62.54 1.3l2.073.519a1 1 0 0 1 .757.97v1.438a1 1 0 0 1-.757.97l-2.073.519q-.21.68-.54 1.3l1.1 1.833a1 1 0 0 1-.15 1.221l-1.018 1.018a1 1 0 0 1-1.221.15l-1.833-1.1q-.62.33-1.3.54l-.519 2.073a1 1 0 0 1-.97.757h-1.438a1 1 0 0 1-.97-.757l-.519-2.073a7.5 7.5 0 0 1-1.3-.54l-1.833 1.1a1 1 0 0 1-1.221-.15L4.42 18.562a1 1 0 0 1-.15-1.221l1.1-1.833a7.5 7.5 0 0 1-.54-1.3l-2.073-.519A1 1 0 0 1 2 12.72v-1.438a1 1 0 0 1 .757-.97l2.073-.519q.21-.68.54-1.3L4.27 6.66a1 1 0 0 1 .15-1.221L5.438 4.42a1 1 0 0 1 1.221-.15l1.833 1.1q.62-.33 1.3-.54l.519-2.073A1 1 0 0 1 11.28 2h1.438a1 1 0 0 1 .97.757l.519 2.073q.68.21 1.3.54zM12 14.8a2.8 2.8 0 1 0 0-5.6a2.8 2.8 0 0 0 0 5.6m0 1.2a4 4 0 1 1 0-8a4 4 0 0 1 0 8"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
23
packages/ui-react/src/assets/svg/SpinnerSvg.tsx
Normal file
23
packages/ui-react/src/assets/svg/SpinnerSvg.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
export const SpinnerSvg = (props: React.SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
|
||||
opacity="0.25"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
dur="0.75s"
|
||||
repeatCount="indefinite"
|
||||
type="rotate"
|
||||
values="0 12 12;360 12 12"
|
||||
/>
|
||||
</path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
12
packages/ui-react/src/assets/svg/SunSvg.tsx
Normal file
12
packages/ui-react/src/assets/svg/SunSvg.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export const SunSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
14
packages/ui-react/src/assets/svg/UserSvg.tsx
Normal file
14
packages/ui-react/src/assets/svg/UserSvg.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
export const UserSvg = (props: React.SVGProps<SVGSVGElement>) => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
d="M19.618 21.25c0-3.602-4.016-6.53-7.618-6.53s-7.618 2.928-7.618 6.53M12 11.456a4.353 4.353 0 1 0 0-8.706a4.353 4.353 0 0 0 0 8.706"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
12
packages/ui-react/src/assets/svg/VolumeHighSvg.tsx
Normal file
12
packages/ui-react/src/assets/svg/VolumeHighSvg.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export const VolumeHighSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
12
packages/ui-react/src/assets/svg/VolumeLowSvg.tsx
Normal file
12
packages/ui-react/src/assets/svg/VolumeLowSvg.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export const VolumeLowSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 8a5 5 0 0 1 0 8m-9-1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
12
packages/ui-react/src/assets/svg/VolumeMuteSvg.tsx
Normal file
12
packages/ui-react/src/assets/svg/VolumeMuteSvg.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export const VolumeMuteSvg = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5zm10-5l4 4m0-4l-4 4"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
19
packages/ui-react/src/componnets/button/ButtonIcon.tsx
Normal file
19
packages/ui-react/src/componnets/button/ButtonIcon.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { useEffect } from "react";
|
||||
import { Slot } from "../../utils/Slot";
|
||||
import { useButtonContext } from "./common/ButtonContext";
|
||||
|
||||
export const ButtonIcon = (props: any) => {
|
||||
const { children, ...rest } = props;
|
||||
|
||||
const { slotRegistry } = useButtonContext();
|
||||
|
||||
useEffect(() => {
|
||||
slotRegistry.setSlots?.((prev) => ({
|
||||
...prev,
|
||||
icon: <Slot {...rest}>{children}</Slot>,
|
||||
}));
|
||||
}, [children, slotRegistry]);
|
||||
|
||||
return null;
|
||||
};
|
||||
ButtonIcon.displayName = "ButtonIcon";
|
||||
25
packages/ui-react/src/componnets/button/ButtonLoading.tsx
Normal file
25
packages/ui-react/src/componnets/button/ButtonLoading.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import { useEffect } from "react";
|
||||
import type { ReactNode } from "react";
|
||||
import { useButtonContext } from "./common/ButtonContext";
|
||||
import { Slot } from "../../utils/Slot";
|
||||
|
||||
|
||||
type ButtonLoadingProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export const ButtonLoading = (props: ButtonLoadingProps) => {
|
||||
const { children, ...rest } = props;
|
||||
const { slotRegistry } = useButtonContext();
|
||||
|
||||
useEffect(() => {
|
||||
slotRegistry.setSlots?.(prev => ({
|
||||
...prev,
|
||||
loading: <Slot {...rest}>{children}</Slot>,
|
||||
}));
|
||||
}, [children, slotRegistry]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
ButtonLoading.displayName = "ButtonLoading";
|
||||
60
packages/ui-react/src/componnets/button/ButtonRoot.tsx
Normal file
60
packages/ui-react/src/componnets/button/ButtonRoot.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { type ComponentPropsWithoutRef, forwardRef } from "react";
|
||||
import { ButtonContext, type ButtonSlot } from "./common/ButtonContext";
|
||||
import { useSlotRegistry } from "../../utils/useSlotRegistry";
|
||||
import { mergeProps } from "../../utils/mergeProps";
|
||||
import { useDefaultedProps } from "../../utils/useDefaultedProps";
|
||||
import { brandRecipe, cpm, itemSizeRecipe, variantRecipe } from "@dg/css";
|
||||
|
||||
export type ButtonRootOwnProps = {
|
||||
size?: "xs" | "sm" | "md" | "lg";
|
||||
variant?: "filled" | "outline" | "subtle" | "ghost";
|
||||
shape?: "rounded" | "square" | "circle";
|
||||
brand?: "success" | "danger" | "info" | "warning" | "emphasize";
|
||||
iconOnly?: boolean;
|
||||
hideIcon?: boolean;
|
||||
loading?: boolean;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export type ButtonRootPrimitiveProps = Omit<
|
||||
ComponentPropsWithoutRef<"button">,
|
||||
keyof ButtonRootOwnProps
|
||||
>;
|
||||
|
||||
export type ButtonRootProps = ButtonRootOwnProps & ButtonRootPrimitiveProps;
|
||||
|
||||
export const ButtonRoot = forwardRef<HTMLButtonElement, ButtonRootProps>(
|
||||
(props, ref) => {
|
||||
const defaultedProps = useDefaultedProps(props, {
|
||||
size: "md",
|
||||
variant: "filled",
|
||||
shape: "rounded",
|
||||
brand: "info",
|
||||
iconOnly: false,
|
||||
disabled: false,
|
||||
});
|
||||
const { size, variant, shape, brand, iconOnly, disabled, children } =
|
||||
defaultedProps;
|
||||
|
||||
const clx = cpm(
|
||||
itemSizeRecipe({ size, shape, iconOnly }),
|
||||
variantRecipe({ variant, disabled }),
|
||||
brandRecipe({ brand }),
|
||||
);
|
||||
|
||||
const mergedProps = mergeProps({ className: clx }, defaultedProps);
|
||||
|
||||
const slotRegistry = useSlotRegistry<ButtonSlot>();
|
||||
|
||||
return (
|
||||
<ButtonContext.Provider value={{ slotRegistry }}>
|
||||
<button ref={ref} {...mergedProps}>
|
||||
{slotRegistry.slots?.icon}
|
||||
{children}
|
||||
{slotRegistry.slots?.loading}
|
||||
</button>
|
||||
</ButtonContext.Provider>
|
||||
);
|
||||
},
|
||||
);
|
||||
ButtonRoot.displayName = "Button.Root";
|
||||
@@ -0,0 +1,26 @@
|
||||
// ButtonContext.ts
|
||||
import { createContext, useContext, type ReactNode } from "react";
|
||||
|
||||
export type ButtonSlot = {
|
||||
icon?: ReactNode;
|
||||
loading?: ReactNode;
|
||||
};
|
||||
|
||||
type ButtonContextValue = {
|
||||
slotRegistry: {
|
||||
slots?: ButtonSlot;
|
||||
setSlots?: React.Dispatch<React.SetStateAction<ButtonSlot | undefined>>;
|
||||
};
|
||||
};
|
||||
|
||||
export const ButtonContext = createContext<ButtonContextValue | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
export const useButtonContext = () => {
|
||||
const ctx = useContext(ButtonContext);
|
||||
if (!ctx) {
|
||||
throw new Error("Button 子组件必须在 Button.Root 内使用");
|
||||
}
|
||||
return ctx;
|
||||
};
|
||||
@@ -2,8 +2,8 @@ import { ButtonIcon } from "./ButtonIcon";
|
||||
import { ButtonLoading } from "./ButtonLoading";
|
||||
import { ButtonRoot } from "./ButtonRoot";
|
||||
|
||||
export namespace Button {
|
||||
export const Root = ButtonRoot;
|
||||
export const Icon = ButtonIcon;
|
||||
export const Loading = ButtonLoading;
|
||||
}
|
||||
export const Button = {
|
||||
Root: ButtonRoot,
|
||||
Icon: ButtonIcon,
|
||||
Loading: ButtonLoading,
|
||||
}
|
||||
0
packages/ui-react/src/index.css
Normal file
0
packages/ui-react/src/index.css
Normal file
29
packages/ui-react/src/index.ts
Normal file
29
packages/ui-react/src/index.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import './index.css';
|
||||
export * from './assets/svg/BoldSvg';
|
||||
export * from './assets/svg/CheckIndicatorSvg';
|
||||
export * from './assets/svg/ChevronRightSvg';
|
||||
export * from './assets/svg/CutSvg';
|
||||
export * from './assets/svg/DownloadSvg';
|
||||
export * from './assets/svg/FileSvg';
|
||||
export * from './assets/svg/KeySvg';
|
||||
export * from './assets/svg/MeshSvg';
|
||||
export * from './assets/svg/MoonSvg';
|
||||
export * from './assets/svg/PasteSvg';
|
||||
export * from './assets/svg/Ruler';
|
||||
export * from './assets/svg/SearchSvg';
|
||||
export * from './assets/svg/SettingSvg';
|
||||
export * from './assets/svg/SpinnerSvg';
|
||||
export * from './assets/svg/SunSvg';
|
||||
export * from './assets/svg/UserSvg';
|
||||
export * from './assets/svg/VolumeHighSvg';
|
||||
export * from './assets/svg/VolumeLowSvg';
|
||||
export * from './assets/svg/VolumeMuteSvg';
|
||||
export * from './componnets/button/index';
|
||||
export * from './componnets/button/ButtonIcon';
|
||||
export * from './componnets/button/ButtonLoading';
|
||||
export * from './componnets/button/ButtonRoot';
|
||||
export * from './componnets/button/common/ButtonContext';
|
||||
export * from './utils/mergeProps';
|
||||
export * from './utils/Slot';
|
||||
export * from './utils/useDefaultedProps';
|
||||
export * from './utils/useSlotRegistry';
|
||||
4
packages/ui-react/src/types/env.d.ts
vendored
Normal file
4
packages/ui-react/src/types/env.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
declare module "*.css" {
|
||||
const content: string;
|
||||
export default content;
|
||||
}
|
||||
107
packages/ui-react/src/utils/mergeProps.ts
Normal file
107
packages/ui-react/src/utils/mergeProps.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
type AnyProps = Record<string, any>;
|
||||
|
||||
function defaultClassMergeFn(...classes: string[]): string {
|
||||
return classes
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean)
|
||||
.join(" ")
|
||||
.trim();
|
||||
}
|
||||
|
||||
// 工具类型
|
||||
type UnionToIntersection<U> =
|
||||
(U extends any ? (k: U) => void : never) extends
|
||||
(k: infer I) => void ? I : never;
|
||||
|
||||
// 泛型入口
|
||||
export function mergeProps<
|
||||
T extends AnyProps[]
|
||||
>(
|
||||
...args: [...T]
|
||||
): UnionToIntersection<T[number]>;
|
||||
|
||||
export function mergeProps<
|
||||
T extends AnyProps[]
|
||||
>(
|
||||
options: { classMergeFn: (...cls: string[]) => string },
|
||||
...args: [...T]
|
||||
): UnionToIntersection<T[number]>;
|
||||
|
||||
export function mergeProps(
|
||||
arg1: any,
|
||||
...rest: any[]
|
||||
): any {
|
||||
let options = {
|
||||
classMergeFn: defaultClassMergeFn,
|
||||
};
|
||||
|
||||
let propsList: AnyProps[];
|
||||
|
||||
if (
|
||||
arg1 &&
|
||||
typeof arg1 === "object" &&
|
||||
!Array.isArray(arg1) &&
|
||||
"classMergeFn" in arg1 &&
|
||||
typeof arg1.classMergeFn === "function"
|
||||
) {
|
||||
options = arg1;
|
||||
propsList = rest;
|
||||
} else {
|
||||
propsList = [arg1, ...rest];
|
||||
}
|
||||
|
||||
const result: AnyProps = {};
|
||||
const eventHandlers = new Map<string, Function[]>();
|
||||
const refs: any[] = [];
|
||||
|
||||
for (const props of propsList) {
|
||||
if (!props) continue;
|
||||
|
||||
if (props.className) {
|
||||
result.className = options.classMergeFn(
|
||||
result.className ?? "",
|
||||
props.className,
|
||||
);
|
||||
}
|
||||
|
||||
if (props.style) {
|
||||
result.style = { ...(result.style ?? {}), ...props.style };
|
||||
}
|
||||
|
||||
if (props.ref) {
|
||||
refs.push(props.ref);
|
||||
}
|
||||
|
||||
for (const key of Object.keys(props)) {
|
||||
if (key.startsWith("on") && typeof props[key] === "function") {
|
||||
if (!eventHandlers.has(key)) {
|
||||
eventHandlers.set(key, []);
|
||||
}
|
||||
eventHandlers.get(key)!.push(props[key]);
|
||||
} else if (key !== "ref" && key !== "className" && key !== "style") {
|
||||
result[key] = props[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// refs
|
||||
if (refs.length === 1) {
|
||||
result.ref = refs[0];
|
||||
} else if (refs.length > 1) {
|
||||
result.ref = (node: any) => {
|
||||
refs.forEach((ref) => {
|
||||
if (typeof ref === "function") ref(node);
|
||||
else if (ref) ref.current = node;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// events
|
||||
eventHandlers.forEach((handlers, key) => {
|
||||
result[key] = (...args: any[]) => {
|
||||
handlers.forEach((fn) => fn(...args));
|
||||
};
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
10
packages/ui-react/src/utils/useDefaultedProps.ts
Normal file
10
packages/ui-react/src/utils/useDefaultedProps.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { useMemo } from "react";
|
||||
|
||||
export function useDefaultedProps<
|
||||
P extends Record<string, any>,
|
||||
D extends Partial<P>,
|
||||
>(props: P, defaults: D): P & D {
|
||||
return useMemo(() => {
|
||||
return { ...defaults, ...props };
|
||||
}, [props, defaults]);
|
||||
}
|
||||
8
packages/ui-react/src/utils/useSlotRegistry.ts
Normal file
8
packages/ui-react/src/utils/useSlotRegistry.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
// useButtonSlots.ts
|
||||
import { useState } from "react";
|
||||
|
||||
export function useSlotRegistry<S>() {
|
||||
const [slots, setSlots] = useState<S>()
|
||||
|
||||
return { slots, setSlots }
|
||||
}
|
||||
@@ -10,6 +10,8 @@
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": [
|
||||
"src/App.tsx",
|
||||
"src/main.tsx",
|
||||
"node_modules",
|
||||
"dist",
|
||||
".turbo/**/*",
|
||||
30
packages/ui-react/tsconfig.json
Normal file
30
packages/ui-react/tsconfig.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2025",
|
||||
"lib": [
|
||||
"ES2025",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"module": "ESNext",
|
||||
"types": [
|
||||
"node",
|
||||
"vite/client"
|
||||
],
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
},
|
||||
"include": [
|
||||
"src",
|
||||
"scripts",
|
||||
"vite.config.ts",
|
||||
]
|
||||
}
|
||||
39
packages/ui-react/vite.config.ts
Normal file
39
packages/ui-react/vite.config.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import path from "path";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
|
||||
build: {
|
||||
cssMinify: false,
|
||||
|
||||
lib: {
|
||||
entry: path.resolve(import.meta.dirname, "src/index.ts"),
|
||||
formats: ["es", "cjs"],
|
||||
fileName: (format) => `index.${format}.js`,
|
||||
},
|
||||
|
||||
rolldownOptions: {
|
||||
external: ["react", "react-dom", "react/jsx-runtime"],
|
||||
output: {
|
||||
// 强制将生成的 CSS 命名为 index.css
|
||||
assetFileNames: (assetInfo) => {
|
||||
if (assetInfo.name && assetInfo.name.endsWith(".css")) {
|
||||
return "index.css";
|
||||
}
|
||||
return "[name].[hash][extname]";
|
||||
},
|
||||
globals: {
|
||||
react: "React",
|
||||
"react-dom": "ReactDOM",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
emptyOutDir: true,
|
||||
sourcemap: true,
|
||||
cssCodeSplit: false,
|
||||
outDir: "dist",
|
||||
},
|
||||
});
|
||||
@@ -24,7 +24,6 @@
|
||||
"scripts": {
|
||||
"gen-index": "ts-node scripts/gen-index.ts",
|
||||
"gen-dts": "tsc -p tsconfig.build.json",
|
||||
"dev": "pnpm gen-index && vite build --watch",
|
||||
"build": "pnpm gen-index && vite build && pnpm gen-dts"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,16 +1 @@
|
||||
@import "tailwindcss";
|
||||
@import './component/accordion/Accordion.css';
|
||||
@import './component/avatar/Avatar.css';
|
||||
@import './component/checkbox/Checkbox.css';
|
||||
@import './component/tooltip/Tooltip.css';
|
||||
@import './styles/theme/global.css';
|
||||
@import './styles/utility/brand.css';
|
||||
@import './styles/utility/font.css';
|
||||
@import './styles/utility/gap.css';
|
||||
@import './styles/utility/height.css';
|
||||
@import './styles/utility/loading.css';
|
||||
@import './styles/utility/margin.css';
|
||||
@import './styles/utility/padding.css';
|
||||
@import './styles/utility/skin.css';
|
||||
@import './styles/utility/variant.css';
|
||||
@import './styles/utility/width.css';
|
||||
@import "tailwindcss";
|
||||
@@ -1,44 +1 @@
|
||||
import './index.css';
|
||||
|
||||
export * from './assets/svg/BoldSvg';
|
||||
export * from './assets/svg/CheckIndicatorSvg';
|
||||
export * from './assets/svg/ChevronRightSvg';
|
||||
export * from './assets/svg/CutSvg';
|
||||
export * from './assets/svg/DownloadSvg';
|
||||
export * from './assets/svg/FileSvg';
|
||||
export * from './assets/svg/KeySvg';
|
||||
export * from './assets/svg/MeshSvg';
|
||||
export * from './assets/svg/MoonSvg';
|
||||
export * from './assets/svg/PasteSvg';
|
||||
export * from './assets/svg/Ruler';
|
||||
export * from './assets/svg/SearchSvg';
|
||||
export * from './assets/svg/SettingSvg';
|
||||
export * from './assets/svg/SpinnerSvg';
|
||||
export * from './assets/svg/SunSvg';
|
||||
export * from './assets/svg/UserSvg';
|
||||
export * from './assets/svg/VolumeHighSvg';
|
||||
export * from './assets/svg/VolumeLowSvg';
|
||||
export * from './assets/svg/VolumeMuteSvg';
|
||||
export * from './common/Box';
|
||||
export * from './common/CommonProps';
|
||||
export * from './common/Slot';
|
||||
export * from './component/accordion/Accordion';
|
||||
export * from './component/accordion/AccordionItem';
|
||||
export * from './component/accordion/AccordionPanel';
|
||||
export * from './component/accordion/AccordionTrigger';
|
||||
export * from './component/avatar/Avatar';
|
||||
export * from './component/button/Button';
|
||||
export * from './component/checkbox/Checkbox';
|
||||
export * from './component/icon/Icon';
|
||||
export * from './component/theme/Theme';
|
||||
export * from './component/theme/ThemeContext';
|
||||
export * from './component/theme/useTheme';
|
||||
export * from './component/tooltip/Tooltip';
|
||||
export * from './component/tooltip/TooltipPopup';
|
||||
export * from './component/tooltip/TooltipTrigger';
|
||||
export * from './component/username-field/UsernameField';
|
||||
export * from './styles/recipe/IinlineSize.recipe';
|
||||
export * from './styles/recipe/ItemSize.recipe';
|
||||
export * from './styles/recipe/brand.recipe';
|
||||
export * from './styles/recipe/variant.recipe';
|
||||
export * from '../../css/utils/clspm';
|
||||
import './index.css'
|
||||
@@ -1,7 +0,0 @@
|
||||
import { useState } from "react";
|
||||
|
||||
function App() {
|
||||
return <div></div>;
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>vite-project</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,9 +0,0 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user