folinhilo/defgov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构：提交全新项目代码

Browse Source
This commit is contained in:
folinhilo
2026-05-04 00:04:03 +08:00
commit bca6c31df7
100 changed files with 5524 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# 基础忽略规则
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
*.swp
*.swo
# 根目录依赖/构建产物
node_modules/
dist/
build/
coverage/
# Monorepo 子包专属忽略（核心）
packages/**/dist/
packages/**/node_modules/
packages/**/build/
packages/**/coverage/
packages/**/.env*
packages/**/npm-debug.log*
packages/**/yarn-debug.log*
packages/**/yarn-error.log*
packages/**/pnpm-debug.log*

1
.npmrc Normal file
View File

@@ -0,0 +1 @@
registry = https://registry.npmmirror.com/

20
package.json Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "defgov",
"private": true,
"type": "module",
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev"
},
"devDependencies": {
"turbo": "^2.8.0"
},
"engines": {
"node": ">=20"
},
"workspaces": [
"packages/*",
"app/*"
],
"packageManager": "pnpm@11.0.0-rc.5+sha512.c469fb6aa13a99e57aec935cd7b86ff422701f4602ecac2231d3dc20910586ebfb6b50a7b455d0778ec22ae56912d8d8e88e9f9e0a03c0875a6a41783a94a1bd"
}

19
packages/bookmark-sync/manifest.json Normal file
View File

@@ -0,0 +1,19 @@
{
"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"
}
}
}

15
packages/bookmark-sync/package.json Normal file
View File

@@ -0,0 +1,15 @@
{
"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"
}
}

79
packages/bookmark-sync/src/controller.ts Normal file
View File

@@ -0,0 +1,79 @@
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);
}
}
}

47
packages/bookmark-sync/src/custom-bookmark-bar/newtab.html Normal file
View File

@@ -0,0 +1,47 @@
<!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>

76
packages/bookmark-sync/src/custom-bookmark-bar/popup.ts Normal file
View File

@@ -0,0 +1,76 @@
// 递归提取某个节点下的所有书签 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);

5
packages/bookmark-sync/src/types.ts Normal file
View File

@@ -0,0 +1,5 @@
import browser from "webextension-polyfill";
export type Account = { id: string; email: string; password: string };
export type BookmarkTreeNode = browser.Bookmarks.BookmarkTreeNode;

20
packages/bookmark-sync/src/utils.ts Normal file
View File

@@ -0,0 +1,20 @@
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);
}
}

118
packages/bookmark-sync/tsconfig.json Normal file
View File

@@ -0,0 +1,118 @@
{
// 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"
]
}

118
packages/manga-grabber/tsconfig.json Normal file
View File

@@ -0,0 +1,118 @@
{
// 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"
]
}

118
packages/movie-grabber/tsconfig.json Normal file
View File

@@ -0,0 +1,118 @@
{
// 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"
]
}

118
packages/music-grabber/tsconfig.json Normal file
View File

@@ -0,0 +1,118 @@
{
// 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"
]
}

12
packages/note-maker/package.json Normal file
View File

@@ -0,0 +1,12 @@
{
"name": "defgov-note-maker",
"version": "0.0.0",
"private": true,
"peerDependencies": {
"parse5": "^8.0.1"
},
"devDependencies": {
"@types/node": "^25.6.0",
"typescript": "^6.0.3"
}
}

0
packages/note-maker/src/content-block/dg-ls.ts Normal file
View File

8
packages/note-maker/src/content-block/dg-text.ts Normal file
View File

@@ -0,0 +1,8 @@
class DgText extends HTMLParagraphElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: "open" });
shadow.innerHTML
}
}

0
packages/note-maker/src/content-block/dg-ul.ts Normal file
View File

118
packages/note-maker/tsconfig.json Normal file
View File

@@ -0,0 +1,118 @@
{
// 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"
]
}

8
packages/ui-web/.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,8 @@
{
"json.schemas": [
{
"fileMatch": ["/tsconfig.build.json", "/tsconfig.base.json"],
"schema": {}
}
]
}

50
packages/ui-web/package.json Normal file
View File

@@ -0,0 +1,50 @@
{
"name": "@defgov/ui-web",
"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": {
"dev": "vite",
"build": "vite build --tsconfig tsconfig.build.json"
},
"devDependencies": {
"@tailwindcss/vite": "^4.2.4",
"@types/node": "^25.6.0",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.1",
"glob": "^13.0.6",
"ts-node": "^10.9.2",
"typescript": "^6.0.3",
"vite": "^8.0.9",
"vite-plugin-dts": "^4.5.4"
},
"dependencies": {
"@base-ui/react": "^1.4.1",
"tailwind-merge": "^3.5.0",
"tailwind-variants": "^3.2.2",
"tailwindcss": "^4.2.4"
},
"peerDependencies": {
"react": "^19",
"react-dom": "^19"
}
}

137
packages/ui-web/scripts-plugin/vite-plugin-gen-index-css.ts Normal file
View File

@@ -0,0 +1,137 @@
// plugins/vite-plugin-gen-index-css.ts
import type { Plugin } from "vite";
import fs from "fs";
import path from "path";
import { globSync } from "glob";
interface Config {
targetDirs: string[];
includeExtensions: string[];
importSyntax: "@import";
importSyntaxTail?: string;
excludeFilePattern: RegExp[];
excludeDirs: string[];
warnDuplicateTailwindImport: boolean;
indexFileName: string;
}
const CONFIG: Config = {
targetDirs: ["src"],
includeExtensions: [".css"],
importSyntax: "@import",
excludeFilePattern: [/index\.css/, /index\.scss/, /\.(test|spec)\./],
excludeDirs: [
"__tests__",
"tests",
"story",
"stories",
"types",
"node_modules",
"dist",
"build",
],
warnDuplicateTailwindImport: true,
indexFileName: "index.css",
};
const normalizePath = (p: string) => p.replace(/\\/g, "/");
function isValidFile(filePath: string, config: Config): boolean {
const filenameWithExt = filePath.split(/[\\/]/).pop()!;
const shouldExcludeFile = config.excludeFilePattern.some((p) =>
p.test(filenameWithExt),
);
if (shouldExcludeFile) return false;
const normalized = normalizePath(filePath);
const shouldExcludeDir = config.excludeDirs.some((dir) =>
normalized.includes(`/${dir}/`),
);
if (shouldExcludeDir) return false;
const ext = path.extname(filePath);
if (!config.includeExtensions.includes(ext)) return false;
if (config.warnDuplicateTailwindImport) {
try {
const content = fs.readFileSync(filePath, "utf-8");
if (
content.includes('@import "tailwindcss"') ||
content.includes("@import 'tailwindcss'")
) {
console.warn(
`[gen-index-css] ${filePath} 含有重复的 @import "tailwindcss"，建议删除`,
);
}
} catch {
// ignore
}
}
return true;
}
function generateIndexFile(config: Config) {
const [targetDir] = config.targetDirs;
const dirPath = path.resolve(process.cwd(), targetDir);
const searchPattern = path.resolve(dirPath, "**", "*.*");
const allFiles = globSync(searchPattern, {
nodir: true,
absolute: true,
windowsPathsNoEscape: true,
dot: false,
follow: true,
});
const validFiles = allFiles.filter((f) => isValidFile(f, config));
console.log(`✅ 有效 CSS 文件数量: ${validFiles.length}`);
validFiles.sort();
const importStatements = validFiles.map((file) => {
const relPath = path.relative(dirPath, file);
const importPath = "./" + relPath.replace(/\\/g, "/");
return `${config.importSyntax} '${importPath}';`;
});
const indexContent = `
@import "tailwindcss";
${importStatements.join("\n")}
`.trim();
const indexFilePath = path.resolve(dirPath, config.indexFileName);
// ✅ 内容比对，防止无限 rebuild
if (fs.existsSync(indexFilePath)) {
const old = fs.readFileSync(indexFilePath, "utf8");
if (old === indexContent) return;
}
fs.writeFileSync(indexFilePath, indexContent, "utf8");
console.log(`✅ 成功生成 ${config.indexFileName}: ${indexFilePath}`);
}
export function genIndexCssPlugin(): Plugin {
return {
name: "vite-plugin-gen-index-css",
apply: "build",
buildStart() {
try {
generateIndexFile(CONFIG);
} catch (err) {
const msg = err instanceof Error ? err.message : String(err);
this.error(`[gen-index-css] failed: ${msg}`);
throw err;
}
},
handleHotUpdate({ file }) {
if (normalizePath(file).endsWith(`/src/${CONFIG.indexFileName}`)) {
return [];
}
},
};
}

