From f32feafd174eeeaf1b3866b7282471c3fe3f38bc Mon Sep 17 00:00:00 2001
From: kjqwer <2990346238@qq.com>
Date: Thu, 9 Oct 2025 08:32:25 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/ArtistView.vue  | 471 ++++++++++++++++++-----------------
 ui/src/views/RankingView.vue | 156 ++++++++----
 ui/src/views/SearchView.vue  | 333 ++++++++++++++++---------
 3 files changed, 577 insertions(+), 383 deletions(-)

diff --git a/ui/src/views/ArtistView.vue b/ui/src/views/ArtistView.vue
index c3f54d5..f2e294d 100644
--- a/ui/src/views/ArtistView.vue
+++ b/ui/src/views/ArtistView.vue
@@ -31,42 +31,44 @@
           </div>
 
           <div class="artist-actions">
-            <button @click="handleFollow" class="btn btn-primary">
+            <button @click="handleFollow" class="btn btn-primary artist-follow-btn">
               {{ artist.is_followed ? '取消关注' : '关注' }}
             </button>
             <div class="download-section">
-              <div class="download-input-group">
-                <label for="downloadType">下载方式:</label>
-                <select v-model="downloadType" id="downloadType" class="download-select"
-                  @change="handleDownloadTypeChange">
-                  <option value="custom">自定义数量</option>
-                  <option value="pages">按页数选择</option>
-                  <option value="all">全部下载</option>
-                </select>
+              <div class="download-controls">
+                <div class="download-input-group">
+                  <label for="downloadType" class="download-label">下载方式:</label>
+                  <select v-model="downloadType" id="downloadType" class="download-select"
+                    @change="handleDownloadTypeChange">
+                    <option value="custom">自定义数量</option>
+                    <option value="pages">按页数选择</option>
+                    <option value="all">全部下载</option>
+                  </select>
+                </div>
+
+                <!-- 自定义数量输入 -->
+                <div v-if="downloadType === 'custom'" class="download-input-group">
+                  <label for="customLimit" class="download-label">数量:</label>
+                  <input v-model="customLimit" type="number" id="customLimit" class="download-input" :min="1" :max="9999"
+                    placeholder="输入数量" />
+                </div>
+
+                <!-- 按页数选择 -->
+                <div v-if="downloadType === 'pages'" class="download-input-group">
+                  <label for="pageLimit" class="download-label">页数:</label>
+                  <select v-model="pageLimit" id="pageLimit" class="download-select">
+                    <option value="1">1页 (30个)</option>
+                    <option value="2">2页 (60个)</option>
+                    <option value="3">3页 (90个)</option>
+                    <option value="5">5页 (150个)</option>
+                    <option value="10">10页 (300个)</option>
+                    <option value="20">20页 (600个)</option>
+                    <option value="50">50页 (1500个)</option>
+                  </select>
+                </div>
               </div>
 
-              <!-- 自定义数量输入 -->
-              <div v-if="downloadType === 'custom'" class="download-input-group">
-                <label for="customLimit">数量:</label>
-                <input v-model="customLimit" type="number" id="customLimit" class="download-input" :min="1" :max="9999"
-                  placeholder="输入数量" />
-              </div>
-
-              <!-- 按页数选择 -->
-              <div v-if="downloadType === 'pages'" class="download-input-group">
-                <label for="pageLimit">页数:</label>
-                <select v-model="pageLimit" id="pageLimit" class="download-select">
-                  <option value="1">1页 (30个)</option>
-                  <option value="2">2页 (60个)</option>
-                  <option value="3">3页 (90个)</option>
-                  <option value="5">5页 (150个)</option>
-                  <option value="10">10页 (300个)</option>
-                  <option value="20">20页 (600个)</option>
-                  <option value="50">50页 (1500个)</option>
-                </select>
-              </div>
-
-              <button @click="handleDownloadAll" class="btn btn-secondary" :disabled="downloading || !isDownloadValid">
+              <button @click="handleDownloadAll" class="btn btn-secondary download-btn" :disabled="downloading || !isDownloadValid">
                 {{ downloading ? '下载中...' : '下载作品' }}
               </button>
             </div>
