# @dcrackel/hematournamentui 中文文档

规范地址：https://npmcn.com/package/%40dcrackel/hematournamentui/

版本：1\.0\.737
npm 元数据更新时间：2026-11-11T17:34:16.480Z
中文译文更新时间：2026-11-11T17:57:50.790Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dcrackel/hematournamentui
原文对照：https://npmcn.com/package/%40dcrackel/hematournamentui/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：8.6 MB，412 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：21 个
- 首次发布：2023-09-30T22:07:47.237Z
- 最新版本发布：2026-11-11T17:34:16.269Z
- 近 30 天下载量：6825（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：644（近 12 个月 44 个）

## 中文简介

此模板应有助于您在 Vite 中与 Vue 3 开始开发 。 模板使用 Vue 3 `<script setup>` SFCs,检查一下 [脚本设置文件](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) 学习更多.

## 安装

```sh
npm install @dcrackel/hematournamentui
```

也可以使用：`pnpm add @dcrackel/hematournamentui`、`yarn add @dcrackel/hematournamentui`、`bun add @dcrackel/hematournamentui`

## README

# Vue 3 + 维特

此模板应有助于您在 Vite 中与 Vue 3 开始开发 。 模板使用 Vue 3 `<script setup>` SFCs,检查一下 [脚本设置文件](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) 学习更多.

## 建议的 IDE 设置