129
packages/ui-web/scripts-plugin/vite-plugin-gen-index-ts.ts Normal file
View File

@@ -0,0 +1,129 @@
// plugins/vite-plugin-gen-index-ts.ts
import type { Plugin } from "vite";
import fs from "fs";
import path from "path";
import { globSync } from "glob";
interface Config {
targetDirs: string[];
includeExtensions: string[];
excludeKeywords: {
dirs: string[];
fileSuffixes: string[];
filePatterns: RegExp[];
};
}
const CONFIG: Config = {
targetDirs: ["src"],
includeExtensions: [".ts", ".tsx", ".vue"],
excludeKeywords: {
dirs: ["__tests__", "tests", "story", "stories", "types"],
fileSuffixes: [".d.ts"],
filePatterns: [
/^index\.(ts|tsx|js|jsx)$/,
/\.(test|spec)\./,
/\.(story|stories)\./,
],
},
};
const normalizePath = (p: string) => p.replace(/\\/g, "/");
const isInExcludeDir = (filePath: string) => {
const normalized = normalizePath(filePath);
return CONFIG.excludeKeywords.dirs.some((dir) =>
normalized.includes(`/${dir}/`),
);
};
const isExcludeSuffix = (filePath: string) =>
CONFIG.excludeKeywords.fileSuffixes.some((suffix) =>
filePath.endsWith(suffix),
);
const isMatchExcludePattern = (fileName: string) =>
CONFIG.excludeKeywords.filePatterns.some((pattern) => pattern.test(fileName));
function isValidFile(filePath: string): boolean {
const fileName = filePath.split(/[\\/]/).pop()!;
if (isInExcludeDir(filePath)) return false;
if (isExcludeSuffix(filePath)) return false;
if (isMatchExcludePattern(fileName)) return false;
const ext = path.extname(filePath);
return CONFIG.includeExtensions.includes(ext);
}
function generateIndexFile(dirPath: string) {
const searchPattern = path.resolve(dirPath, "**", "*.*");
const allFiles = globSync(searchPattern, {
nodir: true,
absolute: true,
windowsPathsNoEscape: true,
dot: false,
follow: true,
});
const validFiles = allFiles.filter(isValidFile);
if (validFiles.length === 0) return;
validFiles.sort();
const exportStatements = validFiles.map((file) => {
const relPath = path.relative(dirPath, file);
const importPath = `./${relPath
.replace(/\.[^.]+$/, "")
.replace(/\\/g, "/")}`;
return `export * from '${importPath}';`;
});
const indexContent = `
import './index.css';
${exportStatements.join("\n")}
`.trim();
const indexFilePath = path.resolve(dirPath, "index.ts");
// ✅ 内容比对，避免无限 rebuild
if (fs.existsSync(indexFilePath)) {
const old = fs.readFileSync(indexFilePath, "utf8");
if (old === indexContent) return;
}
fs.writeFileSync(indexFilePath, indexContent, "utf8");
}
export function genIndexTsPlugin(): Plugin {
return {
name: "vite-plugin-gen-index-ts",
apply: "build",
buildStart() {
const [targetDir] = CONFIG.targetDirs;
if (!targetDir) {
this.error("CONFIG.targetDirs is empty");
return;
}
const absTargetDir = path.resolve(process.cwd(), targetDir);
try {
generateIndexFile(absTargetDir);
} catch (err) {
const msg = err instanceof Error ? err.message : String(err);
this.error(`[gen-index-ts] failed: ${msg}`);
throw err;
}
},
handleHotUpdate({ file }) {
if (file.replace(/\\/g, "/").endsWith("/src/index.ts")) {
return [];
}
},
};
}

12
packages/ui-web/src/assets/svg/BoldSvg.tsx Normal file
View 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-web/src/assets/svg/CheckIndicatorSvg.tsx Normal file
View 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-web/src/assets/svg/ChevronRightSvg.tsx Normal file
View 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-web/src/assets/svg/CutSvg.tsx Normal file
View 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-web/src/assets/svg/DownloadSvg.tsx Normal file
View 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-web/src/assets/svg/FileSvg.tsx Normal file
View 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-web/src/assets/svg/KeySvg.tsx Normal file
View 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-web/src/assets/svg/MeshSvg.tsx Normal file
View 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-web/src/assets/svg/MoonSvg.tsx Normal file
View 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-web/src/assets/svg/PasteSvg.tsx Normal file
View 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-web/src/assets/svg/Ruler.tsx Normal file
View 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-web/src/assets/svg/SearchSvg.tsx Normal file
View 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-web/src/assets/svg/SettingSvg.tsx Normal file
View 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-web/src/assets/svg/SpinnerSvg.tsx Normal file
View 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-web/src/assets/svg/SunSvg.tsx Normal file
View 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-web/src/assets/svg/UserSvg.tsx Normal file
View 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-web/src/assets/svg/VolumeHighSvg.tsx Normal file
View 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-web/src/assets/svg/VolumeLowSvg.tsx Normal file
View 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-web/src/assets/svg/VolumeMuteSvg.tsx Normal file
View 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>
);

41
packages/ui-web/src/common/Box.tsx Normal file
View File

@@ -0,0 +1,41 @@
import React from "react";
import { cn } from "tailwind-variants";
import { CommonProps } from "./CommonProps";
// 别名<约束>=值
// 千万不要 C = As extend React.ElementType，这样子连等号，会切断推导
type AsProp<C extends React.ElementType> = { as?: C };
type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
export type PolymorphicProps<C extends React.ElementType, P = {}> = (P &
AsProp<C>) &
Omit<React.ComponentPropsWithRef<C>, PropsToOmit<C, P>>;
interface BoxProps<C extends React.ElementType> extends CommonProps {
as?: C;
}
const Box = <C extends React.ElementType = "div">(
props: PolymorphicProps<C, BoxProps<C>>,
ref?: React.ComponentPropsWithRef<C>["ref"],
) => {
const { as: Component = "div", children, className, ...rest } = props;
const boxRootClass = cn( className);
return (
<Component ref={ref} className={boxRootClass} {...(rest as any)}>
{children}
</Component>
);
};
export type BoxComponent = <C extends React.ElementType = "div">(
props: PolymorphicProps<C, BoxProps<C>> & {
ref?: React.ComponentPropsWithRef<C>["ref"];
},
) => React.ReactElement | null;
export default Box as BoxComponent;

9
packages/ui-web/src/common/CommonProps.ts Normal file
View File

