页面优化，增加作者搜索功能，若干bug修复

README.md

@@ -20,6 +20,10 @@ Pixiv 下载浏览管理器是一个基于 Web 的应用程序，提供以下功
 
 [![视频演示](https://img.shields.io/badge/📹-演示视频-blue?style=for-the-badge)](https://sywb.top/Staticfiles/p%E6%95%99%E7%A8%8B.mp4)
 
+观看更新内容（关注于新功能演示，上面的视频主要是登录教学）：
+
+[![功能更新](https://img.shields.io/badge/📹-功能更新-blue?style=for-the-badge)](https://sywb.top/Staticfiles/p%E6%9B%B4%E6%96%B0.mp4)
+
 ## 🚀 快速开始
 
 ### 便携版下载（如果不想自义定或者是懒）

backend/routes/artist.js

@@ -31,9 +31,6 @@ router.get('/search', async (req, res) => {
         name: user.user.name,
         account: user.user.account,
         profile_image_urls: user.user.profile_image_urls,
-        total_illusts: 0,
-        total_manga: 0,
-        total_followers: 0,
         is_followed: user.user.is_followed || false
       }));
 

backend/services/artist.js

@@ -8,25 +8,50 @@ class ArtistService {
   }
 
   /**
-   * 获取作者信息
+   * 获取作者详细信息（用于作者详情页面）
    */
   async getArtistInfo(artistId) {
     try {
-      const response = await this.makeRequest(
+      const response = await this.makeRequest('GET', '/v1/user/detail', { user_id: artistId });
-        'GET',
-        '/v1/user/detail',
-        { user_id: artistId }
-      );
 
       return {
-        success: true,
-        data: response.user
-      };
         
+        success: true,
+        data: response.user,
+      };
     } catch (error) {
       return {
         success: false,
-        error: error.message
+        error: error.message,
+      };
+    }
+  }
+
+  /**
+   * 获取作者简单信息（用于列表页面）
+   */
+  async getArtistBasicInfo(artistId) {
+    try {
+      const response = await this.makeRequest('GET', '/v1/user/detail', { user_id: artistId });
+
+      // 只返回基本信息，不包含统计信息
+      const basicInfo = {
+        id: response.user.id,
+        name: response.user.name,
+        account: response.user.account,
+        profile_image_urls: response.user.profile_image_urls,
+        comment: response.user.comment,
+        is_followed: response.user.is_followed || false
+      };
+
+      return {
+        success: true,
+        data: basicInfo,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error.message,
       };
     }
   }
@@ -36,24 +61,16 @@ class ArtistService {
    */
   async getArtistArtworks(artistId, options = {}) {
     try {
-      const {
+      const { type = 'art', filter = 'for_ios', offset = 0, limit = 30 } = options;
-        type = 'art',
-        filter = 'for_ios',
-        offset = 0,
-        limit = 30
-      } = options;
 
       const params = {
         user_id: artistId,
         type,
         filter,
-        offset
+        offset,
       };
 
-      const response = await this.makeRequest(
+      const response = await this.makeRequest('GET', `/v1/user/illusts?${stringify(params)}`);
-        'GET',
-        `/v1/user/illusts?${stringify(params)}`
-      );
 
       console.log('Artworks response keys:', Object.keys(response));
       console.log('Artworks count:', response.illusts?.length || 0);
@@ -63,14 +80,13 @@ class ArtistService {
         success: true,
         data: {
           artworks: response.illusts,
-          next_url: response.next_url
+          next_url: response.next_url,
-        }
+        },
       };
-
     } catch (error) {
       return {
         success: false,
-        error: error.message
+        error: error.message,
       };
     }
   }
@@ -80,36 +96,28 @@ class ArtistService {
    */
   async getArtistFollowing(artistId, options = {}) {
     try {
-      const {
+      const { restrict = 'public', offset = 0, limit = 30 } = options;
-        restrict = 'public',
-        offset = 0,
-        limit = 30
-      } = options;
 
       const params = {
         user_id: artistId,
         restrict,
-        offset
+        offset,
       };
 
-      const response = await this.makeRequest(
+      const response = await this.makeRequest('GET', `/v1/user/following?${stringify(params)}`);
-        'GET',
-        `/v1/user/following?${stringify(params)}`
-      );
 
       return {
         success: true,
         data: {
           users: response.user_previews,
           next_url: response.next_url,
-          total: response.user_previews.length
+          total: response.user_previews.length,
-        }
+        },
       };
-
     } catch (error) {
       return {
         success: false,
-        error: error.message
+        error: error.message,
       };
     }
   }
@@ -119,34 +127,27 @@ class ArtistService {
    */
   async getArtistFollowers(artistId, options = {}) {
     try {
-      const {
+      const { offset = 0, limit = 30 } = options;
-        offset = 0,
-        limit = 30
-      } = options;
 
       const params = {
         user_id: artistId,
-        offset
+        offset,
       };
 
-      const response = await this.makeRequest(
+      const response = await this.makeRequest('GET', `/v1/user/follower?${stringify(params)}`);
-        'GET',
-        `/v1/user/follower?${stringify(params)}`
-      );
 
       return {
         success: true,
         data: {
           users: response.user_previews,
           next_url: response.next_url,
-          total: response.user_previews.length
+          total: response.user_previews.length,
-        }
+        },
       };
-
     } catch (error) {
       return {
         success: false,
-        error: error.message
+        error: error.message,
       };
     }
   }
@@ -156,16 +157,13 @@ class ArtistService {
    */
   async getFollowingArtists(options = {}) {
     try {
-      const {
+      const { offset = 0, limit = 30 } = options;
-        offset = 0,
-        limit = 30
-      } = options;
 
       // 检查认证状态
       if (!this.auth || !this.auth.accessToken) {
         return {
           success: false,
-          error: '未登录或认证已过期'
+          error: '未登录或认证已过期',
         };
       }
 
@@ -181,7 +179,7 @@ class ArtistService {
       if (!currentUserId) {
         return {
           success: false,
-          error: '无法获取当前用户信息，请重新登录'
+          error: '无法获取当前用户信息，请重新登录',
         };
       }
 
@@ -189,15 +187,10 @@ class ArtistService {
         user_id: currentUserId,
         restrict: 'public',
         offset,
-        limit
+        limit,
       };
 
-      console.log('获取关注作者列表，参数:', params);
+      const response = await this.makeRequest('GET', `/v1/user/following?${stringify(params)}`);
-
-      const response = await this.makeRequest(
-        'GET',
-        `/v1/user/following?${stringify(params)}`
-      );
 
       // 转换数据格式以匹配前端期望
       const artists = (response.user_previews || []).map(user => ({
@@ -205,52 +198,21 @@ class ArtistService {
         name: user.user.name,
         account: user.user.account,
         profile_image_urls: user.user.profile_image_urls,
-        total_illusts: 0, // 这些信息需要通过 /v1/user/detail 获取
+        is_followed: user.user.is_followed || false,
-        total_manga: 0,
-        total_followers: 0,
-        is_followed: user.user.is_followed || false
       }));
 
-      // 为前5个用户获取详细信息（避免API调用过多）
-      const artistsToFetch = artists.slice(0, 5);
-      const detailedArtists = await Promise.all(
-        artistsToFetch.map(async (artist) => {
-          try {
-            const detailResponse = await this.getArtistInfo(artist.id);
-            if (detailResponse.success) {
-              return {
-                ...artist,
-                total_illusts: detailResponse.data.total_illusts || 0,
-                total_manga: detailResponse.data.total_manga || 0,
-                total_followers: detailResponse.data.total_followers || 0
-              };
-            }
-          } catch (error) {
-            console.error(`获取用户 ${artist.id} 详细信息失败:`, error.message);
-          }
-          return artist;
-        })
-      );
-
-      // 合并详细信息和基本信息
-      const finalArtists = [
-        ...detailedArtists,
-        ...artists.slice(5) // 其余用户保持基本信息
-      ];
-
       return {
         success: true,
         data: {
-          artists: finalArtists,
+          artists: artists,
-          total: finalArtists.length
+          total: artists.length,
-        }
+        },
       };
-
     } catch (error) {
       console.error('获取关注作者列表失败:', error.message);
       return {
         success: false,
-        error: error.message
+        error: error.message,
       };
     }
   }
@@ -262,26 +224,21 @@ class ArtistService {
     try {
       const data = {
         user_id: artistId,
-        restrict: 'public'
+        restrict: 'public',
       };
 
       const endpoint = action === 'follow' ? '/v1/user/follow/add' : '/v1/user/follow/delete';
 
-      const response = await this.makeRequest(
+      const response = await this.makeRequest('POST', endpoint, data);
-        'POST',
-        endpoint,
-        data
-      );
 
       return {
         success: true,
-        data: response
+        data: response,
       };
-
     } catch (error) {
       return {
         success: false,
-        error: error.message
+        error: error.message,
       };
     }
   }
@@ -291,26 +248,17 @@ class ArtistService {
    */
   async searchArtists(searchOptions) {
     try {
-      const {
+      const { keyword, sort = 'date_desc', duration = 'all', offset = 0, limit = 30 } = searchOptions;
-        keyword,
-        sort = 'date_desc',
-        duration = 'all',
-        offset = 0,
-        limit = 30
-      } = searchOptions;
 
       const params = {
         word: keyword,
         sort,
         duration,
         offset,
-        filter: 'for_ios'
+        filter: 'for_ios',
       };
 
-      const response = await this.makeRequest(
+      const response = await this.makeRequest('GET', `/v1/search/user?${stringify(params)}`);
-        'GET',
-        `/v1/search/user?${stringify(params)}`
-      );
 
       return {
         success: true,
@@ -318,14 +266,13 @@ class ArtistService {
           users: response.user_previews,
           next_url: response.next_url,
           search_span_limit: response.search_span_limit,
-          total: response.user_previews.length
+          total: response.user_previews.length,
-        }
+        },
       };
-
     } catch (error) {
       return {
         success: false,
-        error: error.message
+        error: error.message,
       };
     }
   }
@@ -335,82 +282,26 @@ class ArtistService {
    */
   async getRecommendedArtists(options = {}) {
     try {
-      const {
+      const { offset = 0, limit = 30 } = options;
-        offset = 0,
-        limit = 30
-      } = options;
 
       const params = {
         offset,
-        filter: 'for_ios'
+        filter: 'for_ios',
       };
 
-      const response = await this.makeRequest(
+      const response = await this.makeRequest('GET', `/v1/user/recommended?${stringify(params)}`);
-        'GET',
-        `/v1/user/recommended?${stringify(params)}`
-      );
 
       return {
         success: true,
         data: {
           users: response.user_previews,
-          next_url: response.next_url
+          next_url: response.next_url,
-        }
+        },
       };
-
     } catch (error) {
       return {
         success: false,
-        error: error.message
+        error: error.message,
-      };
-    }
-  }
-
-  /**
-   * 获取作者统计信息
-   */
-  async getArtistStats(artistId) {
-    try {
-      const response = await this.makeRequest(
-        'GET',
-        '/v1/user/detail',
-        { user_id: artistId }
-      );
-
-      const user = response.user;
-      
-      const stats = {
-        user_id: user.id,
-        total_illusts: user.total_illusts,
-        total_manga: user.total_manga,
-        total_novels: user.total_novels,
-        total_bookmarked_illust: user.total_bookmarked_illust,
-        total_following: user.total_following,
-        total_followers: user.total_followers,
-        total_illust_bookmarks_public: user.total_illust_bookmarks_public,
-        total_illust_series: user.total_illust_series,
-        total_novel_series: user.total_novel_series,
-        background: user.background,
-        twitter_account: user.twitter_account,
-        twitter_url: user.twitter_url,
-        pawoo_url: user.pawoo_url,
-        is_followed: user.is_followed,
-        is_following: user.is_following,
-        is_friend: user.is_friend,
-        is_blocking: user.is_blocking,
-        is_blocked: user.is_blocked,
-        accept_request: user.accept_request
-      };
-
-      return {
-        success: true,
-        data: stats
-      };
-
-    } catch (error) {
-      return {
-        success: false,
-        error: error.message
       };
     }
   }
@@ -420,19 +311,19 @@ class ArtistService {
    */
   async makeRequest(method, endpoint, data = null) {
     const headers = {
-      'Authorization': `Bearer ${this.auth.accessToken}`,
+      Authorization: `Bearer ${this.auth.accessToken}`,
       'Accept-Language': 'en-us',
       'App-OS': 'android',
       'App-OS-Version': '9.0',
       'App-Version': '5.0.234',
-      'User-Agent': 'PixivAndroidApp/5.0.234 (Android 9.0; Pixel 3)'
+      'User-Agent': 'PixivAndroidApp/5.0.234 (Android 9.0; Pixel 3)',
     };
 
     const config = {
       method,
       url: `${this.baseURL}${endpoint}`,
       headers,
-        timeout: 60000 // 增加到60秒
+      timeout: 60000, // 增加到60秒
     };
 
     if (data) {
@@ -454,7 +345,7 @@ class ArtistService {
         status: error.response?.status,
         statusText: error.response?.statusText,
         data: error.response?.data,
-        message: error.message
+        message: error.message,
       });
       throw error;
     }

backend/services/repository.js

@@ -222,6 +222,9 @@ class RepositoryService {
   async getDiskUsage() {
     try {
       const currentBaseDir = this.getCurrentBaseDir()
+      
+      // 尝试使用 fs.statfs (Node.js 内置方法)
+      try {
         const stats = await fs.statfs(currentBaseDir)
         const total = stats.blocks * stats.bsize
         const free = stats.bavail * stats.bsize
@@ -233,7 +236,66 @@ class RepositoryService {
           free,
           usagePercent: Math.round((used / total) * 100)
         }
+      } catch (statfsError) {
+        console.log('fs.statfs 不可用，尝试使用系统命令:', statfsError.message)
+        
+        // 如果 fs.statfs 不可用，尝试使用系统命令
+        if (process.platform === 'win32') {
+          // Windows 系统
+          try {
+            const { stdout } = await execAsync('wmic logicaldisk get size,freespace,caption')
+            const lines = stdout.trim().split('\n').slice(1) // 跳过标题行
+            
+            for (const line of lines) {
+              const parts = line.trim().split(/\s+/)
+              if (parts.length >= 3) {
+                const caption = parts[0]
+                const freeSpace = parseInt(parts[1])
+                const totalSize = parseInt(parts[2])
+                
+                // 检查当前目录是否在这个磁盘上
+                if (currentBaseDir.toUpperCase().startsWith(caption.toUpperCase())) {
+                  const used = totalSize - freeSpace
+                  return {
+                    total: totalSize,
+                    used,
+                    free: freeSpace,
+                    usagePercent: Math.round((used / totalSize) * 100)
+                  }
+                }
+              }
+            }
+          } catch (wmicError) {
+            console.log('wmic 命令失败:', wmicError.message)
+          }
+        } else {
+          // Unix/Linux 系统
+          try {
+            const { stdout } = await execAsync(`df -B1 "${currentBaseDir}" | tail -1`)
+            const parts = stdout.trim().split(/\s+/)
+            if (parts.length >= 4) {
+              const total = parseInt(parts[1])
+              const used = parseInt(parts[2])
+              const free = parseInt(parts[3])
+              
+              return {
+                total,
+                used,
+                free,
+                usagePercent: Math.round((used / total) * 100)
+              }
+            }
+          } catch (dfError) {
+            console.log('df 命令失败:', dfError.message)
+          }
+        }
+        
+        // 如果所有方法都失败，返回默认值
+        console.log('无法获取磁盘使用情况，返回默认值')
+        return { total: 0, used: 0, free: 0, usagePercent: 0 }
+      }
     } catch (error) {
+      console.error('获取磁盘使用情况失败:', error)
       return { total: 0, used: 0, free: 0, usagePercent: 0 }
     }
   }

ui/src/components/TheWelcome.vue

@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-
-const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
-    +
-    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
-    and
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
-    /
-    <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
-
-    <br />
-
-    More instructions are available in
-    <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
-    >.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
-    (our official Discord server), or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also follow the official
-    <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
-    Bluesky account or the
-    <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    X account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>

ui/src/components/WelcomeItem.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>

ui/src/components/artist/ArtistCard.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="artist-card">
+    <div class="artist-header">
+      <img 
+        :src="getImageUrl(artist.profile_image_urls.medium)" 
+        :alt="artist.name"
+        class="artist-avatar"
+        crossorigin="anonymous"
+      />
+      <div class="artist-info">
+        <h3 class="artist-name">{{ artist.name }}</h3>
+        <p class="artist-account">@{{ artist.account }}</p>
+      </div>
+      <div class="artist-actions">
+        <button 
+          v-if="showFollowButton"
+          @click="handleFollowClick" 
+          class="btn btn-primary btn-small"
+          :disabled="artist.is_followed"
+        >
+          {{ artist.is_followed ? '已关注' : '关注' }}
+        </button>
+        <button 
+          v-if="showUnfollowButton"
+          @click="handleUnfollowClick" 
+          class="btn btn-danger btn-small"
+        >
+          取消关注
+        </button>
+      </div>
+    </div>
+    
+    <div class="artist-actions-bottom">
+      <router-link :to="`/artist/${artist.id}`" class="btn btn-primary btn-small">
+        查看作品
+      </router-link>
+      <button @click="handleDownloadClick" class="btn btn-secondary btn-small">
+        下载作品
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Artist {
+  id: number
+  name: string
+  account: string
+  profile_image_urls: {
+    medium: string
+  }
+  is_followed?: boolean
+}
+
+interface Props {
+  artist: Artist
+  showFollowButton?: boolean
+  showUnfollowButton?: boolean
+}
+
+interface Emits {
+  (e: 'follow', artistId: number): void
+  (e: 'unfollow', artistId: number): void
+  (e: 'download', artist: Artist): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showFollowButton: false,
+  showUnfollowButton: true
+})
+
+const emit = defineEmits<Emits>()
+
+// 处理关注点击
+const handleFollowClick = () => {
+  emit('follow', props.artist.id)
+}
+
+// 处理取消关注点击
+const handleUnfollowClick = () => {
+  emit('unfollow', props.artist.id)
+}
+
+// 处理下载点击
+const handleDownloadClick = () => {
+  emit('download', props.artist)
+}
+
+// 处理图片URL，通过后端代理
+const getImageUrl = (originalUrl: string) => {
+  if (!originalUrl) return ''
+  
+  // 如果是Pixiv的图片URL，通过后端代理
+  if (originalUrl.includes('i.pximg.net')) {
+    const encodedUrl = encodeURIComponent(originalUrl)
+    return `http://localhost:3000/api/proxy/image?url=${encodedUrl}`
+  }
+  
+  return originalUrl
+}
+</script>
+
+<style scoped>
+.artist-card {
+  background: white;
+  border-radius: 1rem;
+  padding: 1.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s, box-shadow 0.2s;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.artist-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+.artist-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex: 1;
+}
+
+.artist-avatar {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.artist-info {
+  flex: 1;
+  min-width: 0; /* 防止文本溢出 */
+}
+
+.artist-name {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0 0 0.5rem 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.artist-account {
+  color: #6b7280;
+  font-size: 0.875rem;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.artist-actions {
+  flex-shrink: 0;
+}
+
+.artist-actions-bottom {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: auto;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  flex: 1;
+  min-height: 2.5rem;
+}
+
+.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;
+}
+
+.btn-danger {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-danger:hover {
+  background: #dc2626;
+}
+
+.btn-small {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  min-height: 2rem;
+}
+
+@media (max-width: 768px) {
+  .artist-header {
+    flex-direction: column;
+    text-align: center;
+    gap: 1rem;
+  }
+  
+  .artist-actions-bottom {
+    flex-direction: column;
+  }
+  
+  .artist-avatar {
+    width: 5rem;
+    height: 5rem;
+  }
+}
+</style> 

ui/src/components/search/ArtistSearch.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="artist-search">
+    <!-- 搜索表单 -->
+    <div class="search-form">
+      <div class="search-input-group">
+        <input 
+          v-model="searchKeyword" 
+          type="text" 
+          placeholder="输入作者名称或账号搜索..." 
+          class="search-input"
+          @keyup.enter="handleSearch"
+        />
+        <button @click="handleSearch" class="search-btn" :disabled="loading">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+          </svg>
+        </button>
+      </div>
+      
+      <!-- 搜索选项 -->
+      <div class="search-options">
+        <label class="checkbox-label">
+          <input 
+            v-model="hideFollowedArtists" 
+            type="checkbox" 
+            class="form-checkbox"
+          />
+          <span>隐藏已关注的作者</span>
+        </label>
+      </div>
+    </div>
+
+    <!-- 搜索结果 -->
+    <div v-if="loading" class="loading-section">
+      <LoadingSpinner text="搜索中..." />
+    </div>
+
+    <div v-else-if="error" class="error-section">
+      <ErrorMessage :error="error" @dismiss="clearError" />
+    </div>
+
+    <div v-else-if="searchResults.length > 0" class="results-section">
+      <div class="results-header">
+        <h3>搜索结果 ({{ filteredResults.length }})</h3>
+        <div v-if="hideFollowedArtists && searchResults.length !== filteredResults.length" class="filter-info">
+          已隐藏 {{ searchResults.length - filteredResults.length }} 个已关注的作者
+        </div>
+      </div>
+      
+      <div class="artists-grid">
+        <ArtistCard
+          v-for="artist in filteredResults" 
+          :key="artist.id"
+          :artist="artist"
+          :show-follow-button="true"
+          :show-unfollow-button="false"
+          @follow="handleFollow"
+          @download="handleDownload"
+        />
+      </div>
+    </div>
+
+    <div v-else-if="hasSearched" class="empty-section">
+      <div class="empty-content">
+        <svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
+          <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+        </svg>
+        <h3>未找到相关作者</h3>
+        <p>尝试使用不同的关键词搜索</p>
+      </div>
+    </div>
+
+    <div v-else class="welcome-section">
+      <div class="welcome-content">
+        <h3>搜索作者</h3>
+        <p>输入作者名称或账号来搜索</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useArtistStore } from '@/stores/artist'
+import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
+import ErrorMessage from '@/components/common/ErrorMessage.vue'
+import ArtistCard from '@/components/artist/ArtistCard.vue'
+
+const router = useRouter()
+const artistStore = useArtistStore()
+
+// 搜索状态
+const searchKeyword = ref('')
+const hideFollowedArtists = ref(false)
+const loading = ref(false)
+const error = ref<string | null>(null)
+const hasSearched = ref(false)
+const searchResults = ref<any[]>([])
+
+// 计算属性：过滤搜索结果
+const filteredResults = computed(() => {
+  if (!hideFollowedArtists.value) {
+    return searchResults.value
+  }
+  
+  // 获取已关注作者的ID列表
+  const followedIds = new Set(artistStore.followingArtists.map(artist => artist.id))
+  
+  // 过滤掉已关注的作者
+  return searchResults.value.filter(artist => !followedIds.has(artist.id))
+})
+
+// 执行搜索
+const handleSearch = async () => {
+  if (!searchKeyword.value.trim()) {
+    return
+  }
+
+  try {
+    loading.value = true
+    error.value = null
+    hasSearched.value = true
+
+    await artistStore.searchArtists(searchKeyword.value)
+    searchResults.value = artistStore.searchResults
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '搜索失败'
+    console.error('搜索失败:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 关注作者
+const handleFollow = async (artistId: number) => {
+  try {
+    await artistStore.followArtist(artistId)
+    // 更新搜索结果中的关注状态
+    const artist = searchResults.value.find(a => a.id === artistId)
+    if (artist) {
+      artist.is_followed = true
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '关注失败'
+    console.error('关注失败:', err)
+  }
+}
+
+// 下载作品
+const handleDownload = (artist: any) => {
+  // 触发父组件的下载事件
+  emit('download', artist)
+}
+
+// 清除错误
+const clearError = () => {
+  error.value = null
+}
+
+// 定义事件
+interface Emits {
+  (e: 'download', artist: any): void
+}
+
+const emit = defineEmits<Emits>()
+
+// 暴露方法给父组件
+defineExpose({
+  searchKeyword,
+  clearSearch: () => {
+    searchKeyword.value = ''
+    searchResults.value = []
+    hasSearched.value = false
+    error.value = null
+  }
+})
+</script>
+
+<style scoped>
+.artist-search {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.search-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.search-input-group {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.search-input {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  transition: border-color 0.2s;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+}
+
+.search-btn {
+  padding: 0.75rem 1rem;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-btn:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.search-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.search-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.search-options {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #374151;
+}
+
+.form-checkbox {
+  width: 1rem;
+  height: 1rem;
+  accent-color: #3b82f6;
+}
+
+.loading-section,
+.error-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
+.results-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.results-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.results-header h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.filter-info {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.artists-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1.5rem;
+}
+
+.empty-section,
+.welcome-section {
+  text-align: center;
+  padding: 3rem 0;
+}
+
+.empty-content,
+.welcome-content {
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+.empty-icon {
+  width: 3rem;
+  height: 3rem;
+  color: #9ca3af;
+  margin-bottom: 1rem;
+}
+
+.empty-content h3,
+.welcome-content h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 0.5rem;
+}
+
+.empty-content p,
+.welcome-content p {
+  color: #6b7280;
+  line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+  .search-input-group {
+    flex-direction: column;
+  }
+  
+  .artists-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .search-options {
+    justify-content: flex-start;
+  }
+}
+</style> 

ui/src/views/AboutView.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

ui/src/views/ArtistView.vue

@@ -23,12 +23,8 @@
         <!-- 作者信息卡片 -->
         <div class="artist-header">
           <div class="artist-profile">
-            <img 
+            <img :src="getImageUrl(artist.profile_image_urls.medium)" :alt="artist.name" class="artist-avatar"
-              :src="getImageUrl(artist.profile_image_urls.medium)" 
+              crossorigin="anonymous" />
-              :alt="artist.name"
-              class="artist-avatar"
-              crossorigin="anonymous"
-            />
             <div class="artist-info">
               <h1 class="artist-name">{{ artist.name }}</h1>
               <p class="artist-account">@{{ artist.account }}</p>
@@ -60,29 +56,7 @@
           </div>
         </div>
 
-        <!-- 作者统计 -->
+
-        <div class="artist-stats">
-          <div class="stat-card">
-            <div class="stat-number">{{ artist.total_illusts }}</div>
-            <div class="stat-label">插画</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-number">{{ artist.total_manga }}</div>
-            <div class="stat-label">漫画</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-number">{{ artist.total_novels }}</div>
-            <div class="stat-label">小说</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-number">{{ artist.total_followers }}</div>
-            <div class="stat-label">粉丝</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-number">{{ artist.total_following }}</div>
-            <div class="stat-label">关注</div>
-          </div>
-        </div>
 
         <!-- 作品列表 -->
         <div class="artworks-section">
@@ -102,12 +76,7 @@
           </div>
 
           <div v-else-if="artworks.length > 0" class="artworks-grid">
-            <ArtworkCard
+            <ArtworkCard v-for="artwork in artworks" :key="artwork.id" :artwork="artwork" @click="handleArtworkClick" />
-              v-for="artwork in artworks"
-              :key="artwork.id"
-              :artwork="artwork"
-              @click="handleArtworkClick"
-            />
           </div>
 
           <div v-else class="empty-section">
@@ -116,11 +85,7 @@
 
           <!-- 分页导航 -->
           <div v-if="totalPages > 1 && artworks.length > 0" class="pagination">
-            <button 
+            <button @click="goToPage(currentPage - 1)" class="page-btn" :disabled="currentPage <= 1">
-              @click="goToPage(currentPage - 1)" 
-              class="page-btn"
-              :disabled="currentPage <= 1"
-            >
               <svg viewBox="0 0 24 24" fill="currentColor" class="page-icon">
                 <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
               </svg>
@@ -128,22 +93,13 @@
             </button>
 
             <div class="page-numbers">
-              <button 
+              <button v-for="page in visiblePages" :key="page" @click="goToPage(page)" class="page-number"
-                v-for="page in visiblePages" 
+                :class="{ active: page === currentPage }">
-                :key="page"
-                @click="goToPage(page)"
-                class="page-number"
-                :class="{ active: page === currentPage }"
-              >
                 {{ page }}
               </button>
             </div>
 
-            <button 
+            <button @click="goToPage(currentPage + 1)" class="page-btn" :disabled="currentPage >= totalPages">
-              @click="goToPage(currentPage + 1)" 
-              class="page-btn"
-              :disabled="currentPage >= totalPages"
-            >
               下一页
               <svg viewBox="0 0 24 24" fill="currentColor" class="page-icon">
                 <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
@@ -547,6 +503,7 @@ onMounted(async () => {
     transform: translateX(100%);
     opacity: 0;
   }
+
   to {
     transform: translateX(0);
     opacity: 1;
@@ -675,33 +632,7 @@ onMounted(async () => {
   background: #e5e7eb;
 }
 
-.artist-stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
 
-.stat-card {
-  background: white;
-  border-radius: 0.75rem;
-  padding: 1.5rem;
-  text-align: center;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-.stat-number {
-  font-size: 2rem;
-  font-weight: 700;
-  color: #3b82f6;
-  margin-bottom: 0.5rem;
-}
-
-.stat-label {
-  color: #6b7280;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
 
 .artworks-section {
   background: white;

ui/src/views/ArtistsView.vue

@@ -4,23 +4,10 @@
       <div class="page-header">
         <h1 class="page-title">作者管理</h1>
         <div class="header-actions">
-          <div class="search-box">
-            <input
-              v-model="searchKeyword"
-              type="text"
-              placeholder="搜索作者..."
-              class="search-input"
-              @keyup.enter="handleSearch"
-            />
-            <button @click="handleSearch" class="search-btn">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
-              </svg>
-            </button>
-          </div>
           <button @click="handleRefresh" class="btn btn-secondary" :disabled="artistStore.loading">
             <svg viewBox="0 0 24 24" fill="currentColor" class="refresh-icon">
-              <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
+              <path
+                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
             </svg>
             刷新
           </button>
@@ -43,7 +30,8 @@
             <div v-if="artistStore.hasFollowingArtists" class="cache-indicator">
               <span v-if="artistStore.isDataStale" class="cache-status stale">
                 <svg viewBox="0 0 24 24" fill="currentColor" class="cache-icon">
-                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                  <path
+                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
                 </svg>
                 数据已过期
               </span>
@@ -57,59 +45,16 @@
           </div>
 
           <div v-if="artistStore.followingArtists.length > 0" class="artists-grid">
-            <div 
+            <ArtistCard v-for="artist in artistStore.followingArtists" :key="artist.id" :artist="artist"
-              v-for="artist in artistStore.followingArtists" 
+              :show-follow-button="false" :show-unfollow-button="true" @unfollow="handleUnfollow"
-              :key="artist.id"
+              @download="openDownloadDialog" />
-              class="artist-card"
-            >
-              <div class="artist-header">
-                <img 
-                  :src="getImageUrl(artist.profile_image_urls.medium)" 
-                  :alt="artist.name"
-                  class="artist-avatar"
-                  crossorigin="anonymous"
-                />
-                <div class="artist-info">
-                  <h3 class="artist-name">{{ artist.name }}</h3>
-                  <p class="artist-account">@{{ artist.account }}</p>
-                </div>
-                <div class="artist-actions">
-                  <button @click="handleUnfollow(artist.id)" class="btn btn-danger btn-small">
-                    取消关注
-                  </button>
-                </div>
-              </div>
-              
-              <div class="artist-stats">
-                <div class="stat">
-                  <span class="stat-number">{{ artist.total_illusts }}</span>
-                  <span class="stat-label">插画</span>
-                </div>
-                <div class="stat">
-                  <span class="stat-number">{{ artist.total_manga }}</span>
-                  <span class="stat-label">漫画</span>
-                </div>
-                <div class="stat">
-                  <span class="stat-number">{{ artist.total_followers }}</span>
-                  <span class="stat-label">粉丝</span>
-                </div>
-              </div>
-              
-              <div class="artist-actions-bottom">
-                <router-link :to="`/artist/${artist.id}`" class="btn btn-primary btn-small">
-                  查看作品
-                </router-link>
-                <button @click="handleDownloadArtist(artist.id)" class="btn btn-secondary btn-small">
-                  下载作品
-                </button>
-              </div>
-            </div>
           </div>
 
           <div v-else class="empty-section">
             <div class="empty-content">
               <svg viewBox="0 0 24 24" fill="currentColor" class="empty-icon">
-                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+                <path
+                  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
               </svg>
               <h3>暂无关注的作者</h3>
               <p>关注喜欢的作者，在这里管理他们</p>
@@ -119,84 +64,91 @@
             </div>
           </div>
         </div>
-
-        <!-- 搜索建议 -->
-        <div v-if="artistStore.searchResults.length > 0" class="section">
-          <h2 class="section-title">搜索结果</h2>
-          <div class="artists-grid">
-            <div 
-              v-for="artist in artistStore.searchResults" 
-              :key="artist.id"
-              class="artist-card"
-            >
-              <div class="artist-header">
-                <img 
-                  :src="getImageUrl(artist.profile_image_urls.medium)" 
-                  :alt="artist.name"
-                  class="artist-avatar"
-                  crossorigin="anonymous"
-                />
-                <div class="artist-info">
-                  <h3 class="artist-name">{{ artist.name }}</h3>
-                  <p class="artist-account">@{{ artist.account }}</p>
       </div>
-                <div class="artist-actions">
+    </div>
-                  <button 
+
-                    @click="handleFollow(artist.id)" 
+    <!-- 下载弹出框 -->
-                    class="btn btn-primary btn-small"
+    <div v-if="showDownloadDialog" class="modal-overlay" @click="closeDownloadDialog">
-                    :disabled="artist.is_followed"
+      <div class="modal-content" @click.stop>
-                  >
+        <div class="modal-header">
-                    {{ artist.is_followed ? '已关注' : '关注' }}
+          <h3>下载作品</h3>
+          <button @click="closeDownloadDialog" class="modal-close">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+            </svg>
           </button>
         </div>
-              </div>
 
-              <div class="artist-stats">
+        <div class="modal-body">
-                <div class="stat">
+          <div class="artist-info-modal">
-                  <span class="stat-number">{{ artist.total_illusts }}</span>
+            <img :src="selectedArtist?.profile_image_urls.medium" :alt="selectedArtist?.name"
-                  <span class="stat-label">插画</span>
+              class="artist-avatar-modal" crossorigin="anonymous" />
-                </div>
+            <div>
-                <div class="stat">
+              <h4>{{ selectedArtist?.name }}</h4>
-                  <span class="stat-number">{{ artist.total_manga }}</span>
+              <p>@{{ selectedArtist?.account }}</p>
-                  <span class="stat-label">漫画</span>
-                </div>
-                <div class="stat">
-                  <span class="stat-number">{{ artist.total_followers }}</span>
-                  <span class="stat-label">粉丝</span>
             </div>
           </div>
 
-              <div class="artist-actions-bottom">
+          <div class="download-options">
-                <router-link :to="`/artist/${artist.id}`" class="btn btn-primary btn-small">
+            <div class="download-input-group">
-                  查看作品
+              <label for="downloadLimit">下载数量:</label>
-                </router-link>
+              <select v-model="downloadLimit" id="downloadLimit" class="download-select">
-                <button @click="handleDownloadArtist(artist.id)" class="btn btn-secondary btn-small">
+                <option value="10">10个</option>
-                  下载作品
+                <option value="30">30个</option>
+                <option value="50">50个</option>
+                <option value="100">100个</option>
+                <option value="200">200个</option>
+                <option value="500">500个</option>
+                <option value="9999">全部</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button @click="closeDownloadDialog" class="btn btn-secondary">
+            取消
+          </button>
+          <button @click="handleDownloadArtist" class="btn btn-primary" :disabled="downloading">
+            {{ downloading ? '下载中...' : '开始下载' }}
           </button>
         </div>
       </div>
     </div>
-        </div>
+
+    <!-- 下载成功提示 -->
+    <div v-if="downloadSuccess" class="success-message">
+      <div class="success-content">
+        <svg viewBox="0 0 24 24" fill="currentColor" class="success-icon">
+          <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+        </svg>
+        <span>{{ downloadSuccess }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAuthStore } from '@/stores/auth';
 import { useArtistStore } from '@/stores/artist';
 import downloadService from '@/services/download';
 import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
 import ErrorMessage from '@/components/common/ErrorMessage.vue';
+import ArtistCard from '@/components/artist/ArtistCard.vue';
 
 const router = useRouter();
 const authStore = useAuthStore();
 const artistStore = useArtistStore();
 
-// 本地状态
+// 下载弹出框相关
-const searchKeyword = ref('');
+const showDownloadDialog = ref(false);
+const selectedArtist = ref<any>(null);
+const downloadLimit = ref('50');
+const downloading = ref(false);
+const downloadSuccess = ref<string | null>(null);
 
 // 获取关注的作者
 const fetchFollowingArtists = async () => {
@@ -207,20 +159,6 @@ const fetchFollowingArtists = async () => {
   }
 };
 
-// 搜索作者
-const handleSearch = async () => {
-  if (!searchKeyword.value.trim()) {
-    artistStore.clearSearchResults();
-    return;
-  }
-
-  try {
-    await artistStore.searchArtists(searchKeyword.value);
-  } catch (err) {
-    console.error('搜索失败:', err);
-  }
-};
-
 // 关注作者
 const handleFollow = async (artistId: number) => {
   try {
@@ -239,15 +177,43 @@ const handleUnfollow = async (artistId: number) => {
   }
 };
 
-// 下载作者作品
+// 打开下载弹出框
-const handleDownloadArtist = async (artistId: number) => {
+const openDownloadDialog = (artist: any) => {
+  selectedArtist.value = artist;
+  showDownloadDialog.value = true;
+};
+
+// 关闭下载弹出框
+const closeDownloadDialog = () => {
+  showDownloadDialog.value = false;
+  selectedArtist.value = null;
+  downloadLimit.value = '50';
+  downloading.value = false;
+};
+
+// 处理下载
+const handleDownloadArtist = async () => {
+  if (!selectedArtist.value) return;
+
   try {
-    const response = await downloadService.downloadArtistArtworks(artistId, {
+    downloading.value = true;
-      limit: 50
+    const response = await downloadService.downloadArtistArtworks(selectedArtist.value.id, {
+      limit: parseInt(downloadLimit.value)
     });
 
     if (response.success) {
       console.log('下载任务已创建:', response.data);
+      const limitText = downloadLimit.value === '9999' ? '全部' : downloadLimit.value;
+      downloadSuccess.value = `下载任务已创建，将下载 ${limitText} 个作品`;
+
+      // 关闭弹出框
+      closeDownloadDialog();
+
+      // 3秒后清除成功提示
+      setTimeout(() => {
+        downloadSuccess.value = null;
+      }, 3000);
+
       router.push('/downloads');
     } else {
       throw new Error(response.error || '下载失败');
@@ -255,6 +221,8 @@ const handleDownloadArtist = async (artistId: number) => {
   } catch (err) {
     artistStore.error = err instanceof Error ? err.message : '下载失败';
     console.error('下载失败:', err);
+  } finally {
+    downloading.value = false;
   }
 };
 
@@ -267,18 +235,7 @@ const handleRefresh = async () => {
   }
 };
 
-// 处理图片URL，通过后端代理
-const getImageUrl = (originalUrl: string) => {
-  if (!originalUrl) return '';
 
-  // 如果是Pixiv的图片URL，通过后端代理
-  if (originalUrl.includes('i.pximg.net')) {
-    const encodedUrl = encodeURIComponent(originalUrl);
-    return `http://localhost:3000/api/proxy/image?url=${encodedUrl}`;
-  }
-  
-  return originalUrl;
-};
 
 // 监听数据过期状态，自动刷新
 watch(() => artistStore.isDataStale, (isStale) => {
@@ -325,41 +282,6 @@ onMounted(() => {
   gap: 1rem;
 }
 
-.search-box {
-  display: flex;
-  align-items: center;
-  background: white;
-  border: 1px solid #d1d5db;
-  border-radius: 0.5rem;
-  overflow: hidden;
-}
-
-.search-input {
-  padding: 0.75rem 1rem;
-  border: none;
-  outline: none;
-  font-size: 1rem;
-  min-width: 300px;
-}
-
-.search-btn {
-  padding: 0.75rem;
-  background: #3b82f6;
-  color: white;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.search-btn:hover {
-  background: #2563eb;
-}
-
-.search-btn svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .refresh-icon {
   width: 1rem;
   height: 1rem;
@@ -429,143 +351,11 @@ onMounted(() => {
 
 .artists-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 1.5rem;
 }
 
-.artist-card {
-  background: white;
-  border-radius: 1rem;
-  padding: 1.5rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s, box-shadow 0.2s;
-}
 
-.artist-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-}
-
-.artist-header {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.artist-avatar {
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.artist-info {
-  flex: 1;
-}
-
-.artist-name {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #1f2937;
-  margin: 0 0 0.25rem 0;
-}
-
-.artist-account {
-  color: #6b7280;
-  font-size: 0.875rem;
-  margin: 0;
-}
-
-.artist-actions {
-  flex-shrink: 0;
-}
-
-.artist-stats {
-  display: flex;
-  justify-content: space-around;
-  margin-bottom: 1rem;
-  padding: 1rem 0;
-  border-top: 1px solid #e5e7eb;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.stat-number {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #3b82f6;
-}
-
-.stat-label {
-  font-size: 0.75rem;
-  color: #6b7280;
-  text-transform: uppercase;
-}
-
-.artist-actions-bottom {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  font-weight: 600;
-  text-decoration: none;
-  transition: all 0.2s;
-  border: none;
-  cursor: pointer;
-  font-size: 0.875rem;
-  flex: 1;
-}
-
-.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;
-}
-
-.btn-danger {
-  background: #ef4444;
-  color: white;
-}
-
-.btn-danger:hover {
-  background: #dc2626;
-}
-
-.btn-small {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.75rem;
-}
 
 .empty-section {
   text-align: center;
@@ -609,6 +399,171 @@ onMounted(() => {
   font-size: 0.75rem;
 }
 
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 1rem;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  color: #6b7280;
+  transition: color 0.2s;
+}
+
+.modal-close:hover {
+  color: #374151;
+}
+
+.modal-body {
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex-grow: 1;
+}
+
+.artist-info-modal {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.artist-avatar-modal {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.artist-info-modal h4 {
+  margin: 0 0 0.25rem 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.artist-info-modal p {
+  margin: 0;
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.download-options {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.download-input-group {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.download-input-group label {
+  font-size: 0.875rem;
+  color: #374151;
+  font-weight: 500;
+}
+
+.download-select {
+  padding: 0.75rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  color: #1f2937;
+  background: white;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.download-select:focus {
+  outline: none;
+  border-color: #3b82f6;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  padding: 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.success-message {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: #d1fae5;
+  color: #065f46;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  z-index: 999;
+}
+
+.success-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.success-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.success-message span {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
 @media (max-width: 768px) {
   .container {
     padding: 0 1rem;
@@ -620,22 +575,8 @@ onMounted(() => {
     align-items: stretch;
   }
 
-  .search-input {
-    min-width: auto;
-    flex: 1;
-  }
-  
   .artists-grid {
     grid-template-columns: 1fr;
   }
-  
-  .artist-header {
-    flex-direction: column;
-    text-align: center;
-  }
-  
-  .artist-actions-bottom {
-    flex-direction: column;
-  }
 }
 </style>

ui/src/views/RepositoryView.vue

@@ -12,61 +12,33 @@
 
       <!-- 功能选项卡 -->
       <div class="tabs">
-        <button 
+        <button class="tab-button" :class="{ active: activeTab === 'config' }" @click="activeTab = 'config'">
-          class="tab-button" 
-          :class="{ active: activeTab === 'config' }"
-          @click="activeTab = 'config'"
-        >
           配置管理
         </button>
-        <button 
+        <button class="tab-button" :class="{ active: activeTab === 'browse' }" @click="activeTab = 'browse'">
-          class="tab-button" 
-          :class="{ active: activeTab === 'browse' }"
-          @click="activeTab = 'browse'"
-        >
           文件浏览
         </button>
       </div>
 
       <!-- 配置管理 -->
       <div v-if="activeTab === 'config'" class="tab-content">
-        <RepositoryConfigComponent
+        <RepositoryConfigComponent :config="config" :migrating="migrating" :migration-progress="migrationProgress"
-          :config="config"
+          :migration-percent="migrationPercent" :migration-result="migrationResult" @save-config="saveConfig"
-          :migrating="migrating"
+          @reset-config="resetConfig" @select-download-dir="selectDownloadDir" @test-download-dir="testDownloadDir"
-          :migration-progress="migrationProgress"
+          @config-saved="handleConfigSaved" />
-          :migration-percent="migrationPercent"
-          :migration-result="migrationResult"
-          @save-config="saveConfig"
-          @reset-config="resetConfig"
-          @select-download-dir="selectDownloadDir"
-          @test-download-dir="testDownloadDir"
-        />
       </div>
 
       <!-- 文件浏览 -->
       <div v-if="activeTab === 'browse'" class="tab-content">
-        <RepositoryBrowse
+        <RepositoryBrowse :artists="artists" :artworks="artworks" :current-page="currentPage" :page-size="pageSize"
-          :artists="artists"
+          :total-items="totalItems" :view-mode="viewMode" @update:search-query="handleSearchQuery"
-          :artworks="artworks"
+          @update:view-mode="handleViewMode" @select-artist="selectArtist" @view-artwork="viewArtwork"
-          :current-page="currentPage"
+          @change-page="changePage" />
-          :page-size="pageSize"
-          :total-items="totalItems"
-          :view-mode="viewMode"
-          @update:search-query="handleSearchQuery"
-          @update:view-mode="handleViewMode"
-          @select-artist="selectArtist"
-          @view-artwork="viewArtwork"
-          @change-page="changePage"
-        />
       </div>
     </div>
 
     <!-- 作品详情模态框 -->
-    <ArtworkModal
+    <ArtworkModal :artwork="selectedArtwork" @close="closeArtworkModal" @delete-artwork="deleteArtwork" />
-      :artwork="selectedArtwork"
-      @close="closeArtworkModal"
-      @delete-artwork="deleteArtwork"
-    />
   </div>
 </template>
 
@@ -421,6 +393,21 @@ const testDownloadDir = async () => {
     alert('路径验证失败: ' + validation.message)
   }
 }
+
+// 处理配置保存后的刷新
+const handleConfigSaved = async () => {
+  try {
+    // 重新加载所有数据
+    await loadStats()
+    await loadConfig()
+    await loadArtists()
+    await loadAllArtworks(1)
+
+    console.log('配置保存后数据刷新完成')
+  } catch (error: any) {
+    console.error('配置保存后刷新数据失败:', error)
+  }
+}
 </script>
 
 <style scoped>

ui/src/views/SearchView.vue

@@ -36,15 +36,8 @@
           <!-- 标签搜索 -->
           <div v-if="searchMode === 'tags'" class="tags-search-section">
             <div class="tags-input-group">
-              <input 
+              <input v-model="tagInput" type="text" placeholder="输入标签，按回车或逗号分隔..." class="search-input"
-                v-model="tagInput" 
+                @keyup.enter="addTag" @keyup.space="addTag" @keyup.comma="addTag" />
-                type="text" 
-                placeholder="输入标签，按回车或逗号分隔..." 
-                class="search-input"
-                @keyup.enter="addTag"
-                @keyup.space="addTag"
-                @keyup.comma="addTag"
-              />
               <button @click="addTag" class="search-btn" :disabled="loading">
                 添加标签
               </button>
@@ -53,15 +46,12 @@
             <!-- 已添加的标签 -->
             <div v-if="searchTags.length > 0" class="tags-display">
               <div class="tags-list">
-                <span 
+                <span v-for="(tag, index) in searchTags" :key="index" class="tag-item">
-                  v-for="(tag, index) in searchTags" 
-                  :key="index" 
-                  class="tag-item"
-                >
                   {{ tag }}
                   <button @click="removeTag(index)" class="tag-remove" title="移除标签">
                     <svg viewBox="0 0 24 24" fill="currentColor">
-                      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+                      <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                     </svg>
                   </button>
                 </span>
@@ -121,6 +111,13 @@
           <ErrorMessage :error="error" @dismiss="clearError" />
         </div>
 
+        <!-- 作者搜索模式 -->
+        <div v-if="searchMode === 'artist'" class="artist-search-section">
+          <ArtistSearch ref="artistSearchRef" @download="handleArtistDownload" />
+        </div>
+
+        <!-- 作品搜索模式 -->
+        <div v-else>
           <div v-if="loading" class="loading-section">
             <LoadingSpinner text="搜索中..." />
           </div>
@@ -161,6 +158,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -172,6 +170,7 @@ import type { Artwork, SearchParams } from '@/types';
 import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
 import ErrorMessage from '@/components/common/ErrorMessage.vue';
 import ArtworkCard from '@/components/artwork/ArtworkCard.vue';
+import ArtistSearch from '@/components/search/ArtistSearch.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -198,6 +197,7 @@ const loadingMore = ref(false);
 const error = ref<string | null>(null);
 const hasSearched = ref(false);
 const offset = ref(0);
+const artistSearchRef = ref();
 
 const handleSearch = async () => {
   if (!searchKeyword.value.trim()) {
@@ -317,6 +317,8 @@ const handleArtistSearch = () => {
     return;
   }
 
+  // 切换到作者搜索模式并跳转
+  searchMode.value = 'artist';
   router.push(`/artist/${id}`);
 };
 
@@ -373,6 +375,13 @@ const clearError = () => {
   error.value = null;
 };
 
+// 处理作者下载
+const handleArtistDownload = (artist: any) => {
+  // 这里可以添加下载作者的逻辑
+  // 暂时跳转到作者页面
+  router.push(`/artist/${artist.id}`);
+};
+
 // 监听路由变化，处理URL参数
 watch(() => route.query, () => {
   const urlMode = route.query.mode as string;
@@ -588,6 +597,13 @@ watch(() => route.query, () => {
   padding: 2rem 0;
 }
 
+.artist-search-section {
+  background: white;
+  border-radius: 0.5rem;
+  padding: 2rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
 .error-section,
 .loading-section {
   margin-bottom: 2rem;

ui/src/views/repository/RepositoryConfig.vue

@@ -143,6 +143,7 @@ interface Emits {
   (e: 'reset-config'): void
   (e: 'select-download-dir'): void
   (e: 'test-download-dir'): void
+  (e: 'config-saved'): void
 }
 
 const props = defineProps<Props>()
@@ -165,6 +166,8 @@ const saveConfig = async () => {
   saving.value = true
   try {
     emit('save-config')
+    // 保存成功后触发刷新事件
+    emit('config-saved')
   } finally {
     saving.value = false
   }
@@ -173,6 +176,8 @@ const saveConfig = async () => {
 // 重置配置
 const resetConfig = () => {
   emit('reset-config')
+  // 重置后也触发刷新事件
+  emit('config-saved')
 }
 </script>