From 96f4a931cadb9d06154a732634c6fcee66964493 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 15 Dec 2025 09:58:39 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Asearch-form=20=E7=BB=93=E5=90=88?=
 =?UTF-8?q?=20wd-search=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E8=A7=A3=E5=86=B3=20?=
 =?UTF-8?q?mp=20=E7=8E=AF=E5=A2=83=E4=B8=8B=20wd-navbar=20=E7=9A=84=20righ?=
 =?UTF-8?q?t=20=E9=81=AE=E6=8C=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../user/components/search-form.vue           | 30 ++++++++++++++-----
 src/pages-system/user/detail/index.vue        | 12 ++++----
 src/pages-system/user/form/index.vue          |  4 +--
 src/pages-system/user/index.vue               | 25 ++++++----------
 4 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/src/pages-system/user/components/search-form.vue b/src/pages-system/user/components/search-form.vue
index 72dde22..c161538 100644
--- a/src/pages-system/user/components/search-form.vue
+++ b/src/pages-system/user/components/search-form.vue
@@ -1,4 +1,13 @@
 <template>
+  <!-- 搜索框入口 -->
+  <wd-search
+    :placeholder="searchPlaceholder"
+    :hide-cancel="true"
+    disabled
+    @click="visible = true"
+  />
+
+  <!-- 搜索弹窗 -->
   <wd-popup
     v-model="visible"
     position="top"
@@ -43,7 +52,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 
 /** 搜索表单数据 */
 export interface SearchFormData {
@@ -52,19 +61,26 @@ export interface SearchFormData {
 }
 
 const props = defineProps<{
-  modelValue: boolean
   searchParams?: Partial<SearchFormData> // 初始搜索参数
 }>()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
   'search': [data: SearchFormData]
   'reset': []
 }>()
 
-const visible = computed({
-  get: () => props.modelValue,
-  set: (val: boolean) => emit('update:modelValue', val),
+const visible = ref(false)
+
+/** 搜索条件 placeholder 拼接 */
+const searchPlaceholder = computed(() => {
+  const conditions: string[] = []
+  if (props.searchParams?.username) {
+    conditions.push(`用户名:${props.searchParams.username}`)
+  }
+  if (props.searchParams?.nickname) {
+    conditions.push(`昵称:${props.searchParams.nickname}`)
+  }
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索用户'
 })
 
 const formData = reactive<SearchFormData>({
@@ -73,7 +89,7 @@ const formData = reactive<SearchFormData>({
 })
 
 /** 监听弹窗打开，同步外部参数 */
-watch(() => props.modelValue, (val) => {
+watch(visible, (val) => {
   if (val && props.searchParams) {
     formData.username = props.searchParams.username
     formData.nickname = props.searchParams.nickname
diff --git a/src/pages-system/user/detail/index.vue b/src/pages-system/user/detail/index.vue
index fb5f48c..ab9c182 100644
--- a/src/pages-system/user/detail/index.vue
+++ b/src/pages-system/user/detail/index.vue
@@ -61,9 +61,9 @@
     <!-- 更多操作菜单 -->
     <wd-action-sheet v-model="moreActionVisible" :actions="moreActions" @select="handleMoreAction" />
     <!-- 重置密码弹窗 -->
-    <PasswordForm v-model="passwordFormVisible" :user-id="props.id" @success="getDetail" />
+    <PasswordForm v-model="passwordFormVisible" :user-id="Number(props.id)" @success="getDetail" />
     <!-- 分配角色弹窗 -->
-    <RoleAssignForm v-model="roleAssignFormVisible" :user-id="props.id" @success="getDetail" />
+    <RoleAssignForm v-model="roleAssignFormVisible" :user-id="Number(props.id)" @success="getDetail" />
   </view>
 </template>
 
@@ -80,7 +80,7 @@ import RoleAssignForm from './components/role-assign-form.vue'
 import { navigateBackPlus } from '@/utils';
 
 const props = defineProps<{
-  id: number
+  id: string
 }>()
 
 definePage({
@@ -125,7 +125,7 @@ async function getDetail() {
   if (!props.id) {
     return
   }
-  formData.value = await getUser(props.id)
+  formData.value = await getUser(Number(props.id))
 }
 
 /** 编辑用户 */
@@ -149,7 +149,7 @@ function handleDelete() {
       }
       deleting.value = true
       try {
-        await deleteUser(props.id)
+        await deleteUser(Number(props.id))
         toast.success('删除成功')
         setTimeout(() => {
           handleBack()
@@ -182,7 +182,7 @@ function handleUpdateStatus() {
       if (!res.confirm) {
         return
       }
-      await updateUserStatus(props.id, formData.value.status === 1 ? 0 : 1)
+      await updateUserStatus(Number(props.id), formData.value.status === 1 ? 0 : 1)
       toast.success(isDisable ? '禁用成功' : '开启成功')
       await getDetail()
     },
diff --git a/src/pages-system/user/form/index.vue b/src/pages-system/user/form/index.vue
index bba06e2..29a954d 100644
--- a/src/pages-system/user/form/index.vue
+++ b/src/pages-system/user/form/index.vue
@@ -109,7 +109,7 @@ import PostPicker from './components/post-picker.vue'
 import { navigateBackPlus } from '@/utils';
 
 const props = defineProps<{
-  id?: number
+  id?: string
 }>()
 
 definePage({
@@ -156,7 +156,7 @@ async function getDetail() {
   if (!props.id) {
     return
   }
-  formData.value = await getUser(props.id)
+  formData.value = await getUser(Number(props.id))
 }
 
 /** 提交表单 */
diff --git a/src/pages-system/user/index.vue b/src/pages-system/user/index.vue
index 3ced734..db63610 100644
--- a/src/pages-system/user/index.vue
+++ b/src/pages-system/user/index.vue
@@ -6,13 +6,14 @@
       title="用户管理"
       left-arrow placeholder safe-area-inset-top fixed
       @click-left="handleBack"
-    >
-      <template #right>
-        <view class="flex items-center" @click="searchVisible = !searchVisible">
-          <wd-icon name="search" size="20px" />
-        </view>
-      </template>
-    </wd-navbar>
+    />
+
+    <!-- 搜索组件 -->
+    <SearchForm
+      :search-params="queryParams"
+      @search="handleQuery"
+      @reset="handleReset"
+    />
 
     <!-- 用户列表 -->
     <view class="p-24rpx">
@@ -62,13 +63,6 @@
       />
     </view>
 
-    <!-- 搜索弹窗 -->
-    <SearchForm
-      v-model="searchVisible"
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
 
     <!-- 新增按钮 -->
     <!-- TODO @芋艿：【优化：全局样式】后续要全局样式么 -->
@@ -105,7 +99,6 @@ const { hasAccessByCodes } = useAccess()
 const total = ref(0) // 列表的总页数
 const list = ref<User[]>([]) // 列表的数据
 const loadMoreState = ref<LoadMoreState>('loading') // 加载更多状态
-const searchVisible = ref(false) // 搜索弹窗
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -143,7 +136,7 @@ function handleQuery(data?: SearchFormData) {
 
 /** 重置按钮操作 */
 function handleReset() {
-  getList()
+  handleQuery()
 }
 
 /** 加载更多 */