@@ -0,0 +1,9 @@
import { CSSProperties, ReactNode } from "react";
export type CommonProps = {
className?: string;
style?: CSSProperties;
children?: ReactNode;
disabled?: boolean;
key?: string;
};

33
packages/ui-web/src/common/Slot.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { mergeProps } from "@base-ui/react";
import * as React from "react";
import { cn } from "tailwind-variants";
export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
children: React.ReactNode;
}
export const Slot = React.forwardRef<HTMLElement, SlotProps>(
({ children, className: externalClassName, ...restProps }, ref) => {
if (!React.isValidElement(children)) {
return null;
}
const child = children as React.ReactElement<Record<string, unknown>>;
const childProps = child.props || {};
const mergedClassName = cn(
childProps.className as string | undefined,
externalClassName,
);
const otherMergedProps = mergeProps(childProps, restProps);
return React.cloneElement(child, {
...otherMergedProps,
className: mergedClassName,
ref,
});
},
);
Slot.displayName = "Slot";

9
packages/ui-web/src/component/accordion/Accordion.css Normal file
View File

@@ -0,0 +1,9 @@
.accordion-root {
box-sizing: border-box;
display: flex;
width: 24rem;
max-width: calc(100vw - 8rem);
flex-direction: column;
justify-content: center;
color: var(--color-gray-900);
}

20
packages/ui-web/src/component/accordion/Accordion.tsx Normal file
View File

@@ -0,0 +1,20 @@
import * as BUI from "@base-ui/react";
import type { ComponentProps } from "react";
import { CommonProps } from "../../common/CommonProps";
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
type AccordionProps = CommonProps &
ComponentProps<typeof BUI.Accordion.Root> & {
size?: "xs" | "sm" | "md" | "lg";
chevronPosition?: "left" | "right";
};
export const Accordion = (props: AccordionProps) => {
const { children, size, ...rest } = props;
const accordionRootCls = itemSizeRecipe({ size });
return (
<BUI.Accordion.Root className={accordionRootCls} {...rest}>
{children}
</BUI.Accordion.Root>
);
};

1
packages/ui-web/src/component/accordion/AccordionItem.tsx Normal file
View File

@@ -0,0 +1 @@
export const AccordionItem = () => {};

1
packages/ui-web/src/component/accordion/AccordionPanel.tsx Normal file
View File

@@ -0,0 +1 @@
export const AccordionPanel = () => {};

1
packages/ui-web/src/component/accordion/AccordionTrigger.tsx Normal file
View File

@@ -0,0 +1 @@
export const AccordionTrigger = () => {};

19
packages/ui-web/src/component/avatar/Avatar.css Normal file
View File

@@ -0,0 +1,19 @@
@layer components {
.avatar-root {
background-color: var(--default-bg);
}
.avatar-image {
object-fit: cover;
height: 100%;
width: 100%;
}
.avatar-fallback {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
background-color: var(--default-bg);
}
}

25
packages/ui-web/src/component/avatar/Avatar.tsx Normal file
View File

@@ -0,0 +1,25 @@
import * as BUI from "@base-ui/react";
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
import { UserSvg } from "../../assets/svg/UserSvg";
import { Icon } from "../icon/Icon";
type AvatarPorps = {
size?: "sm" | "md" | "lg";
src?: string;
name?: string;
};
export const Avatar = (props: AvatarPorps) => {
const { size = "md", src, name } = props;
const avatarCls = itemSizeRecipe({ size, iconOnly: true });
return (
<BUI.Avatar.Root className={avatarCls}>
<BUI.Avatar.Image src={src} />
<BUI.Avatar.Fallback>
<Icon size={size} svg={<UserSvg />} />
</BUI.Avatar.Fallback>
</BUI.Avatar.Root>
);
};

60
packages/ui-web/src/component/button/Button.tsx Normal file
View File

@@ -0,0 +1,60 @@
"use client";
import type { ReactNode } from "react";
import * as BUI from "@base-ui/react";
import { cn } from "tailwind-variants";
import { brandRecipe } from "../../styles/recipe/brand.recipe";
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
import { variantRecipe } from "../../styles/recipe/variant.recipe";
import { Icon } from "../icon/Icon";
type ButtonProps = {
size?: "xs" | "sm" | "md" | "lg";
variant?: "filled" | "outline" | "subtle" | "ghost";
shape?: "rounded" | "square" | "circle";
brand?: "success" | "danger" | "info" | "warning" | "default";
loading?: boolean;
iconSvg?: ReactNode;
iconOnly?: boolean;
hideIcon?: boolean;
} & BUI.Button.Props;
export const Button = (props: ButtonProps) => {
const {
className,
children,
size = "md",
variant = "filled",
shape = "rounded",
brand,
loading,
disabled,
iconSvg,
iconOnly,
hideIcon = false,
} = props;
const currentBrand =
brand == undefined ? (variant == "filled" ? "info" : "default") : brand;
const buttonCls = cn(
itemSizeRecipe({ size, shape, iconOnly }),
variantRecipe({ variant, disabled: loading || disabled }),
brandRecipe({ brand: currentBrand }),
className,
);
return (
<BUI.Button className={buttonCls} disabled={loading || disabled}>
{iconSvg ? (
hideIcon ? (
iconOnly ? (
<Icon />
) : null
) : (
<Icon svg={iconSvg} />
)
) : null}
{!iconOnly && children}
</BUI.Button>
);
};

19
packages/ui-web/src/component/checkbox/Checkbox.css Normal file
View File

@@ -0,0 +1,19 @@
@layer components {
.checkbox-root {
&[data-unchecked] {
border: 1px solid var(--color-gray-300);
background-color: transparent;
}
&[data-checked] {
background-color: var(--brand-bg);
}
}
.checkbox-indicator {
display: flex;
color: var(--color-gray-50);
&[data-unchecked] {
display: none;
}
}
}

76
packages/ui-web/src/component/checkbox/Checkbox.tsx Normal file
View File

@@ -0,0 +1,76 @@
"use client";
import * as BUI from "@base-ui/react";
import { cn } from "tailwind-variants";
import type { ReactNode } from "react";
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
import { variantRecipe } from "../../styles/recipe/variant.recipe";
import { CommonProps } from "../../common/CommonProps";
import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
import { CheckIndicatorSvg } from "../../assets/svg/CheckIndicatorSvg";
import { Slot } from "../../common/Slot";
type CheckboxProps = CommonProps & {
size?: "xs" | "sm" | "md";
shape?: "square" | "rounded";
icon?: ReactNode;
hideIcon?: boolean;
iconPlaceholder?: boolean;
};
export const Checkbox = (props: CheckboxProps) => {
const {
className,
children,
size = "sm",
shape = "square",
icon,
hideIcon = false,
iconPlaceholder = false,
disabled,
} = props;
const checkboxCls = cn(
itemSizeRecipe({ size, shape }),
variantRecipe({ variant: "ghost", disabled }),
"brand-default",
className,
);
const checkboxRootCls = cn(
inlineSizeRecipe({
size,
shape: "rounded",
iconOnly: true,
}),
"checkbox-root",
"brand-info",
);
const checkIndicatorCls = cn(
inlineSizeRecipe({
size,
shape: "rounded",
iconOnly: true,
}),
"checkbox-indicator",
);
const checkIndicatorSvgCls = inlineSizeRecipe({
size,
iconOnly: true,
});
const iconCls = cn(inlineSizeRecipe({ size, iconOnly: true }));
return (
<BUI.Field.Root>
<BUI.Field.Label className={checkboxCls}>
<BUI.Checkbox.Root className={checkboxRootCls}>
<BUI.Checkbox.Indicator className={checkIndicatorCls}>
<CheckIndicatorSvg className={checkIndicatorSvgCls} />
</BUI.Checkbox.Indicator>
</BUI.Checkbox.Root>
{icon && !hideIcon && <Slot className={iconCls}>{icon}</Slot>}
{hideIcon && iconPlaceholder && <span className={iconCls}></span>}
{children}
</BUI.Field.Label>
</BUI.Field.Root>
);
};

