KxGame/Kg.SeaTime
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

创建项目

Browse Source
This commit is contained in:
Putoo
2026-04-21 16:54:18 +08:00
commit 6cdceccde7
59 changed files with 15320 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

469
Web/src/pages/auth/login.vue Normal file
View File

@@ -0,0 +1,469 @@
<template>
<div class="page-login">
<div class="login-container">
<div class="login-box">
<div class="login-header">
<h1 class="login-title">登录</h1>
<p class="login-subtitle">欢迎使用 Kx UI Framework</p>
</div>
<form class="login-form" @submit.prevent="handleLogin">
<!-- 用户名 -->
<div class="form-item">
<label class="form-label" for="username">用户名</label>
<input
id="username"
v-model="loginForm.username"
type="text"
class="form-input"
placeholder="请输入用户名"
@blur="validateField('username')"
/>
<span class="form-error" v-if="errors.username">{{ errors.username }}</span>
</div>
<!-- 密码 -->
<div class="form-item">
<label class="form-label" for="password">密码</label>
<input
id="password"
v-model="loginForm.password"
type="password"
class="form-input"
placeholder="请输入密码"
@blur="validateField('password')"
/>
<span class="form-error" v-if="errors.password">{{ errors.password }}</span>
</div>
<!-- 验证码 -->
<div class="form-item">
<label class="form-label" for="captcha">验证码</label>
<div class="captcha-wrapper">
<input
id="captcha"
v-model="loginForm.captcha"
type="text"
class="form-input captcha-input"
placeholder="请输入验证码"
@blur="validateField('captcha')"
/>
<div class="captcha-code" @click="refreshCaptcha">
{{ captchaCode }}
</div>
</div>
<span class="form-error" v-if="errors.captcha">{{ errors.captcha }}</span>
</div>
<!-- 记住密码 & 忘记密码 -->
<div class="form-options">
<label class="checkbox-label">
<input v-model="loginForm.remember" type="checkbox" />
<span>记住密码</span>
</label>
<a href="javascript:;" class="forgot-link">忘记密码？</a>
</div>
<!-- 登录按钮 -->
<button type="submit" class="login-btn" :disabled="isLoading">
{{ isLoading ? '登录中...' : '登录' }}
</button>
<!-- 注册链接 -->
<div class="login-footer">
<span class="register-tip">还没有账号？</span>
<a href="javascript:;" class="register-link">立即注册</a>
</div>
</form>
<!-- 提示信息 -->
<div class="login-tips" v-if="tips.show">
<p :class="['tip-text', tips.type]">{{ tips.message }}</p>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
// stores、extends、services 目录下的内容已自动导入
// types目录需要手动import type
import type { ILoginParams } from '~/types/api'
// 设置页面布局
definePageMeta({
layout: layout.empty
})
// Pinia状态仓库（自动导入）
const userStore = useUserStore()
const router = useRouter()
// 登录表单数据
const loginForm = reactive({
username: '',
password: '',
captcha: '',
remember: false
})
// 表单校验错误
const errors = reactive({
username: '',
password: '',
captcha: ''
})
// 加载状态
const isLoading = ref(false)
// 验证码
const captchaCode = ref('')
// 提示信息
const tips = reactive({
show: false,
message: '',
type: 'info'
})
// 生成随机验证码
const generateCaptcha = () => {
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'
let code = ''
for (let i = 0; i < 4; i++) {
code += chars.charAt(Math.floor(Math.random() * chars.length))
}
captchaCode.value = code
}
// 刷新验证码
const refreshCaptcha = () => {
generateCaptcha()
}
// 校验单个字段
const validateField = (field: keyof typeof errors) => {
errors[field] = ''
switch (field) {
case 'username':
if (!loginForm.username) {
errors.username = '请输入用户名'
} else if (!ValidateEXTEND.minLength(loginForm.username, 3)) {
errors.username = '用户名至少3个字符'
}
break
case 'password':
if (!loginForm.password) {
errors.password = '请输入密码'
} else if (!ValidateEXTEND.minLength(loginForm.password, 6)) {
errors.password = '密码至少6个字符'
}
break
case 'captcha':
if (!loginForm.captcha) {
errors.captcha = '请输入验证码'
} else if (loginForm.captcha.toUpperCase() !== captchaCode.value.toUpperCase()) {
errors.captcha = '验证码错误'
}
break
}
return !errors[field]
}
// 校验整个表单
const validateForm = () => {
const usernameValid = validateField('username')
const passwordValid = validateField('password')
const captchaValid = validateField('captcha')
return usernameValid && passwordValid && captchaValid
}
// 显示提示
const showTips = (message: string, type: 'success' | 'error' | 'info' = 'info') => {
tips.message = message
tips.type = type
tips.show = true
setTimeout(() => {
tips.show = false
}, 3000)
}
// 处理登录
const handleLogin = async () => {
// 校验表单
if (!validateForm()) {
return
}
// 开始加载
isLoading.value = true
userStore.setLoginLoading(true)
try {
// 模拟登录（实际项目中调用API）
// const userService = new UserSERVICE()
// const result = await userService.login(loginForm as ILoginParams)
// 模拟登录成功
await new Promise((resolve) => setTimeout(resolve, 1000))
// 设置用户信息
userStore.setUserInfo(
{
id: 1001,
username: loginForm.username,
nickname: loginForm.username,
role: 'admin'
},
'demo-token-' + Date.now()
)
showTips('登录成功！', 'success')
// 跳转到首页
setTimeout(() => {
router.push('/home')
}, 1000)
} catch (error: any) {
console.error('登录失败：', error)
showTips(error.message || '登录失败，请稍后重试', 'error')
// 刷新验证码
refreshCaptcha()
loginForm.captcha = ''
} finally {
isLoading.value = false
userStore.setLoginLoading(false)
}
}
// 初始化
onMounted(() => {
// 如果已登录，跳转到首页
if (userStore.isLogin) {
router.push('/home')
return
}
// 生成验证码
generateCaptcha()
})
</script>
<style scoped>
.page-login {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.login-container {
width: 100%;
max-width: 400px;
padding: 20px;
}
.login-box {
background-color: var(--bg-color);
border-radius: 12px;
padding: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-title {
font-size: 28px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 10px;
}
.login-subtitle {
font-size: 14px;
color: var(--text-color-secondary);
}
.login-form {
width: 100%;
}
.form-item {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 14px;
color: var(--text-color);
margin-bottom: 8px;
}
.form-input {
width: 100%;
height: 40px;
padding: 0 12px;
font-size: 14px;
color: var(--text-color);
background-color: var(--bg-color-page);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
transition: border-color 0.3s;
}
.form-input:focus {
border-color: var(--primary-color);
outline: none;
}
.form-input::placeholder {
color: var(--text-color-placeholder);
}
.form-error {
display: block;
font-size: 12px;
color: var(--danger-color);
margin-top: 5px;
}
.captcha-wrapper {
display: flex;
gap: 10px;
}
.captcha-input {
flex: 1;
}
.captcha-code {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bg-color-page);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
font-size: 18px;
font-weight: 600;
letter-spacing: 4px;
color: var(--primary-color);
cursor: pointer;
user-select: none;
}
.captcha-code:hover {
background-color: var(--border-color-lighter);
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: var(--text-color-secondary);
cursor: pointer;
}
.checkbox-label input[type='checkbox'] {
width: 16px;
height: 16px;
cursor: pointer;
}
.forgot-link {
font-size: 14px;
color: var(--primary-color);
text-decoration: none;
}
.forgot-link:hover {
text-decoration: underline;
}
.login-btn {
width: 100%;
height: 44px;
font-size: 16px;
font-weight: 500;
color: #fff;
background-color: var(--primary-color);
border: none;
border-radius: var(--border-radius);
cursor: pointer;
transition: background-color 0.3s;
}
.login-btn:hover:not(:disabled) {
background-color: #66b1ff;
}
.login-btn:disabled {
background-color: var(--border-color);
cursor: not-allowed;
}
.login-footer {
text-align: center;
margin-top: 20px;
}
.register-tip {
font-size: 14px;
color: var(--text-color-secondary);
}
.register-link {
font-size: 14px;
color: var(--primary-color);
text-decoration: none;
margin-left: 5px;
}
.register-link:hover {
text-decoration: underline;
}
.login-tips {
margin-top: 20px;
text-align: center;
}
.tip-text {
font-size: 14px;
padding: 10px;
border-radius: var(--border-radius);
}
.tip-text.success {
color: var(--success-color);
background-color: rgba(103, 194, 58, 0.1);
}
.tip-text.error {
color: var(--danger-color);
background-color: rgba(245, 108, 108, 0.1);
}
.tip-text.info {
color: var(--info-color);
background-color: rgba(144, 147, 153, 0.1);
}
</style>

438
Web/src/pages/home/index.vue Normal file
View File

@@ -0,0 +1,438 @@
<template>
<div class="page-home">
<div class="container">
<h1 class="page-title">Nuxt4 + Pinia 前端框架 Demo</h1>
<p class="page-desc">本页面展示了框架各核心模块的调用方式</p>
<!-- 1. Pinia状态管理Demo -->
<section class="demo-section">
<h2 class="section-title">1. Pinia 状态管理</h2>
<div class="demo-card">
<div class="demo-item">
<span class="label">登录状态：</span>
<span class="value">{{ userStore.isLogin ? '已登录' : '未登录' }}</span>
</div>
<div class="demo-item">
<span class="label">用户ID：</span>
<span class="value">{{ userStore.userId || '-' }}</span>
</div>
<div class="demo-item">
<span class="label">用户昵称：</span>
<span class="value">{{ userStore.userNickname }}</span>
</div>
<div class="demo-item">
<span class="label">用户角色：</span>
<span class="value">{{ userStore.userRole }}</span>
</div>
<div class="demo-actions">
<button class="btn btn-primary" @click="setUserInfo">设置用户信息</button>
<button class="btn btn-danger" @click="clearUserInfo">清除用户信息</button>
</div>
</div>
</section>
<!-- 2. EXTEND工具库Demo -->
<section class="demo-section">
<h2 class="section-title">2. EXTEND 工具库</h2>
<div class="demo-card">
<h3 class="card-title">DateEXTEND - 日期工具</h3>
<div class="demo-item">
<span class="label">当前时间戳：</span>
<span class="value">{{ currentTimestamp }}</span>
</div>
<div class="demo-item">
<span class="label">格式化时间：</span>
<span class="value">{{ formattedTime }}</span>
</div>
<div class="demo-item">
<span class="label">智能时间显示：</span>
<span class="value">{{ smartTime }}</span>
</div>
<div class="demo-item">
<span class="label">是否今天：</span>
<span class="value">{{ isToday ? '是' : '否' }}</span>
</div>
</div>
<div class="demo-card">
<h3 class="card-title">CryptoEXTEND - 加密工具</h3>
<div class="demo-item">
<span class="label">原始字符串：</span>
<span class="value">{{ originalText }}</span>
</div>
<div class="demo-item">
<span class="label">Base64加密：</span>
<span class="value">{{ encryptedBase64 }}</span>
</div>
<div class="demo-item">
<span class="label">自定义密钥加密：</span>
<span class="value">{{ encryptedWithKey }}</span>
</div>
<div class="demo-item">
<span class="label">自定义密钥解密：</span>
<span class="value">{{ decryptedWithKey }}</span>
</div>
<div class="demo-actions">
<button class="btn btn-primary" @click="testCrypto">测试加密解密</button>
</div>
</div>
<div class="demo-card">
<h3 class="card-title">ValidateEXTEND - 校验工具</h3>
<div class="demo-item">
<span class="label">手机号校验：</span>
<span class="value">{{ validateResult.phone }}</span>
</div>
<div class="demo-item">
<span class="label">邮箱校验：</span>
<span class="value">{{ validateResult.email }}</span>
</div>
<div class="demo-item">
<span class="label">身份证校验：</span>
<span class="value">{{ validateResult.idCard }}</span>
</div>
<div class="demo-item">
<span class="label">密码强度校验：</span>
<span class="value">{{ validateResult.password }}</span>
</div>
<div class="demo-actions">
<button class="btn btn-primary" @click="testValidate">测试校验</button>
</div>
</div>
</section>
<!-- 3. API服务Demo -->
<section class="demo-section">
<h2 class="section-title">3. API 服务调用</h2>
<div class="demo-card">
<h3 class="card-title">UserSERVICE - 用户服务</h3>
<div class="demo-item">
<span class="label">服务调用方式：</span>
<span class="value">const userService = new UserSERVICE()</span>
</div>
<div class="demo-item">
<span class="label">可用方法：</span>
<span class="value">login(), getInfo(), logout(), updateInfo(), changePassword()</span>
</div>
<div class="demo-actions">
<button class="btn btn-primary" @click="testUserService">测试用户服务</button>
</div>
</div>
<div class="demo-card">
<h3 class="card-title">CommonSERVICE - 通用服务</h3>
<div class="demo-item">
<span class="label">服务调用方式：</span>
<span class="value">const commonService = new CommonSERVICE()</span>
</div>
<div class="demo-item">
<span class="label">可用方法：</span>
<span class="value">getDict(), upload(), getConfig(), sendSmsCode()</span>
</div>
<div class="demo-actions">
<button class="btn btn-primary" @click="testCommonService">测试通用服务</button>
</div>
</div>
</section>
<!-- 4. Composables Demo -->
<section class="demo-section">
<h2 class="section-title">4. Composables 组合式函数</h2>
<div class="demo-card">
<h3 class="card-title">useAuth - 权限校验</h3>
<div class="demo-item">
<span class="label">是否已登录：</span>
<span class="value">{{ authState.isLogin ? '是' : '否' }}</span>
</div>
<div class="demo-item">
<span class="label">是否为管理员：</span>
<span class="value">{{ authState.isAdmin ? '是' : '否' }}</span>
</div>
<div class="demo-actions">
<button class="btn btn-primary" @click="testAuth">测试权限校验</button>
</div>
</div>
</section>
<!-- 5. App状态Demo -->
<section class="demo-section">
<h2 class="section-title">5. 应用状态管理</h2>
<div class="demo-card">
<div class="demo-item">
<span class="label">当前主题：</span>
<span class="value">{{ appStore.theme }}</span>
</div>
<div class="demo-item">
<span class="label">当前语言：</span>
<span class="value">{{ appStore.locale }}</span>
</div>
<div class="demo-item">
<span class="label">设备类型：</span>
<span class="value">{{ appStore.device }}</span>
</div>
<div class="demo-item">
<span class="label">屏幕尺寸：</span>
<span class="value">{{ appStore.screenWidth }} x {{ appStore.screenHeight }}</span>
</div>
<div class="demo-actions">
<button class="btn btn-primary" @click="toggleTheme">切换主题</button>
<button class="btn" @click="setLoading">测试加载态</button>
</div>
</div>
</section>
<!-- 6. 路由Demo -->
<section class="demo-section">
<h2 class="section-title">6. 路由导航</h2>
<div class="demo-card">
<div class="demo-item">
<span class="label">当前路径：</span>
<span class="value">{{ route.path }}</span>
</div>
<div class="demo-actions">
<NuxtLink to="/auth/login" class="btn btn-primary">跳转到登录页</NuxtLink>
</div>
</div>
</section>
</div>
</div>
</template>
<script setup lang="ts">
// stores、composables、extends、services 目录下的内容已自动导入
// 无需手动import，直接使用即可
// 使用Pinia状态仓库（自动导入）
const userStore = useUserStore()
const appStore = useAppStore()
// 使用Composables
const auth = useAuth()
// 路由
const route = useRoute()
// DateEXTEND Demo
// 使用客户端时间，避免SSR水合问题
const currentTimestamp = ref(0)
const formattedTime = ref('')
const smartTime = ref('')
const isToday = ref(false)
// 在客户端初始化时间
if (import.meta.client) {
currentTimestamp.value = DateEXTEND.now()
formattedTime.value = DateEXTEND.format(Date.now())
smartTime.value = DateEXTEND.smartFormat(Date.now() - 3600000)
isToday.value = DateEXTEND.isToday(Date.now())
}
// CryptoEXTEND Demo
const originalText = ref('Hello Kx Framework')
const encryptedBase64 = ref('')
const encryptedWithKey = ref('')
const decryptedWithKey = ref('')
// ValidateEXTEND Demo
const validateResult = ref({
phone: '',
email: '',
idCard: '',
password: ''
})
// Auth Demo
const authState = computed(() => ({
isLogin: auth.isLogin.value,
isAdmin: auth.isAdmin()
}))
// 测试设置用户信息
const setUserInfo = () => {
userStore.setUserInfo(
{
id: 1001,
username: 'admin',
nickname: '管理员',
role: 'admin'
},
'demo-token-12345'
)
}
// 测试清除用户信息
const clearUserInfo = () => {
userStore.clearUserInfo()
}
// 测试加密解密
const testCrypto = () => {
// Base64加密
const crypto = new CryptoEXTEND()
encryptedBase64.value = crypto.encryptBase64(originalText.value)
// 自定义密钥加密
const customCrypto = new CryptoEXTEND('my-secret-key')
encryptedWithKey.value = customCrypto.encrypt(originalText.value)
decryptedWithKey.value = customCrypto.decrypt(encryptedWithKey.value)
}
// 测试校验工具
const testValidate = () => {
validateResult.value = {
phone: ValidateEXTEND.isPhone('13800138000') ? '有效' : '无效',
email: ValidateEXTEND.isEmail('test@example.com') ? '有效' : '无效',
idCard: ValidateEXTEND.isIdCard('110101199001011234') ? '有效' : '无效',
password: ValidateEXTEND.isPassword('Aa123456') ? '有效' : '无效'
}
}
// 测试用户服务
const testUserService = () => {
const userService = new UserSERVICE()
console.log('UserSERVICE 实例创建成功:', userService)
console.log('可用方法: login(), getInfo(), logout(), updateInfo(), changePassword()')
alert('UserSERVICE 实例已创建，请查看控制台输出')
}
// 测试通用服务
const testCommonService = () => {
const commonService = new CommonSERVICE()
console.log('CommonSERVICE 实例创建成功:', commonService)
console.log('可用方法: getDict(), upload(), getConfig(), sendSmsCode()')
alert('CommonSERVICE 实例已创建，请查看控制台输出')
}
// 测试权限校验
const testAuth = () => {
console.log('isLogin:', auth.isLogin.value)
console.log('userId:', auth.getUserId())
console.log('nickname:', auth.getNickname())
console.log('hasRole(admin):', auth.hasRole('admin'))
console.log('isAdmin:', auth.isAdmin())
alert('权限校验测试完成，请查看控制台输出')
}
// 切换主题
const toggleTheme = () => {
appStore.toggleTheme()
}
// 测试加载态
const setLoading = () => {
appStore.startLoading('正在加载数据...')
setTimeout(() => {
appStore.endLoading()
alert('加载完成')
}, 2000)
}
// 初始化测试
onMounted(() => {
testCrypto()
testValidate()
})
</script>
<style scoped>
.page-home {
min-height: 100%;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.page-title {
font-size: 28px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 10px;
}
.page-desc {
font-size: 14px;
color: var(--text-color-secondary);
margin-bottom: 30px;
}
.demo-section {
margin-bottom: 30px;
}
.section-title {
font-size: 20px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 15px;
padding-left: 10px;
border-left: 4px solid var(--primary-color);
}
.demo-card {
background-color: var(--bg-color);
border-radius: var(--border-radius);
padding: 20px;
margin-bottom: 15px;
box-shadow: var(--box-shadow-light);
}
.card-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color-lighter);
}
.demo-item {
display: flex;
padding: 8px 0;
}
.demo-item .label {
width: 160px;
color: var(--text-color-secondary);
flex-shrink: 0;
}
.demo-item .value {
color: var(--text-color);
word-break: break-all;
}
.demo-actions {
display: flex;
gap: 10px;
margin-top: 15px;
flex-wrap: wrap;
}
.btn {
padding: 8px 16px;
border-radius: var(--border-radius);
font-size: 14px;
transition: all 0.3s;
text-decoration: none;
display: inline-block;
background-color: var(--bg-color-page);
color: var(--text-color);
}
.btn:hover {
opacity: 0.8;
}
.btn-primary {
background-color: var(--primary-color);
color: #fff;
}
.btn-danger {
background-color: var(--danger-color);
color: #fff;
}
</style>

13
Web/src/pages/index.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div>
<!-- 重定向到 /home -->
</div>
</template>
<script setup lang="ts">
const router = useRouter()
onMounted(() => {
router.replace('/home')
})
</script>