mirror of
https://github.com/aculix/huashu-design.git
synced 2026-10-27 07:15:54 +00:00
alchainandClaude Opus 4.7
7d7bab4a82
花叔设计工作台 —— AI 驱动的 HTML 设计工作流，支持 Claude Code / Codex / Cursor / Trae / OpenClaw / Hermes Agent 等任意 skill-compatible agent。 四条主干能力： - HTML 高保真视觉产出（原型/App/幻灯片/动画/变体/信息图） - 设计方向顾问 Fallback（5 流派 × 20 设计哲学 × 24 预制 showcase） - Junior Designer 工作流（先 show 假设再迭代） - 专家级 5 维度评审（哲学/层级/执行/功能/创新） 工程工具链： - HTML → 25fps/60fps MP4 + palette GIF，含 6 首场景化 BGM - HTML → PDF / PPTX 导出 - Playwright 截图 + 控制台错误验证 - iOS/Android/macOS/Browser 设备边框 + Stage/Sprite 动画引擎 初版包含 SKILL.md + 13 份 references + 7 个 scripts + 18 类 assets。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
97 lines
2.5 KiB
React
97 lines
2.5 KiB
React
/**
|
||
* MacosWindow — macOS应用窗口边框（含traffic lights）
|
||
*
|
||
* 用法：
|
||
* <MacosWindow title="Finder">
|
||
* <YourAppContent />
|
||
* </MacosWindow>
|
||
*/
|
||
|
||
const macosWindowStyles = {
|
||
window: {
|
||
display: 'inline-block',
|
||
background: '#fff',
|
||
borderRadius: 10,
|
||
overflow: 'hidden',
|
||
boxShadow: '0 30px 80px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.15)',
|
||
},
|
||
titleBar: {
|
||
height: 38,
|
||
background: 'linear-gradient(to bottom, #e8e8e8, #d8d8d8)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
padding: '0 14px',
|
||
borderBottom: '0.5px solid rgba(0,0,0,0.1)',
|
||
position: 'relative',
|
||
userSelect: 'none',
|
||
},
|
||
trafficLights: {
|
||
display: 'flex',
|
||
gap: 8,
|
||
alignItems: 'center',
|
||
},
|
||
light: {
|
||
width: 12,
|
||
height: 12,
|
||
borderRadius: '50%',
|
||
border: '0.5px solid rgba(0,0,0,0.15)',
|
||
},
|
||
close: { background: '#ff5f57' },
|
||
minimize: { background: '#febc2e' },
|
||
maximize: { background: '#28c840' },
|
||
title: {
|
||
position: 'absolute',
|
||
left: 0,
|
||
right: 0,
|
||
textAlign: 'center',
|
||
fontSize: 13,
|
||
color: '#333',
|
||
fontWeight: 500,
|
||
fontFamily: '-apple-system, "SF Pro Text", sans-serif',
|
||
pointerEvents: 'none',
|
||
},
|
||
content: {
|
||
position: 'relative',
|
||
overflow: 'auto',
|
||
},
|
||
titleBarDark: {
|
||
background: 'linear-gradient(to bottom, #3c3c3c, #2c2c2c)',
|
||
borderBottom: '0.5px solid rgba(255,255,255,0.1)',
|
||
},
|
||
titleDark: {
|
||
color: '#ddd',
|
||
},
|
||
};
|
||
|
||
function MacosWindow({ title = '', width = 900, height = 600, darkMode = false, children }) {
|
||
return (
|
||
<div style={{ ...macosWindowStyles.window, background: darkMode ? '#1e1e1e' : '#fff' }}>
|
||
<div style={{
|
||
...macosWindowStyles.titleBar,
|
||
...(darkMode ? macosWindowStyles.titleBarDark : {}),
|
||
}}>
|
||
<div style={macosWindowStyles.trafficLights}>
|
||
<div style={{ ...macosWindowStyles.light, ...macosWindowStyles.close }} />
|
||
<div style={{ ...macosWindowStyles.light, ...macosWindowStyles.minimize }} />
|
||
<div style={{ ...macosWindowStyles.light, ...macosWindowStyles.maximize }} />
|
||
</div>
|
||
{title && (
|
||
<div style={{
|
||
...macosWindowStyles.title,
|
||
...(darkMode ? macosWindowStyles.titleDark : {}),
|
||
}}>
|
||
{title}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div style={{ ...macosWindowStyles.content, width, height }}>
|
||
{children}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (typeof window !== 'undefined') {
|
||
window.MacosWindow = MacosWindow;
|
||
}
|