Vue 3 + 维特
此模板应有助于您在 Vite 中与 Vue 3 开始开发 。 模板使用 Vue 3 <script setup> SFCs,检查一下 脚本设置文件 学习更多.
建议的 IDE 设置
- VS 代码 + 键 挥发 (并禁用 Vetur) + 类型脚本 Vue 插件( Volar)。 。 。 .
向国家预防机制出版故事书图书馆
随本指南向国家防范机制发布你的故事书库,使其易于他人安装.
共享 CSS
将软件包样式表构建为单独的步骤 :
npm run build:package-css
生成的文件是 dist/hematournamentui-tailwind.css。消费应用软件应从软件包中导入,而不是手动复制 tailwind/output.css数字 :
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 省略名称 。 不提供永久图标 .
<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 同步;消费者应放弃自己昂贵的搜索或验证.
<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,与事件规则分开。 消费的应用软件拥有货币、持久性和通过道具提供刷新价格值.