feat: 完成前端业务闭环与后端联调

pages/genealogy/search.vue

@@ -2,7 +2,7 @@
   <view class="search-page">
     <GenealogyPageBackground />
     <view class="page-header"
-      ><PageHeader title="搜索家谱" custom-back @back="backToGenealogies"
+      ><PageHeader title="搜索家谱" custom-back @back="requestBack"
     /></view>
     <view class="page-content">
       <view class="invite-card">
@@ -45,8 +45,41 @@
       </view>
       <view class="search-note"
         ><text>公开家谱</text
-        ><text>以下是可加入的公开家谱。</text></view
+        ><text>输入谱名或姓氏，查找可以申请加入的公开家谱。</text></view
       >
+      <view class="public-search-card">
+        <text class="public-search-card__label">查找公开家谱</text>
+        <view class="public-search-card__control">
+          <input
+            v-model="searchKeyword"
+            maxlength="50"
+            confirm-type="search"
+            placeholder="请输入谱名或姓氏"
+            aria-label="公开家谱搜索关键词"
+            @confirm="searchGenealogies"
+          />
+          <button
+            v-if="searchKeyword"
+            class="public-search-card__clear"
+            aria-label="清除家谱搜索关键词"
+            @click="clearSearchKeyword"
+          >
+            清除
+          </button>
+        </view>
+        <text
+          v-if="genealogySearchState === 'ready'"
+          class="public-search-card__result"
+          role="status"
+        >{{ searchResultCopy }}</text>
+        <AppButton
+          block
+          type="secondary"
+          :disabled="genealogySearchState === 'loading'"
+          :label="genealogySearchState === 'loading' ? '正在搜索' : '搜索公开家谱'"
+          @click="searchGenealogies"
+        />
+      </view>
       <view v-if="genealogySearchState === 'loading'" class="state-card"
         ><AppLoading
           text="正在读取公开家谱"
@@ -64,8 +97,13 @@
       <view v-else-if="genealogySearchState === 'empty'" class="state-card"
         ><text>暂未找到公开家谱</text></view
       >
+      <view v-else-if="!filteredRows.length" class="state-card">
+        <text>没有找到匹配的公开家谱</text>
+        <text class="state-card__copy">可尝试缩短关键词，或改用姓氏查找。</text>
+        <AppButton block type="secondary" label="清除关键词" @click="clearSearchKeyword" />
+      </view>
       <view v-else class="result-list">
-        <view v-for="item in rows" :key="item.id" class="genealogy-card">
+        <view v-for="item in filteredRows" :key="item.id" class="genealogy-card">
           <view class="card-heading"
             ><text>{{ item.name }}</text
             ><text v-if="item.surname">{{ item.surname }}氏</text></view
@@ -77,8 +115,8 @@
           <view class="card-footer"
             ><text>{{ item.memberCount }} 位成员</text
             ><AppButton
-              :label="item.canManage ? '已在我的家谱' : '申请加入'"
-              :disabled="item.canManage"
+              :label="item.hasMembership ? '已在我的家谱' : '申请加入'"
+              :disabled="item.hasMembership"
               @click="applyToJoin(item)"
           /></view>
         </view>
@@ -101,7 +139,7 @@
 
 <script setup>
 import { computed, ref } from "vue";
-import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
+import { onBackPress, onLoad, onShow, onUnload } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
 import AppDialog from "@/components/AppDialog.vue";
 import AppLoading from "@/components/AppLoading.vue";
@@ -115,10 +153,12 @@ import { genealogyMembershipApi } from "@/services/api/genealogy-membership-serv
 import { genealogyApi } from "@/services/api/genealogy-service.js";
 import { getRequestErrorMessage } from "@/services/api/request-error-message.js";
 import { createNonIdempotentWriteGuard } from "@/utils/non-idempotent-write-guard.js";
-import { openPage, returnTo } from "@/utils/navigation/gateway.js";
+import { handleBackPress, openPage, returnTo } from "@/utils/navigation/gateway.js";
 
 const rows = ref([]);
 const genealogySearchState = ref("loading");
+const searchKeyword = ref("");
+const loadedSearchKeyword = ref("");
 const inviteToken = ref("");
 const inviteState = ref("idle");
 const inviteError = ref("");
@@ -130,15 +170,40 @@ const invitationPreviewController = createRequestController();
 const invitationRedemptionController = createRequestController();
 const invitationRedemptionGuard = createNonIdempotentWriteGuard();
 let isPageActive = true;
