From 05cbdd455f6b080581f3d782566320f553e76c5f Mon Sep 17 00:00:00 2001
From: gushishang <117088703+gushishang@users.noreply.github.com>
Date: Sun, 17 May 2026 23:12:32 +0800
Subject: [PATCH] feat(friends): add friend search input and relation query
 filter

---
 src/components/friends/list.vue | 20 ++++++++++++++++----
 src/i18n/de.ts                  |  1 +
 src/i18n/en.ts                  |  1 +
 src/i18n/fr.ts                  |  1 +
 src/i18n/ja.ts                  |  1 +
 src/i18n/zh.ts                  |  1 +
 src/views/Friends.vue           | 26 +++++++++++++++++++-------
 7 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/components/friends/list.vue b/src/components/friends/list.vue
index 01d9826..372911a 100644
--- a/src/components/friends/list.vue
+++ b/src/components/friends/list.vue
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import UserItem from './item.vue'
 import { NGrid, NGi } from 'naive-ui'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import type { RelationList } from '@services/../pl-serve-type-main/type/main'
 import { getData } from '@services/api/getData.ts'
 import { showAPiError } from '@popup/index.ts'
@@ -24,10 +24,11 @@ import { showMessage } from '@popup/naiveui'
 
 // cols需要在父组件传参，这可能会在好友界面和Profile界面（未实现）展现
 //  Props `cols` needs to be passed from the parent component, which may be displayed in the Friends page and Profile page (not implemented yet).
