Merge branch 'master' of github.com:kailong321200875/vue-element-plus-admin

src/components/Descriptions/src/Descriptions.vue

@@ -1,5 +1,5 @@
 <script lang="tsx">
-import { ElCollapseTransition, ElDescriptions, ElDescriptionsItem, ElTooltip } from 'element-plus'
+import { ElCollapseTransition, ElTooltip, ElRow, ElCol } from 'element-plus'
 import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
 import { ref, unref, PropType, computed, defineComponent } from 'vue'
@@ -38,7 +38,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  setup(props, { slots, attrs }) {
+  setup(props, { attrs }) {
     const getBindValue = computed((): any => {
       const delArr: string[] = ['title', 'message', 'collapse', 'schema', 'data', 'class']
       const obj = { ...attrs, ...props }
@@ -108,26 +108,51 @@ export default defineComponent({
 
           <ElCollapseTransition>
             <div v-show={unref(show)} class={[`${prefixCls}-content`, 'p-20px']}>
-              <ElDescriptions {...unref(getBindValue)}>
+              <ElRow
-                {{
+                gutter={0}
-                  extra: () => (slots['extra'] ? slots['extra']() : props.extra),
+                {...unref(getBindValue)}
-                  default: () => {
+                class="outline-1px outline-[var(--el-border-color-lighter)] outline-solid"
-                    return props.schema.map((item) => {
+              >
+                {props.schema.map((item) => {
                   return (
-                        <ElDescriptionsItem key={item.field} {...getBindItemValue(item)}>
+                    <ElCol
-                          {{
+                      key={item.field}
-                            label: () => (item.slots?.label ? item.slots?.label(item) : item.label),
+                      span={item.span || 24 / props.column}
-                            default: () =>
+                      class="flex items-stretch"
-                              item.slots?.default
+                    >
+                      {props.direction === 'horizontal' ? (
+                        <div class="flex items-stretch bg-[var(--el-fill-color-light)] outline-1px outline-[var(--el-border-color-lighter)] outline-solid flex-1">
+                          <div
+                            {...getBindItemValue(item)}
+                            class="w-120px text-left px-8px py-11px font-700 color-[var(--el-text-color-regular)] border-r-1px border-r-[var(--el-border-color-lighter)] border-r-solid "
+                          >
+                            {item.label}
+                          </div>
+                          <div class="flex-1 px-8px py-11px bg-[var(--el-bg-color)] color-[var(--el-text-color-primary)] text-size-14px">
+                            {item.slots?.default
                               ? item.slots?.default(props.data)
-                                : get(props.data, item.field) ?? defaultData
+                              : get(props.data, item.field) ?? defaultData}
-                          }}
+                          </div>
-                        </ElDescriptionsItem>
+                        </div>
+                      ) : (
+                        <div class="bg-[var(--el-fill-color-light)] outline-1px outline-[var(--el-border-color-lighter)] outline-solid flex-1">
+                          <div
+                            {...getBindItemValue(item)}
+                            class="text-left px-8px py-11px font-700 color-[var(--el-text-color-regular)] border-b-1px border-b-[var(--el-border-color-lighter)] border-b-solid"
+                          >
+                            {item.label}
+                          </div>
+                          <div class="flex-1 px-8px py-11px bg-[var(--el-bg-color)] color-[var(--el-text-color-primary)] text-size-14px">
+                            {item.slots?.default
+                              ? item.slots?.default(props.data)
+                              : get(props.data, item.field) ?? defaultData}
+                          </div>
+                        </div>
+                      )}
+                    </ElCol>
                   )
-                    })
+                })}
-                  }
+              </ElRow>
-                }}
-              </ElDescriptions>
             </div>
           </ElCollapseTransition>
         </div>

src/components/Setting/src/Setting.vue

@@ -174,7 +174,8 @@ const copyConfig = async () => {
         // 头部边框颜色
         topToolBorderColor: '${appStore.getTheme.topToolBorderColor}'
       }
-    `
+    `,
+    legacy: true
   })
   if (!isSupported) {
     ElMessage.error(t('setting.copyFailed'))

src/layout/components/AppView.vue

@@ -44,10 +44,10 @@ const tagsView = computed(() => appStore.getTagsView)
         // '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height)-var(--top-tool-height))]':
         //   !fixedHeader && layout === 'top' && footer,
 
-        '!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding))]':
+        '!min-h-[calc(100%-var(--app-footer-height)-var(--app-content-padding)-var(--app-content-padding))]':
           fixedHeader && layout === 'cutMenu' && footer,
 
-        '!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding)-var(--tags-view-height))]':
+        '!min-h-[calc(100%-var(--app-footer-height)-var(--app-content-padding)-var(--app-content-padding)-var(--tags-view-height))]':
           !fixedHeader && layout === 'cutMenu' && footer
       }
     ]"

src/layout/components/useRenderLayout.tsx

@@ -195,8 +195,8 @@ export const useRenderLayout = () => {
             `${prefixCls}-content`,
             'w-full',
             {
-              'h-[calc(100%-var(--app-footer-height))]': !fixedHeader.value,
+              'h-[calc(100%-var(--top-tool-height))]': !fixedHeader.value,
-              'h-[calc(100%-var(--tags-view-height)-var(--app-footer-height))]': fixedHeader.value
+              'h-[calc(100%-var(--tags-view-height)-var(--top-tool-height))]': fixedHeader.value
             }
           ]}
         >

src/store/modules/user.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { store } from '../index'
-import { UserType } from '@/api/login/types'
+import { UserLoginType, UserType } from '@/api/login/types'
 import { ElMessageBox } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
 import { loginOutApi } from '@/api/login'
@@ -12,6 +12,8 @@ interface UserState {
   tokenKey: string
   token: string
   roleRouters?: string[] | AppCustomRouteRecordRaw[]
+  rememberMe: boolean
+  loginInfo?: UserLoginType
 }
 
 export const useUserStore = defineStore('user', {
@@ -20,7 +22,10 @@ export const useUserStore = defineStore('user', {
       userInfo: undefined,
       tokenKey: 'Authorization',
       token: '',
-      roleRouters: undefined
+      roleRouters: undefined,
+      // 记住我
+      rememberMe: true,
+      loginInfo: undefined
     }
   },
   getters: {
@@ -35,6 +40,12 @@ export const useUserStore = defineStore('user', {
     },
     getRoleRouters(): string[] | AppCustomRouteRecordRaw[] | undefined {
       return this.roleRouters
+    },
+    getRememberMe(): boolean {
+      return this.rememberMe
+    },
+    getLoginInfo(): UserLoginType | undefined {
+      return this.loginInfo
     }
   },
   actions: {
@@ -75,6 +86,12 @@ export const useUserStore = defineStore('user', {
     },
     logout() {
       this.reset()
+    },
+    setRememberMe(rememberMe: boolean) {
+      this.rememberMe = rememberMe
+    },
+    setLoginInfo(loginInfo: UserLoginType | undefined) {
+      this.loginInfo = loginInfo
     }
   },
   persist: true

src/views/Components/Descriptions.vue

@@ -42,7 +42,8 @@ const schema = reactive<DescriptionsSchema[]>([
   },
   {
     field: 'addr',
-    label: t('descriptionsDemo.addr')
+    label: t('descriptionsDemo.addr'),
+    span: 24
   }
 ])
 
@@ -125,7 +126,8 @@ const schema2 = reactive<DescriptionsSchema[]>([
           </ElFormItem>
         )
       }
-    }
+    },
+    span: 24
   }
 ])
 

