@ithinkdt/ui 4.0.0-10 → 4.0.0-12

package/src/design/Notification.jsx

@@ -0,0 +1,322 @@
+import { format } from 'date-fns'
+import {
+    NBadge,
+    NButton,
+    NDrawer,
+    NDrawerContent,
+    NEmpty,
+    NIcon,
+    NList,
+    NListItem,
+    NPagination,
+    NThing,
+} from 'ithinkdt-ui'
+import { defineComponent, reactive, withDirectives } from 'vue'
+
+import { useAtomicBroadcast } from '@ithinkdt/common/composables'
+
+import { vSpin } from '../directives/spin.js'
+import { vTooltip } from '../directives/tooltip.jsx'
+import { useI18n } from '../use-i18n.js'
+
+export const AppNotification = /* @__PURE__ */ defineComponent({
+    name: 'AppNotification',
+    inheritAttrs: false,
+    props: {
+        getUnreadCount: Function,
+        getPage: Function,
+        markRead: Function,
+        markDelete: Function,
+        interval: { type: Number, default: 30_000 },
+    },
+    setup(props, { slots, attrs }) {
+        const { t } = useI18n()
+
+        const show = ref(false)
+        const currentTab = ref('unread')
+        const data = reactive({
+            page: 1,
+            size: 10,
+            loading: false,
+            records: [],
+            total: 0,
+            unread: 0,
+        })
+
+        const { sync, post } = useAtomicBroadcast({
+            channel: '__ithinkdt_mc_shared_channel',
+            onMsg: (msg) => {
+                data.unread = msg
+            },
+            getMsg: () => {
+                if (show.value) {
+                    data.loading = true
+                    Promise.resolve(props.getPage?.(currentTab.value, data.page, data.size) ?? [])
+                        .then(({ records, total }) => {
+                            data.records = records
+                            if (currentTab.value === 'unread') {
+                                data.unread = total
+                                post(total)
+                            } else {
+                                data.total = total
+                            }
+                        })
+                        .finally(() => {
+                            data.loading = false
+                        })
+                }
+                return props.getUnreadCount?.() ?? 0
+            },
+            timeout: () => props.interval,
+            immediate: true,
+        })
+
+        return () => {
+            const trigger = withDirectives(
+                <NButton
+                    {...attrs}
+                    quaternary
+                    style="--n-padding: 0 12px"
+                    onClick={() => {
+                        show.value = true
+                        currentTab.value = data.unread > 0 ? 'unread' : 'all'
+                        setTimeout(sync, 300)
+                    }}
+                >
+                    {slots.icon
+                        ? (
+                                slots.icon()
+                            )
+                        : (
+                                <NBadge show={data.unread > 0} dot offset={[-2, 5]} processing>
+                                    <NIcon size="18">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                                            <g
+                                                fill="none"
+                                                stroke="currentColor"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                stroke-width="1.5"
+                                                color="currentColor"
+                                            >
+                                                <path d="M2.53 14.77c-.213 1.394.738 2.361 1.902 2.843c4.463 1.85 10.673 1.85 15.136 0c1.164-.482 2.115-1.45 1.902-2.843c-.13-.857-.777-1.57-1.256-2.267c-.627-.924-.689-1.931-.69-3.003C19.525 5.358 16.157 2 12 2S4.475 5.358 4.475 9.5c0 1.072-.062 2.08-.69 3.003c-.478.697-1.124 1.41-1.255 2.267" />
+                                                <path d="M8 19c.458 1.725 2.076 3 4 3c1.925 0 3.541-1.275 4-3" />
+                                            </g>
+                                        </svg>
+                                    </NIcon>
+                                </NBadge>
+                            )}
+                </NButton>,
+                [[vTooltip, t('common.notification.tip', { count: data.unread }), undefined, { bottom: true }]],
+            )
+
+            const header = () => (
+                <div style="display: flex; align-items: baseline; gap: 20px">
+                    <div style="padding-right: 12px">{t('common.notification.title') }</div>
+                    <NButton
+                        text
+                        type={currentTab.value === 'all' ? 'primary' : 'default'}
+                        onClick={() => {
+                            currentTab.value = 'all'
+                            sync()
+                        }}
+                    >
+                        {t('common.notification.all') }
+                    </NButton>
+                    <NButton
+                        text
+                        type={currentTab.value === 'unread' ? 'primary' : 'default'}
+                        onClick={() => {
+                            currentTab.value = 'unread'
+                            sync()
+                        }}
+                    >
+                        {t('common.notification.unread', { count: data.unread > 99 ? '99+' : data.unread.toString() }) }
+                    </NButton>
+                </div>
+            )
+
+            const renderItem = msg => (
+                <NListItem
+                    key={msg.key}
+                    onClick={() => {
+                        if (msg.status === 'unread') {
+                            props.markRead?.([msg.key]).then(() => {
+                                msg.status = 'read'
+                            })
+                            data.unread--
+                        }
+                        if (msg.link) {
+                            window.open(msg.link, '_target')
+                        }
+                    }}
+                >
+                    <NThing
+                        bordered={false}
+                        closable
+                        contentIndented
+                        size="small"
+                        onMouseenter={() => (msg.hover = true)}
+                        onMouseleave={() => (msg.hover = false)}
+                        style="padding: 0 4px"
+                    >
+                        {{
+                            'avatar': () => (
+                                <NIcon size={22} color={msg.status === 'unread' ? 'var(--color-primary)' : undefined}>
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="1em"
+                                        height="1em"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            fill="currentColor"
+                                            d="M12.3 7.29c.2-.18.44-.29.7-.29c.27 0 .5.11.71.29c.19.21.29.45.29.71c0 .27-.1.5-.29.71c-.21.19-.44.29-.71.29c-.26 0-.5-.1-.7-.29c-.19-.21-.3-.44-.3-.71c0-.26.11-.5.3-.71m-2.5 4.68s2.17-1.72 2.96-1.79c.74-.06.59.79.52 1.23l-.01.06c-.14.53-.31 1.17-.48 1.78c-.38 1.39-.75 2.75-.66 3c.1.34.72-.09 1.17-.39c.06-.04.11-.08.16-.11c0 0 .08-.08.16.03c.02.03.04.06.06.08c.09.14.14.19.02.27l-.04.02c-.22.15-1.16.81-1.54 1.05c-.41.27-1.98 1.17-1.74-.58c.21-1.23.49-2.29.71-3.12c.41-1.5.59-2.18-.33-1.59c-.37.22-.59.36-.72.45c-.11.08-.12.08-.19-.05l-.03-.06l-.05-.08c-.07-.1-.07-.11.03-.2M22 12c0 5.5-4.5 10-10 10S2 17.5 2 12S6.5 2 12 2s10 4.5 10 10m-2 0c0-4.42-3.58-8-8-8s-8 3.58-8 8s3.58 8 8 8s8-3.58 8-8"
+                                        />
+                                    </svg>
+                                </NIcon>
+                            ),
+                            'header': () => msg.title,
+                            'header-extra': () =>
+                                msg.hover
+                                    ? (
+                                            <div
+                                                style="display: flex; justify-content: end; gap: 12px"
+                                                onClick={(e) => {
+                                                    e.preventDefault()
+                                                    e.stopPropagation()
+                                                }}
+                                            >
+                                                {msg.status === 'unread'
+                                                    ? (
+                                                            <NButton
+                                                                text
+                                                                type="primary"
+                                                                onClick={() => {
+                                                                    props.markRead?.([msg.key]).then(() => {
+                                                                        msg.status = 'read'
+                                                                        data.unread--
+                                                                    })
+                                                                }}
+                                                            >
+                                                                {t('common.notification.markRead') }
+                                                            </NButton>
+                                                        )
+                                                    : undefined}
+
+                                                <NButton
+                                                    text
+                                                    type="error"
+                                                    onClick={() => {
+                                                        if (data.records === 1) {
+                                                            data.records = []
+                                                            sync()
+                                                        } else {
+                                                            data.records.splice(
+                                                                data.records.findIndex(it => it.key == msg.key),
+                                                                1,
+                                                            )
+                                                        }
+                                                        props.markDelete?.([msg.key])
+                                                    }}
+                                                >
+                                                    {t('common.notification.markDelete') }
+                                                </NButton>
+                                            </div>
+                                        )
+                                    : undefined,
+                            'default': msg.content,
+                            'footer': () => (
+                                <span style="color: gray">
+                                    {msg.hover ? format(msg.date, t('common.notification.time')) : t('common.timeago', { time: msg.date }) }
+                                </span>
+                            ),
+                        }}
+                    </NThing>
+                </NListItem>
+            )
+
+            const content = () =>
+                withDirectives(
+                    data.records.length > 0
+                        ? (
+                                <NList clickable hoverable style="min-height: 50vh">
+                                    {data.records.map(msg => renderItem(msg))}
+                                </NList>
+                            )
+                        : (
+                                <NEmpty style="margin-top: 30vh" />
+                            ),
+                    [[vSpin, data.loading]],
+                )
+
+            const footer = () => (
+                <div style="display: flex; justify-content: space-between; width: 100%">
+                    {currentTab.value === 'unread'
+                        ? (
+                                <NButton
+                                    text
+                                    type="primary"
+                                    disabled={data.records.length === 0}
+                                    onClick={() => {
+                                        const keys = data.records.filter(it => it.status === 'unread').map(it => it.key)
+                                        props.markRead(keys).then(() => {
+                                            while (data.unread - keys.length <= data.size * (data.page - 1)) {
+                                                data.page--
+                                            }
+                                            sync()
+                                        })
+                                    }}
+                                >
+                                    {{
+                                        icon: () => (
+                                            <NIcon size="20">
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    width="1em"
+                                                    height="1em"
+                                                    viewBox="0 0 24 24"
+                                                >
+                                                    <path
+                                                        fill="currentColor"
+                                                        d="M.41 13.41L6 19l1.41-1.42L1.83 12m20.41-6.42L11.66 16.17L7.5 12l-1.43 1.41L11.66 19l12-12M18 7l-1.41-1.42l-6.35 6.35l1.42 1.41z"
+                                                    />
+                                                </svg>
+                                            </NIcon>
+                                        ),
+                                        default: () => t('common.notification.markPageRead'),
+                                    }}
+                                </NButton>
+                            )
+                        : (
+                                <span />
+                            )}
+                    <NPagination
+                        simple
+                        pageSize={data.size}
+                        page={data.page}
+                        itemCount={currentTab.value === 'unread' ? data.unread : data.total}
+                        onUpdatePage={(page) => {
+                            data.page = page
+                            sync()
+                        }}
+                    />
+                </div>
+            )
+            return (
+                <>
+                    {trigger}
+                    <NDrawer v-model:show={show.value} showMask={false} width={400}>
+                        <NDrawerContent title={t('common.notification.title')} closable nativeScrollbar={false} bodyContentStyle={{ padding: '0' }}>
+                            {{
+                                header,
+                                default: content,
+                                footer,
+                            }}
+                        </NDrawerContent>
+                    </NDrawer>
+                </>
+            )
+        }
+    },
+})

