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">
|
<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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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: {
|
||||||
|
|||||||
Reference in New Issue
Block a user