杂志小组件ui

**【原子级组件的“去 SaaS 化”绝对法则（The Anti-SaaS Rules）】** 在设计任何微小组件（按钮、弹窗、表单、下拉菜单、通知）时，必须严格遵守以下“四不”原则： 1. **绝对禁止圆角（No Radius）**：所有的 `border-radius` 必须为 `0`（`rounded-none`）。 2. **绝对禁止柔和阴影（No Soft Shadows）**：去除所有弥散阴影。如果必须有浮动感，只允许使用硬边缘的实体阴影（如 `box-shadow: 4px 4px 0px 0px #000`）或完全用 1px 纯黑边框替代阴影。 3. **绝对禁止主题色发光（No Focus Rings）**：Focus 状态绝对不允许出现蓝/紫色的默认外发光。通过加粗边框（如 `border-b-2 border-black`）或反色来表现激活状态。 4. **绝对禁止常规占位符（No Standard Placeholders）**：抛弃普通的浅灰色无衬线提示文字。 **【具体微小组件的杂志化隐喻与设计规范】** **1. 按钮（Buttons）-> 隐喻：“指令（The Command）”** - **主按钮**：纯黑背景（`#000`），文字反白。使用极小字号的无衬线体（10-11px），全大写（UPPERCASE），极宽字间距（tracking-[0.2em]）。Hover 时背景变为纯白，边框 1px 纯黑，文字变黑。 - **次按钮 / 轮廓按钮**：透明背景，1px 纯黑边框，Hover 时反色，或在文字后浮现一个斜体的衬线箭头（如 *→*）。 - **图标按钮**：极简的线条 Icon（如 Lucide 的 1.5px 粗细），外包 1px 的正方形边框或直接裸露。Hover 时可加入极其轻微的旋转（如 `hover:rotate-90`）或缩放。 **2. 弹窗与抽屉（Modals & Drawers）-> 隐喻：“插页（The Insert）” 或 “全幅别册（Full-bleed Spread）”** - 放弃传统的“屏幕居中小白盒”。 - **形态**：建议做成从侧边滑出的**全高侧边栏（Slide-out Panel）**，或者直接占据 80% 屏幕的**巨大覆盖层（Overlay）**，用 1px 的边框将其与背景严格切割。 - **背景色**：使用纯正的骨白色（`#FDFBF7`）或深石灰色（`#1C1917`）。 - **关闭按钮**：不要普通的圆形 `[x]`。使用屏幕右上角或左上角巨大的“CLOSE”字样（无衬线、宽间距），或者极细的 `X` 放置在网格边缘。 - **排版**：弹窗内部的标题必须极大（Playfair Display, 48px+），并且带有像“Vol.2 / Add Prompt”这样的卷宗标号。 **3. 下拉菜单与选项（Dropdowns & Selects）-> 隐喻：“目录清单（The Index）”** - **触发器**：看起来像一行普通的文字，旁边带有一个极小的下箭头 `↓`。 - **展开面板**：没有阴影的纯色方块，用 1px 黑色边框包裹。 - **列表项**：每一项之间用 1px 细线（`border-b border-stone-200`）分隔。Hover 状态**不要用灰色背景块高亮**，而是让文字变成**衬线体粗体（Serif Bold）**或者首字母变成*斜体（Italic）*，并向右轻微位移（`translate-x-2`）。 **4. 表单输入框（Inputs & Textareas）-> 隐喻：“稿纸与横线（The Manuscript）”** - **单行文本**：仅保留底部 1px 的边框（Border-bottom only）。Placeholder 文字使用优雅的衬线体斜体（如 *Enter your prompt here...*），颜色为石灰色（stone-400）。Focus 时底部边框加粗为 2px 纯黑，无任何过渡动画。 - **多行文本框（Textarea）**：一个没有任何圆角的 1px 边框矩形盒。内部的文字行高（line-height）拉大到 1.8 甚至 2.0，像是在写诗。 - **标签（Label）**：悬浮在横线左上方，极小的全大写无衬线体。 **5. 提示消息（Toasts / Notifications）-> 隐喻：“主编注记（Editor's Note）”** - 不要使用右上角漂浮带绿色打勾图标的普通 Toast。 - 放置在屏幕左下角或正下方，贴边。 - 形态为一个矩形方块，白底黑字或黑底白字，1px 纯黑边框，极其锐利（像报纸切页）。 - 标题叫“ERRATA (勘误)”或“NOTE (注记)”，用衬线正文体平铺直叙地告诉你操作结果（如：*The prompt has been permanently archived.*）。 **6. 分割与加载（Dividers & Loading）-> 隐喻：“装帧线与休止符”** - 分割线不要只是单调的 `<hr>`。使用特殊的排版符号（如 `— § —`、`* * *` 或 `///`）居中放置。 - 加载状态（Loading）拒绝转圈圈的 Spinner。使用逐渐变长的 1px 直线，或者几个极小号衬线体字母的闪烁（如 *Loading...* -> *Loading..* -> *Loading.* ），展现文字的呼吸感。