Alune 组件

DialogIcon

统一弹窗、提示和辅助操作的 SVG 图标。

使用方式

name 来自 DialogIconName，其他 SVGProps 原样传入。装饰图标使用 aria-hidden；独立操作要给按钮添加名称。 

import { DialogIcon } from '@alune/ui';

接入要求见快速开始，选择依据见 交互与无障碍规范。

运行示例

运行与复制源码来自同一 TSX 文件。浮层、状态和主题独立于文档；所有回调只更新本地模拟数据。

真实示例 TSX 独立预览 ↗
查看运行源码
源码文件 
import { FileIcon, FolderIcon, DialogIcon } from '@alune/ui';

export default function Example() {
  return (
    <div className="example">
      <section className="example-group">
        <h2 className="example-title">文件类型</h2>
        <div className="example-icon-grid">
          {['main.ts', 'view.tsx', 'package.json', 'README.md', 'photo.png', 'unknown.file'].map(
            (path) => (
              <div key={path} className="example-icon-item">
                <FileIcon path={path} />
                <span>{path}</span>
              </div>
            ),
          )}
        </div>
      </section>
      <section className="example-group">
        <h2 className="example-title">目录与仓库</h2>
        <div className="example-icon-grid">
          <div className="example-icon-item">
            <FolderIcon />
            <span>文件夹</span>
          </div>
          <div className="example-icon-item">
            <FolderIcon open />
            <span>已展开</span>
          </div>
          <div className="example-icon-item">
            <FolderIcon variant="repository" />
            <span>仓库</span>
          </div>
          <div className="example-icon-item">
            <FolderIcon variant="link" />
            <span>链接</span>
          </div>
        </div>
      </section>
      <section className="example-group">
        <h2 className="example-title">操作图标</h2>
        <div className="example-icon-grid">
          {(['folder', 'clock', 'check', 'x', 'refresh'] as const).map((name) => (
            <div key={name} className="example-icon-item">
              <DialogIcon name={name} />
              <span>{name}</span>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

API

DialogIcon

name 来自 DialogIconName，其他 SVGProps 原样传入。装饰图标使用 aria-hidden；独立操作要给按钮添加名称。

查看 DialogIcon 实现 ↗

DialogIconProps

属性 / 方法 类型 默认值 必填 说明
name "warning" | "info" | "x" | "arrow-right" | "arrow-up-right" | "check" | "caret" | "trash" | "lock" | "key" | "server" | "folder" | "folder-open" | "branch" | "merge" | "pr" | "archive" | "cloud-up" | "cloud-down" | "globe" | "user" | "mail" | "terminal" | "laptop" | "search" | "bell" | "copy" | "eye" | "eye-off" | "link" | "sparkle" | "sliders" | "columns" | "download" | "moon" | "sun" | "wave" | "file" | "file-plus" | "refresh" | "plus" | "pencil" | "swap" | "shield" | "plug" | "tree" | "commit" | "chat" | "dots" | "clock" | "undo" — 是 展示名称。

查看 DialogIconProps 实现 ↗

DialogIconName

export type DialogIconName = keyof typeof icons;

查看 DialogIconName 实现 ↗

交互与使用限制

为每个操作提供可访问名称，为输入关联 label；使用语义化组件和清晰焦点。不要只靠颜色传达状态，禁用与等待时避免重复执行。

name 来自 DialogIconName，其他 SVGProps 原样传入。装饰图标使用 aria-hidden；独立操作要给按钮添加名称。

键盘、焦点、风险确认与通知策略的完整约定见交互规范。

查看实现 ↗ 编辑文档 ↗ 设计与验收