-const { userid, type } = defineProps<{
+const { userid, type, query } = defineProps<{
   userid?: string
   type?: string
   cols?: number
+  query?: string
 }>()
 
 let loading = ref(false)
@@ -53,7 +54,7 @@ async function handleLoad() {
     DisplayType: type ? Number(type) : 0,
     Skip: skip.value,
     Take: 24,
-    Query: '',
+    Query: query || '',
   })
   if (getRelationsRes.Status !== 200) {
     showAPiError(t('errors.apiErrorTitle'), t('errors.apiErrorMessage'), handleLoad)
@@ -62,7 +63,7 @@ async function handleLoad() {
       DisplayType: type,
       Skip: skip.value,
       Take: 24,
-      Query: '',
+      Query: query || '',
     })
     const _res = removeToken(getRelationsRes)
     window.$ErrorLogger.captureApiError(
@@ -92,6 +93,17 @@ window.$Logger.logPageView({
 })
 
 handleLoad()
+
+watch(
+  () => query,
+  () => {
+    items.value = []
+    skip.value = 0
+    noMore.value = false
+    hasInformed.value = false
+    void handleLoad()
+  },
+)
 </script>
 
 <style scoped></style>
diff --git a/src/i18n/de.ts b/src/i18n/de.ts
index d46cf83..f31a4b8 100644
--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@@ -78,6 +78,7 @@ export default {
     editors: 'Redakteure und Administratoren',
     retired: 'Emeritierte Redakteure',
     baned: 'Gesperrt',
+    searchPlaceholder: 'Freunde nach Spitznamen suchen',
   },
   messagesI18n: {
     errorOnDelete: 'Fehler beim Löschen der Nachricht, bitte versuchen Sie es später',
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index eabfd6c..2042fba 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -78,6 +78,7 @@ export default {
     editors: 'Editors and Admins',
     retired: 'Retired Editors',
     baned: 'Banned',
+    searchPlaceholder: 'Search friends by nickname',
   },
   messagesI18n: {
     errorOnDelete: 'Failed to delete message, please try again later',
diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts
index 05b88d3..62aaf05 100644
--- a/src/i18n/fr.ts
+++ b/src/i18n/fr.ts
@@ -78,6 +78,7 @@ export default {
     editors: 'Éditeurs et administrateurs',
     retired: 'Éditeurs retraités',
     baned: 'Bloqué',
+    searchPlaceholder: 'Rechercher des amis par pseudo',
   },
   messagesI18n: {
     errorOnDelete: 'Échec de la suppression du message, veuillez réessayer plus tard',
diff --git a/src/i18n/ja.ts b/src/i18n/ja.ts
index 8466b66..5a109eb 100644
--- a/src/i18n/ja.ts
+++ b/src/i18n/ja.ts
@@ -78,6 +78,7 @@ export default {
     editors: '編集者と管理者',
     retired: '退職した編集者',
     baned: 'ブロック済み',
+    searchPlaceholder: 'ニックネームで友達を検索',
   },
   messagesI18n: {
     errorOnDelete: 'メッセージの削除に失敗しました。後でもう一度お試しください',
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
index 677d8b7..3f938f0 100644
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -76,6 +76,7 @@ export default {
     editors: '编辑和管理员',
     retired: '荣休编辑',
     baned: '小黑屋',
+    searchPlaceholder: '搜索好友昵称',
   },
   messagesI18n: {
     errorOnDelete: '删除消息失败，请稍后再试',
diff --git a/src/views/Friends.vue b/src/views/Friends.vue
index 322ff2e..11843d2 100644
--- a/src/views/Friends.vue
+++ b/src/views/Friends.vue
@@ -3,35 +3,42 @@
     <h1>{{ t('friends.title') }}</h1>
   </Header>
   <div class="list">
+    <div class="friends__search">
+      <n-input
+        v-model:value="searchText"
+        clearable
+        :placeholder="t('friends.searchPlaceholder')"
+      />
+    </div>
     <n-tabs default-value="following" justify-content="space-evenly" type="line">
       <n-tab-pane name="following" :tab="t('friends.following')" display-directive="show:lazy">
         <div class="item">
-          <UserList :userid="userID" type="1" :cols="friendItemsPerRow" />
+          <UserList :userid="userID" type="1" :cols="friendItemsPerRow" :query="searchText.trim()" />
         </div>
       </n-tab-pane>
       <n-tab-pane name="follower" :tab="t('friends.follower')" display-directive="show:lazy">
         <div class="item">
-          <UserList :userid="userID" type="0" :cols="friendItemsPerRow" />
+          <UserList :userid="userID" type="0" :cols="friendItemsPerRow" :query="searchText.trim()" />
         </div>
       </n-tab-pane>
       <n-tab-pane name="volunteers" :tab="t('friends.volunteers')" display-directive="show:lazy">
         <div class="item">
-          <UserList :userid="userID" type="3" :cols="friendItemsPerRow" />
+          <UserList :userid="userID" type="3" :cols="friendItemsPerRow" :query="searchText.trim()" />
         </div>
       </n-tab-pane>
       <n-tab-pane name="editors" :tab="t('friends.editors')" display-directive="show:lazy">
         <div class="item">
-          <UserList :userid="userID" type="4" :cols="friendItemsPerRow" />
+          <UserList :userid="userID" type="4" :cols="friendItemsPerRow" :query="searchText.trim()" />
         </div>
       </n-tab-pane>
       <n-tab-pane name="en" :tab="t('friends.retired')" display-directive="show:lazy">
         <div class="item">
-          <UserList :userid="userID" type="5" :cols="friendItemsPerRow" />
+          <UserList :userid="userID" type="5" :cols="friendItemsPerRow" :query="searchText.trim()" />
         </div>
       </n-tab-pane>
       <n-tab-pane name="baned" :tab="t('friends.baned')" display-directive="show:lazy">
         <div class="item">
-          <UserList :userid="userID" type="2" :cols="friendItemsPerRow" />
+          <UserList :userid="userID" type="2" :cols="friendItemsPerRow" :query="searchText.trim()" />
         </div>
       </n-tab-pane>
     </n-tabs>
@@ -47,12 +54,14 @@ import Footer from '../components/utils/Footer.vue'
 import { NTabs, NTabPane } from 'naive-ui'
 import { useResponsive } from '../layout/useResponsive'
 import storageManager from '@services/storage'
-import { onActivated } from 'vue'
+import { onActivated, ref } from 'vue'
 import { checkLogin } from '@services/utils.ts'
+import { NInput } from 'naive-ui'
 
 const userID = storageManager.getObj('userInfo').value?.ID
 const { friendItemsPerRow } = useResponsive()
 const { t } = useI18n()
+const searchText = ref('')
 
 onActivated(checkLogin)
 // onMounted(checkLogin);
@@ -62,6 +71,9 @@ onActivated(checkLogin)
 .list {
   width: 100%;
 }
+.friends__search {
+  padding: 0 12px 8px;
+}
 
 .item {
   position: absolute;