feat：search-form 结合 wd-search 组件，解决 mp 环境下 wd-navbar 的 right 遮挡问题

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

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()
     },

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))
 }
 
 /** 提交表单 */

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()
 }
 
 /** 加载更多 */