@@ -707,14 +709,8 @@ onMounted(async () => {
 <style scoped>
 .artist-page {
   min-height: 100vh;
-  background: #f8fafc;
-  padding: 2rem 0;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 2rem;
+  background: var(--color-bg-secondary);
+  padding: var(--spacing-2xl) 0;
 }
 
 .loading-section,
@@ -727,13 +723,13 @@ onMounted(async () => {
 
 .success-message {
   position: fixed;
-  top: 2rem;
-  right: 2rem;
-  background: #10b981;
+  top: var(--spacing-2xl);
+  right: var(--spacing-2xl);
+  background: var(--color-success);
   color: white;
-  padding: 1rem 1.5rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  padding: var(--spacing-lg) var(--spacing-xl);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
   z-index: 1000;
   animation: slideIn 0.3s ease-out;
 }
@@ -741,7 +737,7 @@ onMounted(async () => {
 .success-content {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--spacing-sm);
 }
 
 .success-icon {
@@ -755,29 +751,32 @@ onMounted(async () => {
     transform: translateX(100%);
     opacity: 0;
   }
-
   to {
     transform: translateX(0);
     opacity: 1;
   }
 }
 
+/* 作者信息卡片 */
 .artist-header {
-  background: white;
-  border-radius: 1rem;
-  padding: 2rem;
-  margin-bottom: 2rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  background: var(--color-bg-primary);
+  border-radius: var(--radius-2xl);
+  padding: var(--spacing-2xl);
+  margin-bottom: var(--spacing-2xl);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-border);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 2rem;
+  gap: var(--spacing-2xl);
 }
 
 .artist-profile {
   display: flex;
-  gap: 1.5rem;
+  gap: var(--spacing-xl);
   align-items: flex-start;
+  flex: 1;
+  min-width: 0; /* 允许内容收缩 */
 }
 
 .artist-avatar {
@@ -785,176 +784,152 @@ onMounted(async () => {
   height: 5rem;
   border-radius: 50%;
   object-fit: cover;
+  flex-shrink: 0;
 }
 
 .artist-info {
   flex: 1;
+  min-width: 0; /* 允许文本截断 */
 }
 
 .artist-name {
   font-size: 2rem;
   font-weight: 700;
-  color: #1f2937;
-  margin: 0 0 0.5rem 0;
+  color: var(--color-text-primary);
+  margin: 0 0 var(--spacing-sm) 0;
+  word-break: break-word;
 }
 
 .artist-account {
-  color: #6b7280;
+  color: var(--color-text-secondary);
   font-size: 1.125rem;
-  margin: 0 0 1rem 0;
+  margin: 0 0 var(--spacing-lg) 0;
+  word-break: break-word;
 }
 
 .artist-comment {
-  color: #374151;
+  color: var(--color-text-primary);
   line-height: 1.6;
   margin: 0;
+  word-break: break-word;
 }
 
+/* 作者操作区域 */
 .artist-actions {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--spacing-lg);
+  flex-shrink: 0;
+  min-width: 200px;
 }
 
+.artist-follow-btn {
+  white-space: nowrap;
+}
+
+/* 下载区域 */
 .download-section {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--spacing-md);
+}
+
+.download-controls {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
 }
 
 .download-input-group {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
 }
 
-.download-input-group label {
+.download-label {
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--color-text-primary);
   font-weight: 500;
   white-space: nowrap;
+  flex-shrink: 0;
 }
 
-.download-select {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  background: white;
-  font-size: 0.875rem;
-  color: #374151;
-  min-width: 100px;
-}
-
+.download-select,
 .download-input {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  background: white;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-primary);
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--color-text-primary);
   min-width: 100px;
-  transition: border-color 0.2s;
+  transition: border-color var(--transition-normal);
 }
 
 .download-input:focus {
   outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.5rem;
-  font-weight: 600;
-  text-decoration: none;
-  transition: all 0.2s;
-  border: none;
-  cursor: pointer;
-  font-size: 1rem;
-  min-width: 120px;
+.download-btn {
+  white-space: nowrap;
 }
 
-.btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: #3b82f6;
-  color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: #2563eb;
-}
-
-.btn-secondary {
-  background: #f3f4f6;
-  color: #374151;
-  border: 1px solid #d1d5db;
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: #e5e7eb;
-}
-
-
-
+/* 作品区域 */
 .artworks-section {
-  background: white;
-  border-radius: 1rem;
-  padding: 2rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  position: relative;
+  background: var(--color-bg-primary);
+  border-radius: var(--radius-2xl);
+  padding: var(--spacing-2xl);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-border);
 }
 
 .section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
+  margin-bottom: var(--spacing-2xl);
 }
 
 .section-header h2 {
   font-size: 1.5rem;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--color-text-primary);
   margin: 0;
 }
 
 .header-controls {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: var(--spacing-lg);
 }
 
 .artwork-filters {
   display: flex;
-  gap: 1rem;
+  gap: var(--spacing-lg);
 }
 
 .filter-select {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  background: white;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-primary);
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--color-text-primary);
 }
 
