# @dcrackel/meyersquaredui 中文文档

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

版本：1\.0\.289
npm 元数据更新时间：2026-11-11T17:35:19.402Z
中文译文更新时间：2026-11-12T04:12:09.605Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：4.1 MB，234 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：8 个
- 首次发布：2024-09-18T15:59:21.988Z
- 最新版本发布：2026-11-11T17:35:18.981Z
- 近 30 天下载量：2990（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：211（近 12 个月 26 个）

## 中文简介

过 `weapons` 键盘模板或 `LeaderboardHeader` 显示中 命令,使用 API 对象 `Id` 财务报告和审定财务报表 `Name` (遗产弦也起作用). 前五起事件是作为联系出现的;其余武器出现在“其他武器”中 放下枪 也没有

## 安装

```sh
npm install @dcrackel/meyersquaredui
```

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

## README

# Vue 3 + 维特

## 长板过滤器

过 `weapons` 键盘模板或 `LeaderboardHeader` 显示中 命令,使用 API 对象 `Id` 财务报告和审定财务报表 `Name` (遗产弦也起作用). 前五起事件是作为联系出现的;其余武器出现在“其他武器”中 放下枪 两个组件都没有硬码 武器目录。 空列表 显示没有武器控制. `activeWeapon` 可选择控制选择 使用武器对象,其ID,或者遗留的字符串.

两个组件都发出 `weapon-selected` 与最初提供的武器. 消费的应用 `Id` 以获取结果并替换 `fencers` 与 反应; 武器身份证、HR身份证和父母身份证仍然不同. 下拉显示所选武器名称,结果标题如下 当前选择。 例如: `<LeaderboardHeader :weapons="weapons" :active-weapon="selectedWeaponId" @weapon-selected="loadWeaponResults" />`。 。 。 .

领导板模板包括“Filter by Rating”按钮(A、B、C、D、E、U)和 列表之上的即时、不区分大小写的名称搜索。 选择要排序 过滤器; 再次选择以显示所有级别 。 两个过滤器一起工作在 提供 `fencers` 阵列并保留原始位置并点击有效载荷. 排名使用显示 `M2Rating` 或第一个 `M2Ratings` 条目; 缺少收视率 计数为 `U`消耗性应用软件应提供有效武器的评级. 预览每个级别 `Templates/LeaderboardPage/AllRanks`。 。 。 .

## 栅栏配置

过 `weapons` 改为 `FencerProfilePage` 以显示配置武器选择器. 选项使用 `{ Id, Name }` 对象或遗留字符串和默认为空 阵列. `activeWeapon` 可以是选定的对象或ID。 页面转发 `weapon-selected` 带有原始选项, 以便父母可以获取和提供 具体武器概况统计。 选择器不过滤混合事件 本地结果。 代名词仍隐.

`FencerProfilePage` 保存简介标题、摘要卡和年度图表, 添加导出 `FencerRatingsCard`, (中文(简体) ), `FencerRatingHistoryCard`,以及 `FencerEventHistoryCard` 组件。 通过现有的 API 响应为 `fencerStats` (单位:千美元)`Person`, (中文(简体) ), `PersonStats`,以及 `YearStats`) (中文(简体) ). 年度图表使用情况 `YearWinPercentage` 财务报告和审定财务报表 `TotalIndicator`; YTD 使用当前日历年. 汇总收视率是指第一种武器 `Person.M2Ratings`。 。 。 .

过 `ratingHistory` 作为一种奖励的系列 `WeaponId`, (中文(简体) ), `Weapon.Name`, (中文(简体) ), `Rating`, (中文(简体) ), `FormattedRating`,以及 `DateEarned` 以显示历史奖. 省略时,图表/列表仅显示 `Person.M2Ratings` 和全时高卡 显示破折号。 明确的空数组表示否 历史奖. 图表列出了按武器分列的个人获奖情况,没有 推断日期之间的收视率. 未注明日期或未确认的评级仍在 列表,但从图表中删除.

为了全面进步,后端必须退还先前的奖项,包括重复 奖励。 对于武器过滤事件的历史,还必须提供明确的 事件结果或返回预过滤结果的武器标识。 当前页面 显示“ Event history” 下提供的每个事件

页面发布 `back-to-leaderboard` ưμ㼯a `changePage` 事件. 领导板模板释放 `fencer-selected` 与原始围栏和 选择的武器。 消费的应用程序拥有路由和取取;听这些 在返回时打开配置并恢复领导板选择的事件.

预览于 `Templates/FencerProfile` 使用 `npm run watch:storybook`。 。 。 . `BrandenProfile` 使用所提供的公共简介字段; `WithSampleRatingHistory` 增加了清楚说明性早先的裁决。 空和部分数据故事是 也可用.

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