-   [VS 代码](https://code.visualstudio.com/) + 键 [挥发](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (并禁用 Vetur) + [类型脚本 Vue 插件( Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)。 。 。 .

## 向国家预防机制出版故事书图书馆

随本指南向国家防范机制发布你的故事书库,使其易于他人安装.

## 共享 CSS

将软件包样式表构建为单独的步骤 :

```bash
npm run build:package-css
```

生成的文件是 `dist/hematournamentui-tailwind.css`。消费应用软件应从软件包中导入,而不是手动复制 `tailwind/output.css`数字 :

```js
import '@dcrackel/hematournamentui/tailwind.css';
```

使用 `npm run build:tailwind` 故事书本地版 `tailwind/output.css` 工作流程。 使用 `npm run build:package-css` 当为母应用程序或软件包准备 CSS 时.

## 关于董事分配的单括号

绕过一个括号对齐,以进行紧凑动作下降;点击对齐仍然直接打开左右. 下拉提供 Open bout, Resume bout, 或根据状态编辑 bout 。 默认情况下, 指定指令长被启用, 除了最后和大决赛; 家长可以明确禁用 `showBoutDirectorAssignment` 需要的时候。 当指定了一位导演时,悬浮菜单在指定的环/连接器颜色上方显示他们的名字为静态文字,当不提供颜色时,亮蓝色作为倒背. 活动完成的bouts 显示在 Resume Bout 或 Edit Bout 上方保存的导演 。 未指定bouts 省略名称 。 不提供永久图标 .

```vue
<Bracket
  v-bind="bracketProps"
  :showBoutDirectorAssignment="canManageAssignments"
  @request:bout-director="openStaffDirectorPicker"
/>
```

`request:bout-director` 包含一个离散的当前 bout 副本, 包括 `BoutId` 财务报告和审定财务报表 `DEBoutId` 当供应。 该应用程序打开基于员工的拾取器,保存选择权,并通过更新的计划覆盖 `plannedDirectingStations` 财务报告和审定财务报表 `plannedBoutAssignments`。此动作不会启动或改变裁判、分数、顺序或完成字段。 活跃的,完成的, 和身份不明的bout没有任务行动。 规划与直接资格无关,因此未来作为BYE占位符代表的槽也可以被分配. 在知道两个竞争对手之前,可以指定预定的未来竞争对手.

在短暂的徘徊延迟后,下降会打开,并在进入时保持开口. 键盘焦点立即揭示出它;"箭头倒下"进入了它的动作,箭头在动作之间移动,而"逃脱"则解除它并恢复了焦点. 它关闭外部点击或滚动。 这个 `HoverBoutActions` 故事书的例子包括一个模拟父母选择者. 生产分配和部门分配仍为应用型。 独立 `TableauBoutCard` 使用、通过 `plannedDirectorName` 财务报告和审定财务报表 `plannedDirectorColor` 以显示计划中的任务上下文,而不改变已保存的裁判员字段. `TableauColumn` 接受 `plannedStationByBout` 使用的查询 `Tableau` 并转发每个计划中的导演名称和颜色。 每个完整的连接器都使用接收 Bout 计划中的导演/环色,包括支线和接合线. 收信人没有计划 导演有一个中立的连接器.

## 故事书计划报道

所有括号的故事都允许导演的任务。 默认的例子从两个导演开始. 故事的家长通过半决赛,将预定的主括号分出为两个导演的相接部分和四个季度的相接部分,包含所有内容。 决赛、安插和慰藉回合不自动分配任务;包括一名新董事在内的任何人均有资格申请.

3个,5个,6个导演在每个回合内使用近等相接的组合. 已知的打开 BYEs 没有添加工作; 未来的空位仍然可以规划 。 有两个或四个主任,即使BYEs造成工作量不平衡,各科的界限仍与括号的一半或季度一致。 随着其他计数,边界会随着回合的收窄而变化. 增加一名主任将重新分配计划覆盖面,并保留现有的积极和完成的计划。 半决赛时仍可使用人工分配。 最终结果不能预先分配,在已知两个竞争对手时仍可提出主张.

"三会","四会","五会","六会"三个会长的故事都展现了这些价值. 故事母模拟中的分发寿命;可重复使用的组件仍然得到明确的 `plannedDirectingStations` 财务报告和审定财务报表 `plannedBoutAssignments` 从消费应用.

右栏导演卡包括去除控件. `Bracket` 发射 `request:remove-planned-director` \* 与选定的台站,包括其 `RingId` 财务报告和审定财务报表 `Director`消费应用将该台从计划覆盖范围中移除,根据需要重新分配预定工作,并供应更新道具。 删除计划覆盖范围并不能清除已保存的裁判员字段,也无法改变活动/已完成的线索。 故事展示了去除,再分配,去除上一位导演,再增加一位去除的导演.

## 主管名册合同

供应 `availableDirectors` 财务报告和审定财务报表 `rings` 改为 `Bracket` 以启用名册模式。 添加导师并管理打开列表,其中包含选取的复选框和每人一环倒放. 父母为合格的工作人员做准备,并为工作人员和人才库任务提供可选的缺省环;仅帮助DE的工作人员不需要人才库任务。 此软件包不读取或更改工作人员屏幕或集合数据.

导演栏从紧凑的图标和标签按钮开始:管理,再分配,并刷新. 他们的完整描述可用作工具提示和可访问标签. 重分配发射 `request:redistribute-scheduled-bouts`; 父重排计划覆盖范围并返回更新的任务道具, 保存活动并完成 bouts 。 刷新发件 `request:refresh-assignments`; 父重装当前站台和任务,并提供新鲜道具. 这两种事件都没有有效载荷,在父母作出答复之前,将现有数据留作可见。 工具栏使用相同的 `availableDirectors` 财务报告和审定财务报表 `rings` 可用为管理。 独立 `BracketDirectorAssignmentPanel` 消费者可以使用 `canManageDirectors` 并收到同样的请求.

`availableDirectors` 包含 `{ PersonId, DisplayName, Color, PortraitUrl?, DefaultRingId? }`。 。 。 . `rings` 包含 `{ RingId, RingName, Color?, Disabled? }`已保存 `plannedDirectingStations` 保留已有的 `{ RingId, RingName, Color, Director: { PersonId, DisplayName, PortraitUrl? } }` 形状。 局长身份证识别人员;环身份证识别覆盖站. 每环有一位被选中的导演符合目前的车站和约派合同. 模式允许在保存环交换和报告重复或缺失环之前修改两行草案.

保存输出 `update:planned-directing-stations` 并有一份完整的车站列表。 不检查一个人会把他们从DE的覆盖范围中移除. 在模式中进行环变化;右列卡以纯文本显示所选环. 父母保存意图,酌情重新分配计划覆盖,并返回权威道具. 现有活动/已完成的田地和集合任务仍然是家长拥有的。 每个导演在更换戒指时都保持所提供的颜色.

如果省去这些新的数据道具,则现有的 `request:add-planned-director` 仍然可以为父主拥有的添加UI提供回调. `BracketDirectorsModal` 也导出用于单独使用 `show`, (中文(简体) ), `availableDirectors`, (中文(简体) ), `rings`,以及 `stations`; 它发出 `update:show` 财务报告和审定财务报表 `submit:stations`。 。 。 .

## 电话引导视图

在768px以下,括号中显示关于连接状态的大约列表和计划中的环形建议. 组织面板和任务动作在电话上无法使用,即使其道具启用. 已完成的bouts坐落在一个倒塌的分数区进行分数校正. 返回桌面会恢复选定的列表视图或表格 .

电话事件导航使 " Pools " 、 " Pool Results " 、 " Bracket " 、 " 最终结果 " 和 " 处罚 " 可以在滚动行中查阅。 编辑、工作人员、显示和检查仍保留在桌面组织者菜单中。 选择桌面上的列表视图不会改变导航 。 Phone Director 括号故事显示了这种响应性布局;使用一个比768px更窄的取景口.

## 事件等待列表设置

事件向导在 Basic Info 上显示在 Max Fencers 下切换一个“ 启用等待列表” 。 布尔事件字段 `WaitlistEnabled` 默认为 `true` 当没有,并保留一个明确的 `false`两者 `update:submit` 财务报告和审定财务报表 `save:step` 包括事件有效载荷上的场,与 `rules`。消耗性应用程序持续使用,并通过 `event` prop;注册可用性与能力执法仍为app自有.

## 人物简介草稿并保存

`PersonManagement` 编辑和发送脱开的草稿 `submit:person` 仅当用户保存有效窗体时,才使用可解开的快照. `BaseInput` 发射 `update:value` 同步;消费者应放弃自己昂贵的搜索或验证.

```vue
<PersonManagement
  :personProfile="person"
  :saving="saving"
  :disabled="readOnly"
  :draftResetKey="profileRevision"
  @submit:person="savePerson"
  @update:image="handleDraftImage"
  @error:image="handleImageError"
/>
```

母公司拥有API调用,保存失败,以及权威重装. 成功重新装入后, 提供已刷新 `personProfile` 和递增 `draftResetKey` 在同一最新情况中。 选择不同的 `PersonId` 自动重发草稿 。 同一人的更新保留未保存的编辑,直到重置密钥更改; 重挂一个版本的 Vue `key` 还行.

`saving` 财务报告和审定财务报表 `disabled` 禁用窗体的本地控件并阻止新的编辑和保存/删除/合并动作。 较早开始的上传可能会完成草稿的更新. 保存可用的繁忙反馈 。 图像上传会暂时禁用保存直到完成 。 校验失败在标签上显示一个摘要, 链接返回无效的字段标签 .

草案 `LegalName` 财务报告和审定财务报表 `EmailAddress` 优先于遗留名称和电子邮件关系,包括明确的空字符串。 图书馆继续排出 `EmailAddress`; 父母将其映射到后端 `Email` 并省略已淡出 `PersonEmails` 根据其API的要求。 明确 `HemaRatingsId: null` 显示空白,永远不要回到旧的收视率。 草稿中空白的ID编辑仍为空白;由父编辑为 `null` 并规范有效的正整数ID.

成功上传更新同一草稿 `ProfileImage` 发射 `update:image` 与 URL 连接。 这一事件是一份通知草案,不应自动延续其简介. `ImageCropper` 发送成功编辑为 `update:url`,繁忙状态为 `update:uploading`失败,分别作为 `error:load` 或者说 `error:upload`。 。 。 . `PersonManagement` 显示图像失败并转发为 `error:image` 与 `{ type: 'load' | 'upload', message, url?, status? }`;失败永远不会释放出无效的图像编辑.

UI回归测试涵盖草案和事件合同. 直播后端保存/再加载检查邮件, HR ID 更改/ 清空, 第一次配置, 图像仍然是耗用应用程序的责任; 跳过评分刷新与配置保存成功分开 .

# 1\. 设置和先决条件

保证您有 npm 的账户 。 如果没有,你可以免费创建一个. 校验节点和npm 安装 :

```
Copy code
node -v
npm -v
```

# 2\. 准备您的故事书库

a. 建设图书馆 用 Vite 或 捆绑器 编译您的图书馆 :

```
vite build
```

b. 更新软件包 确保设置以下字段:

名称:您的软件包名称. 版本:版本号. 主干:主条目文件(如:dist/index.js). 文件:要包含的文件,例如\["dist"\].

# 3\. 进入国家预防机制

登录 npm( 如果您还没有) :

```
npm login
```

提供您的用户名、 密码和电子邮件 .

# 4\. 向国家预防机制公布

a. 默认(私人包件) 范围私有包 (@ username/ project- name) :

```
npm publish
```

b. 公共软件包 对于公共软件包:

```
npm publish --access=public
```

# 5\. 检查您的软件包

请查看npm网站,以验证您的软件包的发布情况.

检查注册名称

```
npm get registry
```

# 6\. 安装和使用图书馆

要安装库 :

```
npm install your-library-name
```

然后用户可以导入和使用您的库组件 .

注释:

总是在重印前在 package.json 中更新版本. 确保只捆绑必要的文件以防止包的出血.

## 现有事件步骤保存

`EditEventInfo` 财务报告和审定财务报表 `EditEventWizard` 接受 `editMode`控件 `step` (一至五级), `saving`, (中文(简体) ), `saveError`,以及 `saveNotice` 道具来.

与 `editMode` 启用, 步骤 1-4 显示 **保存和继续** 和第五步显示 **保存**。每个保存输出 `save:step` 与 `{ event, step }`。该组件不自行推进:消耗应用程序维持该部分,提供所保存的事件,以及更改 `step` 成功之后,我们继续 保留 `step` 和关于失败的草案不变。 设定 `saving` 并显示内置反馈.

`update:dirty` 当草稿更改或从已保存的道具重置时, 发出布尔值 . `navigate:step` 请返回导航; `update:cancel` 请求取消。 消费的应用软件拥有未保存的变换保护和路由. 这些事件由 `EditEventInfo`。 。 。 .

默认 `editMode: false` 保留创建的 Next/ Back 导航和一个 `update:submit` 在结尾。 本套件中没有执行 API 调用或持久性 。 Storybook的"EditWith StepSaves"示例模拟了成功的保存;SavingStep和StepSaveFailed显示待决状态和失败状态.

## 赛事价格

锦标赛管理基础标签编辑 `tournament.BasePrice`; 事件向导的基本信息步骤编辑 `event.EventPrice`。两个字段都支持小数和零。 锦标赛基价在加载和离开输入后会显示两个小数位. 缺少或无价格显示 `0.00` 占位符,且清出价格可节省零。 负价和非数值价格阻碍提交.

`submit:tournament` 包括数字 `BasePrice`。向导包括数字 `EventPrice` 两者 `update:submit` 财务报告和审定财务报表 `save:step.event`,与事件规则分开。 消费的应用软件拥有货币、持久性和通过道具提供刷新价格值.

## 常见问题

### @dcrackel/hematournamentui 是什么？

此模板应有助于您在 Vite 中与 Vue 3 开始开发 。 模板使用 Vue 3 \<script setup\> SFCs,检查一下 脚本设置文件 学习更多\.

### 如何安装 @dcrackel/hematournamentui？

在项目目录运行 npm install @dcrackel/hematournamentui，或使用 pnpm add / yarn add / bun add。

### @dcrackel/hematournamentui 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/dcrackel\_\_hematournamentui 是否存在。

### @dcrackel/hematournamentui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @dcrackel/hematournamentui 可以商用吗？

@dcrackel/hematournamentui 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @dcrackel/hematournamentui 的下载量有多少？

根据 npm 官方下载统计，@dcrackel/hematournamentui 在 2026/10/12 – 2026/11/10 这 30 天内被下载 6,825 次，日均约 228 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dcrackel/hematournamentui 还在维护吗？

最新版本 1\.0\.737 发布于 2026/11/12（今天）；至今共发布 644 个版本，其中过去 12 个月发布了 44 个；首次发布于 2023/10/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。