Headless UI

npm install @headlessui/react

import {
  Description,
  Dialog,
  DialogBackdrop,
  DialogPanel,
  DialogTitle,
} from "@headlessui/react";
import { useState } from "react";

export function DeleteDialog() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        删除项目
      </button>

      <Dialog
        open={isOpen}
        onClose={() => setIsOpen(false)}
        className="relative z-50"
      >
        <DialogBackdrop className="fixed inset-0 bg-black/40" />

        <div className="fixed inset-0 flex items-center justify-center p-4">
          <DialogPanel className="w-full max-w-md rounded-xl bg-white p-6">
            <DialogTitle className="text-lg font-semibold">
              确认删除
            </DialogTitle>
            <Description className="mt-2 text-sm text-zinc-600">
              删除后无法恢复。
            </Description>

            <div className="mt-6 flex justify-end gap-3">
              <button onClick={() => setIsOpen(false)}>取消</button>
              <button data-autofocus>确认删除</button>
            </div>
          </DialogPanel>
        </div>
      </Dialog>
    </>
  );
}

import {
  Menu,
  MenuButton,
  MenuItem,
  MenuItems,
} from "@headlessui/react";

export function AccountMenu() {
  return (
    <Menu>
      <MenuButton className="rounded-md border px-3 py-2">
        账户
      </MenuButton>

      <MenuItems
        anchor="bottom end"
        className="mt-2 w-44 rounded-lg border bg-white p-1 shadow-lg"
      >
        <MenuItem>
          <a
            href="/profile"
            className="block rounded px-3 py-2 data-focus:bg-zinc-100"
          >
            个人资料
          </a>
        </MenuItem>
        <MenuItem>
          <button className="w-full rounded px-3 py-2 text-left data-focus:bg-zinc-100">
            退出登录
          </button>
        </MenuItem>
      </MenuItems>
    </Menu>
  );
}

npm install @headlessui/vue

<script setup lang="ts">
import { ref } from "vue";
import { Switch } from "@headlessui/vue";

const enabled = ref(false);
</script>

<template>
  <Switch
    v-model="enabled"
    class="group inline-flex h-6 w-11 items-center rounded-full bg-zinc-300 data-checked:bg-indigo-600"
  >
    <span class="sr-only">启用通知</span>
    <span
      class="size-4 translate-x-1 rounded-full bg-white transition group-data-checked:translate-x-6"
    />
  </Switch>
</template>

npm run lint
npm run typecheck
npm test
npm run build

# 使用键盘完成全流程，并测试 VoiceOver、NVDA 或其他屏幕阅读器
# 验证缩放、移动端滚动、高对比度和 Reduced Motion