@james_sww/metaform-asset-distribution 0.1.2 → 0.1.4

package/codebase/template/src/components/business/analytics/metric-card.tsx

@@ -0,0 +1,146 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+
+export type MetricTone = 'default' | 'success' | 'warning' | 'danger';
+export type TrendDirection = 'up' | 'down' | 'flat';
+
+export interface MetricCardProps {
+  /**
+   * 主指标值，如 "97%" 或 "1,234"
+   */
+  value: ReactNode;
+  
+  /**
+   * 指标标签，如 "检验任务准时完成率"
+   */
+  label: ReactNode;
+  
+  /**
+   * 单位，如 "%" 或 "个"
+   */
+  unit?: string;
+  
+  /**
+   * 趋势方向
+   */
+  trend?: TrendDirection;
+  
+  /**
+   * 趋势变化描述，如 "提升 6 个百分点"
+   */
+  trendValue?: ReactNode;
+  
+  /**
+   * 色调
+   */
+  tone?: MetricTone;
+  
+  /**
+   * 自定义图标（替代趋势图标）
+   */
+  icon?: React.ComponentType<{ className?: string }>;
+  
+  /**
+   * 额外描述信息
+   */
+  description?: ReactNode;
+  
+  className?: string;
+}
+
+const toneClass: Record<MetricTone, string> = {
+  default: 'text-foreground',
+  success: 'text-success',
+  warning: 'text-warning-foreground',
+  danger: 'text-danger',
+};
+
+const trendToneClass: Record<TrendDirection, string> = {
+  up: 'text-success',
+  down: 'text-danger',
+  flat: 'text-muted-foreground',
+};
+
+const TrendIcon: Record<TrendDirection, React.ComponentType<{ className?: string }>> = {
+  up: TrendingUp,
+  down: TrendingDown,
+  flat: Minus,
+};
+
+/**
+ * 大数值指标卡片
+ * 
+ * 用于展示关键业务指标，支持趋势显示和色调区分
+ * 
+ * @example
+ * ```tsx
+ * <MetricCard 
+ *   value="97"
+ *   unit="%"
+ *   label="检验任务准时完成率"
+ *   trend="up"
+ *   trendValue="提升 6 个百分点"
+ *   tone="success"
+ * />
+ * ```
+ */
+export function MetricCard({
+  value,
+  label,
+  unit,
+  trend,
+  trendValue,
+  tone = 'default',
+  icon: Icon,
+  description,
+  className,
+}: MetricCardProps) {
+  const TrendIconComponent = trend ? TrendIcon[trend] : null;
+
+  return (
+    <div
+      className={cn(
+        'min-w-0 rounded-lg border border-border bg-card p-6',
+        'hover:shadow-sm transition-shadow',
+        className,
+      )}
+      data-asset="analytics.metric-card"
+    >
+      {/* 标签 */}
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        {Icon && <Icon className="h-4 w-4" />}
+        <span>{label}</span>
+      </div>
+
+      {/* 主指标值 */}
+      <div className="mt-3 flex items-baseline gap-1">
+        <span className={cn('text-4xl font-bold tabular-nums', toneClass[tone])}>
+          {value}
+        </span>
+        {unit && (
+          <span className="text-xl font-medium text-muted-foreground">{unit}</span>
+        )}
+      </div>
+
+      {/* 趋势信息 */}
+      {(trend || trendValue) && (
+        <div
+          className={cn(
+            'mt-2 flex items-center gap-1 text-xs font-medium',
+            trend ? trendToneClass[trend] : 'text-muted-foreground',
+          )}
+        >
+          {TrendIconComponent && <TrendIconComponent className="h-3 w-3" />}
+          <span>{trendValue}</span>
+        </div>
+      )}
+
+      {/* 额外描述 */}
+      {description && (
+        <div className="mt-2 text-xs text-muted-foreground">{description}</div>
+      )}
+    </div>
+  );
+}

package/codebase/template/src/components/business/quality/index.ts

@@ -0,0 +1 @@
+export { TaskCard, type TaskCardProps, type TaskStatus, type TaskPriority, type TaskAction } from './task-card';

package/codebase/template/src/components/business/quality/task-card.tsx

