refactor: 调整View Page

Author: sunlin92

src/component/base/page-panel.vue

@@ -3,7 +3,10 @@
     <header
       v-if="title || hasTitleSlot || hasActionsSlot"
       class="page-panel__header"
-      :class="{ 'page-panel__header--with-actions': hasActionsSlot }"
+      :class="{
+        'page-panel__header--with-actions': hasActionsSlot,
+        'page-panel__header--sticky': stickyHeader,
+      }"
       :style="headerStyle"
     >
       <div class="page-panel__title">
@@ -27,53 +30,56 @@ defineOptions({
   name: 'PagePanel',
 })
 
-const { title, headerPadding, bodyPadding, bodyClass } = defineProps({
+const { title, headerPadding, bodyPadding, bodyClass, stickyHeader, stickyTop } = defineProps({
   title: {
     type: String,
     default: '',
   },
   headerPadding: {
     type: String,
-    default: '0 40px',
+    default: '0 30px',
   },
   bodyPadding: {
     type: String,
-    default: '20px',
+    default: '',
   },
   bodyClass: {
     type: [String, Array, Object],
     default: '',
   },
+  stickyHeader: {
+    type: Boolean,
+    default: true,
+  },
+  stickyTop: {
+    type: String,
+    default: '0px',
+  },
 })
 
 const slots = useSlots()
 const hasTitleSlot = computed(() => Boolean(slots.title))
 const hasActionsSlot = computed(() => Boolean(slots.actions))
 const headerStyle = computed(() => ({
   '--page-panel-header-padding': headerPadding,
+  '--page-panel-sticky-top': stickyTop,
 }))
 const bodyStyle = computed(() => ({
-  '--page-panel-body-padding': bodyPadding,
+  '--page-panel-body-padding': resolveBodyPadding(),
 }))
+
+function resolveBodyPadding() {
+  if (bodyPadding) {
+    return bodyPadding
+  }
+
+  return '20px 30px 30px'
+}
 </script>
 
 <style lang="scss" scoped>
 .page-panel {
   position: relative;
-  overflow: hidden;
-  background: var(--theme-panel-gradient);
-  border: 1px solid var(--theme-border);
-  border-radius: 18px;
-  box-shadow: var(--theme-panel-shadow);
-
-  &:before {
-    content: '';
-    position: absolute;
-    inset: 0 0 auto;
-    height: 68px;
-    background: linear-gradient(180deg, var(--theme-panel-highlight), transparent);
-    pointer-events: none;
-  }
 }
 
 .page-panel__header {
@@ -83,14 +89,27 @@ const bodyStyle = computed(() => ({
   min-height: 59px;
   padding: var(--page-panel-header-padding);
   border-bottom: 1px solid var(--theme-border);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent);
 }
 
 .page-panel__header--with-actions {
   justify-content: space-between;
   gap: 16px;
 }
 
+.page-panel__header--sticky {
+  position: sticky;
+  top: var(--page-panel-sticky-top);
+  z-index: 9;
+}
+
+.page-panel__header--sticky:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: var(--theme-main-bg);
+}
+
 .page-panel__title {
   min-width: 0;
   color: $parent-title-color;
@@ -103,11 +122,26 @@ const bodyStyle = computed(() => ({
 .page-panel__actions {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
   gap: 12px;
+  min-width: 0;
 }
 
 .page-panel__body {
   position: relative;
   padding: var(--page-panel-body-padding);
 }
+
+@media screen and (width <= 680px) {
+  .page-panel__header--with-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .page-panel__actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
 </style>

src/component/layout/use-current-user-profile.js

@@ -1,8 +1,8 @@
 import { ElMessage } from 'element-plus'
 
-import { MAX_SUCCESS_CODE } from '@/config/global'
 import { getInformation, updateProfile as updateUserProfile } from '@/model/user'
 import { notifyRequestError } from '@/lin/util/request-error'
+import { isFailedResponse } from '@/lin/util/response'
 import { mergeUserSnapshot } from '@/store/modules/user-helpers'
 
 const defaultUserModel = {
@@ -26,7 +26,7 @@ export function useCurrentUserProfile({ userStore, message = ElMessage, userMode
     try {
       const result = await userModel.updateProfile(profile)
 
-      if (result.code >= MAX_SUCCESS_CODE) {
+      if (isFailedResponse(result)) {
         message.error(result.message || failureMessage)
         return null
       }

src/lin/util/form.js

@@ -0,0 +1,69 @@
+export async function validateElementForm(form) {
+  if (!form) {
+    return false
+  }
+
+  try {
+    await form.validate()
+    return true
+  } catch {
+    return false
+  }
+}
+
+export function getRequiredFieldError(value, message = '信息不能为空') {
+  return value ? '' : message
+}
+
+export function getPasswordError(
+  value,
+  { emptyMessage = '请输入密码', minLength = 6, minLengthMessage = `密码长度不能少于${minLength}位数` } = {},
+) {
+  if (value === '') {
+    return emptyMessage
+  }
+
+  if (value.length < minLength) {
+    return minLengthMessage
+  }
+
+  return ''
+}
+
+export function getConfirmedValueError(
+  value,
+  expectedValue,
+  { emptyMessage = '请再次输入密码', mismatchMessage = '两次输入密码不一致!' } = {},
+) {
+  if (value === '') {
+    return emptyMessage
+  }
+
+  if (value !== expectedValue) {
+    return mismatchMessage
+  }
+
+  return ''
+}
+
+export function createErrorMessageValidator(resolveErrorMessage, { onSuccess } = {}) {
+  return (_, value, callback) => {
+    const errorMessage = resolveErrorMessage(value)
+
+    if (errorMessage) {
+      callback(new Error(errorMessage))
+      return
+    }
+
+    onSuccess?.(value)
+    callback()
+  }
+}
+
+export function createRequiredRule(message = '信息不能为空', { trigger = 'blur' } = {}) {
+  return {
+    required: true,
+    trigger,
+    validator: createErrorMessageValidator(value => getRequiredFieldError(value, message)),
+  }
+}

src/lin/util/response.js

@@ -0,0 +1,9 @@
+import { MAX_SUCCESS_CODE } from '@/config/global'
+
+export function isSuccessfulResponse(response = {}, successCode = MAX_SUCCESS_CODE) {
+  return Number.isFinite(response?.code) && response.code < successCode
+}
+
+export function isFailedResponse(response = {}, successCode = MAX_SUCCESS_CODE) {
+  return !isSuccessfulResponse(response, successCode)
+}

src/view/admin/group/group-create.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="container">
-    <div class="title">新建分组信息</div>
+  <PagePanel title="新建分组信息">
     <div class="wrap">
       <el-row>
         <el-col :lg="16" :md="20" :sm="24" :xs="24">
@@ -31,13 +30,15 @@
         </el-col>
       </el-row>
     </div>
-  </div>
+  </PagePanel>
 </template>
 
 <script setup>
 import { useTemplateRef } from 'vue'
 import { useRouter } from 'vue-router'
 
+import PagePanel from '@/component/base/page-panel.vue'
+
 import GroupPermissions from './group-permission'
 import { useGroupCreation } from './use-group-form'
 
@@ -53,22 +54,7 @@ const { groupDraft, loading, resetGroupForm, rules, selectedPermissionIds, submi
 </script>
 
 <style lang="scss" scoped>
-.container {
-  padding: 0 30px;
-
-  .title {
-    height: 59px;
-    line-height: 59px;
-    color: $parent-title-color;
-    font-size: 16px;
-    font-weight: 500;
-    border-bottom: 1px solid #dae1ec;
-  }
-
-  .wrap {
-    padding: 20px;
-  }
-
+.wrap {
   .submit :deep(.el-form-item__content) {
     justify-content: flex-start;
   }

src/view/admin/group/group-edit.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="container">
-    <div class="title">编辑分组权限</div>
+  <PagePanel title="编辑分组权限">
     <div class="wrap">
       <el-row>
         <el-col :lg="16" :md="20" :sm="24" :xs="24">
@@ -16,12 +15,14 @@
         </el-col>
       </el-row>
     </div>
-  </div>
+  </PagePanel>
 </template>
 
 <script setup>
 import { useRoute, useRouter } from 'vue-router'
 
+import PagePanel from '@/component/base/page-panel.vue'
+
 import GroupPermissions from './group-permission'
 import { useGroupPermissionEditor } from './use-group-form'
 
@@ -36,28 +37,11 @@ const { groupId, selectedPermissionIds, handlePermissionsLoaded, applyPermission
 </script>
 
 <style lang="scss" scoped>
-.container {
-  padding: 0 30px;
-
-  .title {
-    height: 59px;
-    line-height: 59px;
-    color: $parent-title-color;
-    font-size: 16px;
-    font-weight: 500;
-    border-bottom: 1px solid #dae1ec;
-  }
-
-  .wrap {
-    padding: 20px;
-  }
-
-  .actions {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding-left: 5px;
-    margin-top: 30px;
-  }
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-left: 5px;
+  margin-top: 30px;
 }
 </style>

src/view/admin/group/group-helpers.js

@@ -29,22 +29,6 @@ export function assignGroupDraft(target, source = {}) {
   target.info = source.info || ''
 }
 
-export function createGroupRules() {
-  const checkName = (_, value, callback) => {
-    if (!value) {
-      callback(new Error('分组名称不能为空'))
-      return
-    }
-
-    callback()
-  }
-
-  return {
-    info: [],
-    name: [{ validator: checkName, trigger: ['blur', 'change'], required: true }],
-  }
-}
-
 export function buildGroupEditRoute(groupId) {
   return {
     path: '/admin/group/edit',
@@ -74,19 +58,6 @@ export function normalizePermissionIds(permissionIds = []) {
   return [...normalizedIds]
 }
 
-export async function validateGroupForm(form) {
-  if (!form) {
-    return false
-  }
-
-  try {
-    await form.validate()
-    return true
-  } catch {
-    return false
-  }
-}
-
 export function hasGroupInfoChanged(group, cacheGroup) {
   return cacheGroup.name !== group.name || cacheGroup.info !== group.info
 }