V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Gabrielle70
V2EX  ›  程序员

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

  •  
  •   Gabrielle70 · 3 小时 19 分钟前 · 402 次点击

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

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

    问题:

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

    谢谢

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