mmtadmin 前端

富文本编辑器

• https://github.com/manakuro/project-management-demo-frontend (使用了https://prosemirror.net/ Chakra UI Apollo Client)

一些热门 ui 库备忘

• (精品)https://github.com/shadcn/ui Radix UI + Tailwind + nextjs (10k starts) (在线演示：https://ui.shadcn.com/)

• https://github.com/shadcn/taxonomy.git

• https://react-cmdk.com/

• https://tailwindcss-radix.vercel.app/- chatgpt 界面： 15.5k stars

• https://github.com/cruip/tailwind-dashboard-template.git

tailwindcss 相关：

• https://tailwind-elements.com/docs/standard/navigation/sidenav/

webssh 参考项目

• https://github.com/billchurch/webssh2

动画库

• [gsap] https://github.com/greensock/GSAP 有大量的优秀的网站都在使用它, 也适合在 react 下使用

在线随机图片

• https://source.unsplash.com/collection/1346951/1000x500?sig=1

富文本编辑器

• 首选 https://github.com/facebook/lexical 原因是 meta 出品，react 原生，且对自定义组件支持足够好

树状 UI

• https://github.com/minop1205/react-dnd-treeview 特点：headless，基于 react-dnd 实现可拖放，数据结构跟后端搭配。sh
• https://github.com/brimdata/react-arborist 自带完整树状功能，typescript + react 很适合做左侧导航栏。2k stars 演示： https://react-arborist.netlify.app/gmail

代码备忘

判断dom点击是否是自身

function isModifiedEvent(event: React.MouseEvent): boolean {
    const eventTarget = event.currentTarget as HTMLAnchorElement | SVGAElement;
    const target = eventTarget.getAttribute('target');
    return (
        (target && target !== '_self') ||
        event.metaKey ||
        event.ctrlKey ||
        event.shiftKey ||
        event.altKey || // triggers resource download
        (event.nativeEvent && event.nativeEvent.which === 2)
    );
}

tailwind css 在线范例参考

• https://supastarter.dev/products/starter-kits/nextjs