@sxo/component-admin 0.0.0

package/README.md

@@ -0,0 +1,14 @@
+# @sxo/component-admin
+
+SXO 设计系统的后台管理系统组件。
+
+## 功能
+
+- **开箱即用**: 提供侧边栏、顶部栏、多页签等常用组件。
+- **灵活布局**: 支持多种后台布局模式。
+
+## 安装
+
+```bash
+pnpm add @sxo/component-admin @sxo/ui @sxo/design
+```

package/dist/components/AdminStyles.d.ts

@@ -0,0 +1,109 @@
+export interface StatCardOptions {
+    variant?: 'simple' | 'bordered' | 'solid';
+    color?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+}
+export declare function getStatCardClasses(options?: StatCardOptions): {
+    container: string;
+    title: string;
+    value: string;
+    trend: string;
+};
+export interface KanbanOptions {
+    columns?: number;
+}
+export declare function getKanbanClasses(options?: KanbanOptions): {
+    board: string;
+    column: string;
+    columnHeader: string;
+    columnTitle: string;
+    columnBadge: string;
+    itemList: string;
+    item: string;
+    itemTitle: string;
+    itemDesc: string;
+    itemFooter: string;
+    avatarGroup: string;
+};
+export declare function getDescriptionClasses(): {
+    container: string;
+    header: string;
+    title: string;
+    grid: string;
+    item: string;
+    label: string;
+    content: string;
+};
+export declare function getShellClasses(): {
+    layout: string;
+    sidebar: string;
+    sidebarCollapsed: string;
+    sidebarHeader: string;
+    sidebarContent: string;
+    sidebarFooter: string;
+    navItem: string;
+    navItemActive: string;
+    main: string;
+    header: string;
+    content: string;
+};
+export declare function getLoginClasses(variant?: 'split' | 'centered'): {
+    container: string;
+    card: string;
+    title: string;
+    subtitle: string;
+    form: string;
+    footer: string;
+} | {
+    container: string;
+    left: string;
+    right: string;
+    card: string;
+    title: string;
+    subtitle: string;
+    form: string;
+    footer: string;
+};
+export declare function getResultClasses(status?: 'success' | 'error' | 'info' | 'warning' | '404' | '500'): {
+    container: string;
+    icon: {
+        base: string;
+        success: string;
+        error: string;
+        info: string;
+        warning: string;
+        '404': string;
+        '500': string;
+    };
+    title: string;
+    subtitle: string;
+    extra: string;
+    content: string;
+};
+export declare function getPageHeaderClasses(): {
+    container: string;
+    breadcrumb: string;
+    heading: string;
+    left: string;
+    title: string;
+    subtitle: string;
+    extra: string;
+    footer: string;
+};
+export declare function getQueryFilterClasses(): {
+    container: string;
+    grid: string;
+    actions: string;
+};
+export declare function getStepFormClasses(): {
+    container: string;
+    steps: string;
+    stepLine: string;
+    stepItem: string;
+    stepCircle: string;
+    stepActive: string;
+    stepPending: string;
+    stepCompleted: string;
+    stepTitle: string;
+    content: string;
+    footer: string;
+};

package/dist/headless.d.ts