-/* 顶部分页导航样式 */
+/* 顶部分页导航 */
 .simple-pagination {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  gap: var(--spacing-sm);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-sm) var(--spacing-md);
+  box-shadow: var(--shadow-sm);
 }
 
 .simple-page-btn {
@@ -963,18 +938,18 @@ onMounted(async () => {
   justify-content: center;
   width: 2rem;
   height: 2rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  background: white;
-  color: #374151;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--transition-normal);
   padding: 0;
 }
 
 .simple-page-btn:hover:not(:disabled) {
-  background: #f3f4f6;
-  border-color: #9ca3af;
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border-hover);
   transform: translateY(-1px);
 }
 
@@ -991,7 +966,7 @@ onMounted(async () => {
 
 .simple-page-info {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--color-text-secondary);
   font-weight: 500;
   min-width: 3rem;
   text-align: center;
@@ -1000,14 +975,14 @@ onMounted(async () => {
 .artworks-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 2rem;
-  margin-bottom: 2rem;
+  gap: var(--spacing-2xl);
+  margin-bottom: var(--spacing-2xl);
 }
 
 .empty-section {
   text-align: center;
   padding: 4rem 0;
-  color: #6b7280;
+  color: var(--color-text-secondary);
 }
 
 /* 分页样式 */
@@ -1015,27 +990,27 @@ onMounted(async () => {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
 }
 
 .page-btn {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.5rem;
-  background: white;
-  color: #374151;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--transition-normal);
 }
 
 .page-btn:hover:not(:disabled) {
-  background: #f3f4f6;
-  border-color: #9ca3af;
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border-hover);
 }
 
 .page-btn:disabled {
@@ -1050,7 +1025,7 @@ onMounted(async () => {
 
 .page-numbers {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--spacing-sm);
 }
 
 .page-number {
@@ -1059,84 +1034,84 @@ onMounted(async () => {
   justify-content: center;
   width: 2.5rem;
   height: 2.5rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.5rem;
-  background: white;
-  color: #374151;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--transition-normal);
 }
 
 .page-number:hover {
-  background: #f3f4f6;
-  border-color: #9ca3af;
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border-hover);
 }
 
 .page-number.active {
-  background: #3b82f6;
+  background: var(--color-primary);
   color: white;
-  border-color: #3b82f6;
+  border-color: var(--color-primary);
 }
 
 .page-info {
   display: flex;
   justify-content: center;
-  gap: 2rem;
-  color: #6b7280;
+  gap: var(--spacing-2xl);
+  color: var(--color-text-secondary);
   font-size: 0.875rem;
 }
 
 .jump-to-page {
   display: flex;
   justify-content: center;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  padding: 1rem;
-  background: #f9fafb;
-  border-radius: 0.5rem;
-  border: 1px solid #e5e7eb;
+  margin-top: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+  padding: var(--spacing-lg);
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
 }
 
 .jump-input-group {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--spacing-md);
 }
 
 .jump-input-group label {
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--color-text-primary);
   font-weight: 500;
   white-space: nowrap;
 }
 
 .jump-input {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  background: white;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-primary);
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--color-text-primary);
   min-width: 80px;
   text-align: center;
-  transition: border-color 0.2s;
+  transition: border-color var(--transition-normal);
 }
 
 .jump-input:focus {
   outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
 .jump-btn {
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  background: #3b82f6;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border-radius: var(--radius-md);
+  background: var(--color-primary);
   color: white;
   font-weight: 600;
   text-decoration: none;
-  transition: all 0.2s;
+  transition: all var(--transition-normal);
   border: none;
   cursor: pointer;
   font-size: 0.875rem;
@@ -1144,7 +1119,7 @@ onMounted(async () => {
 }
 
 .jump-btn:hover:not(:disabled) {
-  background: #2563eb;
+  background: var(--color-primary-dark);
   transform: translateY(-1px);
 }
 
@@ -1154,64 +1129,92 @@ onMounted(async () => {
   transform: none;
 }
 
+/* 移动端优化 */
 @media (max-width: 768px) {
-  .container {
-    padding: 0 1rem;
+  .artist-page {
+    padding: var(--spacing-lg) 0;
   }
 
   .artist-header {
     flex-direction: column;
     align-items: stretch;
-  }
-
-  /* 移动端简洁分页导航样式调整 */
-  .simple-pagination {
-    justify-content: center;
-    margin-bottom: 1rem;
+    gap: var(--spacing-xl);
+    padding: var(--spacing-xl);
   }
 
   .artist-profile {
     flex-direction: column;
     text-align: center;
+    align-items: center;
+    gap: var(--spacing-lg);
+  }
+
+  .artist-info {
+    text-align: center;
+  }
+
+  .artist-name {
+    font-size: 1.5rem;
+  }
+
+  .artist-account {
+    font-size: 1rem;
   }
 
   .artist-actions {
-    flex-direction: row;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+    min-width: auto;
   }
 
   .download-section {
-    flex-direction: row;
-    align-items: center;
-    gap: 1rem;
+    gap: var(--spacing-lg);
+  }
+
+  .download-controls {
+    gap: var(--spacing-lg);
   }
 
   .download-input-group {
-    flex-shrink: 0;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-sm);
   }
 
-  .btn {
-    flex: 1;
+  .download-label {
+    text-align: left;
+  }
+
+  .download-select,
+  .download-input {
+    width: 100%;
+    min-width: auto;
   }
 
   .section-header {
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--spacing-lg);
     align-items: stretch;
   }
 
   .header-controls {
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--spacing-lg);
     align-items: stretch;
   }
 
+  .simple-pagination {
+    justify-content: center;
+  }
+
   .artworks-grid {
     grid-template-columns: 1fr;
+    gap: var(--spacing-xl);
   }
 
   .pagination {
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--spacing-lg);
   }
 
   .page-numbers {
@@ -1220,26 +1223,50 @@ onMounted(async () => {
 
   .page-info {
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--spacing-sm);
     text-align: center;
   }
 
   .jump-to-page {
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--spacing-sm);
   }
 
   .jump-input-group {
     flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .jump-input {
-    width: 100%;
+    align-items: stretch;
+    gap: var(--spacing-sm);
   }
 
+  .jump-input,
   .jump-btn {
     width: 100%;
   }
+
+  .success-message {
+    top: var(--spacing-lg);
+    right: var(--spacing-lg);
+    left: var(--spacing-lg);
+    padding: var(--spacing-lg);
+  }
+}
+
+/* 超小屏幕优化 */
+@media (max-width: 480px) {
+  .artist-header {
+    padding: var(--spacing-lg);
+  }
+
+  .artworks-section {
+    padding: var(--spacing-lg);
+  }
+
+  .artist-name {
+    font-size: 1.25rem;
+  }
+
+  .artist-account {
+    font-size: 0.875rem;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/ui/src/views/RankingView.vue b/ui/src/views/RankingView.vue
index b6ff994..554455f 100644
--- a/ui/src/views/RankingView.vue
+++ b/ui/src/views/RankingView.vue
@@ -451,14 +451,14 @@ onMounted(async () => {
 <style scoped>
 .ranking-page {
   min-height: 100vh;
-  background: #f8fafc;
-  padding: 2rem 0;
+  background: var(--color-bg-secondary);
+  padding: var(--spacing-2xl) 0;
 }
 
 .container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 2rem;
+  padding: 0 var(--spacing-2xl);
 }
 
 .loading-section,
@@ -471,21 +471,21 @@ onMounted(async () => {
 
 .success-message {
   position: fixed;
-  top: 2rem;
-  right: 2rem;
-  background: #10b981;
+  top: var(--spacing-2xl);
+  right: var(--spacing-2xl);
+  background: var(--color-success);
   color: white;
-  padding: 1rem 1.5rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  padding: var(--spacing-lg) var(--spacing-xl);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
   z-index: 1000;
-  animation: slideIn 0.3s ease-out;
+  animation: slideIn var(--transition-normal) ease-out;
 }
 
 .success-content {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--spacing-sm);
 }
 
 .success-icon {
@@ -509,119 +509,179 @@ onMounted(async () => {
 .ranking-content {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: var(--spacing-2xl);
 }
 
 .artworks-section {
-  background: white;
-  border-radius: 1rem;
-  padding: 2rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  background: var(--color-bg-primary);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-2xl);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-border);
 }
 
 .artworks-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 2rem;
-  margin-bottom: 2rem;
+  gap: var(--spacing-2xl);
+  margin-bottom: var(--spacing-2xl);
 }
 
 .empty-section {
   text-align: center;
   padding: 4rem 0;
-  color: #6b7280;
+  color: var(--color-text-secondary);
 }
 
 .page-info {
   display: flex;
   justify-content: center;
-  gap: 2rem;
-  color: #6b7280;
+  gap: var(--spacing-2xl);
+  color: var(--color-text-secondary);
   font-size: 0.875rem;
 }
 
 .jump-to-page {
   display: flex;
   justify-content: center;
-  margin-top: 1rem;
+  margin-top: var(--spacing-lg);
+  padding: var(--spacing-lg);
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
 }
 
 .jump-input-group {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  background: #f3f4f6;
-  border: 1px solid #d1d5db;
-  border-radius: 0.5rem;
-  padding: 0.5rem 1rem;
-  width: fit-content;
+  gap: var(--spacing-md);
+}
+
+.jump-input-group label {
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  font-weight: 500;
+  white-space: nowrap;
 }
 
 .jump-input {
-  border: none;
-  background: transparent;
-  padding: 0.5rem 0.25rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-primary);
+  padding: var(--spacing-sm) var(--spacing-md);
   font-size: 0.875rem;
-  width: 50px;
+  border-radius: var(--radius-md);
+  width: 80px;
   text-align: center;
+  color: var(--color-text-primary);
+  transition: border-color var(--transition-normal);
+  min-height: 36px; /* 移动端友好 */
 }
 
 .jump-input:focus {
   outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
 .jump-btn {
-  background: #4f46e5;
+  background: var(--color-primary);
   color: white;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border-radius: var(--radius-md);
   border: none;
   cursor: pointer;
   font-size: 0.875rem;
-  transition: background-color 0.2s ease;
+  transition: all var(--transition-normal);
+  min-height: 36px;
 }
 
 .jump-btn:hover:not(:disabled) {
-  background: #4338ca;
+  background: var(--color-primary-dark);
+  transform: translateY(-1px);
 }
 
 .jump-btn:disabled {
-  background: #9ca3af;
+  background: var(--color-text-tertiary);
   cursor: not-allowed;
-  color: #6b7280;
+  color: var(--color-text-secondary);
+  transform: none;
 }
 
+/* 移动端优化 */
 @media (max-width: 768px) {
+  .ranking-page {
+    padding: var(--spacing-xl) 0;
+  }
+
   .container {
-    padding: 0 1rem;
+    padding: 0 var(--spacing-lg);
+  }
+
+  .success-message {
+    top: var(--spacing-lg);
+    right: var(--spacing-lg);
+    left: var(--spacing-lg);
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+
+  .ranking-content {
+    gap: var(--spacing-xl);
+  }
+
+  .artworks-section {
+    padding: var(--spacing-xl);
+    border-radius: var(--radius-lg);
   }
 
   .artworks-grid {
     grid-template-columns: 1fr;
+    gap: var(--spacing-xl);
   }
 
   .page-info {
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--spacing-sm);
     text-align: center;
   }
 
   .jump-to-page {
-    flex-direction: column;
-    gap: 0.5rem;
+    padding: var(--spacing-md);
   }
 
   .jump-input-group {
     flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .jump-input {
-    width: 100%;
+    align-items: stretch;
+    gap: var(--spacing-sm);
   }
 
+  .jump-input,
   .jump-btn {
     width: 100%;
   }
 }
+
+/* 超小屏幕优化 */
+@media (max-width: 480px) {
+  .ranking-page {
+    padding: var(--spacing-lg) 0;
+  }
+
+  .container {
+    padding: 0 var(--spacing-md);
+  }
+
+  .success-message {
+    top: var(--spacing-md);
+    right: var(--spacing-md);
+    left: var(--spacing-md);
+  }
+
+  .artworks-section {
+    padding: var(--spacing-lg);
+  }
+
+  .artworks-grid {
+    gap: var(--spacing-lg);
+  }
+}
 </style>
\ No newline at end of file
diff --git a/ui/src/views/SearchView.vue b/ui/src/views/SearchView.vue
index e6453f8..1a4f82f 100644
--- a/ui/src/views/SearchView.vue
+++ b/ui/src/views/SearchView.vue
@@ -785,98 +785,107 @@ onUnmounted(() => {
 <style scoped>
 .search-page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: var(--color-bg-secondary);
 }
 
 .search-header {
-  background: white;
-  border-bottom: 1px solid #e5e7eb;
-  padding: 2rem 0;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 2rem;
+  background: var(--color-bg-primary);
+  border-bottom: 1px solid var(--color-border);
+  padding: var(--spacing-2xl) 0;
+  box-shadow: var(--shadow-sm);
 }
 
 .page-title {
   font-size: 2rem;
   font-weight: 700;
-  color: #1f2937;
-  margin-bottom: 2rem;
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-2xl);
 }
 
 .search-form {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--spacing-lg);
 }
 
 .search-type-tabs {
   display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-lg);
+  flex-wrap: wrap;
 }
 
 .tab-btn {
-  padding: 0.5rem 1rem;
-  border: 1px solid #d1d5db;
-  background: white;
-  color: #6b7280;
-  border-radius: 0.375rem;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-primary);
+  color: var(--color-text-secondary);
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--transition-normal);
   font-size: 0.875rem;
+  white-space: nowrap;
+  min-height: 44px; /* 移动端触摸友好 */
 }
 
 .tab-btn:hover {
-  background: #f3f4f6;
-  color: #374151;
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
 }
 
 .tab-btn.active {
-  background: #3b82f6;
+  background: var(--color-primary);
   color: white;
-  border-color: #3b82f6;
+  border-color: var(--color-primary);
 }
 
 .search-input-group {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--spacing-sm);
 }
 
 .search-input {
   flex: 1;
-  padding: 0.75rem 1rem;
-  border: 2px solid #e5e7eb;
-  border-radius: 0.5rem;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-lg);
   font-size: 1rem;
-  transition: border-color 0.2s;
+  transition: border-color var(--transition-normal);
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  min-height: 44px; /* 移动端触摸友好 */
 }
 
 .search-input:focus {
   outline: none;
-  border-color: #3b82f6;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
 .search-btn {
-  padding: 0.75rem 1rem;
-  background: #3b82f6;
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: var(--color-primary);
   color: white;
   border: none;
-  border-radius: 0.5rem;
+  border-radius: var(--radius-lg);
   cursor: pointer;
-  transition: background-color 0.2s;
+  transition: all var(--transition-normal);
+  min-width: 44px; /* 移动端触摸友好 */
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .search-btn:hover:not(:disabled) {
-  background: #2563eb;
+  background: var(--color-primary-dark);
+  transform: translateY(-1px);
 }
 
 .search-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
+  transform: none;
 }
 
 .search-btn svg {
@@ -888,36 +897,37 @@ onUnmounted(() => {
 .tags-search-section {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--spacing-lg);
 }
 
 .tags-input-group {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--spacing-sm);
 }
 
 .tags-display {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--spacing-lg);
 }
 
 .tags-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: var(--spacing-sm);
 }
 
 .tag-item {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  padding: 0.5rem 0.75rem;
-  background: #e0f2fe;
-  color: #0369a1;
-  border-radius: 1rem;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-info-light);
+  color: var(--color-info);
+  border-radius: var(--radius-2xl);
   font-size: 0.875rem;
   font-weight: 500;
+  border: 1px solid var(--color-info);
 }
 
 .tag-remove {
@@ -928,14 +938,14 @@ onUnmounted(() => {
   height: 1rem;
   background: none;
   border: none;
-  color: #0369a1;
+  color: var(--color-info);
   cursor: pointer;
   border-radius: 50%;
-  transition: all 0.2s;
+  transition: all var(--transition-normal);
 }
 
 .tag-remove:hover {
-  background: #0369a1;
+  background: var(--color-info);
   color: white;
 }
 
@@ -946,159 +956,186 @@ onUnmounted(() => {
 
 .search-filters {
   display: flex;
-  gap: 1rem;
+  gap: var(--spacing-lg);
   flex-wrap: wrap;
 }
 
 .filter-select {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  background: white;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-primary);
   font-size: 0.875rem;
-  color: #374151;
+  color: var(--color-text-primary);
+  transition: border-color var(--transition-normal);
+  min-height: 36px; /* 移动端友好 */
+}
+
+.filter-select:focus {
+  outline: none;
+  border-color: var(--color-primary);
 }
 
 .search-content {
-  padding: 2rem 0;
+  padding: var(--spacing-2xl) 0;
 }
 
 .artist-search-section {
-  background: white;
-  border-radius: 0.5rem;
-  padding: 2rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  background: var(--color-bg-primary);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-2xl);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-border);
 }
 
 .error-section,
 .loading-section {
-  margin-bottom: 2rem;
+  margin-bottom: var(--spacing-2xl);
 }
 
 .results-section {
-  margin-bottom: 2rem;
+  margin-bottom: var(--spacing-2xl);
 }
 
 .results-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
+  margin-bottom: var(--spacing-2xl);
 }
 
 .results-header h2 {
   font-size: 1.5rem;
   font-weight: 600;
-  color: #1f2937;
+  color: var(--color-text-primary);
   margin: 0;
 }
 
 .artworks-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 2rem;
-  margin-bottom: 2rem;
+  gap: var(--spacing-2xl);
+  margin-bottom: var(--spacing-2xl);
 }
 
 /* 分页样式 */
 .pagination-section {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--spacing-lg);
   align-items: center;
-  margin-top: 2rem;
+  margin-top: var(--spacing-2xl);
 }
 
 .pagination {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--spacing-sm);
   align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .page-btn {
-  padding: 0.5rem 1rem;
-  border: 1px solid #d1d5db;
-  background: white;
-  color: #374151;
-  border-radius: 0.375rem;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--transition-normal);
   font-size: 0.875rem;
   min-width: 2.5rem;
+  min-height: 36px; /* 移动端友好 */
 }
 
 .page-btn:hover:not(:disabled) {
-  background: #f3f4f6;
-  border-color: #9ca3af;
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border-hover);
+  transform: translateY(-1px);
 }
 
 .page-btn.active {
-  background: #3b82f6;
+  background: var(--color-primary);
   color: white;
-  border-color: #3b82f6;
+  border-color: var(--color-primary);
 }
 
 .page-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
+  transform: none;
 }
 
 .jump-to-page {
   display: flex;
   justify-content: center;
-  margin-top: 1rem;
+  margin-top: var(--spacing-lg);
+  padding: var(--spacing-lg);
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
 }
 
 .jump-input-group {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  background: #f3f4f6;
-  border: 1px solid #d1d5db;
-  border-radius: 0.5rem;
-  padding: 0.5rem 1rem;
-  width: fit-content;
+  gap: var(--spacing-md);
+}
+
+.jump-input-group label {
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  font-weight: 500;
+  white-space: nowrap;
 }
 
 .jump-input {
-  border: none;
-  background: transparent;
-  padding: 0.5rem 0.25rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-primary);
+  padding: var(--spacing-sm) var(--spacing-md);
   font-size: 0.875rem;