package/src/design/common.jsx

@@ -0,0 +1,19 @@
+export const clsPrefix = 'app'
+
+export const COLLAPSED_INJECTION_KEY = 'APP_SIDER_COLLAPSED'
+
+export const IBookmark = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        role="img"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+    >
+        <path fill="currentColor" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2Z" />
+    </svg>
+)
+
+export const CTX_INJECTION_KEY = '__APP_CTX__'
+export const getCtx = () => inject(CTX_INJECTION_KEY)

package/src/design/index.js

@@ -0,0 +1,10 @@
+export { AppContent, AppFooter, AppHeader, AppLayout, AppSider } from './Layout.jsx'
+export { AppLogo } from './Logo.jsx'
+export { AppMenu } from './Menu.jsx'
+export { AppBreadcrumb } from './Breadcrumb.jsx'
+export { AppAccount } from './Account.jsx'
+export { AppFullscreen } from './Fullscreen.jsx'
+export { AppAppearance } from './Appearance.jsx'
+export { AppLanguage } from './Language.jsx'
+export { AppNotification } from './Notification.jsx'
+export { AppMultiTabs } from './MultiTabs.jsx'

package/src/directives/index.js

@@ -0,0 +1,2 @@
+export { TooltipDirectiveProvider, vTooltip } from './tooltip.jsx'
+export { SpinDirectiveProvider, vSpin } from './spin.js'

