提交
This commit is contained in:
parent
56d8d7a345
commit
062550d126
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8
jsconfig.json
Normal file
8
jsconfig.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
2887
package-lock.json
generated
Normal file
2887
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
package.json
Normal file
21
package.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "untitled2",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.9.0",
|
||||||
|
"vue": "^3.5.13",
|
||||||
|
"vue-router": "^4.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.2.3",
|
||||||
|
"vite": "^6.2.4",
|
||||||
|
"vite-plugin-vue-devtools": "^7.7.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
9231
public/Weapon.xml
Normal file
9231
public/Weapon.xml
Normal file
File diff suppressed because it is too large
Load Diff
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
128
src/App.vue
Normal file
128
src/App.vue
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<div class="nav-brand">红色警戒3数据分析中心</div>
|
||||||
|
<router-link to="/" class="nav-link">热门下载地图</router-link>
|
||||||
|
<router-link to="/weekly" class="nav-link">每周推荐</router-link>
|
||||||
|
<router-link to="/weapon-match" class="nav-link">Weapon 匹配</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main class="main-content">
|
||||||
|
<router-view></router-view>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
color: #2c3e50;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background: linear-gradient(135deg, #71eaeb 0%, #416bdf 100%);
|
||||||
|
padding: 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-brand {
|
||||||
|
color: white;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.router-link-active {
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
margin-top: 60px;
|
||||||
|
padding: 20px;
|
||||||
|
flex: 1;
|
||||||
|
max-width: 1200px;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-container {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-left {
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-brand {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
padding: 6px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
65
src/api/maps.js
Normal file
65
src/api/maps.js
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const API_BASE_URL = 'https://ra3.z31.xyz/v1'
|
||||||
|
|
||||||
|
// 获取地图列表
|
||||||
|
export const getMaps = async (params = {}) => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(`${API_BASE_URL}/maps/`, {
|
||||||
|
params: {
|
||||||
|
p: params.page || 1,
|
||||||
|
search: params.search || '',
|
||||||
|
player_count: params.player_count || '',
|
||||||
|
tags: params.tags || '',
|
||||||
|
ordering: params.ordering || '-download_count'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return response.data
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取地图列表失败:', error)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取每周推荐地图
|
||||||
|
export const getWeeklyTopMaps = async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get('https://ra3.z31.xyz/v1/maps/', {
|
||||||
|
params: {
|
||||||
|
ordering: '-download_count',
|
||||||
|
format: 'json',
|
||||||
|
p: 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return response.data.results.slice(0, 10)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取每周推荐地图失败:', error)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取地图详情
|
||||||
|
export const getMapDetail = async (id) => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(`${API_BASE_URL}/maps/${id}/`)
|
||||||
|
return response.data
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取地图详情失败:', error)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取所有标签
|
||||||
|
export const getAllTags = async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(`${API_BASE_URL}/maps/`)
|
||||||
|
const tags = new Set()
|
||||||
|
response.data.results.forEach(map => {
|
||||||
|
map.tags.forEach(tag => tags.add(tag))
|
||||||
|
})
|
||||||
|
return Array.from(tags)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取标签列表失败:', error)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
176
src/assets/styles/Maps.css
Normal file
176
src/assets/styles/Maps.css
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
.maps {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box input {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
width: 200px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #1a237e;
|
||||||
|
box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-select {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
background: #fff;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分页样式 */
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-numbers {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn,
|
||||||
|
.page-number {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: white;
|
||||||
|
color: #1a237e;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
font-size: 14px;
|
||||||
|
min-width: 40px;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn:hover:not(:disabled),
|
||||||
|
.page-number:hover:not(.active) {
|
||||||
|
background: #f5f7fa;
|
||||||
|
border-color: #1a237e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-number.active {
|
||||||
|
background: #1a237e;
|
||||||
|
color: white;
|
||||||
|
border-color: #1a237e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-ellipsis {
|
||||||
|
color: #666;
|
||||||
|
padding: 0 8px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-jump {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: #666;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-jump input {
|
||||||
|
width: 50px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-jump input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #1a237e;
|
||||||
|
box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jump-btn {
|
||||||
|
padding: 4px 12px;
|
||||||
|
border: 1px solid #1a237e;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #1a237e;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jump-btn:hover:not(:disabled) {
|
||||||
|
background: #283593;
|
||||||
|
border-color: #283593;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jump-btn:disabled {
|
||||||
|
background: #e0e0e0;
|
||||||
|
border-color: #e0e0e0;
|
||||||
|
color: #999;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.search-box input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn,
|
||||||
|
.page-number {
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-jump {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-jump input {
|
||||||
|
width: 40px;
|
||||||
|
padding: 3px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jump-btn {
|
||||||
|
padding: 3px 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/assets/styles/WeeklyRecommend.css
Normal file
13
src/assets/styles/WeeklyRecommend.css
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
.weekly-recommend {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-subtitle {
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-name {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1a237e;
|
||||||
|
}
|
||||||
84
src/assets/styles/common.css
Normal file
84
src/assets/styles/common.css
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
/* 表格通用样式 */
|
||||||
|
.table-container {
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maps-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
min-width: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maps-table th,
|
||||||
|
.maps-table td {
|
||||||
|
padding: 16px;
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maps-table th {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1a237e;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row:hover {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 预览图样式 */
|
||||||
|
.preview-cell {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-cell img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标签样式 */
|
||||||
|
.tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
background: #e8eaf6;
|
||||||
|
color: #1a237e;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页面标题样式 */
|
||||||
|
.page-header {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header h1 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #1a237e;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.table-container {
|
||||||
|
margin: 0 -20px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
52
src/components/FileUploader.vue
Normal file
52
src/components/FileUploader.vue
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<label>
|
||||||
|
上传 Weapon.xml：
|
||||||
|
<input type="file" @change="onWeaponFileChange" />
|
||||||
|
</label>
|
||||||
|
<br />
|
||||||
|
<label>
|
||||||
|
上传单位 XML（如 AlliedAntiInfantryInfantry.xml）：
|
||||||
|
<input type="file" @change="onUnitFileChange" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const emit = defineEmits(['updateWeaponTemplates', 'updateUnitDoc'])
|
||||||
|
|
||||||
|
const onWeaponFileChange = (e) => {
|
||||||
|
const file = e.target.files[0]
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
const reader = new FileReader()
|
||||||
|
reader.onload = (event) => {
|
||||||
|
const parser = new DOMParser()
|
||||||
|
const xml = parser.parseFromString(event.target.result, 'text/xml')
|
||||||
|
const templates = xml.querySelectorAll('WeaponTemplate')
|
||||||
|
const ids = new Set()
|
||||||
|
templates.forEach((t) => {
|
||||||
|
const id = t.getAttribute('id')
|
||||||
|
if (id) ids.add(id)
|
||||||
|
})
|
||||||
|
emit('updateWeaponTemplates', ids)
|
||||||
|
}
|
||||||
|
reader.readAsText(file)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onUnitFileChange = (e) => {
|
||||||
|
const file = e.target.files[0]
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
const reader = new FileReader()
|
||||||
|
reader.onload = (event) => {
|
||||||
|
const parser = new DOMParser()
|
||||||
|
const xml = parser.parseFromString(event.target.result, 'text/xml')
|
||||||
|
emit('updateUnitDoc', xml)
|
||||||
|
}
|
||||||
|
reader.readAsText(file)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
26
src/components/MatchResultTable.vue
Normal file
26
src/components/MatchResultTable.vue
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>GameObject id</th>
|
||||||
|
<th>匹配到的 WeaponTemplate</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(result, index) in matchResults" :key="index">
|
||||||
|
<td>{{ result.goId }}</td>
|
||||||
|
<td>{{ result.templates.length > 0 ? result.templates.join(', ') : 'None' }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
matchResults: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
11
src/components/index.vue
Normal file
11
src/components/index.vue
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
8
src/main.js
Normal file
8
src/main.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(router)
|
||||||
|
app.mount('#app')
|
||||||
31
src/router/index.js
Normal file
31
src/router/index.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Maps',
|
||||||
|
component: () => import('../views/Maps.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/weekly',
|
||||||
|
name: 'WeeklyRecommend',
|
||||||
|
component: () => import('../views/WeeklyRecommend.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/map/:id',
|
||||||
|
name: 'MapDetail',
|
||||||
|
component: () => import('../views/MapDetail.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/weapon-match',
|
||||||
|
name: 'WeaponMatch',
|
||||||
|
component: () => import('../views/WeaponMatch.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
178
src/views/MapDetail.vue
Normal file
178
src/views/MapDetail.vue
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
<template>
|
||||||
|
<div class="map-detail" v-if="map">
|
||||||
|
<div class="back-button">
|
||||||
|
<button @click="goBack" class="back-btn">
|
||||||
|
<span class="back-icon">←</span> 返回列表
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="map-header">
|
||||||
|
<h1>{{ map.chinese_name }}</h1>
|
||||||
|
<p class="author">作者: {{ map.user }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="map-content">
|
||||||
|
<div class="map-image">
|
||||||
|
<img :src="map.img_file" :alt="map.chinese_name">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="map-info">
|
||||||
|
<div class="info-item">
|
||||||
|
<h3>基本信息</h3>
|
||||||
|
<p>下载次数: {{ map.download_count }}</p>
|
||||||
|
<p>收藏次数: {{ map.favourite_count }}</p>
|
||||||
|
<p>玩家数量: {{ map.player_count }}</p>
|
||||||
|
<p>创建时间: {{ formatDate(map.create_time) }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tags">
|
||||||
|
<h3>标签</h3>
|
||||||
|
<div class="tag-list">
|
||||||
|
<span v-for="tag in map.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<a :href="map.zip_file" class="download-btn" download>下载地图</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { getMapDetail } from '../api/maps'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
const map = ref(null)
|
||||||
|
|
||||||
|
const fetchMapDetail = async () => {
|
||||||
|
try {
|
||||||
|
map.value = await getMapDetail(route.params.id)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取地图详情失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDate = (dateString) => {
|
||||||
|
return new Date(dateString).toLocaleDateString('zh-CN')
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchMapDetail()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.map-detail {
|
||||||
|
padding: 20px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn:hover {
|
||||||
|
background: #e9ecef;
|
||||||
|
border-color: #d0d0d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-icon {
|
||||||
|
margin-right: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-header {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-header h1 {
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author {
|
||||||
|
color: #666;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-image img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-info {
|
||||||
|
padding: 20px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
background: #e9ecef;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background: #007bff;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-btn:hover {
|
||||||
|
background: #0056b3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
257
src/views/Maps.vue
Normal file
257
src/views/Maps.vue
Normal file
@ -0,0 +1,257 @@
|
|||||||
|
<template>
|
||||||
|
<div class="maps">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>热门下载地图</h1>
|
||||||
|
</div>
|
||||||
|
<div class="filters">
|
||||||
|
<div class="search-box">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="搜索地图..."
|
||||||
|
v-model="searchValue"
|
||||||
|
@input="handleSearchInput"
|
||||||
|
@blur="handleSearchBlur"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<select v-model="playerCountFilter" class="filter-select" @change="handleFilterChange">
|
||||||
|
<option value="">玩家数</option>
|
||||||
|
<option v-for="n in [2,3,4,5,6,7,8]" :key="n" :value="n">{{ n }}人</option>
|
||||||
|
</select>
|
||||||
|
<select v-model="tagFilter" class="filter-select" @change="handleFilterChange">
|
||||||
|
<option value="">分类</option>
|
||||||
|
<option v-for="tag in tagOptions" :key="tag" :value="tag">{{ tag }}</option>
|
||||||
|
</select>
|
||||||
|
<select v-model="selectedOrder" class="filter-select" @change="handleFilterChange">
|
||||||
|
<option v-for="opt in orderOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="table-container">
|
||||||
|
<table class="maps-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>预览图</th>
|
||||||
|
<th>地图名称</th>
|
||||||
|
<th>作者</th>
|
||||||
|
<th>下载次数</th>
|
||||||
|
<th>收藏次数</th>
|
||||||
|
<th>玩家数量</th>
|
||||||
|
<th>创建时间</th>
|
||||||
|
<th>标签</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="map in maps" :key="map.id" @click="goToMapDetail(map.id)" class="table-row">
|
||||||
|
<td class="preview-cell">
|
||||||
|
<img :src="map.thumbnail" :alt="map.chinese_name">
|
||||||
|
</td>
|
||||||
|
<td class="map-name">{{ map.chinese_name }}</td>
|
||||||
|
<td>{{ map.user }}</td>
|
||||||
|
<td>{{ map.download_count }}</td>
|
||||||
|
<td>{{ map.favourite_count }}</td>
|
||||||
|
<td>{{ map.player_count }}</td>
|
||||||
|
<td>{{ formatDate(map.create_time) }}</td>
|
||||||
|
<td>
|
||||||
|
<div class="tags">
|
||||||
|
<span v-for="tag in map.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分页控件 -->
|
||||||
|
<div class="pagination">
|
||||||
|
<button
|
||||||
|
class="page-btn"
|
||||||
|
:disabled="currentPage === 1"
|
||||||
|
@click="changePage(currentPage - 1)"
|
||||||
|
>
|
||||||
|
上一页
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="page-numbers">
|
||||||
|
<template v-for="(page, index) in displayedPages" :key="index">
|
||||||
|
<button
|
||||||
|
v-if="typeof page === 'number'"
|
||||||
|
class="page-number"
|
||||||
|
:class="{ active: page === currentPage }"
|
||||||
|
@click="changePage(page)"
|
||||||
|
>
|
||||||
|
{{ page }}
|
||||||
|
</button>
|
||||||
|
<span v-else class="page-ellipsis">{{ page }}</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="page-btn"
|
||||||
|
:disabled="!hasNextPage"
|
||||||
|
@click="changePage(currentPage + 1)"
|
||||||
|
>
|
||||||
|
下一页
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="page-jump">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
v-model="jumpPage"
|
||||||
|
:min="1"
|
||||||
|
:max="totalPages"
|
||||||
|
class="jump-input"
|
||||||
|
@keyup.enter="handleJumpPage"
|
||||||
|
>
|
||||||
|
<button class="jump-btn" @click="handleJumpPage">跳转</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, onMounted, watch } from 'vue'
|
||||||
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
|
import { getMaps, getAllTags } from '../api/maps'
|
||||||
|
import '../assets/styles/common.css'
|
||||||
|
import '../assets/styles/Maps.css'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
const maps = ref([])
|
||||||
|
const currentPage = ref(1)
|
||||||
|
const totalPages = ref(1)
|
||||||
|
const hasNextPage = ref(false)
|
||||||
|
const jumpPage = ref('')
|
||||||
|
|
||||||
|
// 排序和筛选相关
|
||||||
|
const orderOptions = [
|
||||||
|
{ label: '下载量降序', value: '-download_count' },
|
||||||
|
{ label: '下载量升序', value: 'download_count' },
|
||||||
|
{ label: '收藏数降序', value: '-favourite_count' },
|
||||||
|
{ label: '收藏数升序', value: 'favourite_count' },
|
||||||
|
{ label: '创建时间降序', value: '-create_time' },
|
||||||
|
{ label: '创建时间升序', value: 'create_time' }
|
||||||
|
]
|
||||||
|
const selectedOrder = ref('-download_count')
|
||||||
|
const searchValue = ref('')
|
||||||
|
const playerCountFilter = ref('')
|
||||||
|
const tagFilter = ref('')
|
||||||
|
const tagOptions = ref([])
|
||||||
|
|
||||||
|
// 计算显示的页码
|
||||||
|
const displayedPages = computed(() => {
|
||||||
|
const pages = []
|
||||||
|
const total = totalPages.value
|
||||||
|
const current = currentPage.value
|
||||||
|
|
||||||
|
if (total <= 5) {
|
||||||
|
for (let i = 1; i <= total; i++) {
|
||||||
|
pages.push(i)
|
||||||
|
}
|
||||||
|
} else if (current <= 3) {
|
||||||
|
pages.push(1, 2, 3, 4, '...', total)
|
||||||
|
} else if (current >= total - 2) {
|
||||||
|
pages.push(1, '...')
|
||||||
|
for (let i = total - 2; i <= total; i++) {
|
||||||
|
if (i > 1) pages.push(i)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
pages.push(1, '...', current - 1, current, current + 1, '...', total)
|
||||||
|
}
|
||||||
|
return pages
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取地图数据
|
||||||
|
const fetchMaps = async (page = 1) => {
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
page,
|
||||||
|
search: searchValue.value,
|
||||||
|
player_count: playerCountFilter.value,
|
||||||
|
tags: tagFilter.value,
|
||||||
|
ordering: selectedOrder.value
|
||||||
|
}
|
||||||
|
console.log('正在获取地图数据，参数:', params)
|
||||||
|
const data = await getMaps(params)
|
||||||
|
maps.value = data.results
|
||||||
|
hasNextPage.value = !!data.next
|
||||||
|
totalPages.value = Math.ceil(data.count / 20)
|
||||||
|
currentPage.value = page
|
||||||
|
console.log('分页状态:', {
|
||||||
|
currentPage: currentPage.value,
|
||||||
|
totalPages: totalPages.value,
|
||||||
|
hasNextPage: hasNextPage.value,
|
||||||
|
resultsCount: data.results.length
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取地图列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理搜索输入
|
||||||
|
const handleSearchInput = () => {
|
||||||
|
if (!searchValue.value) {
|
||||||
|
fetchMaps(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理搜索框失去焦点
|
||||||
|
const handleSearchBlur = () => {
|
||||||
|
if (searchValue.value) {
|
||||||
|
fetchMaps(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理筛选条件变化
|
||||||
|
const handleFilterChange = () => {
|
||||||
|
console.log('筛选条件变化:', {
|
||||||
|
playerCount: playerCountFilter.value,
|
||||||
|
tag: tagFilter.value,
|
||||||
|
order: selectedOrder.value
|
||||||
|
})
|
||||||
|
fetchMaps(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理页码跳转
|
||||||
|
const handleJumpPage = () => {
|
||||||
|
const page = parseInt(jumpPage.value)
|
||||||
|
if (page && page >= 1 && page <= totalPages.value) {
|
||||||
|
changePage(page)
|
||||||
|
}
|
||||||
|
jumpPage.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换页码
|
||||||
|
const changePage = (page) => {
|
||||||
|
console.log('尝试切换页码:', page, '当前页码:', currentPage.value, '总页数:', totalPages.value)
|
||||||
|
if (page < 1 || page > totalPages.value) {
|
||||||
|
console.log('页码无效:', page)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
currentPage.value = page
|
||||||
|
fetchMaps(page)
|
||||||
|
// 滚动到页面顶部
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 跳转到地图详情
|
||||||
|
const goToMapDetail = (id) => {
|
||||||
|
router.push(`/map/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化日期
|
||||||
|
const formatDate = (dateString) => {
|
||||||
|
return new Date(dateString).toLocaleDateString('zh-CN')
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
console.log('组件挂载')
|
||||||
|
fetchMaps(1)
|
||||||
|
getAllTags().then(tags => {
|
||||||
|
tagOptions.value = tags
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
1170
src/views/WeaponMatch.vue
Normal file
1170
src/views/WeaponMatch.vue
Normal file
File diff suppressed because it is too large
Load Diff
96
src/views/WeeklyRecommend.vue
Normal file
96
src/views/WeeklyRecommend.vue
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
<template>
|
||||||
|
<div class="weekly-recommend">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>每周地图推荐</h1>
|
||||||
|
<div class="header-subtitle">
|
||||||
|
<span class="date-range">{{ currentWeekRange }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container">
|
||||||
|
<table class="maps-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>序号</th>
|
||||||
|
<th>预览图</th>
|
||||||
|
<th>地图名称</th>
|
||||||
|
<th>作者</th>
|
||||||
|
<th>下载次数</th>
|
||||||
|
<th>收藏次数</th>
|
||||||
|
<th>玩家数量</th>
|
||||||
|
<th>创建时间</th>
|
||||||
|
<th>标签</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(map, index) in recommendedMaps" :key="map.id" @click="goToMapDetail(map.id)" class="table-row">
|
||||||
|
<td class="rank-number">{{ index + 1 }}</td>
|
||||||
|
<td class="preview-cell">
|
||||||
|
<img :src="map.thumbnail" :alt="map.chinese_name">
|
||||||
|
</td>
|
||||||
|
<td class="map-name">{{ map.chinese_name }}</td>
|
||||||
|
<td>{{ map.user }}</td>
|
||||||
|
<td>{{ map.download_count }}</td>
|
||||||
|
<td>{{ map.favourite_count }}</td>
|
||||||
|
<td>{{ map.player_count }}</td>
|
||||||
|
<td>{{ formatDate(map.create_time) }}</td>
|
||||||
|
<td>
|
||||||
|
<div class="tags">
|
||||||
|
<span v-for="tag in map.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { getWeeklyTopMaps } from '../api/maps'
|
||||||
|
import '../assets/styles/common.css'
|
||||||
|
import '../assets/styles/WeeklyRecommend.css'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const recommendedMaps = ref([])
|
||||||
|
|
||||||
|
// 获取当前周的范围
|
||||||
|
const currentWeekRange = computed(() => {
|
||||||
|
const now = new Date()
|
||||||
|
const start = new Date(now.setDate(now.getDate() - now.getDay()))
|
||||||
|
const end = new Date(now.setDate(now.getDate() - now.getDay() + 6))
|
||||||
|
return `${start.toLocaleDateString('zh-CN')} - ${end.toLocaleDateString('zh-CN')}`
|
||||||
|
})
|
||||||
|
|
||||||
|
const goToMapDetail = (id) => {
|
||||||
|
router.push(`/map/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDate = (dateString) => {
|
||||||
|
return new Date(dateString).toLocaleDateString('zh-CN')
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchRecommendedMaps = async () => {
|
||||||
|
try {
|
||||||
|
recommendedMaps.value = await getWeeklyTopMaps()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取推荐地图失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchRecommendedMaps()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.rank-number {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1a237e;
|
||||||
|
text-align: center;
|
||||||
|
width: 50px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
16
vite.config.js
Normal file
16
vite.config.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, './src')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
port: 8082,
|
||||||
|
open: true
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user