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
}
});
console.log(response)
if (response.code === 0) {
if (response.data.code === 0) {
isAuthenticated.set(true);
error.set('');
// 设置初始数据
mediaList.set(response.data.list);
totalItems.set(response.data.total);
mediaList.set(response.data.data.list);
totalItems.set(response.data.data.total);
} else {
error.set(response.message || 'Invalid username or password');
error.set(response.data.message || 'Invalid username or password');
localStorage.removeItem('auth');
}
} catch (e: any) {
@@ -125,9 +125,9 @@
{#if !$isAuthenticated}
<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>
<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
</h2>
<p class="mt-2 text-center text-sm text-gray-600">
@@ -135,28 +135,28 @@
</p>
</div>
<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>
<label for="username" class="sr-only">Username</label>
<label for="username" class="block text-sm font-medium text-gray-700">Username</label>
<input
id="username"
name="username"
type="text"
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"
placeholder="Username"
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="Enter your username"
bind:value={$username}
/>
</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
id="password"
name="password"
type="password"
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"
placeholder="Password"
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="Enter your password"
bind:value={$password}
/>
</div>
@@ -171,7 +171,7 @@
<div>
<button
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
</button>
@@ -181,11 +181,11 @@
</div>
{:else}
<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="px-4 py-5 sm:p-6">
<div class="flex space-x-4">
<div class="px-6 py-4">
<div class="flex space-x-6">
{#each categories as category}
<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'}"
@@ -200,21 +200,26 @@
<!-- 媒体列表 -->
<div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="px-6 py-4">
{#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>
{:else}
<div class="space-y-4">
<div class="grid grid-cols-2 gap-6">
{#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>
<div class="space-y-2">
<h3 class="text-lg font-medium text-gray-900">{media.title}</h3>
<p class="text-sm text-gray-500">Status: {media.status}</p>
{#if media.rating}
<p class="text-sm text-gray-500">Rating: {media.rating}/10</p>
<div class="flex items-center space-x-4 text-sm text-gray-500">
<span class="px-2 py-1 bg-gray-100 rounded">Status: {media.status}</span>
{#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}
</div>
<div class="text-sm text-gray-500">
@@ -226,20 +231,20 @@
</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">
Showing {($currentPage - 1) * $pageSize + 1} to {Math.min($currentPage * $pageSize, $totalItems)} of {$totalItems} items
</div>
<div class="flex space-x-2">
<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}
on:click={() => currentPage.set($currentPage - 1)}
>
Previous
</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}
on:click={() => currentPage.set($currentPage + 1)}
>

3
src/app.css
View File

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

4
src/lib/request.ts
View File

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