@ithinkdt/naive/src/frame/layout/l-user.jsx

iThinkDT Naive UI

import { defineComponent, computed, reactive, ref, inject } from 'vue'

import { NDropdown, NAvatar, NButton, NIcon, NTooltip } from 'ithinkdt-ui'

import { useI18n, $msg, Validators, useLogin, useFormModal } from '@ithinkdt/core'

import {
    cB,
    cE,
    CSS_MOUNT_ANCHOR_META_NAME,
    CSS_STYLE_PREFIX as p,
    flexAlignCenter,
    flexGap,
} from '@ithinkdt/core/cssr'

import { ILogout, IAccount } from '../assets.jsx'

export const DtUser = defineComponent({
    name: 'DtUser',
    props: {
        dropMenus: {
            type: Array,
            requilred: false,
            default: undefined,
        },
    },
    setup(props) {
        const cls = `${p}-user`
        createStyle(cls)

        const auth = inject('__INJECTED_AUTH__')
        const theme = inject('__INJECTED_THEME__')

        const { t } = useI18n()
        const firstWord = computed(() => auth.user?.nickname?.slice(0, 1))

        const { logout } = useLogin()

        const rule = Validators.minmax(6, 20, t('sys.user.validatorPasswdLenth'))
        const { open } = useFormModal({
            title: t('sys.user.changePasswdTitle'),
            labelWidth: '8em',
            submitText: t('sys.user.changePasswdButton'),
            save: (data) => {
                return auth.changePwd(data).then(() => {
                    $msg.success(t('sys.user.changePasswdSuccess'))
                })
            },
            items: ({ fi, model }) => [
                fi('old', 'input|6~20', {
                    label: t('sys.user.changePasswdForm1'),
                    props: {
                        type: 'password',
                        showPasswordOn: 'click',
                    },
                    span: 24,
                    required: true,
                    rule: [rule],
                }),
                fi('new', 'input|6~20', {
                    label: t('sys.user.changePasswdForm2'),
                    props: {
                        type: 'password',
                        showPasswordOn: 'click',
                    },
                    span: 24,
                    required: true,
                    rule: [
                        rule,
                        {
                            message: t('sys.user.validatorPasswdNotEqualLast'),
                            trigger: 'blur',
                            validator: (value) => {
                                if (value === undefined || value === null) {
                                    return
                                }

                                return value !== model.old
                            },
                        },
                    ],
                }),
                fi('confirm', 'input|6~20', {
                    label: t('sys.user.changePasswdForm3'),
                    props: {
                        type: 'password',
                        showPasswordOn: 'click',
                    },
                    span: 24,
                    required: true,
                    rule: [
                        rule,
                        {
                            message: t('sys.user.validatorPasswdNotEqualNew'),
                            trigger: 'blur',
                            validator: (value) => {
                                if (value === undefined || value === null) {
                                    return
                                }

                                return value === model.new
                            },
                        },
                    ],
                }),
            ],
        })

        const _dropMenus = computed(() => {
            const menus = [...(props.dropMenus ?? [])]

            if (theme.showChangePwd) {
                menus.push(
                    reactive({
                        key: 'changepwd',
                        label: t('sys.user.changePasswdTitle'),
                        action: () => open(),
                    }),
                )
            }

            if (theme.logoutPlacement === 'dropdown') {
                menus.push(
                    reactive({
                        key: 'logout',
                        label: computed(() => t('sys.login.logout')),
                        action: logout,
                    }),
                )
            }
            return menus
        })

        const onSelect = (_key, { action }) => {
            action?.()
        }

        const error = ref(false)

        return () => {
            return (
                <div class={cls}>
                    <NDropdown options={_dropMenus.value} displayDirective="if" show-arrow onSelect={onSelect}>
                        <NButton class={`${cls}__wrapper`} quaternary size="large">
                            <div class={`${cls}__head`}>
                                <NAvatar
                                    class={`${cls}__avator`}
                                    round
                                    size={30}
                                    style={{
                                        backgroundColor: firstWord.value ? theme.vars.primaryColor : undefined,
                                    }}
                                >
                                    {firstWord.value || (
                                        <NIcon color={theme.vars.primaryColorHover}>
                                            <IAccount />
                                        </NIcon>
                                    )}
                                </NAvatar>

                                {theme.usernamePlacement === 'outlet' ? (
                                    <div class={`${cls}__name`}>{auth.user?.nickname}</div>
                                ) : undefined}
                            </div>
                        </NButton>
                    </NDropdown>
                    {theme.logoutPlacement === 'outlet' && auth.logged ? (
                        <NTooltip>
                            {{
                                default: () => t('sys.login.logout'),
                                trigger: () => (
                                    <NButton class={`${cls}__logout-btn`} quaternary circle onClick={logout}>
                                        <ILogout />
                                    </NButton>
                                ),
                            }}
                        </NTooltip>
                    ) : undefined}
                </div>
            )
        }
    },
})

let style
function createStyle(cls) {
    if (!style) {
        style = cB(
            'user',
            {
                ...flexAlignCenter,
                ...flexGap('1em'),
                cursor: 'pointer',
                marginRight: '16px',
            },
            [
                cE('wrapper', {
                    padding: '0 12px',
                }),
                cE('head', {
                    ...flexAlignCenter,
                    ...flexGap('10px'),
                }),
                cE('name', {
                    color: 'var(--dt-text-color1)',
                }),
                cE(' logout-btn', {
                    fontSize: '19px',
                }),
            ],
        )

        style.mount({
            id: cls,
            anchorMetaName: CSS_MOUNT_ANCHOR_META_NAME,
        })
    }
}