refactor(layout): 重构应用布局结构
- 将原有布局中的侧边栏和头部组件拆分为独立的 AppSidebar 和 AppHeader 组件 - 移除内联的导航逻辑和样式,交由专用组件管理 - 更新图标库,优化部分图标的显示效果 - 简化认证存储逻辑,增强状态持久化与安全性 - 优化侧边栏状态管理机制,提高响应式体验 - 改进登录流程错误处理,增加网络异常提示 - 调整路由组件结构,提升代码可维护性
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import type { Actions } from './$types';
|
||||
import { fail } from '@sveltejs/kit';
|
||||
import { fail, redirect } from '@sveltejs/kit';
|
||||
import { authService } from '$lib/api/services/authService.ts';
|
||||
import { resolve } from '$app/paths';
|
||||
import { HttpError } from '$lib/api/httpClient.ts';
|
||||
@@ -25,6 +25,22 @@ export const actions:Actions = {
|
||||
})
|
||||
}
|
||||
|
||||
const regexp = /^[a-zA-Z0-9_-]{5,16}$/
|
||||
|
||||
if (!regexp.test(username)){
|
||||
return fail(400,{
|
||||
username: username.toString(),
|
||||
message: '用户名格式错误,请输入5-16位字符,只能包含字母、数字、下划线、减号'
|
||||
})
|
||||
}
|
||||
|
||||
if (password.length<8 || password.length>16){
|
||||
return fail(400,{
|
||||
message: '密码格式错误,请输入8-16位字符'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
try{
|
||||
const response = await authService.login({username,password});
|
||||
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
import Icon from '$lib/components/icon/Icon.svelte';
|
||||
import { toast } from '$lib/stores/toastStore.ts';
|
||||
import { enhance } from '$app/forms';
|
||||
import type { EnhanceResult, LoginFailure } from '$lib/types/api.ts';
|
||||
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let loading = false;
|
||||
|
||||
</script>
|
||||
|
||||
@@ -24,13 +24,25 @@
|
||||
|
||||
<form method="post"
|
||||
use:enhance={() => {
|
||||
loading = true;
|
||||
return async ({ result , update }) => {
|
||||
const res = result as EnhanceResult<LoginFailure>;
|
||||
if (res.status === 200) {
|
||||
toast.success('登录成功');
|
||||
update();
|
||||
} else {
|
||||
toast.error(res.data.message);
|
||||
loading = false;
|
||||
if (result.type === 'failure') {
|
||||
|
||||
if (typeof result.data?.message === 'string' ){
|
||||
toast.error(result.data?.message)
|
||||
}
|
||||
await update();
|
||||
|
||||
}else if (result.type === 'success') {
|
||||
|
||||
if (typeof result.data?.message === 'string' ){
|
||||
toast.success(result.data?.message || '登录成功')
|
||||
}
|
||||
|
||||
if (result.data?.redirectTo && typeof result.data?.redirectTo === 'string') {
|
||||
await goto(resolve(result.data.redirectTo));
|
||||
}
|
||||
}
|
||||
};
|
||||
}}
|
||||
@@ -38,7 +50,7 @@
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="username">
|
||||
<span class="label-text" >用户名</span>
|
||||
<span class="label-text">用户名</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
@@ -49,7 +61,9 @@
|
||||
required
|
||||
/>
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
|
||||
class="w-4 h-4 opacity-70"><path
|
||||
d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" /></svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,7 +81,10 @@
|
||||
required
|
||||
/>
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70"><path fill-rule="evenodd" d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z" clip-rule="evenodd" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
|
||||
class="w-4 h-4 opacity-70"><path fill-rule="evenodd"
|
||||
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
|
||||
clip-rule="evenodd" /></svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -78,16 +95,17 @@
|
||||
<input type="checkbox" class="checkbox checkbox-sm checkbox-primary" />
|
||||
<span class="label-text">记住我</span>
|
||||
</label>
|
||||
<div class="label" >
|
||||
<div class="label">
|
||||
<a href={resolve('/auth/forgetPassword')} class="label-text-alt link link-hover">忘记密码?</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control mt-2">
|
||||
<button class="btn btn-primary w-full" >
|
||||
|
||||
登录
|
||||
|
||||
<button class="btn btn-primary w-full {loading?'btn-disabled ':''}" >
|
||||
{#if loading}
|
||||
<span class="loading loading-spinner"></span>
|
||||
{/if}
|
||||
<span>登录</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user