ethan.chen/score-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update authentication response handling, improve UI layout, and adjust CSS for better responsiveness

Browse Source
This commit is contained in:
ethan.chen
2025-05-20 18:16:41 +08:00
parent b84138c7a9
commit 27ceef4bd2
3 changed files with 37 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/App.svelte
View File

@@ -101,15 +101,15 @@
pageSize: 10 pageSize: 10
} }
}); });
console.log(response)
if (response.code === 0) { if (response.data.code === 0) {
isAuthenticated.set(true); isAuthenticated.set(true);
error.set(''); error.set('');
// 设置初始数据 // 设置初始数据
mediaList.set(response.data.list); mediaList.set(response.data.data.list);
totalItems.set(response.data.total); totalItems.set(response.data.data.total);
} else { } else {
error.set(response.message || 'Invalid username or password'); error.set(response.data.message || 'Invalid username or password');
localStorage.removeItem('auth'); localStorage.removeItem('auth');
} }
} catch (e: any) { } catch (e: any) {
@@ -125,9 +125,9 @@
{#if !$isAuthenticated} {#if !$isAuthenticated}
<div class="min-h-screen flex items-center justify-center bg-gray-100" transition:fade> <div class="min-h-screen flex items-center justify-center bg-gray-100" transition:fade>
<div class="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow-lg"> <div class="w-[480px] space-y-8 p-8 bg-white rounded-lg shadow-lg">
<div> <div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900"> <h2 class="text-center text-3xl font-extrabold text-gray-900">
My Score My Score
</h2> </h2>
<p class="mt-2 text-center text-sm text-gray-600"> <p class="mt-2 text-center text-sm text-gray-600">
@@ -135,28 +135,28 @@
</p> </p>
</div> </div>
<form class="mt-8 space-y-6" on:submit|preventDefault={handleLogin}> <form class="mt-8 space-y-6" on:submit|preventDefault={handleLogin}>
<div class="rounded-md shadow-sm -space-y-px"> <div class="space-y-4">
<div> <div>
<label for="username" class="sr-only">Username</label> <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
<input <input
id="username" id="username"
name="username" name="username"
type="text" type="text"
required required
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
placeholder="Username" placeholder="Enter your username"
bind:value={$username} bind:value={$username}
/> />
</div> </div>
<div> <div>
<label for="password" class="sr-only">Password</label> <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
<input <input
id="password" id="password"
name="password" name="password"
type="password" type="password"
required required
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
placeholder="Password" placeholder="Enter your password"
bind:value={$password} bind:value={$password}
/> />
</div> </div>
@@ -171,7 +171,7 @@
<div> <div>
<button <button
type="submit" type="submit"
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
> >
Sign in Sign in
</button> </button>
@@ -181,11 +181,11 @@
</div> </div>
{:else} {:else}
<div class="min-h-screen bg-gray-100" transition:fade> <div class="min-h-screen bg-gray-100" transition:fade>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <div class="max-w-[1200px] mx-auto px-6 py-8">
<!-- 类别选择栏 --> <!-- 类别选择栏 -->
<div class="bg-white shadow rounded-lg mb-6"> <div class="bg-white shadow rounded-lg mb-6">
<div class="px-4 py-5 sm:p-6"> <div class="px-6 py-4">
<div class="flex space-x-4"> <div class="flex space-x-6">
{#each categories as category} {#each categories as category}
<button <button
class="px-4 py-2 rounded-md text-sm font-medium {$currentCategory === category.id ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}" class="px-4 py-2 rounded-md text-sm font-medium {$currentCategory === category.id ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
@@ -200,21 +200,26 @@
<!-- 媒体列表 --> <!-- 媒体列表 -->
<div class="bg-white shadow rounded-lg"> <div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6"> <div class="px-6 py-4">
{#if $loading} {#if $loading}
<div class="text-center py-4"> <div class="text-center py-8">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mx-auto"></div> <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mx-auto"></div>
</div> </div>
{:else} {:else}
<div class="space-y-4"> <div class="grid grid-cols-2 gap-6">
{#each $mediaList as media} {#each $mediaList as media}
<div class="border rounded-lg p-4 hover:bg-gray-50"> <div class="border rounded-lg p-6 hover:bg-gray-50">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div> <div class="space-y-2">
<h3 class="text-lg font-medium text-gray-900">{media.title}</h3> <h3 class="text-lg font-medium text-gray-900">{media.title}</h3>
<p class="text-sm text-gray-500">Status: {media.status}</p> <div class="flex items-center space-x-4 text-sm text-gray-500">
{#if media.rating} <span class="px-2 py-1 bg-gray-100 rounded">Status: {media.status}</span>
<p class="text-sm text-gray-500">Rating: {media.rating}/10</p> {#if media.rating}
<span class="px-2 py-1 bg-gray-100 rounded">Rating: {media.rating}/10</span>
{/if}
</div>
{#if media.platform}
<p class="text-sm text-gray-500">Platform: {media.platform}</p>
{/if} {/if}
</div> </div>
<div class="text-sm text-gray-500"> <div class="text-sm text-gray-500">
@@ -226,20 +231,20 @@
</div> </div>
<!-- 分页控制 --> <!-- 分页控制 -->
<div class="mt-4 flex justify-between items-center"> <div class="mt-6 flex justify-between items-center">
<div class="text-sm text-gray-700"> <div class="text-sm text-gray-700">
Showing {($currentPage - 1) * $pageSize + 1} to {Math.min($currentPage * $pageSize, $totalItems)} of {$totalItems} items Showing {($currentPage - 1) * $pageSize + 1} to {Math.min($currentPage * $pageSize, $totalItems)} of {$totalItems} items
</div> </div>
<div class="flex space-x-2"> <div class="flex space-x-2">
<button <button
class="px-3 py-1 rounded-md text-sm font-medium {$currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border'}" class="px-4 py-2 rounded-md text-sm font-medium {$currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border'}"
disabled={$currentPage === 1} disabled={$currentPage === 1}
on:click={() => currentPage.set($currentPage - 1)} on:click={() => currentPage.set($currentPage - 1)}
> >
Previous Previous
</button> </button>
<button <button
class="px-3 py-1 rounded-md text-sm font-medium {$currentPage * $pageSize >= $totalItems ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border'}" class="px-4 py-2 rounded-md text-sm font-medium {$currentPage * $pageSize >= $totalItems ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border'}"
disabled={$currentPage * $pageSize >= $totalItems} disabled={$currentPage * $pageSize >= $totalItems}
on:click={() => currentPage.set($currentPage + 1)} on:click={() => currentPage.set($currentPage + 1)}
> >

3
src/app.css
View File

@@ -44,9 +44,8 @@ h1 {
} }
#app { #app {
max-width: 1280px; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 2rem;
text-align: center; text-align: center;
} }

4
src/lib/request.ts
View File

@@ -1,7 +1,7 @@
/* /*
* @Date: 2025-05-19 18:10:10 * @Date: 2025-05-19 18:10:10
* @LastEditors: 陈子健 * @LastEditors: 陈子健
* @LastEditTime: 2025-05-19 18:23:05 * @LastEditTime: 2025-05-20 18:14:14
* @FilePath: /my-score/frontend/src/lib/request.ts * @FilePath: /my-score/frontend/src/lib/request.ts
*/ */
import axios from 'axios'; import axios from 'axios';
@@ -32,7 +32,7 @@ request.interceptors.request.use(
// 响应拦截器 // 响应拦截器
request.interceptors.response.use( request.interceptors.response.use(
(response) => { (response) => {
return response.data; return response;
}, },
(error) => { (error) => {
if (error.response?.status === 401) { if (error.response?.status === 401) {