Menu
页面视觉风格规范。当需要新建页面、重构页面样式、或确保页面风格一致性时使用此 skill。适用于：(1) 新建 Vue 页面 (2) 重构现有页面样式 (3) 检查页面是否符合设计规范 (4) 统一页面风格
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
电竞经理游戏的数据中心系统。管理选手赛季统计、影响力排行、赛事表现记录、身价变化追踪。当需要修改统计计算、排行榜逻辑、年度评分时使用此技能。
电竞经理游戏的金额单位规范。全项目金额统一以「元」存储和传递，前端使用 formatMoney 系列函数格式化显示。当需要新增金额相关计算、修改身价/薪资/奖金/赞助公式、添加新的金额字段、或排查金额显示异常时使用此技能。
电竞经理游戏的版本更新（Meta）系统。管理20种Meta版本、位置权重、加权战力计算、赛季版本轮换。当需要修改Meta配置、位置权重、战力计算公式、版本轮换规则时使用此技能。
电竞经理游戏的选手系统。管理选手属性、成长曲线、忠诚度、满意度、身价计算。当需要修改选手属性、成长规则、身价公式、忠诚度机制时使用此技能。
电竞经理游戏的时间推进系统。管理赛季阶段、比赛模拟、赛季结算等核心游戏流程。当需要修改游戏进度、阶段推进、比赛模拟逻辑时使用此技能。
电竞经理游戏的选手特性系统。管理14种选手特性的定义、触发条件、修正计算、随机生成、互斥规则。特性影响比赛模拟中选手的ability/stability/condition。当需要修改特性效果、添加新特性、调整触发条件、修改生成规则时使用此技能。
| name | page-style |
| description | 页面视觉风格规范。当需要新建页面、重构页面样式、或确保页面风格一致性时使用此 skill。适用于：(1) 新建 Vue 页面 (2) 重构现有页面样式 (3) 检查页面是否符合设计规范 (4) 统一页面风格 |
EsportManager2 项目的统一页面设计规范。所有数据展示类页面应遵循此规范。
box-shadow: none），用 1px solid #e2e8f0 边框替代stripe）10px，小元素 6px| 用途 | 色值 |
|---|---|
| 主文本 | #0f172a |
| 次文本 | #64748b |
| 辅助文本/表头 | #94a3b8 |
| 占位/空状态 | #cbd5e1 |
| 正文/说明 | #475569 |
| 强调/链接 | #1e293b |
| 主题色/强调 | #6366f1（indigo） |
| 边框 | #e2e8f0 |
| 浅边框/分割线 | #f1f5f9 |
| 悬停背景 | #f8fafc |
| 收入/正向 | #10b981 |
| 支出/负向 | #ef4444 |
| 警告 | #f59e0b |
每个页面从上到下的标准结构：
根容器（padding: 0）
├── 页面标题区 (.page-header)
├── 提示条 (.notice-bar) ← 可选
├── 统计栏 (.stats-bar) ← 可选
├── 筛选区 (.filter-section) ← 可选
└── 内容区 (.table-section 或 el-card)
├── 表格
└── 分页 (.pagination-wrapper)
.page-header { margin-bottom: 20px; }
.page-header h1 {
font-size: 24px; font-weight: 700; color: #0f172a;
margin: 0 0 4px 0; letter-spacing: -0.3px;
}
.page-header p { font-size: 13px; color: #94a3b8; margin: 0; }
模板：
<div class="page-header">
<div>
<h1>页面标题</h1>
<p>页面描述文字</p>
</div>
</div>
如需操作按钮，放在 .page-header 右侧，使用 flex 布局。
左侧带 indigo 边框的提示信息：
.notice-bar {
padding: 10px 16px; background: #f8fafc;
border-left: 3px solid #6366f1; border-radius: 0 8px 8px 0;
font-size: 13px; color: #475569;
margin-bottom: 16px; line-height: 1.6;
}
.notice-bar strong { color: #1e293b; }
水平排列的统计数据条：
.stats-bar {
display: flex; align-items: center;
padding: 14px 24px; background: #ffffff;
border: 1px solid #e2e8f0; border-radius: 10px;
margin-bottom: 12px;
}
.stat-item {
display: flex; align-items: baseline; gap: 6px;
flex: 1; justify-content: center;
}
.stat-value {
font-size: 20px; font-weight: 700; color: #0f172a;
font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 12px; color: #94a3b8; font-weight: 500; }
.stat-divider {
width: 1px; height: 24px; background: #e2e8f0; flex-shrink: 0;
}
语义色修饰符：
.stat-value.highlight → color: #6366f1.stat-value.income → color: #10b981.stat-value.expense → color: #ef4444模板：
<div class="stats-bar">
<div class="stat-item">
<span class="stat-value">123</span>
<span class="stat-label">标签</span>
</div>
<div class="stat-divider"></div>
<!-- 更多 stat-item -->
</div>
无卡片包裹，直接使用 flex 排列：
.filter-section { margin-bottom: 16px; }
.filter-row {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.filter-group {
display: flex; align-items: center; gap: 6px;
}
.filter-group label {
font-size: 12px; color: #94a3b8; font-weight: 500; white-space: nowrap;
}
.table-section {
border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px;
}
通过 :deep() 覆盖 Element Plus 默认样式。表头用类名前缀区分（如 .rankings-table）：
.xxx-table :deep(.el-table th.el-table__cell) {
font-weight: 600; color: #94a3b8; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.5px;
background: transparent; border-bottom: 1px solid #f1f5f9;
padding: 10px 0;
}
.xxx-table :deep(.el-table__body tr) { transition: background-color 0.15s; }
.xxx-table :deep(.el-table__body tr td) {
padding: 12px 0; border-bottom: 1px solid #f8fafc;
}
.xxx-table :deep(.el-table__body tr:hover > td) {
background-color: #f8fafc !important;
}
.xxx-table :deep(.el-table__body tr:last-child td) { border-bottom: none; }
注意：表格不添加 stripe 属性。
.pagination-wrapper {
margin-top: 16px; display: flex; justify-content: center;
}
白底边框按钮，悬停变 indigo：
.detail-btn {
padding: 5px 14px; border: 1px solid #e2e8f0; border-radius: 6px;
background: #ffffff; color: #475569; font-size: 12px;
font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.detail-btn:hover {
border-color: #6366f1; color: #6366f1; background: #f5f3ff;
}
.xxx-dialog :deep(.el-dialog) { border-radius: 12px; overflow: hidden; }
.xxx-dialog :deep(.el-dialog__header) {
border-bottom: 1px solid #f1f5f9; padding: 16px 24px;
}
.xxx-dialog :deep(.el-dialog__title) {
font-weight: 700; font-size: 16px; color: #0f172a;
}
.xxx-dialog :deep(.el-dialog__body) {
max-height: 60vh; overflow-y: auto; padding: 20px 24px;
}
| 属性值范围 | 颜色/类名 |
|---|---|
| 能力 ≥90 | #f59e0b (elite) |
| 能力 80-89 | #3b82f6 (high) |
| 能力 70-79 | #22c55e (medium) |
| 能力 <70 | #94a3b8 (low) |
| 年龄 ≤20 | #22c55e (young) |
| 年龄 21-27 | #0f172a (prime) |
| 年龄 ≥28 | #ef4444 (old) |
| 满意度/忠诚度 ≥80 | #22c55e |
| 满意度/忠诚度 60-79 | #f59e0b |
| 满意度/忠诚度 <60 | #ef4444 |
| 赛区 | Element Plus tag type |
|---|---|
| LPL | danger |
| LCK | primary |
| LEC | success |
| LCS | warning |
@media (max-width: 1200px) {
.stats-bar { flex-wrap: wrap; gap: 8px; }
.stat-divider { display: none; }
.filter-row { flex-direction: column; align-items: stretch; }
}
将旧页面迁移到新风格时，检查以下项：
page-header（linear-gradient），替换为纯文本标题el-card 包裹（如仅用于视觉容器），替换为 .table-section 或 .stats-barstripe 属性box-shadow.stats-bar 横条el-button 详情按钮替换为 .detail-btn 原生按钮<style scoped> 内容Rankings.vue - 积分排名Finance.vue - 财政中心PlayerMarket.vue - 选手合同中心TransferMarketListings.vue - 转会挂牌市场TeamEvaluationCenter.vue - 战队评估中心PlayerEvaluationCenter.vue - 选手评估中心TransferBidAnalysis.vue - 竞价分析Honors.vue - 荣誉殿堂InternationalHall.vue - 国际荣誉殿堂PlayerHonorRankings.vue - 选手荣誉榜TeamHonorRankings.vue - 战队荣誉榜