Просмотр исходного кода

feat:优化 user 管理的样式:
1)详情、表单,移除 cell-group、safe-area-inset-bottom
2)使用 wd-fab 替代右下角按钮

YunaiV 4 месяцев назад
Родитель
Сommit
4e29f71a8c

+ 3 - 12
src/pages-system/user/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="头像">
           <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>

+ 3 - 12
src/pages-system/user/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.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>

+ 19 - 15
src/pages-system/user/index.vue

@@ -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: {