From e2269f543b8fb9483b3993aecde0b6d4d3c3586f Mon Sep 17 00:00:00 2001 From: Allen Zhang <37892968+zhangtao25@users.noreply.github.com> Date: Wed, 8 Nov 2023 16:42:50 +0800 Subject: [PATCH] feat: update --- .../canyon-platform/src/layout/MainBox.tsx | 17 +- packages/canyon-platform/src/main.tsx | 22 +-- .../canyon-platform/src/pages/index/index.tsx | 164 +++++++++--------- .../src/pages/project/[id]/commits/[sha].tsx | 24 ++- .../project/[id]/commits/helper/index.ts | 9 +- .../src/pages/project/[id]/overview.tsx | 28 ++- .../src/pages/project/index.tsx | 3 +- packages/canyon-platform/src/pages/test.tsx | 40 ----- packages/canyon-platform/src/pages/test1.jsx | 5 - .../src/pages/welcome/index.tsx | 75 ++++---- .../src/Report/components/Code.tsx | 17 +- .../src/Report/components/Line.tsx | 12 +- .../src/Report/components/Mask.tsx | 5 +- packages/canyon-report/src/helper.ts | 2 +- 14 files changed, 180 insertions(+), 243 deletions(-) delete mode 100644 packages/canyon-platform/src/pages/test.tsx delete mode 100644 packages/canyon-platform/src/pages/test1.jsx diff --git a/packages/canyon-platform/src/layout/MainBox.tsx b/packages/canyon-platform/src/layout/MainBox.tsx index 6f9ddd7e..7d47e820 100644 --- a/packages/canyon-platform/src/layout/MainBox.tsx +++ b/packages/canyon-platform/src/layout/MainBox.tsx @@ -1,15 +1,7 @@ -import Icon, { - DashboardOutlined, - DesktopOutlined, - FileOutlined, - PieChartOutlined, - ProjectOutlined, - TeamOutlined, - UserOutlined, -} from '@ant-design/icons'; +import Icon, { DashboardOutlined } from '@ant-design/icons'; import { useQuery } from '@apollo/client'; import type { MenuProps } from 'antd'; -import { Avatar, Breadcrumb, ConfigProvider, Dropdown, Layout, Menu, Space, theme } from 'antd'; +import { Avatar, Dropdown, Layout, Menu, Space } from 'antd'; import React, { useEffect, useMemo, useState } from 'react'; import { useLocation, useNavigate, useRoutes } from 'react-router-dom'; @@ -17,7 +9,8 @@ import routes from '~react-pages'; import { MeDocument } from '../helpers/backend/gen/graphql.ts'; import Sv from './Sv'; -const { Header, Content, Footer, Sider } = Layout; + +const { Content, Sider } = Layout; type MenuItem = Required['items'][number]; @@ -69,7 +62,7 @@ const App: React.FC = () => { }, [loc.pathname]); const dropdownItems = [getItem('登出', 'logout')]; - const dropdownClick = ({ key }) => { + const dropdownClick = ({ key }:any) => { console.log(key); localStorage.clear(); window.location.href = '/welcome'; diff --git a/packages/canyon-platform/src/main.tsx b/packages/canyon-platform/src/main.tsx index 943978cf..c1ff3544 100644 --- a/packages/canyon-platform/src/main.tsx +++ b/packages/canyon-platform/src/main.tsx @@ -1,13 +1,9 @@ -// import './test.js' import 'antd/dist/reset.css'; import './index.css'; -// import '@canyon/report/dist/index.css'; - import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client'; import { onError } from '@apollo/client/link/error'; import { message } from 'antd'; -// import React from 'react' import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; @@ -19,7 +15,11 @@ const errorLink = onError(({ graphQLErrors, networkError }) => { graphQLErrors.forEach(({ message: msg, locations, path }) => { console.error(`[GraphQL error]: msg: ${msg}, Location: ${locations}, Path: ${path}`); message.error(`[GraphQL error]: msg: ${msg}, Path: ${path}`); - if (msg === 'Unauthorized' && window.location.pathname !== '/welcome'&& window.location.pathname !== '/login') { + if ( + msg === 'Unauthorized' && + window.location.pathname !== '/welcome' && + window.location.pathname !== '/login' + ) { localStorage.clear(); window.location.href = '/welcome'; } @@ -46,18 +46,6 @@ const client = new ApolloClient({ cache: new InMemoryCache(), }); -console.log(`Bearer ` + (localStorage.getItem('token') || '')) - -// import App from './App.tsx'; -// const client = new ApolloClient({ -// uri: '/graphql', -// cache: new InMemoryCache(), -// headers: { -// Authorization: `Bearer ` + (localStorage.getItem('token') || ''), -// }, -// // credentials: 'include', -// }); - ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/packages/canyon-platform/src/pages/index/index.tsx b/packages/canyon-platform/src/pages/index/index.tsx index 377d3c02..669d9ea7 100644 --- a/packages/canyon-platform/src/pages/index/index.tsx +++ b/packages/canyon-platform/src/pages/index/index.tsx @@ -1,21 +1,21 @@ -import {Avatar, Button, Card, DatePicker, List, Space} from "antd"; -import dayjs from "dayjs"; -import EChartsReact from "echarts-for-react"; -// import {th} from 'echarts' +import { Avatar, Button, Card, DatePicker, List, Space } from 'antd'; +import dayjs from 'dayjs'; +import EChartsReact from 'echarts-for-react'; + const option = { xAxis: { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','1','2','3'] + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '1', '2', '3'], }, yAxis: { - type: 'value' + type: 'value', }, series: [ { - data: [120, 200, 150, 80, 70, 110, 130,112,333,222], - type: 'bar' - } - ] + data: [120, 200, 150, 80, 70, 110, 130, 112, 333, 222], + type: 'bar', + }, + ], }; const { RangePicker } = DatePicker; const data = [ @@ -33,77 +33,85 @@ const data = [ }, ]; const dateFormat = 'YYYY/MM/DD'; -const weekFormat = 'MM/DD'; -const monthFormat = 'YYYY/MM'; const Dashboard = () => { - return
-
-

Dashboard

- - - - - -
-
- { - [{ - name:"function", - desc:"This is function" - },{ - name:"function", - desc:"This is function" - },{ - name:"function", - desc:"This is function" - },{ - name:"function", - desc:"This is function" - }].map(({name,desc},index)=>{ - return -
{name}
-

100%

-
{desc}
- - }) - } -
- + return ( +
+
+

Dashboard

+ + -
+ + +
+
+ {[ + { + name: 'function', + desc: 'This is function', + }, + { + name: 'function', + desc: 'This is function', + }, + { + name: 'function', + desc: 'This is function', + }, + { + name: 'function', + desc: 'This is function', + }, + ].map(({ name, desc }, index) => { + return ( + +
{name}
+

100%

+
{desc}
+ + ); + })} +
+
+ +

Overview

+ + - -

Overview

- - - - - -

Recent Sales

-

You made 265 sales this month.

- ( - - } - title={{item.title}} - description="Ant Design, a design language for background applications, is refined by Ant UED Team" - /> - - )} - /> - + +

Recent Sales

+

You made 265 sales this month.

+ ( + + + } + title={{item.title}} + description='Ant Design, a design language for background applications, is refined by Ant UED Team' + /> + + )} + /> + +
+ ); +}; -
-} - -export default Dashboard +export default Dashboard; diff --git a/packages/canyon-platform/src/pages/project/[id]/commits/[sha].tsx b/packages/canyon-platform/src/pages/project/[id]/commits/[sha].tsx index 4ce7c200..adf0a4fd 100644 --- a/packages/canyon-platform/src/pages/project/[id]/commits/[sha].tsx +++ b/packages/canyon-platform/src/pages/project/[id]/commits/[sha].tsx @@ -18,21 +18,17 @@ const Sha = () => { const reportRef = useRef(null); useEffect(() => { if (reportRef.current && data) { - const report = init( - reportRef.current, - { - onSelectFile(path: string) { - return handleSelectFile({ - filepath: path, - reportID: sprm.get('report_id') || '', - commitSha: prm.sha || '', - projectID: prm.id || '', - }); - }, + const report = init(reportRef.current, { + onSelectFile(path: string) { + return handleSelectFile({ + filepath: path, + reportID: sprm.get('report_id') || '', + commitSha: prm.sha || '', + projectID: prm.id || '', + }); }, - [], - ); - const summary = data.getCoverageSummaryMap.reduce((acc, cur) => { + }); + const summary = data.getCoverageSummaryMap.reduce((acc: any, cur) => { acc[cur.path] = cur; return acc; }, {}); diff --git a/packages/canyon-platform/src/pages/project/[id]/commits/helper/index.ts b/packages/canyon-platform/src/pages/project/[id]/commits/helper/index.ts index c6714442..817a6522 100644 --- a/packages/canyon-platform/src/pages/project/[id]/commits/helper/index.ts +++ b/packages/canyon-platform/src/pages/project/[id]/commits/helper/index.ts @@ -9,7 +9,14 @@ function getDecode(str: string) { .join(''), ); } -export function handleSelectFile({ projectID, commitSha, filepath, reportID }) { + +interface HandleSelectFile { + projectID: string; + commitSha: string; + filepath: string; + reportID: string; +} +export function handleSelectFile({ projectID, commitSha, filepath, reportID }: HandleSelectFile) { const fileContentRequest = axios.post( `/graphql`, { diff --git a/packages/canyon-platform/src/pages/project/[id]/overview.tsx b/packages/canyon-platform/src/pages/project/[id]/overview.tsx index 83d07446..e79feadb 100644 --- a/packages/canyon-platform/src/pages/project/[id]/overview.tsx +++ b/packages/canyon-platform/src/pages/project/[id]/overview.tsx @@ -1,22 +1,16 @@ import { InfoCircleOutlined } from '@ant-design/icons'; import { useQuery } from '@apollo/client'; -import {Divider, Space, Table, Tooltip} from 'antd'; -import { ColumnsType } from 'antd/es/table'; +import { Divider, Space, Table, Tooltip } from 'antd'; +// import { ColumnsType } from 'antd/es/table'; import dayjs from 'dayjs'; import ReactECharts from 'echarts-for-react'; import { useParams } from 'react-router'; -// const { Text, Link } = Typography; +import { useNavigate } from 'react-router-dom'; + import { GetProjectOverviewDocument } from '../../../helpers/backend/gen/graphql.ts'; -import {useNavigate} from "react-router-dom"; -function calculateSct(sct: { covered: number; total: number }) { - if (sct.total === 0) { - return '0%'; - } - return `${Math.floor((sct.covered / sct.total) * 100)}%`; -} const Xx = () => { const pam = useParams(); - const nav =useNavigate() + const nav = useNavigate(); const { data } = useQuery(GetProjectOverviewDocument, { variables: { projectID: pam['id'] as string, @@ -59,11 +53,11 @@ const Xx = () => { ], }; - const columns: ColumnsType[] = [ + const columns = [ { title: 'Commit Sha', dataIndex: 'commitSha', - render(_: any, tableListItem) { + render(_: any) { return ( { @@ -96,14 +90,14 @@ const Xx = () => { ), dataIndex: 'commitSha', - render(_: any, tableListItem) { + render(_: any) { return {_.slice(0, 7)}; }, }, { title: 'Message', dataIndex: 'message', - render(_: any, tableListItem) { + render(_: any) { return (
{dayjs(_).format('YYYY-MM-DD HH:mm')}; }, }, { title: 'operation', - render(_, tableListItem) { + render(_: any) { return (
{ const { t } = useTranslation(); diff --git a/packages/canyon-platform/src/pages/test.tsx b/packages/canyon-platform/src/pages/test.tsx deleted file mode 100644 index ff37abed..00000000 --- a/packages/canyon-platform/src/pages/test.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import dayjs from 'dayjs'; -import customParseFormat from 'dayjs/plugin/customParseFormat'; -import type { DatePickerProps } from 'antd'; -import { DatePicker, Space } from 'antd'; - -dayjs.extend(customParseFormat); - -const { RangePicker } = DatePicker; - -const dateFormat = 'YYYY/MM/DD'; -const weekFormat = 'MM/DD'; -const monthFormat = 'YYYY/MM'; - -/** Manually entering any of the following formats will perform date parsing */ -const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY']; - -const customFormat: DatePickerProps['format'] = (value) => - `custom format: ${value.format(dateFormat)}`; - -const customWeekStartEndFormat: DatePickerProps['format'] = (value) => - `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value) - .endOf('week') - .format(weekFormat)}`; - -const App: React.FC = () => ( - - - - - - - - -); - -export default App; diff --git a/packages/canyon-platform/src/pages/test1.jsx b/packages/canyon-platform/src/pages/test1.jsx deleted file mode 100644 index 107d0517..00000000 --- a/packages/canyon-platform/src/pages/test1.jsx +++ /dev/null @@ -1,5 +0,0 @@ -const Test1 = () => { - return
Test1
-} - -export default Test1 diff --git a/packages/canyon-platform/src/pages/welcome/index.tsx b/packages/canyon-platform/src/pages/welcome/index.tsx index d65cd5a0..a3b39fe1 100644 --- a/packages/canyon-platform/src/pages/welcome/index.tsx +++ b/packages/canyon-platform/src/pages/welcome/index.tsx @@ -1,45 +1,44 @@ -import {Button} from "antd"; -// import Link from "next/link"; -// import {useEffect} from "react"; -// import {usePathname, useRouter} from 'next/navigation' - +import { Button } from 'antd'; const data = { - GITLAB_URL: 'http://git.dev.sh.ctripcorp.com', - GITLAB_CLIENT_ID: '7fa15c07f39bf9a394e61a7fec497d2ff4b51545bcc84272fbbc7bac82dc4999', - FRONT_END_URL: window.location.origin -} - - + GITLAB_URL: 'http://git.dev.sh.ctripcorp.com', + GITLAB_CLIENT_ID: '7fa15c07f39bf9a394e61a7fec497d2ff4b51545bcc84272fbbc7bac82dc4999', + FRONT_END_URL: window.location.origin, +}; const Welcome = () => { - - // const s = useRouter() - // useEffect(()=>{ - // console.log(s) - // },[]) - - // const pathname = usePathname() - // return

Current pathname: {pathname}

- - return
- -
- -} + ); +}; -export default Welcome +export default Welcome; diff --git a/packages/canyon-report/src/Report/components/Code.tsx b/packages/canyon-report/src/Report/components/Code.tsx index 2168defe..49532e29 100644 --- a/packages/canyon-report/src/Report/components/Code.tsx +++ b/packages/canyon-report/src/Report/components/Code.tsx @@ -2,18 +2,17 @@ import hljs from 'highlight.js'; import { FC } from 'preact/compat'; import { useEffect, useState } from 'preact/hooks'; -import { CoreFn } from '../../helper.ts'; -// import { CoreFn } from './helpers.ts'; -import { Line } from './Line.tsx'; +import { coreFn } from '../../helper.ts'; +import Line from './Line.tsx'; import Mask from './Mask.tsx'; const Code: FC<{ fileCoverage: any; fileContent: string; fileCodeChange: number[]; -}> = ({ fileCoverage, fileContent,fileCodeChange }) => { +}> = ({ fileCoverage, fileContent, fileCodeChange }) => { const [renderMask, setRenderMask] = useState(false); - const { maxWidth, rows, times, lines } = CoreFn(fileCoverage, fileContent); + const { lines } = coreFn(fileCoverage, fileContent); useEffect(() => { if (fileContent) { setTimeout(() => { @@ -27,13 +26,7 @@ const Code: FC<{
{renderMask && }
- + 
              = ({ lines, newlines }) => {
   //   0 粉色，1 绿色，-1没有颜色
 
   function getBgColor(num: number) {
@@ -45,4 +51,6 @@ export function Line({ lines, newlines }) {
       })}
); -} +}; + +export default Line diff --git a/packages/canyon-report/src/Report/components/Mask.tsx b/packages/canyon-report/src/Report/components/Mask.tsx index dde845f3..f385829f 100644 --- a/packages/canyon-report/src/Report/components/Mask.tsx +++ b/packages/canyon-report/src/Report/components/Mask.tsx @@ -1,8 +1,4 @@ -// import { css } from '@emotion/react'; import { FC, useEffect, useRef } from 'preact/compat'; - -// import { JavaScriptCoverageReportProps } from '@/components/JavaScriptCoverageReport/types.ts'; - interface MaskProps { code: string; coverage: any; @@ -75,6 +71,7 @@ const Mask: FC = ({ code, coverage }) => { canvas.height = ch * window.devicePixelRatio; canvas.width = cw * window.devicePixelRatio; + // @ts-ignore ctx.scale(window.devicePixelRatio, window.devicePixelRatio); // 核心逻辑 diff --git a/packages/canyon-report/src/helper.ts b/packages/canyon-report/src/helper.ts index 1a9ae0b6..33fb6c0d 100644 --- a/packages/canyon-report/src/helper.ts +++ b/packages/canyon-report/src/helper.ts @@ -18,7 +18,7 @@ export const classForPercent = ( return 'medium'; }; -export function CoreFn( +export function coreFn( fileCoverage: any, fileDetail: string, ): {