21
packages/ui-web/src/component/icon/Icon.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { ReactNode } from "react";
import { cn } from "tailwind-variants";
import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
import { Slot } from "../../common/Slot";
type IconProps = {
size?: "xs" | "sm" | "md" | "lg";
svg?: ReactNode;
};
export const Icon = (props: IconProps) => {
const { size, svg } = props;
const iconCls = cn(inlineSizeRecipe({ size, iconOnly: true }));
return (
<span className={iconCls}>
{svg ? <Slot className={iconCls}>{svg}</Slot> : null}
</span>
);
};

18
packages/ui-web/src/component/theme/Theme.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { cn } from "tailwind-variants";
import { ThemeContext } from "./ThemeContext";
import { ReactNode } from "react";
type ThemeProps = {
theme?: "light" | "dark";
children?: ReactNode;
};
export const Theme = (props: ThemeProps) => {
const { theme = "light", children } = props;
const themeCls = cn(theme, "brand-default") as string;
return (
<ThemeContext.Provider value={{ themeCls }}>
<div className={themeCls}>{children}</div>
</ThemeContext.Provider>
);
};

5
packages/ui-web/src/component/theme/ThemeContext.tsx Normal file
View File

@@ -0,0 +1,5 @@
import React from "react";
type ThemeContextValue = { themeCls?: string };
export const ThemeContext = React.createContext<ThemeContextValue>({});

6
packages/ui-web/src/component/theme/useTheme.ts Normal file
View File

@@ -0,0 +1,6 @@
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";
export const useTheme = () => {
return useContext(ThemeContext);
};

50
packages/ui-web/src/component/tooltip/Tooltip.css Normal file
View File

@@ -0,0 +1,50 @@
@layer components {
.tooltip-arrow {
display: flex;
fill: aquamarine;
&[data-side="top"] {
bottom: -6px;
rotate: 180deg;
}
&[data-side="bottom"] {
top: -6px;
rotate: 0deg;
}
&[data-side="left"] {
right: -8px;
rotate: 90deg;
}
&[data-side="right"] {
left: -8px;
rotate: -90deg;
}
}
.tooltip-popup {
display: flex;
background-color: var(--base-bg);
border: 1px solid color-mix(in srgb, var(--brand-bg) 40%, white);
filter: drop-shadow(var(--drop-shadow-sm));
transform-origin: var(--transform-origin);
transition:
transform 50ms,
opacity 50ms;
&[data-starting-style],
&[data-ending-style] {
opacity: 0;
transform: scale(0.9);
}
&[data-instant] {
transition: none;
}
}
.tooltip-arrow-border {
fill: color-mix(in srgb, var(--brand-bg) 40%, white);
}
}

14
packages/ui-web/src/component/tooltip/Tooltip.tsx Normal file
View File

@@ -0,0 +1,14 @@
"use client";
import * as BUI from "@base-ui/react";
type TooltipProps = BUI.Tooltip.Root.Props;
export const Tooltip = (props: TooltipProps) => {
const { children, open } = props;
return (
<BUI.Tooltip.Provider>
<BUI.Tooltip.Root open={open}>{children}</BUI.Tooltip.Root>
</BUI.Tooltip.Provider>
);
};

53
packages/ui-web/src/component/tooltip/TooltipPopup.tsx Normal file
View File

@@ -0,0 +1,53 @@
"use client";
import * as BUI from "@base-ui/react";
import { cn } from "tailwind-variants";
import { useTheme } from "../theme/useTheme";
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
import { ReactNode } from "react";
type TooltipPopupProps = {
hideArrow?: boolean;
side?: "top" | "bottom" | "left" | "right";
children?: ReactNode;
};
export const TooltipPopup = (props: TooltipPopupProps) => {
const { children, hideArrow = false, side } = props;
const { themeCls } = useTheme();
const tooltipPopupCls = cn(
themeCls,
itemSizeRecipe({ size: "xs", shape: "rounded" }),
"tooltip-popup",
);
return (
<BUI.Tooltip.Portal>
<BUI.Tooltip.Positioner sideOffset={8} side={side}>
<BUI.Tooltip.Popup className={tooltipPopupCls}>
{!hideArrow && (
<BUI.Tooltip.Arrow className="tooltip-arrow">
<PopupArrowUpSvg />
</BUI.Tooltip.Arrow>
)}
{children}
</BUI.Tooltip.Popup>
</BUI.Tooltip.Positioner>
</BUI.Tooltip.Portal>
);
};
const PopupArrowUpSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg
width="10"
height="6"
viewBox="0 0 10 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path d="M0 6 L5 0 L10 6 Z" className="tooltip-arrow-border" />
<path d="M1 6 L5 1 L9 6 Z" fill="var(--base-bg)" />
</svg>
);

13
packages/ui-web/src/component/tooltip/TooltipTrigger.tsx Normal file
View File

@@ -0,0 +1,13 @@
"use client";
import * as BUI from "@base-ui/react";
type TooltipTrigerProps = BUI.Tooltip.Trigger.Props;
export const TooltipTriger = (props: TooltipTrigerProps) => {
const { children, delay = 100 } = props;
return (
<BUI.Tooltip.Trigger render={<div />} delay={delay}>
{children}
</BUI.Tooltip.Trigger>
);
};

1
packages/ui-web/src/component/username-field/UsernameField.tsx Normal file
View File

@@ -0,0 +1 @@
export const UsernameField = () => {};

16
packages/ui-web/src/index.css Normal file
View File

@@ -0,0 +1,16 @@
@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';

45
packages/ui-web/src/index.ts Normal file
View File

@@ -0,0 +1,45 @@
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';

91
packages/ui-web/src/styles/recipe/IinlineSize.recipe.ts Normal file
View File

@@ -0,0 +1,91 @@
import { tv } from "tailwind-variants";
export const inlineSizeRecipe = tv({
base: "relative overflow-hidden flex flex-nowrap justify-center items-center box-border",
variants: {
size: {
xs: "text-xs h-inline-xs",
sm: "text-sm h-inline-sm",
md: "text-md h-inline-md",
lg: "text-lg h-inline-lg",
xl: "text-xl h-inline-xl",
"2xl": "text-2xl h-inline-2xl",
},
shape: {
square: "rounded-none",
rounded: "",
circle: "rounded-full",
},
iconOnly: {
true: "",
false: "",
},
disabled: {
true: "",
false: "",
},
},
compoundVariants: [
{
shape: "rounded",
size: "xs",
class: "rounded-xs",
},
{
shape: "rounded",
size: "sm",
class: "rounded-sm",
},
{
shape: "rounded",
size: "md",
class: "rounded-md",
},
{
shape: "rounded",
size: "lg",
class: "rounded-lg",
},
{
shape: "rounded",
size: "xl",
class: "rounded-xl",
},
{
shape: "rounded",
size: "2xl",
class: "rounded-2xl",
},
// --------------------------------------------------
{
iconOnly: true,
size: "xs",
class: "w-inline-xs",
},
{
iconOnly: true,
size: "sm",
class: "w-inline-sm",
},
{
iconOnly: true,
size: "md",
class: "w-inline-md",
},
{
iconOnly: true,
size: "lg",
class: "w-inline-lg",
},
{
iconOnly: true,
size: "xl",
class: "w-inline-xl",
},
{
iconOnly: true,
size: "2xl",
class: "w-inline-2xl",
},
],
});