@@ -0,0 +1,185 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+export type TaskStatus = 'pending' | 'processing' | 'completed' | 'rejected';
+export type TaskPriority = 'high' | 'normal' | 'low';
+
+export interface TaskAction {
+  id: string;
+  label: ReactNode;
+  variant?: 'default' | 'primary' | 'destructive' | 'outline' | 'ghost';
+}
+
+export interface TaskCardProps {
+  /**
+   * 任务标题
+   */
+  title: ReactNode;
+  
+  /**
+   * 任务描述
+   */
+  description?: ReactNode;
+  
+  /**
+   * 任务状态
+   */
+  status: TaskStatus;
+  
+  /**
+   * 优先级
+   */
+  priority?: TaskPriority;
+  
+  /**
+   * 元信息，如 "QC-2025-001 · 检验日期 240mm"
+   */
+  meta?: ReactNode;
+  
+  /**
+   * 操作按钮列表
+   */
+  actions?: readonly TaskAction[];
+  
+  /**
+   * 点击操作按钮
+   */
+  onActionClick?: (actionId: string) => void;
+  
+  /**
+   * 点击卡片
+   */
+  onClick?: () => void;
+  
+  className?: string;
+}
+
+const statusConfig: Record<TaskStatus, { label: string; className: string }> = {
+  pending: {
+    label: '待办',
+    className: 'bg-blue-500/10 text-blue-700 dark:text-blue-400',
+  },
+  processing: {
+    label: '处理中',
+    className: 'bg-amber-500/10 text-amber-700 dark:text-amber-400',
+  },
+  completed: {
+    label: '已完成',
+    className: 'bg-success/10 text-success',
+  },
+  rejected: {
+    label: '已驳回',
+    className: 'bg-danger/10 text-danger',
+  },
+};
+
+const priorityDot: Record<TaskPriority, string> = {
+  high: 'bg-danger',
+  normal: 'bg-blue-500',
+  low: 'bg-muted-foreground',
+};
+
+/**
+ * 任务卡片
+ * 
+ * 用于展示任务信息和操作按钮，支持状态标签、优先级、元信息
+ * 
+ * @example
+ * ```tsx
+ * <TaskCard 
+ *   title="批次出厂检"
+ *   status="pending"
+ *   priority="high"
+ *   meta="QC-2025-001 · 检验日期 240mm"
+ *   actions={[
+ *     { id: 'notify', label: '发通知' },
+ *     { id: 'continue', label: '继续处理' }
+ *   ]}
+ *   onActionClick={(id) => console.log(id)}
+ * />
+ * ```
+ */
+export function TaskCard({
+  title,
+  description,
+  status,
+  priority,
+  meta,
+  actions = [],
+  onActionClick,
+  onClick,
+  className,
+}: TaskCardProps) {
+  const statusInfo = statusConfig[status];
+
+  return (
+    <div
+      className={cn(
+        'group rounded-lg border border-border bg-card p-4',
+        'transition-colors hover:bg-accent',
+        onClick && 'cursor-pointer',
+        className,
+      )}
+      onClick={onClick}
+      data-asset="quality.task-card"
+    >
+      <div className="flex items-start justify-between gap-4">
+        {/* 左侧：内容 */}
+        <div className="min-w-0 flex-1 space-y-2">
+          {/* 状态和优先级 */}
+          <div className="flex items-center gap-2">
+            <span
+              className={cn(
+                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+                statusInfo.className,
+              )}
+            >
+              {statusInfo.label}
+            </span>
+            
+            {priority && (
+              <span className={cn('h-1.5 w-1.5 rounded-full', priorityDot[priority])} />
+            )}
+          </div>
+
+          {/* 标题 */}
+          <h3 className="font-medium text-foreground">{title}</h3>
+
+          {/* 描述 */}
+          {description && <p className="text-sm text-muted-foreground">{description}</p>}
+
+          {/* 元信息 */}
+          {meta && <p className="text-xs text-muted-foreground">{meta}</p>}
+        </div>
+
+        {/* 右侧：操作按钮 */}
+        {actions.length > 0 && (
+          <div className="flex shrink-0 items-start gap-2">
+            {actions.map((action) => (
+              <button
+                key={action.id}
+                type="button"
+                className={cn(
+                  'rounded-md px-3 py-1.5 text-sm font-medium',
+                  'transition-colors',
+                  action.variant === 'primary' &&
+                    'bg-primary text-primary-foreground hover:bg-primary/90',
+                  (!action.variant || action.variant === 'default') &&
+                    'border border-border bg-background hover:bg-accent',
+                  action.variant === 'ghost' && 'hover:bg-accent',
+                )}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onActionClick?.(action.id);
+                }}
+              >
+                {action.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/codebase/template/src/components/common/semantic-region/semantic-region-scaffold.tsx

@@ -17,6 +17,7 @@ export interface SemanticRegionScaffoldProps {
   commands?: { onAction(action: SemanticAction): void };
   slots?: { authoringActions?: ReactNode };
   className?: string;
+  compact?: boolean;
 }
 function DetailList({ title, items }: { title: string; items: readonly string[] }) {
   return (
@@ -39,6 +40,7 @@ export function SemanticRegionScaffold({
   commands,
   slots,
   className,
+  compact = false,
 }: SemanticRegionScaffoldProps) {
   const titleId = useId();
   return (
@@ -98,7 +100,7 @@ export function SemanticRegionScaffold({
           })}
         </div>
       ) : null}
-      <Collapsible className="mt-5 border-t border-border pt-3">
+      {compact ? null : <Collapsible className="mt-5 border-t border-border pt-3">
         <CollapsibleTrigger asChild>
           <Button type="button" variant="ghost-neutral">
             查看区域设计详情
@@ -146,7 +148,7 @@ export function SemanticRegionScaffold({
             />
           </div>
         </CollapsibleContent>
-      </Collapsible>
+      </Collapsible>}
     </section>
   );
 }

package/codebase/template/src/examples/component-examples.tsx

@@ -0,0 +1,105 @@
+import { MetricCard, ContributionList } from '@/components/business/analytics';
+import { TaskCard } from '@/components/business/quality';
+import type { ContributionItem } from '@/components/business/analytics';
+import { ClipboardCheck } from 'lucide-react';
+
+/**
+ * 业务组件示例页面
+ * 
+ * 展示模板中预置的业务组件用法
+ */
+export function ComponentExamplesPage() {
+  const contributions: ContributionItem[] = [
+    {
+      id: '1',
+      category: '生产计划',
+      title: '检验任务审批完成率',
+      impact: '提升 6 个百分点',
+      taskDescription: '通过优化审批流程，提升了审批效率',
+    },
+    {
+      id: '2',
+      category: '质量管理',
+      title: '缺陷发现率',
+      impact: '提升 12%',
+      taskDescription: '加强质检标准，提早发现潜在问题',
+    },
+  ];
+
+  return (
+    <div className="container mx-auto space-y-8 p-6">
+      <div>
+        <h1 className="text-3xl font-bold">业务组件示例</h1>
+        <p className="mt-2 text-muted-foreground">
+          这些组件已预置在模板中，可以直接使用
+        </p>
+      </div>
+
+      {/* 指标卡片 */}
+      <section className="space-y-4">
+        <h2 className="text-xl font-semibold">指标卡片 (MetricCard)</h2>
+        <div className="grid gap-4 md:grid-cols-3">
+          <MetricCard
+            value="97"
+            unit="%"
+            label="检验任务准时完成率"
+            trend="up"
+            trendValue="提升 6 个百分点"
+            tone="success"
+          />
+          <MetricCard
+            value="1,234"
+            label="待处理任务"
+            icon={ClipboardCheck}
+            description="较上周增加 45 个"
+          />
+          <MetricCard
+            value="89"
+            unit="%"
+            label="质检合格率"
+            trend="down"
+            trendValue="下降 3 个百分点"
+            tone="danger"
+          />
+        </div>
+      </section>
+
+      {/* 任务卡片 */}
+      <section className="space-y-4">
+        <h2 className="text-xl font-semibold">任务卡片 (TaskCard)</h2>
+        <div className="space-y-3">
+          <TaskCard
+            title="批次出厂检"
+            description="需要完成出厂检验流程"
+            status="pending"
+            priority="high"
+            meta="QC-2025-001 · 检验日期 240mm"
+            actions={[
+              { id: 'notify', label: '发通知', variant: 'default' },
+              { id: 'continue', label: '继续处理', variant: 'primary' },
+            ]}
+            onActionClick={(id) => console.log('Action:', id)}
+          />
+          <TaskCard
+            title="质量报告审批"
+            status="processing"
+            priority="normal"
+            meta="QC-2025-002 · 审批中"
+          />
+          <TaskCard
+            title="设备维护检查"
+            status="completed"
+            priority="low"
+            meta="已完成 · 2024-10-18"
+          />
+        </div>
+      </section>
+
+      {/* 价值贡献列表 */}
+      <section className="space-y-4">
+        <h2 className="text-xl font-semibold">价值贡献列表 (ContributionList)</h2>
+        <ContributionList title="我的价值贡献" items={contributions} />
+      </section>
+    </div>
+  );
+}

package/codebase/template/src/examples/navigation-example-data.ts

@@ -0,0 +1,32 @@
+import type { WorkspaceNavigationItem } from '../layouts/workspace-navigation-model';
+
+// 仅用于交互示例，不作为应用的默认业务映射。
+export const navigationExampleItems: readonly WorkspaceNavigationItem[] = [
+  {
+    id: 'example-tasks', label: '我的任务', count: 8, availability: 'implemented',
+    href: '/examples/navigation.html?page=example-tasks',
+    children: [
+      {
+        id: 'example-prepare', label: '检验准备', availability: 'implemented',
+        children: [
+          { id: 'example-arrange', label: '确认待检安排', availability: 'implemented' },
+          { id: 'example-basis', label: '核对检验依据', availability: 'implemented' },
+          { id: 'example-conditions', label: '确认开检条件（待开放）', availability: 'planned' },
+        ],
+      },
+      {
+        id: 'example-inspection', label: '当班检验', availability: 'implemented',
+        children: [
+          { id: 'example-station', label: '工位检查', availability: 'implemented' },
+          { id: 'example-result', label: '记录检验结果', availability: 'implemented' },
+        ],
+      },
+      { id: 'example-recheck', label: '异常与复检', count: 2, availability: 'implemented' },
+      { id: 'example-analysis', label: '记录与分析', availability: 'implemented' },
+    ],
+  },
+  {
+    id: 'example-planned-group', label: '待开放分组', availability: 'planned',
+    children: [{ id: 'example-blocked-child', label: '不可进入的子项', availability: 'implemented' }],
+  },
+];

package/codebase/template/src/examples/navigation-example.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { ErrorBoundary } from '../components/common/error-boundary';
+import { RoleWorkspaceShell } from '../layouts/role-workspace-shell';
+import { DEFAULT_WORKSPACE_ROUTES } from '../layouts/role-workspace-routes';
+import { findNavigationPath } from '../layouts/workspace-navigation-model';
+import { navigationExampleItems } from './navigation-example-data';
+import '../styles/index.css';
+
+export function NavigationExample() {
+  const [activeId, setActiveId] = useState(() =>
+    new URLSearchParams(window.location.search).get('page') === 'example-tasks' ? 'example-tasks' : 'example-arrange',
+  );
+  const path = findNavigationPath(navigationExampleItems, activeId);
+  const title = path.at(-1)?.label ?? DEFAULT_WORKSPACE_ROUTES.find(item => item.id === activeId)?.label;
+  return (
+    <RoleWorkspaceShell
+      model={{
+        productName: '应用工作空间', workspaceTitle: '多级菜单示例',
+        themes: navigationExampleItems, activeThemeId: activeId,
+      }}
+      commands={{ onSelectTheme: setActiveId }}
+      slots={{
+        content: (
+          <div className="mx-auto max-w-4xl space-y-5">
+            <p className="text-sm text-muted-foreground">多级菜单交互示例 · 数据均为示例，未接入真实业务</p>
+            <h1 className="text-2xl font-semibold">{title}</h1>
+            <section className="rounded-lg border border-border bg-card p-5">
+              <h2 className="font-medium">可以测试的交互</h2>
+              <ul className="mt-3 list-disc space-y-2 pl-5 text-sm text-muted-foreground">
+                <li>同一级只展开一个分组；打开“当班检验”会收起“检验准备”。</li>
+                <li>点击三级末级切换标题，上级自动展开并保留当前项高亮。</li>
+                <li>面包屑中蓝色高亮的上级可以返回；标记“分组”的节点不跳转，当前页不可点击。</li>
+                <li>数量角标、待开放末级和待开放分组。</li>
+                <li>侧栏收起后的多级浮出菜单，以及手机主题菜单。</li>
+              </ul>
+            </section>
+            <a href="/" className="text-sm text-link underline underline-offset-4">返回默认工作空间</a>
+          </div>
+        ),
+      }}
+    />
+  );
+}
+
+createRoot(document.getElementById('root')!).render(
+  <ErrorBoundary><NavigationExample /></ErrorBoundary>,
+);

package/codebase/template/src/layouts/legacy-role-workspace/README.md

@@ -0,0 +1,3 @@
+# 角色工作区兼容实现
+
+保留资产库既有中性外壳的行为和样式，供旧入口与开发预览使用。默认应用继续使用上级目录的角色工作区外壳；本目录由 Code Base 维护，不作为组件资产分发。

package/codebase/template/{.metaform/asset-baselines/3d1a9a8a1f7ed83eaf3422d1497cac02b643fe1c470b5c5f357f3bd26c585a0f → src/layouts/legacy-role-workspace/role-workspace-account.tsx}

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 
-import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
-import { Button } from "../components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar";
+import { Button } from "../../components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,8 +9,8 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "../components/ui/dropdown-menu";
-import { Skeleton } from "../components/ui/skeleton";
+} from "../../components/ui/dropdown-menu";
+import { Skeleton } from "../../components/ui/skeleton";
 
 import type { RoleWorkspaceShellProps, WorkspaceCommands } from "./role-workspace-types";
 

package/codebase/template/{.metaform/asset-baselines/bcc48c05cd912dad5373242ff699cdbec032c8ebb2de45a9df5de79a6daec59c → src/layouts/legacy-role-workspace/role-workspace-shell.tsx}

@@ -1,9 +1,8 @@
-import "../styles/styles.css";
-import { type ReactNode, useId, useRef, useState } from "react";
+import { type ReactNode, useId, useRef, useState } from 'react';
 
-import { ChevronLeft, ChevronRight, Layers3 } from "lucide-react";
+import { ChevronLeft, ChevronRight, Layers3 } from 'lucide-react';
 
-import { Button } from "../components/ui/button";
+import { Button } from '../../components/ui/button';
 import {
   Sheet,
   SheetClose,
@@ -12,35 +11,35 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from "../components/ui/sheet";
+} from '../../components/ui/sheet';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "../components/ui/tooltip";
-import { cn } from "../lib/utils";
+} from '../../components/ui/tooltip';
+import { cn } from '../../lib/utils';
 
-import { WorkspaceAccount } from "./role-workspace-account";
+import { WorkspaceAccount } from './role-workspace-account';
 import {
   WorkspaceBrandMark,
   WorkspaceRouteIcon,
   WorkspaceUtilityIcon,
-} from "./role-workspace-icons";
-import { DEFAULT_WORKSPACE_ROUTES, isWorkspaceRouteId } from "./role-workspace-routes";
+} from './role-workspace-icons';
+import { DEFAULT_WORKSPACE_ROUTES, isWorkspaceRouteId } from './role-workspace-routes';
 import type {
   RoleWorkspaceShellProps,
   WorkspaceSlot,
   WorkspaceSlotContext,
   WorkspaceTheme,
-} from "./role-workspace-types";
+} from './role-workspace-types';
 
 export type {
   RoleWorkspaceShellProps,
   WorkspaceTheme,
   WorkspaceSession,
   WorkspaceSlotContext,
-} from "./role-workspace-types";
+} from './role-workspace-types';
 
 function renderSlot(slot: WorkspaceSlot | undefined, context: WorkspaceSlotContext) {
   return typeof slot === 'function' ? slot(context) : slot;