-  width: 50px;
+  border-radius: var(--radius-md);
+  width: 80px;
   text-align: center;
+  color: var(--color-text-primary);
+  transition: border-color var(--transition-normal);
 }
 
 .jump-input:focus {
   outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
 .jump-btn {
-  background: #4f46e5;
+  background: var(--color-primary);
   color: white;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border-radius: var(--radius-md);
   border: none;
   cursor: pointer;
   font-size: 0.875rem;
-  transition: background-color 0.2s ease;
+  transition: all var(--transition-normal);
+  min-height: 36px;
 }
 
 .jump-btn:hover:not(:disabled) {
-  background: #4338ca;
+  background: var(--color-primary-dark);
+  transform: translateY(-1px);
 }
 
 .jump-btn:disabled {
-  background: #9ca3af;
+  background: var(--color-text-tertiary);
   cursor: not-allowed;
-  color: #6b7280;
+  color: var(--color-text-secondary);
+  transform: none;
 }
 
 .page-info {
   display: flex;
   justify-content: center;
-  gap: 2rem;
-  color: #6b7280;
+  gap: var(--spacing-2xl);
+  color: var(--color-text-secondary);
   font-size: 0.875rem;
 }
 
@@ -1117,27 +1154,60 @@ onUnmounted(() => {
 .empty-icon {
   width: 4rem;
   height: 4rem;
-  color: #9ca3af;
-  margin-bottom: 1rem;
+  color: var(--color-text-tertiary);
+  margin-bottom: var(--spacing-lg);
 }
 
 .empty-content h3,
 .welcome-content h2 {
   font-size: 1.5rem;
   font-weight: 600;
-  color: #374151;
-  margin-bottom: 0.5rem;
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-sm);
 }
 
 .empty-content p,
 .welcome-content p {
-  color: #6b7280;
+  color: var(--color-text-secondary);
   line-height: 1.6;
 }
 
+/* 移动端优化 */
 @media (max-width: 768px) {
+  .search-header {
+    padding: var(--spacing-xl) 0;
+  }
+
+  .page-title {
+    font-size: 1.5rem;
+    margin-bottom: var(--spacing-xl);
+  }
+
+  .search-type-tabs {
+    gap: var(--spacing-xs);
+    margin-bottom: var(--spacing-xl);
+  }
+
+  .tab-btn {
+    flex: 1;
+    text-align: center;
+    padding: var(--spacing-md) var(--spacing-sm);
+    font-size: 0.75rem;
+  }
+
+  .search-input-group {
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
+
+  .search-btn {
+    width: 100%;
+    justify-content: center;
+  }
+
   .search-filters {
     flex-direction: column;
+    gap: var(--spacing-md);
   }
 
   .filter-select {
@@ -1146,16 +1216,18 @@ onUnmounted(() => {
 
   .results-header {
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--spacing-lg);
     align-items: flex-start;
   }
 
   .artworks-grid {
     grid-template-columns: 1fr;
+    gap: var(--spacing-xl);
   }
 
   .tags-input-group {
     flex-direction: column;
+    gap: var(--spacing-md);
   }
 
   .tags-list {
@@ -1164,36 +1236,71 @@ onUnmounted(() => {
 
   .tag-item {
     font-size: 0.75rem;
-    padding: 0.375rem 0.625rem;
+    padding: var(--spacing-xs) var(--spacing-sm);
   }
 
   .pagination {
     flex-wrap: wrap;
     justify-content: center;
+    gap: var(--spacing-xs);
+  }
+
+  .page-btn {
+    min-width: 2rem;
+    padding: var(--spacing-xs) var(--spacing-sm);
   }
 
   .page-info {
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--spacing-sm);
     text-align: center;
   }
 
   .jump-to-page {
-    flex-direction: column;
-    gap: 0.5rem;
+    padding: var(--spacing-md);
   }
 
   .jump-input-group {
     flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .jump-input {
-    width: 100%;
+    align-items: stretch;
+    gap: var(--spacing-sm);
   }
 
+  .jump-input,
   .jump-btn {
     width: 100%;
   }
+
+  .artist-search-section {
+    padding: var(--spacing-xl);
+  }
+}
+
+/* 超小屏幕优化 */
+@media (max-width: 480px) {
+  .search-header {
+    padding: var(--spacing-lg) 0;
+  }
+
+  .page-title {
+    font-size: 1.25rem;
+  }
+
+  .tab-btn {
+    font-size: 0.625rem;
+    padding: var(--spacing-sm) var(--spacing-xs);
+  }
+
+  .search-input {
+    font-size: 0.875rem;
+  }
+
+  .artworks-grid {
+    gap: var(--spacing-lg);
+  }
+
+  .artist-search-section {
+    padding: var(--spacing-lg);
+  }
 }
 </style>
\ No newline at end of file