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

iThinkDT Naive UI

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

import { useClass } from '@ithinkdt/common'

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

export const DtLogo = defineComponent({
    name: 'DtLogo',
    props: {
        src: {
            type: String,
            required: false,
            default: undefined,
        },
        name: {
            type: String,
            required: false,
            default: undefined,
        },
    },
    setup(props) {
        const cls = `${p}-logo`
        createStyle(cls)

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

        const slots = useSlots()

        const elRef = ref()

        const collpased = computed(() => theme.logoPlacement === 'sidebar' && !theme.isFixedSidebar)

        useClass(elRef, `${cls}--collapsed`, collpased)

        const transitionend = ref(true)

        const ILogo = () => (props.src?.trim() ? <img src={props.src} alt="logo" /> : slots.default?.())
        const Name = () => <span>{props.name ?? auth.app?.appName}</span>
        return () => (
            <div class={cls} ref={elRef}>
                <div class={`${cls}__icon`}>
                    <ILogo />
                </div>

                <div
                    class={[`${cls}__name`, transitionend.value && collpased.value ? `${cls}__name--hidden` : '']}
                    onTransitionstart={() => (transitionend.value = false)}
                    onTransitionend={() => (transitionend.value = true)}
                >
                    <Name class={`${cls}__name-content`} />
                </div>
            </div>
        )
    },
})

let style
function createStyle(cls) {
    if (!style) {
        style = cB(
            'logo',
            {
                ...fullWidth,
                ...flexAlignCenter,
                justifyContent: 'center',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                fontSize: '16px',
                padding: '0 16px',
                boxSizing: 'border-box',
            },
            [
                cE('icon', {
                    lineHeight: '0',
                }),
                cE('name', {
                    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                    marginLeft: '12px',
                    color: 'var(--dt-text-color1)',
                    fontSize: '22px',
                    fontWeight: 'bold',
                }),

                cM('collapsed', [
                    cE(
                        'name',
                        {
                            opacity: '0',
                            transform: 'scaleX(0)',
                        },
                        [cM('hidden', { display: 'none' })],
                    ),
                ]),
            ],
        )

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