88
packages/ui-web/src/styles/recipe/ItemSize.recipe.ts Normal file
View File

@@ -0,0 +1,88 @@
import { tv } from "tailwind-variants";
export const itemSizeRecipe = tv({
base: "relative select-none flex flex-nowrap justify-center items-center",
variants: {
size: {
xs: "text-xs h-item-xs px-xs gap-xs",
sm: "text-sm h-item-sm px-sm gap-sm",
md: "text-md h-item-md px-md gap-md",
lg: "text-lg h-item-lg px-lg gap-lg",
xl: "text-xl h-item-xl px-xl gap-xl",
"2xl": "text-2xl h-item-2xl px-2xl gap-2xl",
},
shape: {
square: "rounded-none",
rounded: "",
circle: "rounded-full",
},
iconOnly: {
true: "px-none",
false: "",
},
disabled: {
true: "",
false: "",
},
},
compoundVariants: [
{ 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",
},
],
});

13
packages/ui-web/src/styles/recipe/brand.recipe.ts Normal file
View File

@@ -0,0 +1,13 @@
import { tv } from "tailwind-variants";
export const brandRecipe = tv({
variants: {
brand: {
success: "brand-success",
danger: "brand-danger",
info: "brand-info",
warning: "brand-warning",
default: "brand-default",
},
},
});

38
packages/ui-web/src/styles/recipe/variant.recipe.ts Normal file
View File

@@ -0,0 +1,38 @@
import { tv } from "tailwind-variants";
export const variantRecipe = tv({
variants: {
variant: {
filled: "variant-filled",
outline: "variant-outline",
subtle: "variant-subtle",
ghost: "variant-ghost",
},
disabled: {
true: "",
false: "",
},
},
compoundVariants: [
{
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",
},
],
});

44
packages/ui-web/src/styles/theme/global.css Normal file
View File

@@ -0,0 +1,44 @@
@theme {
--text-md: 1rem;
--text-md--line-height: calc(1.5 / 1);
--color-transparent: transparent;
--danger-bg: var(--color-red-600);
--danger-bg-hover: var(--color-red-500);
--danger-bg-active: var(--color-red-400);
--danger-bg-low: var(--color-red-100);
--danger-bg-low-hover: var(--color-red-200);
--danger-bg-low-active: var(--color-red-300);
--success-bg: var(--color-emerald-600);
--success-bg-hover: var(--color-emerald-500);
--success-bg-active: var(--color-emerald-400);
--success-bg-low: var(--color-emerald-100);
--success-bg-low-hover: var(--color-emerald-100);
--success-bg-low-active: var(--color-emerald-200);
--info-bg: var(--color-sky-600);
--info-bg-hover: var(--color-sky-500);
--info-bg-active: var(--color-sky-400);
--info-bg-low: var(--color-sky-100);
--info-bg-low-hover: var(--color-sky-200);
--info-bg-low-active: var(--color-sky-300);
--warning-bg: var(--color-yellow-600);
--warning-bg-hover: var(--color-yellow-500);
--warning-bg-active: var(--color-yellow-400);
--warning-bg-low: var(--color-yellow-100);
--warning-bg-low-hover: var(--color-yellow-200);
--warning-bg-low-active: var(--color-yellow-300);
--default-bg: var(--color-neutral-700);
--default-bg-hover: var(--color-neutral-600);
--default-bg-active: var(--color-neutral-500);
--default-bg-low: var(--color-neutral-100);
--default-bg-low-hover: var(--color-neutral-200);
--default-bg-low-active: var(--color-neutral-300);
--disabled-fg: var(--color-gray-500);
--disabled-bg: var(--color-gray-200);
--disabled-border-color: var(--color-gray-500);
}

40
packages/ui-web/src/styles/utility/brand.css Normal file
View File

@@ -0,0 +1,40 @@
@utility brand-info {
--brand-bg: var(--info-bg);
--brand-bg-hover: var(--info-bg-hover);
--brand-bg-active: var(--info-bg-active);
--brand-bg-low: var(--info-bg-low);
--brand-bg-low-hover: var(--info-bg-low-hover);
--brand-bg-low-active: var(--info-bg-low-active);
}
@utility brand-danger {
--brand-bg: var(--danger-bg);
--brand-bg-hover: var(--danger-bg-hover);
--brand-bg-active: var(--danger-bg-active);
--brand-bg-low: var(--danger-bg-low);
--brand-bg-low-hover: var(--danger-bg-low-hover);
--brand-bg-low-active: var(--danger-bg-low-active);
}
@utility brand-success {
--brand-bg: var(--success-bg);
--brand-bg-hover: var(--success-bg-hover);
--brand-bg-active: var(--success-bg-active);
--brand-bg-low: var(--success-bg-low);
--brand-bg-low-hover: var(--success-bg-low-hover);
--brand-bg-low-active: var(--success-bg-low-active);
}
@utility brand-warning {
--brand-bg: var(--warning-bg);
--brand-bg-hover: var(--warning-bg-hover);
--brand-bg-active: var(--warning-bg-active);
--brand-bg-low: var(--warning-bg-low);
--brand-bg-low-hover: var(--warning-bg-low-hover);
--brand-bg-low-active: var(--warning-bg-low-active);
}
@utility 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);
}

4
packages/ui-web/src/styles/utility/font.css Normal file
View File

@@ -0,0 +1,4 @@
@utility text-md {
font-size: var(--text-md); /* 1rem (16px) */
line-height: var(--text-md--line-height); /* calc(1.5 / 1) */
}

18
packages/ui-web/src/styles/utility/gap.css Normal file
View File

@@ -0,0 +1,18 @@
@utility gap-xs {
gap: calc(var(--spacing) * 0.5);
}
@utility gap-sm {
gap: calc(var(--spacing) * 1);
}
@utility gap-md {
gap: calc(var(--spacing) * 1.5);
}
@utility gap-lg {
gap: calc(var(--spacing) * 2);
}
@utility gap-xl {
gap: calc(var(--spacing) * 2.5);
}
@utility gap-2xl {
gap: calc(var(--spacing) * 3);
}

40
packages/ui-web/src/styles/utility/height.css Normal file
View File

@@ -0,0 +1,40 @@
@utility h-item-xs {
/* 24px minimum touch size for text line */
height: 24px;
}
@utility h-item-sm {
/* 28px save space for most used size */
height: 28px;
}
@utility h-item-md {
/* 34px most used size */
height: 34px;
}
@utility h-item-lg {
/* 44px maximum touch size without waste */
height: 44px;
}
@utility h-item-xl {
height: calc(var(--spacing) * 16);
}
@utility h-item-2xl {
height: calc(var(--spacing) * 16);
}
@utility h-inline-xs {
height: calc(var(--text-xs--line-height) * var(--text-xs));
}
@utility h-inline-sm {
height: calc(var(--text-sm--line-height) * var(--text-sm));
}
@utility h-inline-md {
height: calc(var(--text-md--line-height) * var(--text-md));
}
@utility h-inline-lg {
height: calc(var(--text-lg--line-height) * var(--text-lg));
}
@utility h-inline-xl {
height: calc(var(--text-xl--line-height) * var(--text-xl));
}
@utility h-inline-2xl {
height: calc(var(--text-2xl--line-height) * var(--text-2xl));
}

