需求改了好多，不需要自己输用户名和qq号了
This commit is contained in:
parent
66efa6c310
commit
93f42d3d9b
500
src/assets/styles/weapon.css
Normal file
500
src/assets/styles/weapon.css
Normal file
@ -0,0 +1,500 @@
|
||||
/* 武器工具集样式 */
|
||||
.weapon-match-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.tab-navigation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 12px 24px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 通用内容卡片样式 */
|
||||
.content-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-header i {
|
||||
margin-right: 12px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.table-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.result-table,
|
||||
.weapon-table,
|
||||
.comparison-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.result-table th,
|
||||
.result-table td,
|
||||
.weapon-table th,
|
||||
.weapon-table td,
|
||||
.comparison-table th,
|
||||
.comparison-table td {
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.result-table th,
|
||||
.weapon-table th,
|
||||
.comparison-table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.result-table tr:hover,
|
||||
.weapon-table tr:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.action-btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.action-btn.danger {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.danger:hover {
|
||||
background: #c82333;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
padding: 10px 20px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.tool-btn:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.tool-btn.active {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.small-btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.small-btn:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.small-btn.danger {
|
||||
color: #dc3545;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.small-btn.danger:hover {
|
||||
background: #fff5f5;
|
||||
}
|
||||
|
||||
/* 输入框样式 */
|
||||
.file-input,
|
||||
.detail-input,
|
||||
.search-input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.file-input:focus,
|
||||
.detail-input:focus,
|
||||
.search-input:focus {
|
||||
border-color: #667eea;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
/* 复选框样式 */
|
||||
.checkbox-wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-wrapper input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: white;
|
||||
border: 2px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.checkbox-wrapper input:checked ~ .checkmark {
|
||||
background: #667eea;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.checkbox-wrapper input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 标签样式 */
|
||||
.template-tag,
|
||||
.attribute-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: #e7f3ff;
|
||||
color: #1c7ed6;
|
||||
padding: 4px 12px;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.template-tag:hover,
|
||||
.attribute-tag:hover {
|
||||
background: #d0ebff;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty-state {
|
||||
padding: 60px 30px;
|
||||
text-align: center;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 64px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty-state.small {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.empty-state.small i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-state.small p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 对比结果样式 */
|
||||
.attr-name {
|
||||
font-weight: 600;
|
||||
background: #f8f9fa !important;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.has-value {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.no-value {
|
||||
background: #fff2f0;
|
||||
color: #cf1322;
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 8px 16px;
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.page-btn:hover:not(:disabled) {
|
||||
border-color: #667eea;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 14px;
|
||||
color: #6c757d;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.weapon-match-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.tab-navigation {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
width: 200px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.action-btn,
|
||||
.tool-btn {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.result-table th,
|
||||
.result-table td,
|
||||
.weapon-table th,
|
||||
.weapon-table td,
|
||||
.comparison-table th,
|
||||
.comparison-table td {
|
||||
padding: 12px 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.weapon-match-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.action-btn,
|
||||
.tool-btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.result-table th,
|
||||
.result-table td,
|
||||
.weapon-table th,
|
||||
.weapon-table td,
|
||||
.comparison-table th,
|
||||
.comparison-table td {
|
||||
padding: 8px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.template-tag,
|
||||
.attribute-tag {
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 30px 15px;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
925
src/components/weapon/ObjectEditor.vue
Normal file
925
src/components/weapon/ObjectEditor.vue
Normal file
@ -0,0 +1,925 @@
|
||||
<template>
|
||||
<div class="object-editor">
|
||||
<div class="table-container">
|
||||
<div class="section-header">
|
||||
<h2>物体编辑器</h2>
|
||||
</div>
|
||||
|
||||
<!-- 文件控制区 -->
|
||||
<div class="file-controls">
|
||||
<div class="file-input-group">
|
||||
<div class="file-input-item">
|
||||
<label class="file-label">
|
||||
<i class="icon-upload"></i>
|
||||
加载单位.xml
|
||||
<input type="file" @change="handleUnitFile" accept=".xml" class="file-input">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file-input-item">
|
||||
<label class="file-label">
|
||||
<i class="icon-upload"></i>
|
||||
加载Weapon.xml
|
||||
<input type="file" @change="handleWeaponFile" accept=".xml" class="file-input">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="unitDoc"
|
||||
@click="exportUnitXml"
|
||||
class="export-btn"
|
||||
>
|
||||
<i class="icon-export"></i>
|
||||
导出XML
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑器主体 -->
|
||||
<div v-if="unitDoc" class="editor-main">
|
||||
<!-- 单位列表 -->
|
||||
<div class="unit-list">
|
||||
<div class="list-header">
|
||||
<h3>GameObject 列表</h3>
|
||||
</div>
|
||||
<div class="list-content">
|
||||
<div
|
||||
v-for="gameObject in unitDoc.querySelectorAll('GameObject')"
|
||||
:key="gameObject.getAttribute('id')"
|
||||
class="unit-item"
|
||||
:class="{ selected: selectedGameObject === gameObject }"
|
||||
@click="selectGameObject(gameObject)"
|
||||
>
|
||||
<i class="icon-unit"></i>
|
||||
{{ gameObject.getAttribute('id') || '未命名单位' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情面板 -->
|
||||
<div v-if="selectedGameObject" class="details-panel">
|
||||
<div class="panel-header">
|
||||
<h3>单位详细信息</h3>
|
||||
</div>
|
||||
|
||||
<div class="panel-content">
|
||||
<!-- ID 面板 -->
|
||||
<div class="detail-row">
|
||||
<label class="detail-label">ID:</label>
|
||||
<input
|
||||
class="detail-input"
|
||||
v-model="editableFields.id"
|
||||
@change="updateGameObject"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- CSF 面板 -->
|
||||
<div class="detail-group">
|
||||
<div class="group-header" @click="toggleGroup('csf')">
|
||||
<span>CSF相关描述</span>
|
||||
<i :class="['toggle-icon', isGroupOpen('csf') ? 'icon-minus' : 'icon-plus']"></i>
|
||||
</div>
|
||||
<div v-if="isGroupOpen('csf')" class="group-content">
|
||||
<div class="detail-row">
|
||||
<label class="detail-label">DisplayName:</label>
|
||||
<input
|
||||
class="detail-input"
|
||||
v-model="editableFields.displayName"
|
||||
@change="updateDisplayName"
|
||||
>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<label class="detail-label">TypeDescription:</label>
|
||||
<input
|
||||
class="detail-input"
|
||||
v-model="editableFields.typeDescription"
|
||||
@change="updateGameObject"
|
||||
>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<label class="detail-label">Description:</label>
|
||||
<input
|
||||
class="detail-input"
|
||||
v-model="editableFields.description"
|
||||
@change="updateGameObject"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 建造时间面板 -->
|
||||
<div class="detail-row">
|
||||
<label class="detail-label">建造时间:</label>
|
||||
<div class="input-with-suffix">
|
||||
<input
|
||||
class="detail-input"
|
||||
v-model="editableFields.buildTime"
|
||||
@change="updateGameObject"
|
||||
type="number"
|
||||
>
|
||||
<span class="suffix">秒</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 科技需求面板 -->
|
||||
<div class="detail-group">
|
||||
<div class="group-header" @click="toggleGroup('tech')">
|
||||
<span>科技需求</span>
|
||||
<i :class="['toggle-icon', isGroupOpen('tech') ? 'icon-minus' : 'icon-plus']"></i>
|
||||
</div>
|
||||
<div v-if="isGroupOpen('tech')" class="group-content">
|
||||
<div class="detail-row">
|
||||
<label class="detail-label">NeededUpgrade:</label>
|
||||
<input
|
||||
class="detail-input"
|
||||
v-model="editableFields.neededUpgrade"
|
||||
@change="updateNeededUpgrade"
|
||||
>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<label class="detail-label">建造数量上限:</label>
|
||||
<input
|
||||
class="detail-input"
|
||||
v-model="editableFields.maxSimultaneous"
|
||||
@change="updateGameObject"
|
||||
type="number"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 造价和生命值面板 -->
|
||||
<div class="detail-group">
|
||||
<div class="group-header" @click="toggleGroup('costHealth')">
|
||||
<span>造价与生命值</span>
|
||||
<i :class="['toggle-icon', isGroupOpen('costHealth') ? 'icon-minus' : 'icon-plus']"></i>
|
||||
</div>
|
||||
<div v-if="isGroupOpen('costHealth')" class="group-content">
|
||||
<div class="detail-row">
|
||||
<label class="detail-label">造价:</label>
|
||||
<input
|
||||
class="detail-input"
|
||||
v-model="editableFields.buildCost"
|
||||
@change="updateBuildCost"
|
||||
type="number"
|
||||
>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<label class="detail-label">生命值:</label>
|
||||
<input
|
||||
class="detail-input"
|
||||
v-model="editableFields.maxHealth"
|
||||
@change="updateMaxHealth"
|
||||
type="number"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 武器射程面板 -->
|
||||
<div class="detail-group">
|
||||
<div class="group-header" @click="toggleGroup('range')">
|
||||
<span>武器射程</span>
|
||||
<i :class="['toggle-icon', isGroupOpen('range') ? 'icon-minus' : 'icon-plus']"></i>
|
||||
</div>
|
||||
<div v-if="isGroupOpen('range')" class="group-content">
|
||||
<div v-if="weaponData.length === 0" class="empty-weapons">
|
||||
<i class="icon-empty"></i>
|
||||
<span>无武器数据</span>
|
||||
</div>
|
||||
<div v-else class="weapon-list">
|
||||
<div
|
||||
v-for="(weapon, index) in weaponData"
|
||||
:key="index"
|
||||
class="weapon-item"
|
||||
>
|
||||
<div class="weapon-header">
|
||||
<strong>武器 {{ index + 1 }} ({{ weapon.id }})</strong>
|
||||
</div>
|
||||
<div class="weapon-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">攻击范围:</span>
|
||||
<span class="stat-value">{{ weapon.attackRange || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">最小射程:</span>
|
||||
<span class="stat-value">{{ weapon.minAttackRange || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">伤害值:</span>
|
||||
<span class="stat-value">{{ weapon.Damage || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">伤害范围:</span>
|
||||
<span class="stat-value">{{ weapon.Radius || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="empty-state">
|
||||
<i class="icon-empty"></i>
|
||||
<p>请加载单位 XML 文件开始编辑</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const weaponXmlData = ref(null)
|
||||
const weaponData = ref([])
|
||||
const selectedGameObject = ref(null)
|
||||
const unitDoc = ref(null)
|
||||
const openGroups = ref(['csf', 'tech', 'costHealth'])
|
||||
const editableFields = ref({
|
||||
id: '',
|
||||
displayName: '',
|
||||
typeDescription: '',
|
||||
description: '',
|
||||
buildTime: '',
|
||||
neededUpgrade: '',
|
||||
maxSimultaneous: '',
|
||||
buildCost: '',
|
||||
maxHealth: ''
|
||||
})
|
||||
|
||||
const selectGameObject = (gameObject) => {
|
||||
selectedGameObject.value = gameObject
|
||||
updateEditableFields()
|
||||
updateWeaponData()
|
||||
}
|
||||
|
||||
const updateEditableFields = () => {
|
||||
if (!selectedGameObject.value) return
|
||||
|
||||
editableFields.value = {
|
||||
id: selectedGameObject.value.getAttribute('id') || '',
|
||||
displayName: extractDisplayName(selectedGameObject.value) || '',
|
||||
typeDescription: selectedGameObject.value.getAttribute('TypeDescription') || '',
|
||||
description: selectedGameObject.value.getAttribute('Description') || '',
|
||||
buildTime: selectedGameObject.value.getAttribute('BuildTime') || '',
|
||||
neededUpgrade: getNeededUpgrade(selectedGameObject.value) || '',
|
||||
maxSimultaneous: selectedGameObject.value.getAttribute('MaxSimultaneousOfType') || '',
|
||||
buildCost: getBuildCost(selectedGameObject.value) || '',
|
||||
maxHealth: getMaxHealth(selectedGameObject.value) || ''
|
||||
}
|
||||
}
|
||||
|
||||
const updateGameObject = () => {
|
||||
if (!selectedGameObject.value) return
|
||||
|
||||
selectedGameObject.value.setAttribute('id', editableFields.value.id)
|
||||
selectedGameObject.value.setAttribute('TypeDescription', editableFields.value.typeDescription)
|
||||
selectedGameObject.value.setAttribute('Description', editableFields.value.description)
|
||||
selectedGameObject.value.setAttribute('BuildTime', editableFields.value.buildTime)
|
||||
selectedGameObject.value.setAttribute('MaxSimultaneousOfType', editableFields.value.maxSimultaneous)
|
||||
}
|
||||
|
||||
const updateDisplayName = () => {
|
||||
if (!selectedGameObject.value) return
|
||||
|
||||
let displayNameNode = selectedGameObject.value.querySelector('DisplayName')
|
||||
if (!displayNameNode) {
|
||||
displayNameNode = unitDoc.value.createElement('DisplayName')
|
||||
selectedGameObject.value.appendChild(displayNameNode)
|
||||
}
|
||||
displayNameNode.textContent = editableFields.value.displayName
|
||||
}
|
||||
|
||||
const updateNeededUpgrade = () => {
|
||||
if (!selectedGameObject.value) return
|
||||
|
||||
let gameDependency = selectedGameObject.value.querySelector('GameDependency')
|
||||
if (!gameDependency) {
|
||||
gameDependency = unitDoc.value.createElement('GameDependency')
|
||||
selectedGameObject.value.appendChild(gameDependency)
|
||||
}
|
||||
gameDependency.setAttribute('NeededUpgrade', editableFields.value.neededUpgrade)
|
||||
}
|
||||
|
||||
const updateBuildCost = () => {
|
||||
if (!selectedGameObject.value) return
|
||||
|
||||
let resourceInfo = selectedGameObject.value.querySelector('ObjectResourceInfo')
|
||||
if (!resourceInfo) {
|
||||
resourceInfo = unitDoc.value.createElement('ObjectResourceInfo')
|
||||
selectedGameObject.value.appendChild(resourceInfo)
|
||||
}
|
||||
|
||||
let buildCost = resourceInfo.querySelector('BuildCost')
|
||||
if (!buildCost) {
|
||||
buildCost = unitDoc.value.createElement('BuildCost')
|
||||
resourceInfo.appendChild(buildCost)
|
||||
}
|
||||
buildCost.setAttribute('Amount', editableFields.value.buildCost)
|
||||
}
|
||||
|
||||
const updateMaxHealth = () => {
|
||||
if (!selectedGameObject.value) return
|
||||
|
||||
let body = selectedGameObject.value.querySelector('Body')
|
||||
if (!body) {
|
||||
body = unitDoc.value.createElement('Body')
|
||||
selectedGameObject.value.appendChild(body)
|
||||
}
|
||||
|
||||
let activeBody = body.querySelector('ActiveBody')
|
||||
if (!activeBody) {
|
||||
activeBody = unitDoc.value.createElement('ActiveBody')
|
||||
body.appendChild(activeBody)
|
||||
}
|
||||
activeBody.setAttribute('MaxHealth', editableFields.value.maxHealth)
|
||||
}
|
||||
|
||||
const exportUnitXml = () => {
|
||||
if (!unitDoc.value || !selectedGameObject.value) return
|
||||
|
||||
const serializer = new XMLSerializer()
|
||||
const unitId = selectedGameObject.value.getAttribute('id') || 'unit'
|
||||
|
||||
// 1. 导出主单位文件
|
||||
const unitXmlString = serializer.serializeToString(unitDoc.value)
|
||||
downloadFile(`${unitId}.xml`, unitXmlString)
|
||||
|
||||
// 2. 创建符合规范的config.xml
|
||||
const configXml = document.implementation.createDocument("uri:ea.com:eala:asset", "AssetDeclaration")
|
||||
const xmlDeclaration = '<?xml version="1.0" encoding="utf-8" ?>'
|
||||
|
||||
// 添加基本结构
|
||||
const tags = configXml.createElement("Tags")
|
||||
configXml.documentElement.appendChild(tags)
|
||||
|
||||
const includes = configXml.createElement("Includes")
|
||||
const include = configXml.createElement("Include")
|
||||
include.setAttribute("type", "all")
|
||||
include.setAttribute("source", "DATA:GlobalData/GlobalDefines.xml")
|
||||
includes.appendChild(include)
|
||||
configXml.documentElement.appendChild(includes)
|
||||
|
||||
const defines = configXml.createElement("Defines")
|
||||
const define1 = configXml.createElement("Define")
|
||||
define1.setAttribute("name", "FACTION_WEAPON_SECONDARY_DAMAGE_AMOUNT")
|
||||
define1.setAttribute("value", "-500.0")
|
||||
defines.appendChild(define1)
|
||||
|
||||
const define2 = configXml.createElement("Define")
|
||||
define2.setAttribute("name", "EMPERORS_RESOLVE_AFFECTS")
|
||||
define2.setAttribute("value", "ALLIES NEUTRALS ENEMIES")
|
||||
defines.appendChild(define2)
|
||||
configXml.documentElement.appendChild(defines)
|
||||
|
||||
// 添加武器模板
|
||||
if (weaponData.value.length > 0 && weaponXmlData.value) {
|
||||
weaponData.value.forEach(weapon => {
|
||||
const weaponTemplate = weaponXmlData.value.querySelector(`WeaponTemplate[id="${weapon.id}"]`)
|
||||
if (weaponTemplate) {
|
||||
const newWeaponTemplate = configXml.createElement("WeaponTemplate")
|
||||
|
||||
Array.from(weaponTemplate.attributes).forEach(attr => {
|
||||
newWeaponTemplate.setAttribute(attr.name, attr.value)
|
||||
})
|
||||
|
||||
Array.from(weaponTemplate.children).forEach(child => {
|
||||
const newChild = configXml.createElement(child.tagName)
|
||||
|
||||
Array.from(child.attributes).forEach(attr => {
|
||||
newChild.setAttribute(attr.name, attr.value)
|
||||
})
|
||||
|
||||
if (child.textContent.trim()) {
|
||||
newChild.textContent = child.textContent
|
||||
}
|
||||
|
||||
if (child.tagName === 'Nuggets') {
|
||||
Array.from(child.children).forEach(nugget => {
|
||||
const newNugget = configXml.createElement(nugget.tagName)
|
||||
|
||||
Array.from(nugget.attributes).forEach(attr => {
|
||||
newNugget.setAttribute(attr.name, attr.value)
|
||||
})
|
||||
|
||||
newChild.appendChild(newNugget)
|
||||
})
|
||||
}
|
||||
|
||||
newWeaponTemplate.appendChild(newChild)
|
||||
})
|
||||
|
||||
configXml.documentElement.appendChild(newWeaponTemplate)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let configXmlString = serializer.serializeToString(configXml)
|
||||
configXmlString = xmlDeclaration + '\n' + formatXml(configXmlString)
|
||||
|
||||
setTimeout(() => {
|
||||
downloadFile('config.xml', configXmlString)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const formatXml = (xml) => {
|
||||
const PADDING = ' '
|
||||
const reg = /(>)(<)(\/*)/g
|
||||
let formatted = ''
|
||||
let pad = 0
|
||||
|
||||
xml = xml.replace(reg, '$1\r\n$2$3')
|
||||
|
||||
xml.split('\r\n').forEach(node => {
|
||||
let indent = 0
|
||||
if (node.match(/.+<\/\w[^>]*>$/)) {
|
||||
indent = 0
|
||||
} else if (node.match(/^<\/\w/)) {
|
||||
if (pad !== 0) pad -= 1
|
||||
} else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
|
||||
indent = 1
|
||||
} else {
|
||||
indent = 0
|
||||
}
|
||||
|
||||
formatted += PADDING.repeat(pad) + node + '\r\n'
|
||||
pad += indent
|
||||
})
|
||||
|
||||
return formatted
|
||||
}
|
||||
|
||||
const downloadFile = (filename, content) => {
|
||||
const blob = new Blob([content], { type: 'text/xml' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = filename
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
setTimeout(() => URL.revokeObjectURL(url), 1000)
|
||||
}
|
||||
|
||||
const toggleGroup = (groupName) => {
|
||||
if (openGroups.value.includes(groupName)) {
|
||||
openGroups.value = openGroups.value.filter(g => g !== groupName)
|
||||
} else {
|
||||
openGroups.value.push(groupName)
|
||||
}
|
||||
}
|
||||
|
||||
const isGroupOpen = (groupName) => {
|
||||
return openGroups.value.includes(groupName)
|
||||
}
|
||||
|
||||
const extractDisplayName = (gameObject) => {
|
||||
const displayNameNode = gameObject.querySelector('DisplayName')
|
||||
return displayNameNode ? displayNameNode.textContent.trim() : null
|
||||
}
|
||||
|
||||
const getNeededUpgrade = (gameObject) => {
|
||||
const gameDependency = gameObject.querySelector('GameDependency')
|
||||
return gameDependency ? gameDependency.getAttribute('NeededUpgrade') : null
|
||||
}
|
||||
|
||||
const getBuildCost = (gameObject) => {
|
||||
const resourceInfo = gameObject.querySelector('ObjectResourceInfo')
|
||||
if (!resourceInfo) return null
|
||||
|
||||
const buildCost = resourceInfo.querySelector('BuildCost')
|
||||
if (!buildCost) return null
|
||||
|
||||
return buildCost.getAttribute('Amount')
|
||||
}
|
||||
|
||||
const getMaxHealth = (gameObject) => {
|
||||
const body = gameObject.querySelector('Body')
|
||||
if (!body) return null
|
||||
|
||||
const activeBody = body.querySelector('ActiveBody')
|
||||
if (!activeBody) return null
|
||||
|
||||
return activeBody.getAttribute('MaxHealth')
|
||||
}
|
||||
|
||||
const updateWeaponData = () => {
|
||||
if (!selectedGameObject.value || !weaponXmlData.value) {
|
||||
weaponData.value = []
|
||||
return
|
||||
}
|
||||
|
||||
const weapons = []
|
||||
const slotNames = ['WeaponSlotHardpoint', 'WeaponSlotTurret', 'WeaponSlotHierarchicalTurret', 'WeaponSlotContained']
|
||||
|
||||
slotNames.forEach(slotName => {
|
||||
const weaponNodes = selectedGameObject.value.querySelectorAll(`Behaviors > WeaponSetUpdate > ${slotName} > Weapon`)
|
||||
weaponNodes.forEach(weaponNode => {
|
||||
const templateId = weaponNode.getAttribute('Template')
|
||||
if (templateId) {
|
||||
const weaponTemplate = weaponXmlData.value.querySelector(`WeaponTemplate[id="${templateId}"]`)
|
||||
if (weaponTemplate) {
|
||||
const attackRange = weaponTemplate.getAttribute('AttackRange')
|
||||
const minAttackRange = weaponTemplate.getAttribute('MinimumAttackRange')
|
||||
|
||||
let Radius = 0
|
||||
let Damage = 0
|
||||
const damageNugget = weaponTemplate.querySelector('Nuggets > DamageNugget')
|
||||
if (damageNugget) {
|
||||
Radius = damageNugget.getAttribute('Radius') || 0
|
||||
Damage = damageNugget.getAttribute('Damage') || 0
|
||||
}
|
||||
|
||||
weapons.push({
|
||||
id: templateId,
|
||||
attackRange,
|
||||
minAttackRange,
|
||||
Damage,
|
||||
Radius
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
weaponData.value = weapons
|
||||
}
|
||||
|
||||
const handleWeaponFile = (e) => {
|
||||
const file = e.target.files[0]
|
||||
if (!file) return
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
const parser = new DOMParser()
|
||||
weaponXmlData.value = parser.parseFromString(reader.result, 'text/xml')
|
||||
updateWeaponData()
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
|
||||
const handleUnitFile = (e) => {
|
||||
const file = e.target.files[0]
|
||||
if (!file) return
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
const parser = new DOMParser()
|
||||
unitDoc.value = parser.parseFromString(reader.result, 'text/xml')
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.object-editor {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1a237e;
|
||||
}
|
||||
|
||||
.file-controls {
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.file-input-group {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file-input-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-label {
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-label:hover {
|
||||
border-color: #1a237e;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
padding: 10px 20px;
|
||||
background: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.export-btn:hover {
|
||||
background: #218838;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.editor-main {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.unit-list {
|
||||
border-right: 1px solid #f0f0f0;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.list-header h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
padding: 8px 0;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.unit-item {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-left: 3px solid transparent;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.unit-item:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.unit-item.selected {
|
||||
background: #e3f2fd;
|
||||
border-left-color: #1a237e;
|
||||
color: #1a237e;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.details-panel {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 16px 20px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.panel-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 20px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
min-width: 120px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.detail-input:focus {
|
||||
border-color: #1a237e;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.1);
|
||||
}
|
||||
|
||||
.input-with-suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.suffix {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-group {
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.group-header {
|
||||
padding: 12px 16px;
|
||||
background: #f8f9fa;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background-color 0.2s ease;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.group-header:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.group-content {
|
||||
padding: 16px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-weapons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.weapon-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.weapon-item {
|
||||
padding: 16px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.weapon-header {
|
||||
margin-bottom: 12px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.weapon-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 60px 40px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.editor-main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.unit-list {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.file-input-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
min-width: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.weapon-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
396
src/components/weapon/TemplateMatch.vue
Normal file
396
src/components/weapon/TemplateMatch.vue
Normal file
@ -0,0 +1,396 @@
|
||||
<template>
|
||||
<div class="template-match">
|
||||
<div class="table-container">
|
||||
<div class="section-header">
|
||||
<h2>WeaponTemplate 匹配到单位 GameObject</h2>
|
||||
</div>
|
||||
|
||||
<!-- 文件上传区 -->
|
||||
<div class="upload-section">
|
||||
<div class="upload-card">
|
||||
<div class="upload-header">
|
||||
<i class="icon-upload"></i>
|
||||
<h3>上传 Weapon.xml</h3>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
@change="handleWeaponFile"
|
||||
accept=".xml"
|
||||
class="file-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="upload-card">
|
||||
<div class="upload-header">
|
||||
<i class="icon-upload"></i>
|
||||
<h3>上传单位 XML</h3>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
@change="handleUnitFile"
|
||||
accept=".xml"
|
||||
class="file-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 匹配结果 -->
|
||||
<div v-if="resultList.length" class="result-section">
|
||||
<div class="result-header">
|
||||
<h3>匹配结果</h3>
|
||||
<button
|
||||
@click="autoSelectMatched"
|
||||
class="action-btn primary"
|
||||
>
|
||||
<i class="icon-auto-select"></i>
|
||||
自动选择匹配项
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="result-table-container">
|
||||
<table class="result-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>GameObject ID</th>
|
||||
<th>匹配到的 WeaponTemplate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in resultList" :key="index">
|
||||
<td class="object-id">{{ item.id }}</td>
|
||||
<td class="templates">
|
||||
<span v-if="item.templates && item.templates.length > 0" class="template-list">
|
||||
<span
|
||||
v-for="template in item.templates"
|
||||
:key="template"
|
||||
class="template-tag"
|
||||
>
|
||||
{{ template }}
|
||||
</span>
|
||||
</span>
|
||||
<span v-else class="no-match">None</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="empty-state">
|
||||
<i class="icon-empty"></i>
|
||||
<p>请上传 Weapon.xml 和单位 XML 文件以开始匹配</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const emit = defineEmits(['switch-tab'])
|
||||
|
||||
const resultList = ref([])
|
||||
const weaponTemplateIds = ref(new Set())
|
||||
const unitDoc = ref(null)
|
||||
|
||||
const handleWeaponFile = (e) => {
|
||||
const file = e.target.files[0]
|
||||
if (!file) return
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
parseWeaponFile(reader.result)
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
|
||||
const handleUnitFile = (e) => {
|
||||
const file = e.target.files[0]
|
||||
if (!file) return
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
const parser = new DOMParser()
|
||||
unitDoc.value = parser.parseFromString(reader.result, 'text/xml')
|
||||
tryMatchAndDisplay()
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
|
||||
const parseWeaponFile = (fileContent) => {
|
||||
const parser = new DOMParser()
|
||||
const xml = parser.parseFromString(fileContent, 'text/xml')
|
||||
const templates = xml.querySelectorAll('WeaponTemplate')
|
||||
|
||||
weaponTemplateIds.value = new Set(
|
||||
Array.from(templates).map(t => t.getAttribute('id')).filter(Boolean)
|
||||
)
|
||||
|
||||
// 存储到 localStorage
|
||||
localStorage.setItem('weaponXml', fileContent)
|
||||
|
||||
tryMatchAndDisplay()
|
||||
}
|
||||
|
||||
const tryMatchAndDisplay = () => {
|
||||
if (!unitDoc.value || weaponTemplateIds.value.size === 0) return
|
||||
|
||||
resultList.value = []
|
||||
const gameObjects = unitDoc.value.querySelectorAll('GameObject')
|
||||
|
||||
gameObjects.forEach(go => {
|
||||
const goId = go.getAttribute('id') || '(无 ID)'
|
||||
const matchedTemplates = new Set()
|
||||
|
||||
const slotNames = ['WeaponSlotHardpoint', 'WeaponSlotTurret', 'WeaponSlotHierarchicalTurret', 'WeaponSlotContained']
|
||||
|
||||
for (const slotName of slotNames) {
|
||||
const weapons = go.querySelectorAll(`Behaviors > WeaponSetUpdate > ${slotName} > Weapon`)
|
||||
weapons.forEach(w => {
|
||||
const tmpl = w.getAttribute('Template')
|
||||
if (tmpl && weaponTemplateIds.value.has(tmpl)) {
|
||||
matchedTemplates.add(tmpl)
|
||||
}
|
||||
})
|
||||
if (matchedTemplates.size) break
|
||||
}
|
||||
|
||||
resultList.value.push({
|
||||
id: goId,
|
||||
templates: Array.from(matchedTemplates)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const autoSelectMatched = () => {
|
||||
const allMatchedTemplates = new Set()
|
||||
resultList.value.forEach(item => {
|
||||
if (item.templates && item.templates.length > 0) {
|
||||
item.templates.forEach(t => allMatchedTemplates.add(t))
|
||||
}
|
||||
})
|
||||
|
||||
// 将匹配的模板存储起来，供对比页面使用
|
||||
localStorage.setItem('selectedWeaponIds', JSON.stringify(Array.from(allMatchedTemplates)))
|
||||
|
||||
// 切换到对比页面
|
||||
emit('switch-tab', 'compare')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.template-match {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1a237e;
|
||||
}
|
||||
|
||||
.upload-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.upload-card {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.upload-card:hover {
|
||||
border-color: #1a237e;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.upload-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.upload-header i {
|
||||
font-size: 24px;
|
||||
color: #1a237e;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-header h3 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.file-input:hover {
|
||||
border-color: #1a237e;
|
||||
}
|
||||
|
||||
.result-section {
|
||||
padding: 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.result-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: #1a237e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.primary:hover {
|
||||
background: #0d47a1;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.result-table-container {
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.result-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.result-table th,
|
||||
.result-table td {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.result-table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #1a237e;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.result-table tr:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.result-table td {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.object-id {
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.template-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.template-tag {
|
||||
background: #e3f2fd;
|
||||
color: #1a237e;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.no-match {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.upload-section {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.result-header {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.template-list {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1128
src/components/weapon/WeaponCompare.vue
Normal file
1128
src/components/weapon/WeaponCompare.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -47,7 +47,7 @@ const routes = [
|
||||
{
|
||||
path: 'weapon-match',
|
||||
name: 'WeaponMatch',
|
||||
component: () => import('@/views/index/WeaponMatch.vue'),
|
||||
component: () => import('@/views/weapon/WeaponMatch.vue'),
|
||||
meta: { requiresAuth: true, requiredPrivilege: ['lv-admin','lv-mod'] }
|
||||
},
|
||||
{
|
||||
|
||||
147
src/views/weapon/WeaponMatch.vue
Normal file
147
src/views/weapon/WeaponMatch.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="weapon-match">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h1>武器工具集</h1>
|
||||
<div class="header-subtitle">
|
||||
<span>武器模板匹配、对比分析与单位编辑</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能导航 -->
|
||||
<div class="action-bar">
|
||||
<div class="nav-tabs">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
:class="['tab-btn', { active: activeTab === tab.key }]"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
<i :class="tab.icon"></i>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能区域 -->
|
||||
<div class="content-wrapper">
|
||||
<!-- 模板匹配 -->
|
||||
<TemplateMatch
|
||||
v-if="activeTab === 'match'"
|
||||
@switch-tab="switchTab"
|
||||
/>
|
||||
|
||||
<!-- 武器对比 -->
|
||||
<WeaponCompare
|
||||
v-if="activeTab === 'compare'"
|
||||
/>
|
||||
|
||||
<!-- 物体编辑器 -->
|
||||
<ObjectEditor
|
||||
v-if="activeTab === 'editor'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import TemplateMatch from '@/components/weapon/TemplateMatch.vue'
|
||||
import WeaponCompare from '@/components/weapon/WeaponCompare.vue'
|
||||
import ObjectEditor from '@/components/weapon/ObjectEditor.vue'
|
||||
|
||||
const activeTab = ref('match')
|
||||
|
||||
const tabs = [
|
||||
{ key: 'match', label: '模板匹配', icon: 'icon-match' },
|
||||
{ key: 'compare', label: '武器对比', icon: 'icon-compare' },
|
||||
{ key: 'editor', label: '物体编辑器', icon: 'icon-edit' }
|
||||
]
|
||||
|
||||
const switchTab = (tabKey) => {
|
||||
activeTab.value = tabKey
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.weapon-match {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #1a237e;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
color: #1a237e;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background: #f5f7fa;
|
||||
border-color: #1a237e;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: #1a237e;
|
||||
color: white;
|
||||
border-color: #1a237e;
|
||||
}
|
||||
|
||||
.tab-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.weapon-match {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user