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

111

Browse Source
This commit is contained in:
Putoo
2026-04-21 20:36:13 +08:00
parent 6a2028e366
commit 996bdbbd1c
9 changed files with 1243 additions and 1134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

435
Web/src/pages/home/index.vue
View File

@@ -1,438 +1,15 @@
<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>
<div class="page-home"></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()
definePageMeta({
layout: layout.default
})
</script>
<style scoped>
.page-home {
min-height: 100%;
min-height: 100vh;
}
.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>
</style>