DevCloudFE / vue-devui

UI components based on Vue3 and DevUI Design

Home Page:https://vue-devui.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

gitcode合作需求

redshade opened this issue · comments

缺少组件

  • 修改追溯组件

Image

  • 高亮代码预览器
    image

  • 各种图表
    image


image

image

image

  • 代码预览组件是否可提供上方菜单功能
    image

  • 搜索面板(搜索+可单选多选)

image
  • 上传组件(图片预览)
    未上传效果:
    image
    上传后效果(可删除):
    image

  • 拖拽组件

Image

Image

  • 代码review列表组件
    Image

  • 代码活跃度组件
    image

  • markdown编辑器

  • markdown渲染

  • 轮播图组件

组件问题

  • 代码活跃度图缺少点击事件,因为需要和个人动态联动
    image

  • 文档中英文切换功能

  • 图表缺少对应原型的demo

  • markdown编辑器代码高亮的长度超了,应该是这个高亮区域滚动条,而不是到外面去
    image

  • markdown编辑器内容为空时,预览视图未更新
    Jul-22-2023 20-18-45

  • markdown编辑器不支持清单列表
    image

  • icon大小不统一
    image

  • 表单组件需要提供label插槽,目前只能传递字符串

  • 表单组件可设置必选*号是否显示

  • 表单组件必选*号在元素边缘时不显示,应当去掉margin-left

image
  • dropdown组件需要能设置菜单插入位置,希望能插入在当前元素下

  • dropdown组件菜单列表设置宽度时,显示效果未达预期

  • 分割器不能控制折叠收缩,希望能提供手动控制折叠收缩属性或方法

  • 官方文档增加切换语言选项

  • d-select 远程搜索 option 关闭时,继续输入应该使option自动打开

  • d-selectvalue-change 会在远程搜索时失效

  • d-row 加了 gutter 之后。只处理了 d-col 上面的padding,没有处理 d-row 上面的margin,左右有间隙没对齐

  • d-range-date-picker-pro按需引入报错

  • d-select组件中引入d-option按需引入报错,同上

  • d-form-operation按需引入报错,同上

表格那里在写表格前换行一下就可以了,是支持的

d-action-timeline组件在不同分辨率下存在样式问题。如下,第一张图左右不能对齐,第二张图基本显示正常,分辨率不同
411690178220_ pic

431690178268_ pic

d-select组件优化:

  1. 建议option下拉列表支持键盘上下键快速切换
  2. 建议开启筛选时,用户输入内容且未选择选项时,也能展示右侧icon一键清除

当前日期选择器组件与其他表单组件高度不一致

d-dropdown组件,传入position参数后,dropdown未正常展示

d-table组件自带的border-type 建议增加外边框效果,当手动给外边框如border:1px solid #666这种,同时d-column中有为设置具体width的情况时,发现table本身的width会随着浏览器窗口大小变化而缩小。

d-dropdown组件manually模式下,点击下拉框区域内容还是会触发关闭,导致下拉框 展示/关闭 状态不可控

d-select组件优化:多选时, 点击文字和checkbox 无效; 必须要点空白处

1691479508637

d-editor 编辑器console报错
image

CodeReview 代码检视 需提供内容插槽

需求点如下图

1691638672082

pagination 分页组件,切换pageSize时,select 不会自动隐藏
image

  • 多选时, 右侧有一截空白
    1691822861071

头像组件,增加图片加载失败事件(由于图片显示算法,前端无法判断头像是否存在)
https://vue-devui.github.io/components/avatar/#%E5%A4%B4%E5%83%8F%E7%9A%84%E7%89%B9%E6%AE%8A%E6%98%BE%E7%A4%BA

d-menu无法更改背景色,本身权重过高
image

  • select option 自定义内容, 有时能撑开, 有时不能
    1692085815345
    1692085904848
image 这个评论的信息图案自定义隐藏

d-avatar组件
需求: 如果图片未加载,显示用户名时,默认显示1个字符(目前是显示2个)

Bug:

  1. 首字符未成开宽度时(参考图1),原型的头像变成椭圆形。
  2. 图形显示非常容易受其它样式影响(如在d-avatar父元素设置line-height,参考图2),不能正常显示为圆的,需要增加组件健壮性
    image
    image

markdown纯渲染模式,内容超出不显示滚动条

image

markdown编辑器增加设置高度的选项

tooltip需要根据页面元素与窗口的距离自动去计算适合显示的位置

  • 现在 codeview 提检视意见的按钮可点击区域太小了, 只有最左边可以点, 头像的缩略图只能往右边移才行, 需要像 codearts 一样 可点击区域宽一点, 还有就是加个 hover 效果

codearts 的
577f2c60b26195104106327c65981d9

