- 针对已获得授权的 Pokémon 网页、活动页、会员中心、图鉴工具和电商体验，建立一套可落地的 UI 库。v3 在基础控件之上补齐 Team Builder、Evolution Chain、Move Data、Weakness Matrix、Battle Menu、Bag、Event 和 Reward 等产品专属组件。 -
- - -旧版的问题是过度抽象成泛怪兽风。新版以授权 Pokémon 产品为前提，明确使用官方视觉元素，但把它们工程化为可复用的 UI 语言。
-可使用 Pokémon、Poké Ball、Pokédex、官方角色名、类型体系、HP/EXP、Gym Badge 等授权资产语言。
-借用游戏中的状态、收集、队伍、战斗和背包结构，但网页控件必须保持可访问、可扫描、可响应。
-黄色、蓝色、红色用于关键动作和品牌识别；大面积阅读区域仍使用白色、浅蓝灰和明确分割线。
-从按钮、表单、筛选、Tab、弹窗、Toast 到图鉴卡、数据表、页面模板，全部使用同一套 tokens。
-授权场景下可以使用官方元素，但需要把“品牌资产”和“UI 控件”分层管理。Logo 和角色图优先作为内容资产，Poké Ball、类型色、徽章和图鉴框架可以进入组件体系。
-
Fire
- Type System
- 筛选、标签、属性、状态分类
- frontend/public/types/ 中的 Type 图片资产作为筛选、标签、数值、卡片边缘和图表标识；CSS 类型色保留为 token 和兜底。Tokens 要覆盖品牌色、类型色、基础表面、描边、阴影、圆角和组件状态。这里采用 8px 卡片圆角，强调专业网页质感，而不是过度玩具化。
-#FFCB05#2A75BB#003A70#EE1515#202124#F2F5FA
Normal
- 
Fighting
- 
Flying
- 
Poison
- 
Ground
- 
Rock
- 
Bug
- 
Ghost
- 
Steel
- Fire
- 
Water
- 
Grass
- 
Electric
- 
Psychic
- 
Ice
- 
Dragon
- 
Dark
- 
Fairy
- 
Stellar
-
- 横向徽章使用 frontend/public/types/1.png 至 frontend/public/types/19.png；紧凑网格、筛选器、矩阵和卡片内图标使用 frontend/public/types/small/1.png 至 frontend/public/types/small/18.png。文件映射：1 Normal, 2 Fighting, 3 Flying, 4 Poison, 5 Ground, 6 Rock, 7 Bug, 8 Ghost, 9 Steel, 10 Fire, 11 Water, 12 Grass, 13 Electric, 14 Psychic, 15 Ice, 16 Dragon, 17 Dark, 18 Fairy, 19 Stellar.
-
标题使用圆润粗体，正文使用系统无衬线。Pokémon wordmark 只用于品牌展示，不替代正文或按钮文字。
-正文保持 16px 以上，行高 1.55 至 1.7，保证儿童和成人用户都能快速阅读。
- CAPTION / DEX ENTRY -卡片半径 8px，控件半径 8px，Pill 只用于 type chips、HP、status badges。Poké Ball 和头像保持圆形。
-Water
-
- 主 CTA 和游戏化面板可使用硬阴影，普通信息卡使用柔和阴影。阴影不可替代清晰边框。
-控件覆盖按钮、图标按钮、输入、选择、开关、范围、步进器、分段控制、Tabs 和筛选标签。所有控件最小点击高度不低于 44px。
-Base tab 显示编号、分类、身高、体重、能力和基础数值。
-Moves tab 显示 Thunderbolt、Quick Attack、Iron Tail 等技能列表。
-Evolution tab 显示 Pichu → Pikachu → Raichu 的进化路径。
-Electric
- Fire
- Water
- Grass
- Pokémon 产品通常需要承载大量收集、列表、数值和状态。展示组件应优先保证对比和扫描效率，再加入品牌趣味。
-Electric
- Fire / Flying · #006
Water · #007
Psychic · #150
| Dex | -Name | -Type | -Region | -Status | -Action | -
|---|---|---|---|---|---|
#001 |
- Bulbasaur | -Grass |
- Kanto | -Caught | -- |
#004 |
- Charmander | -Fire |
- Kanto | -Seen | -- |
#007 |
- Squirtle | -Water |
- Kanto | -Caught | -- |
v3 新增一组真正贴近 Pokémon 产品场景的组件：搜索联想、进阶 Type 筛选、进化链、技能数据、弱点矩阵、队伍构建、对比面板、战斗菜单、背包、活动和奖励体系。
-
Electric
- Electric
- 用于 Pokédex、Team Builder、Shop search。结果项建议包含编号、名称、分类和 Type badge。
-支持多选、清空、组合筛选和弱点模式。
-Electric
- High friendship
-Electric
- Thunder Stone
-Electric
- Final form
-ElectricMay leave the target with paralysis.
- -
NormalThis move always goes first.
- -
SteelMay lower the target's Defense stat.
- -ElectricThe faster the user, the greater the power.
- -
Ground2x
Rock2x
Ice2x
Fighting0.5x
Flying0.5xSteel0.5x
Bug0.5x
Grass0.5xElectric0.5x
Ghost1x
Dragon1x
Fairy1x雷达图适合详情页摘要；精确对比仍建议使用条形图或 Compare Panel。
-Restores 120 HP to one Pokémon.
Qty 12A high-performance Ball with a better catch rate.
Qty 4Featured Pokémon, bonus candy, limited raid tasks.
-Electric
- Open
- 反馈组件需要清晰表达系统状态。Poké Ball 可以作为提示图标，但错误、成功、等待、解锁仍要配合文字和颜色。
-Pikachu has been added to your Pokédex.
You have 2 slots left. Transfer items before the next battle.
Battle data will retry automatically.
调整类型筛选或搜索其它区域。
-
prefers-reduced-motion，关闭闪烁和持续动画。以下模板把控件组合成可直接落地的页面结构，覆盖图鉴列表、详情页、战斗状态和背包网格。
-Electric
- Fire
- Water
- Grass
- ElectricFireWaterNormalNormalPsychicMouse Pokémon · Electric
-Electric
- HP 35
- 设计稿和前端实现需要以 token 与官方资产目录为唯一来源，避免组件各自写死颜色和尺寸。Logo、角色图、商品图与 Type 图片必须有授权来源和版本记录。
-frontend/public/types/ 图片资产，隐藏文本和 CSS 类型色作为语义与兜底。:root {
- --pokemon-yellow: #ffcb05;
- --pokemon-blue: #2a75bb;
- --pokemon-blue-deep: #003a70;
- --pokemon-red: #ee1515;
- --line-strong: #1f2a3b;
- --radius-card: 8px;
- --radius-control: 8px;
- --shadow-control: 0 3px 0 var(--line-strong);
-}
-
-.btn.primary {
- min-height: 44px;
- border: 2px solid var(--line-strong);
- border-radius: var(--radius-control);
- background: var(--pokemon-yellow);
- color: #172036;
- box-shadow: var(--shadow-control);
-}Potion has been added to your Bag.
-这版 guidelines 默认项目已被允许使用 Pokémon 官方元素。落地时请把 Logo、角色图、商品图等官方素材作为独立资产管理，并在组件层使用 tokens、type 图片资产、Poké Ball、Pokédex、Team、Battle 和 Reward 结构保持一致性。
-官方插画不要直接写进组件 CSS；组件只依赖尺寸、颜色、状态和插槽。
-{{ subtitle }}
-We'll be online within 5 minutes.
- -{{ t('pages.life.reactionsCount', { count: total }) }}
- -{{ loadError }}
- - - -
-
{{ t('pages.legal.lastUpdated') }}
- -- {{ t(sectionKey(page, section.key, paragraphKey)) }} -
- - -
- {{ t('auth.hasAccount') }}
-
{{ subtitle }}
-{{ t(pageMessageKey('body')) }}
-{{ item.text }}
-
- {{ t('auth.noAccount') }}
-
{{ t('errors.loadFailed') }}
- -{{ t('pages.home.subtitle') }}
- -{{ post.body }}
- - - -{{ post.gameVersion.changeLog }}
-- {{ t('pages.life.moderationReason') }} - {{ post.moderationReason }} -
- -{{ ratingErrors[post.id] }}
-{{ moderationErrors[post.id] }}
-{{ reactionErrors[post.id] }}
- -{{ t('discussion.count', { count: commentTotal }) }}
-{{ currentUser ? t('discussion.verifyPrompt') : t('discussion.loginPrompt') }}
-{{ loadError }}
- -{{ comment.body }}
-- {{ t('discussion.moderationReason') }} - {{ comment.moderationReason }} -
- -- {{ commentErrors[likeKey(comment.id)] }} -
-- {{ commentErrors[commentKey(comment.id)] }} -
- - - -{{ reply.body }}
-- {{ t('discussion.moderationReason') }} - {{ reply.moderationReason }} -
-- {{ commentErrors[likeKey(reply.id)] }} -
-- {{ commentErrors[commentKey(reply.id)] }} -
-{{ t('discussion.emptyHint') }}
-\\s*
-
-
-`;
-}
-
-async function sendVerificationEmail(email: string, token: string, locale: string): Promise
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Pokopia
- Wiki
-
- ${safeKicker}
-
-
-
-
-
-
- ${safeFooter}
-
{{ t('pages.profile.joinedAt', { date: formatDate(profile.user.joinedAt) }) }}
-{{ post.body }}
- - - -{{ postExcerpt(activity.post) }}
-{{ comment.body }}
-{{ comment.target.excerpt }}
-{{ item.details }}
- -{{ pokemon.genus }}
- -{{ pokemon.details }}
- -{{ pokemon.image.description }}
-{{ currentUser ? t('pages.life.verifyPrompt') : t('pages.life.loginPrompt') }}
-{{ post.body }}
- - -{{ post.gameVersion.changeLog }}
-- {{ t('pages.life.moderationReason') }} - {{ post.moderationReason }} -
- -{{ ratingErrors[post.id] }}
-{{ moderationErrors[post.id] }}
-{{ reactionErrors[post.id] }}
- -{{ commentPage(post).error }}
- -{{ comment.body }}
-- {{ t('pages.life.moderationReason') }} - {{ comment.moderationReason }} -
- -- {{ commentErrors[likeKey(comment.id)] }} -
-- {{ commentErrors[replyKey(comment.id)] }} -
- - - -{{ reply.body }}
-- {{ t('pages.life.moderationReason') }} - {{ reply.moderationReason }} -
-- {{ commentErrors[likeKey(reply.id)] }} -
-- {{ commentErrors[replyKey(reply.id)] }} -
-{{ t('pages.life.noComments') }}
- -{{ searchQuery ? t('pages.life.searchEmptyHint') : t('pages.life.emptyHint') }}
-
{{ t('pages.life.comments') }}
- {{ commentsTotal }} -{{ commentsError }}
- -{{ comment.body }}
-- {{ t('pages.life.moderationReason') }} - {{ comment.moderationReason }} -
- -- {{ commentErrors[likeKey(comment.id)] }} -
-- {{ commentErrors[replyKey(comment.id)] }} -
- - - -{{ reply.body }}
-- {{ t('pages.life.moderationReason') }} - {{ reply.moderationReason }} -
-- {{ commentErrors[likeKey(reply.id)] }} -
-- {{ commentErrors[replyKey(reply.id)] }} -
-{{ t('pages.life.noComments') }}
- -