src/views/Login/components/LoginForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { reactive, ref, watch } from 'vue'
+import { reactive, ref, watch, onMounted, unref } from 'vue'
 import { Form, FormSchema } from '@/components/Form'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElCheckbox, ElLink } from 'element-plus'
@@ -51,19 +51,19 @@ const schema = reactive<FormSchema[]>([
   {
     field: 'username',
     label: t('login.username'),
-    value: 'admin',
+    // value: 'admin',
     component: 'Input',
     colProps: {
       span: 24
     },
     componentProps: {
-      placeholder: t('login.usernamePlaceholder')
+      placeholder: 'admin or test'
     }
   },
   {
     field: 'password',
     label: t('login.password'),
-    value: 'admin',
+    // value: 'admin',
     component: 'InputPassword',
     colProps: {
       span: 24
@@ -72,7 +72,7 @@ const schema = reactive<FormSchema[]>([
       style: {
         width: '100%'
       },
-      placeholder: t('login.passwordPlaceholder')
+      placeholder: 'admin or test'
     }
   },
   {
@@ -186,10 +186,21 @@ const schema = reactive<FormSchema[]>([
 
 const iconSize = 30
 
-const remember = ref(false)
+const remember = ref(userStore.getRememberMe)
+
+const initLoginInfo = () => {
+  const loginInfo = userStore.getLoginInfo
+  if (loginInfo) {
+    const { username, password } = loginInfo
+    setValues({ username, password })
+  }
+}
+onMounted(() => {
+  initLoginInfo()
+})
 
 const { formRegister, formMethods } = useForm()
-const { getFormData, getElFormExpose } = formMethods
+const { getFormData, getElFormExpose, setValues } = formMethods
 
 const loading = ref(false)
 
@@ -221,6 +232,16 @@ const signIn = async () => {
         const res = await loginApi(formData)
 
         if (res) {
+          // 是否记住我
+          if (unref(remember)) {
+            userStore.setLoginInfo({
+              username: formData.username,
+              password: formData.password
+            })
+          } else {
+            userStore.setLoginInfo(undefined)
+          }
+          userStore.setRememberMe(unref(remember))
           userStore.setUserInfo(res.data)
           // 是否使用动态路由
           if (appStore.getDynamicRouter) {