现在的
3ce8eab3561e7965fd16898cfab65e5

  1. modal footer按钮默认居右展示
  2. d-modal的footer包一层div,方便统一modal样式

image

1.分页支持默认为如下样式
企业微信截图_16923277985435

image
贡献组件需要调整

活动组件需要调整样式,需要在icon部分提供插槽
image

CodeReview组件需求:

  • 双栏模式支持评论
  • 组件隐藏评论图标设置
  • 标题位置增加插槽,支持显示增加,删除,修改,重命名等类型标识
    image

markdown组件需求:

  • 图片上传(优先)
  • @用户
  • 关联issue
  • 代码检视下面有个 padding, 加了自定义内容就会出现两个边框, 这个 padding 能去掉不

7f67b09877966638f846c0c8fa0fdf7

d-splitter组件关闭/展开按钮支持slot自定义
image

image
在md编辑器用cv复制图片上传会报错

  • 代码预览左右布局时, 左右宽度不对
    image

使用了tailwindcss,但是md编辑器的样式优先级太低,容易被样式覆盖,导致样式不统一

image
image

image

d-select组件,d-option宽度异常

如果d-editable-select里的数据如果为接口数据,异步写入后宽度不是100%

image

d-search需要支持键盘上下键切换选项,并在enter后抛出相关事件

组件库更新后allow-create创建的option不能触发value-change事件了,速度解决下,让业务产生bug了
image

组件库更新后allow-create创建的option不能触发value-change事件了,速度解决下,让业务产生bug了 image

版本一直没有改动此处地方,当前select对于此功能的支持可能存在问题(需要整体重构),建议不要直接使用当前api

企业微信20230826-174636
只输入星号不能正常显示

d-select和d-editable-select组件增加触底加载事件

分页组件,进行分页数量选择操作后,数量选择列表还是停在那里,期望能自动收回

3aeb2395418a67c7b482238a7315cda

image

分页组件切换pageSize后,不会自动关闭pageSize下拉框

markdown不支持任务列表
image

d-editable-select 组件,使用远程搜索功能时,当输入框数据清空后,代码里 option 已重置为 [],但是下拉框中依然渲染之前的 option 数据,需要同步更新为空 option 的状态。
清空数据未清空

image

markdown编辑器默认情况下,不做任何渲染,右边预览内容比左则内容类似空了一行。间隔不太正确
image

d-menu 组件,在 Edge 浏览器里,滚动时,显示异常(chrome 和 firefox 正常):
操作系统-win10 x64, Edge 版本:116.0.1938.69 (正式版本) (64 位)

  • 正常状态
    image

  • 滚动异常
    image
    菜单展示异常
    image

markdown 编辑内容的组件上文件列表操作符,没实现选择功能
image
image

markdown编辑器出现undefined,颜色选择器也没对齐
image

markdown编辑器的有序表问题
1、使用markdown编辑器的编辑功能
2、添加序号时,左边看不出来自己添加的是多少序号,同时按回车不会自增
3、添加序号后,回车输入内容,再次回车,点击添加序号后,会连着上面序号增加(在预览页效果)
4、根据上面第2和第3步骤操作的效果,如果两边内容不一致长度会不利于自己编辑了几序号,右边效果展示不会自己滚动到当前编辑的地方
image

image Markdown MD 编辑器 不能设置z-idnex;z-index在全屏组件上面 toolbar会挡住

Ans: 尝试使用fullscreen-z-index api进行z-index设置

image
image
需要补充hover提示效果

image
点击全屏后 tooltip没关闭

  • 代码检视组件, 无后缀的文件,左右布局报错, 导致内容不显示
    image

报错页面链接
//  第一个文件报错
https://test.gitcode.net/lishaohui/gobang/merge_requests/99/diffs

// 第一个文件报错
https://test.gitcode.net/lishaohui/code1/merge_requests/1/diffs

// 第一个链接 报错diff
{
"old_path": "11",
"new_path": "11",
"a_mode": "0",
"b_mode": "100644",
"file_path": "11",
"new_file": true,
"renamed_file": false,
"deleted_file": false,
"diff": "@@ -0,0 +1 @@\n+11\n\ No newline at end of file\n",
"binary": false,
"too_large": false,
"collapsed": false,
"line_count": null,
"added_lines": 1,
"removed_lines": 0,
"blob_id": "9d607966b721abde8931ddd052181fae905db503",
"content_sha": "3f8e21e4cc69f50535a534377035af7e0364e662",
"submodule": false,
"expanded": true,
"diff_refs": {
"base_sha": "46bf8fbfce5879c2385df36b125bd64b674bbf17",
"head_sha": "3f8e21e4cc69f50535a534377035af7e0364e662",
"start_sha": "461e30e2b1b401e98296beea946cb338f12fb875"
},
"mode_changed": true,
"file_type": "text_type"
}

  • tooltip展示大文本,需要设置最大高度,并出现滚动条

