写了1个session key 校验的 claude 。有没有前端大佬帮忙搞一下，自己搞的太。。。。。太丑了。。。。
<template>
<div class="checker-container">
<h1 class="title">Session Key Checker</h1>
<div class="content-wrapper">
<div class="input-section">
<el-input v-model="sessionKey" placeholder="输入 Session Key" class="input-area" type="textarea" :rows="8" />
<el-button type="primary" @click="checkSessionKey" class="check-button">
<el-icon>
<Search />
</el-icon>
检查
</el-button>
</div>
<div class="output-section">
<el-card class="output-card live">
<template #header>
<div class="card-header live-header">
<div class="header-content">
<el-icon>
<CircleCheckFilled />
</el-icon>
<span>Live</span>
</div>
<el-tag type="success" size="small">{{ liveCount }}</el-tag>
</div>
</template>
<div class="output-content">
{{ liveOutput }}
</div>
</el-card>
<el-card class="output-card die">
<template #header>
<div class="card-header die-header">
<div class="header-content">
<el-icon>
<CircleCloseFilled />
</el-icon>
<span>Die</span>
</div>
<el-tag type="danger" size="small">{{ dieCount }}</el-tag>
</div>
</template>
<div class="output-content">
{{ dieOutput }}
</div>
</el-card>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Search, CircleCheckFilled, CircleCloseFilled } from '@element-plus/icons-vue'
const sessionKey = ref('')
const liveOutput = ref('')
const dieOutput = ref('')
const liveCount = ref(0)
const dieCount = ref(0)
const checkSessionKey = () => {
// Checking Session Key logic
const keys = sessionKey.value.split('\n').filter(key => key.trim() !== '')
liveOutput.value = ''
dieOutput.value = ''
liveCount.value = 0
dieCount.value = 0
keys.forEach(key => {
if (Math.random() > 0.5) {
liveOutput.value += `${key} - 有效\n`
liveCount.value++
} else {
dieOutput.value += `${key} - 无效\n`
dieCount.value++
}
})
}
</script>
<style scoped>
.checker-container {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #f0f2f5, #e0e5ec);
padding: 20px;
box-sizing: border-box;
}
.title {
text-align: center;
color: #3a8ee6;
margin-bottom: 20px;
font-size: 2.5em;
font-weight: 600;
letter-spacing: 1px;
}
.content-wrapper {
display: flex;
width: 100%;
max-width: 1400px;
gap: 20px;
height: calc(100vh - 120px);
}
.input-section,
.output-section {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
height: 100%;
}
.input-area {
flex: 1;
margin-bottom: 10px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.input-area :deep(.el-textarea__inner) {
height: 100% !important;
resize: none;
border-radius: 8px;
}
.check-button {
width: 100%;
background-color: #3a8ee6;
border-color: #3a8ee6;
transition: background-color 0.3s ease;
}
.check-button:hover {
background-color: #2878c0;
}
.output-section {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
overflow: hidden;
}
.output-card {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}
.output-card.live {
border: 1px solid #67c23a;
}
.output-card.die {
border: 1px solid #f56c6c;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-content {
display: flex;
align-items: center;
gap: 8px;
}
.live-header {
color: #67c23a;
font-weight: bold;
}
.die-header {
color: #f56c6c;
font-weight: bold;
}
.output-content {
max-height: 200px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-all;
flex-grow: 1;
padding: 10px;
font-size: 14px;
line-height: 1.5;
color: #333;
}
.el-icon {
vertical-align: middle;
}
@media (max-width: 768px) {
.content-wrapper {
flex-direction: column;
height: auto;
}
.input-section,
.output-section {
height: calc(100vh - 180px);
}
.output-section {
margin-top: 20px;
}
}
</style>
