feat:优化 user 管理的样式:

1)详情、表单,移除 cell-group、safe-area-inset-bottom
2)使用 wd-fab 替代右下角按钮
This commit is contained in:
YunaiV
2025-12-15 11:00:44 +08:00
parent 96f4a931ca
commit 4e29f71a8c
3 changed files with 25 additions and 39 deletions

View File

@@ -8,8 +8,8 @@
/> />
<!-- 详情内容 --> <!-- 详情内容 -->
<view class="p-24rpx pb-200rpx"> <view>
<wd-cell-group custom-class="cell-group" border> <wd-cell-group border>
<wd-cell title="头像"> <wd-cell title="头像">
<view v-if="formData?.avatar" class="h-80rpx w-80rpx overflow-hidden rounded-full"> <view v-if="formData?.avatar" class="h-80rpx w-80rpx overflow-hidden rounded-full">
<image :src="formData.avatar" class="h-full w-full" mode="aspectFill" /> <image :src="formData.avatar" class="h-full w-full" mode="aspectFill" />
@@ -35,7 +35,7 @@
</view> </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"> <view class="w-full flex gap-24rpx">
<wd-button <wd-button
v-if="hasAccessByCodes(['system:user:update'])" v-if="hasAccessByCodes(['system:user:update'])"
@@ -196,13 +196,4 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <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> </style>

View File

@@ -8,9 +8,9 @@
/> />
<!-- 表单区域 --> <!-- 表单区域 -->
<view class="p-24rpx"> <view>
<wd-form ref="formRef" :model="formData" :rules="formRules"> <wd-form ref="formRef" :model="formData" :rules="formRules">
<wd-cell-group custom-class="cell-group" border> <wd-cell-group border>
<wd-input <wd-input
v-model="formData.username" v-model="formData.username"
label="用户名称" label="用户名称"
@@ -83,7 +83,7 @@
</view> </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 <wd-button
type="primary" type="primary"
block block
@@ -190,13 +190,4 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <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> </style>

View File

@@ -20,7 +20,7 @@
<view <view
v-for="item in list" v-for="item in list"
:key="item.id" :key="item.id"
class="mb-24rpx overflow-hidden rounded-12rpx bg-white shadow-sm" class="mb-24rpx rounded-12rpx bg-white"
@click="handleDetail(item)" @click="handleDetail(item)"
> >
<view class="relative p-24rpx"> <view class="relative p-24rpx">
@@ -28,17 +28,19 @@
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="item.status" /> <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="item.status" />
</view> </view>
<view class="flex items-center gap-16rpx"> <view class="flex items-center gap-16rpx">
<view <wd-img
v-if="item.avatar" v-if="item.avatar"
class="h-80rpx w-80rpx overflow-hidden rounded-full" :src="item.avatar"
> :width="40"
<image :src="item.avatar" class="h-full w-full" mode="aspectFill" /> :height="40"
</view> mode="aspectFill"
round
/>
<view <view
v-else v-else
class="h-80rpx w-80rpx flex items-center justify-center rounded-full bg-[#1890ff] text-32rpx text-white" class="h-80rpx w-80rpx flex items-center justify-center rounded-full bg-[#1890ff] text-32rpx text-white"
> >
{{ item.nickname?.charAt(0) || item.username?.charAt(0) }} {{ (item.nickname || item.username)?.charAt(0) }}
</view> </view>
<view> <view>
<view class="text-32rpx text-[#333] font-semibold"> <view class="text-32rpx text-[#333] font-semibold">
@@ -49,6 +51,9 @@
</view> </view>
</view> </view>
</view> </view>
<view v-if="item.loginDate" class="absolute bottom-24rpx right-24rpx text-22rpx text-[#999]">
登录时间{{ formatDate(item.loginDate) }}
</view>
</view> </view>
</view> </view>
@@ -63,16 +68,14 @@
/> />
</view> </view>
<!-- 新增按钮 --> <!-- 新增按钮 -->
<!-- TODO @芋艿优化全局样式后续要全局样式么 --> <wd-fab
<view
v-if="hasAccessByCodes(['system:user:create'])" v-if="hasAccessByCodes(['system:user:create'])"
class="fixed bottom-100rpx right-32rpx z-10 h-100rpx w-100rpx flex items-center justify-center rounded-full bg-[#1890ff] shadow-lg" position="right-bottom"
type="primary"
:expandable="false"
@click="handleAdd" @click="handleAdd"
> />
<wd-icon name="add" size="24px" color="#fff" />
</view>
</view> </view>
</template> </template>
@@ -84,9 +87,10 @@ import { onReachBottom } from '@dcloudio/uni-app'
import { onMounted, reactive, ref } from 'vue' import { onMounted, reactive, ref } from 'vue'
import { getUserPage } from '@/api/system/user' import { getUserPage } from '@/api/system/user'
import { useAccess } from '@/hooks/useAccess' import { useAccess } from '@/hooks/useAccess'
import { navigateBackPlus } from '@/utils'
import { DICT_TYPE } from '@/utils/constants' import { DICT_TYPE } from '@/utils/constants'
import SearchForm from './components/search-form.vue' import SearchForm from './components/search-form.vue'
import { navigateBackPlus } from '@/utils'; import { formatDate } from '@/utils/date';
definePage({ definePage({
style: { style: {