feat:优化 user 管理的样式:
1)详情、表单,移除 cell-group、safe-area-inset-bottom 2)使用 wd-fab 替代右下角按钮
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user