Compare commits
2 Commits
8351498071
...
542615a941
| Author | SHA1 | Date | |
|---|---|---|---|
| 542615a941 | |||
| f2d8ad0de2 |
15
Dockerfile
15
Dockerfile
@@ -1,15 +0,0 @@
|
|||||||
FROM node:24-alpine
|
|
||||||
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
# 1. 启用 pnpm
|
|
||||||
RUN corepack enable && corepack prepare pnpm@latest --activate
|
|
||||||
|
|
||||||
# 2. 复制 workspace 配置
|
|
||||||
COPY pnpm-workspace.yaml pnpm-lock.yaml package.json ./
|
|
||||||
|
|
||||||
# 3. 安装所有依赖
|
|
||||||
RUN pnpm install --frozen-lockfile
|
|
||||||
|
|
||||||
# 4. 复制源码
|
|
||||||
COPY . .
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
import { useState } from 'react'
|
|
||||||
import reactLogo from './assets/react.svg'
|
|
||||||
import viteLogo from './assets/vite.svg'
|
|
||||||
import heroImg from './assets/hero.png'
|
|
||||||
import './App.css'
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const [count, setCount] = useState(0)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<section id="center">
|
|
||||||
<div className="hero">
|
|
||||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
|
||||||
<img src={reactLogo} className="framework" alt="React logo" />
|
|
||||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1>Get started</h1>
|
|
||||||
<p>
|
|
||||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="counter"
|
|
||||||
onClick={() => setCount((count) => count + 1)}
|
|
||||||
>
|
|
||||||
Count is {count}
|
|
||||||
</button>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="ticks"></div>
|
|
||||||
|
|
||||||
<section id="next-steps">
|
|
||||||
<div id="docs">
|
|
||||||
<svg className="icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#documentation-icon"></use>
|
|
||||||
</svg>
|
|
||||||
<h2>Documentation</h2>
|
|
||||||
<p>Your questions, answered</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://vite.dev/" target="_blank">
|
|
||||||
<img className="logo" src={viteLogo} alt="" />
|
|
||||||
Explore Vite
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://react.dev/" target="_blank">
|
|
||||||
<img className="button-icon" src={reactLogo} alt="" />
|
|
||||||
Learn more
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="social">
|
|
||||||
<svg className="icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#social-icon"></use>
|
|
||||||
</svg>
|
|
||||||
<h2>Connect with us</h2>
|
|
||||||
<p>Join the Vite community</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#github-icon"></use>
|
|
||||||
</svg>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://chat.vite.dev/" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#discord-icon"></use>
|
|
||||||
</svg>
|
|
||||||
Discord
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://x.com/vite_js" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#x-icon"></use>
|
|
||||||
</svg>
|
|
||||||
X.com
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#bluesky-icon"></use>
|
|
||||||
</svg>
|
|
||||||
Bluesky
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="ticks"></div>
|
|
||||||
<section id="spacer"></section>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import { type CSSProperties, type ReactNode } from "react";
|
|
||||||
|
|
||||||
export type CommonProps = {
|
|
||||||
className?: string;
|
|
||||||
style?: CSSProperties;
|
|
||||||
children?: ReactNode;
|
|
||||||
disabled?: boolean;
|
|
||||||
key?: string;
|
|
||||||
};
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import { type ReactNode } from "react";
|
|
||||||
|
|
||||||
export const InnerWrapper = ({ children }: { children: ReactNode }) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
gap: "10px",
|
|
||||||
display: "flex",
|
|
||||||
flexWrap: "nowrap",
|
|
||||||
alignItems: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,251 +0,0 @@
|
|||||||
import { Button, DownloadSvg } from "@defgov/ui-web-tw";
|
|
||||||
import { InnerWrapper } from "../common/InnerWrapper";
|
|
||||||
import { OuterWrapper } from "../common/OuterWrapper";
|
|
||||||
|
|
||||||
export const ButtonGallery = () => {
|
|
||||||
return (
|
|
||||||
<OuterWrapper>
|
|
||||||
<InnerWrapper>
|
|
||||||
<Button size="xs">xsmall</Button>
|
|
||||||
<Button size="xs" iconSvg={<DownloadSvg />}>
|
|
||||||
xsmall
|
|
||||||
</Button>
|
|
||||||
<Button size="xs" iconSvg={<DownloadSvg />} iconOnly={true}>
|
|
||||||
xsmall
|
|
||||||
</Button>
|
|
||||||
<Button size="sm">small</Button>
|
|
||||||
<Button size="sm" iconSvg={<DownloadSvg />}>
|
|
||||||
small
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" iconSvg={<DownloadSvg />} iconOnly={true}>
|
|
||||||
small
|
|
||||||
</Button>
|
|
||||||
</InnerWrapper>
|
|
||||||
<InnerWrapper>
|
|
||||||
<Button size="md">medium</Button>
|
|
||||||
<Button size="md" iconSvg={<DownloadSvg />}>
|
|
||||||
medium
|
|
||||||
</Button>
|
|
||||||
<Button size="md" iconSvg={<DownloadSvg />} iconOnly={true}>
|
|
||||||
medium
|
|
||||||
</Button>
|
|
||||||
<Button size="lg">large</Button>
|
|
||||||
<Button size="lg" iconSvg={<DownloadSvg />}>
|
|
||||||
large
|
|
||||||
</Button>
|
|
||||||
<Button size="lg" iconSvg={<DownloadSvg />} iconOnly={true}>
|
|
||||||
large
|
|
||||||
</Button>
|
|
||||||
</InnerWrapper>
|
|
||||||
<InnerWrapper>
|
|
||||||
<Button size="xs" variant="outline">
|
|
||||||
xsmall
|
|
||||||
</Button>
|
|
||||||
<Button size="xs" variant="outline" iconSvg={<DownloadSvg />}>
|
|
||||||
xsmall
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="xs"
|
|
||||||
variant="outline"
|
|
||||||
iconSvg={<DownloadSvg />}
|
|
||||||
iconOnly={true}
|
|
||||||
>
|
|
||||||
xsmall
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" variant="outline">
|
|
||||||
small
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" variant="outline" iconSvg={<DownloadSvg />}>
|
|
||||||
small
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
iconSvg={<DownloadSvg />}
|
|
||||||
iconOnly={true}
|
|
||||||
>
|
|
||||||
small
|
|
||||||
</Button>
|
|
||||||
</InnerWrapper>
|
|
||||||
<InnerWrapper>
|
|
||||||
<Button size="md" variant="outline">
|
|
||||||
medium
|
|
||||||
</Button>
|
|
||||||
<Button size="md" variant="outline" iconSvg={<DownloadSvg />}>
|
|
||||||
medium
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="md"
|
|
||||||
variant="outline"
|
|
||||||
iconSvg={<DownloadSvg />}
|
|
||||||
iconOnly={true}
|
|
||||||
>
|
|
||||||
medium
|
|
||||||
</Button>
|
|
||||||
<Button size="lg" variant="outline">
|
|
||||||
large
|
|
||||||
</Button>
|
|
||||||
<Button size="lg" variant="outline" iconSvg={<DownloadSvg />}>
|
|
||||||
large
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="lg"
|
|
||||||
variant="outline"
|
|
||||||
iconSvg={<DownloadSvg />}
|
|
||||||
iconOnly={true}
|
|
||||||
>
|
|
||||||
large
|
|
||||||
</Button>
|
|
||||||
</InnerWrapper>
|
|
||||||
<InnerWrapper>
|
|
||||||
<Button size="xs" variant="subtle">
|
|
||||||
xsmall
|
|
||||||
</Button>
|
|
||||||
<Button size="xs" variant="subtle" iconSvg={<DownloadSvg />}>
|
|
||||||
xsmall
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="xs"
|
|
||||||
variant="subtle"
|
|
||||||
iconSvg={<DownloadSvg />}
|
|
||||||
iconOnly={true}
|
|
||||||
>
|
|
||||||
xsmall
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" variant="subtle">
|
|
||||||
small
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" variant="subtle" iconSvg={<DownloadSvg />}>
|
|
||||||
small
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="subtle"
|
|
||||||
iconSvg={<DownloadSvg />}
|
|
||||||
iconOnly={true}
|
|
||||||
>
|
|
||||||
small
|
|
||||||
</Button>
|
|
||||||
</InnerWrapper>
|
|
||||||
<InnerWrapper>
|
|
||||||
<Button size="md" variant="subtle">
|
|
||||||
medium
|
|
||||||
</Button>
|
|
||||||
<Button size="md" variant="subtle" iconSvg={<DownloadSvg />}>
|
|
||||||
medium
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="md"
|
|
||||||
variant="subtle"
|
|
||||||
iconSvg={<DownloadSvg />}
|
|
||||||
iconOnly={true}
|
|
||||||
>
|
|
||||||
medium
|
|
||||||
</Button>
|
|
||||||
<Button size="lg" variant="subtle">
|
|
||||||
large
|
|
||||||
</Button>
|
|
||||||
<Button size="lg" variant="subtle" iconSvg={<DownloadSvg />}>
|
|
||||||
large
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="lg"
|
|
||||||
variant="subtle"
|
|
||||||
iconSvg={<DownloadSvg />}
|
|
||||||
iconOnly={true}
|
|
||||||
>
|
|
||||||
large
|
|
||||||
</Button>
|
|
||||||
</InnerWrapper>
|
|
||||||
{/* ------------------------------------- */}
|
|
||||||
<InnerWrapper>
|
|
||||||
<Button size="xs" variant="ghost">
|
|
||||||
xsmall
|
|
||||||
</Button>
|
|
||||||
<Button size="xs" variant="ghost" iconSvg={<DownloadSvg />}>
|
|
||||||
xsmall
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="xs"
|
|
||||||
variant="ghost"
|
|
||||||
iconSvg={<DownloadSvg />}
|
|
||||||
iconOnly={true}
|
|
||||||
>
|
|
||||||
xsmall
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" variant="ghost">
|
|
||||||
small
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" variant="ghost" iconSvg={<DownloadSvg />}>
|
|
||||||
small
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
iconSvg={<DownloadSvg />}
|
|
||||||
iconOnly={true}
|
|
||||||
>
|
|
||||||
small
|
|
||||||
</Button>
|
|
||||||
</InnerWrapper>
|
|
||||||
<InnerWrapper>
|
|
||||||
<Button size="md" variant="ghost">
|
|
||||||
medium
|
|
||||||
</Button>
|
|
||||||
<Button size="md" variant="ghost" iconSvg={<DownloadSvg />}>
|
|
||||||
medium
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="md"
|
|
||||||
variant="ghost"
|
|
||||||
iconSvg={<DownloadSvg />}
|
|
||||||
iconOnly={true}
|
|
||||||
>
|
|
||||||
medium
|
|
||||||
</Button>
|
|
||||||
<Button size="lg" variant="ghost">
|
|
||||||
large
|
|
||||||
</Button>
|
|
||||||
<Button size="lg" variant="ghost" iconSvg={<DownloadSvg />}>
|
|
||||||
large
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="lg"
|
|
||||||
variant="ghost"
|
|
||||||
iconSvg={<DownloadSvg />}
|
|
||||||
iconOnly={true}
|
|
||||||
>
|
|
||||||
large
|
|
||||||
</Button>
|
|
||||||
</InnerWrapper>
|
|
||||||
<InnerWrapper>
|
|
||||||
<Button variant="filled" brand="info">
|
|
||||||
button
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" brand="info">
|
|
||||||
button
|
|
||||||
</Button>
|
|
||||||
<Button variant="subtle" brand="info">
|
|
||||||
button
|
|
||||||
</Button>
|
|
||||||
<Button variant="ghost" brand="info">
|
|
||||||
button
|
|
||||||
</Button>
|
|
||||||
</InnerWrapper>
|
|
||||||
<InnerWrapper>
|
|
||||||
<Button variant="filled" disabled>
|
|
||||||
button
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" disabled>
|
|
||||||
button
|
|
||||||
</Button>
|
|
||||||
<Button variant="subtle" disabled>
|
|
||||||
button
|
|
||||||
</Button>
|
|
||||||
<Button variant="ghost" disabled>
|
|
||||||
button
|
|
||||||
</Button>
|
|
||||||
</InnerWrapper>
|
|
||||||
</OuterWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -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>,
|
|
||||||
)
|
|
||||||
4
apps/vite-project/src/types/css.d.ts
vendored
4
apps/vite-project/src/types/css.d.ts
vendored
@@ -1,4 +0,0 @@
|
|||||||
declare module '*.css' {
|
|
||||||
const content: { [className: string]: string };
|
|
||||||
export default content;
|
|
||||||
}
|
|
||||||
51
apps/vite-project/src/types/env.d.ts
vendored
51
apps/vite-project/src/types/env.d.ts
vendored
@@ -1,51 +0,0 @@
|
|||||||
/// <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;
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
import { defineConfig } from "vite";
|
|
||||||
import react from "@vitejs/plugin-react";
|
|
||||||
|
|
||||||
// https://vite.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
|
|
||||||
build: {
|
|
||||||
rolldownOptions: { },
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
services:
|
|
||||||
dev:
|
|
||||||
image: node:24-alpine
|
|
||||||
working_dir: /app
|
|
||||||
volumes:
|
|
||||||
- .:/app
|
|
||||||
- /app/node_modules
|
|
||||||
ports:
|
|
||||||
- "3000:3000"
|
|
||||||
command: sh
|
|
||||||
@@ -3,8 +3,8 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "turbo run build",
|
"dev": "turbo run dev",
|
||||||
"dev": "turbo run dev"
|
"build": "turbo run build"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"turbo": "^2.8.0"
|
"turbo": "^2.8.0"
|
||||||
@@ -12,5 +12,5 @@
|
|||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=20"
|
"node": ">=20"
|
||||||
},
|
},
|
||||||
"packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38"
|
"packageManager": "pnpm@11.5.2+sha512.71c631e382066efc25625d5cf029075de07b61b37f6e27350fbd84b1bda5864c8c1967adc280776b45c30a715c0359a3be08fef42d5bb09e2b99029979692916"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function genIndexFile(config: Config) {
|
||||||
|
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");
|
||||||
|
|
||||||
|
// 写入之前，确保输出目录存在，如果不存在就递归创建
|
||||||
|
if (!fs.existsSync(config.outputDir)) {
|
||||||
|
fs.mkdirSync(config.outputDir, { recursive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将内容写入到最终的 index.ts 文件中
|
||||||
|
const outputFilePath = path.join(config.outputDir, config.outputFile);
|
||||||
|
fs.writeFileSync(outputFilePath, fileContent, "utf-8");
|
||||||
|
|
||||||
|
console.log(`✨ 成功生成入口文件: ${outputFilePath}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ================= 脚本执行入口 =================
|
||||||
|
try {
|
||||||
|
console.log("🚀 开始扫描并生成入口文件...");
|
||||||
|
await genIndexFile(cssConfig);
|
||||||
|
await genIndexFile(tsConfig);
|
||||||
|
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 {
|
:root {
|
||||||
--color-red-50: oklch(97.1% 0.013 17.38);
|
--color-red-50: oklch(97.1% 0.013 17.38);
|
||||||
--color-red-100: oklch(93.6% 0.032 17.717);
|
--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-hover: var(--color-yellow-200);
|
||||||
--warning-bg-low-active: var(--color-yellow-300);
|
--warning-bg-low-active: var(--color-yellow-300);
|
||||||
|
|
||||||
--default-bg: var(--color-neutral-600);
|
--emphasize-bg: var(--color-neutral-600);
|
||||||
--default-bg-hover: var(--color-neutral-500);
|
--emphasize-bg-hover: var(--color-neutral-500);
|
||||||
--default-bg-active: var(--color-neutral-400);
|
--emphasize-bg-active: var(--color-neutral-400);
|
||||||
--default-bg-low: var(--color-neutral-100);
|
--emphasize-bg-low: var(--color-neutral-100);
|
||||||
--default-bg-low-hover: var(--color-neutral-200);
|
--emphasize-bg-low-hover: var(--color-neutral-200);
|
||||||
--default-bg-low-active: var(--color-neutral-300);
|
--emphasize-bg-low-active: var(--color-neutral-300);
|
||||||
|
|
||||||
--disabled-fg: var(--color-gray-400);
|
--disabled-fg: var(--color-gray-400);
|
||||||
--disabled-bg: var(--color-gray-100);
|
--disabled-bg: var(--color-gray-100);
|
||||||
@@ -7,6 +7,7 @@
|
|||||||
--brand-bg-low-hover: var(--info-bg-low-hover);
|
--brand-bg-low-hover: var(--info-bg-low-hover);
|
||||||
--brand-bg-low-active: var(--info-bg-low-active);
|
--brand-bg-low-active: var(--info-bg-low-active);
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand--danger {
|
.brand--danger {
|
||||||
--brand-bg: var(--danger-bg);
|
--brand-bg: var(--danger-bg);
|
||||||
--brand-bg-hover: var(--danger-bg-hover);
|
--brand-bg-hover: var(--danger-bg-hover);
|
||||||
@@ -15,6 +16,7 @@
|
|||||||
--brand-bg-low-hover: var(--danger-bg-low-hover);
|
--brand-bg-low-hover: var(--danger-bg-low-hover);
|
||||||
--brand-bg-low-active: var(--danger-bg-low-active);
|
--brand-bg-low-active: var(--danger-bg-low-active);
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand--success {
|
.brand--success {
|
||||||
--brand-bg: var(--success-bg);
|
--brand-bg: var(--success-bg);
|
||||||
--brand-bg-hover: var(--success-bg-hover);
|
--brand-bg-hover: var(--success-bg-hover);
|
||||||
@@ -23,6 +25,7 @@
|
|||||||
--brand-bg-low-hover: var(--success-bg-low-hover);
|
--brand-bg-low-hover: var(--success-bg-low-hover);
|
||||||
--brand-bg-low-active: var(--success-bg-low-active);
|
--brand-bg-low-active: var(--success-bg-low-active);
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand--warning {
|
.brand--warning {
|
||||||
--brand-bg: var(--warning-bg);
|
--brand-bg: var(--warning-bg);
|
||||||
--brand-bg-hover: var(--warning-bg-hover);
|
--brand-bg-hover: var(--warning-bg-hover);
|
||||||
@@ -31,12 +34,13 @@
|
|||||||
--brand-bg-low-hover: var(--warning-bg-low-hover);
|
--brand-bg-low-hover: var(--warning-bg-low-hover);
|
||||||
--brand-bg-low-active: var(--warning-bg-low-active);
|
--brand-bg-low-active: var(--warning-bg-low-active);
|
||||||
}
|
}
|
||||||
.brand--default {
|
|
||||||
--brand-bg: var(--default-bg);
|
.brand--emphasize {
|
||||||
--brand-bg-hover: var(--default-bg-hover);
|
--brand-bg: var(--emphasize-bg);
|
||||||
--brand-bg-active: var(--default-bg-active);
|
--brand-bg-hover: var(--emphasize-bg-hover);
|
||||||
--brand-bg-low: var(--default-bg-low);
|
--brand-bg-active: var(--emphasize-bg-active);
|
||||||
--brand-bg-low-hover: var(--default-bg-low-hover);
|
--brand-bg-low: var(--emphasize-bg-low);
|
||||||
--brand-bg-low-active: var(--default-bg-low-active);
|
--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-behavior: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overscroll--x--auto {
|
.overscroll--x-auto {
|
||||||
overscroll-behavior-x: auto;
|
overscroll-behavior-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overscroll--x--contain {
|
.overscroll--x-contain {
|
||||||
overscroll-behavior-x: contain;
|
overscroll-behavior-x: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overscroll--x--none {
|
.overscroll--x-none {
|
||||||
overscroll-behavior-x: none;
|
overscroll-behavior-x: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overscroll--y--auto {
|
.overscroll--y-auto {
|
||||||
overscroll-behavior-y: auto;
|
overscroll-behavior-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overscroll--y--contain {
|
.overscroll--y-contain {
|
||||||
overscroll-behavior-y: contain;
|
overscroll-behavior-y: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overscroll--y--none {
|
.overscroll--y-none {
|
||||||
overscroll-behavior-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 {
|
@layer utility {
|
||||||
|
|
||||||
/* 自动 & 零 */
|
/* 自动 & 零 */
|
||||||
.z--auto {
|
.z--auto {
|
||||||
z-index: auto;
|
z-index: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.z--0 {
|
.z--0 {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
@@ -11,33 +13,41 @@
|
|||||||
.z--10 {
|
.z--10 {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.z--20 {
|
.z--20 {
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
.z--30 {
|
.z--30 {
|
||||||
z-index: 30;
|
z-index: 30;
|
||||||
}
|
}
|
||||||
|
|
||||||
.z--40 {
|
.z--40 {
|
||||||
z-index: 40;
|
z-index: 40;
|
||||||
}
|
}
|
||||||
|
|
||||||
.z--50 {
|
.z--50 {
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 负值（negative） */
|
/* 负值（negative） */
|
||||||
.z--n--10 {
|
.z--n-10 {
|
||||||
z-index: -10;
|
z-index: -10;
|
||||||
}
|
}
|
||||||
.z--n--20 {
|
|
||||||
|
.z--n-20 {
|
||||||
z-index: -20;
|
z-index: -20;
|
||||||
}
|
}
|
||||||
.z--n--30 {
|
|
||||||
|
.z--n-30 {
|
||||||
z-index: -30;
|
z-index: -30;
|
||||||
}
|
}
|
||||||
.z--n--40 {
|
|
||||||
|
.z--n-40 {
|
||||||
z-index: -40;
|
z-index: -40;
|
||||||
}
|
}
|
||||||
.z--n--50 {
|
|
||||||
|
.z--n-50 {
|
||||||
z-index: -50;
|
z-index: -50;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,47 +1,58 @@
|
|||||||
@layer utility {
|
@layer utility {
|
||||||
.h--item--xs {
|
.h--item-xs {
|
||||||
/* 24px minimum touch size for text line */
|
/* 24px minimum touch size for text line */
|
||||||
height: var(--height-item-xs);
|
height: var(--height-item-xs);
|
||||||
}
|
}
|
||||||
.h--item--sm {
|
|
||||||
|
.h--item-sm {
|
||||||
/* 28px save space for most used size */
|
/* 28px save space for most used size */
|
||||||
height: var(--height-item-sm);
|
height: var(--height-item-sm);
|
||||||
}
|
}
|
||||||
.h--item--md {
|
|
||||||
|
.h--item-md {
|
||||||
/* 34px most used size */
|
/* 34px most used size */
|
||||||
height: var(--height-item-md);
|
height: var(--height-item-md);
|
||||||
}
|
}
|
||||||
.h--item--lg {
|
|
||||||
|
.h--item-lg {
|
||||||
/* 44px maximum touch size without waste */
|
/* 44px maximum touch size without waste */
|
||||||
height: var(--height-item-lg);
|
height: var(--height-item-lg);
|
||||||
}
|
}
|
||||||
.h--item--xl {
|
|
||||||
|
.h--item-xl {
|
||||||
/* 56px section-header bar */
|
/* 56px section-header bar */
|
||||||
height: var(--height-item-xl);
|
height: var(--height-item-xl);
|
||||||
}
|
}
|
||||||
.h--item--2xl {
|
|
||||||
|
.h--item-2xl {
|
||||||
/* 64px navigation bar */
|
/* 64px navigation bar */
|
||||||
height: var(--height-item-2xl);
|
height: var(--height-item-2xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* -------------- */
|
/* -------------- */
|
||||||
.h--inline--xs {
|
.h--inline-xs {
|
||||||
/* 16px */
|
/* 16px */
|
||||||
height: calc(var(--font-size-xs) * var(--line-height-xs));
|
height: calc(var(--font-size-xs) * var(--line-height-xs));
|
||||||
}
|
}
|
||||||
.h--inline--sm {
|
|
||||||
|
.h--inline-sm {
|
||||||
/* 20px */
|
/* 20px */
|
||||||
height: calc(var(--font-size-sm) * var(--line-height-sm));
|
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));
|
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));
|
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));
|
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));
|
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 {
|
.px--none {
|
||||||
padding-inline: 0px;
|
padding-inline: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px--xs {
|
.px--xs {
|
||||||
/* 4px, 24px - 16px = 8px */
|
/* 4px, 24px - 16px = 8px */
|
||||||
padding-inline: var(--padding-xs);
|
padding-inline: var(--padding-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.px--sm {
|
.px--sm {
|
||||||
/* 4px, 28px - 20px = 8px */
|
/* 4px, 28px - 20px = 8px */
|
||||||
padding-inline: var(--padding-sm);
|
padding-inline: var(--padding-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.px--md {
|
.px--md {
|
||||||
/* 10px */
|
/* 10px */
|
||||||
padding-inline: var(--padding-md);
|
padding-inline: var(--padding-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.px--lg {
|
.px--lg {
|
||||||
/* 16px */
|
/* 16px */
|
||||||
padding-inline: var(--padding-lg);
|
padding-inline: var(--padding-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.px--xl {
|
.px--xl {
|
||||||
padding-inline: var(--padding-xl);
|
padding-inline: var(--padding-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
.px--2xl {
|
.px--2xl {
|
||||||
padding-inline: var(--padding-2xl);
|
padding-inline: var(--padding-2xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ------------------------ */
|
/* ------------------------ */
|
||||||
.py--none {
|
.py--none {
|
||||||
padding-block: 0px;
|
padding-block: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.py--xs {
|
.py--xs {
|
||||||
padding-block: var(--padding-xs);
|
padding-block: var(--padding-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.py--sm {
|
.py--sm {
|
||||||
padding-block: var(--padding-sm);
|
padding-block: var(--padding-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.py--md {
|
.py--md {
|
||||||
padding-block: var(--padding-md);
|
padding-block: var(--padding-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.py--lg {
|
.py--lg {
|
||||||
padding-block: var(--padding-lg);
|
padding-block: var(--padding-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.py--xl {
|
.py--xl {
|
||||||
padding-block: var(--padding-xl);
|
padding-block: var(--padding-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
.py--2xl {
|
.py--2xl {
|
||||||
padding-block: var(--padding-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 {
|
@layer utility {
|
||||||
.w--item--xs {
|
.w--item-xs {
|
||||||
/* 24px minimum touch size for text line */
|
/* 24px minimum touch size for text line */
|
||||||
width: var(--height-item-xs);
|
width: var(--height-item-xs);
|
||||||
}
|
}
|
||||||
.w--item--sm {
|
|
||||||
|
.w--item-sm {
|
||||||
/* 30px save space for most used size */
|
/* 30px save space for most used size */
|
||||||
width: var(--height-item-sm);
|
width: var(--height-item-sm);
|
||||||
}
|
}
|
||||||
.w--item--md {
|
|
||||||
|
.w--item-md {
|
||||||
/* 34px most used size */
|
/* 34px most used size */
|
||||||
width: var(--height-item-lg);
|
width: var(--height-item-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.w--item-lg {
|
.w--item-lg {
|
||||||
/* 44px maximum touch size without waste */
|
/* 44px maximum touch size without waste */
|
||||||
width: var(--height-item-lg);
|
width: var(--height-item-lg);
|
||||||
}
|
}
|
||||||
.w--item--xl {
|
|
||||||
|
.w--item-xl {
|
||||||
/* 56px section-header bar */
|
/* 56px section-header bar */
|
||||||
width: var(--height-item-xl);
|
width: var(--height-item-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
.w--item--2xl {
|
.w--item--2xl {
|
||||||
/* 64px navigation bar */
|
/* 64px navigation bar */
|
||||||
width: var(--height-item-xl);
|
width: var(--height-item-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------------------------------------------------- */
|
/* ---------------------------------------------------- */
|
||||||
.w--inline--xs {
|
.w--inline-xs {
|
||||||
width: calc(var(--font-size-xs) * var(--line-height-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));
|
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));
|
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));
|
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));
|
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));
|
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,
|
"verbatimModuleSyntax": true,
|
||||||
"moduleDetection": "force",
|
"moduleDetection": "force",
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx"
|
||||||
|
|
||||||
},
|
},
|
||||||
"include": ["src", "scripts", "vite.config.ts"]
|
"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",
|
"version": "0.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
@@ -24,9 +24,11 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"gen-index": "ts-node scripts/gen-index.ts",
|
"gen-index": "ts-node scripts/gen-index.ts",
|
||||||
"gen-dts": "tsc -p tsconfig.build.json",
|
"gen-dts": "tsc -p tsconfig.build.json",
|
||||||
"dev": "pnpm gen-index && vite",
|
|
||||||
"build": "pnpm gen-index && vite build && pnpm gen-dts"
|
"build": "pnpm gen-index && vite build && pnpm gen-dts"
|
||||||
},
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@dg/css": "workspace:*"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^25.6.0",
|
"@types/node": "^25.6.0",
|
||||||
"@vitejs/plugin-react": "^6.0.1",
|
"@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function genIndexFile(config: Config) {
|
||||||
|
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");
|
||||||
|
|
||||||
|
// 写入之前，确保输出目录存在，如果不存在就递归创建
|
||||||
|
if (!fs.existsSync(config.outputDir)) {
|
||||||
|
fs.mkdirSync(config.outputDir, { recursive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将内容写入到最终的 index.ts 文件中
|
||||||
|
const outputFilePath = path.join(config.outputDir, config.outputFile);
|
||||||
|
fs.writeFileSync(outputFilePath, fileContent, "utf-8");
|
||||||
|
|
||||||
|
console.log(`✨ 成功生成入口文件: ${outputFilePath}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ================= 脚本执行入口 =================
|
||||||
|
try {
|
||||||
|
console.log("🚀 开始扫描并生成入口文件...");
|
||||||
|
await genIndexFile(cssConfig);
|
||||||
|
await genIndexFile(tsConfig);
|
||||||
|
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 { ButtonLoading } from "./ButtonLoading";
|
||||||
import { ButtonRoot } from "./ButtonRoot";
|
import { ButtonRoot } from "./ButtonRoot";
|
||||||
|
|
||||||
export namespace Button {
|
export const Button = {
|
||||||
export const Root = ButtonRoot;
|
Root: ButtonRoot,
|
||||||
export const Icon = ButtonIcon;
|
Icon: ButtonIcon,
|
||||||
export const Loading = ButtonLoading;
|
Loading: ButtonLoading,
|
||||||
}
|
}
|
||||||
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]);
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user