[Feature][Web] Refactoring of Linkis Management Console

[casionone]

当前主要优化方向

• 文件目录太乱（名字不规范/冗余文件夹），增加了开源用户参与的门槛

• 界面风格不统一，有不少比较原生的用法，存在不同页面风格不一致问题，考虑使用开源框架统一全部风格

• 使用iframe的页面，是否考虑使用微应用替换

• 国际化适配问题

  规范相关

• 文件目录划分以及命名规范

• 国际化规范

• 图标license问题: 确定能使用的图标库，后续优先使用，如google 的icon库 https://marella.me/material-icons/demo/

• 无关代码的移除

• 前端代码规范和一些准则 如关键逻辑的注解

• 公共工具/组件的抽象 如加解密 单位换算等 需要补充对应的文档

  新增的功能点

框架选型

• 基于已有框架的选型，需要给出对比参考
• 不少数据表格的条目会比较多，页面只会展示部分关键信息， 如历史任务页面，要考虑如何方便的展示其他不重要信息字段
• 设计风格上和wds的其他模块是否统一？还是优先考虑开源的组件

功能上

• 新增 菜单支持通过配置方式控制，后端接口返回的菜单的列表
• 支持简单的配置角色与菜单的关系
• 规划有面板指标页面 展示任务资源的图形面板

阶段	主要任务	参与人员	时间点
重构需求的收集	收集社区以及行内前/后端开发人员的一些想法和建议
选型方案的确认	输出对比方案 要考虑开源情况，主流技术 工作量 主要的工作工作内容 社区同学能否比较好的上手参与 和dss当前的兼容性是否存在问题
UI设计	基于已有管理台，设计一套新的UI 主要是布局和风格 icon图库的确认
Demo版本	提供几个页面的demo版本，最好能覆盖主要的组件功能， 初始代码库以及规范文档， 公共工具/组件的筹抽离
全量重构	进行前端代码的全量重构

意见收集

周鑫

• vue版本，是否切换到vue3
• 菜单栏权限问题，显示隐藏由后台接口返回的菜单的控制。
• 同时前端项目的结构感觉没必要分为几个部分。统一为一个模块。
• 部分组件的可以使用已有的ui组件： 比如左侧菜单栏等。没必要自己重新实现。
• 权限，管理员和常用字典等数据需要单独接口返回，前端使用vuex统一管理
• 设计风格上和行内的其他模块是否统一
• 使用iframe的页面，能否使用微应用替换

BeaconTown

• form-create灵活性很差，有个bug一直不知道咋处理，点新增的时候命名数据传了为空但是还是有数据填写好了
• element ui我个人觉得好看的，目前用的iview感觉美观度一般，element ui官方有现成的表单组件

陆小龙

• 建议UI组件iview换一下哈哈   上ts

---

The current main optimization direction

• The file directory is too messy (irregular names/redundant folders), which increases the threshold for open source user participation

• The interface style is not uniform, there are many native usages, and there are inconsistencies in the styles of different pages. Consider using an open source framework to unify all styles

• For pages that use iframe, whether to consider replacing them with micro-apps

• Internationalization adaptation issues

  specification related

• File directory division and naming convention

• Internationalization specification

• Icon license problem: Determine the icon library that can be used, and use it first, such as Google's icon library [https://marella.me/material-icons/demo/](https://marella.me/material-icons/ demo/)

• Removal of extraneous code

• Front-end code specification and some guidelines such as annotations of key logic

• The abstraction of public tools/components such as encryption and decryption, unit conversion, etc. need to supplement the corresponding documents

  Added function points

Frame selection

• Based on the selection of the existing framework, it is necessary to give a comparison reference
• Many data tables will have many entries, and the page will only display some key information, such as the historical task page, it is necessary to consider how to conveniently display other unimportant information fields
• Is the design style consistent with other modules in the industry? Still give priority to open source components

functionally

• Added menu support to be controlled by configuration, and the list of menus returned by the backend interface
• Support simple configuration of the relationship between roles and menus
• There is a panel indicator page planned to display the graphic panel of task resources

Phase	Main Tasks	Participants	Time
Collection of Refactoring Requirements	Collect some ideas and suggestions from the community and front-end/back-end developers in the industry
Confirmation of selection plan	Output comparison plan Consider open source situation, mainstream technology Main work content of workload Community students can Is it better to get started Is there any problem with the current compatibility with dss
UI Design	Based on the existing management platform, design a new UI mainly layout and style confirmation of icon gallery
Demo version	Provide a demo version of several pages, preferably covering the main component functions, initial code base and specification documents, departure of public tools/components
Full Refactoring	Full refactoring of the front-end code

Comment collection

Zhou Xin

• vue version, whether to switch to vue3
• Menu bar permission problem, display and hide the control of the menu returned by the background interface.
• At the same time, the structure of the front-end project does not feel necessary to be divided into several parts. unified into one module.
• Some components can use existing ui components: such as the left menu bar, etc. There's no need to reimplement it yourself.
• Permissions, administrators and commonly used dictionaries and other data need to be returned through a separate interface, and the front end uses vuex for unified management
• Is the design style consistent with other modules in the line
• Can the page using iframe be replaced by micro-app

Beacon Town

• The flexibility of form-create is very poor. There is a bug that I don’t know how to deal with. When I click Add, the named data is passed as empty but there is still data to fill in.
• I personally think that element ui is good-looking. The current iview is not as good-looking. Element ui officially has ready-made form components

Lu Xiaolong

• It is recommended to change the UI component iview haha on ts

[casionone]

■列表一些字段合并，不然小屏幕上看不全，得来回拖

■希望有管理员可以配置所有用户的资源 ■优化代码结构，改造的时候感觉各个组件不太直观 ■完全重构的话，要不要考虑element-ui / ant-design，这两个应该比 iview 用的更多些