16
packages/ui-web/src/styles/utility/loading.css Normal file
View File

@@ -0,0 +1,16 @@
@utility loading-true {
position: "absolute";
top: "50%";
left: "50%";
transform: "translate(-50%, -50%)";
opacity: 1;
transition: "top 0.15s ease-in, opacity 0.1s ease-in";
}
@utility loading-false {
position: "absolute";
top: "-50%";
left: "50%";
transform: "translate(-50%, -50%)";
opacity: 0;
transition: "top 0.15s ease-out, opacity 0.1s ease-out";
}

21
packages/ui-web/src/styles/utility/margin.css Normal file
View File

@@ -0,0 +1,21 @@
@utility mr-none {
margin-right: 0;
}
@utility mr-sm {
margin-right: calc(var(--spacing) * 1);
}
@utility mr-sm {
margin-right: calc(var(--spacing) * 2);
}
@utility mr-md {
margin-right: calc(var(--spacing) * 3);
}
@utility mr-lg {
margin-right: calc(var(--spacing) * 4);
}
@utility mr-xl {
margin-right: calc(var(--spacing) * 2);
}
@utility mr-2xl {
margin-right: calc(var(--spacing) * 2);
}

40
packages/ui-web/src/styles/utility/padding.css Normal file
View File

@@ -0,0 +1,40 @@
@utility px-none {
padding-inline: 0px;
}
@utility px-xs {
padding-inline: 6px;
}
@utility px-sm {
padding-inline: 8px;
}
@utility px-md {
padding-inline: 10px;
}
@utility px-lg {
padding-inline: 12px;
}
@utility px-xl {
padding-inline: var(--radius-xl);
}
@utility px-2xl {
padding-inline: var(--radius-2xl);
}
@utility py-xs {
/* 2px correspond to rounded-xs */
padding-block: var(--radius-xs);
}
@utility py-sm {
padding-block: var(--radius-sm);
}
@utility py-md {
padding-block: var(--radius-md);
}
@utility py-lg {
padding-block: var(--radius-lg);
}
@utility py-xl {
padding-block: var(--radius-xl);
}
@utility py-2xl {
padding-block: var(--radius-2xl);
}

9
packages/ui-web/src/styles/utility/skin.css Normal file
View File

@@ -0,0 +1,9 @@
@utility light {
--base-fg: var(--color-gray-950);
--base-bg: var(--color-white);
}
@utility dark {
--base-fg: var(--color-gray-50);
--base-bg: var(--color-black);
}

200
packages/ui-web/src/styles/utility/variant.css Normal file
View File

@@ -0,0 +1,200 @@
@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);
}
}
@utility 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-hover);
--outline-bg-active: var(--brand-bg-low-active);
--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);
}
}
@utility 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);
}
}
@utility 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);
}
}
@utility 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(--filled-fg);
background-color: var(--filled-bg);
border-color: var(--filled-border-color);
filter: grayscale(100%);
}
}
@utility variant-outline-disabled {
color: var(--outline-fg);
background-color: var(--outline-bg);
border-color: var(--outline-border-color);
filter: grayscale(50%);
&:hover {
color: var(--outline-fg);
background-color: var(--outline-bg);
border-color: var(--outline-border-color);
filter: grayscale(50%);
}
&:active {
color: var(--outline-fg);
background-color: var(--outline-bg);
border-color: var(--outline-border-color);
filter: grayscale(50%);
}
&:focus-visible {
color: var(--outline-fg);
background-color: var(--outline-bg);
border-color: var(--outline-border-color);
filter: grayscale(50%);
}
}
@utility 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%);
}
}

41
packages/ui-web/src/styles/utility/width.css Normal file
View File

@@ -0,0 +1,41 @@
@utility w-item-xs {
/* 24px minimum touch size for text line */
width: calc(var(--spacing) * 6);
}
@utility w-item-sm {
/* 30px save space for most used size */
width: calc(var(--spacing) * 7.5);
}
@utility w-item-md {
/* 34px most used size */
width: calc(var(--spacing) * 8.5);
}
@utility w-item-lg {
/* 46px maximum touch size without waste */
width: calc(var(--spacing) * 11.5);
}
@utility w-item-xl {
width: calc(var(--spacing) * 16);
}
@utility w-item-2xl {
width: calc(var(--spacing) * 16);
}
/* ---------------------------------------------------- */
@utility w-inline-xs {
width: calc(var(--text-xs--line-height) * var(--text-xs));
}
@utility w-inline-sm {
width: calc(var(--text-sm--line-height) * var(--text-sm));
}
@utility w-inline-md {
width: calc(var(--text-md--line-height) * var(--text-md));
}
@utility w-inline-lg {
width: calc(var(--text-lg--line-height) * var(--text-lg));
}
@utility w-inline-xl {
width: calc(var(--text-xl--line-height) * var(--text-xl));
}
@utility w-inline-2xl {
width: calc(var(--text-2xl--line-height) * var(--text-2xl));
}

4
packages/ui-web/src/types/css.d.ts vendored Normal file
View File

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

40
packages/ui-web/tsconfig.base.json Normal file
View File

@@ -0,0 +1,40 @@
{
// tsconfig.base.json，用于被 tesconfig.json 和 tesconfig.build.json 继承
"compilerOptions": {
// 输出模块语法，使用版本号最新的那个，而不是实验性语法 ESNext
"module": "es2022",
// 模块解析策略，模拟 Vite / Rollup / webpack，支持 exports / imports，不强制 Node ESM 的严格规则
"moduleResolution": "bundler",
// 显式声明使用的类型包
"types": ["node", "react", "vite/client"],
// 开启所有严格类型检查，防止 any / 隐式 any 扩散
"strict": true,
// 允许 ESM 导入 CJS
"esModuleInterop": true,
// 跳过 node_modules 类型检查，加快构建，避免第三方类型污染
"skipLibCheck": true,
// 模块检测策略，不会影响 node_modules 中的第三方 CommonJS 依赖，Vite 会在预构建阶段自动将其转换为 ESM。
"moduleDetection": "force",
// 保留源码中的 import / export 语句原样输出，不进行自动转换（如 import → require），通常与 moduleDetection: "force" 搭配使用
"verbatimModuleSyntax": true,
// 是否检查“未使用的局部变量”
"noUnusedLocals": true,
// 是否检查“未使用的函数参数”
"noUnusedParameters": true,
// 是否只允许“可擦除的语法（Erasable Syntax），确保 TypeScript 语法在编译后可完全移除
"erasableSyntaxOnly": true,
// 是否禁止 switch 语句中的 case 贯穿（fallthrough），如果 case 没有 break / return，会报错
"noFallthroughCasesInSwitch": true
}
}

122
packages/ui-web/tsconfig.build.json Normal file
View File

@@ -0,0 +1,122 @@
{
// 此文件仅用于类型检查，不用于类型检查，构建时会指定使用 tsconfig.build.json
"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"],
/**
* 显式声明使用的类型包
* - node：Node.js API
* - react：JSX / React 类型
* - vite/client：import.meta / env
*/
"types": ["node", "react", "vite/client"],
/**
* 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": [
"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"
]
}

16
packages/ui-web/tsconfig.json Normal file
View File

@@ -0,0 +1,16 @@
{
// 此文件仅用于类型检查，不用于构建，构建时会指定使用 tsconfig.build.json
"extends": "./tsconfig.base.json",
"compilerOptions": {
// node api 使用最新版本号的 "ESxxxx"，browser api 使用 "DOM" 和 "DOM.Iterable"
"lib": ["ES2025", "DOM", "DOM.Iterable"],
//显式声明使用的类型包，避免找不到模块
"types": ["node", "react", "vite/client"],
// React JSX 编译模式
"jsx": "react-jsx"
},
// 将类型检查范围扩大至整个子项目，而不只是 src 文件夹,
"include": ["**/*"]
}

