535 lines
18 KiB
JSON
535 lines
18 KiB
JSON
{
|
|
"$metadata": {
|
|
"generator": "BMAD Design System Generator v1.0",
|
|
"source": "ux-design-specification.md",
|
|
"project": "AquaFlow SaaS",
|
|
"generatedAt": "2025-12-25T12:44:30+08:00"
|
|
},
|
|
"components": {
|
|
"TaskCard": {
|
|
"name": "TaskCard",
|
|
"description": "看板上的可拖曳任務卡片",
|
|
"category": "business",
|
|
"status": "design-ready",
|
|
"props": {
|
|
"id": {
|
|
"type": "string",
|
|
"required": true
|
|
},
|
|
"title": {
|
|
"type": "string",
|
|
"required": true
|
|
},
|
|
"labels": {
|
|
"type": "Label[]",
|
|
"required": false,
|
|
"default": "[]"
|
|
},
|
|
"assignee": {
|
|
"type": "User | null",
|
|
"required": false
|
|
},
|
|
"dueDate": {
|
|
"type": "Date | null",
|
|
"required": false
|
|
},
|
|
"priority": {
|
|
"type": "'low' | 'medium' | 'high' | 'urgent'",
|
|
"required": false,
|
|
"default": "'medium'"
|
|
},
|
|
"isDragging": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false"
|
|
},
|
|
"isSelected": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false"
|
|
}
|
|
},
|
|
"states": {
|
|
"default": {
|
|
"background": "var(--bg-card)",
|
|
"borderRadius": "var(--radius-md)",
|
|
"boxShadow": "var(--shadow-sm)",
|
|
"padding": "var(--space-3)"
|
|
},
|
|
"hover": {
|
|
"background": "var(--color-neutral-50)",
|
|
"cursor": "pointer",
|
|
"transition": "background-color var(--duration-fast) var(--easing-default)"
|
|
},
|
|
"dragging": {
|
|
"boxShadow": "var(--shadow-lg)",
|
|
"transform": "rotate(3deg)",
|
|
"opacity": "0.9",
|
|
"cursor": "grabbing"
|
|
},
|
|
"selected": {
|
|
"outline": "2px solid var(--color-primary-500)",
|
|
"outlineOffset": "2px"
|
|
},
|
|
"loading": {
|
|
"opacity": "0.6",
|
|
"pointerEvents": "none"
|
|
}
|
|
},
|
|
"accessibility": {
|
|
"role": "listitem",
|
|
"ariaGrabbed": "boolean (when dragging)",
|
|
"focusRing": "var(--focus-ring-width) solid var(--focus-ring-color)",
|
|
"keyboardNav": "Tab to focus, Space/Enter to select, Arrow keys to move"
|
|
},
|
|
"kbReferences": [
|
|
"#28 Focus States",
|
|
"#29 Hover States",
|
|
"#30 Active States",
|
|
"#84 Truncation",
|
|
"#40 ARIA Labels"
|
|
]
|
|
},
|
|
"KanbanColumn": {
|
|
"name": "KanbanColumn",
|
|
"description": "任務狀態欄（待辦/進行中/完成）",
|
|
"category": "business",
|
|
"status": "design-ready",
|
|
"props": {
|
|
"id": {
|
|
"type": "string",
|
|
"required": true
|
|
},
|
|
"title": {
|
|
"type": "string",
|
|
"required": true
|
|
},
|
|
"tasks": {
|
|
"type": "Task[]",
|
|
"required": true
|
|
},
|
|
"taskCount": {
|
|
"type": "number",
|
|
"required": false
|
|
},
|
|
"isDropTarget": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false"
|
|
},
|
|
"isEmpty": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false"
|
|
}
|
|
},
|
|
"states": {
|
|
"default": {
|
|
"background": "var(--color-neutral-100)",
|
|
"borderRadius": "var(--radius-lg)",
|
|
"padding": "var(--space-3)",
|
|
"minHeight": "200px"
|
|
},
|
|
"dropTargetActive": {
|
|
"background": "var(--color-primary-50)",
|
|
"outline": "2px dashed var(--color-primary-500)",
|
|
"outlineOffset": "-2px"
|
|
},
|
|
"empty": {
|
|
"display": "flex",
|
|
"alignItems": "center",
|
|
"justifyContent": "center",
|
|
"color": "var(--text-muted)",
|
|
"fontSize": "var(--font-size-sm)"
|
|
}
|
|
},
|
|
"emptyState": {
|
|
"message": "尚無任務，拖曳或點擊新增",
|
|
"icon": "plus-circle"
|
|
},
|
|
"accessibility": {
|
|
"role": "list",
|
|
"ariaLabel": "dynamic: {title} 欄位，共 {taskCount} 項任務"
|
|
},
|
|
"kbReferences": [
|
|
"#80 Empty States",
|
|
"#10 Loading States"
|
|
]
|
|
},
|
|
"CommandPalette": {
|
|
"name": "CommandPalette",
|
|
"description": "Cmd+K 全域搜尋/快捷指令面板",
|
|
"category": "navigation",
|
|
"status": "design-ready",
|
|
"props": {
|
|
"isOpen": {
|
|
"type": "boolean",
|
|
"required": true
|
|
},
|
|
"searchQuery": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "''"
|
|
},
|
|
"results": {
|
|
"type": "SearchResult[]",
|
|
"required": false,
|
|
"default": "[]"
|
|
},
|
|
"recentItems": {
|
|
"type": "SearchResult[]",
|
|
"required": false,
|
|
"default": "[]"
|
|
},
|
|
"onClose": {
|
|
"type": "() => void",
|
|
"required": true
|
|
},
|
|
"onSelect": {
|
|
"type": "(item: SearchResult) => void",
|
|
"required": true
|
|
}
|
|
},
|
|
"states": {
|
|
"open": {
|
|
"position": "fixed",
|
|
"top": "20%",
|
|
"left": "50%",
|
|
"transform": "translateX(-50%)",
|
|
"width": "min(600px, 90vw)",
|
|
"maxHeight": "400px",
|
|
"background": "var(--bg-card)",
|
|
"borderRadius": "var(--radius-lg)",
|
|
"boxShadow": "var(--shadow-xl)",
|
|
"zIndex": "9999"
|
|
},
|
|
"searching": {
|
|
"showSpinner": true
|
|
},
|
|
"results": {
|
|
"overflow": "auto"
|
|
},
|
|
"empty": {
|
|
"message": "找不到符合的結果",
|
|
"showRecentItems": true
|
|
}
|
|
},
|
|
"keyboard": {
|
|
"trigger": "Cmd+K / Ctrl+K",
|
|
"navigate": "Arrow Up/Down",
|
|
"select": "Enter",
|
|
"close": "Escape"
|
|
},
|
|
"accessibility": {
|
|
"role": "dialog",
|
|
"ariaModal": true,
|
|
"ariaLabel": "快速搜尋",
|
|
"focusTrap": true
|
|
},
|
|
"kbReferences": [
|
|
"#41 Keyboard Navigation",
|
|
"#28 Focus States",
|
|
"#89 Search Autocomplete"
|
|
]
|
|
},
|
|
"ProgressRing": {
|
|
"name": "ProgressRing",
|
|
"description": "視覺化任務完成進度環",
|
|
"category": "feedback",
|
|
"status": "design-ready",
|
|
"props": {
|
|
"value": {
|
|
"type": "number",
|
|
"required": true,
|
|
"description": "0-100 百分比"
|
|
},
|
|
"size": {
|
|
"type": "'sm' | 'md' | 'lg'",
|
|
"required": false,
|
|
"default": "'md'"
|
|
},
|
|
"showLabel": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "true"
|
|
},
|
|
"color": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "var(--color-primary-500)"
|
|
}
|
|
},
|
|
"sizes": {
|
|
"sm": {
|
|
"diameter": "24px",
|
|
"strokeWidth": "3px",
|
|
"fontSize": "var(--font-size-xs)"
|
|
},
|
|
"md": {
|
|
"diameter": "32px",
|
|
"strokeWidth": "4px",
|
|
"fontSize": "var(--font-size-sm)"
|
|
},
|
|
"lg": {
|
|
"diameter": "48px",
|
|
"strokeWidth": "5px",
|
|
"fontSize": "var(--font-size-base)"
|
|
}
|
|
},
|
|
"animation": {
|
|
"duration": "var(--duration-normal)",
|
|
"easing": "var(--easing-out)",
|
|
"respectsReducedMotion": true
|
|
},
|
|
"accessibility": {
|
|
"role": "progressbar",
|
|
"ariaValueNow": "dynamic: {value}",
|
|
"ariaValueMin": "0",
|
|
"ariaValueMax": "100",
|
|
"ariaLabel": "任務完成進度"
|
|
},
|
|
"kbReferences": [
|
|
"#8 Duration Timing",
|
|
"#9 Reduced Motion"
|
|
]
|
|
},
|
|
"Button": {
|
|
"name": "Button",
|
|
"description": "通用按鈕組件",
|
|
"category": "primitive",
|
|
"status": "design-ready",
|
|
"props": {
|
|
"variant": {
|
|
"type": "'primary' | 'secondary' | 'ghost' | 'danger'",
|
|
"required": false,
|
|
"default": "'primary'"
|
|
},
|
|
"size": {
|
|
"type": "'sm' | 'md' | 'lg'",
|
|
"required": false,
|
|
"default": "'md'"
|
|
},
|
|
"isLoading": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false"
|
|
},
|
|
"isDisabled": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": "false"
|
|
},
|
|
"leftIcon": {
|
|
"type": "ReactNode",
|
|
"required": false
|
|
},
|
|
"rightIcon": {
|
|
"type": "ReactNode",
|
|
"required": false
|
|
},
|
|
"children": {
|
|
"type": "ReactNode",
|
|
"required": true
|
|
}
|
|
},
|
|
"variants": {
|
|
"primary": {
|
|
"background": "var(--color-primary-500)",
|
|
"color": "white",
|
|
"hoverBackground": "var(--color-primary-700)"
|
|
},
|
|
"secondary": {
|
|
"background": "transparent",
|
|
"color": "var(--color-primary-500)",
|
|
"border": "1px solid var(--color-primary-500)",
|
|
"hoverBackground": "var(--color-primary-50)"
|
|
},
|
|
"ghost": {
|
|
"background": "transparent",
|
|
"color": "var(--text-secondary)",
|
|
"hoverBackground": "var(--color-neutral-100)"
|
|
},
|
|
"danger": {
|
|
"background": "var(--color-error-500)",
|
|
"color": "white",
|
|
"hoverBackground": "var(--color-error-700)"
|
|
}
|
|
},
|
|
"sizes": {
|
|
"sm": {
|
|
"padding": "var(--space-1) var(--space-2)",
|
|
"fontSize": "var(--font-size-sm)",
|
|
"minHeight": "32px"
|
|
},
|
|
"md": {
|
|
"padding": "var(--space-2) var(--space-4)",
|
|
"fontSize": "var(--font-size-base)",
|
|
"minHeight": "44px"
|
|
},
|
|
"lg": {
|
|
"padding": "var(--space-3) var(--space-6)",
|
|
"fontSize": "var(--font-size-lg)",
|
|
"minHeight": "52px"
|
|
}
|
|
},
|
|
"states": {
|
|
"hover": {
|
|
"filter": "brightness(1.1)"
|
|
},
|
|
"active": {
|
|
"transform": "scale(0.98)"
|
|
},
|
|
"disabled": {
|
|
"opacity": "0.5",
|
|
"cursor": "not-allowed"
|
|
},
|
|
"loading": {
|
|
"opacity": "0.8",
|
|
"cursor": "wait"
|
|
}
|
|
},
|
|
"accessibility": {
|
|
"minTouchTarget": "44x44px",
|
|
"focusRing": "var(--focus-ring-width) solid var(--focus-ring-color)"
|
|
}
|
|
},
|
|
"Toast": {
|
|
"name": "Toast",
|
|
"description": "通知訊息組件",
|
|
"category": "feedback",
|
|
"status": "design-ready",
|
|
"props": {
|
|
"type": {
|
|
"type": "'success' | 'error' | 'warning' | 'info'",
|
|
"required": true
|
|
},
|
|
"message": {
|
|
"type": "string",
|
|
"required": true
|
|
},
|
|
"duration": {
|
|
"type": "number",
|
|
"required": false,
|
|
"default": "3000",
|
|
"description": "ms, 0 for persistent"
|
|
},
|
|
"onDismiss": {
|
|
"type": "() => void",
|
|
"required": false
|
|
}
|
|
},
|
|
"types": {
|
|
"success": {
|
|
"icon": "check-circle",
|
|
"color": "var(--color-success-500)",
|
|
"duration": "3000"
|
|
},
|
|
"error": {
|
|
"icon": "x-circle",
|
|
"color": "var(--color-error-500)",
|
|
"duration": "0"
|
|
},
|
|
"warning": {
|
|
"icon": "alert-triangle",
|
|
"color": "var(--color-warning-500)",
|
|
"duration": "5000"
|
|
},
|
|
"info": {
|
|
"icon": "info",
|
|
"color": "var(--color-primary-500)",
|
|
"duration": "5000"
|
|
}
|
|
},
|
|
"animation": {
|
|
"enter": "slideIn from right",
|
|
"exit": "fadeOut",
|
|
"duration": "var(--duration-normal)"
|
|
},
|
|
"accessibility": {
|
|
"role": "alert",
|
|
"ariaLive": "polite"
|
|
}
|
|
}
|
|
},
|
|
"patterns": {
|
|
"interactiveElement": {
|
|
"description": "所有互動元素的通用狀態規範",
|
|
"states": {
|
|
"focus": "ring-2 ring-blue-500 ring-offset-2",
|
|
"hover": "bg-gray-50 transition-colors",
|
|
"active": "scale-[0.98]",
|
|
"disabled": "opacity-50 cursor-not-allowed"
|
|
},
|
|
"touchTarget": "min-h-[44px] min-w-[44px]",
|
|
"transition": "all var(--duration-normal) var(--easing-default)"
|
|
},
|
|
"formField": {
|
|
"description": "表單欄位通用規範",
|
|
"label": {
|
|
"position": "above",
|
|
"required": "標示 *",
|
|
"fontSize": "var(--font-size-sm)",
|
|
"fontWeight": "var(--font-weight-medium)"
|
|
},
|
|
"input": {
|
|
"minHeight": "44px",
|
|
"borderRadius": "var(--radius-md)",
|
|
"borderColor": "var(--border-color)"
|
|
},
|
|
"error": {
|
|
"position": "below",
|
|
"color": "var(--color-error-500)",
|
|
"fontSize": "var(--font-size-sm)"
|
|
},
|
|
"validation": "onBlur"
|
|
},
|
|
"modal": {
|
|
"description": "對話框通用規範",
|
|
"backdrop": "rgba(0, 0, 0, 0.5)",
|
|
"borderRadius": "var(--radius-lg)",
|
|
"closeOptions": [
|
|
"button",
|
|
"Esc",
|
|
"click outside"
|
|
],
|
|
"focusTrap": true,
|
|
"animation": {
|
|
"enter": "fadeIn + scaleUp",
|
|
"exit": "fadeOut + scaleDown"
|
|
}
|
|
}
|
|
},
|
|
"implementationRoadmap": {
|
|
"phase1": {
|
|
"name": "Core Components",
|
|
"priority": "P0",
|
|
"components": [
|
|
"TaskCard",
|
|
"KanbanColumn",
|
|
"Button"
|
|
],
|
|
"dependencies": [
|
|
"@dnd-kit/core",
|
|
"@dnd-kit/sortable"
|
|
]
|
|
},
|
|
"phase2": {
|
|
"name": "Navigation & Feedback",
|
|
"priority": "P1",
|
|
"components": [
|
|
"CommandPalette",
|
|
"ProgressRing",
|
|
"Toast"
|
|
]
|
|
},
|
|
"phase3": {
|
|
"name": "Extended Components",
|
|
"priority": "P2",
|
|
"components": [
|
|
"ActivityFeed",
|
|
"UserAvatar",
|
|
"ProjectCard"
|
|
]
|
|
}
|
|
}
|
|
} |