From 92c1c01f5b07dcfdda766241f607db26b9303f96 Mon Sep 17 00:00:00 2001 From: Wink <32723967+aiwenmo@users.noreply.github.com> Date: Tue, 19 Nov 2024 09:39:31 +0800 Subject: [PATCH] [Optimization-3925][web] Optimize the style of IDE (#3926) --- README.md | 15 +- README_zh_CN.md | 14 +- .../src/components/Icons/CodeLanguageIcon.tsx | 143 +++++++++++++----- dinky-web/src/locales/en-US/pages.ts | 8 +- dinky-web/src/locales/zh-CN/pages.ts | 8 +- .../TaskConfig/ProFormFlinkUdfConfig.tsx | 2 +- .../JobModal/components/TemplateSelect.tsx | 5 +- .../DataStudio/Toolbar/Project/function.tsx | 29 +--- dinky-web/src/pages/DataStudio/css/index.less | 19 +-- dinky-web/src/pages/DataStudio/index.tsx | 4 +- docs/src/pages/index.tsx | 53 +++---- 11 files changed, 162 insertions(+), 138 deletions(-) diff --git a/README.md b/README.md index 8cd5948d9f..56bbc8f704 100644 --- a/README.md +++ b/README.md @@ -10,8 +10,7 @@ ## Introduction -Dinky is a real-time data development platform based on Apache Flink, enabling agile data development, deployment and operation. - +An open-source real-time computing platform built with Apache Flink as its core, capable of real-time application job development, data debugging, and runtime monitoring, helping to facilitate efficient real-time computing applications. ## Feature Its main features are as follows: @@ -77,9 +76,9 @@ Below is a partial list of acknowledgements: [Apache Flink](https://github.com/apache/flink) -[FlinkCDC](https://github.com/ververica/flink-cdc-connectors) +[Apache FlinkCDC](https://github.com/apache/flink-cdc) -[Apache Paimon](https://github.com/apache/incubator-paimon) +[Apache Paimon](https://github.com/apache/paimon) [Apache Dolphinscheduler](https://github.com/apache/dolphinscheduler) @@ -107,13 +106,9 @@ Thanks to [JetBrains](https://www.jetbrains.com/?from=dlink) for providing a fre 2.Visit the [official website](http://www.dinky.org.cn/#/) website to read the latest documentation manual. -3.It is recommended to scan the code to enter the DingTalk group. - -dinkydingding - -4.Enter the WeChat user community group (recommended, add WeChat `wenmo_ai` to invite into the group) and QQ user community group (**543709668**) to communicate, and apply for the remarks "Dinky + company name + position". +3.Enter the WeChat user community group (recommended, add WeChat `wenmo_ai` to invite into the group) and QQ user community group (**543709668**) to communicate, and apply for the remarks "Dinky + company name + position". -5.Follow the WeChat public account to get the latest official articles: [Dinky Open Source](https://mmbiz.qpic.cn/mmbiz_jpg/dyicwnSlTFTp6w4PuJruFaLV6uShCJDkzqwtnbQJrQ90yKDuuIC8tyMU5DK69XZibibx7EPPBRQ3ic81se5UQYs21g/0?wx_fmt=jpeg). +4.Follow the WeChat public account to get the latest official articles: [Dinky Open Source](https://mmbiz.qpic.cn/mmbiz_jpg/dyicwnSlTFTp6w4PuJruFaLV6uShCJDkzqwtnbQJrQ90yKDuuIC8tyMU5DK69XZibibx7EPPBRQ3ic81se5UQYs21g/0?wx_fmt=jpeg). ## Copyright diff --git a/README_zh_CN.md b/README_zh_CN.md index afb1aa36f2..fc9e549c04 100644 --- a/README_zh_CN.md +++ b/README_zh_CN.md @@ -12,7 +12,7 @@ ## 简介 -Dinky 是一个基于 `Apache Flink` 的实时数据开发平台，实现了敏捷的数据开发、部署和运维。 +以 Apache Flink 为内核构建的开源实时计算平台，具备实时应用的作业开发、数据调试及运行监控能力，助力实时计算高效应用。 ## 功能 @@ -80,9 +80,9 @@ Dinky 是一个基于 `Apache Flink` 的实时数据开发平台，实现了敏 [Apache Flink](https://github.com/apache/flink) -[FlinkCDC](https://github.com/ververica/flink-cdc-connectors) +[Apache FlinkCDC](https://github.com/apache/flink-cdc) -[Apache Paimon](https://github.com/apache/incubator-paimon) +[Apache Paimon](https://github.com/apache/paimon) [Apache Dolphinscheduler](https://github.com/apache/dolphinscheduler) @@ -110,13 +110,9 @@ Dinky 是一个基于 `Apache Flink` 的实时数据开发平台，实现了敏 2.访问 [官网](http://www.dinky.org.cn/#/) 网址，阅读最新文档手册 -3.推荐扫码进入钉钉群 +3.进入微信用户社区群（推荐，添加微信号 `wenmo_ai` 邀请进群）和 QQ 用户社区群（**543709668**）交流，必须申请备注 “Dinky + 企业名 + 职位”， -dinkydingding - -4.进入微信用户社区群（推荐，添加微信号 `wenmo_ai` 邀请进群）和 QQ 用户社区群（**543709668**）交流，必须申请备注 “Dinky + 企业名 + 职位”， - -5.关注微信公众号获取官方最新文章：[Dinky 开源](https://mmbiz.qpic.cn/mmbiz_jpg/dyicwnSlTFTp6w4PuJruFaLV6uShCJDkzqwtnbQJrQ90yKDuuIC8tyMU5DK69XZibibx7EPPBRQ3ic81se5UQYs21g/0?wx_fmt=jpeg) +4.关注微信公众号获取官方最新文章：[Dinky 开源](https://mmbiz.qpic.cn/mmbiz_jpg/dyicwnSlTFTp6w4PuJruFaLV6uShCJDkzqwtnbQJrQ90yKDuuIC8tyMU5DK69XZibibx7EPPBRQ3ic81se5UQYs21g/0?wx_fmt=jpeg) ## 版权 diff --git a/dinky-web/src/components/Icons/CodeLanguageIcon.tsx b/dinky-web/src/components/Icons/CodeLanguageIcon.tsx index 9ccb43ce3e..fb3d4ef728 100644 --- a/dinky-web/src/components/Icons/CodeLanguageIcon.tsx +++ b/dinky-web/src/components/Icons/CodeLanguageIcon.tsx @@ -34,7 +34,7 @@ export const FileIcon = () => { return ( <> ( { * @constructor */ export const JavaSvg = (props: { size?: number }) => { - const { size = 16 } = props; + const {size = 16} = props; return ( <> { * @constructor */ export const YAMLSvg = (props: { size?: number }) => { - const { size = 16 } = props; + const {size = 16} = props; return ( <> { return ( <> ( { export const ZipSvg = () => { return ( ( @@ -219,7 +219,7 @@ export const ZipSvg = () => { export const ConfigSvg = () => { return ( ( { return ( <> ( { return ( <> ( { * @constructor */ export const ShellSvg = (props: { size?: number }) => { - const { size = 16 } = props; + const {size = 16} = props; return ( <> @@ -343,7 +343,7 @@ export const ShellSvg = (props: { size?: number }) => { * @constructor */ export const XMLSvg = (props: { size?: number }) => { - const { size = 16 } = props; + const {size = 16} = props; return ( <> { * @constructor */ export const MarkDownSvg = (props: { size?: number }) => { - const { size = 16 } = props; + const {size = 16} = props; return ( <> { ); }; export const FlinkSQLSvg = (props: { size?: number }) => { - const { size = 16 } = props; + const {size = 16} = props; return ( ( - // - // - // - // - + + d="M821.76 870.4s-5.12 33.28 5.12 48.64l43.52 30.72-2.56 10.24v15.36l10.24 2.56 15.36-2.56 2.56 5.12 7.68 10.24h10.24l10.24-23.04v-10.24l10.24-2.56s69.12-23.04 53.76-48.64l-5.12-2.56s-30.72 12.8-43.52 10.24c0 0-58.88 2.56-87.04-17.92l-30.72-25.6z" + fill="#D77083" p-id="6265"> + d="M837.12 849.92s-28.16 0-10.24 28.16c0 0 28.16 30.72 81.92 38.4 0 0 79.36 0 84.48-25.6 0 0-2.56-30.72-25.6-28.16-23.04 7.68-130.56-12.8-130.56-12.8z" + fill="#733D48" p-id="6266"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + )} /> ); }; export const FlinkSQLEnvSvg = (props: { size?: number }) => { - const { size = 16 } = props; + const {size = 16} = props; return ( ( @@ -482,7 +547,7 @@ export const FlinkSQLEnvSvg = (props: { size?: number }) => { }; export const FlinkJarSvg = (props: { size?: number }) => { - const { size = 16 } = props; + const {size = 16} = props; return ( { }; export const LogSvg = (props: { size?: number }) => { - const { size = 16 } = props; + const {size = 16} = props; return ( <> ( { }; export const ScalaSvg = (props: { size?: number }) => { - const { size = 16 } = props; + const {size = 16} = props; return ( <> { }; export const PythonSvg = (props: { size?: number }) => { - const { size = 16 } = props; + const {size = 16} = props; return ( <> void }> const renderItem = (item: Document) => { return ( -
+
void }> return ( {l('catalog.useTemplate')}} collapsibleIconRender={() => {'>'}} size={'small'} diff --git a/dinky-web/src/pages/DataStudio/Toolbar/Project/function.tsx b/dinky-web/src/pages/DataStudio/Toolbar/Project/function.tsx index fe6f7a2600..c3043d121b 100644 --- a/dinky-web/src/pages/DataStudio/Toolbar/Project/function.tsx +++ b/dinky-web/src/pages/DataStudio/Toolbar/Project/function.tsx @@ -235,18 +235,6 @@ export const buildProjectTree = ( data ? data.map((item: Catalogue) => { const currentPath = path ? [...path, item.name] : [item.name]; - // 构造生命周期的值 - const stepValue = buildStepValue(item.task?.step); - // 渲染生命周期的 标记点 - const renderPreFixState = item.isLeaf && showBadge(item.type) && ( - <> - - - ); // 总渲染 title const renderTitle = ( @@ -286,21 +274,7 @@ export const buildProjectTree = ( > - ) : ( - - {l('global.operation.able')} - - {toolTipTitle} -

- } - > - - - )} + ) : undefined} ); @@ -311,7 +285,6 @@ export const buildProjectTree = ( label: searchTreeNode(item.name, searchValue), icon: item.type && item.children.length === 0 && ( - {renderPreFixState} {getTabIcon(item.type, 20)} ), diff --git a/dinky-web/src/pages/DataStudio/css/index.less b/dinky-web/src/pages/DataStudio/css/index.less index e239c4eacc..e2031f6909 100644 --- a/dinky-web/src/pages/DataStudio/css/index.less +++ b/dinky-web/src/pages/DataStudio/css/index.less @@ -15,17 +15,17 @@ .dark-theme { // 暗色主题颜色全局变量 - --primary-color: #24292e; - --second-color: #263238; - --main-background-color: #24292e; - --footer-bg-color: rgba(255, 255, 255, 0.18); + --primary-color: #2b2d30; + --second-color: #3c3f41; + --main-background-color: #2b2d30; + --footer-bg-color: #2b2d30; --btn-color: #ced0d6; - --btn-active-color: #ced0d6; - --btn-background-color: #5e423f; - --border-color: #1b1f23; + --btn-active-color: #fafafa; + --btn-background-color: #43454a; + --border-color: #1e1f22; --text-color: #fafafa; --panel-extra-btn-color: #fafafa; - --scroll-bg-color: #c46c5d; + --scroll-bg-color: #4d4e51; } .page-container { @@ -198,8 +198,9 @@ body > .dragging-layer > div:last-child { .dock-tab-active, .dock-tab-active:hover { - color: #108ee9; + color: var(--text-color); cursor: default; + font-weight: 600; transform: translateZ(0); } diff --git a/dinky-web/src/pages/DataStudio/index.tsx b/dinky-web/src/pages/DataStudio/index.tsx index 80b2b5fa61..07e63c7f35 100644 --- a/dinky-web/src/pages/DataStudio/index.tsx +++ b/dinky-web/src/pages/DataStudio/index.tsx @@ -59,7 +59,7 @@ const SqlTask = lazy(() => import('@/pages/DataStudio/CenterTabContent/SqlTask') const DataSourceDetail = lazy(() => import('@/pages/DataStudio/CenterTabContent/DataSourceDetail')); let didMount = false; -const DataStudioNew: React.FC = (props: any) => { +const DataStudio: React.FC = (props: any) => { const { dataStudioState, handleToolbarShowDesc, @@ -675,4 +675,4 @@ export default connect( dataStudioState: DataStudio }), mapDispatchToProps -)(DataStudioNew); +)(DataStudio); diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 411b08b26d..165d5c9242 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -53,7 +53,7 @@ const FeatureList = [ Svg: require('@site/static/img/one_stop.svg').default, description: ( <> - 提供 FlinkSQL Studio，通过提示补全、逻辑检查、即席查询、全局变量、元数据查询等能力提升 Flink 作业开发效率 + 提供 FlinkSQL IDE，通过提示补全、逻辑检查、即席查询、全局变量、元数据查询等能力提升 Flink 作业开发效率 ), }, @@ -62,7 +62,7 @@ const FeatureList = [ Svg: require('@site/static/img/ease_of_use.svg').default, description: ( <> - 屏蔽技术细节，实现 Flink 所有作业提交方式，自动托管任务监控、保存点、报警等 + 屏蔽技术细节，实现 Flink 所有作业部署模式，自动托管作业状态，实时监控报警 ), }, @@ -71,7 +71,7 @@ const FeatureList = [ Svg: require('@site/static/img/easy_of_deploy.svg').default, description: ( <> - 扩展 FlinkSQL 语法，如全局变量、CDC 整库同步、打印表、执行 Jar 任务等 + 扩展 FlinkSQL 语法，如全局变量、环境复用、整库同步、打印表、执行 Jar 任务等 ), }, @@ -80,8 +80,7 @@ const FeatureList = [ Svg: require('@site/static/img/easy_of_extend.svg').default, description: ( <> - 多种设计模式支持快速扩展新功能，如数据源、报警方式、 - CDC 整库同步、自定义语法等 + 多种设计模式支持快速扩展新功能，如数据源、报警方式、整库同步、自定义语法等 ), }, @@ -118,11 +117,11 @@ const HeaderGraph = () => {

- Dinky
让Flink作业纵享丝滑 + Dinky
让 Apache Flink +
纵享丝滑

- 为 Apache Flink 深度定制的新一代实时计算平台，提供敏捷的 Flink SQL, Flink Jar - 作业开发、部署及监控能力，助力实时计算高效应用。 + 以 Apache Flink 为内核构建的开源实时计算平台，具备实时应用的作业开发、数据调试及运行监控能力，助力实时计算高效应用。

{ return (
    -
  • 3.0k+ Github stars
    • -
  • 1111 Github forks
    • -
  • 10k+ Total downloads
    • +
  • 3.2k Github stars
    • +
  • 1.2k Github forks
    • +
  • 10k Total downloads
) @@ -175,11 +174,10 @@ export default function Home() {
-
-

什么是Dinky？

+
+

什么是 Dinky？

-

Dinky 是一个开箱即用的一站式实时计算平台，以 Apache Flink 为基础，连接 - OLAP 和数据湖等众多框架,致力于流批一体和湖仓一体的建设与实践。

+

Dinky 是一个开箱即用的一站式实时计算平台，以 Apache Flink 为基础，连接数据湖仓等众多框架，致力于流批一体和湖仓一体的建设与实践。

@@ -197,15 +195,13 @@ export default function Home() {
-
IDE式开发
+
实时计算 IDE

- Dinky 提供一个轻量级的 IDE 式开发环境，提供一站式开发能力，从语句编写、调试、提交 到 - 监控、发布、丝滑流畅，解决sql作业文件多，管理困难， - 编写困难等问题，还支持智能代码提示，Env参数，全局变量等，让开发更简单，顺滑。 + Dinky 提供轻量级的实时计算 IDE 开发模式，支持代码提示补全、查询调试、逻辑检查、计划查看、血缘分析、全局变量、环境复用、整库同步、版本控制、元数据查询等能力，致力于解决作业数量大、开发成本高、调试门槛高等问题，让作业开发更简单高效。

- 支持Flink Sql
- 支持Flink Jar
- CDC整库同步
+ Flink Sql 开发
+ Flink Jar 开发
+ Flink CDC 整库同步
了解更多
@@ -222,21 +218,20 @@ export default function Home() {
-
细化运维管理
+
实时运维管理

- Dinky无缝支持流批一体，Yarn，K8s，Standalone，任务提交管理全方位支持，运维中心对原有Flink - webui进行增强，持久化监控，个性化告警规则配置，智能重启，停止与savepoint管理等。 + Dinky支持 Apache Flink 所有的部署模式运维，运维中心提供作业运行信息、集群日志、血缘分析、CheckPoint和 SavePoint状态查看与恢复、版本信息、告警规则配置、Metrics可视化分析等。

- rs文件系统拓展
- UDF 管理
- 元数据管理
+ 监控报警
+ 状态管理
+ 作业分析
了解更多
- Image placeholder