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

2023-12-19 09:04:47 +08:00 · 2023-12-19 09:04:47 +08:00 · 4244a99336
parent bf2cd720d0 64ee9c208d
commit 4244a99336
7 changed files with 104 additions and 38 deletions
--- a/src/components/Descriptions/src/Descriptions.vue
+++ b/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)}>
-                {{
-                  extra: () => (slots['extra'] ? slots['extra']() : props.extra),
-                  default: () => {
-                    return props.schema.map((item) => {
-                      return (
-                        <ElDescriptionsItem key={item.field} {...getBindItemValue(item)}>
-                          {{
-                            label: () => (item.slots?.label ? item.slots?.label(item) : item.label),
-                            default: () =>
-                              item.slots?.default
-                                ? item.slots?.default(props.data)
-                                : get(props.data, item.field) ?? defaultData
-                          }}
-                        </ElDescriptionsItem>
-                      )
-                    })
-                  }
-                }}
-              </ElDescriptions>
+              <ElRow
+                gutter={0}
+                {...unref(getBindValue)}
+                class="outline-1px outline-[var(--el-border-color-lighter)] outline-solid"
+              >
+                {props.schema.map((item) => {
+                  return (
+                    <ElCol
+                      key={item.field}
+                      span={item.span || 24 / props.column}
+                      class="flex items-stretch"
+                    >
+                      {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}
+                          </div>
+                        </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>
            </div>
          </ElCollapseTransition>
        </div>
--- a/src/components/Setting/src/Setting.vue
+++ b/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'))
--- a/src/layout/components/AppView.vue
+++ b/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
      }
    ]"
--- a/src/layout/components/useRenderLayout.tsx
+++ b/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(--tags-view-height)-var(--app-footer-height))]': fixedHeader.value
+              'h-[calc(100%-var(--top-tool-height))]': !fixedHeader.value,
+              'h-[calc(100%-var(--tags-view-height)-var(--top-tool-height))]': fixedHeader.value
            }
          ]}
        >
--- a/src/store/modules/user.ts
+++ b/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
--- a/src/views/Components/Descriptions.vue
+++ b/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
  }
 ])

--- a/src/views/Login/components/LoginForm.vue
+++ b/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) {