From 6451231859f449d38596908f4660762d99747d2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Allen=20Zhang=20=28=E5=BC=A0=E6=B6=9B=29?= Date: Thu, 18 Jul 2024 17:15:23 +0800 Subject: [PATCH] feat: update --- packages/canyon-platform/.gitignore | 2 - .../canyon-platform/src/auto-imports.d.ts | 75 +++++ .../components/GlobaScreenWidthLimitModal.tsx | 78 +++--- .../src/components/GlobalContext.tsx | 175 ++++++------ .../app/ProjectRecordDetailDrawer.tsx | 2 +- .../src/components/app/SummarySearchTable.tsx | 259 ------------------ .../src/components/app/project/nodata.tsx | 78 ------ .../src/pages/index/projects/[id]/index.tsx | 3 +- 8 files changed, 202 insertions(+), 470 deletions(-) create mode 100644 packages/canyon-platform/src/auto-imports.d.ts delete mode 100644 packages/canyon-platform/src/components/app/SummarySearchTable.tsx delete mode 100644 packages/canyon-platform/src/components/app/project/nodata.tsx diff --git a/packages/canyon-platform/.gitignore b/packages/canyon-platform/.gitignore index ed98f28c..ea02b6de 100755 --- a/packages/canyon-platform/.gitignore +++ b/packages/canyon-platform/.gitignore @@ -26,5 +26,3 @@ dist-ssr pnpm-lock.yaml src/helpers/backend/gen - -src/auto-imports.d.ts diff --git a/packages/canyon-platform/src/auto-imports.d.ts b/packages/canyon-platform/src/auto-imports.d.ts new file mode 100644 index 00000000..0c2eff3d --- /dev/null +++ b/packages/canyon-platform/src/auto-imports.d.ts @@ -0,0 +1,75 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// noinspection JSUnusedGlobalSymbols +// Generated by unplugin-auto-import +export {} +declare global { + const Alert: typeof import('antd')['Alert'] + const Breadcrumb: typeof import('antd')['Breadcrumb'] + const Button: typeof import('antd')['Button'] + const Card: typeof import('antd')['Card'] + const ColorPicker: typeof import('antd')['ColorPicker'] + const DatePicker: typeof import('antd')['DatePicker'] + const Divider: typeof import('antd')['Divider'] + const Drawer: typeof import('antd')['Drawer'] + const Flex: typeof import('antd')['Flex'] + const FloatButton: typeof import('antd')['FloatButton'] + const Form: typeof import('antd')['Form'] + const Input: typeof import('antd')['Input'] + const Link: typeof import('react-router-dom')['Link'] + const NavLink: typeof import('react-router-dom')['NavLink'] + const Navigate: typeof import('react-router-dom')['Navigate'] + const Outlet: typeof import('react-router-dom')['Outlet'] + const Popconfirm: typeof import('antd')['Popconfirm'] + const Popover: typeof import('antd')['Popover'] + const Progress: typeof import('antd')['Progress'] + const Radio: typeof import('antd')['Radio'] + const Result: typeof import('antd')['Result'] + const Route: typeof import('react-router-dom')['Route'] + const Routes: typeof import('react-router-dom')['Routes'] + const Select: typeof import('antd')['Select'] + const Space: typeof import('antd')['Space'] + const Spin: typeof import('antd')['Spin'] + const Switch: typeof import('antd')['Switch'] + const Table: typeof import('antd')['Table'] + const Tag: typeof import('antd')['Tag'] + const Tooltip: typeof import('antd')['Tooltip'] + const Tour: typeof import('antd')['Tour'] + const Typography: typeof import('antd')['Typography'] + const createRef: typeof import('react')['createRef'] + const forwardRef: typeof import('react')['forwardRef'] + const lazy: typeof import('react')['lazy'] + const memo: typeof import('react')['memo'] + const message: typeof import('antd')['message'] + const startTransition: typeof import('react')['startTransition'] + const theme: typeof import('antd')['theme'] + const useCallback: typeof import('react')['useCallback'] + const useContext: typeof import('react')['useContext'] + const useDebugValue: typeof import('react')['useDebugValue'] + const useDeferredValue: typeof import('react')['useDeferredValue'] + const useEffect: typeof import('react')['useEffect'] + const useHref: typeof import('react-router-dom')['useHref'] + const useId: typeof import('react')['useId'] + const useImperativeHandle: typeof import('react')['useImperativeHandle'] + const useInRouterContext: typeof import('react-router-dom')['useInRouterContext'] + const useInsertionEffect: typeof import('react')['useInsertionEffect'] + const useLayoutEffect: typeof import('react')['useLayoutEffect'] + const useLinkClickHandler: typeof import('react-router-dom')['useLinkClickHandler'] + const useLocation: typeof import('react-router-dom')['useLocation'] + const useMemo: typeof import('react')['useMemo'] + const useNavigate: typeof import('react-router-dom')['useNavigate'] + const useNavigationType: typeof import('react-router-dom')['useNavigationType'] + const useOutlet: typeof import('react-router-dom')['useOutlet'] + const useOutletContext: typeof import('react-router-dom')['useOutletContext'] + const useParams: typeof import('react-router-dom')['useParams'] + const useReducer: typeof import('react')['useReducer'] + const useRef: typeof import('react')['useRef'] + const useResolvedPath: typeof import('react-router-dom')['useResolvedPath'] + const useRoutes: typeof import('react-router-dom')['useRoutes'] + const useSearchParams: typeof import('react-router-dom')['useSearchParams'] + const useState: typeof import('react')['useState'] + const useSyncExternalStore: typeof import('react')['useSyncExternalStore'] + const useTransition: typeof import('react')['useTransition'] + const useTranslation: typeof import('react-i18next')['useTranslation'] +} diff --git a/packages/canyon-platform/src/components/GlobaScreenWidthLimitModal.tsx b/packages/canyon-platform/src/components/GlobaScreenWidthLimitModal.tsx index 56b89aa1..83804b57 100644 --- a/packages/canyon-platform/src/components/GlobaScreenWidthLimitModal.tsx +++ b/packages/canyon-platform/src/components/GlobaScreenWidthLimitModal.tsx @@ -1,51 +1,51 @@ const useWindowSize = () => { - const [windowSize, setWindowSize] = useState({ - width: window.innerWidth, - height: window.innerHeight, - }); + const [windowSize, setWindowSize] = useState({ + width: window.innerWidth, + height: window.innerHeight, + }); - useEffect(() => { - const handleResize = () => { - setWindowSize({ - width: window.innerWidth, - height: window.innerHeight, - }); - }; + useEffect(() => { + const handleResize = () => { + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + }; - window.addEventListener("resize", handleResize); + window.addEventListener('resize', handleResize); - return () => { - window.removeEventListener("resize", handleResize); - }; - }, []); + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); - return windowSize; + return windowSize; }; const GlobaScreenWidthLimitModal = () => { - const { width } = useWindowSize(); + const { width } = useWindowSize(); - useEffect(() => { - if (width < 1424) { - document.body.style.overflow = "hidden"; - } - // 在组件卸载时恢复滚动 - return () => { - document.body.style.overflow = "auto"; - }; - }, [width]); + useEffect(() => { + if (width < 1424) { + document.body.style.overflow = 'hidden'; + } + // 在组件卸载时恢复滚动 + return () => { + document.body.style.overflow = 'auto'; + }; + }, [width]); - return ( - <> - {false ? ( -
- -
- ) : null} - - ); + return ( + <> + {false ? ( +
+ +
+ ) : null} + + ); }; export default GlobaScreenWidthLimitModal; diff --git a/packages/canyon-platform/src/components/GlobalContext.tsx b/packages/canyon-platform/src/components/GlobalContext.tsx index af488f60..d95ab750 100644 --- a/packages/canyon-platform/src/components/GlobalContext.tsx +++ b/packages/canyon-platform/src/components/GlobalContext.tsx @@ -1,107 +1,102 @@ // src/context/GlobalContext.js -import { ConfigProvider } from "antd"; -import enUS from "antd/es/locale/en_US"; -import zhCN from "antd/es/locale/zh_CN"; -import { createContext, useReducer, useEffect } from "react"; +import { ConfigProvider } from 'antd'; +import enUS from 'antd/es/locale/en_US'; +import zhCN from 'antd/es/locale/zh_CN'; +import { createContext, useEffect, useReducer } from 'react'; const getSystemTheme = () => - window.matchMedia?.("(prefers-color-scheme: dark)").matches - ? "dark" - : "light"; -const getSystemLocale = () => - navigator.language.startsWith("zh") ? zhCN : enUS; + window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; +const getSystemLocale = () => (navigator.language.startsWith('zh') ? zhCN : enUS); const initialState = { - theme: getSystemTheme(), - locale: getSystemLocale(), + theme: getSystemTheme(), + locale: getSystemLocale(), }; const GlobalContext = createContext(); const globalReducer = (state, action) => { - switch (action.type) { - case "TOGGLE_THEME": - return { - ...state, - theme: state.theme === "light" ? "dark" : "light", - }; - case "SET_THEME": - return { - ...state, - theme: action.payload, - }; - case "SET_LOCALE": - return { - ...state, - locale: action.payload, - }; - default: - return state; - } + switch (action.type) { + case 'TOGGLE_THEME': + return { + ...state, + theme: state.theme === 'light' ? 'dark' : 'light', + }; + case 'SET_THEME': + return { + ...state, + theme: action.payload, + }; + case 'SET_LOCALE': + return { + ...state, + locale: action.payload, + }; + default: + return state; + } }; const { darkAlgorithm } = theme; const GlobalProvider = ({ children }) => { - const [state, dispatch] = useReducer(globalReducer, initialState); - - useEffect(() => { - // console.log(initialState) - - // if (initialState.locale ==='l'){ - - // } - - const darkModeMediaQuery = window.matchMedia( - "(prefers-color-scheme: dark)", - ); - - const handleSystemThemeChange = (e) => { - console.log("?????"); - - const newTheme = e.matches ? "dark" : "light"; - if (newTheme === "dark") { - document.documentElement.classList.add("dark"); - // document.body.style.backgroundColor = "black"; - } else { - document.documentElement.classList.remove("dark"); - // document.body.style.backgroundColor = "white"; - } - - dispatch({ type: "SET_THEME", payload: newTheme }); - }; - - handleSystemThemeChange({ matches: initialState.theme === "dark" }); - - darkModeMediaQuery.addEventListener("change", handleSystemThemeChange); - - const handleSystemLocaleChange = () => { - const newLocale = navigator.language.startsWith("zh") ? zhCN : enUS; - console.log(newLocale); - dispatch({ type: "SET_LOCALE", payload: newLocale }); - }; - window.addEventListener("languagechange", handleSystemLocaleChange); - - return () => { - darkModeMediaQuery.removeEventListener("change", handleSystemThemeChange); - window.removeEventListener("languagechange", handleSystemLocaleChange); - }; - }, []); - - return ( - - - {children} - - - ); + const [state, dispatch] = useReducer(globalReducer, initialState); + + useEffect(() => { + // console.log(initialState) + + // if (initialState.locale ==='l'){ + + // } + + const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + + const handleSystemThemeChange = (e) => { + console.log('?????'); + + const newTheme = e.matches ? 'dark' : 'light'; + if (newTheme === 'dark') { + document.documentElement.classList.add('dark'); + // document.body.style.backgroundColor = "black"; + } else { + document.documentElement.classList.remove('dark'); + // document.body.style.backgroundColor = "white"; + } + + dispatch({ type: 'SET_THEME', payload: newTheme }); + }; + + handleSystemThemeChange({ matches: initialState.theme === 'dark' }); + + darkModeMediaQuery.addEventListener('change', handleSystemThemeChange); + + const handleSystemLocaleChange = () => { + const newLocale = navigator.language.startsWith('zh') ? zhCN : enUS; + console.log(newLocale); + dispatch({ type: 'SET_LOCALE', payload: newLocale }); + }; + window.addEventListener('languagechange', handleSystemLocaleChange); + + return () => { + darkModeMediaQuery.removeEventListener('change', handleSystemThemeChange); + window.removeEventListener('languagechange', handleSystemLocaleChange); + }; + }, []); + + return ( + + + {children} + + + ); }; export { GlobalContext, GlobalProvider }; diff --git a/packages/canyon-platform/src/components/app/ProjectRecordDetailDrawer.tsx b/packages/canyon-platform/src/components/app/ProjectRecordDetailDrawer.tsx index f3646512..bb6205a0 100644 --- a/packages/canyon-platform/src/components/app/ProjectRecordDetailDrawer.tsx +++ b/packages/canyon-platform/src/components/app/ProjectRecordDetailDrawer.tsx @@ -6,7 +6,7 @@ import { Link, useParams } from 'react-router-dom'; import { GetProjectRecordDetailByShaDocument } from '../../helpers/backend/gen/graphql.ts'; const { Text } = Typography; -const ProjectRecordDetailDrawer = ({ open, onClose, sha }) => { +const ProjectRecordDetailDrawer = ({ open, onClose, sha }: any) => { const pam = useParams(); const { data, loading } = useQuery(GetProjectRecordDetailByShaDocument, { variables: { diff --git a/packages/canyon-platform/src/components/app/SummarySearchTable.tsx b/packages/canyon-platform/src/components/app/SummarySearchTable.tsx deleted file mode 100644 index b0cc790e..00000000 --- a/packages/canyon-platform/src/components/app/SummarySearchTable.tsx +++ /dev/null @@ -1,259 +0,0 @@ -import { SearchOutlined } from '@ant-design/icons'; -import { InputRef, Progress, TableColumnsType, TableColumnType } from 'antd'; -import type { FilterDropdownProps } from 'antd/es/table/interface'; -import React, { useRef, useState } from 'react'; -import Highlighter from 'react-highlight-words'; -import { useSearchParams } from 'react-router-dom'; -import { a } from 'vite/dist/node/types.d-aGj9QkWt'; - -interface DataType { - key: string; - name: string; - age: number; - address: string; -} - -function getColor(text: any) { - if (text > 80) { - return '#52C41A'; - } else if (text > 60) { - return '#1677ff'; - } else { - return '#F5222D'; - } -} - -type DataIndex = keyof DataType; - -// const data: DataType[] = [ -// { -// key: '1', -// name: 'John Brown', -// age: 32, -// address: 'New York No. 1 Lake Park', -// }, -// { -// key: '2', -// name: 'Joe Black', -// age: 42, -// address: 'London No. 1 Lake Park', -// }, -// { -// key: '3', -// name: 'Jim Green', -// age: 32, -// address: 'Sydney No. 1 Lake Park', -// }, -// { -// key: '4', -// name: 'Jim Red', -// age: 32, -// address: 'London No. 2 Lake Park', -// }, -// ]; - -const SummarySearchTable: React.FC = ({ data }) => { - const [sprm] = useSearchParams(); - const currentPathname = location.pathname; - // console.log(data,'data') - const [searchText, setSearchText] = useState(''); - const [searchedColumn, setSearchedColumn] = useState(''); - const searchInput = useRef(null); - - const handleSearch = ( - selectedKeys: string[], - confirm: FilterDropdownProps['confirm'], - dataIndex: DataIndex, - ) => { - confirm(); - setSearchText(selectedKeys[0]); - setSearchedColumn(dataIndex); - }; - - const handleReset = (clearFilters: () => void) => { - clearFilters(); - setSearchText(''); - }; - - const getColumnSearchProps = (dataIndex: DataIndex): TableColumnType => ({ - filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => ( -
e.stopPropagation()}> - setSelectedKeys(e.target.value ? [e.target.value] : [])} - onPressEnter={() => handleSearch(selectedKeys as string[], confirm, dataIndex)} - style={{ marginBottom: 8, display: 'block' }} - /> - - - - - - -
- ), - filterIcon: (filtered: boolean) => ( - - ), - onFilter: (value, record) => - record[dataIndex] - .toString() - .toLowerCase() - .includes((value as string).toLowerCase()), - onFilterDropdownOpenChange: (visible) => { - if (visible) { - setTimeout(() => searchInput.current?.select(), 100); - } - }, - render: (text) => { - // console.log(path) - - // 假设你想要导航到 '/path' 并且拼接参数 - // const path1 = `/path`; - const params = new URLSearchParams(); - if (sprm.get('report_id')) { - params.append('report_id', sprm.get('report_id') || ''); - } - if (sprm.get('mode')) { - params.append('mode', sprm.get('mode') || ''); - } - - // params.append('mode', sprm.get('mode')); - params.append('path', text); - - // 将参数拼接到路径中 - const pathWithParams = `${currentPathname}?${params.toString()}`; - - return ( - - {searchedColumn === dataIndex ? ( - - ) : ( - text - )} - - ); - }, - }); - const obj = { - s: { - uppercase: 'Statements', - lowercase: 'statements', - }, - b: { - uppercase: 'Branches', - lowercase: 'branches', - }, - f: { - uppercase: 'Functions', - lowercase: 'functions', - }, - l: { - uppercase: 'Lines', - lowercase: 'lines', - }, - nl: { - uppercase: 'NewLines', - lowercase: 'newlines', - }, - }; - - const columns: TableColumnsType = [ - { - title: 'Path', - dataIndex: 'path', - key: 'path', - // width: '00px', - // ellipsis: true, - ...getColumnSearchProps('path'), - }, - { - title: 'Statements', - dataIndex: ['statements', 'pct'], - key: 'jindu', - width: '30%', - render(text) { - return ; - }, - sorter: (a, b) => a.statements.pct - b.statements.pct, - defaultSortOrder: 'descend', - }, - ...['s', 'b', 'f', 'l', 'nl'].map((item) => { - const lowercase = obj[item]['lowercase']; - const uppercase = obj[item]['uppercase']; - return { - title: uppercase, - // dataIndex: 'age', - // key: 'age', - children: [ - { - title: 'P', - dataIndex: [lowercase, 'pct'], - key: lowercase + '.pct', - render(text) { - return
{text}
; - }, - // sorter: true, - }, - { - title: 'R', - key: lowercase + '.ratio', - render(text: string, record: any) { - return ( - //
- // {record[lowercase]['covered']}/{record[lowercase]['total']} - //
-
- {record[lowercase]['covered']}/{record[lowercase]['total']} -
- ); - }, - }, - ], - }; - }), - ]; - - return ; -}; - -export default SummarySearchTable; diff --git a/packages/canyon-platform/src/components/app/project/nodata.tsx b/packages/canyon-platform/src/components/app/project/nodata.tsx deleted file mode 100644 index 225fb18d..00000000 --- a/packages/canyon-platform/src/components/app/project/nodata.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { useQuery } from '@apollo/client'; -import dayjs from 'dayjs'; -import React, { useState } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { GetProjectsNoDataDocument } from '../../../helpers/backend/gen/graphql.ts'; -const { useToken } = theme; -const ProjectNoData: React.FC = () => { - const { token } = useToken(); - const { t } = useTranslation(); - const { data, loading } = useQuery(GetProjectsNoDataDocument, { - fetchPolicy: 'no-cache', - }); - const [isModalOpen, setIsModalOpen] = useState(false); - - const showModal = () => { - setIsModalOpen(true); - }; - - const handleOk = () => { - setIsModalOpen(false); - }; - - const handleCancel = () => { - setIsModalOpen(false); - }; - - return ( - <> - {data?.getProjectsNoData?.length && ( - - - - )} - - -
dayjs(text).format('MM-DD HH:mm'), - }, - ]} - /> - - - ); -}; - -export default ProjectNoData; diff --git a/packages/canyon-platform/src/pages/index/projects/[id]/index.tsx b/packages/canyon-platform/src/pages/index/projects/[id]/index.tsx index 9859a73a..0496a7d2 100755 --- a/packages/canyon-platform/src/pages/index/projects/[id]/index.tsx +++ b/packages/canyon-platform/src/pages/index/projects/[id]/index.tsx @@ -6,6 +6,7 @@ import Icon, { QuestionCircleOutlined, } from '@ant-design/icons'; import { useMutation, useQuery } from '@apollo/client'; +import { TourProps } from 'antd'; import { ColumnsType } from 'antd/es/table'; import dayjs from 'dayjs'; import ReactECharts from 'echarts-for-react'; @@ -172,7 +173,7 @@ const ProjectOverviewPage = () => { return ( <> {record.buildID !== '-' ? ( - +