引路

Use a dropdown menu anchored to an actions button.

使用锚定在操作按钮下的下拉菜单。

Use a context menu on right-click with copy rename and delete.

使用右键出现的上下文菜单，含复制、重命名、删除。

Use a menubar with File Edit View Help and nested menus.

使用文件/编辑/视图/帮助及嵌套项的菜单栏。

Use a navigation menu with section dropdowns.

使用带分节下拉的导航菜单。

Use a mega menu with grouped product columns.

使用按产品分列的巨型导航菜单。

Use an overflow menu triggered by a kebab icon.

使用竖三点触发的溢出菜单。

Build a single Underlined Tabs component, not a full page. Structure: a horizontal tab list on top and one content panel below. Default three tabs labeled Overview, Billing, and Settings, each revealing its own short panel. The active tab has a 2px underline aligned to the label width; inactive tabs have muted text, no fill, no card background, and no shared track. Interaction: click a tab to switch panels; only the active panel is visible; Left/Right keys when the list is focused. States: default, hover (slightly brighter text), selected (accent underline and stronger text), disabled (non-interactive, reduced contrast). Motion: instant panel swap is fine. Do not build pill tabs, a segmented control, or a slider. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成一个下划线标签组件，不要整页。上方横排标签、下方一块内容。默认三项 Overview、Billing、Settings，点哪项只显示对应面板。当前项是贴着文字宽度的 2px 底线；未选项弱文字、无底、无卡片、无公共轨道。支持点击和左右键。状态含默认、悬停、选中、禁用。面板切换可即时。不要做成胶囊标签、分段控制或滑块。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Tabs with Sliding Indicator component, not a full page. Structure: same as underlined tabs: horizontal labels Overview, Billing, Settings above one content panel; a 2px underline sits under the active label. Interaction: click or Left/Right to change the selected tab and panel. States: default, hover, selected, disabled. Motion: the underline must slide to the new tab in about 180ms; do not jump instantly. Do not use pill tabs, a segmented control, or a range slider. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成带滑动指示条的标签，不要整页。结构同下划线标签：横排 Overview、Billing、Settings，下方一块内容；2px 底线在当前文字下。点击或左右键切换。状态含默认、悬停、选中、禁用。底线必须约 180ms 滑到新项，不要瞬移。不要做成胶囊标签、分段控制或滑块。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Pill Tabs component, not a full page. Structure: three independent pill-shaped tabs labeled Overview, Billing, Settings, plus one content panel below. Each tab is its own rounded capsule with gap between pills. The selected pill has a filled or strongly outlined active surface; others are outline or text-only. Interaction: click a pill to swap the panel. States: default, hover, selected, disabled. Motion: 150ms fill/color change, no sliding underline. Do not use a shared segmented track, folder tabs, or a slider. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成胶囊标签，不要整页。三个互不相连的圆角胶囊 Overview、Billing、Settings，下方一块内容。当前胶囊实心或强描边，其余描边或纯文字，胶囊之间有间隙。点击切换面板。状态含默认、悬停、选中、禁用。约 150ms 变色，不要滑动底线。不要做成同一轨道的分段控制、文件夹页签或滑块。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Segmented Control, not Tabs and not a full page. Structure: Day, Week, Month packed inside one shared rounded track with no gap between segments. Only one segment is selected. Interaction: click a segment to change the selected value; this switches a view of the same dataset, not unrelated pages. States: default, selected (inset or filled in the track), hover, disabled. Motion: 150ms selected-thumb or fill. Do not use separate pill tabs, underlines, or a slider. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成分段控制，不是 Tabs，不要整页。Day、Week、Month 挤在同一条圆角轨道里，段与段无间隙，同时只选一段。点击切换同一数据集的视图，不是互不相关的页面。状态含默认、选中（轨道内填充）、悬停、禁用。约 150ms。不要做成分散胶囊、下划线标签或滑块。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Contained Tabs component, not a full page. Structure: tab labels Overview, Billing, Settings attached to the top edge of a bordered content panel so tabs and panel share one outline. The active tab connects visually to the panel (no gap, shared border). Interaction: click a tab to change panel content. States: default, selected (connected to panel), hover, disabled. Motion: instant or 150ms. Do not use floating pills, a segmented track, or folder-style overlapping tabs. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成卡片标签，不要整页。Overview、Billing、Settings 贴在带描边内容面板的上沿，标签和面板共用一圈边。当前项与面板视觉相连（无缝、共边）。点击切换内容。状态含默认、选中、悬停、禁用。不要做成悬浮胶囊、分段轨道或叠放的文件夹页签。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Folder-style Tabs component, not a full page. Structure: tabs look like notebook file folders sitting on a content panel; the selected tab overlaps the panel edge like a folder flap. Default labels Overview, Billing, Settings. Interaction: click a folder tab to bring its panel forward. States: default, selected (in front, connected), hover, disabled. Motion: 150ms. Do not use a sliding underline, pills, or a segmented control. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成文件夹式页签，不要整页。页签像笔记本文件夹搭在内容面板上，当前项像页签盖住面板上沿。默认 Overview、Billing、Settings。点击把对应面板带到前面。状态含默认、选中、悬停、禁用。不要做成滑动底线、胶囊或分段控制。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Vertical Tabs component, not a full page. Structure: a vertical tab list on the left (Overview, Billing, Settings) and the content panel on the right, filling remaining width. Active tab can use a left accent bar or stronger text. Interaction: click a row to swap the right panel; Up/Down keys when the list is focused. States: default, hover, selected, disabled. Motion: instant panel swap. Do not use horizontal underlines, a sidebar of page links, or a segmented control. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成垂直标签，不要整页。左侧竖排 Overview、Billing、Settings，右侧内容占满剩余宽度。当前项可用左侧强调条或更重文字。点击或上下键切换右侧面板。状态含默认、悬停、选中、禁用。不要做成横向下划线、整站侧栏链接或分段控制。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Icon Tabs component, not a full page. Structure: three icon-only tabs (home, search, settings as line icons) plus a content panel. Each icon has a tooltip with the destination name. Interaction: click an icon to switch the panel; tooltip on hover/focus. States: default, hover, selected (accent icon or underline), disabled. Hit target at least 32px. Do not add visible text labels, and do not use a mobile bottom nav bar spanning the screen. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成纯图标标签，不要整页。三个仅图标项（首页、搜索、设置的线条图标）加内容面板。每个图标悬停/聚焦出目的地名称 tooltip。点击切换面板。热区至少 32px。状态含默认、悬停、选中、禁用。不要加可见文字标签，也不要做成铺满屏宽的底部导航。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Icon + Label Tabs component, not a full page. Structure: three horizontal tabs, each with a leading line icon and a text label (Overview, Billing, Settings), plus one content panel. Interaction: click either icon or label to switch. States: default, hover, selected, disabled. Do not use icon-only tabs or a segmented control. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成图标加文字的标签，不要整页。三项横排，每项前面线条图标加文字 Overview、Billing、Settings，下方一块内容。点图标或文字都能切换。状态含默认、悬停、选中、禁用。不要做成纯图标标签或分段控制。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Scrollable Tabs component, not a full page. Structure: many tab labels in one row (at least eight: Home, Projects, Billing, Members, Analytics, Alerts, Integrations, Settings) that overflow a fixed-width viewport, with left/right overflow controls. A content panel sits below. Interaction: click a visible tab to select; use chevrons or horizontal scroll to reveal hidden tabs. States: default, selected, hover, disabled, overflow (chevrons appear when clipped). Do not wrap tabs onto two lines and do not use a dropdown to replace the row. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成可滚动标签，不要整页。一行至少八个标签（Home 到 Settings）超出固定宽度，配左右溢出按钮，下方一块内容。点击可见项选中；用箭头或横向滚动露出被裁切的项。状态含默认、选中、悬停、禁用、溢出。不要折成两行，也不要用下拉菜单代替这一行。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Closable Tabs component like browser tabs, not a full page. Structure: a tab strip with at least three documents (Untitled, README, styles.css); each tab shows a title and a close control; a plus control can add a tab. Content panel shows the active document name. Interaction: click to activate; click close to remove that tab and select a neighbor; cannot close the last remaining tab. States: default, selected, hover, dirty optional. Do not use pills or a segmented control. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成类似浏览器的可关闭标签，不要整页。至少三个文档页签（Untitled、README、styles.css），每项有标题和关闭；可有加号新增。内容区显示当前文档名。点击激活；点关闭删该项并选中邻居；不能关掉最后一个。不要做成胶囊或分段控制。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Draggable Tabs component, not a full page. Structure: three or more named tabs in a row plus a content panel. Interaction: click to select; pointer-drag a tab horizontally to reorder the strip; drop commits the new order. States: default, selected, dragging (lifted tab), hover. Motion: the strip reflows as the tab is dragged. Do not require a separate edit mode, and do not use a sortable list instead of tabs. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成可拖动重排的标签，不要整页。一行至少三个有名标签加内容面板。点击选中；按住横向拖动改顺序，松开即生效。状态含默认、选中、拖动中、悬停。不要另开编辑模式，也不要用可排序列表代替标签。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Content Switcher for alternate views of the same dataset, not a full page. Structure: a compact switcher with List, Board, and Calendar options sitting above one dataset canvas. Only the presentation changes; the records stay the same. Interaction: click an option to change the view layout. States: default, selected, hover, disabled. Do not use underlined page tabs that navigate to different sections, and do not use a filter bar. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成同一数据集的内容切换器，不要整页。List、Board、Calendar 三个紧凑选项在同一块数据画布上方。只改呈现，记录不变。点击切换布局。不要做成跳到不同栏目的下划线页面标签，也不要做成筛选栏。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single numbered Stepper for a multi-step wizard, not a full page. Structure: a horizontal row of at least four steps labeled Cart, Address, Payment, Review, connected by lines. Each step shows a number in a circle plus a short label. Completed steps are highlighted, the current step is emphasized, future steps are muted. Interaction: click a reachable step to make it current; optional Next/Back. States: upcoming, current, completed, error optional. Do not use a progress bar alone, chevron fishbone, or tabs. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成带数字的横向步骤条，用于多步向导，不要整页。至少四步 Cart、Address、Payment、Review，圆圈数字加短标签，步间有连线。已完成高亮，当前步强调，未到步弱化。可点已到达的步；可有下一步/上一步。不要只用进度条、鱼骨箭头或标签页。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Dot Stepper, not a full page. Structure: a minimal row of connected dots for four steps without requiring visible names (tooltips allowed). A line fills up to the current dot. Interaction: click a dot to change the current step. States: upcoming, current, completed. Do not use numbered circles, chevrons, or a slider. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成极简圆点步骤条，不要整页。四个圆点用线连接，不必常显步骤名（可用 tooltip）。进度线填到当前点。点击圆点切换。不要用数字圆、鱼骨或滑块。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Chevron Stepper (arrow/fishbone), not a full page. Structure: four steps as connected arrow shapes that bite into the next (Cart, Address, Payment, Review). Interaction: click a chevron to select that step. States: completed, current, upcoming. Do not use numbered circles on a thin line, or filled solid blocks unless this is the filled variant. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成鱼骨/箭头步骤条，不要整页。四步呈咬合的箭头块（Cart 到 Review）。点击切换。不要做成细线上的数字圆，也不要做成整块实心填充（那是填充鱼骨）。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Filled Chevron Stepper, not a full page. Structure: like chevron stepper but completed steps use a solid filled background, current is strongest, upcoming is outline or muted. Labels Cart, Address, Payment, Review. Interaction: click to change step. Do not use unfilled outline-only chevrons or a numbered line stepper. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成实心填充的鱼骨步骤条，不要整页。已完成步实心底，当前最强，未到步描边或弱化。标签 Cart 到 Review。不要做成空心鱼骨或数字连线步骤。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Vertical Stepper, not a full page. Structure: four steps stacked with labels and short descriptions on the right of circles, connected by a vertical line. Interaction: click a step to make it current. States: completed, current, upcoming. Do not use a horizontal stepper or a logistics tracker with timestamps. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成垂直步骤条，不要整页。四步纵向，圆点右侧有标题和短说明，竖线连接。点击切换当前步。不要做成横向步骤条或带时间戳的物流追踪。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Build a single Progress Tracker for order/logistics, not a wizard stepper. Structure: a vertical timeline of statuses (Placed, Shipped, Out for delivery, Delivered) with timestamps and the latest as current. Interaction: mostly informative; completed nodes filled. States: done, current, pending. Do not use numbered checkout steps or a horizontal stepper. If a design system exists, map colors to its tokens but keep this structure. No extra page chrome, no emoji.

做成物流/订单进度追踪，不是结账向导。纵向状态 Placed、Shipped、Out for delivery、Delivered，带时间，最新为当前。已完成点实心。不要做成结账数字步骤或横向步骤条。 若项目已有设计系统，颜色跟 token，结构和交互保持不变。不要整页壳，不要 emoji。

Use an accordion of stacked disclosures.

使用多项垂直堆叠的手风琴。

Use a single collapsible section for advanced settings.

使用单个可折叠区块，适合高级设置。

Use a disclosure / show-hide control with a chevron.

使用带箭头的显隐/披露控件。

Use a tree view with expand and collapse.

使用可展开收起的树视图。

Use a file explorer tree.

使用文件资源管理树。

Build a treegrid with name and size columns and expandable rows.

构建带名称、大小列且行可展开的树网格。