# 共享资源选择面板 UI/UX 优化

**日期**：2026-02-08  
**模块**：client / 创建项目 - 资源选择面板

## 变更概要

基于 ui-ux-pro-max 技能与 SaaS 简约风格规范，对 `ResourceSelectorPanel` 进行视觉与选择体验优化，便于用户更快定位并选择要共享的资源。

## 视觉与交互

- **标题区**：增加 FolderOpen 图标与层级（font-semibold），副文案简化为「选择文件夹、项目或角色/场景/道具」。
- **搜索**：占位符改为「按名称搜索文件夹或资源…」；搜索高亮由固定 `bg-yellow-200` 改为主题色 `bg-brand-default/25`，兼顾深色模式与对比度。
- **类型筛选**：由多个 Button 改为分段控件（segmented control）样式，圆角容器 + 选中态品牌色，便于快速切换「全部 / 角色 / 场景 / 道具」。
- **树行**：行高略增（py-2.5）、选中态背景改为 `bg-brand-default/10`；整行可点击勾选（扩大热区），展开按钮独立热区并 `stopPropagation` 避免误触勾选；hover 使用 `transition-colors duration-200`，无 scale 避免布局抖动。
- **底部栏**：已选统计用 Badge 展示「角色 N / 场景 N / 道具 N」，数字使用 `tabular-nums`；全选/展开全部按钮增加 hover 背景与 `focus-visible:ring`。

## 无障碍与规范

- 搜索：`id="resource-selector-search"` + `<label htmlFor="..." className="sr-only">`，符合 Form Labels 要求。
- 所有交互按钮/可聚焦区域：`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-default`，满足 Focus States。
- 树行可点击区域：`role="button"`、`tabIndex={0}`、Enter/Space 触发勾选、`aria-label` 与 `aria-checked`。
- 图标按钮：`aria-label` 或 `aria-hidden` 按用途区分。

## 空状态

- 无匹配结果时增加副文案：「尝试更换关键词或切换类型筛选」，减少困惑。

## 涉及文件

- `client/src/components/features/project/ResourceSelectorPanel.tsx`
- 新增：`docs/client/changelogs/2026-02-08-resource-selector-ui-ux-optimization.md`