@jike-js/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 jike-js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# @jike-js/ui
+
+这是 jike 统一前端组件的参考实现，组件契约见 `frontend/UI_COMPONENT_CATALOG.md`。
+
+业务项目只需引入 `@jike-js/ui/styles.css` 一个样式入口；该入口在构建时包含 Token、基础层和组件层，避免漏引或形成第二份 reset。Token 的唯一源文件仍是 `frontend/tokens/design-tokens.json`，CSS 是其运行时输出。
+
+当前提供：`LoginShell`、`PageLayout`、`PageHeader`、`Notice`、`EmptyState`、`LoadingState`。包构建会同时检查 TypeScript，并输出单一 `styles.css`。
+
+本包不包含业务请求、路由、权限和项目 Logo。业务项目只能通过组件参数接入这些能力。登录文案使用 `brandTitle`、`brandSubtitle`、`formTitle`、`formSubtitle` 四个明确层级。

package/dist/Feedback.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import "./styles.css";
+export interface NoticeProps {
+    type?: "info" | "success" | "warning" | "error";
+    children: ReactNode;
+}
+export declare function Notice({ type, children }: NoticeProps): import("react").JSX.Element;
+export interface EmptyStateProps {
+    title?: string;
+    description?: string;
+    action?: ReactNode;
+}
+export declare function EmptyState({ title, description, action }: EmptyStateProps): import("react").JSX.Element;
+export interface LoadingStateProps {
+    label?: string;
+}
+export declare function LoadingState({ label }: LoadingStateProps): import("react").JSX.Element;

package/dist/Feedback.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, CheckCircle2, Info, Inbox, LoaderCircle } from "lucide-react";
+import "./styles.css";
+export function Notice({ type = "info", children }) {
+    const Icon = type === "success" ? CheckCircle2 : type === "error" || type === "warning" ? AlertCircle : Info;
+    return _jsxs("div", { className: `jike-notice jike-notice--${type}`, role: "status", children: [_jsx(Icon, { "aria-hidden": "true" }), " ", _jsx("span", { children: children })] });
+}
+export function EmptyState({ title = "暂无数据", description, action }) {
+    return _jsxs("div", { className: "jike-empty-state", children: [_jsx(Inbox, { className: "jike-empty-state__icon", "aria-hidden": "true" }), _jsx("strong", { children: title }), description ? _jsx("p", { children: description }) : null, action] });
+}
+export function LoadingState({ label = "加载中..." }) {
+    return _jsxs("div", { className: "jike-loading-state", role: "status", children: [_jsx(LoaderCircle, { "aria-hidden": "true", className: "jike-loading-state__spinner" }), _jsx("span", { children: label })] });
+}

package/dist/LoginShell.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+import "./styles.css";
+export interface LoginCredentials {
+    username: string;
+    password: string;
+}
+export interface LoginShellProps {
+    brandTitle: string;
+    logo: string | ReactNode;
+    brandSubtitle?: string;
+    formTitle?: string;
+    formSubtitle?: string;
+    onSubmit: (credentials: LoginCredentials) => void | Promise<void>;
+    loading?: boolean;
+    error?: string;
+}
+export declare function LoginShell({ brandTitle, logo, brandSubtitle, formTitle, formSubtitle, onSubmit, loading, error, }: LoginShellProps): import("react").JSX.Element;

