Skip to content

Commit

Permalink
[Optimization] Optimization right silder layout (#2181)
Browse files Browse the repository at this point in the history
* op op-right-layout

* modify code
  • Loading branch information
Zzm0809 authored Aug 8, 2023
1 parent 2da857a commit 6b4dd62
Show file tree
Hide file tree
Showing 21 changed files with 597 additions and 444 deletions.
14 changes: 11 additions & 3 deletions dinky-web/src/components/RightContent/AvatarDropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

import {
LogoutOutlined,
TeamOutlined,
TeamOutlined, UserOutlined,
UserSwitchOutlined
} from '@ant-design/icons';
import { setAlpha } from '@ant-design/pro-components';
Expand Down Expand Up @@ -57,7 +57,7 @@ const Name = () => {
};
});

return <span className={`${nameClassName} anticon`}>{currentUser?.user.username} ({currentUser?.currentTenant.tenantCode})</span>;
return <span className={`${nameClassName} anticon`}>{currentUser?.user.username}</span>;
};

const AvatarLogo = () => {
Expand Down Expand Up @@ -193,9 +193,17 @@ const AvatarDropdown = () => {


const menuItems = [
{
key: 'currentTenant',
icon: <TeamOutlined />,
label: l('menu.account.tenant','', {tenantCode: currentUser?.currentTenant.tenantCode}),
},
{
type: 'divider' as const,
},
{
key: 'center',
icon: <TeamOutlined />,
icon: <UserOutlined />,
label: l('menu.account.center'),
onClick: () => history.push('/account/center'),
},
Expand Down
4 changes: 4 additions & 0 deletions dinky-web/src/global.less
Original file line number Diff line number Diff line change
Expand Up @@ -427,3 +427,7 @@ h5 {
}
}

.ant-pro-form-list-item {
display: flex!important;
align-items: baseline!important;
}
1 change: 1 addition & 0 deletions dinky-web/src/locales/en-US/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default {

'menu.login': 'Login',
'menu.account.settings': 'Account Settings',
'menu.account.tenant': 'Tenant: {tenantCode}',
'menu.account.center': 'Account Center',
'menu.account.logout': 'Logout',
'menu.account.changePassword': 'Change Password',
Expand Down
12 changes: 12 additions & 0 deletions dinky-web/src/locales/en-US/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1009,4 +1009,16 @@ export default {
'pages.datastudio.footer.codeEncoding': "File Encoding: ",
'pages.datastudio.footer.codePosition': "Ln {Ln}:Col {Col} ",


'datastudio.middle.qg': 'Quick Guide',
'datastudio.middle.qg.clusterInstance': 'Register Session Cluster',
'datastudio.middle.qg.clusterConfiguration': 'Register Cluster Configuration',
'datastudio.middle.qg.database': 'Register DataSource',
'datastudio.middle.qg.alertInstance': 'Register Alert Instance',
'datastudio.middle.qg.alertGroup': 'Register Alert Group',
'datastudio.middle.qg.fragment': 'Global Variables',
'datastudio.middle.qg.document': 'Document',
'datastudio.middle.qg.gitprojects': 'Git Projects',
'datastudio.middle.qg.udf': 'UDF',
'datastudio.middle.qg.resource': 'Resource',
};
1 change: 1 addition & 0 deletions dinky-web/src/locales/zh-CN/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default {

'menu.login': '登录',
'menu.account.center': '个人中心',
'menu.account.tenant': '租户: {tenantCode}',
'menu.account.settings': '个人设置',
'menu.account.logout': '退出登录',
'menu.account.changePassword': '修改密码',
Expand Down
13 changes: 13 additions & 0 deletions dinky-web/src/locales/zh-CN/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1020,4 +1020,17 @@ export default {
'pages.datastudio.footer.lineSeparator': "行分隔符:",
'pages.datastudio.footer.codeEncoding': "文件编码:",
'pages.datastudio.footer.codePosition': "行{Ln}:列{Col} ",

'datastudio.middle.qg': '快捷引导',
'datastudio.middle.qg.clusterInstance': '注册 Session 集群',
'datastudio.middle.qg.clusterConfiguration': '注册集群配置',
'datastudio.middle.qg.database': '注册数据源',
'datastudio.middle.qg.alertInstance': '注册告警实例',
'datastudio.middle.qg.alertGroup': '注册告警组',
'datastudio.middle.qg.fragment': '全局变量',
'datastudio.middle.qg.document': '文档',
'datastudio.middle.qg.gitprojects': 'Git 项目',
'datastudio.middle.qg.udf': 'UDF',
'datastudio.middle.qg.resource': '资源',

};
Original file line number Diff line number Diff line change
@@ -1,4 +1,30 @@

const escape2Html = (str: string) => {
let arrEntities:Record<string, string> = {'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"'};
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
return arrEntities[t];
});
}
const getRangeText = (str: string) => {
str = escape2Html(str);
// @ts-ignore
const canvas = getRangeText.canvas || (getRangeText.canvas = document.createElement("canvas"));
const context = canvas.getContext("2d");
context.font = "10px sans-serif";
let result = '';
let count = 1;
for (let i = 0, len = str.length; i < len; i++) {
result += str[i];
let width = context.measureText(result).width;
if (width >= 110 * count) {
result += '\r\n';
count++;
}
}
return result;
};


export const buildGraphData = (data:any) => {
const edges = [];
for (const i in data.nodes) {
Expand Down Expand Up @@ -28,27 +54,3 @@ export const buildGraphData = (data:any) => {
data.edges = edges;
return data;
};
const getRangeText = (str: string) => {
str = escape2Html(str);
// @ts-ignore
const canvas = getRangeText.canvas || (getRangeText.canvas = document.createElement("canvas"));
const context = canvas.getContext("2d");
context.font = "10px sans-serif";
let result = '';
let count = 1;
for (let i = 0, len = str.length; i < len; i++) {
result += str[i];
let width = context.measureText(result).width;
if (width >= 110 * count) {
result += '\r\n';
count++;
}
}
return result;
};
const escape2Html = (str: string) => {
let arrEntities:Record<string, string> = {'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"'};
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
return arrEntities[t];
});
}
3 changes: 2 additions & 1 deletion dinky-web/src/pages/DataStudio/HeaderContainer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,8 @@ const HeaderContainer = (props: any) => {
title: l('button.save'),
click: () => {
const current = getCurrentData(panes, activeKey);
handlePutDataJson("/api/task", current)
current.configJson = JSON.stringify(current.config)
handlePutDataJson("/api/task", current).then(()=>saveTabs({...props.tabs}))
},
hotKey: (e: KeyboardEvent) => e.ctrlKey && e.key === 's',
hotKeyDesc: "Ctrl+S",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { StateType} from "../../model";
import {Spin, Tag} from "antd";
import React, {useEffect, useState} from "react";
import {
DatabaseOutlined, ReloadOutlined,
DatabaseOutlined,
TableOutlined
} from "@ant-design/icons";
import {clearMetaDataTable, showMetaDataTable} from "./service";
Expand All @@ -12,7 +12,6 @@ import {Key, ProForm, ProFormSelect} from "@ant-design/pro-components";
import {TagAlignLeft} from "@/components/StyledComponents";
import SchemaTree from "@/pages/RegCenter/DataSource/components/DataSourceDetail/SchemaTree";
import {DataSources} from "@/types/RegCenter/data";
import ContentScroll from "@/components/Scroll/ContentScroll";
import {BtnRoute} from "@/pages/DataStudio/route";

const MetaData = (props: any) => {
Expand All @@ -26,16 +25,16 @@ const MetaData = (props: any) => {
* @description: 刷新树数据
* @param {number} databaseId
*/
const onRefreshTreeData = (databaseId: number) => {
const onRefreshTreeData = async (databaseId: number) => {
if (!databaseId) {
setIsLoadingDatabase(false);
return;
}
setIsLoadingDatabase(true);

const res = showMetaDataTable(databaseId);
res.then((tables) => {
await showMetaDataTable(databaseId).then(res => {
setIsLoadingDatabase(false);
const {datas: tables} = res;
if (!tables) return;
for (let table of tables) {
table.title = table.name;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

import {l} from "@/utils/intl";

export const KEY_BOARD = [
export const KEY_BOARD_MIDDLE = [
{
key: 'ctrls',
label: 'Ctrl + S',
Expand All @@ -45,6 +45,9 @@ export const KEY_BOARD = [
label: 'Esc',
description: l('shortcut.key.fullscreenClose'),
},
]

export const KEY_BOARD_RIGHT_SLIDER = [
{
key: 'f1',
label: 'F1',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
*/

import {Divider, Typography} from "antd";
import {KEY_BOARD} from "@/pages/DataStudio/MiddleContainer/KeyBoard/constant";
import {KEY_BOARD_MIDDLE} from "@/pages/DataStudio/MiddleContainer/KeyBoard/constant";
import {l} from "@/utils/intl";
import React from "react";

Expand All @@ -29,9 +29,9 @@ const KeyBoard = () => {


const buildKeyBoard = () => {
return KEY_BOARD.map((item,index) => {
return KEY_BOARD_MIDDLE.map((item,index) => {
return <>
{index % 6 === 0 ? <>
{index % 5 === 0 ? <>
<Divider plain orientationMargin={0}/>
<Text keyboard>{item.label}</Text>{item.description}<Divider type="vertical"/>
</>: <>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,55 +18,57 @@
*/


import {l} from "@/utils/intl";

export const QUICK_GUIDE = [
{
key: 'clusterInstance',
label: '注册 Session 集群',
label: l('datastudio.middle.qg.clusterInstance'),
link: '/registration/cluster/instance'
},
{
key: 'clusterConfiguration',
label: '注册集群配置',
label: l('datastudio.middle.qg.clusterConfiguration'),
link: '/registration/cluster/configuration'
},
{
key: 'database',
label: '注册数据源',
label: l('datastudio.middle.qg.database'),
link: '/registration/database'
},
{
key: 'alertInstance',
label: '注册告警实例',
label: l('datastudio.middle.qg.alertInstance'),
link: '/registration/alert/instance'
},
{
key: 'alertGroup',
label: '注册告警组',
label: l('datastudio.middle.qg.alertGroup'),
link: '/registration/alert/group'
},
{
key: 'fragment',
label: '全局变量',
label: l('datastudio.middle.qg.fragment'),
link: '/registration/fragment'
},
{
key: 'document',
label: '文档',
label: l('datastudio.middle.qg.document'),
link: '/registration/document'
},
{
key: 'gitprojects',
label: 'Git 项目',
label: l('datastudio.middle.qg.gitprojects'),
link: '/registration/gitprojects'
},
{
key: 'udf',
label: 'UDF',
label: l('datastudio.middle.qg.udf'),
link: '/registration/udf'
},
{
key: 'resource',
label: '资源',
label: l('datastudio.middle.qg.resource'),
link: '/registration/resource'
}
];
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {Divider, Typography} from "antd";
import React from "react";
import {QUICK_GUIDE} from "@/pages/DataStudio/MiddleContainer/QuickGuide/constant";
import { Link } from "@umijs/max";
import { l } from "@/utils/intl";

const {Title, Paragraph} = Typography;

Expand All @@ -31,7 +32,7 @@ const QuickGuide = () => {
const buildQuickGuide = () => {
return QUICK_GUIDE.map((item,index) => {
return <>
{index % 10 === 0 ? <>
{index % 5 === 0 ? <>
<Divider plain orientationMargin={0}/>
<Link to={item.link} key={item.key}>{item.label}</Link>
</> : <>
Expand All @@ -44,7 +45,7 @@ const QuickGuide = () => {

return <>
<Typography style={{padding: '2px', textAlign: 'center', border: 'salmon'}}>
<Title level={4}>快捷引导</Title>
<Title level={4}>{l('datastudio.middle.qg')}</Title>
<Paragraph style={{padding: 0, margin: 0, textAlign: 'center', border: 'salmon'}} >
{buildQuickGuide()}
</Paragraph>
Expand Down
2 changes: 1 addition & 1 deletion dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@ const MiddleContainer = (props: any) => {
if (tabItems?.length === 0) {
return <>
<KeyBoard/>
<Divider/>
<Divider/><br/><br/><br/>
<QuickGuide/>
</>
} else {
Expand Down
Loading

0 comments on commit 6b4dd62

Please sign in to comment.