[Optimization-3925][web] Optimize the style of IDE (DataLinkDC#3926)

Zzm0809 · Nov 19, 2024 · 92c1c01 · 92c1c01
1 parent 29130fb
commit 92c1c01
Show file tree

Hide file tree

Showing 11 changed files with 162 additions and 138 deletions.
diff --git 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.
-
-<img src="https://raw.githubusercontent.com/DataLinkDC/dinky/dev/images/main/dinkydingding.jpg" alt="dinkydingding" style="zoom:30%;" />
-
-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
@@ -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 + 企业名 + 职位”，
 
-<img src="https://raw.githubusercontent.com/DataLinkDC/dinky/dev/images/main/dinkydingding.jpg" alt="dinkydingding" style="zoom:30%;" />
-
-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
diff --git a/dinky-web/src/locales/en-US/pages.ts b/dinky-web/src/locales/en-US/pages.ts
@@ -515,12 +515,12 @@ export default {
   'pages.datastudio.label.jobConfig.addConfig': 'Add Config item',
   'pages.datastudio.label.jobConfig.addConfig.params': 'parameters',
   'pages.datastudio.label.jobConfig.addConfig.value': 'value',
-  'pages.datastudio.label.udf': 'Udf Item',
+  'pages.datastudio.label.udf': 'Refer Udf',
   'pages.datastudio.label.udf.tip':
-    'Inject UDF item, Automatically add statement `create temporary function [functionName] as [className]` at the beginning of the SQL statement',
+    'Refer UDF. Automatically add statement `create temporary function [functionName] as [className]` at the beginning of the SQL statement',
   'pages.datastudio.label.udf.duplicate.tip':
-    'The class [className] selected this time already exists and duplicate injection is not allowed. Please reselect or cancel injection (delete and change line).',
-  'pages.datastudio.label.udf.injectUdf': 'Inject UDF item',
+    'The class [className] selected this time already exists and duplicate reference is not allowed. Please reselect or cancel reference (delete and change line).',
+  'pages.datastudio.label.udf.injectUdf': 'Refer UDF',
   'pages.datastudio.label.udf.name': 'function name',
   'pages.datastudio.label.udf.className': 'class name',
   'pages.datastudio.label.jobConfig.alertGroup': 'Alarm Group',

diff --git a/dinky-web/src/locales/zh-CN/pages.ts b/dinky-web/src/locales/zh-CN/pages.ts
@@ -460,12 +460,12 @@ export default {
   'pages.datastudio.label.jobConfig.addConfig': '添加配置项',
   'pages.datastudio.label.jobConfig.addConfig.params': '参数',
   'pages.datastudio.label.jobConfig.addConfig.value': '值',
-  'pages.datastudio.label.udf': '注入UDF算子',
+  'pages.datastudio.label.udf': '引用 UDF',
   'pages.datastudio.label.udf.tip':
-    '注入UDF算子, 自动在所有语句前注入`create temporary function [functionName] as [className]` 语句',
+    '引用 UDF, 自动在所有语句前执行`create temporary function [functionName] as [className]` 语句',
   'pages.datastudio.label.udf.duplicate.tip':
-    '此次选择的类[className]已经存在,不允许重复注入,请重新选择,或者取消注入(删除改行即可)。',
-  'pages.datastudio.label.udf.injectUdf': '注入UDF',
+    '此次选择的类[className]已经存在,不允许重复注入,请重新选择,或者取消引用(删除改行即可)。',
+  'pages.datastudio.label.udf.injectUdf': '引用 UDF',
   'pages.datastudio.label.udf.name': '函数名称',
   'pages.datastudio.label.udf.className': '类名',
   'pages.datastudio.label.jobConfig.alertGroup': '告警组',

diff --git a/dinky-web/src/pages/DataStudio/CenterTabContent/SqlTask/TaskConfig/ProFormFlinkUdfConfig.tsx b/dinky-web/src/pages/DataStudio/CenterTabContent/SqlTask/TaskConfig/ProFormFlinkUdfConfig.tsx
@@ -30,7 +30,7 @@ import React, { useState } from 'react';
 import { DefaultOptionType } from 'antd/es/select';
 import { TaskUdfRefer } from '@/types/Studio/data';
 import { calculatorWidth } from '@/pages/DataStudio/CenterTabContent/SqlTask/TaskConfig/function';
-import { TaskState } from '@/pages/DataStudioNew/type';
+import { TaskState } from '@/pages/DataStudio/type';
 
 export const ProFormFlinkUdfConfig = (props: {
   containerWidth: number;

diff --git a/dinky-web/src/pages/DataStudio/Toolbar/Project/JobModal/components/TemplateSelect.tsx b/dinky-web/src/pages/DataStudio/Toolbar/Project/JobModal/components/TemplateSelect.tsx
@@ -37,7 +37,7 @@ const TemplateSelect: React.FC<{ type: string; onChange: (v: string) => void }>
 
   const renderItem = (item: Document) => {
     return (
-      <div style={{ padding: 10, background: '#F8F9FA' }}>
+      <div style={{ padding: 10}}>
         <ProCard
           checked={item.id == currentSelect?.id}
           hoverable
@@ -74,9 +74,8 @@ const TemplateSelect: React.FC<{ type: string; onChange: (v: string) => void }>
 
   return (
     <ProCard
-      bodyStyle={{ padding: 0 }}
+      bodyStyle={{ padding: '0 12px 12px 12px' }}
       collapsible
-      defaultCollapsed={true}
       title={<a>{l('catalog.useTemplate')}</a>}
       collapsibleIconRender={() => <a>{'>'}</a>}
       size={'small'}

diff --git 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) && (
-          <>
-            <Badge
-              title={stepValue.title}
-              color={stepValue.color}
-              // status={(stepValue.status as PresetStatusColorType) ?? 'default'}
-            />
-          </>
-        );
 
         // 总渲染 title
         const renderTitle = (
@@ -286,21 +274,7 @@ export const buildProjectTree = (
               >
                 <LockTwoTone twoToneColor={'red'} />
               </Tooltip>
-            ) : (
-              <Tooltip
-                mouseEnterDelay={mouseEnterDelay}
-                placement={'right'}
-                title={
-                  <p style={{ margin: 0 }}>
-                    {l('global.operation.able')}
-                    <Divider style={{ margin: 0 }} type={'horizontal'} />
-                    {toolTipTitle}
-                  </p>
-                }
-              >
-                <UnlockTwoTone twoToneColor='gray' />
-              </Tooltip>
-            )}
+            ) : undefined}
           </>
         );
 
@@ -311,7 +285,6 @@ export const buildProjectTree = (
           label: searchTreeNode(item.name, searchValue),
           icon: item.type && item.children.length === 0 && (
             <Space size={'small'}>
-              {renderPreFixState}
               {getTabIcon(item.type, 20)}
             </Space>
           ),

diff --git 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
@@ -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
@@ -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 = () => {
                 </div>
                 <div className="col-12 col-md-7 col-lg-6 order-md-1 pr-md-5">
                     <h1 className="display-4 text-center text-md-left mb-3">
-                        <strong className="text-primary">Dinky<br/></strong>让Flink作业纵享丝滑
+                        <strong className="text-primary">Dinky<br/></strong>让 Apache Flink
+                        <br/>纵享丝滑
                     </h1>
                     <p className="lead text-center text-md-left text-muted">
-                        为 Apache Flink 深度定制的新一代实时计算平台，提供敏捷的 Flink SQL, Flink Jar
-                        作业开发、部署及监控能力，助力实时计算高效应用。
+                        以 Apache Flink 为内核构建的开源实时计算平台，具备实时应用的作业开发、数据调试及运行监控能力，助力实时计算高效应用。
                     </p>
                     <div className="text-center text-md-left mt-5">
                         <a href="/docs/next/get_started/quick_experience"
@@ -142,9 +141,9 @@ const GithubBanner = () => {
     return (
         <div>
             <ul className="github-banner">
-                <li><strong>3.0k+</strong> Github stars</li>
-                <li><strong>1111</strong> Github forks</li>
-                <li><strong>10k+</strong> Total downloads</li>
+                <li><strong>3.2k</strong> Github stars</li>
+                <li><strong>1.2k</strong> Github forks</li>
+                <li><strong>10k</strong> Total downloads</li>
             </ul>
         </div>
     )
@@ -175,11 +174,10 @@ export default function Home() {
             <section className="slice slice-lg pt-lg-6 pb-0 pb-lg-6 bg-section-secondary">
                 <div className="container">
                     <div className="row mb-5 justify-content-center text-center">
-                        <div className="col-lg-6">
-                            <h2 className=" mt-4">什么是Dinky？</h2>
+                        <div className="col-lg-10">
+                            <h2 className=" mt-4">什么是 Dinky？</h2>
                             <div className="mt-2">
-                                <p className="lead lh-180">Dinky 是一个开箱即用的一站式实时计算平台，以 Apache Flink 为基础，连接
-                                    OLAP 和数据湖等众多框架,致力于流批一体和湖仓一体的建设与实践。</p>
+                                <p className="lead lh-180">Dinky 是一个开箱即用的一站式实时计算平台，以 Apache Flink 为基础，连接数据湖仓等众多框架，致力于流批一体和湖仓一体的建设与实践。</p>
                             </div>
                         </div>
 
@@ -197,15 +195,13 @@ export default function Home() {
                     <div className="py-6">
                         <div className="row row-grid justify-content-between align-items-center">
                             <div className="col-lg-5 order-lg-2">
-                                <h5 className="h3">IDE式开发</h5>
+                                <h5 className="h3">实时计算 IDE</h5>
                                 <p className="lead my-4">
-                                    Dinky 提供一个轻量级的 IDE 式开发环境，提供一站式开发能力，从语句编写、调试、提交 到
-                                    监控、发布、丝滑流畅，解决sql作业文件多，管理困难，
-                                    编写困难等问题，还支持智能代码提示，Env参数，全局变量等，让开发更简单，顺滑。
+                                    Dinky 提供轻量级的实时计算 IDE 开发模式，支持代码提示补全、查询调试、逻辑检查、计划查看、血缘分析、全局变量、环境复用、整库同步、版本控制、元数据查询等能力，致力于解决作业数量大、开发成本高、调试门槛高等问题，让作业开发更简单高效。
                                 </p>
-                                <a className="text-primary ">支持Flink Sql</a><br/>
-                                <a className="text-primary ">支持Flink Jar</a><br/>
-                                <a className="text-primary ">CDC整库同步</a><br/>
+                                <a className="text-primary ">Flink Sql 开发</a><br/>
+                                <a className="text-primary ">Flink Jar 开发</a><br/>
+                                <a className="text-primary ">Flink CDC 整库同步</a><br/>
                                 <a className="text-primary text-underline--dashed">了解更多</a><br/>
                             </div>
                             <div className="col-lg-6 order-lg-1">
@@ -222,21 +218,20 @@ export default function Home() {
                     <div className="py-6">
                         <div className="row row-grid justify-content-between align-items-center">
                             <div className="col-lg-5">
-                                <h5 className="h3">细化运维管理</h5>
+                                <h5 className="h3">实时运维管理</h5>
                                 <p className="lead my-4">
-                                    Dinky无缝支持流批一体，Yarn，K8s，Standalone，任务提交管理全方位支持，运维中心对原有Flink
-                                    webui进行增强，持久化监控，个性化告警规则配置，智能重启，停止与savepoint管理等。
+                                    Dinky支持 Apache Flink 所有的部署模式运维，运维中心提供作业运行信息、集群日志、血缘分析、CheckPoint和 SavePoint状态查看与恢复、版本信息、告警规则配置、Metrics可视化分析等。
                                 </p>
-                                <a className="text-primary ">rs文件系统拓展</a><br/>
-                                <a className="text-primary ">UDF 管理</a><br/>
-                                <a className="text-primary ">元数据管理</a><br/>
+                                <a className="text-primary ">监控报警</a><br/>
+                                <a className="text-primary ">状态管理</a><br/>
+                                <a className="text-primary ">作业分析</a><br/>
                                 <a className="text-primary text-underline--dashed">了解更多</a><br/>
 
                             </div>
                             <div className="col-lg-6">
                                 <div className="card mb-0 ml-lg-5">
                                     <div className="card-body p-2">
-                                        <img alt="Image placeholder" src="https://img2.imgtp.com/2024/05/10/ioYLk3h1.png"
+                                        <img alt="Image placeholder" src="https://pic.dinky.org.cn/dinky/docs/zh-CN/home/monitor.png"
                                              className="img-fluid shadow rounded"/>
                                     </div>
                                 </div>