package/dist/LoginShell.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LockKeyhole, LoaderCircle, LogIn, User } from "lucide-react";
+import { useState } from "react";
+import "./styles.css";
+export function LoginShell({ brandTitle, logo, brandSubtitle = "提升工作效率，简化操作流程", formTitle = "欢迎回来", formSubtitle = "登录以继续使用", onSubmit, loading = false, error, }) {
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    async function handleSubmit(event) {
+        event.preventDefault();
+        if (loading)
+            return;
+        await onSubmit({ username: username.trim(), password: password.trim() });
+    }
+    return (_jsx("main", { className: "jike-login-shell", children: _jsxs("section", { className: "jike-login-shell__card", "aria-label": `${brandTitle}登录`, children: [_jsxs("div", { className: "jike-login-shell__brand", children: [_jsx("div", { className: "jike-login-shell__logo", children: typeof logo === "string" ? _jsx("img", { src: logo, alt: brandTitle }) : logo }), _jsx("h1", { children: brandTitle }), _jsx("p", { children: brandSubtitle })] }), _jsxs("div", { className: "jike-login-shell__form-panel", children: [_jsx("h2", { children: formTitle }), _jsx("p", { className: "jike-login-shell__hint", children: formSubtitle }), _jsxs("form", { onSubmit: handleSubmit, autoComplete: "on", noValidate: true, "aria-busy": loading, children: [_jsxs("label", { className: "jike-login-shell__field", htmlFor: "jike-login-username", children: [_jsx("span", { children: "\u7528\u6237\u540D" }), _jsxs("span", { className: "jike-login-shell__control", children: [_jsx(User, { "aria-hidden": "true" }), _jsx("input", { id: "jike-login-username", name: "username", value: username, onChange: (event) => setUsername(event.target.value), placeholder: "\u8BF7\u8F93\u5165\u7528\u6237\u540D", autoComplete: "username", disabled: loading, required: true, "aria-invalid": Boolean(error) })] })] }), _jsxs("label", { className: "jike-login-shell__field", htmlFor: "jike-login-password", children: [_jsx("span", { children: "\u5BC6\u7801" }), _jsxs("span", { className: "jike-login-shell__control", children: [_jsx(LockKeyhole, { "aria-hidden": "true" }), _jsx("input", { id: "jike-login-password", name: "password", type: "password", value: password, onChange: (event) => setPassword(event.target.value), placeholder: "\u8BF7\u8F93\u5165\u5BC6\u7801", autoComplete: "current-password", disabled: loading, required: true, "aria-invalid": Boolean(error) })] })] }), error ? _jsx("p", { className: "jike-login-shell__error", role: "alert", "aria-live": "polite", children: error }) : null, _jsxs("button", { className: "jike-login-shell__submit", type: "submit", disabled: loading, children: [loading ? "登录中..." : "登录", loading ? _jsx(LoaderCircle, { "aria-hidden": "true", className: "jike-login-shell__spinner" }) : _jsx(LogIn, { "aria-hidden": "true" })] })] })] })] }) }));
+}

package/dist/PageHeader.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import "./styles.css";
+export interface PageHeaderProps {
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+}
+export declare function PageHeader({ title, description, actions }: PageHeaderProps): import("react").JSX.Element;

package/dist/PageHeader.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+export function PageHeader({ title, description, actions }) {
+    return _jsxs("div", { className: "jike-page-header", children: [_jsxs("div", { children: [_jsx("h1", { children: title }), description ? _jsx("p", { children: description }) : null] }), actions ? _jsx("div", { className: "jike-page-header__actions", children: actions }) : null] });
+}

package/dist/PageLayout.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import "./styles.css";
+export interface PageLayoutProps {
+    children: ReactNode;
+    sidebar?: ReactNode;
+    topbar?: ReactNode;
+}
+export declare function PageLayout({ children, sidebar, topbar }: PageLayoutProps): import("react").JSX.Element;