新建完成后,鼠标hover上提交信息上,查看tips,显示如下tips显示不完全
image

预期:右侧增加滚动条,且整个显示框显示完整
image

  • g-menu菜单组件超出宽度会省略,期望这个效果可设置禁用,正在开发的移动端不需要这个效果

image

d-popover组件,:is-open="true" trigger="manually", popover还是会被关闭,is-open参数不能稳定控制是否关闭

面包屑组件+tooltip组件 组合使用时,当面包屑数据发生变化,tooltip失效

  • d-select和d-editable-select需要获取到输入值,希望提供输入的change事件

image
image

markdown编辑器不支持数学公式和plantuml图的渲染
image

table组件的tooltip无法展示全部文字

image

  • 表单的回车事件应该默认关闭,可选择打开。现在使用d-form的表单,如果按钮在form中,在输入框回车会触发第一个操作按钮的点击事件,造成点击取消返回上一页

image

d-git-graph 组件:

  1. commit备注信息过长时,超过可是区域的内容直接被截断,无法查看
  2. 绘图区左侧留白过多
    image

input密码输入框:需要支持自定义图标,有需求要求替换密码可视图标,建议预留个替换图标的插槽。
image

  • tooltip组件存在xss漏洞,麻烦渲染前过滤掉可执行的代码
  • markdown editor 支持 toolbar 自定义
    toolbar 可扩展,支持用户新增自定义命令图标
  • tooltip和markdown需要处理xss攻击
  • input组件在火狐浏览器的样式有问题
image

markdown span 嵌套样式异常:

<span style="background-color:#008a00;"><span style="font-size:48px;"><span style="color:#ffffff;">001234567890</span></span></span>

操作是:先选择“背景色”,再选择“字体大小”,就会形成这样的标签结构,内层 span 撑不起外层 span 高度,导致显示异常;

而且,markdown 编辑器需要在toolbar里增加“背景颜色/字体颜色/字号”吗,感觉这是富文本编辑器要在toolbar里显式暴露的,是不是可以考虑去掉,需要的人,可以自己在编辑时写 span 标签;
从目前的体验来说,增加 img 大小,比如![在这里插入图片描述](https://img-blog.csdnimg.cn/d274280b834540d3936b957f034bc66e.jpeg =80x80),解析后面的80x80尺寸,对目前的用户体验更友好点

d-form需要增加一个表单是否全部通过的属性(双向绑定),现在大部分表单是根据表单是否通过来控制提交按钮是否置灰
image

  • 分页组件需要一个属性来设置最大分页页码(无论多少数据,最多只显示到这个页码),因为后端有安全问题,需要前端来限制用户最多只能看500页

需要优化代码编辑器及markdown编辑器(主要是流程图)的打包大小
image

image

d-editable-select使用远程搜索时,因为自带的filter限制,某些自定义数据无法显示,需要一个适用于远程搜索的filter
image

需要自定义全局loading动画,现在有很多地方使用了v-loading, 希望可以提供全局替换loading动画的配置(配置图表,大小等),替换为ui提供的loading动画

  • 任务列表不渲染disable属性
  • markdown任务列表和无序列表无法区分样式,期望样式如下,希望为任务列表的ul,li,input元素加入类名区分样式:
    image
  • 当某行内容较多时,在文件变更处展示时,行标应该展示在开始,不需要居中展示

image

为提高网站性能,devui需要修复按需引入,使用按需引入会有如下类似报错,例如:
image

  • 希望 select/editableselect 组件触发 load-more 的阈值降低, 目前貌似滚动到最底部才会触发, 这个机制在外层元素有滚动条时会有如下问题, 当下拉列表滚动到底部时, 此时数据还在加载中, 下拉列表的滚动条已经触底, 这会导致外层滚动条发生滚动, 如果改成距离底部小于一定距离(如: 100px - 200px )时触发, 则能改善这个问题
    image

希望数据展示类型的组件,如tree,table,select等支持大数据虚拟滚动,虽然当前的gitcode项目不大可能出现极端情况,但不得不防

渲染组件 input 标签可渲染可输入,期望不渲染input标签
image
image

markdown编辑器支持kbd标签渲染,例如:ctrl 

markdown编辑器渲染h1~h6标签,id为undefined,希望修复
image

markdown选中复制

实际:markdown编辑器选中部分文字后,点击标题功能,会复制选中的文字
预期:不复制直接在文字前面加#

image
md 中文本内容 选中控制台会报错

md-render 中的 [ ] [ x ] , 渲染的 <input type="checkbox" > 应该无法勾选切换,含有disable