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

前端开源项目 [Simple Sheet]

  •  1
     
  •   lvming6816077 · 2022-07-13 08:59:06 +08:00 · 2681 次点击
    这是一个创建于 624 天前的主题,其中的信息可能已经有所发展或是发生改变。

    [ Simple Sheet ] 一款高性能的在线表格 EXCEL 文档系统。

    技术栈:

    React.js+Mobx+TypeScript

    功能和特性:

    • 高性能(使用 canvas 进行渲染)
    • 可定制化
    • 支持行、列宽度高度、自动筛选视图、单元格样式和格式设置等
    • 计算公式

    demo: https://www.nihaoshijie.com.cn/mypro/simple-sheet/index.html

    Github: https://github.com/lvming6816077/simple-sheet

    相关功能还在持续开发中,感兴趣的同学可以参与一起开发维护!

    19 条回复    2022-08-18 11:43:04 +08:00
    musi
        1
    musi  
       2022-07-13 09:04:31 +08:00
    demo 里还不支持鼠标滚动
    stefanieewu
        2
    stefanieewu  
       2022-07-13 09:08:44 +08:00
    不支持滚动多选
    FakerLeung
        3
    FakerLeung  
       2022-07-13 09:11:43 +08:00
    属于无法正常使用的程度:
    1. B 列完全无法选中单元格,一点击就是直接全选整列。
    2. 点 C4 ,D6 高亮并编辑?
    3. 拖动 2 列( DE ),却跨了 3 列( DEF )。

    cmd+w 了。。。
    lvming6816077
        4
    lvming6816077  
    OP
       2022-07-13 09:16:06 +08:00
    @FakerLeung 老哥 你描述的问题 我咋不能复现呢 是用的 Chrome 嘛
    lvming6816077
        5
    lvming6816077  
    OP
       2022-07-13 09:17:12 +08:00
    @stefanieewu 还在开发中
    @musi
    FakerLeung
        6
    FakerLeung  
       2022-07-13 09:22:17 +08:00
    @lvming6816077 #4
    Brave 偶现,要在页面滚动一下,然后滚动表格的滚动条,就容易复现了。
    ericgui
        7
    ericgui  
       2022-07-13 09:39:44 +08:00
    你创建一个 github org 吧,比如 github.com/simple-sheet

    邀请想参与的人进去一起写代码

    不然就算参与进去了,也不好把你死人的 repo 放在自己简历里
    ericgui
        8
    ericgui  
       2022-07-13 09:40:00 +08:00
    *私人, 写错字了不好意思
    lvming6816077
        9
    lvming6816077  
    OP
       2022-07-13 10:01:16 +08:00
    @ericgui get!
    antowa
        10
    antowa  
       2022-07-13 13:23:24 +08:00
    怎么参与共同开发?想加入
    cjh1095358798
        11
    cjh1095358798  
       2022-07-13 13:42:46 +08:00
    这是个什么类型项目,私人开源 demo 吗
    passon
        12
    passon  
       2022-07-13 13:45:56 +08:00
    代码没有格式化
    lvming6816077
        13
    lvming6816077  
    OP
       2022-07-13 15:03:37 +08:00
    @cjh1095358798 目前我自己在开发,创建了一个组织 simple-sheet
    laolaowang
        14
    laolaowang  
       2022-07-13 16:08:37 +08:00
    加油,口头支持一波
    Exuanbo
        15
    Exuanbo  
       2022-07-14 01:50:34 +08:00
    随便点开几个 component 看了看, 全是 `props: any` …
    lvming6816077
        16
    lvming6816077  
    OP
       2022-07-14 08:36:12 +08:00
    @Exuanbo 代码还没有优化完,后续会持续优化
    bsg1992
        17
    bsg1992  
       2022-07-17 21:56:33 +08:00
    Safari 浏览器 合拼没有内容的单元格后 无法进行输入
    Victor69
        18
    Victor69  
       2022-08-18 02:58:00 +08:00 via iPhone
    api 设计有点问题,一边说高性能,一边整个组件直接丢个 data array 就渲染,还不如上个虚拟容器简单。
    而且 canvas 对 sheet**本身**的性能影响不大,而是针对不同浏览器之间排版引擎(对齐、字体显示等)的性能问题。看了看 example 你这个只支持 chrome ,那 canvas 其实毫无优势,徒增开发难度,不如套个 tanstack/table + 虚拟滚动

    而且个人认为设计一个新的 sheet 组件,从产品上基本的亮点应该是多人协作( yjs )和支持连接 database (例: https://baserow.io/)。如果这些都没有直接还不如打开 office 365 ,或者 Google sheet 。

    另外,如果从一款好用的开源 excel component 考虑,从设计角度上应该最外层有一层 data fetcher 做 lazy load (例子: https://refine.dev/)、支持自定义 cell type ( plugin system )这些应该一开始就留有余地,后面改起来的难度和重写一样;计算公式上实现起来又是一个大坑,如果要做动态计算(改一改 cell 相关的 cell 也会更新),要有一个 hypergraph (或者起码是个图),每次加函数做回路检测和 cell 更新,而且计算公式市面上产品都是非常非常基础,从 ws office 就有的那点东西,我觉得可以套一个 serverless 函数,支持 python 科学计算( google sheet 插件里面貌似有类似的功能)

    P.S. 这也是我目前在做的东西,以上为个人一点浅见
    lvming6816077
        19
    lvming6816077  
    OP
       2022-08-18 11:43:04 +08:00
    @Victor69
    高性能这个主要是利用了 React 而不是原生 JS 去实现 cell 的相关操作,这里有待商榷 React 优于原生 JS ,但是目前来说用着并不卡顿;
    理论上支持所有现代浏览器,只是目前只在 Chrome 上测试过;

    总体来说,因为本身这个项目目前只是作为一个开源项目并且只有我个人在业余时间开发,所以很多功能(实时协作,后端服务,复杂公式等等)都没有完善,也没有精力完善,其实目的是为了给一些对 web sheet 感兴趣的同学入门,当然也也可以参与开发进来。

    感谢关注和支持。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1590 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 16:54 · PVG 00:54 · LAX 09:54 · JFK 12:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.