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">
<wd-cell-group custom-class="cell-group" border>
<view>
<wd-cell-group border>
<wd-cell title="头像">
<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" />
@@ -35,7 +35,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">
<view class="w-full flex gap-24rpx">
<wd-button
v-if="hasAccessByCodes(['system:user:update'])"
@@ -196,13 +196,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>

View File

@@ -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.username"
label="用户名称"
@@ -83,7 +83,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
@@ -190,13 +190,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>

View File

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