V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Gabrielle70
V2EX  ›  程序员

求助: 前端开发能让用户自助添加/拖动/缩放小组件的仪表面板

  •  
  •   Gabrielle70 · 70 天前 · 1172 次点击
    这是一个创建于 70 天前的主题,其中的信息可能已经有所发展或是发生改变。

    需要前端开发一个股票/基金行情的仪表面板, 要求:

    1. 仪表面板是有 N 个小组件组成, 每个组件可以是曲线图, 也可以是动态行情数据等等
    2. 用户可以在小组件库中自行选择小组件, 增加到面板上
    3. 用户可以自助添加/拖动/缩放小组件
    4. 小组件在拖动/缩放的过程中, 布局会随时弹性适应
    5. 需适配手机和电脑
    6. 最好但不限于用 react/nextjs 框架

    问题:

    1. 有没有一站式解决的框架或 libraries
    2. 求开发思路

    谢谢

    7 条回复    2024-10-18 15:14:09 +08:00
    ZGame
        1
    ZGame  
       70 天前
    拖拽可以使用类似 react-grid-layout 这种。需要适配手机和桌面端,手机和桌面端应该没办法复用, 只能进入的时候判断是手机还是桌面端,主要是在进入界面前保存一下 componentSchema, 如果是桌面端走一分支,移动端走另一种方式的渲染。 再做完善点就是 bi 了... 有个设计器, 等于是保存两份布局 Schema 根据 type 是移动端或者桌面端分别保存
    rocmax
        2
    rocmax  
       70 天前 via Android
    Baymaxbowen
        3
    Baymaxbowen  
       70 天前 via iPhone
    @ZGame 我们类似的场景就是用了 layout ,但是自适应效果不好
    mrzou007
        4
    mrzou007  
       70 天前
    https://golden-layout.com/ 看看这个吧。
    markyun02
        5
    markyun02  
       70 天前
    如果没有理解错的话,这个面板叫 dashboard ,我们也在做同样的功能,而且已经做好了。
    面板不同的组件是通过 map 动态生成的,整个面板可自由缩放和拖拽位置。
    ZGame
        6
    ZGame  
       70 天前
    @Baymaxbowen 这种算成熟的解决方法了吧.. 效果不好要子组件本身也要去适配。 没有银弹应该是
    codebird
        7
    codebird  
       69 天前
    superset
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5643 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 06:31 · PVG 14:31 · LAX 22:31 · JFK 01:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.