feat(editor): 完成英雄配置编辑器全功能开发
本提交新增完整的英雄配置可视化编辑器: 1. 初始化前后端项目结构,配置monorepo工作区 2. 实现后端API服务,支持读取游戏配置、导出hexport.ts文件 3. 开发前端Vue应用,包含完整的英雄增删改、属性配置、技能编辑功能 4. 实现多类型编辑器组件:基础属性、普攻/大招编辑、触发技能、光环、复活、属性加成等 5. 清理冗余的配置元数据文件
This commit is contained in:
137
put/web/src/style.css
Normal file
137
put/web/src/style.css
Normal file
@@ -0,0 +1,137 @@
|
||||
:root {
|
||||
--brand: #4a90e2;
|
||||
--brand-light: #7fb3f0;
|
||||
--bg: #f5f9ff;
|
||||
--panel: #ffffff;
|
||||
--border: #e3ecf7;
|
||||
--text: #2c3e50;
|
||||
--text-light: #7a8ba0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body, #app { height: 100%; margin: 0; }
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.hero-app {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-header {
|
||||
background: linear-gradient(135deg, #6fb1ff 0%, #4a90e2 100%);
|
||||
color: #fff;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.25);
|
||||
}
|
||||
.hero-header h1 { font-size: 18px; margin: 0; font-weight: 600; }
|
||||
.hero-header .actions { display: flex; gap: 8px; }
|
||||
|
||||
.hero-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-sidebar {
|
||||
width: 260px;
|
||||
background: var(--panel);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.hero-sidebar .side-head {
|
||||
padding: 12px 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.hero-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 6px;
|
||||
}
|
||||
.hero-item {
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.hero-item:hover { background: #eef5ff; }
|
||||
.hero-item.active { background: #d6e8ff; color: var(--brand); font-weight: 600; }
|
||||
.hero-item .meta { font-size: 12px; color: var(--text-light); }
|
||||
|
||||
.hero-editor {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px 40px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--panel);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 14px;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 1px 3px rgba(46, 91, 160, 0.05);
|
||||
}
|
||||
.panel h3 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 14px;
|
||||
color: var(--brand);
|
||||
border-left: 3px solid var(--brand);
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 10px 18px;
|
||||
}
|
||||
|
||||
.muted { color: var(--text-light); font-size: 12px; }
|
||||
|
||||
.skill-block {
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
background: #fbfdff;
|
||||
}
|
||||
.skill-block .head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.override-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 8px 12px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--text-light);
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-sidebar { width: 200px; }
|
||||
}
|
||||
Reference in New Issue
Block a user