Menu
页面视觉风格规范。当需要新建页面、重构页面样式、或确保页面风格一致性时使用此 skill。适用于：(1) 新建 Vue 页面 (2) 重构现有页面样式 (3) 检查页面是否符合设计规范 (4) 统一页面风格
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
| 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 - 战队荣誉榜电竞经理游戏的数据中心系统。管理选手赛季统计、影响力排行、赛事表现记录、身价变化追踪。当需要修改统计计算、排行榜逻辑、年度评分时使用此技能。
电竞经理游戏的金额单位规范。全项目金额统一以「元」存储和传递，前端使用 formatMoney 系列函数格式化显示。当需要新增金额相关计算、修改身价/薪资/奖金/赞助公式、添加新的金额字段、或排查金额显示异常时使用此技能。
电竞经理游戏的版本更新（Meta）系统。管理20种Meta版本、位置权重、加权战力计算、赛季版本轮换。当需要修改Meta配置、位置权重、战力计算公式、版本轮换规则时使用此技能。
电竞经理游戏的选手系统。管理选手属性、成长曲线、忠诚度、满意度、身价计算。当需要修改选手属性、成长规则、身价公式、忠诚度机制时使用此技能。
电竞经理游戏的时间推进系统。管理赛季阶段、比赛模拟、赛季结算等核心游戏流程。当需要修改游戏进度、阶段推进、比赛模拟逻辑时使用此技能。
电竞经理游戏的选手特性系统。管理14种选手特性的定义、触发条件、修正计算、随机生成、互斥规则。特性影响比赛模拟中选手的ability/stability/condition。当需要修改特性效果、添加新特性、调整触发条件、修改生成规则时使用此技能。