45
packages/ui-web/vite.config.ts Normal file
View File

@@ -0,0 +1,45 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";
import path from "path";
import tailwindcss from "@tailwindcss/vite";
import { genIndexTsPlugin } from "./scripts-plugin/vite-plugin-gen-index-ts";
import { genIndexCssPlugin } from "./scripts-plugin/vite-plugin-gen-index-css";
export default defineConfig({
plugins: [
genIndexTsPlugin(),
genIndexCssPlugin(),
react(),
tailwindcss(),
dts({
insertTypesEntry: true,
}),
],
build: {
lib: {
entry: path.resolve(__dirname, "src/index.ts"),
name: "DefgovUIWeb",
formats: ["es", "cjs"],
fileName: (format) => `index.${format}.js`,
},
rollupOptions: {
external: ["react", "react-dom", "react/jsx-runtime"],
output: {
globals: {
react: "React",
"react-dom": "ReactDOM",
},
},
},
sourcemap: true,
cssCodeSplit: true,
watch: {
exclude: ["node_modules", "dist", ".git"],
},
},
});

1974
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
pnpm-workspace.yaml Normal file
View File

@@ -0,0 +1,6 @@
packages:
- "packages/*"
- "apps/*"
- "templates/*"
allowBuilds:
sharp: false

1
templates/vite-react-template/.npmrc Normal file
View File

@@ -0,0 +1 @@
registry = https://registry.npmmirror.com/

8
templates/vite-react-template/.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,8 @@
{
"json.schemas": [
{
"fileMatch": ["/tsconfig.build.json", "/tsconfig.base.json"],
"schema": {}
}
]
}

34
templates/vite-react-template/package.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "vite-react-template",
"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": {
"dev": "vite",
"build": "vite build --tsconfig tsconfig.build.json"
},
"devDependencies": {
"@types/node": "^25.6.0",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.1",
"glob": "^13.0.6",
"typescript": "^6.0.3",
"vite": "^8.0.9",
"vite-plugin-dts": "^4.5.4"
}
}

137
templates/vite-react-template/scripts-plugin/vite-plugin-gen-index-css.ts Normal file
View File

@@ -0,0 +1,137 @@
// plugins/vite-plugin-gen-index-css.ts
import type { Plugin } from "vite";
import fs from "fs";
import path from "path";
import { globSync } from "glob";
interface Config {
targetDirs: string[];
includeExtensions: string[];
importSyntax: "@import";
importSyntaxTail?: string;
excludeFilePattern: RegExp[];
excludeDirs: string[];
warnDuplicateTailwindImport: boolean;
indexFileName: string;
}
const CONFIG: Config = {
targetDirs: ["src"],
includeExtensions: [".css"],
importSyntax: "@import",
excludeFilePattern: [/index\.css/, /index\.scss/, /\.(test|spec)\./],
excludeDirs: [
"__tests__",
"tests",
"story",
"stories",
"types",
"node_modules",
"dist",
"build",
],
warnDuplicateTailwindImport: true,
indexFileName: "index.css",
};
const normalizePath = (p: string) => p.replace(/\\/g, "/");
function isValidFile(filePath: string, config: Config): boolean {
const filenameWithExt = filePath.split(/[\\/]/).pop()!;
const shouldExcludeFile = config.excludeFilePattern.some((p) =>
p.test(filenameWithExt),
);
if (shouldExcludeFile) return false;
const normalized = normalizePath(filePath);
const shouldExcludeDir = config.excludeDirs.some((dir) =>
normalized.includes(`/${dir}/`),
);
if (shouldExcludeDir) return false;
const ext = path.extname(filePath);
if (!config.includeExtensions.includes(ext)) return false;
if (config.warnDuplicateTailwindImport) {
try {
const content = fs.readFileSync(filePath, "utf-8");
if (
content.includes('@import "tailwindcss"') ||
content.includes("@import 'tailwindcss'")
) {
console.warn(
`[gen-index-css] ${filePath} 含有重复的 @import "tailwindcss"，建议删除`,
);
}
} catch {
// ignore
}
}
return true;
}
function generateIndexFile(config: Config) {
const [targetDir] = config.targetDirs;
const dirPath = path.resolve(process.cwd(), targetDir);
const searchPattern = path.resolve(dirPath, "**", "*.*");
const allFiles = globSync(searchPattern, {
nodir: true,
absolute: true,
windowsPathsNoEscape: true,
dot: false,
follow: true,
});
const validFiles = allFiles.filter((f) => isValidFile(f, config));
console.log(`✅ 有效 CSS 文件数量: ${validFiles.length}`);
validFiles.sort();
const importStatements = validFiles.map((file) => {
const relPath = path.relative(dirPath, file);
const importPath = "./" + relPath.replace(/\\/g, "/");
return `${config.importSyntax} '${importPath}';`;
});
const indexContent = `
@import "tailwindcss";
${importStatements.join("\n")}
`.trim();
const indexFilePath = path.resolve(dirPath, config.indexFileName);
// ✅ 内容比对，防止无限 rebuild
if (fs.existsSync(indexFilePath)) {
const old = fs.readFileSync(indexFilePath, "utf8");
if (old === indexContent) return;
}
fs.writeFileSync(indexFilePath, indexContent, "utf8");
console.log(`✅ 成功生成 ${config.indexFileName}: ${indexFilePath}`);
}
export function genIndexCssPlugin(): Plugin {
return {
name: "vite-plugin-gen-index-css",
apply: "build",
buildStart() {
try {
generateIndexFile(CONFIG);
} catch (err) {
const msg = err instanceof Error ? err.message : String(err);
this.error(`[gen-index-css] failed: ${msg}`);
throw err;
}
},
handleHotUpdate({ file }) {
if (normalizePath(file).endsWith(`/src/${CONFIG.indexFileName}`)) {
return [];
}
},
};
}

129
templates/vite-react-template/scripts-plugin/vite-plugin-gen-index-ts.ts Normal file
View File

