feat：优化 system/role 的实现代码

src/pages-system/role/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"
@@ -59,7 +68,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 
 /** 搜索表单数据 */
 export interface SearchFormData {
@@ -69,19 +78,29 @@ 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?.name) {
+    conditions.push(`名称:${props.searchParams.name}`)
+  }
+  if (props.searchParams?.code) {
+    conditions.push(`标识:${props.searchParams.code}`)
+  }
+  if (props.searchParams?.status !== undefined && props.searchParams.status !== -1) {
+    conditions.push(`状态:${props.searchParams.status === 0 ? '启用' : '禁用'}`)
+  }
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索角色'
 })
 
 const formData = reactive<SearchFormData>({
@@ -91,7 +110,7 @@ const formData = reactive<SearchFormData>({
 })
 
 /** 监听弹窗打开，同步外部参数 */
-watch(() => props.modelValue, (val) => {
+watch(visible, (val) => {
   if (val && props.searchParams) {
     formData.name = props.searchParams.name
     formData.code = props.searchParams.code

src/pages-system/role/detail/index.vue

@@ -8,8 +8,8 @@
     />
 
     <!-- 详情内容 -->
-    <view class="p-24rpx pb-200rpx">
-      <wd-cell-group custom-class="cell-group" border>
+    <view>
+      <wd-cell-group border>
         <wd-cell title="角色名称" :value="formData?.name || '-'" />
         <wd-cell title="角色标识" :value="formData?.code || '-'" />
         <wd-cell title="显示顺序" :value="String(formData?.sort ?? '-')" />
@@ -22,12 +22,18 @@
     </view>
 
     <!-- 底部操作按钮 -->
-    <view class="safe-area-inset-bottom fixed bottom-0 left-0 right-0 bg-white p-24rpx">
+    <view class="fixed bottom-0 left-0 right-0 bg-white p-24rpx">
       <view class="w-full flex gap-24rpx">
-        <wd-button class="flex-1" type="warning" @click="handleEdit">
+        <wd-button
+          v-if="hasAccessByCodes(['system:role:update'])"
+          class="flex-1" type="warning" @click="handleEdit"
+        >
           编辑
         </wd-button>
-        <wd-button class="flex-1" type="error" :loading="deleting" @click="handleDelete">
+        <wd-button
+          v-if="hasAccessByCodes(['system:role:delete'])"
+          class="flex-1" type="error" :loading="deleting" @click="handleDelete"
+        >
           删除
         </wd-button>
       </view>
@@ -41,11 +47,13 @@ import type { Role } from '@/api/system/role'
 import { onMounted, ref } from 'vue'
 import { useToast } from 'wot-design-uni'
 import { deleteRole, getRole } from '@/api/system/role'
+import { useAccess } from '@/hooks/useAccess'
+import { navigateBackPlus } from '@/utils'
 import { DICT_TYPE } from '@/utils/constants'
 import { formatDateTime } from '@/utils/date'
 
 const props = defineProps<{
-  id: number
+  id?: number | any
 }>()
 
 definePage({
@@ -55,13 +63,14 @@ definePage({
   },
 })
 
+const { hasAccessByCodes } = useAccess()
 const toast = useToast()
 const formData = ref<Role>() // 详情数据
 const deleting = ref(false) // 删除中
 
 /** 返回上一页 */
 function handleBack() {
-  uni.navigateBack()
+  navigateBackPlus('/pages-system/role/index')
 }
 
 /** 加载角色详情 */
@@ -69,7 +78,12 @@ async function getDetail() {
   if (!props.id) {
     return
   }
-  formData.value = await getRole(props.id)
+  try {
+    toast.loading('加载中...')
+    formData.value = await getRole(props.id)
+  } finally {
+    toast.close()
+  }
 }
 
 /** 编辑角色 */
@@ -112,13 +126,4 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-:deep(.cell-group) {
-  border-radius: 12rpx;
-  overflow: hidden;
-  box-shadow: 0 3rpx 8rpx rgba(24, 144, 255, 0.06);
-}
-
-.safe-area-inset-bottom {
-  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
-}
 </style>

src/pages-system/role/form/index.vue

@@ -8,9 +8,9 @@
     />
 
     <!-- 表单区域 -->
-    <view class="p-24rpx">
+    <view>
       <wd-form ref="formRef" :model="formData" :rules="formRules">
-        <wd-cell-group custom-class="cell-group" border>
+        <wd-cell-group border>
           <wd-input
             v-model="formData.name"
             label="角色名称"
@@ -54,7 +54,7 @@
     </view>
 
     <!-- 底部保存按钮 -->
-    <view class="safe-area-inset-bottom fixed bottom-0 left-0 right-0 bg-white p-24rpx">
+    <view class="fixed bottom-0 left-0 right-0 bg-white p-24rpx">
       <wd-button
         type="primary"
         block
@@ -72,10 +72,11 @@ import type { Role } from '@/api/system/role'
 import { computed, onMounted, ref } from 'vue'
 import { useToast } from 'wot-design-uni'
 import { createRole, getRole, updateRole } from '@/api/system/role'
+import { navigateBackPlus } from '@/utils'
 import { CommonStatusEnum } from '@/utils/constants'
 
 const props = defineProps<{
-  id?: number
+  id?: number | any
 }>()
 
 definePage({
@@ -107,7 +108,7 @@ const formRef = ref()
 
 /** 返回上一页 */
 function handleBack() {
-  uni.navigateBack()
+  navigateBackPlus('/pages-system/role/index')
 }
 
 /** 加载角色详情 */
@@ -149,13 +150,4 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-:deep(.cell-group) {
-  border-radius: 12rpx;
-  overflow: hidden;
-  box-shadow: 0 3rpx 8rpx rgba(24, 144, 255, 0.06);
-}
-
-.safe-area-inset-bottom {
-  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
-}
 </style>

src/pages-system/role/index.vue

@@ -5,13 +5,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">
@@ -50,22 +51,14 @@
       />
     </view>
 
-    <!-- 搜索弹窗 -->
-    <SearchForm
-      v-model="searchVisible"
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
-
     <!-- 新增按钮 -->
-    <!-- TODO @芋艿：【优化：全局样式】后续要全局样式么 -->
-    <view
-      class="fixed bottom-100rpx right-32rpx z-10 h-100rpx w-100rpx flex items-center justify-center rounded-full bg-[#1890ff] shadow-lg"
+    <wd-fab
+      v-if="hasAccessByCodes(['system:role:create'])"
+      position="right-bottom"
+      type="primary"
+      :expandable="false"
       @click="handleAdd"
-    >
-      <wd-icon name="add" size="24px" color="#fff" />
-    </view>
+    />
   </view>
 </template>
 
@@ -76,6 +69,8 @@ import type { LoadMoreState } from '@/http/types'
 import { onReachBottom } from '@dcloudio/uni-app'
 import { onMounted, reactive, ref } from 'vue'
 import { getRolePage } from '@/api/system/role'
+import { useAccess } from '@/hooks/useAccess'
+import { navigateBackPlus } from '@/utils'
 import { DICT_TYPE } from '@/utils/constants'
 import SearchForm from './components/search-form.vue'
 
@@ -86,10 +81,10 @@ definePage({
   },
 })
 
+const { hasAccessByCodes } = useAccess()
 const total = ref(0) // 列表的总页数
 const list = ref<Role[]>([]) // 列表的数据
 const loadMoreState = ref<LoadMoreState>('loading') // 加载更多状态
-const searchVisible = ref(false) // 搜索弹窗
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -100,7 +95,7 @@ const queryParams = reactive({
 
 /** 返回上一页 */
 function handleBack() {
-  uni.navigateBack()
+  navigateBackPlus()
 }
 
 /** 查询角色列表 */