package/dist/PageLayout.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+export function PageLayout({ children, sidebar, topbar }) {
+    return _jsxs("div", { className: "jike-page-layout", children: [_jsx("header", { className: "jike-page-layout__topbar", children: topbar }), _jsxs("div", { className: "jike-page-layout__body", children: [sidebar ? _jsx("aside", { className: "jike-page-layout__sidebar", children: sidebar }) : null, _jsx("main", { className: "jike-page-layout__content", children: children })] })] });
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { LoginShell } from "./LoginShell";
+export type { LoginCredentials, LoginShellProps } from "./LoginShell";
+export { PageLayout } from "./PageLayout";
+export type { PageLayoutProps } from "./PageLayout";
+export { PageHeader } from "./PageHeader";
+export type { PageHeaderProps } from "./PageHeader";
+export { EmptyState, LoadingState, Notice } from "./Feedback";
+export type { EmptyStateProps, LoadingStateProps, NoticeProps } from "./Feedback";

package/dist/index.js

@@ -0,0 +1,4 @@
+export { LoginShell } from "./LoginShell";
+export { PageLayout } from "./PageLayout";
+export { PageHeader } from "./PageHeader";
+export { EmptyState, LoadingState, Notice } from "./Feedback";

package/dist/styles.css

@@ -0,0 +1,181 @@
+:root {
+  --color-brand: #00b8a9;
+  --color-brand-hover: #008e80;
+  --color-primary: #3566ec;
+  --color-primary-hover: #2853d4;
+  --color-bg-page: #f4f7fb;
+  --color-bg-surface: #ffffff;
+  --color-bg-muted: #f8fafc;
+  --color-text-primary: #172033;
+  --color-text-secondary: #526076;
+  --color-text-muted: #758197;
+  --color-text-placeholder: #98a2b3;
+  --color-border: #e3e8f1;
+  --color-success: #18a874;
+  --color-success-soft: #e5f8f1;
+  --color-warning: #9a5a08;
+  --color-warning-soft: #fff3df;
+  --color-danger: #b42318;
+  --color-danger-soft: #feeceb;
+  --font-family-sans: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
+  --font-family-mono: Consolas, "SFMono-Regular", monospace;
+  --font-size-xs: 12px;
+  --font-size-sm: 13px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 28px;
+  --line-height-body: 1.6;
+  --line-height-heading: 1.3;
+  --icon-size-sm: 16px;
+  --icon-size-md: 18px;
+  --icon-size-lg: 24px;
+  --icon-size-empty: 40px;
+  --icon-stroke-width: 2;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --radius-control: 6px;
+  --radius-panel: 8px;
+  --radius-container: 12px;
+  --radius-pill: 999px;
+  --border-width-default: 1px;
+  --control-input-padding-x: 12px;
+  --control-input-icon-padding-left: 40px;
+  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
+  --shadow-login: 0 8px 24px rgba(15, 23, 42, .12);
+  --shadow-modal: 0 20px 60px rgba(15, 23, 42, .18);
+  --focus-ring: 0 0 0 3px rgba(53, 102, 236, .25);
+  --state-disabled-opacity: 0.72;
+  --motion-spin-duration: 0.9s;
+  --modal-width-sm: 440px;
+  --modal-width-md: 560px;
+  --modal-width-lg: 720px;
+  --drawer-max-width: 94vw;
+  --control-height-sm: 32px;
+  --control-height: 36px;
+  --control-height-lg: 40px;
+  --page-max-width: 1280px;
+  --sidebar-width: 230px;
+  --topbar-height: 56px;
+  --login-container-max-width: 840px;
+  --login-container-width: 90%;
+  --login-container-min-height: 480px;
+  --login-column-ratio: 1fr 1fr;
+  --login-panel-padding-x: 50px;
+  --login-panel-padding-y: 40px;
+  --login-brand-padding-x: 40px;
+  --login-brand-padding-y: 40px;
+  --login-logo-size: 120px;
+  --login-logo-size-mobile: 80px;
+  --login-brand-min-height-mobile: 230px;
+  --login-control-height: 50px;
+  --login-subtitle-form-gap: 24px;
+  --login-field-gap: 16px;
+  --login-button-gap: 8px;
+  --login-form-offset-y: -24px;
+  --login-mobile-breakpoint: 768px;
+  --z-sidebar: 20;
+  --z-topbar: 30;
+  --z-modal: 70;
+  --z-toast: 100;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+}
+
+/* @jike-js/ui 的最小全局基础层；业务项目不再重复创建同义 reset。 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--color-bg-page);
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  -webkit-font-smoothing: antialiased;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
+img,
+svg {
+  display: block;
+}
+
+.jike-login-shell { box-sizing: border-box; min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); background: var(--color-bg-page); color: var(--color-text-primary); font-family: var(--font-family-sans); }
+.jike-login-shell__card { box-sizing: border-box; display: grid; grid-template-columns: var(--login-column-ratio); width: var(--login-container-width); max-width: var(--login-container-max-width); min-height: var(--login-container-min-height); overflow: hidden; background: var(--color-bg-surface); border: var(--border-width-default) solid var(--color-border); border-radius: var(--radius-container); box-shadow: var(--shadow-login); }
+.jike-login-shell__brand { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--login-brand-padding-y) var(--login-brand-padding-x); color: var(--color-bg-surface); text-align: center; background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover)); }
+.jike-login-shell__logo { display: grid; place-items: center; width: var(--login-logo-size); height: var(--login-logo-size); margin-bottom: var(--space-6); }
+.jike-login-shell__logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
+.jike-login-shell__brand h1, .jike-login-shell__form-panel h2 { margin: 0; font-size: var(--font-size-2xl); font-weight: 700; line-height: var(--line-height-heading); }
+.jike-login-shell__brand p { margin: var(--space-4) 0 0; font-size: var(--font-size-lg); line-height: var(--line-height-body); }
+.jike-login-shell__form-panel { display: flex; flex-direction: column; justify-content: center; padding: var(--login-panel-padding-y) var(--login-panel-padding-x); transform: translateY(var(--login-form-offset-y)); }
+.jike-login-shell__form-panel h2 { font-size: var(--font-size-3xl); }
+.jike-login-shell__hint { margin: var(--space-2) 0 var(--login-subtitle-form-gap); color: var(--color-text-muted); font-size: var(--font-size-md); }
+.jike-login-shell__field { display: block; margin-bottom: var(--login-field-gap); color: var(--color-text-secondary); font-size: var(--font-size-md); font-weight: 600; }
+.jike-login-shell__control { position: relative; display: block; margin-top: var(--space-2); }
+.jike-login-shell__control svg { position: absolute; top: 50%; left: var(--space-4); width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--color-text-muted); transform: translateY(-50%); pointer-events: none; }
+.jike-login-shell__control input { box-sizing: border-box; width: 100%; height: var(--login-control-height); padding: 0 var(--control-input-padding-x) 0 var(--control-input-icon-padding-left); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-md); background: var(--color-bg-muted); border: var(--border-width-default) solid var(--color-border); border-radius: var(--radius-control); transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
+.jike-login-shell__control input:hover:not(:disabled) { border-color: var(--color-text-muted); background: var(--color-bg-surface); }
+.jike-login-shell__control input:focus { outline: none; border-color: var(--color-primary); background: var(--color-bg-surface); box-shadow: var(--focus-ring); }
+.jike-login-shell__control input[aria-invalid="true"] { border-color: var(--color-danger); }
+.jike-login-shell__control input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .18); }
+.jike-login-shell__control input:disabled { cursor: not-allowed; background: var(--color-bg-muted); }
+.jike-login-shell__error { margin: calc(var(--space-2) * -1) 0 var(--space-4); color: var(--color-danger); font-size: var(--font-size-sm); }
+.jike-login-shell__submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; height: var(--login-control-height); margin-top: var(--login-button-gap); color: var(--color-bg-surface); font: inherit; font-size: var(--font-size-lg); font-weight: 600; background: var(--color-brand); border: var(--border-width-default) solid var(--color-brand); border-radius: var(--radius-control); transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
+.jike-login-shell__submit:hover:not(:disabled) { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
+.jike-login-shell__submit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+.jike-login-shell__submit:active:not(:disabled) { transform: translateY(1px); }
+.jike-login-shell__submit:disabled { cursor: wait; opacity: var(--state-disabled-opacity); }
+.jike-login-shell__submit svg { width: var(--icon-size-md); height: var(--icon-size-md); }
+.jike-login-shell__spinner, .jike-loading-state__spinner { animation: jike-spin var(--motion-spin-duration) linear infinite; }
+.jike-page-layout { min-height: 100vh; background: var(--color-bg-page); color: var(--color-text-primary); font-family: var(--font-family-sans); }
+.jike-page-layout__topbar { height: var(--topbar-height); background: var(--color-bg-surface); border-bottom: var(--border-width-default) solid var(--color-border); }
+.jike-page-layout__body { display: flex; min-height: calc(100vh - var(--topbar-height)); }
+.jike-page-layout__sidebar { width: var(--sidebar-width); flex: 0 0 auto; background: var(--color-bg-surface); border-right: var(--border-width-default) solid var(--color-border); }
+.jike-page-layout__content { width: 100%; max-width: var(--page-max-width); margin: 0 auto; padding: var(--space-8); }
+.jike-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
+.jike-page-header h1 { margin: 0; font-size: var(--font-size-2xl); line-height: var(--line-height-heading); }
+.jike-page-header p { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
+.jike-page-header__actions { display: flex; align-items: center; gap: var(--space-2); }
+.jike-notice, .jike-loading-state { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-panel); font-size: var(--font-size-sm); }
+.jike-notice svg, .jike-loading-state svg { width: var(--icon-size-md); height: var(--icon-size-md); flex: 0 0 auto; }
+.jike-notice--info { color: var(--color-primary); background: var(--color-bg-muted); }
+.jike-notice--success { color: var(--color-success); background: var(--color-success-soft); }
+.jike-notice--warning { color: var(--color-warning); background: var(--color-warning-soft); }
+.jike-notice--error { color: var(--color-danger); background: var(--color-danger-soft); }
+.jike-empty-state { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8); color: var(--color-text-secondary); text-align: center; }
+.jike-empty-state__icon { display: grid; place-items: center; width: var(--icon-size-empty); height: var(--icon-size-empty); color: var(--color-text-muted); }
+.jike-empty-state p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
+.jike-loading-state { justify-content: center; color: var(--color-text-secondary); }
+@keyframes jike-spin { to { transform: rotate(360deg); } }
+/* CSS 媒体查询不能读取自定义属性；768px 与 breakpoint.md Token 保持同步。 */
+@media (max-width: 768px) { .jike-login-shell { padding: var(--space-4); } .jike-login-shell__card { grid-template-columns: 1fr; width: 100%; min-height: 0; } .jike-login-shell__brand { min-height: var(--login-brand-min-height-mobile); padding: var(--space-8) var(--space-6); } .jike-login-shell__logo { width: var(--login-logo-size-mobile); height: var(--login-logo-size-mobile); } .jike-login-shell__form-panel { padding: var(--space-8) var(--space-6); transform: none; } .jike-page-layout__sidebar { display: none; } .jike-page-layout__content { padding: var(--space-6); } }

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@jike-js/ui",
+  "version": "0.1.0",
+  "description": "jike 统一前端组件实现",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/jw2019410/jike-coderule.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "files": ["dist", "README.md"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./styles.css": "./dist/styles.css"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.468.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "prebuild": "node scripts/clean-dist.mjs",
+    "build": "tsc --project tsconfig.json && node scripts/copy-css.mjs",
+    "pack:check": "pnpm build && npm pack --dry-run"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "typescript": "^7.0.2"
+  }
+}