@@ -0,0 +1,32 @@
+export interface KanbanItem {
+    id: string;
+    title: string;
+    description?: string;
+    tags?: string[];
+    assignee?: string;
+}
+export interface KanbanColumn {
+    id: string;
+    title: string;
+    items: KanbanItem[];
+}
+export declare function useKanban(initialColumns: KanbanColumn[]): {
+    columns: KanbanColumn[];
+    moveItem: (itemId: string, fromColId: string, toColId: string, newIndex: number) => void;
+};
+export declare function useDashboard(data: any): {
+    stats: any;
+    charts: any;
+};
+export declare function useShell(initialCollapsed?: boolean): {
+    readonly isCollapsed: boolean;
+    toggle: () => void;
+    subscribe: (l: (collapsed: boolean) => void) => () => boolean;
+};
+export declare function useSteps(total: number, initial?: number): {
+    readonly current: number;
+    next: () => void;
+    prev: () => void;
+    goTo: (step: number) => void;
+    subscribe: (l: (step: number) => void) => () => boolean;
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function i(t){return{columns:t,moveItem:(n,s,o,l)=>{console.log(`Moving item ${n} from ${s} to ${o} at index ${l}`)}}}function a(t){const r=t.stats||[],e=t.charts||[];return{stats:r,charts:e}}function c(t=!1){let r=t;const e=new Set;return{get isCollapsed(){return r},toggle:()=>{r=!r,e.forEach(n=>n(r))},subscribe:n=>(e.add(n),()=>e.delete(n))}}function d(t,r=0){let e=r;const n=new Set;return{get current(){return e},next:()=>{e<t-1&&(e++,n.forEach(s=>s(e)))},prev:()=>{e>0&&(e--,n.forEach(s=>s(e)))},goTo:s=>{s>=0&&s<t&&(e=s,n.forEach(o=>o(e)))},subscribe:s=>(n.add(s),()=>n.delete(s))}}function u(t={}){const{variant:r="bordered",color:e="primary"}=t,n={base:"p-6 rounded-xl transition-all duration-300",bordered:"border border-neutral-200 bg-white shadow-sm hover:shadow-md",simple:"bg-transparent",solid:"text-white shadow-lg"},s={primary:"bg-primary",success:"bg-success",warning:"bg-warning",error:"bg-error",info:"bg-info"};return{container:[n.base,r==="solid"?s[e]:n[r]].join(" "),title:"text-sm font-medium opacity-60 mb-2 uppercase tracking-wider",value:"text-3xl font-bold mb-1",trend:"text-xs font-semibold flex items-center gap-1"}}function b(t={}){return{board:"flex gap-6 overflow-x-auto pb-4 h-full min-h-[500px]",column:"flex-shrink-0 w-80 bg-neutral-50 rounded-xl flex flex-col max-h-full border border-neutral-100",columnHeader:"p-4 flex items-center justify-between sticky top-0 bg-neutral-50 rounded-t-xl",columnTitle:"font-bold text-sm flex items-center gap-2",columnBadge:"px-2 py-0.5 rounded-full bg-neutral-200 text-[10px] font-bold",itemList:"p-3 space-y-3 overflow-y-auto flex-1",item:"bg-white p-4 rounded-lg shadow-sm border border-neutral-200 hover:border-primary transition-colors cursor-grab active:cursor-grabbing",itemTitle:"font-medium text-sm mb-2",itemDesc:"text-xs opacity-60 line-clamp-2",itemFooter:"mt-4 pt-3 border-t border-neutral-50 flex items-center justify-between",avatarGroup:"flex -space-x-2"}}function m(){return{container:"w-full",header:"mb-6 flex items-center justify-between",title:"text-lg font-bold",grid:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-6 gap-x-12",item:"flex flex-col gap-1",label:"text-sm opacity-50 font-medium",content:"text-sm font-semibold"}}function f(){return{layout:"flex h-screen overflow-hidden bg-neutral-50",sidebar:"fixed inset-y-0 left-0 z-50 w-64 bg-neutral-900 text-white transition-transform duration-300 lg:static lg:translate-x-0",sidebarCollapsed:"-translate-x-full",sidebarHeader:"flex items-center h-16 px-6 border-b border-white/10",sidebarContent:"flex-1 overflow-y-auto py-6",sidebarFooter:"p-4 border-t border-white/10",navItem:"flex items-center gap-3 px-6 py-3 text-sm font-medium transition-colors hover:bg-white/5 opacity-70 hover:opacity-100",navItemActive:"bg-primary text-white opacity-100",main:"flex-1 flex flex-col min-w-0 overflow-hidden",header:"flex items-center justify-between h-16 px-8 bg-white border-b border-neutral-200 shadow-sm",content:"flex-1 overflow-y-auto p-8"}}function x(t="centered"){const r={container:"min-h-screen flex items-center justify-center bg-neutral-50",card:"w-full max-w-md p-8 bg-white rounded-2xl shadow-xl border border-neutral-100",title:"text-3xl font-bold text-center mb-2",subtitle:"text-center opacity-50 text-sm mb-8",form:"space-y-6",footer:"mt-8 text-center text-sm opacity-50"};return t==="split"?{...r,container:"min-h-screen flex",left:"hidden lg:flex flex-1 bg-primary items-center justify-center p-12 text-white",right:"flex-1 flex items-center justify-center p-8 bg-white",card:"w-full max-w-md"}:r}function g(t="info"){return{container:"flex flex-col items-center justify-center p-12 text-center",icon:{base:"text-6xl mb-6",success:"text-success",error:"text-error",info:"text-info",warning:"text-warning",404:"text-neutral-400",500:"text-error"},title:"text-2xl font-bold mb-2",subtitle:"text-sm opacity-50 mb-8 max-w-md",extra:"flex gap-4",content:"mt-8 p-6 bg-neutral-50 rounded-lg w-full max-w-2xl text-left"}}function p(){return{container:"pb-6 mb-6 border-b border-neutral-100 bg-white",breadcrumb:"text-xs opacity-40 mb-3 flex items-center gap-2",heading:"flex items-center justify-between",left:"flex items-center gap-4",title:"text-xl font-bold",subtitle:"text-sm opacity-50 ml-3 border-l border-neutral-200 pl-3",extra:"flex items-center gap-3",footer:"mt-4"}}function h(){return{container:"p-6 bg-white rounded-xl border border-neutral-100 shadow-sm mb-6",grid:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6",actions:"mt-6 pt-6 border-t border-neutral-50 flex items-center justify-end gap-3"}}function w(){return{container:"max-w-3xl mx-auto py-8",steps:"flex items-center justify-between mb-12 relative",stepLine:"absolute top-4 left-0 right-0 h-0.5 bg-neutral-100 -z-10",stepItem:"flex flex-col items-center gap-2 bg-white px-4",stepCircle:"w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-colors",stepActive:"border-primary bg-primary text-white",stepPending:"border-neutral-200 bg-white text-neutral-400",stepCompleted:"border-success bg-success text-white",stepTitle:"text-xs font-medium",content:"bg-white p-8 rounded-xl border border-neutral-100 shadow-sm",footer:"mt-8 flex items-center justify-center gap-4"}}exports.getDescriptionClasses=m;exports.getKanbanClasses=b;exports.getLoginClasses=x;exports.getPageHeaderClasses=p;exports.getQueryFilterClasses=h;exports.getResultClasses=g;exports.getShellClasses=f;exports.getStatCardClasses=u;exports.getStepFormClasses=w;exports.useDashboard=a;exports.useKanban=i;exports.useShell=c;exports.useSteps=d;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './headless';
+export * from './components/AdminStyles';

package/dist/index.js

@@ -0,0 +1,195 @@
+function a(t) {
+  return {
+    columns: t,
+    moveItem: (n, o, s, l) => {
+      console.log(`Moving item ${n} from ${o} to ${s} at index ${l}`);
+    }
+  };
+}
+function c(t) {
+  const r = t.stats || [], e = t.charts || [];
+  return {
+    stats: r,
+    charts: e
+  };
+}
+function d(t = !1) {
+  let r = t;
+  const e = /* @__PURE__ */ new Set();
+  return {
+    get isCollapsed() {
+      return r;
+    },
+    toggle: () => {
+      r = !r, e.forEach((n) => n(r));
+    },
+    subscribe: (n) => (e.add(n), () => e.delete(n))
+  };
+}
+function u(t, r = 0) {
+  let e = r;
+  const n = /* @__PURE__ */ new Set();
+  return {
+    get current() {
+      return e;
+    },
+    next: () => {
+      e < t - 1 && (e++, n.forEach((o) => o(e)));
+    },
+    prev: () => {
+      e > 0 && (e--, n.forEach((o) => o(e)));
+    },
+    goTo: (o) => {
+      o >= 0 && o < t && (e = o, n.forEach((s) => s(e)));
+    },
+    subscribe: (o) => (n.add(o), () => n.delete(o))
+  };
+}
+function x(t = {}) {
+  const { variant: r = "bordered", color: e = "primary" } = t, n = {
+    base: "p-6 rounded-xl transition-all duration-300",
+    bordered: "border border-neutral-200 bg-white shadow-sm hover:shadow-md",
+    simple: "bg-transparent",
+    solid: "text-white shadow-lg"
+  }, o = {
+    primary: "bg-primary",
+    success: "bg-success",
+    warning: "bg-warning",
+    error: "bg-error",
+    info: "bg-info"
+  };
+  return {
+    container: [
+      n.base,
+      r === "solid" ? o[e] : n[r]
+    ].join(" "),
+    title: "text-sm font-medium opacity-60 mb-2 uppercase tracking-wider",
+    value: "text-3xl font-bold mb-1",
+    trend: "text-xs font-semibold flex items-center gap-1"
+  };
+}
+function b(t = {}) {
+  return {
+    board: "flex gap-6 overflow-x-auto pb-4 h-full min-h-[500px]",
+    column: "flex-shrink-0 w-80 bg-neutral-50 rounded-xl flex flex-col max-h-full border border-neutral-100",
+    columnHeader: "p-4 flex items-center justify-between sticky top-0 bg-neutral-50 rounded-t-xl",
+    columnTitle: "font-bold text-sm flex items-center gap-2",
+    columnBadge: "px-2 py-0.5 rounded-full bg-neutral-200 text-[10px] font-bold",
+    itemList: "p-3 space-y-3 overflow-y-auto flex-1",
+    item: "bg-white p-4 rounded-lg shadow-sm border border-neutral-200 hover:border-primary transition-colors cursor-grab active:cursor-grabbing",
+    itemTitle: "font-medium text-sm mb-2",
+    itemDesc: "text-xs opacity-60 line-clamp-2",
+    itemFooter: "mt-4 pt-3 border-t border-neutral-50 flex items-center justify-between",
+    avatarGroup: "flex -space-x-2"
+  };
+}
+function f() {
+  return {
+    container: "w-full",
+    header: "mb-6 flex items-center justify-between",
+    title: "text-lg font-bold",
+    grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-6 gap-x-12",
+    item: "flex flex-col gap-1",
+    label: "text-sm opacity-50 font-medium",
+    content: "text-sm font-semibold"
+  };
+}
+function m() {
+  return {
+    layout: "flex h-screen overflow-hidden bg-neutral-50",
+    sidebar: "fixed inset-y-0 left-0 z-50 w-64 bg-neutral-900 text-white transition-transform duration-300 lg:static lg:translate-x-0",
+    sidebarCollapsed: "-translate-x-full",
+    sidebarHeader: "flex items-center h-16 px-6 border-b border-white/10",
+    sidebarContent: "flex-1 overflow-y-auto py-6",
+    sidebarFooter: "p-4 border-t border-white/10",
+    navItem: "flex items-center gap-3 px-6 py-3 text-sm font-medium transition-colors hover:bg-white/5 opacity-70 hover:opacity-100",
+    navItemActive: "bg-primary text-white opacity-100",
+    main: "flex-1 flex flex-col min-w-0 overflow-hidden",
+    header: "flex items-center justify-between h-16 px-8 bg-white border-b border-neutral-200 shadow-sm",
+    content: "flex-1 overflow-y-auto p-8"
+  };
+}
+function g(t = "centered") {
+  const r = {
+    container: "min-h-screen flex items-center justify-center bg-neutral-50",
+    card: "w-full max-w-md p-8 bg-white rounded-2xl shadow-xl border border-neutral-100",
+    title: "text-3xl font-bold text-center mb-2",
+    subtitle: "text-center opacity-50 text-sm mb-8",
+    form: "space-y-6",
+    footer: "mt-8 text-center text-sm opacity-50"
+  };
+  return t === "split" ? {
+    ...r,
+    container: "min-h-screen flex",
+    left: "hidden lg:flex flex-1 bg-primary items-center justify-center p-12 text-white",
+    right: "flex-1 flex items-center justify-center p-8 bg-white",
+    card: "w-full max-w-md"
+  } : r;
+}
+function p(t = "info") {
+  return {
+    container: "flex flex-col items-center justify-center p-12 text-center",
+    icon: {
+      base: "text-6xl mb-6",
+      success: "text-success",
+      error: "text-error",
+      info: "text-info",
+      warning: "text-warning",
+      404: "text-neutral-400",
+      500: "text-error"
+    },
+    title: "text-2xl font-bold mb-2",
+    subtitle: "text-sm opacity-50 mb-8 max-w-md",
+    extra: "flex gap-4",
+    content: "mt-8 p-6 bg-neutral-50 rounded-lg w-full max-w-2xl text-left"
+  };
+}
+function h() {
+  return {
+    container: "pb-6 mb-6 border-b border-neutral-100 bg-white",
+    breadcrumb: "text-xs opacity-40 mb-3 flex items-center gap-2",
+    heading: "flex items-center justify-between",
+    left: "flex items-center gap-4",
+    title: "text-xl font-bold",
+    subtitle: "text-sm opacity-50 ml-3 border-l border-neutral-200 pl-3",
+    extra: "flex items-center gap-3",
+    footer: "mt-4"
+  };
+}
+function w() {
+  return {
+    container: "p-6 bg-white rounded-xl border border-neutral-100 shadow-sm mb-6",
+    grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6",
+    actions: "mt-6 pt-6 border-t border-neutral-50 flex items-center justify-end gap-3"
+  };
+}
+function y() {
+  return {
+    container: "max-w-3xl mx-auto py-8",
+    steps: "flex items-center justify-between mb-12 relative",
+    stepLine: "absolute top-4 left-0 right-0 h-0.5 bg-neutral-100 -z-10",
+    stepItem: "flex flex-col items-center gap-2 bg-white px-4",
+    stepCircle: "w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-colors",
+    stepActive: "border-primary bg-primary text-white",
+    stepPending: "border-neutral-200 bg-white text-neutral-400",
+    stepCompleted: "border-success bg-success text-white",
+    stepTitle: "text-xs font-medium",
+    content: "bg-white p-8 rounded-xl border border-neutral-100 shadow-sm",
+    footer: "mt-8 flex items-center justify-center gap-4"
+  };
+}
+export {
+  f as getDescriptionClasses,
+  b as getKanbanClasses,
+  g as getLoginClasses,
+  h as getPageHeaderClasses,
+  w as getQueryFilterClasses,
+  p as getResultClasses,
+  m as getShellClasses,
+  x as getStatCardClasses,
+  y as getStepFormClasses,
+  c as useDashboard,
+  a as useKanban,
+  d as useShell,
+  u as useSteps
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@sxo/component-admin",
+  "version": "0.0.0",
+  "description": "Admin dashboard components and layouts for SXO.",
+  "keywords": [
+    "sxo",
+    "design-system",
+    "ui",
+    "components"
+  ],
+  "license": "MIT",
+  "author": "sxo team",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@sxo/design": "0.0.0",
+    "@sxo/ui": "0.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/doki-land/sxo-engine.git",
+    "directory": "packages/component-admin"
+  },
+  "bugs": {
+    "url": "https://github.com/doki-land/sxo-engine/issues"
+  },
+  "homepage": "https://github.com/doki-land/sxo-engine/tree/main/packages/component-admin#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "typescript": "^5.0.0"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  }
+}