@ithinkdt/naive/src/frame/module/render.jsx

iThinkDT Naive UI

import { markRaw, h } from 'vue'

import { NIcon } from 'ithinkdt-ui'

import { useTheme } from '@ithinkdt/core'

import { NSuffix } from '../../components/Suffix'
import { IPointer, IBookmark } from '../assets'

const __icon = Symbol()
const __suffix = Symbol()
export function useModuleRender({ iconSize = 18 } = {}) {
    const theme = useTheme()
    return {
        renderIcon: (m, size = iconSize) => {
            if (!m[__icon] || m[__icon]._iconId !== m.icon) {
                m[__icon] = markRaw(m.type === 'action' ? <IPointer /> : <IBookmark />)
                m[__icon]._iconId = m.icon

                if (m.icon) {
                    Promise.resolve(theme.menuIconLoader(m.icon)).then((Res) => {
                        if (Res) m[__icon] = markRaw(h(Res))
                        m[__icon]._iconId = m.icon
                    })
                }
            }

            return (
                <NIcon size={size} color={m.type === 'action' ? theme.vars.warningColor : theme.vars.primaryColor}>
                    {m[__icon]}
                </NIcon>
            )
        },

        renderLabel: (m) => {
            return (
                <span style="white-space: nowrap">
                    <span
                        style={{
                            color: m.type !== 'action' && m.visible === false ? '#777' : undefined,
                            fontWeight: m.parent ? 'normal' : 'bold',
                        }}
                    >
                        {m.label}
                    </span>
                    <span style="color: #ccc; margin-left: 24px">{m.path}</span>
                </span>
            )
        },

        renderAction: (m, { creatable, modifiable, deletable }, { add, edit, del }) => {
            if (!m[__suffix]) {
                m[__suffix] = (
                    <span style="display: flex; padding-left: 12px;">
                        {typeof m.sort === 'number' ? (
                            <span style="color: #888; margin-right: 16px;  white-space: nowrap">排序：{m.sort}</span>
                        ) : undefined}

                        <NSuffix
                            creatable={creatable && !['action', 'external'].includes(m.type)}
                            onCreate={() => {
                                add({
                                    parentKey: m.key,
                                    level: (m.level ?? 0) + 1,
                                    type: m.type !== 'group' && m.path ? 'action' : 'module',
                                    hidden: false,
                                    sort: (Math.floor((m.children?.at(-1)?.sort ?? 0) / 10) + 1) * 10,
                                    actionPathPrefix: `${m.appCode?.toLowerCase()}:`,
                                    appCode: m.appCode,
                                    path: '',
                                })
                            }}
                            modifiable={modifiable && m.type !== 'other'}
                            onModify={() => {
                                edit({ ...m, children: undefined }).then(() => {
                                    delete m[__suffix]
                                })
                            }}
                            deletable={deletable && m.type !== 'other'}
                            onDelete={() => {
                                del(m)
                            }}
                        />
                    </span>
                )
            }
            return m[__suffix]
        },

        filterModule: (pattern, m) => {
            return (
                m.label.includes(pattern) || m.path?.includes(pattern) || m.resources?.find((r) => r?.includes(pattern))
            )
        },
    }
}