colexiu-project/src/views/App.tsx

import ColFooter from '@/components/col-footer'
import ColHeader from '@/components/col-header'
import { ElConfigProvider, ElDialog } from 'element-plus'
import { zhCn } from '@/helpers/zhCn'
import { defineComponent } from 'vue'
import { RouterView } from 'vue-router'
import Login from './login'
import styles from './App.module.less'
import { getUserInfo, state } from '@/state'
import silder from '@/components/silder'
// 加载样式放到main文件里面会导致打包卡顿，打包时间过长
import '../style/index.css'
import 'normalize.css'
import 'element-plus/dist/index.css'
import 'vue3-lottie/dist/style.css'

export default defineComponent({
  components: { silder },
  name: 'App',
  async created() {
    // console.log('user start')
    try {
      if (state.user.data?.userId) {
        // 获取用户信息
        await getUserInfo()
      }
    } catch {}
    // console.log('user end')
  },
  render() {
    return (
      <>
        {/* 263.5 footer, 70 header */}
        <ColHeader />
        <div
          style={{
            minHeight: 'calc(100vh - 422px)',
            background: '#fff'
          }}
        >
          <ElConfigProvider locale={zhCn} message={{ max: 1 }}>
            <RouterView></RouterView>
          </ElConfigProvider>
        </div>
        <silder></silder>
        <ColFooter />
        {/* 登录弹窗 */}
        <div class={styles.loginContainer}>
          <ElDialog
            modelValue={state.loginPopupStatus}
            onUpdate:modelValue={val => (state.loginPopupStatus = val)}
            closeOnClickModal={false}
            closeOnPressEscape={false}
          >
            {state.loginPopupStatus && (
              <Login
                onClose={() => {
                  clearTimeout(state.loginPopupTimer)
                  state.loginPopupStatus = false
                }}
              />
            )}
          </ElDialog>
        </div>
      </>
    )
  }
})