package/src/directives/spin.js

@@ -0,0 +1,181 @@
+import { Fragment, defineComponent, h, nextTick, ref, toRef, watch } from 'vue'
+
+import { useElementIntersectionRect } from '@ithinkdt/common/composables'
+import { string2dom } from '@ithinkdt/common/dom'
+import { debounce } from '@ithinkdt/common/fn'
+
+import useStyle, { c, cB, cE, cM } from '../use-style.js'
+
+let clsPrefix
+let isDark
+
+const style = /* @__PURE__ */ c([
+    c(({ props }) => `:where(${props.bPrefix}spin-host)`, {
+        position: 'relative',
+    }),
+    cB(
+        'spin-directive',
+        {
+            zIndex: '999999',
+            position: 'absolute',
+            color: 'var(--color-primary)',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '4px',
+            willChange: 'background-color',
+            backgroundColor: 'rgb(var(--host-bg, 255 255 255) / 0)',
+            transition: 'background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        },
+        [
+            cE('tip, icon', {
+                willChange: 'opacity',
+                opacity: '0',
+                transition: 'opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+            }),
+            cE('tip:empty', { display: 'none' }),
+            cM(
+                'spining',
+                {
+                    backgroundColor: 'rgb(var(--host-bg, 255 255 255) / 0.5)',
+                },
+                [cE('tip, icon', { opacity: '1' })],
+            ),
+        ],
+    ),
+])
+
+export const SpinDirectiveProvider = /* @__PURE__ */ defineComponent({
+    name: 'SpinDirectiveProvider',
+    props: {
+        dark: Boolean,
+    },
+    setup(props) {
+        clsPrefix = useStyle('-spin-directive', style)
+        isDark = toRef(props, 'dark')
+        return () => h(Fragment)
+    },
+})
+
+const Spin = /* @__PURE__ */ Symbol('spin-dir')
+
+const updateLoading = (el, { value, modifiers }) => {
+    el[Spin].loading.value = !!value
+    if (!el[Spin].loading.value) return
+    const dark = modifiers.dark || (!modifiers.light && isDark.value)
+    el[Spin].spinEl.style.setProperty(
+        '--host-bg',
+        dark ? '0 0 0' : '255 255 255',
+    )
+}
+
+export const vSpin = {
+    beforeMount(el) {
+        el.classList.add(`${clsPrefix.value}-spin-host`)
+
+        if (el[Spin]) return
+
+        const loading = ref(false)
+
+        const spinEl = string2dom(
+            `
+            <div class="${clsPrefix.value}-spin-directive">
+                <svg class="${clsPrefix.value}-spin-directive__icon" width="32" height="32" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+                    <g>
+                        <animateTransform attributeName="transform" type="rotate" values="0 100 100;270 100 100" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animateTransform>
+                        <circle fill="none" stroke="currentColor" stroke-width="18" stroke-linecap="round" cx="100" cy="100" r="92" stroke-dasharray="567" stroke-dashoffset="1848">
+                            <animateTransform attributeName="transform" type="rotate" values="0 100 100;135 100 100;450 100 100" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animateTransform>
+                            <animate attributeName="stroke-dashoffset" values="567;142;567" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animate>
+                        </circle>
+                    </g>
+                </svg>
+                <div class="${clsPrefix.value}-spin-directive__tip"></div>
+            </div>
+        `.trim(),
+        )
+
+        let rect
+        const { stop: stopEl, update } = useElementIntersectionRect(el, (_rect) => {
+            rect = _rect
+            Object.assign(spinEl.style, {
+                left: 0,
+                top: 0,
+                width: rect.width + 'px',
+                height: rect.height + 'px',
+            })
+        }, { interval: 1000 / 30 })
+
+        let timer
+        const stopSpin = watch(
+            loading,
+            debounce(() => {
+                if (loading.value) {
+                    if (timer === undefined) {
+                        clearTimeout(timer)
+                        timer = undefined
+                    }
+                    update()
+                    el.append(spinEl)
+                    requestAnimationFrame(() => {
+                        if (loading.value) spinEl.classList.add(`${clsPrefix.value}-spin-directive--spining`)
+                    })
+                } else {
+                    spinEl.classList.remove(`${clsPrefix.value}-spin-directive--spining`)
+                    const listener = () => {
+                        spinEl.remove()
+                        if (timer) clearTimeout(timer)
+                        timer = null
+                        spinEl.removeEventListener('transitioncancel', listener)
+                        spinEl.removeEventListener('transitionend', listener)
+                    }
+                    spinEl.addEventListener('transitioncancel', listener)
+                    spinEl.addEventListener('transitionend', listener)
+                    let timer = setTimeout(listener, 300)
+                }
+            }, 30),
+        )
+
+        el[Spin] = {
+            loading,
+            spinEl,
+            updateTip: () => {
+                const tipEl = spinEl.querySelector(`.${clsPrefix.value}-spin-directive__tip`)
+                tipEl.textContent = el.dataset.spinTip
+            },
+            stop: () => {
+                stopEl()
+                stopSpin()
+            },
+        }
+    },
+
+    mounted(el, binding) {
+        updateLoading(el, binding)
+        el[Spin].updateTip()
+        if (el[Spin].observer) return
+        // 创建 MutationObserver 对象
+        nextTick().then(() => {
+            const observer = (el[Spin].observer = new MutationObserver((mutationsList) => {
+                for (const mutation of mutationsList) {
+                    if (mutation.type === 'attributes' && mutation.attributeName === 'data-spin-tip') {
+                        el[Spin].updateTip()
+                        return
+                    }
+                }
+            }))
+
+            // 开始观察目标元素
+            observer.observe(el, { attributes: true, attributeFilter: ['data-spin-tip'] })
+        })
+    },
+
+    updated: updateLoading,
+
+    beforeUnmount(el) {
+        el[Spin].loading.value = false
+        el[Spin].stop()
+        el[Spin].observer?.disconnect()
+        delete el[Spin]
+    },
+}

package/src/directives/tooltip.jsx

@@ -0,0 +1,121 @@
+import { promiseTimeout, useEventListener } from '@vueuse/core'
+import { NTooltip } from 'ithinkdt-ui'
+import { defineComponent, reactive, shallowRef } from 'vue'
+
+const Tooltip = /* @__PURE__ */ Symbol('tooltip-dir')
+const current = /* @__PURE__ */ shallowRef()
+
+let _update
+export const TooltipDirectiveProvider = /* @__PURE__ */ defineComponent({
+    name: 'TooltipDirectiveProvider',
+    props: {
+        delay: { type: Number, default: 180 },
+    },
+    setup(props) {
+        const tip = shallowRef()
+        const data = reactive({ show: false, tip: undefined, placement: 'top', x: 0, y: 0 })
+
+        _update = async () => {
+            if (!current.value) return
+            if (props.delay > 0) await promiseTimeout(props.delay)
+            const el = current.value
+            const tooltip = el?.[Tooltip]
+            if (!tooltip) return
+            const _tip = tooltip.tip
+            tip.value
+                = typeof _tip === 'function' ? _tip : () => _tip || el.attributes.getNamedItem('title') || el.textContent
+
+            const { auto } = tooltip.binding.modifiers
+            if (
+                !auto
+                || el.firstChild.offsetWidth > el.clientWidth
+                || el.firstChild.offsetHeight > el.clientHeight
+            ) {
+                data.show = true
+
+                const rect = el.getBoundingClientRect()
+                data.placement
+                    = Object.keys(tooltip.binding.modifiers).find(m =>
+                        ['top', 'right', 'left', 'bottom'].find(k => m.startsWith(k)),
+                    ) ?? 'top'
+                switch (data.placement.split('-')[0]) {
+                    case 'top': {
+                        data.x = rect.left + rect.width / 2
+                        data.y = rect.top
+                        break
+                    }
+
+                    case 'right': {
+                        data.x = rect.left + rect.width
+                        data.y = rect.top + rect.height / 2
+                        break
+                    }
+
+                    case 'left': {
+                        data.x = rect.left
+                        data.y = rect.top + rect.height / 2
+                        break
+                    }
+
+                    case 'bottom': {
+                        data.x = rect.left + rect.width / 2
+                        data.y = rect.bottom
+                        break
+                    }
+                }
+            } else if (data.show) {
+                data.show = false
+            }
+        }
+
+        useEventListener(
+            'mouseover',
+            (ev) => {
+                const el = ev.target
+                if (!current.value || current.value?.contains(el)) return
+                data.show = false
+                current.value = undefined
+            },
+            { capture: true },
+        )
+
+        return () => (
+            <NTooltip
+                trigger="manual"
+                show={!!current.value && data.show}
+                x={data.x}
+                y={data.y}
+                placement={data.placement}
+                keepAliveOnHover
+            >
+                {tip.value?.()}
+            </NTooltip>
+        )
+    },
+})
+
+const _listener = (ev) => {
+    current.value = ev.target
+    _update?.()
+}
+export const vTooltip = {
+    mounted(el, binding) {
+        el[Tooltip] = {
+            binding,
+            tip: binding.value,
+        }
+        el.addEventListener('mouseenter', _listener)
+    },
+    updated(el, binding) {
+        el[Tooltip].binding = binding
+        el[Tooltip].tip = binding.value
+        _update()
+    },
+    beforeUnmount(el) {
+        if (el[Tooltip]) el.removeEventListener('mouseenter', _listener)
+        if (current.value === el) {
+            current.value = undefined
+        }
+        delete el[Tooltip]
+    },
+}