@@ -0,0 +1,129 @@
// plugins/vite-plugin-gen-index-ts.ts
import type { Plugin } from "vite";
import fs from "fs";
import path from "path";
import { globSync } from "glob";
interface Config {
targetDirs: string[];
includeExtensions: string[];
excludeKeywords: {
dirs: string[];
fileSuffixes: string[];
filePatterns: RegExp[];
};
}
const CONFIG: Config = {
targetDirs: ["src"],
includeExtensions: [".ts", ".tsx", ".vue"],
excludeKeywords: {
dirs: ["__tests__", "tests", "story", "stories", "types"],
fileSuffixes: [".d.ts"],
filePatterns: [
/^index\.(ts|tsx|js|jsx)$/,
/\.(test|spec)\./,
/\.(story|stories)\./,
],
},
};
const normalizePath = (p: string) => p.replace(/\\/g, "/");
const isInExcludeDir = (filePath: string) => {
const normalized = normalizePath(filePath);
return CONFIG.excludeKeywords.dirs.some((dir) =>
normalized.includes(`/${dir}/`),
);
};
const isExcludeSuffix = (filePath: string) =>
CONFIG.excludeKeywords.fileSuffixes.some((suffix) =>
filePath.endsWith(suffix),
);
const isMatchExcludePattern = (fileName: string) =>
CONFIG.excludeKeywords.filePatterns.some((pattern) => pattern.test(fileName));
function isValidFile(filePath: string): boolean {
const fileName = filePath.split(/[\\/]/).pop()!;
if (isInExcludeDir(filePath)) return false;
if (isExcludeSuffix(filePath)) return false;
if (isMatchExcludePattern(fileName)) return false;
const ext = path.extname(filePath);
return CONFIG.includeExtensions.includes(ext);
}
function generateIndexFile(dirPath: string) {
const searchPattern = path.resolve(dirPath, "**", "*.*");
const allFiles = globSync(searchPattern, {
nodir: true,
absolute: true,
windowsPathsNoEscape: true,
dot: false,
follow: true,
});
const validFiles = allFiles.filter(isValidFile);
if (validFiles.length === 0) return;
validFiles.sort();
const exportStatements = validFiles.map((file) => {
const relPath = path.relative(dirPath, file);
const importPath = `./${relPath
.replace(/\.[^.]+$/, "")
.replace(/\\/g, "/")}`;
return `export * from '${importPath}';`;
});
const indexContent = `
import './index.css';
${exportStatements.join("\n")}
`.trim();
const indexFilePath = path.resolve(dirPath, "index.ts");
// ✅ 内容比对，避免无限 rebuild
if (fs.existsSync(indexFilePath)) {
const old = fs.readFileSync(indexFilePath, "utf8");
if (old === indexContent) return;
}
fs.writeFileSync(indexFilePath, indexContent, "utf8");
}
export function genIndexTsPlugin(): Plugin {
return {
name: "vite-plugin-gen-index-ts",
apply: "build",
buildStart() {
const [targetDir] = CONFIG.targetDirs;
if (!targetDir) {
this.error("CONFIG.targetDirs is empty");
return;
}
const absTargetDir = path.resolve(process.cwd(), targetDir);
try {
generateIndexFile(absTargetDir);
} catch (err) {
const msg = err instanceof Error ? err.message : String(err);
this.error(`[gen-index-ts] failed: ${msg}`);
throw err;
}
},
handleHotUpdate({ file }) {
if (file.replace(/\\/g, "/").endsWith("/src/index.ts")) {
return [];
}
},
};
}

4
templates/vite-react-template/src/types/css.d.ts vendored Normal file
View File

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

51
templates/vite-react-template/src/types/env.d.ts vendored Normal file
View File

@@ -0,0 +1,51 @@
/// <reference types="vite/client" />
declare module "*.svg" {
import * as React from "react";
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
declare module "*.png" {
const src: string;
export default src;
}
declare module "*.jpg" {
const src: string;
export default src;
}
declare module "*.jpeg" {
const src: string;
export default src;
}
declare module "*.gif" {
const src: string;
export default src;
}
declare module "*.webp" {
const src: string;
export default src;
}
interface ImportMetaEnv {
readonly MODE: "development" | "production" | "test";
readonly BASE_URL: string;
readonly PROD: boolean;
readonly DEV: boolean;
readonly SSR: boolean;
// ===== 业务环境变量 =====
readonly VITE_API_BASE: string;
readonly VITE_UPLOAD_URL?: string;
readonly VITE_ENABLE_MOCK?: "true" | "false";
readonly VITE_SENTRY_DSN?: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}

40
templates/vite-react-template/tsconfig.base.json Normal file
View File

@@ -0,0 +1,40 @@
{
// tsconfig.base.json，用于被 tesconfig.json 和 tesconfig.build.json 继承
"compilerOptions": {
// 输出模块语法，使用版本号最新的那个，而不是实验性语法 ESNext
"module": "es2022",
// 模块解析策略，模拟 Vite / Rollup / webpack，支持 exports / imports，不强制 Node ESM 的严格规则
"moduleResolution": "bundler",
// 显式声明使用的类型包
"types": ["node", "react", "vite/client"],
// 开启所有严格类型检查，防止 any / 隐式 any 扩散
"strict": true,
// 允许 ESM 导入 CJS
"esModuleInterop": true,
// 跳过 node_modules 类型检查，加快构建，避免第三方类型污染
"skipLibCheck": true,
// 模块检测策略，不会影响 node_modules 中的第三方 CommonJS 依赖，Vite 会在预构建阶段自动将其转换为 ESM。
"moduleDetection": "force",
// 保留源码中的 import / export 语句原样输出，不进行自动转换（如 import → require），通常与 moduleDetection: "force" 搭配使用
"verbatimModuleSyntax": true,
// 是否检查“未使用的局部变量”
"noUnusedLocals": true,
// 是否检查“未使用的函数参数”
"noUnusedParameters": true,
// 是否只允许“可擦除的语法（Erasable Syntax），确保 TypeScript 语法在编译后可完全移除
"erasableSyntaxOnly": true,
// 是否禁止 switch 语句中的 case 贯穿（fallthrough），如果 case 没有 break / return，会报错
"noFallthroughCasesInSwitch": true
}
}

122
templates/vite-react-template/tsconfig.build.json Normal file
View File

@@ -0,0 +1,122 @@
{
// 此文件仅用于类型检查，不用于类型检查，构建时会指定使用 tsconfig.build.json
"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"],
/**
* 显式声明使用的类型包
* - node：Node.js API
* - react：JSX / React 类型
* - vite/client：import.meta / env
*/
"types": ["node", "react", "vite/client"],
/**
* 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": [
"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"
]
}

16
templates/vite-react-template/tsconfig.json Normal file
View File

@@ -0,0 +1,16 @@
{
// 此文件仅用于类型检查，不用于构建，构建时会指定使用 tsconfig.build.json
"extends": "./tsconfig.base.json",
"compilerOptions": {
// node api 使用最新版本号的 "ESxxxx"，browser api 使用 "DOM" 和 "DOM.Iterable"
"lib": ["ES2025", "DOM", "DOM.Iterable"],
//显式声明使用的类型包，避免找不到模块
"types": ["node", "react", "vite/client"],
// React JSX 编译模式
"jsx": "react-jsx"
},
// 将类型检查范围扩大至整个子项目，而不只是 src 文件夹,
"include": ["**/*"]
}

43
templates/vite-react-template/vite.config.ts Normal file
View File

@@ -0,0 +1,43 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";
import path from "path";
import { genIndexTsPlugin } from "./scripts-plugin/vite-plugin-gen-index-ts";
import { genIndexCssPlugin } from "./scripts-plugin/vite-plugin-gen-index-css";
export default defineConfig({
plugins: [
genIndexTsPlugin(),
genIndexCssPlugin(),
react(),
dts({
insertTypesEntry: true,
}),
],
build: {
lib: {
entry: path.resolve(__dirname, "src/index.ts"),
name: "DefgovUIWeb",
formats: ["es", "cjs"],
fileName: (format) => `index.${format}.js`,
},
rollupOptions: {
external: ["react", "react-dom", "react/jsx-runtime"],
output: {
globals: {
react: "React",
"react-dom": "ReactDOM",
},
},
},
sourcemap: true,
cssCodeSplit: true,
watch: {
exclude: ["node_modules", "dist", ".git"],
},
},
});

15
turbo.json Normal file
View File

@@ -0,0 +1,15 @@
{
"$schema": "https://turborepo.dev/schema.json",
"ui": "tui",
"tasks": {
"build": {
"dependsOn": ["^build"],
"inputs": ["$TURBO_DEFAULT$", ".env*"],
"outputs": [".next/**", "!.next/cache/**"]
},
"dev": {
"cache": false,
"persistent": true
}
}
}