Skip to content

feat: add searchable cascader #435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from

Conversation

boomwwww
Copy link

带有搜索功能的级联选择器

引言

在之前,当一个立绘的动作表情(动画)选项过多时,用户可能需要在一个下拉列表中翻查许久,才能选中自己所期待的选项,为了解决这个问题,本人有了为动作表情(动画)的选择添加级联选择与搜索功能的想法。

新增内容

  • 新增 SearchableCascader 组件。
    • 位于 packages/origine2/src/pages/editor/GraphiclEditor/components/ 文件夹下。
    • 新增 searchableCascader.module.scss 样式文件。
    • src/pages/editor/GraphiclEditor/utils/ 文件夹下新增 getCascaderOptions.ts 文件,用于辅助 SearchableCascader 组件实现相关功能。
  • 新增 TagInputPicker 组件。
  • ChangeFigure.tsx 中的两个 WhellDropdown 组件替换成了 SearchableCascader 组件。
  • src/pages/editor/Topbar/tabs/Settings/SettingsTab.tsx 组件中追加了自定义级联选择器分隔符功能。
  • 集中式状态管理新增两个变量 isCascaderDelimitersCustomizablecascaderDelimiters ,在 src/types/editor.tssrc/store/useEditorStore.ts 文件中追加了相关内容。

效果

  • 新增图形编辑器页面的切换立绘语句的动作表情(动画)选项的级联选择与搜索功能。
    • 支持级联选择功能,当选项数量超过阈值(20个)时开启。
    • 支持输入关键词实时过滤选项,高亮匹配内容。
    • 支持自定义级联分隔符。
    • 支持弹窗固定,方便连续选择,提升交互体验。
  • 新增编辑器顶部设置一栏中的“自定义级联选择器分隔符”选项。

依赖

  • 依赖 WhellDropdownTerreToggleCommonOptions 等组件。
  • 依赖 useEditorStore 的集中状态管理。

其他

  • 当选项数量低于阈值(20个)时,SearchableCascader 组件与原有 WhellDropdown 组件的行为完全相同。

欢迎提出改进建议!

@boomwwww boomwwww changed the title Feature/searchable cascader enhance feat: add searchable cascader Jun 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants