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

Compare commits

merge into: ethan.chen:main
Branches Tags
ethan.chen:main ethan.chen:dev
...
pull from: ethan.chen:dev
Branches Tags
ethan.chen:dev ethan.chen:main

1 Commits
main ... dev

Author SHA1 Message Date
ethan.chen
e6ad264bae feat: 优化页面主题为亮蓝色系，增加色彩丰富度 2026-01-08 16:14:29 +08:00
6 changed files with 62 additions and 47 deletions
Expand all files Collapse all files

44
src/App.svelte
View File

@@ -232,45 +232,45 @@
<Toast /> <Toast />
{#if isInitializing} {#if isInitializing}
<div class="min-h-screen flex items-center justify-center bg-gray-100"> <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-sky-50 via-blue-50 to-cyan-50">
<div class="text-center"> <div class="text-center">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div> <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-sky-500 mx-auto"></div>
<p class="mt-4 text-gray-600">加载中...</p> <p class="mt-4 text-sky-700">加载中...</p>
</div> </div>
</div> </div>
{:else if !isAuthenticated} {:else 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-gradient-to-br from-sky-50 via-blue-50 to-cyan-50" transition:fade>
<div class="w-[480px] space-y-8 p-8 bg-white rounded-lg shadow-lg"> <div class="w-[480px] space-y-8 p-8 bg-white/90 backdrop-blur-sm rounded-xl shadow-xl border border-sky-100">
<div> <div>
<h2 class="text-center text-3xl font-extrabold text-gray-900"> <h2 class="text-center text-3xl font-extrabold bg-gradient-to-r from-sky-600 to-blue-600 bg-clip-text text-transparent">
我的评分 我的评分
</h2> </h2>
<p class="mt-2 text-center text-sm text-gray-600"> <p class="mt-2 text-center text-sm text-sky-600">
登录你的账号 登录你的账号
</p> </p>
</div> </div>
<form class="mt-8 space-y-6" onsubmit={handleLogin}> <form class="mt-8 space-y-6" onsubmit={handleLogin}>
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<label for="username" class="block text-sm font-medium text-gray-700">用户名</label> <label for="username" class="block text-sm font-medium text-sky-700">用户名</label>
<input <input
id="username" id="username"
name="username" name="username"
type="text" type="text"
required required
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" class="mt-1 block w-full px-3 py-2 border border-sky-200 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 sm:text-sm bg-white/50"
placeholder="请输入用户名" placeholder="请输入用户名"
bind:value={username} bind:value={username}
/> />
</div> </div>
<div> <div>
<label for="password" class="block text-sm font-medium text-gray-700">密码</label> <label for="password" class="block text-sm font-medium text-sky-700">密码</label>
<input <input
id="password" id="password"
name="password" name="password"
type="password" type="password"
required required
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" class="mt-1 block w-full px-3 py-2 border border-sky-200 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 sm:text-sm bg-white/50"
placeholder="请输入密码" placeholder="请输入密码"
bind:value={password} bind:value={password}
/> />
@@ -286,7 +286,7 @@
<div> <div>
<button <button
type="submit" type="submit"
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" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-blue-500 hover:from-sky-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-all duration-200"
> >
登录 登录
</button> </button>
@@ -295,16 +295,16 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100" transition:fade> <div class="min-h-screen bg-gradient-to-br from-sky-50 via-blue-50 to-cyan-50" transition:fade>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- 类别选择栏 --> <!-- 类别选择栏 -->
<div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl mb-6 border border-gray-200"> <div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl mb-6 border border-sky-200/50">
<div class="px-6 py-4"> <div class="px-6 py-4">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="flex space-x-4"> <div class="flex space-x-4">
{#each categories as category} {#each categories as category}
<button <button
class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentCategory === category.id ? 'bg-gradient-to-r from-indigo-500 to-indigo-600 text-white shadow-sm' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}" class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentCategory === category.id ? 'bg-gradient-to-r from-sky-500 to-blue-500 text-white shadow-md shadow-sky-200' : 'bg-sky-50 text-sky-700 hover:bg-sky-100 border border-sky-200/50'}"
onclick={() => { onclick={() => {
currentCategory = category.id; currentCategory = category.id;
currentPage = 1; currentPage = 1;
@@ -316,7 +316,7 @@
{/each} {/each}
</div> </div>
<button <button
class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-lg hover:from-indigo-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200 shadow-sm hover:shadow-md" class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-blue-500 rounded-lg hover:from-sky-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-all duration-200 shadow-md shadow-sky-200 hover:shadow-lg"
onclick={() => showCreateModal = true} onclick={() => showCreateModal = true}
> >
添加新作品 添加新作品
@@ -326,11 +326,11 @@
</div> </div>
<!-- 媒体列表 --> <!-- 媒体列表 -->
<div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl border border-gray-200"> <div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl border border-sky-200/50">
<div class="px-6 py-4"> <div class="px-6 py-4">
{#if loading} {#if loading}
<div class="text-center py-8"> <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-sky-500 mx-auto"></div>
</div> </div>
{:else} {:else}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -346,7 +346,7 @@
</div> </div>
<div class="flex items-center space-x-1"> <div class="flex items-center space-x-1">
<button <button
class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200 shadow-sm hover:shadow-md'}" class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage === 1 ? 'bg-sky-100 text-sky-300 cursor-not-allowed' : 'bg-white text-sky-700 hover:bg-sky-50 border border-sky-200 shadow-sm hover:shadow-md'}"
disabled={currentPage === 1} disabled={currentPage === 1}
onclick={() => { onclick={() => {
currentPage = currentPage - 1; currentPage = currentPage - 1;
@@ -357,10 +357,10 @@
</button> </button>
{#each pageNumbers as num, i} {#each pageNumbers as num, i}
{#if num === '...'} {#if num === '...'}
<span class="px-2 text-gray-400 select-none">...</span> <span class="px-2 text-sky-400 select-none">...</span>
{:else} {:else}
<button <button
class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage === num ? 'bg-indigo-500 text-white shadow-sm' : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200 shadow-sm hover:shadow-md'}" class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage === num ? 'bg-gradient-to-r from-sky-500 to-blue-500 text-white shadow-md shadow-sky-200' : 'bg-white text-sky-700 hover:bg-sky-50 border border-sky-200 shadow-sm hover:shadow-md'}"
disabled={typeof num === 'number' ? currentPage === num : false} disabled={typeof num === 'number' ? currentPage === num : false}
onclick={() => { onclick={() => {
if (typeof num === 'number') { if (typeof num === 'number') {
@@ -374,7 +374,7 @@
{/if} {/if}
{/each} {/each}
<button <button
class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage * pageSize >= totalItems ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200 shadow-sm hover:shadow-md'}" class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage * pageSize >= totalItems ? 'bg-sky-100 text-sky-300 cursor-not-allowed' : 'bg-white text-sky-700 hover:bg-sky-50 border border-sky-200 shadow-sm hover:shadow-md'}"
disabled={currentPage * pageSize >= totalItems} disabled={currentPage * pageSize >= totalItems}
onclick={() => { onclick={() => {
currentPage = currentPage + 1; currentPage = currentPage + 1;

8
src/app.css
View File

@@ -19,11 +19,11 @@
a { a {
font-weight: 500; font-weight: 500;
color: #646cff; color: #3b82f6;
text-decoration: inherit; text-decoration: inherit;
} }
a:hover { a:hover {
color: #535bf2; color: #60a5fa;
} }
body { body {
@@ -61,7 +61,7 @@ button {
transition: border-color 0.25s; transition: border-color 0.25s;
} }
button:hover { button:hover {
border-color: #646cff; border-color: #3b82f6;
} }
button:focus, button:focus,
button:focus-visible { button:focus-visible {
@@ -74,7 +74,7 @@ button:focus-visible {
background-color: #ffffff; background-color: #ffffff;
} }
a:hover { a:hover {
color: #747bff; color: #60a5fa;
} }
button { button {
background-color: #f9f9f9; background-color: #f9f9f9;

30
src/lib/MediaFormModal.svelte
View File

@@ -50,19 +50,19 @@
{#if show} {#if show}
<div <div
class="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
transition:fade={{ duration: 200 }} transition:fade={{ duration: 200 }}
onclick={handleClose} onclick={handleClose}
role="presentation" role="presentation"
> >
<div <div
class="bg-gradient-to-br from-white to-gray-50 rounded-xl p-6 w-full mx-4 max-w-[800px] shadow-2xl" class="bg-gradient-to-br from-white via-sky-50/80 to-blue-50/80 backdrop-blur-md rounded-xl p-6 w-full mx-4 max-w-[800px] shadow-2xl border border-sky-100/50"
transition:scale={{ duration: 200 }} transition:scale={{ duration: 200 }}
onclick={(e) => e.stopPropagation()} onclick={(e) => e.stopPropagation()}
role="presentation" role="presentation"
> >
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h2 id="modal-title" class="text-xl font-semibold bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent"> <h2 id="modal-title" class="text-xl font-semibold bg-gradient-to-r from-sky-600 to-blue-600 bg-clip-text text-transparent">
{mode === 'add' ? '添加新作品' : '编辑作品'} {mode === 'add' ? '添加新作品' : '编辑作品'}
</h2> </h2>
<button <button
@@ -79,12 +79,12 @@
<form onsubmit={handleSubmit} class="space-y-4"> <form onsubmit={handleSubmit} class="space-y-4">
<div class="flex justify-between items-center gap-6"> <div class="flex justify-between items-center gap-6">
<label class="font-medium text-gray-700 whitespace-nowrap" for="title">标题</label> <label class="font-medium text-sky-700 whitespace-nowrap" for="title">标题</label>
<input <input
id="title" id="title"
type="text" type="text"
bind:value={media.title} bind:value={media.title}
class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200" class="w-full px-3 py-2 border border-sky-200 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 bg-white/90 backdrop-blur-sm transition-all duration-200"
placeholder="请输入标题" placeholder="请输入标题"
required required
aria-required="true" aria-required="true"
@@ -92,11 +92,11 @@
</div> </div>
<div class="flex justify-between items-center gap-6"> <div class="flex justify-between items-center gap-6">
<label class="font-medium text-gray-700 whitespace-nowrap" for="type">类别</label> <label class="font-medium text-sky-700 whitespace-nowrap" for="type">类别</label>
<select <select
id="type" id="type"
bind:value={media.type} bind:value={media.type}
class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200" class="w-full px-3 py-2 border border-sky-200 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 bg-white/90 backdrop-blur-sm transition-all duration-200"
required required
aria-required="true" aria-required="true"
> >
@@ -107,7 +107,7 @@
</div> </div>
<div class="flex justify-between items-center gap-6"> <div class="flex justify-between items-center gap-6">
<label class="font-medium text-gray-700 whitespace-nowrap" for="date">日期</label> <label class="font-medium text-sky-700 whitespace-nowrap" for="date">日期</label>
<DatePicker <DatePicker
value={media.date} value={media.date}
onSelect={(date: string) => media.date = date} onSelect={(date: string) => media.date = date}
@@ -116,7 +116,7 @@
</div> </div>
<div class="flex start items-center gap-6"> <div class="flex start items-center gap-6">
<label for="score" class="font-medium text-gray-700 whitespace-nowrap">评分</label> <label for="score" class="font-medium text-sky-700 whitespace-nowrap">评分</label>
<StarRating <StarRating
value={media.rating} value={media.rating}
onSelect={(score: number) => media.rating = score} onSelect={(score: number) => media.rating = score}
@@ -124,25 +124,25 @@
</div> </div>
{#if media.type === 'game' || media.type === 'other'} {#if media.type === 'game' || media.type === 'other'}
<div class="flex justify-between items-center gap-6"> <div class="flex justify-between items-center gap-6">
<label class="font-medium text-gray-700 whitespace-nowrap" for="platform">{ <label class="font-medium text-sky-700 whitespace-nowrap" for="platform">{
media.type === 'game' ? '平台' : '类别' media.type === 'game' ? '平台' : '类别'
}</label> }</label>
<input <input
id="platform" id="platform"
type="text" type="text"
bind:value={media.platform} bind:value={media.platform}
class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200" class="w-full px-3 py-2 border border-sky-200 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 bg-white/90 backdrop-blur-sm transition-all duration-200"
placeholder="例如：Steam、Netflix、Kindle等" placeholder="例如：Steam、Netflix、Kindle等"
aria-label="输入平台名称" aria-label="输入平台名称"
/> />
</div> </div>
{/if} {/if}
<div class="flex justify-between items-center gap-6"> <div class="flex justify-between items-center gap-6">
<label class="font-medium text-gray-700 whitespace-nowrap" for="notes">备注</label> <label class="font-medium text-sky-700 whitespace-nowrap" for="notes">备注</label>
<textarea <textarea
id="notes" id="notes"
bind:value={media.notes} bind:value={media.notes}
class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200" class="w-full px-3 py-2 border border-sky-200 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 bg-white/90 backdrop-blur-sm transition-all duration-200"
rows="10" rows="10"
placeholder="添加一些备注..." placeholder="添加一些备注..."
aria-label="添加备注信息" aria-label="添加备注信息"
@@ -153,7 +153,7 @@
<div class="flex justify-end gap-3 mt-6"> <div class="flex justify-end gap-3 mt-6">
<button <button
type="button" type="button"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200" class="px-4 py-2 text-sm font-medium text-sky-700 bg-sky-100 rounded-lg hover:bg-sky-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-all duration-200"
onclick={handleClose} onclick={handleClose}
> >
取消 取消
@@ -161,7 +161,7 @@
<button <button
type="button" type="button"
onclick={() => submitMedia(media)} onclick={() => submitMedia(media)}
class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-lg hover:from-indigo-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200 shadow-sm hover:shadow-md" class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-blue-500 rounded-lg hover:from-sky-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-all duration-200 shadow-md shadow-sky-200 hover:shadow-lg"
> >
{mode === 'add' ? '添加' : '保存'} {mode === 'add' ? '添加' : '保存'}
</button> </button>

4
src/lib/MediaItem.svelte
View File

@@ -6,7 +6,7 @@
import { StarRating } from './utils'; import { StarRating } from './utils';
</script> </script>
<div class="bg-white/90 backdrop-blur-sm rounded-xl shadow-[0_2px_8px_-2px_rgba(0,0,0,0.1)] hover:shadow-[0_4px_12px_-4px_rgba(0,0,0,0.15)] transition-all duration-200 border border-gray-100/50 overflow-hidden"> <div class="bg-white/90 backdrop-blur-sm rounded-xl shadow-[0_2px_8px_-2px_rgba(59,130,246,0.1)] hover:shadow-[0_4px_12px_-4px_rgba(59,130,246,0.2)] transition-all duration-200 border border-sky-100/50 overflow-hidden">
<div class="p-6"> <div class="p-6">
<div class="flex justify-between items-center mb-1"> <div class="flex justify-between items-center mb-1">
<span> <span>
@@ -20,7 +20,7 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
onclick={() => onEdit(media)} onclick={() => onEdit(media)}
class="text-gray-400 hover:text-indigo-400 transition-colors duration-200" class="text-gray-400 hover:text-sky-500 transition-colors duration-200"
aria-label="编辑" aria-label="编辑"
> >
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">

2
src/routes/+layout.svelte
View File

@@ -2,6 +2,6 @@
import '../app.css'; import '../app.css';
</script> </script>
<div class="min-h-screen bg-gray-100"> <div class="min-h-screen bg-gradient-to-br from-sky-50 via-blue-50 to-cyan-50">
<slot /> <slot />
</div> </div>

21
tailwind.config.js
View File

@@ -1,8 +1,23 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ["./src/**/*.{html,js,svelte,ts}"],
theme: { theme: {
extend: {}, extend: {
colors: {
"bright-blue": {
50: "#eff6ff",
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a",
},
},
},
}, },
plugins: [], plugins: [],
} };