了解更多关于 IDE 支持 Vue 的 [Vue Docs 缩放指南](https://vuejs.org/guide/scaling-up/tooling.html#ide-support)。 。 。 .

## 支持表单

`ContactUsForm` 由此软件包导出。 它收集需要的电子邮件,主题, 和消息,然后发出 `submit:form` 与 `{ email, fromEmail, subject, message }`。 。 。 . `fromEmail` 仍可供现有消费者使用 `email`。 。 。 . 数值被修剪,所排放的物体独立于表格草稿.

信件发送属于消费应用程序. 过 `submitting` 等待期间 其API呼吁, `submitted` 在确认成功之后 `errorMessage` 打开 失败。 经确认的成功使草案得到澄清;失败使草案得以保留以供重试. 这个 `title` 道具默认为 `Contact Support`。 。 。 .

与现有 `/api/v1/contact` 结束点 :

[查看完整的支持形式示例](https://npmcn.com/package/%40dcrackel/meyersquaredui/examples/SupportFormExample.vue)。 。 。 . 实例是进口该仓库的本地出口;在消费应用中,进口 `ContactUsForm` 从 `@dcrackel/meyersquaredui` 换句话说.

如果您使用 API 帮助代替 `fetch`,它必须扔一个失败 响应, 因此应用程序不会报告发送的失败请求 .

预览表单及其发送、发送和失败状态 `Organisms/Forms/ContactUsForm` 与 `npm run watch:storybook`。 。 。 .

## 支持活动页面上的链接

母应用程序提供支持目的地. URL 道具默认为空 字符串,除非提供其URL,否则每个链接都会被隐藏. 链接使用普通 在当前标签中锁定并不需要 Vue 路由器 .

| 构成部分 | 可选道具 | 安置情况 |
| --- | --- | --- |
| `SupportLinks` (出口) | `ratingsSupportUrl`, (中文(简体) ), `paymentSupportUrl` | 在父母插入的地方 |
| `TournamentDetails`, (中文(简体) ), `TournamentDetailPage` | 两个URL道具 | 锦标赛的下面 |
| `GridLayout` | 两个URL道具 | 事件或结果网格下方 |
| `PoolResults` | `ratingsSupportUrl` | 集合结果以下 |
| `Cart` | `paymentSupportUrl` | 下面的离职 |
| `RegistrationPage` | `paymentSupportUrl` | 下面的桌面检出; 上面的移动事件 |

对于父事件页,导入 `SupportLinks` 从此包中插入:

[查看支持链接示例](https://npmcn.com/package/%40dcrackel/meyersquaredui/examples/SupportLinksExample.vue)。 。 。 .

同样的属性可以直接传递给 `TournamentDetails` 或者说 `GridLayout`。通过 `payment-support-url` 改为 `Cart` 用于退出支持. 为相关组织者提供支付 URL; 为事件省略 不应与CUFC链接.

## 事件栅栏等待列表

通过确认的注册 `GridLayout.items` 并等待列入清单的围栏 新的 `waitlistItems` 道具,使用 `FencerListCard` 作为卡片组件. 单列等待列表部分显示计数并标签每个栅栏 等待名单。 空等列表被隐藏 。 设定 `waitlistIsLoading` 显示 在从注册列表中独立获取等待列表时占位符 .

[查看事件栅栏列表示例](https://npmcn.com/package/%40dcrackel/meyersquaredui/examples/EventFencerListExample.vue)。 。 。 .

种子徽章,通过 `:card-props="{ positionSource: 'seed' }"` 改为 `GridLayout` (或 `position-source="seed"` 直接转到 `FencerListCard`) (中文(简体) ). 父母必须排序 以数字表示的已注册栅栏 `Seed`,最后一个或缺失的种子和一个 稳定身份的打结者。 种子徽章保存空白并显示无效的破折号 或缺少种子;它们从未替换池位或行号。 这个 默认徽章行为仍为 Place, 然后是 PoolPosition, 然后是行号 其他页,如最后结果。 等待名单的订单仍归父母所有.

两个列表都接受带有嵌入式的已有事件人物形状 `Person`,或 平地篱笆器物体. 等待名单上的牌点击同样的出牌 `grid-card-click` 带有原始项目的事件. `FencerListCard` 也认识到 `Status: 'WaitList'` 本身,或者可以用 `isWaitlisted`。 。 。 . 等待牌会隐藏出苗/插座徽章. 提供的数组顺序是 保存; UI 不从池位置或评分中推断队列优先级 .

现有公众 `event/public/persons/:eventId` 结束点当前返回 仅登记在册和未登记。 父母必须获得等待名单 单独或从更新的 API 回复中记录; 空等列表道克 这并不意味着API已经检查了等待登记。 留着两个 线程事件页面时的数组分离。 加入候补名单并宣传 围栏仍为母应用程序/后端所有.

故事书包括 `EventFencersWithWaitlist`, (中文(简体) ), `EventFencersWithoutWaitlist`, (中文(简体) ), `WaitlistLoading`,以及 `WaitlistOnly` 下级 `Organisms/Grids/GridLayout`。 。 。 .

## 常见问题

### @dcrackel/meyersquaredui 是什么？

过 weapons 键盘模板或 LeaderboardHeader 显示中 命令,使用 API 对象 Id 财务报告和审定财务报表 Name \(遗产弦也起作用\)\. 前五起事件是作为联系出现的;其余武器出现在“其他武器”中 放下枪 也没有

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

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

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

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

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

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

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

@dcrackel/meyersquaredui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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