图片流及cookie获取
This commit is contained in:
@@ -1,19 +1,26 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import LotteryResults from './components/LotteryResults.vue'
|
import Index from './components/index.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="app">
|
<div class="app">
|
||||||
<LotteryResults />
|
<main class="app-main">
|
||||||
|
<Index />
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.app {
|
.app {
|
||||||
width: 100%;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app-main {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,43 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
msg: String,
|
|
||||||
})
|
|
||||||
|
|
||||||
const count = ref(0)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<button type="button" @click="count++">count is {{ count }}</button>
|
|
||||||
<p>
|
|
||||||
Edit
|
|
||||||
<code>components/HelloWorld.vue</code> to test HMR
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Check out
|
|
||||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
|
||||||
>create-vue</a
|
|
||||||
>, the official Vue + Vite starter
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Learn more about IDE Support for Vue in the
|
|
||||||
<a
|
|
||||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
|
||||||
target="_blank"
|
|
||||||
>Vue Docs Scaling up Guide</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,458 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="lottery-container">
|
|
||||||
<!-- 顶部导航栏 -->
|
|
||||||
<header class="lottery-header">
|
|
||||||
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- 主要内容区域 -->
|
|
||||||
<div class="main-content">
|
|
||||||
<!-- 左侧用户信息面板 -->
|
|
||||||
<aside class="user-panel">
|
|
||||||
<div class="panel-section">
|
|
||||||
<h3>账户信息</h3>
|
|
||||||
<div class="user-info">
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">账户:</span>
|
|
||||||
<span class="value">pmk1 (VIP)</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">快开码:</span>
|
|
||||||
<span class="value">4701262635</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">余额:</span>
|
|
||||||
<span class="value">125.7</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="panel-section">
|
|
||||||
<h3>开奖明细</h3>
|
|
||||||
<div class="lottery-details">
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="label">期号:</span>
|
|
||||||
<span class="value">20200114</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="label">开奖号码:</span>
|
|
||||||
<div class="winning-numbers">
|
|
||||||
<div class="ball red">5</div>
|
|
||||||
<div class="ball green">8</div>
|
|
||||||
<div class="ball blue">7</div>
|
|
||||||
<div class="ball yellow">9</div>
|
|
||||||
<div class="ball purple">2</div>
|
|
||||||
<div class="ball pink">3</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<!-- 右侧开奖结果表格 -->
|
|
||||||
<div class="results-section">
|
|
||||||
<div class="section-header">
|
|
||||||
<div class="header-controls">
|
|
||||||
<div class="filter">
|
|
||||||
<label>期数:</label>
|
|
||||||
<select>
|
|
||||||
<option>1~10</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="filter">
|
|
||||||
<label>玩法:</label>
|
|
||||||
<select>
|
|
||||||
<option>总和值</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="results-table-container">
|
|
||||||
<table class="results-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>期号</th>
|
|
||||||
<th>日期</th>
|
|
||||||
<th>开奖时间</th>
|
|
||||||
<th>开奖号码</th>
|
|
||||||
<th>冠亚和</th>
|
|
||||||
<th>冠亚军</th>
|
|
||||||
<th>2串</th>
|
|
||||||
<th>4串</th>
|
|
||||||
<th>大小</th>
|
|
||||||
<th>龙虎</th>
|
|
||||||
<th>1~5尾</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="result in lotteryResults" :key="result.issue">
|
|
||||||
<td>{{ result.issue }}</td>
|
|
||||||
<td>{{ result.date }}</td>
|
|
||||||
<td>{{ result.time }}</td>
|
|
||||||
<td class="numbers-column">
|
|
||||||
<div class="ball" v-for="(number, index) in result.numbers" :key="index" :class="getBallColorClass(index)">
|
|
||||||
{{ number }}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>{{ result.sum }}</td>
|
|
||||||
<td>{{ result.firstSecondSum }}</td>
|
|
||||||
<td>{{ result.twoSeries }}</td>
|
|
||||||
<td>{{ result.fourSeries }}</td>
|
|
||||||
<td>{{ result.size }}</td>
|
|
||||||
<td>{{ result.dragonTiger }}</td>
|
|
||||||
<td class="tails-column">
|
|
||||||
<div class="tail" v-for="(tail, index) in result.tails" :key="index" :class="getTailClass(tail)">
|
|
||||||
{{ tail }}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'LotteryResults',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
lotteryResults: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// 页面加载时从后端获取彩票开奖结果数据
|
|
||||||
this.fetchLotteryResults();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async fetchLotteryResults() {
|
|
||||||
try {
|
|
||||||
const response = await fetch('http://localhost:8080/api/lottery/results');
|
|
||||||
if (response.ok) {
|
|
||||||
this.lotteryResults = await response.json();
|
|
||||||
} else {
|
|
||||||
console.error('获取数据失败:', response.status);
|
|
||||||
// 如果后端没有数据，使用模拟数据
|
|
||||||
this.useMockData();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取数据时发生错误:', error);
|
|
||||||
// 如果连接后端失败，使用模拟数据
|
|
||||||
this.useMockData();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
useMockData() {
|
|
||||||
// 使用模拟数据
|
|
||||||
this.lotteryResults = [
|
|
||||||
{
|
|
||||||
issue: '202001214',
|
|
||||||
date: '2020-01-21',
|
|
||||||
time: '15:10:00',
|
|
||||||
numbers: ['5', '8', '7', '9', '2', '3', '1', '10', '12', '4', '6', '11'],
|
|
||||||
sum: '62',
|
|
||||||
firstSecondSum: '33',
|
|
||||||
twoSeries: '22',
|
|
||||||
fourSeries: '',
|
|
||||||
size: '大',
|
|
||||||
dragonTiger: '龙',
|
|
||||||
tails: ['虎', '龙', '虎', '虎', '龙']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
issue: '202001213',
|
|
||||||
date: '2020-01-21',
|
|
||||||
time: '15:05:00',
|
|
||||||
numbers: ['8', '3', '7', '9', '5', '4', '6', '10', '12', '1', '2', '11'],
|
|
||||||
sum: '67',
|
|
||||||
firstSecondSum: '32',
|
|
||||||
twoSeries: '22',
|
|
||||||
fourSeries: '',
|
|
||||||
size: '大',
|
|
||||||
dragonTiger: '龙',
|
|
||||||
tails: ['虎', '龙', '虎', '虎', '龙']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
issue: '202001212',
|
|
||||||
date: '2020-01-21',
|
|
||||||
time: '15:00:00',
|
|
||||||
numbers: ['2', '8', '10', '11', '9', '12', '5', '3', '7', '4', '6', '1'],
|
|
||||||
sum: '67',
|
|
||||||
firstSecondSum: '32',
|
|
||||||
twoSeries: '22',
|
|
||||||
fourSeries: '',
|
|
||||||
size: '大',
|
|
||||||
dragonTiger: '龙',
|
|
||||||
tails: ['虎', '龙', '虎', '虎', '龙']
|
|
||||||
}
|
|
||||||
];
|
|
||||||
},
|
|
||||||
getBallColorClass(index) {
|
|
||||||
// 根据号码位置返回不同的颜色类
|
|
||||||
const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'pink', 'orange', 'cyan', 'magenta', 'lime', 'teal', 'indigo'];
|
|
||||||
return colors[index % colors.length];
|
|
||||||
},
|
|
||||||
getTailClass(tail) {
|
|
||||||
// 根据龙虎返回不同的颜色类
|
|
||||||
return tail === '龙' ? 'dragon' : 'tiger';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.lottery-container {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 顶部导航栏样式 */
|
|
||||||
.lottery-header {
|
|
||||||
background-color: #1a73e8;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-top {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-tabs {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
padding: 8px 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab:hover {
|
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-right {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-settings, .btn-exit {
|
|
||||||
background-color: transparent;
|
|
||||||
color: white;
|
|
||||||
border: 1px solid white;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-settings:hover, .btn-exit:hover {
|
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-bottom {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 20px;
|
|
||||||
background-color: #1557b0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-tabs {
|
|
||||||
display: flex;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-tab {
|
|
||||||
padding: 6px 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-tab:hover {
|
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-tab.active {
|
|
||||||
background-color: rgba(255, 255, 255, 0.3);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-settings.small {
|
|
||||||
padding: 4px 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 主要内容区域 */
|
|
||||||
.main-content {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 左侧用户信息面板 */
|
|
||||||
.user-panel {
|
|
||||||
width: 200px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border-right: 1px solid #ddd;
|
|
||||||
padding: 15px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-section h3 {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-item, .detail-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
color: #333;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.winning-numbers {
|
|
||||||
display: flex;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右侧开奖结果表格 */
|
|
||||||
.results-section {
|
|
||||||
flex: 1;
|
|
||||||
padding: 15px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header h2 {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-controls {
|
|
||||||
display: flex;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter select {
|
|
||||||
padding: 4px 6px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 开奖结果表格 */
|
|
||||||
.results-table-container {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.results-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.results-table th, .results-table td {
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
padding: 8px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.results-table th {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.results-table tr:nth-child(even) {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 号码球样式 */
|
|
||||||
.ball {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.numbers-column {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ball.blue { background-color: #1a73e8; }
|
|
||||||
.ball.red { background-color: #ea4335; }
|
|
||||||
.ball.green { background-color: #34a853; }
|
|
||||||
.ball.yellow { background-color: #fbbc05; }
|
|
||||||
.ball.purple { background-color: #9c27b0; }
|
|
||||||
.ball.pink { background-color: #e91e63; }
|
|
||||||
.ball.orange { background-color: #ff9800; }
|
|
||||||
.ball.cyan { background-color: #00bcd4; }
|
|
||||||
.ball.magenta { background-color: #ff00ff; }
|
|
||||||
.ball.lime { background-color: #00ff00; }
|
|
||||||
.ball.teal { background-color: #009688; }
|
|
||||||
.ball.indigo { background-color: #3f51b5; }
|
|
||||||
|
|
||||||
/* 龙虎样式 */
|
|
||||||
.tails-column {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tail {
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 3px;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tail.dragon { background-color: #ea4335; color: white; }
|
|
||||||
.tail.tiger { background-color: #1a73e8; color: white; }
|
|
||||||
</style>
|
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="user-form">
|
|
||||||
<form @submit.prevent="handleSubmit">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="name">姓名</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
v-model="formData.name"
|
|
||||||
required
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="email">邮箱</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
v-model="formData.email"
|
|
||||||
required
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="password">密码</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
id="password"
|
|
||||||
v-model="formData.password"
|
|
||||||
:required="!user.id"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="form-actions">
|
|
||||||
<button type="submit" class="save-btn">保存</button>
|
|
||||||
<button type="button" @click="$emit('cancel')" class="cancel-btn">取消</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'UserForm',
|
|
||||||
props: {
|
|
||||||
user: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
formData: { ...this.user }
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
user(newUser) {
|
|
||||||
this.formData = { ...newUser };
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleSubmit() {
|
|
||||||
this.$emit('save', this.formData);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.user-form {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-actions {
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-btn, .cancel-btn {
|
|
||||||
padding: 8px 16px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-btn {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cancel-btn {
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,187 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="user-management">
|
|
||||||
<h2>用户管理</h2>
|
|
||||||
<button @click="showAddForm = true" class="add-btn">添加用户</button>
|
|
||||||
<table class="user-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>ID</th>
|
|
||||||
<th>姓名</th>
|
|
||||||
<th>邮箱</th>
|
|
||||||
<th>操作</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="user in users" :key="user.id">
|
|
||||||
<td>{{ user.id }}</td>
|
|
||||||
<td>{{ user.name }}</td>
|
|
||||||
<td>{{ user.email }}</td>
|
|
||||||
<td>
|
|
||||||
<button @click="editUser(user)" class="edit-btn">编辑</button>
|
|
||||||
<button @click="deleteUser(user.id)" class="delete-btn">删除</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<!-- 用户表单弹窗 -->
|
|
||||||
<div v-if="showAddForm || editingUser" class="modal-overlay">
|
|
||||||
<div class="modal">
|
|
||||||
<h3>{{ editingUser ? '编辑用户' : '添加用户' }}</h3>
|
|
||||||
<user-form
|
|
||||||
:user="currentUser"
|
|
||||||
@save="saveUser"
|
|
||||||
@cancel="cancelForm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import UserForm from './UserForm.vue';
|
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'UserManagement',
|
|
||||||
components: {
|
|
||||||
UserForm
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
users: [],
|
|
||||||
showAddForm: false,
|
|
||||||
editingUser: null,
|
|
||||||
currentUser: {}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.fetchUsers();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
fetchUsers() {
|
|
||||||
axios.get('/api/users')
|
|
||||||
.then(response => {
|
|
||||||
this.users = response.data;
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('获取用户列表失败:', error);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
editUser(user) {
|
|
||||||
this.editingUser = true;
|
|
||||||
this.currentUser = { ...user };
|
|
||||||
},
|
|
||||||
deleteUser(userId) {
|
|
||||||
if (confirm('确定要删除这个用户吗？')) {
|
|
||||||
axios.delete(`/api/users/${userId}`)
|
|
||||||
.then(() => {
|
|
||||||
this.fetchUsers();
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('删除用户失败:', error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
saveUser(user) {
|
|
||||||
if (this.editingUser) {
|
|
||||||
// 更新用户
|
|
||||||
axios.put(`/api/users/${user.id}`, user)
|
|
||||||
.then(() => {
|
|
||||||
this.fetchUsers();
|
|
||||||
this.cancelForm();
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('更新用户失败:', error);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// 添加用户
|
|
||||||
axios.post('/api/users', user)
|
|
||||||
.then(() => {
|
|
||||||
this.fetchUsers();
|
|
||||||
this.cancelForm();
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('添加用户失败:', error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
cancelForm() {
|
|
||||||
this.showAddForm = false;
|
|
||||||
this.editingUser = false;
|
|
||||||
this.currentUser = {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.user-management {
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-btn {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-table th, .user-table td {
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
padding: 8px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-table th {
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-btn, .delete-btn {
|
|
||||||
padding: 4px 8px;
|
|
||||||
margin-right: 5px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-btn {
|
|
||||||
background-color: #2196F3;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn {
|
|
||||||
background-color: #f44336;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
background-color: white;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
width: 400px;
|
|
||||||
max-width: 90%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -24,10 +24,9 @@ a:hover {
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
min-width: 320px;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@@ -58,11 +57,18 @@ button:focus-visible {
|
|||||||
padding: 2em;
|
padding: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
|
||||||
max-width: 1280px;
|
/* 响应式app容器 */
|
||||||
margin: 0 auto;
|
@media (max-width: 768px) {
|
||||||
padding: 2rem;
|
#app {
|
||||||
text-align: center;
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
#app {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
|
|||||||
Reference in New Issue
Block a user