From d3bf474e4978dc25a4a5e92baa887dc76b1c3e4d Mon Sep 17 00:00:00 2001 From: xsteadybcgo Date: Tue, 31 Aug 2021 17:40:39 +0800 Subject: [PATCH] fix: ui review --- src/assets/arrow_forward.svg | 12 ++ src/assets/logo.svg | 21 ++-- src/assets/logo2.svg | 22 ++++ src/config/locales/en-us.json | 10 +- src/config/locales/zh-cn.json | 10 +- src/index.css | 4 +- src/pages/Dashboard/index.css | 65 +++++----- src/pages/Dashboard/index.tsx | 37 +++--- src/pages/Footer/index.css | 27 ++-- src/pages/Footer/index.tsx | 119 +++++++++--------- src/pages/Header/index.css | 22 ++-- src/pages/Header/index.tsx | 16 +-- src/pages/Home/index.tsx | 8 +- src/pages/Projects/SettingField/index.tsx | 21 +++- src/pages/Projects/index.css | 30 +++-- src/pages/Projects/index.tsx | 68 +++++----- src/pages/Summary/index.css | 51 +++++--- src/pages/Summary/index.tsx | 26 +++- .../components/BasicModalContainer/index.css | 7 +- .../components/CreateProjectBtn/Modal.tsx | 1 + .../components/CreateProjectBtn/index.css | 26 ++-- src/shared/components/OverviewCard/index.css | 8 +- src/shared/components/Tooltip/index.css | 14 +++ src/shared/components/Tooltip/index.tsx | 5 +- src/shared/components/svg/DashboardIcon.tsx | 44 +++++++ src/shared/components/svg/Discord.tsx | 49 +++++--- src/shared/components/svg/Element.tsx | 40 ++++-- src/shared/components/svg/Github.tsx | 39 ++++-- 28 files changed, 513 insertions(+), 289 deletions(-) create mode 100644 src/assets/arrow_forward.svg create mode 100644 src/assets/logo2.svg create mode 100644 src/shared/components/Tooltip/index.css create mode 100644 src/shared/components/svg/DashboardIcon.tsx diff --git a/src/assets/arrow_forward.svg b/src/assets/arrow_forward.svg new file mode 100644 index 0000000..e877586 --- /dev/null +++ b/src/assets/arrow_forward.svg @@ -0,0 +1,12 @@ + + + arrow_forward + + + + + + + + + \ No newline at end of file diff --git a/src/assets/logo.svg b/src/assets/logo.svg index cbd5315..7d2eed9 100644 --- a/src/assets/logo.svg +++ b/src/assets/logo.svg @@ -1,14 +1,17 @@ - - Elara + + logo 2 - - - - - - - + + + + + + + + + + diff --git a/src/assets/logo2.svg b/src/assets/logo2.svg new file mode 100644 index 0000000..77a2cdc --- /dev/null +++ b/src/assets/logo2.svg @@ -0,0 +1,22 @@ + + + -mockplus- + + + + + + + + \ No newline at end of file diff --git a/src/config/locales/en-us.json b/src/config/locales/en-us.json index dd5e795..88cd8c1 100644 --- a/src/config/locales/en-us.json +++ b/src/config/locales/en-us.json @@ -41,10 +41,10 @@ "Subscribe": "Subscribe", "Live Networks": "Live Networks", "Test Networks": "Test Networks", - "Polkadot Parchains": "Polkadot Parchains", - "Kusama Parachains": "Kusama Parchains", - "Westend Parachains": "Westend Parchains", - "Rococo Parachains": "Rococo Parchains", + "Polkadot Parchains": "Polkadot Eco-chains", + "Kusama Parachains": "Kusama Eco-chains", + "Westend Parachains": "Westend Eco-chains", + "Rococo Parachains": "Rococo Eco-chains", "Create": "Create", "Project": "Project", @@ -68,7 +68,6 @@ "Status-Active": "Active", "Status-Stop": "Stop", "Create Project": "Create New Project", - "projectName": "Project Name", "PleaseProjectName": "Please enter the project name", "FormatError": "Format error, normal format: English upper and lower case letters, length 4-32", "onProject": "Create your first one", @@ -92,6 +91,7 @@ "Last30days": "Last 30 Days", "Requests": "Requests", "Settings": "Settings", + "NotSet": "Not Set", "Requests Today": "Requests Today", "WeekRequests": "Weekly requests statistics", "WeekBandwidth": "Weekly bandwidth statistics", diff --git a/src/config/locales/zh-cn.json b/src/config/locales/zh-cn.json index 806f920..222e412 100644 --- a/src/config/locales/zh-cn.json +++ b/src/config/locales/zh-cn.json @@ -39,10 +39,10 @@ "Subscribe": "订阅", "Live Networks": "主网", "Test Networks": "测试网", - "Polkadot Parchains": "Polkadot 平行链", - "Kusama Parachains": "Kusama 平行链", - "Westend Parachains": "Westend 平行链", - "Rococo Parachains": "Rococo 平行链", + "Polkadot Parchains": "Polkadot 生态链", + "Kusama Parachains": "Kusama 生态链", + "Westend Parachains": "Westend 生态链", + "Rococo Parachains": "Rococo 生态链", "Create": "创建", "Project": "项目", @@ -66,7 +66,6 @@ "Status-Active": "运行中", "Status-Stop": "暂停", "Create Project": "新建项目", - "projectName": "项目名称", "PleaseProjectName": "请输入项目名称", "FormatError": "格式错误，正常格式：英文大小写字母，长度4-32", "onProject": "快来创建你的第一个", @@ -90,6 +89,7 @@ "Last30days": "最近30天", "Requests": "请求数据", "Settings": "设置", + "NotSet": "未设置", "Requests Today": "今日请求数", "WeekRequests": "周请求数统计", "WeekBandwidth": "周带宽统计", diff --git a/src/index.css b/src/index.css index 2c931b6..0c691aa 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,6 @@ body { margin: 0; - font-family: PingFang SC, WorkSans !important; + font-family: WorkSans !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -87,4 +87,4 @@ code { font-style: italic; font-weight: 700; src: url('./assets/font/WorkSans-BoldItalic.ttf'); -} \ No newline at end of file +} diff --git a/src/pages/Dashboard/index.css b/src/pages/Dashboard/index.css index 691666b..70377cb 100644 --- a/src/pages/Dashboard/index.css +++ b/src/pages/Dashboard/index.css @@ -2,9 +2,8 @@ background: #f6f6f6; position: absolute; top: 60px; - bottom: 0px; - padding: 20px; - width: 100%; + padding: 20px 20px 100px 20px; + display: flex; } .sider { width: 260px; @@ -19,19 +18,24 @@ display: flex; align-items: center; padding: 20px; - color: #3f3f3f; + font-weight: 500; + color: #7c7e7c; } .sidebar-title.active { background: #e8e8e8; + font-size: 15px; + font-weight: bold; + text-align: center; + color: #3f3f3f; } .sidebar-title:hover { color: #3f3f3f; } -.sidebar-title > img { - padding-right: 20px; +.sidebar-title > svg { + margin-right: 16px; } .sider .project-list { /* background-color: white; */ @@ -69,15 +73,21 @@ width: 8px; height: 8px; opacity: 1; - background: #DF3D4B; + background: #df3d4b; border-radius: 50%; } +.sider .project-item { + font-size: 12px; + font-weight: 500; + color: #7c7e7c; +} + .sider .project-item-active { color: #3f3f3f; background-color: #e8e8e8; border-radius: 22px; - font-weight: 700; + font-weight: bold; } .sider .project-item:hover { transform: scale(1.1); @@ -104,19 +114,21 @@ .sider .chain-type svg { margin-right: 16px; } -.sider .chain-type span { - height: 24px; - font-size: 16px; - color: #2a292b; - line-height: 24px; +.sider .chain-type .category-title { + font-size: 15px; flex: 1; } +.sider .chain-type .category-title.active { + color: #3f3f3f; + font-weight: bold; +} + .sider .chain-type img { transform: scaleY(-1); cursor: pointer; - height: 16px; - width: 16px; + height: 24px; + width: 24px; } .project-item-main { @@ -127,30 +139,9 @@ } .project-counts { color: #7c7e7c; - /* margin-left: 5px; - display: inline-flex; - width: 16px; - height: 16px; - border-radius: 8px; - justify-content: center; - align-items: center; - font-weight: 600; - color: #14B071; - background: white; */ -} -.project-counts-default { - /* color: white; - background: #14B071; */ -} - -.project-counts-active { - /* color: #14B071; - background: white; */ } .content { - position: relative; - z-index: 0; - margin-left: 280px; + flex: 1; min-width: 960px; } diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx index ad499a9..ef3d74d 100644 --- a/src/pages/Dashboard/index.tsx +++ b/src/pages/Dashboard/index.tsx @@ -13,7 +13,7 @@ import Summary from '../Summary' import { ChainName } from '../../core/enum' import { DashboardContext } from '../../core/context/dashboard-context' import DropdownSvg from '../../assets/dropdown.svg' -import DashboardSvg from '../../assets/dashboard.svg' +import DashboardIcon from '../../shared/components/svg/DashboardIcon' import { useTranslation } from 'react-i18next' import { Chain, @@ -22,7 +22,6 @@ import { subMenuMap, } from '../../core/types/classes/chain' - const CollapsedChains: FC<{ type: NetworkType chains: Chain[] @@ -31,7 +30,7 @@ const CollapsedChains: FC<{ const history = useHistory() const { t } = useTranslation() const { collapse, setCollapse } = useContext(DashboardContext) - + const choosedChain = useMemo(() => { const paths = location.pathname.split('/') let chainName: string = '' @@ -56,20 +55,26 @@ const CollapsedChains: FC<{ const renderIcon = () => { const Icons = subMenuMap[type].icon return - } + } return (
{renderIcon()} - {t(subMenuMap[type]['title'])} + -1 ? 'active' : '' + }`} + > + {t(subMenuMap[type]['title'])} + -1 ? 'scaleY(1)' : 'scaleY(-1)', + collapse.indexOf(type) > -1 ? 'scaleY(-1)' : 'scaleY(1)', }} />
@@ -121,15 +126,17 @@ const Dashboard: FC = (): ReactElement => { const renderMenu = () => { const types = Object.keys(subMenuMap) as NetworkType[] - + return (
{types.map((type) => { - return chains[type] ? : null + return chains[type] ? ( + + ) : null })}
) @@ -151,11 +158,13 @@ const Dashboard: FC = (): ReactElement => {
- + {t('dashboard')} {renderMenu()} diff --git a/src/pages/Footer/index.css b/src/pages/Footer/index.css index 689635b..e8052c6 100644 --- a/src/pages/Footer/index.css +++ b/src/pages/Footer/index.css @@ -7,11 +7,11 @@ line-height: 60px; font-size: 14px; font-weight: 400; - color: #BABABA; + color: #bababa; } .home-footer { - background: #EFEFEF; + background: #efefef; padding: 50px; padding-top: 80px; } @@ -33,7 +33,7 @@ height: 216px; left: 250px; right: 250px; - background-image: url("../../assets/footer-bg.svg"); + background-image: url('../../assets/footer-bg.svg'); } .site-class { width: 25%; @@ -42,7 +42,7 @@ height: 34px; font-size: 18px; font-weight: bold; - color: #2A292B; + color: #2a292b; line-height: 22px; padding-bottom: 12px; } @@ -54,10 +54,10 @@ margin: 8px 0px; } .site-list li a { - color: #2A292B; + color: #2a292b; } .site-list li a:hover { - color: #14B071; + color: #14b071; } .site-list li span { color: #949593; @@ -70,7 +70,7 @@ .contact h2 { font-size: 24px; font-weight: bold; - color: #2A292B; + color: #2a292b; line-height: 32px; height: 32px; margin-bottom: 20px; @@ -87,7 +87,7 @@ height: 32px; } .contact-list li svg:hover { - fill: #14B071; + fill: #14b071; } .contact-list li:last-child { margin-right: 0px; @@ -104,9 +104,7 @@ font-size: 22px; font-weight: 800; } -.logo-wrapper img { - width: 53px; -} + .logo-wrapper .title { padding-left: 12px; } @@ -118,10 +116,9 @@ .email a { height: 20px; font-size: 16px; - color: #14B071; + color: #14b071; line-height: 20px; } .email a:hover { - color: #14B071; - -} \ No newline at end of file + color: #14b071; +} diff --git a/src/pages/Footer/index.tsx b/src/pages/Footer/index.tsx index e048c5b..4fd0c97 100644 --- a/src/pages/Footer/index.tsx +++ b/src/pages/Footer/index.tsx @@ -1,64 +1,64 @@ -import { message, Input, Button, Popover } from "antd"; -import React, { useMemo, useState } from "react"; -import { useTranslation } from "react-i18next"; -import { apiSubscribe } from "../../core/data/api"; -import { DiscordSvg } from "../../shared/components/svg/Discord"; -import { ElementSvg } from "../../shared/components/svg/Element"; -import { GithubSvg } from "../../shared/components/svg/Github"; -import { MediumSvg } from "../../shared/components/svg/Medium"; -import { TelegramSvg } from "../../shared/components/svg/Telegram"; -import { TwitterSvg } from "../../shared/components/svg/Twitter"; -import { WechatSvg } from "../../shared/components/svg/Wechat"; -import { YoutubeSvg } from "../../shared/components/svg/Youtube"; -import Logo from "../../assets/logo.svg"; -import WechatQRCode from "../../assets/wechat-qrcode.jpg"; +import { message, Input, Button, Popover } from 'antd' +import React, { useMemo, useState } from 'react' +import { useTranslation } from 'react-i18next' +import { apiSubscribe } from '../../core/data/api' +import { DiscordSvg } from '../../shared/components/svg/Discord' +import { ElementSvg } from '../../shared/components/svg/Element' +import { GithubSvg } from '../../shared/components/svg/Github' +import { MediumSvg } from '../../shared/components/svg/Medium' +import { TelegramSvg } from '../../shared/components/svg/Telegram' +import { TwitterSvg } from '../../shared/components/svg/Twitter' +import { WechatSvg } from '../../shared/components/svg/Wechat' +import { YoutubeSvg } from '../../shared/components/svg/Youtube' +import Logo2 from '../../assets/logo2.svg' +import WechatQRCode from '../../assets/wechat-qrcode.jpg' -import "./index.css"; +import './index.css' -const green = "#14B071"; -const defaultGray = "#2A292B"; +const green = '#14B071' +const defaultGray = '#2A292B' enum IconLink { - Wechat = "Wechat", - Twitter = "Twitter", - Medium = "Medium", - Telegram = "Telegram", - Discord = "Discord", - Youtube = "Youtube", - Element = "Element", - Github = "Github", - Null = "Null", + Wechat = 'Wechat', + Twitter = 'Twitter', + Medium = 'Medium', + Telegram = 'Telegram', + Discord = 'Discord', + Youtube = 'Youtube', + Element = 'Element', + Github = 'Github', + Null = 'Null', } const Footer: React.FC = () => { - const [subLoading, setSubLoading] = useState(false); - const [email, setEmail] = useState(""); + const [subLoading, setSubLoading] = useState(false) + const [email, setEmail] = useState('') const [iconLinkHoverAt, setIconLinkHoverAt] = useState( IconLink.Null - ); - const { t } = useTranslation(); + ) + const { t } = useTranslation() const onSubscribe = () => { - setSubLoading(true); + setSubLoading(true) apiSubscribe({ email }) .then( - () => message.success(t("tip.Subscribe Successfully")), - () => message.error(t("tip.Subscribe Failed")) + () => message.success(t('tip.Subscribe Successfully')), + () => message.error(t('tip.Subscribe Failed')) ) - .finally(() => setSubLoading(false)); - }; + .finally(() => setSubLoading(false)) + } const disabled = useMemo(() => { // const reg = new RegExp('[^\\.\\s@:](?:[^\\s@:]*[^\\s@:\\.])?@[^\\.\\s@]+(?:\\.[^\\.\\s@]+)*'); - return !email; - }, [email]); + return !email + }, [email]) return ( - ); -}; + ) +} -export default Footer; +export default Footer diff --git a/src/pages/Header/index.css b/src/pages/Header/index.css index 20b054b..d4e5acb 100644 --- a/src/pages/Header/index.css +++ b/src/pages/Header/index.css @@ -9,13 +9,13 @@ background: white; box-shadow: 0px 1px rgb(0 0 0 / 10%); display: flex; - color: #3F3F3F; + color: #3f3f3f; font-size: 16px; } .head-main .title { font-weight: 800; - color: #3F3F3F; + color: #3f3f3f; padding-left: 10px; } @@ -32,16 +32,13 @@ .tab-title-bottom { height: 5px; border-radius: 3px; - background-color: #14B071; + background-color: #14b071; position: relative; top: 5px; } .head-tabs li { padding: 0px 20px; - font-size: 15px; - font-weight: 400; - color: #2A292B; line-height: 20px; } @@ -50,7 +47,10 @@ } .head-tabs li a { - color: #2A292B; + color: #3f3f3f; + font-size: 15px; + font-family: WorkSans; + font-weight: 500; } .head-tabs li a:hover { color: #686868; @@ -68,7 +68,7 @@ border-radius: 18px; text-align: center; line-height: 36px; - background: #14B071; + background: #14b071; cursor: pointer; user-select: none; } @@ -77,7 +77,7 @@ } .user-menu { - background: #FFFFFF; + background: #ffffff; box-shadow: 0px 8px 15px 0px rgba(149, 156, 182, 0.15); padding: 12px 16px; width: 159px; @@ -99,10 +99,10 @@ .user-menu .menu-split { margin: 16px 0px 12px 0px; height: 1px; - background-color: #E7E7E7; + background-color: #e7e7e7; } .user-menu-logout .sign-out { - color: #FF3043; + color: #ff3043; cursor: pointer; display: flex; align-items: center; diff --git a/src/pages/Header/index.tsx b/src/pages/Header/index.tsx index 4bdb33e..a5d7fdf 100644 --- a/src/pages/Header/index.tsx +++ b/src/pages/Header/index.tsx @@ -8,7 +8,6 @@ import { apiLogin, apiLogout } from '../../core/data/api' import { delCookie } from '../../shared/utils/index' import logo from '../../assets/logo.svg' import signOut from '../../assets/quit.svg' -import PatractLinkSVG from '../../assets/patract-link.svg' import { LoginModal } from '../../shared/components/LoginModal' import { useApi } from '../../core/hooks/useApi' import { Language } from '../../core/enum' @@ -50,7 +49,7 @@ const Header: React.FC = () => { break } } - + const UserMenu = (
  • @@ -126,7 +125,6 @@ const Header: React.FC = () => { className="logo" alt="" /> - Elara
      @@ -152,19 +150,9 @@ const Header: React.FC = () => { {t('Documentation')} -
    • - - Patract - - -
    • - lang + lang
      • {isLogged ? ( diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 6138482..d577d43 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -88,10 +88,10 @@ const Home: React.FC = (): ReactElement => { useEffect(() => { setLoaded(true) apiGetTotalStatics().then((data) => setTotal(data.request)) - const timer = setInterval(() => { - apiGetTotalStatics().then((data) => setTotal(data.request)) - }, 1200) - return () => clearInterval(timer) + // const timer = setInterval(() => { + // apiGetTotalStatics().then((data) => setTotal(data.request)) + // }, 1200) + // return () => clearInterval(timer) }, []) useEffect(() => { diff --git a/src/pages/Projects/SettingField/index.tsx b/src/pages/Projects/SettingField/index.tsx index 3afc8c5..6a7a410 100644 --- a/src/pages/Projects/SettingField/index.tsx +++ b/src/pages/Projects/SettingField/index.tsx @@ -9,6 +9,7 @@ export type IRefReturnType = { readonly value: string } interface ISettingField { label: string defaultValue: string + placeholder?: string tooltip?: string type?: 'number' handleConfirm: () => Promise @@ -18,7 +19,8 @@ const SettingField: React.ForwardRefRenderFunction = ( props, ref ) => { - const { label, defaultValue, tooltip, type, handleConfirm } = props + const { label, defaultValue, tooltip, type, placeholder, handleConfirm } = + props const [editable, setEditable] = useState(false) const [errorMsg, setErrorMsg] = useState('') const [value, setValue] = useState(defaultValue) @@ -53,9 +55,10 @@ const SettingField: React.ForwardRefRenderFunction = (
      = ( setValue(e.target.value) } }} + onBlur={() => { + setValue(defaultValue) + setEditable(false) + }} /> {errorMsg &&
      {errorMsg}
      }
      @@ -80,7 +87,10 @@ const SettingField: React.ForwardRefRenderFunction = ( src={ConfirmIcon} className="icon" alt="ok" - onClick={onHandleConfirm} + onMouseDown={(e) => { + e.stopPropagation() + onHandleConfirm() + }} /> )} {!editable && ( @@ -88,7 +98,8 @@ const SettingField: React.ForwardRefRenderFunction = ( src={EditIcon} className="icon" alt="edit" - onClick={() => { + onClick={(e) => { + e.stopPropagation() intRef.current?.focus() setEditable(true) }} diff --git a/src/pages/Projects/index.css b/src/pages/Projects/index.css index 856043b..7d6b91b 100644 --- a/src/pages/Projects/index.css +++ b/src/pages/Projects/index.css @@ -26,7 +26,6 @@ } .projects-tabs > .tab-item { - width: 140px; height: 52px; background: #e8e8e8; color: #3f3f3f; @@ -75,12 +74,16 @@ text-align: left; color: #3f3f3f; line-height: 16px; - padding-left: 18px; + padding-left: 20px; background: no-repeat center left; - background-size: 12px 12px; + background-size: 16px 16px; margin-right: 25px; } +.projects > .main .info-item:last-of-type { + margin-right: 0; +} + .projects > .main .info-item.created { background-image: url('../../assets/created-icon.svg'); } @@ -148,7 +151,7 @@ font-weight: 500; } -.request-section .stat-card > .title>span { +.request-section .stat-card > .title > span { font-size: 12px; text-align: left; color: #7c7e7c; @@ -201,8 +204,10 @@ padding: 0 4px; } -.ant-radio-wrapper:hover .ant-radio, .ant-radio:hover .ant-radio-inner, .ant-radio-input:focus + .ant-radio-inner { - border-color: #14b071; +.ant-radio-wrapper:hover .ant-radio, +.ant-radio:hover .ant-radio-inner, +.ant-radio-input:focus + .ant-radio-inner { + border-color: #14b071; } .request-section .api > .api-info { @@ -232,6 +237,7 @@ background-color: #f9f9f9; padding: 20px; margin-bottom: 20px; + border-radius: 8px; } .setting-item .title { @@ -247,6 +253,7 @@ .setting-item .field { margin-bottom: 10px; line-height: 40px; + height: 40px; display: flex; justify-content: space-between; } @@ -291,7 +298,6 @@ text-align: left; line-height: 16px; font-size: 12px; - } .setting-item .field > .form-item > input.editable:focus { @@ -299,7 +305,6 @@ cursor: text; } - .setting-item .field > .form-item > .icon-group { float: right; vertical-align: middle; @@ -321,15 +326,15 @@ .setting-item.setting-delete-btn { color: #df3d4b; font-size: 14px; - text-align: center; cursor: pointer; + font-weight: bold; } .icon { cursor: pointer; } -.elara-table { +.elara-table { padding-top: 12px; } @@ -341,8 +346,7 @@ height: 32px; } -.elara-table .ant-table-tbody > tr > td,.elara-table .ant-table-thead > tr > th { +.elara-table .ant-table-tbody > tr > td, +.elara-table .ant-table-thead > tr > th { border-bottom: 1px solid #efefef; } - - diff --git a/src/pages/Projects/index.tsx b/src/pages/Projects/index.tsx index fb27a6b..398166e 100644 --- a/src/pages/Projects/index.tsx +++ b/src/pages/Projects/index.tsx @@ -91,21 +91,23 @@ const Projects: FC<{}> = () => { const handleDelProject = () => { if (delBtnIsDisabled.current) return delBtnIsDisabled.current = true - apiDelProject({ id: projectInfo[tabNum].id }).then( - () => { - message.success(t('tip.delete')) - setTabNum(tabNum - 1 > 0 ? tabNum - 1 : 0) - updatePageData() - updateMenu() - updateUser() - // 更新页面数据 - }, - () => { - message.success(t('tip.fail')) - } - ).finally(() => { - delBtnIsDisabled.current = false - }) + apiDelProject({ id: projectInfo[tabNum].id }) + .then( + () => { + message.success(t('tip.delete')) + setTabNum(tabNum - 1 > 0 ? tabNum - 1 : 0) + updatePageData() + updateMenu() + updateUser() + // 更新页面数据 + }, + () => { + message.success(t('tip.fail')) + } + ) + .finally(() => { + delBtnIsDisabled.current = false + }) setDeleteModalVisible(false) } @@ -177,16 +179,16 @@ const Projects: FC<{}> = () => {
      - {projectInfo[tabNum].reqCnt} + {projectInfo[tabNum]?.reqCnt} - {formatBandwidth(projectInfo[tabNum].bw)} + {formatBandwidth(projectInfo[tabNum]?.bw)} - {projectInfo[tabNum].delay} ms + {projectInfo[tabNum]?.delay} ms - {projectInfo[tabNum].inReqCnt} + {projectInfo[tabNum]?.inReqCnt}
      @@ -203,20 +205,20 @@ const Projects: FC<{}> = () => {
      )} @@ -228,7 +230,7 @@ const Projects: FC<{}> = () => { ref={nameRef} label={t('Details.projectName')} tooltip={t('Details.maxChar')} - defaultValue={projectInfo[tabNum].name} + defaultValue={projectInfo[tabNum]?.name} handleConfirm={handleUpdateProjectName} />
      @@ -238,9 +240,10 @@ const Projects: FC<{}> = () => { type="number" ref={rateLimitRef} label={t('Details.rateLimitLabel')} + placeholder={t('Details.NotSet')} defaultValue={ - Number(projectInfo[tabNum].reqSecLimit) > 0 - ? projectInfo[tabNum].reqSecLimit + Number(projectInfo[tabNum]?.reqSecLimit) > 0 + ? projectInfo[tabNum]?.reqSecLimit : '' } handleConfirm={() => @@ -251,9 +254,10 @@ const Projects: FC<{}> = () => { type="number" ref={dailyRequsetRef} label={t('Details.dailyTotalReqLable')} + placeholder={t('Details.NotSet')} defaultValue={ - Number(projectInfo[tabNum].reqDayLimit) >= 0 - ? projectInfo[tabNum].reqDayLimit + Number(projectInfo[tabNum]?.reqDayLimit) >= 0 + ? projectInfo[tabNum]?.reqDayLimit : '' } handleConfirm={() => diff --git a/src/pages/Summary/index.css b/src/pages/Summary/index.css index 161a3cd..28464be 100644 --- a/src/pages/Summary/index.css +++ b/src/pages/Summary/index.css @@ -1,5 +1,6 @@ .summary { width: 100%; + min-height: 600px; background: #fff; padding: 20px; } @@ -13,7 +14,7 @@ display: flex; align-items: center; margin-top: 26px; - margin-bottom: 8px; + margin-bottom: 16px; } .total { @@ -29,7 +30,11 @@ color: #14b071; } -.summary-table table{ +.summary-table { + clear: none; +} + +.summary-table table { border-spacing: 0 10px; } @@ -37,31 +42,49 @@ vertical-align: middle; } -.ant-table-small .ant-table-thead > tr > th { - height: 48px; - line-height: 48px; +.summary-table .ant-table-small .ant-table-thead > tr > th { + height: 24px; + line-height: 16px; background: none !important; - font-weight: 700; + font-weight: bold; color: #3f3f3f; } -.ant-table-wrapper { - clear: unset; +.summary-table .ant-table-cell:first-of-type { + border-radius: 8px 0 0 8px; +} + +.summary-table .ant-table-cell:last-of-type { + border-radius: 0px 8px 8px 0; +} + +.summary-table.ant-table-wrapper { + clear: none; +} + +.summary-table.ant-table-wrapper::after { + clear: none; } -.ant-table-tbody { +.summary-table .ant-table-tbody { border-radius: 8px; } -.ant-table-tbody > tr > td, -.ant-table-thead > tr > th { +.summary-table .ant-table-tbody > tr > td, +.summary-table .ant-table-thead > tr > th { font-size: 12px; border-bottom: none; - background: #F9F9F9 !important; + background: #f9f9f9 !important; + padding: 0 20px !important; } -.ant-table-row { +.summary-table .ant-table-row { height: 56px; + cursor: pointer; +} + +.summary-table .ant-table-row.rowActive td { + background: #f6f6f6 !important; } .table-chain-item { @@ -77,7 +100,7 @@ margin-right: 4px; width: 16px; height: 16px; - vertical-align: middle; + vertical-align: middle; } .table-status-item { diff --git a/src/pages/Summary/index.tsx b/src/pages/Summary/index.tsx index 95ae07d..c9fad3f 100644 --- a/src/pages/Summary/index.tsx +++ b/src/pages/Summary/index.tsx @@ -13,6 +13,7 @@ import OverviewCard from '../../shared/components/OverviewCard' import CreateProjectBtn from '../../shared/components/CreateProjectBtn' import EmptySample from '../../shared/components/EmptySample' import { chainIconMap } from '../../core/types/classes/chain' +import MoreSvg from '../../assets/arrow_forward.svg' import './index.css' import { formatTime, formatBandwidth } from '../../shared/utils' @@ -25,6 +26,7 @@ const Summary: FC<{}> = () => { inReqCnt: 0, }) const [projectList, setProjectList] = useState([]) + const [rowActive, setRowActive] = useState(-1) const { t } = useTranslation() const history = useHistory() const { user } = useApi() @@ -73,7 +75,10 @@ const Summary: FC<{}> = () => { size="small" pagination={false} rowKey={(record) => record.id} - onRow={(project) => ({ + rowClassName={(record, index) => + index === rowActive ? 'rowActive' : '' + } + onRow={(project, index) => ({ onClick: () => history.push({ pathname: `/dashboard/projects/${project.chain}`, @@ -81,6 +86,12 @@ const Summary: FC<{}> = () => { pid: project.pid, }, }), + onMouseEnter: () => { + setRowActive(index ?? -1) + }, + onMouseLeave: () => { + setRowActive(-1) + }, })} columns={[ { @@ -142,6 +153,19 @@ const Summary: FC<{}> = () => {
      {data}
      ), }, + { + title: '', + dataIndex: 'operation', + width: 20, + render: (data, record, index) => + index === rowActive ? ( + more + ) : ( + + ), + }, ]} dataSource={projectList} > diff --git a/src/shared/components/BasicModalContainer/index.css b/src/shared/components/BasicModalContainer/index.css index eb2ccab..8fcba85 100644 --- a/src/shared/components/BasicModalContainer/index.css +++ b/src/shared/components/BasicModalContainer/index.css @@ -31,4 +31,9 @@ .basic-modal .ant-modal-body { padding: 0; -} \ No newline at end of file +} + +.basic-modal .ant-modal-footer { + border-top: 0; + padding: 30px 0 0; +} diff --git a/src/shared/components/CreateProjectBtn/Modal.tsx b/src/shared/components/CreateProjectBtn/Modal.tsx index eec41f5..3430fa9 100644 --- a/src/shared/components/CreateProjectBtn/Modal.tsx +++ b/src/shared/components/CreateProjectBtn/Modal.tsx @@ -123,6 +123,7 @@ const CreateProjectModal: FC<{ !isValidProjectName && !!projectName && 'error' }`} value={projectName} + placeholder={t('Details.maxChar')} onChange={(e) => _onInputChange(e.target.value)} onBlur={(e) => _checkProjectName(e.target.value)} /> diff --git a/src/shared/components/CreateProjectBtn/index.css b/src/shared/components/CreateProjectBtn/index.css index e46a930..895fc24 100644 --- a/src/shared/components/CreateProjectBtn/index.css +++ b/src/shared/components/CreateProjectBtn/index.css @@ -1,5 +1,4 @@ .add-button { - width: 175px; height: 32px; opacity: 1; border-radius: 16px; @@ -7,9 +6,10 @@ text-align: left; color: #ffffff; line-height: 16px; - font-size: 12px; - background: url("./images/add.svg") no-repeat 10px center #14b071; + font-size: 13px; + background: url('./images/add.svg') no-repeat 10px center #14b071; padding-left: 34px; + padding-right: 16px; background-size: 14px 14px; border: none; cursor: pointer; @@ -28,6 +28,11 @@ padding: 30px; } +.create-porject .ant-modal-footer { + padding: 14px 0 0; + border-top: none; +} + .ant-modal-close { top: 10px; right: 10px; @@ -99,7 +104,7 @@ } .modal-body-field > .name.error { - border-bottom: 2px solid #DF3D4B; + border-bottom: 2px solid #df3d4b; } .ant-select-item { @@ -126,7 +131,7 @@ .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { color: #14b071; - background: url("./images/selected.svg") no-repeat right 4px center; + background: url('./images/selected.svg') no-repeat right 4px center; } .ant-select-single:not(.ant-select-customize-input) .ant-select-selector { @@ -168,12 +173,6 @@ padding-left: 12px; } -.ant-modal-footer { - border-top: none; - padding-top: 14px; - padding-bottom: 0; -} - .ant-btn { background: #fff; border-radius: 12px; @@ -194,6 +193,11 @@ .ant-btn:hover { color: #119a63; } + +.ant-modal-footer .ant-btn + .ant-btn { + margin: 0; +} + .ant-btn + .ant-btn:hover { color: #fff; background: #119a63; diff --git a/src/shared/components/OverviewCard/index.css b/src/shared/components/OverviewCard/index.css index df4a82f..bbb59f2 100644 --- a/src/shared/components/OverviewCard/index.css +++ b/src/shared/components/OverviewCard/index.css @@ -1,11 +1,17 @@ .summary-card { - width: 215px; + width: 25%; height: 96px; opacity: 1; background: #f6f6f6; border-radius: 12px; padding: 0 20px; + margin-right: 25px; } + +.summary-card:last-of-type { + margin-right: 0; +} + .summary-card > span { display: block; padding: 20px 0 12px; diff --git a/src/shared/components/Tooltip/index.css b/src/shared/components/Tooltip/index.css new file mode 100644 index 0000000..4bdfe92 --- /dev/null +++ b/src/shared/components/Tooltip/index.css @@ -0,0 +1,14 @@ +.tooltip-body { + position: relative; + padding: 0 10px; + left: -10px; + height: 20px; + display: inline-block; + line-height: 20px; + cursor: pointer; +} + +.ant-tooltip-open.tooltip-body { + border-radius: 10px; + background: #efefef; +} diff --git a/src/shared/components/Tooltip/index.tsx b/src/shared/components/Tooltip/index.tsx index 4714254..4ad0a2a 100644 --- a/src/shared/components/Tooltip/index.tsx +++ b/src/shared/components/Tooltip/index.tsx @@ -1,6 +1,8 @@ import { Tooltip, TooltipProps } from 'antd' import { FC } from 'react' +import './index.css' + const StyledTooltip: FC<{ title: string } & TooltipProps> = ({ children, title, @@ -10,6 +12,7 @@ const StyledTooltip: FC<{ title: string } & TooltipProps> = ({ = ({ }} {...rest} > - {children} + {children} ) } diff --git a/src/shared/components/svg/DashboardIcon.tsx b/src/shared/components/svg/DashboardIcon.tsx new file mode 100644 index 0000000..3d9b398 --- /dev/null +++ b/src/shared/components/svg/DashboardIcon.tsx @@ -0,0 +1,44 @@ +const DashboardIcon = ({ collapse }: { collapse: boolean }) => ( + + dashboard 2 + + + + + + + + + + + + + + + + + + + + + + +) + +export default DashboardIcon diff --git a/src/shared/components/svg/Discord.tsx b/src/shared/components/svg/Discord.tsx index bc02671..3ecb666 100644 --- a/src/shared/components/svg/Discord.tsx +++ b/src/shared/components/svg/Discord.tsx @@ -1,21 +1,40 @@ -import React from 'react'; - export const DiscordSvg = ({ color }: { color: string }) => ( - + Discord - - - - - - - - - - - + + + + + + + + + + + -); \ No newline at end of file +) diff --git a/src/shared/components/svg/Element.tsx b/src/shared/components/svg/Element.tsx index 1f8ddf5..57f2801 100644 --- a/src/shared/components/svg/Element.tsx +++ b/src/shared/components/svg/Element.tsx @@ -1,16 +1,36 @@ export const ElementSvg = ({ color }: { color: string }) => ( - + Element - - - - - - - - + + + + + + + + -); +) diff --git a/src/shared/components/svg/Github.tsx b/src/shared/components/svg/Github.tsx index 33078a3..9a789c3 100644 --- a/src/shared/components/svg/Github.tsx +++ b/src/shared/components/svg/Github.tsx @@ -1,16 +1,37 @@ export const GithubSvg = ({ color }: { color: string }) => ( - + Github - - - - - - - - + + + + + + + + )