-const loadGenealogies = async () => {
+const normalizedSearchKeyword = computed(() =>
+  searchKeyword.value.trim().toLocaleLowerCase(),
+);
+const filteredRows = computed(() => {
+  if (!normalizedSearchKeyword.value) return rows.value;
+  return rows.value.filter((genealogy) =>
+    [genealogy.name, genealogy.surname].some((fieldValue) =>
+      String(fieldValue || "")
+        .toLocaleLowerCase()
+        .includes(normalizedSearchKeyword.value),
+    ),
+  );
+});
+const searchResultCopy = computed(() =>
+  normalizedSearchKeyword.value
+    ? `找到 ${filteredRows.value.length} 部匹配家谱`
+    : `共 ${rows.value.length} 部公开家谱`,
+);
+const clearSearchKeyword = () => {
+  searchKeyword.value = "";
+  if (loadedSearchKeyword.value) void loadGenealogies("");
+};
+const loadGenealogies = async (keyword = searchKeyword.value) => {
   publicGenealogyListController.abort();
   genealogySearchState.value = "loading";
   try {
-    const publicGenealogies = await genealogyApi.getPublicGenealogies({
-      requestController: publicGenealogyListController,
-    });
+    const normalizedKeyword = String(keyword || "").trim();
+    const publicGenealogies = await genealogyApi.getPublicGenealogies(
+      { keyword: normalizedKeyword },
+      { requestController: publicGenealogyListController },
+    );
     if (!isPageActive) return;
     rows.value = publicGenealogies;
+    loadedSearchKeyword.value = normalizedKeyword;
     genealogySearchState.value = rows.value.length ? "ready" : "empty";
   } catch (error) {
     if (!isPageActive || isRequestCancelled(error)) return;
@@ -196,6 +261,7 @@ const previewInvite = async () => {
     inviteError.value = getRequestErrorMessage(error, "邀请码暂时无法查看，请检查后重试。");
   }
 };
+const searchGenealogies = () => loadGenealogies(searchKeyword.value);
 const openRedeemConfirmation = () => {
   if (inviteState.value === "ready" && invitePreview.value)
     redeemConfirmationVisible.value = true;
@@ -203,6 +269,14 @@ const openRedeemConfirmation = () => {
 const closeRedeemConfirmation = () => {
   if (inviteState.value !== "redeeming") redeemConfirmationVisible.value = false;
 };
+const requestBack = () => {
+  if (inviteState.value === "redeeming") return true;
+  if (redeemConfirmationVisible.value) {
+    closeRedeemConfirmation();
+    return true;
+  }
+  return backToGenealogies();
+};
 const redeemInvite = async () => {
   if (inviteState.value !== "ready" || !invitePreview.value) return;
   const redemptionPayload = { token: inviteToken.value };
@@ -242,9 +316,9 @@ const handleInviteResult = () =>
   inviteResult.value?.redemptionResult === "DIRECT_MEMBER"
     ? returnTo("G01")
     : openPage("G09", {}, "G06");
-onLoad(loadGenealogies);
+onLoad(() => loadGenealogies(""));
 onShow(() => {
-  if (genealogySearchState.value !== "loading") loadGenealogies();
+  if (genealogySearchState.value !== "loading") loadGenealogies(searchKeyword.value);
 });
 onUnload(() => {
   isPageActive = false;
@@ -252,6 +326,7 @@ onUnload(() => {
   invitationPreviewController.abort();
   invitationRedemptionController.abort();
 });
+onBackPress((event) => handleBackPress(event, requestBack));
 </script>
 
 <style scoped lang="scss">
@@ -267,9 +342,10 @@ onUnload(() => {
   z-index: 1;
 }
 .page-content {
-  padding: 18rpx 24rpx 72rpx;
+  padding: 18rpx 24rpx calc(72rpx + env(safe-area-inset-bottom));
 }
 .search-note,
+.public-search-card,
 .state-card,
 .genealogy-card,
 .invite-card {
@@ -303,7 +379,7 @@ onUnload(() => {
   @include adaptive-genealogy-form-field;
   display: block;
   width: 100%;
-  min-height: 78rpx;
+  min-height: var(--app-touch-min);
   margin-top: 18rpx;
   padding: 0 22rpx;
   box-sizing: border-box;
@@ -349,6 +425,58 @@ onUnload(() => {
   color: $ink-muted;
   font-size: clamp(13px, 21rpx, 16px);
 }
+.public-search-card {
+  margin-top: 18rpx;
+  padding: 24rpx 30rpx;
+}
+.public-search-card__label,
+.public-search-card__result {
+  display: block;
+}
+.public-search-card__label {
+  color: $ink;
+  font-size: clamp(15px, 24rpx, 18px);
+  font-weight: 700;
+}
+.public-search-card__control {
+  @include adaptive-genealogy-form-field;
+  display: flex;
+  min-height: var(--app-touch-min);
+  align-items: center;
+  margin-top: 12rpx;
+  padding: 0 10rpx 0 20rpx;
+  box-sizing: border-box;
+}
+.public-search-card__control input {
+  min-width: 0;
+  min-height: var(--app-touch-min);
+  flex: 1;
+  color: $ink;
+  font-size: clamp(15px, 24rpx, 18px);
+}
+.public-search-card__clear {
+  min-width: 96rpx;
+  min-height: calc(var(--app-touch-min) - 16rpx);
+  margin: 0;
+  padding: 0 14rpx;
+  border: 0;
+  border-radius: 8rpx;
+  background: transparent;
+  color: $brand-red;
+  font-size: clamp(13px, 21rpx, 16px);
+  line-height: calc(var(--app-touch-min) - 16rpx);
+}
+.public-search-card__clear::after {
+  border: 0;
+}
+.public-search-card__result {
+  margin-top: 10rpx;
+  color: $ink-muted;
+  font-size: clamp(13px, 21rpx, 16px);
+}
+.public-search-card > .app-button {
+  margin-top: 16rpx;
+}
 .state-card {
   display: flex;
   min-height: 310rpx;
@@ -361,6 +489,13 @@ onUnload(() => {
   color: $ink;
   font-size: clamp(16px, 28rpx, 20px);
 }
+.state-card__copy {
+  display: block;
+  margin-top: 10rpx;
+  color: $ink-muted;
+  font-size: clamp(14px, 22rpx, 17px);
+  line-height: 1.55;
+}
 .state-card .app-button {
   width: 100%;
   margin-top: 22rpx;
@@ -381,6 +516,8 @@ onUnload(() => {
   gap: 18rpx;
 }
 .card-heading text:first-child {
+  min-width: 0;
+  flex: 1;
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
   font-size: clamp(17px, 31rpx, 22px);