FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Feat(Theme): Support dark mode

Browse Source
This commit is contained in:
Fat Snake
2024-10-23 10:17:45 +08:00
parent b7c3fb8524
commit dbce6b9cf2
180 changed files with 3478 additions and 3199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/System/Group.tsx
View File

@@ -1,9 +1,7 @@
import { ChangeEvent, Key, KeyboardEvent } from 'react'
import Icon from '@ant-design/icons'
import { useTheme } from 'antd-style'
import {
COLOR_ERROR_SECONDARY,
COLOR_FONT_SECONDARY,
COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
@@ -28,6 +26,7 @@ import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'
const Group = () => {
const theme = useTheme()
const [modal, contextHolder] = AntdModal.useModal()
const [form] = AntdForm.useForm<GroupAddEditParam>()
const formValues = AntdForm.useWatch([], form)
@@ -109,14 +108,14 @@ const Group = () => {
<Permission operationCode={['system:group:modify:status']}>
{value ? (
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnChangStatusBtnClick(record.id, false)}
>
禁用
</a>
) : (
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnChangStatusBtnClick(record.id, true)}
>
启用
@@ -125,7 +124,7 @@ const Group = () => {
</Permission>
<Permission operationCode={['system:group:modify:one']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnEditBtnClick(record)}
>
编辑
@@ -133,7 +132,7 @@ const Group = () => {
</Permission>
<Permission operationCode={['system:group:delete:one']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnDeleteBtnClick(record)}
>
删除
@@ -524,7 +523,7 @@ const Group = () => {
<span
style={{
fontSize: '0.9em',
color: COLOR_FONT_SECONDARY
color: theme.colorTextSecondary
}}
>
名称
@@ -533,7 +532,7 @@ const Group = () => {
suffix={
<>
{!isRegexLegal && (
<span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
<span style={{ color: theme.colorErrorText }}>非法表达式</span>
)}
<AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
<AntdTooltip title={'正则表达式'}>.*</AntdTooltip>

6
src/pages/System/Log.tsx
View File

@@ -1,6 +1,7 @@
import { ChangeEvent, KeyboardEvent } from 'react'
import { useTheme } from 'antd-style'
import dayjs from 'dayjs'
import { COLOR_FONT_SECONDARY, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { dayjsToUtc, utcToLocalTime } from '@/util/datetime'
import { r_sys_log_get } from '@/services/system'
import FitFullscreen from '@/components/common/FitFullscreen'
@@ -9,6 +10,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
const Log = () => {
const theme = useTheme()
const [logData, setLogData] = useState<SysLogGetVo[]>([])
const [isLoading, setIsLoading] = useState(false)
const [tableParams, setTableParams] = useState<TableParam>({
@@ -240,7 +242,7 @@ const Log = () => {
<span
style={{
fontSize: '0.9em',
color: COLOR_FONT_SECONDARY
color: theme.colorTextSecondary
}}
>
请求 Url

17
src/pages/System/Role.tsx
View File

@@ -1,9 +1,7 @@
import { ChangeEvent, Key, KeyboardEvent } from 'react'
import Icon from '@ant-design/icons'
import { useTheme } from 'antd-style'
import {
COLOR_ERROR_SECONDARY,
COLOR_FONT_SECONDARY,
COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
@@ -28,6 +26,7 @@ import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'
const Role = () => {
const theme = useTheme()
const [modal, contextHolder] = AntdModal.useModal()
const [form] = AntdForm.useForm<RoleAddEditParam>()
const formValues = AntdForm.useWatch([], form)
@@ -101,14 +100,14 @@ const Role = () => {
<Permission operationCode={['system:role:modify:status']}>
{value ? (
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnChangStatusBtnClick(record.id, false)}
>
禁用
</a>
) : (
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnChangStatusBtnClick(record.id, true)}
>
启用
@@ -117,7 +116,7 @@ const Role = () => {
</Permission>
<Permission operationCode={['system:role:modify:one']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnEditBtnClick(record)}
>
编辑
@@ -125,7 +124,7 @@ const Role = () => {
</Permission>
<Permission operationCode={['system:role:delete:one']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnDeleteBtnClick(record)}
>
删除
@@ -533,7 +532,7 @@ const Role = () => {
<span
style={{
fontSize: '0.9em',
color: COLOR_FONT_SECONDARY
color: theme.colorTextSecondary
}}
>
名称
@@ -542,7 +541,7 @@ const Role = () => {
suffix={
<>
{!isRegexLegal && (
<span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
<span style={{ color: theme.colorErrorText }}>非法表达式</span>
)}
<AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
<AntdTooltip title={'正则表达式'}>.*</AntdTooltip>

8
src/pages/System/Settings/index.tsx
View File

@@ -1,4 +1,4 @@
import styles from '@/assets/css/pages/system/settings.module.less'
import useStyles from '@/assets/css/pages/system/settings/index.style'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
@@ -9,11 +9,13 @@ import SensitiveWord from '@/pages/System/Settings/SensitiveWord'
import TwoFactor from '@/pages/System/Settings/TwoFactor'
const Settings = () => {
const { styles } = useStyles()
return (
<>
<FitFullscreen className={styles.root}>
<FitFullscreen>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={styles.rootContent}>
<FlexBox direction={'horizontal'} className={styles.root}>
<FlexBox className={styles.rootCol}>
<Permission operationCode={['system:settings:query:base']}>
<Base />

6
src/pages/System/Statistics/ActiveInfo.tsx
View File

@@ -1,5 +1,6 @@
import Icon from '@ant-design/icons'
import * as echarts from 'echarts/core'
import useStyles from '@/assets/css/pages/system/statistics/common.style'
import { getTimesBetweenTwoTimes } from '@/util/datetime'
import { r_sys_statistics_active } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
@@ -7,6 +8,7 @@ import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/S
import StatisticsCard from '@/components/system/StatisticsCard'
const ActiveInfo = () => {
const { styles } = useStyles()
const activeInfoDivRef = useRef<HTMLDivElement>(null)
const activeInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
const [isLoading, setIsLoading] = useState(false)
@@ -180,8 +182,8 @@ const ActiveInfo = () => {
</>
}
>
<FlexBox className={'card-content'} direction={'horizontal'}>
<div className={'big-chart'} ref={activeInfoDivRef} />
<FlexBox className={styles.content} direction={'horizontal'}>
<div className={styles.bigChart} ref={activeInfoDivRef} />
</FlexBox>
</StatisticsCard>
)

10
src/pages/System/Statistics/CPUInfo.tsx
View File

@@ -1,5 +1,6 @@
import * as echarts from 'echarts/core'
import { BarSeriesOption } from 'echarts/charts'
import useStyles from '@/assets/css/pages/system/statistics/common.style'
import { r_sys_statistics_cpu } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
import {
@@ -10,6 +11,7 @@ import {
import StatisticsCard from '@/components/system/StatisticsCard'
const CPUInfo = () => {
const { styles } = useStyles()
const keyDivRef = useRef<HTMLDivElement>(null)
const percentDivRef = useRef<HTMLDivElement>(null)
const cpuInfoDivRef = useRef<HTMLDivElement>(null)
@@ -167,10 +169,10 @@ const CPUInfo = () => {
</AntdSelect>
}
>
<FlexBox className={'card-content'} direction={'horizontal'}>
<FlexBox className={'key'} ref={keyDivRef} />
<FlexBox className={'value-chart'} ref={cpuInfoDivRef} />
<FlexBox className={'value-percent'} ref={percentDivRef} />
<FlexBox className={styles.content} direction={'horizontal'}>
<FlexBox className={styles.key} ref={keyDivRef} />
<FlexBox className={styles.chartValue} ref={cpuInfoDivRef} />
<FlexBox className={styles.percentValue} ref={percentDivRef} />
</FlexBox>
</StatisticsCard>
</>

8
src/pages/System/Statistics/HardwareInfo.tsx
View File

@@ -1,8 +1,10 @@
import useStyles from '@/assets/css/pages/system/statistics/common.style'
import { r_sys_statistics_hardware } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
import StatisticsCard from '@/components/system/StatisticsCard'
const HardwareInfo = () => {
const { styles } = useStyles()
const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
useEffect(() => {
@@ -22,8 +24,8 @@ const HardwareInfo = () => {
title={'硬件信息'}
loading={hardwareInfoData === undefined}
>
<FlexBox className={'card-content'} direction={'horizontal'}>
<FlexBox className={'key'}>
<FlexBox className={styles.content} direction={'horizontal'}>
<FlexBox className={styles.key}>
<div>CPU</div>
<div>CPU 架构</div>
<div>微架构</div>
@@ -34,7 +36,7 @@ const HardwareInfo = () => {
<div>内存</div>
<div>磁盘</div>
</FlexBox>
<FlexBox className={'value'}>
<FlexBox className={styles.value}>
<div title={hardwareInfoData?.cpu}>{hardwareInfoData?.cpu}</div>
<div title={hardwareInfoData?.arch}>{hardwareInfoData?.arch}</div>
<div title={hardwareInfoData?.microarchitecture}>

6
src/pages/System/Statistics/OnlineInfo.tsx
View File

@@ -1,5 +1,6 @@
import Icon from '@ant-design/icons'
import * as echarts from 'echarts/core'
import useStyles from '@/assets/css/pages/system/statistics/common.style'
import { getTimesBetweenTwoTimes } from '@/util/datetime'
import { r_sys_statistics_online } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
@@ -7,6 +8,7 @@ import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/S
import StatisticsCard from '@/components/system/StatisticsCard'
const OnlineInfo = () => {
const { styles } = useStyles()
const onlineInfoDivRef = useRef<HTMLDivElement>(null)
const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
const [isLoading, setIsLoading] = useState(false)
@@ -185,8 +187,8 @@ const OnlineInfo = () => {
</>
}
>
<FlexBox className={'card-content'} direction={'horizontal'}>
<div className={'big-chart'} ref={onlineInfoDivRef} />
<FlexBox className={styles.content} direction={'horizontal'}>
<div className={styles.bigChart} ref={onlineInfoDivRef} />
</FlexBox>
</StatisticsCard>
)

8
src/pages/System/Statistics/SoftwareInfo.tsx
View File

@@ -1,9 +1,11 @@
import useStyles from '@/assets/css/pages/system/statistics/common.style'
import { utcToLocalTime } from '@/util/datetime'
import { r_sys_statistics_software } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
import StatisticsCard from '@/components/system/StatisticsCard'
const SoftwareInfo = () => {
const { styles } = useStyles()
const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
useEffect(() => {
@@ -23,8 +25,8 @@ const SoftwareInfo = () => {
title={'软件信息'}
loading={softwareInfoData === undefined}
>
<FlexBox className={'card-content'} direction={'horizontal'}>
<FlexBox className={'key'}>
<FlexBox className={styles.content} direction={'horizontal'}>
<FlexBox className={styles.key}>
<div>操作系统</div>
<div>位数</div>
<div>Java</div>
@@ -35,7 +37,7 @@ const SoftwareInfo = () => {
<div>操作系统启动时间</div>
<div>后端服务器启动时间</div>
</FlexBox>
<FlexBox className={'value'}>
<FlexBox className={styles.value}>
<div title={softwareInfoData?.os}>{softwareInfoData?.os}</div>
<div title={softwareInfoData?.bitness.toString()}>
{softwareInfoData?.bitness}

10
src/pages/System/Statistics/StorageInfo.tsx
View File

@@ -1,5 +1,6 @@
import * as echarts from 'echarts/core'
import { BarSeriesOption } from 'echarts/charts'
import useStyles from '@/assets/css/pages/system/statistics/common.style'
import { formatByteSize } from '@/util/common'
import { r_sys_statistics_storage } from '@/services/system'
import FlexBox from '@/components/common/FlexBox'
@@ -11,6 +12,7 @@ import {
import StatisticsCard from '@/components/system/StatisticsCard'
const StorageInfo = () => {
const { styles } = useStyles()
const keyDivRef = useRef<HTMLDivElement>(null)
const percentDivRef = useRef<HTMLDivElement>(null)
const storageInfoDivRef = useRef<HTMLDivElement>(null)
@@ -186,10 +188,10 @@ const StorageInfo = () => {
</AntdSelect>
}
>
<FlexBox className={'card-content'} direction={'horizontal'}>
<FlexBox className={'key'} ref={keyDivRef} />
<FlexBox className={'value-chart'} ref={storageInfoDivRef} />
<FlexBox className={'value-percent'} ref={percentDivRef} />
<FlexBox className={styles.content} direction={'horizontal'}>
<FlexBox className={styles.key} ref={keyDivRef} />
<FlexBox className={styles.chartValue} ref={storageInfoDivRef} />
<FlexBox className={styles.percentValue} ref={percentDivRef} />
</FlexBox>
</StatisticsCard>
</>

8
src/pages/System/Statistics/index.tsx
View File

@@ -1,4 +1,4 @@
import styles from '@/assets/css/pages/system/statistics.module.less'
import useStyles from '@/assets/css/pages/system/statistics/index.style'
import FlexBox from '@/components/common/FlexBox'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
@@ -11,11 +11,13 @@ import CPUInfo from '@/pages/System/Statistics/CPUInfo'
import StorageInfo from '@/pages/System/Statistics/StorageInfo'
const Statistics = () => {
const { styles } = useStyles()
return (
<>
<FitFullscreen className={styles.root}>
<FitFullscreen>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={styles.rootContent}>
<FlexBox direction={'horizontal'} className={styles.root}>
<Permission operationCode={['system:statistics:query:usage']}>
<OnlineInfo />
<ActiveInfo />

29
src/pages/System/Tools/Base.tsx
View File

@@ -1,7 +1,6 @@
import Icon from '@ant-design/icons'
import styles from '@/assets/css/pages/system/tools/base.module.less'
import useStyles from '@/assets/css/pages/system/tools/base.style'
import {
COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
@@ -29,6 +28,7 @@ import {
TS_CONFIG_FILE_NAME
} from '@/components/Playground/files'
import compiler from '@/components/Playground/compiler'
import { AppContext } from '@/App'
import FitFullscreen from '@/components/common/FitFullscreen'
import FlexBox from '@/components/common/FlexBox'
import HideScrollbar from '@/components/common/HideScrollbar'
@@ -37,6 +37,8 @@ import Permission from '@/components/common/Permission'
import Playground from '@/components/Playground'
const Base = () => {
const { styles, theme } = useStyles()
const { isDarkMode } = useContext(AppContext)
const blocker = useBlocker(
({ currentLocation, nextLocation }) =>
currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
@@ -162,7 +164,7 @@ const Base = () => {
<Permission operationCode={['system:tool:add:base']}>
{' '}
(
<a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
<a style={{ color: theme.colorPrimary }} onClick={handleOnAddBtnClick}>
新增
</a>
)
@@ -178,7 +180,7 @@ const Base = () => {
{!Object.keys(hasEdited).length && (
<Permission operationCode={['system:tool:modify:base']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnCompileBtnClick(record)}
>
{record.compiled ? '重新编译' : '编译'}
@@ -188,7 +190,7 @@ const Base = () => {
{hasEdited[record.id] && (
<Permission operationCode={['system:tool:modify:base']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnSaveBtnClick(record)}
>
保存
@@ -198,7 +200,7 @@ const Base = () => {
{!Object.keys(hasEdited).length && (
<Permission operationCode={['system:tool:modify:base']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnEditBtnClick(record)}
>
编辑
@@ -207,7 +209,7 @@ const Base = () => {
)}
<Permission operationCode={['system:tool:delete:base']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnDeleteBtnClick(record)}
>
删除
@@ -739,7 +741,7 @@ const Base = () => {
<Permission operationCode={['system:tool:modify:base']}>
{' '}
(
<a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddFile}>
<a style={{ color: theme.colorPrimary }} onClick={handleOnAddFile}>
新增
</a>
)
@@ -760,7 +762,7 @@ const Base = () => {
>
<a
onClick={handleOnEditFile(record.name)}
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
>
{hasPermission('system:tool:modify:base') ? '编辑' : '查看'}
</a>
@@ -769,7 +771,7 @@ const Base = () => {
<Permission operationCode={['system:tool:modify:base']}>
<a
onClick={handleOnRenameFile(record.name)}
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
>
重命名
</a>
@@ -779,7 +781,7 @@ const Base = () => {
<Permission operationCode={['system:tool:delete:base']}>
<a
onClick={handleOnDeleteFile(record.name)}
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
>
删除
</a>
@@ -1077,9 +1079,9 @@ const Base = () => {
return (
<>
<FitFullscreen className={styles.root}>
<FitFullscreen>
<HideScrollbar>
<FlexBox direction={'horizontal'} className={styles.rootContent}>
<FlexBox direction={'horizontal'} className={styles.root}>
<Card>
<AntdTable
dataSource={baseData}
@@ -1097,6 +1099,7 @@ const Base = () => {
{editingFileName && (
<Card>
<Playground.CodeEditor
isDarkMode={isDarkMode}
files={editingFiles[editingBaseId]}
selectedFileName={editingFileName}
onSelectedFileChange={setEditingFileName}

9
src/pages/System/Tools/Category.tsx
View File

@@ -1,5 +1,5 @@
import { useTheme } from 'antd-style'
import {
COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
@@ -19,6 +19,7 @@ import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
const Category = () => {
const theme = useTheme()
const [modal, contextHolder] = AntdModal.useModal()
const [form] = AntdForm.useForm<ToolCategoryAddEditParam>()
const formValues = AntdForm.useWatch([], form)
@@ -72,7 +73,7 @@ const Category = () => {
<Permission operationCode={['system:tool:add:category']}>
{' '}
(
<a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
<a style={{ color: theme.colorPrimary }} onClick={handleOnAddBtnClick}>
新增
</a>
)
@@ -86,7 +87,7 @@ const Category = () => {
<AntdSpace size={'middle'}>
<Permission operationCode={['system:tool:modify:category']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnEditBtnClick(record)}
>
编辑
@@ -94,7 +95,7 @@ const Category = () => {
</Permission>
<Permission operationCode={['system:tool:delete:category']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnDeleteBtnClick(record)}
>
删除

6
src/pages/System/Tools/Code.tsx
View File

@@ -1,11 +1,12 @@
import Draggable from 'react-draggable'
import Icon from '@ant-design/icons'
import styles from '@/assets/css/pages/system/tools/code.module.less'
import useStyles from '@/assets/css/pages/system/tools/code.style'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { checkDesktop } from '@/util/common'
import { navigateToExecute, navigateToRepository } from '@/util/navigation'
import editorExtraLibs from '@/util/editorExtraLibs'
import { r_sys_tool_get_one } from '@/services/system'
import { AppContext } from '@/App'
import { IFiles } from '@/components/Playground/shared'
import { base64ToFiles } from '@/components/Playground/files'
import Playground from '@/components/Playground'
@@ -13,6 +14,8 @@ import FitFullscreen from '@/components/common/FitFullscreen'
import Card from '@/components/common/Card'
const Code = () => {
const { styles } = useStyles()
const { isDarkMode } = useContext(AppContext)
const navigate = useNavigate()
const [modal, contextHolder] = AntdModal.useModal()
const { id } = useParams()
@@ -84,6 +87,7 @@ const Code = () => {
<FitFullscreen className={styles.root}>
<Card className={styles.rootBox}>
<Playground.CodeEditor
isDarkMode={isDarkMode}
readonly
files={files}
selectedFileName={selectedFileName}

3
src/pages/System/Tools/Execute.tsx
View File

@@ -1,4 +1,4 @@
import styles from '@/assets/css/pages/system/tools/execute.module.less'
import useStyles from '@/assets/css/pages/system/tools/execute.style'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { navigateToTools } from '@/util/navigation'
import { r_sys_tool_get_one } from '@/services/system'
@@ -10,6 +10,7 @@ import { IImportMap } from '@/components/Playground/shared'
import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
const Execute = () => {
const { styles } = useStyles()
const navigate = useNavigate()
const { id } = useParams()
const [isLoading, setIsLoading] = useState(false)

27
src/pages/System/Tools/Template.tsx
View File

@@ -1,7 +1,6 @@
import Icon from '@ant-design/icons'
import styles from '@/assets/css/pages/system/tools/template.module.less'
import useStyles from '@/assets/css/pages/system/tools/template.style'
import {
COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
@@ -27,6 +26,7 @@ import {
getFilesSize,
TS_CONFIG_FILE_NAME
} from '@/components/Playground/files'
import { AppContext } from '@/App'
import FitFullscreen from '@/components/common/FitFullscreen'
import FlexBox from '@/components/common/FlexBox'
import HideScrollbar from '@/components/common/HideScrollbar'
@@ -35,6 +35,8 @@ import Permission from '@/components/common/Permission'
import Playground from '@/components/Playground'
const Template = () => {
const { styles, theme } = useStyles()
const { isDarkMode } = useContext(AppContext)
const blocker = useBlocker(
({ currentLocation, nextLocation }) =>
currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
@@ -181,7 +183,7 @@ const Template = () => {
<Permission operationCode={['system:tool:add:template']}>
{' '}
(
<a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
<a style={{ color: theme.colorPrimary }} onClick={handleOnAddBtnClick}>
新增
</a>
)
@@ -197,7 +199,7 @@ const Template = () => {
{hasEdited[record.id] && (
<Permission operationCode={['system:tool:modify:template']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnSaveBtnClick(record)}
>
保存
@@ -207,7 +209,7 @@ const Template = () => {
{!Object.keys(hasEdited).length && (
<Permission operationCode={['system:tool:modify:template']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnEditBtnClick(record)}
>
编辑
@@ -216,7 +218,7 @@ const Template = () => {
)}
<Permission operationCode={['system:tool:delete:template']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnDeleteBtnClick(record)}
>
删除
@@ -591,7 +593,7 @@ const Template = () => {
<Permission operationCode={['system:tool:modify:template']}>
{' '}
(
<a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddFile}>
<a style={{ color: theme.colorPrimary }} onClick={handleOnAddFile}>
新增
</a>
)
@@ -612,7 +614,7 @@ const Template = () => {
>
<a
onClick={handleOnEditFile(record.name)}
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
>
{hasPermission('system:tool:modify:template') ? '编辑' : '查看'}
</a>
@@ -621,7 +623,7 @@ const Template = () => {
<Permission operationCode={['system:tool:modify:template']}>
<a
onClick={handleOnRenameFile(record.name)}
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
>
重命名
</a>
@@ -631,7 +633,7 @@ const Template = () => {
<Permission operationCode={['system:tool:delete:template']}>
<a
onClick={handleOnDeleteFile(record.name)}
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
>
删除
</a>
@@ -1020,9 +1022,9 @@ const Template = () => {
return (
<>
<FitFullscreen className={styles.root}>
<FitFullscreen>
<HideScrollbar>
<FlexBox direction={'horizontal'} className={styles.rootContent}>
<FlexBox direction={'horizontal'} className={styles.root}>
<Card>
<AntdTable
dataSource={templateData}
@@ -1041,6 +1043,7 @@ const Template = () => {
{editingFileName && (
<Card>
<Playground.CodeEditor
isDarkMode={isDarkMode}
files={editingFiles[editingTemplateId]}
selectedFileName={editingFileName}
onSelectedFileChange={setEditingFileName}

31
src/pages/System/Tools/index.tsx
View File

@@ -1,5 +1,13 @@
import { ChangeEvent, KeyboardEvent } from 'react'
import Icon from '@ant-design/icons'
import { useTheme } from 'antd-style'
import {
DATABASE_DELETE_SUCCESS,
DATABASE_SELECT_SUCCESS,
DATABASE_UPDATE_SUCCESS,
TOOL_NOT_UNDER_REVIEW
} from '@/constants/common.constants'
import { navigateToCode } from '@/util/navigation'
import {
r_sys_tool_delete,
r_sys_tool_get,
@@ -8,16 +16,6 @@ import {
r_sys_tool_pass,
r_sys_tool_reject
} from '@/services/system'
import {
COLOR_BACKGROUND,
COLOR_ERROR_SECONDARY,
COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_SELECT_SUCCESS,
DATABASE_UPDATE_SUCCESS,
TOOL_NOT_UNDER_REVIEW
} from '@/constants/common.constants'
import { navigateToCode } from '@/util/navigation'
import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'
import FitFullscreen from '@/components/common/FitFullscreen'
@@ -28,6 +26,7 @@ import { base64ToFiles, IMPORT_MAP_FILE_NAME, strToBase64 } from '@/components/P
import Permission from '@/components/common/Permission'
const Tools = () => {
const theme = useTheme()
const navigate = useNavigate()
const [modal, contextHolder] = AntdModal.useModal()
const [tableParams, setTableParams] = useState<TableParam>({
@@ -62,7 +61,7 @@ const Tools = () => {
alt={'Avatar'}
/>
}
style={{ background: COLOR_BACKGROUND }}
style={{ background: theme.colorBgLayout }}
/>
),
width: '0',
@@ -132,7 +131,7 @@ const Tools = () => {
<>
<AntdSpace size={'middle'}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnViewBtnClick(record)}
>
查看
@@ -140,7 +139,7 @@ const Tools = () => {
<Permission operationCode={['system:tool:modify:tool']}>
{record.review === 'PROCESSING' && (
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnReviewBtnClick(record)}
>
审核
@@ -148,7 +147,7 @@ const Tools = () => {
)}
{record.review === 'PASS' && (
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnOffShelveBtnClick(record)}
>
下架
@@ -157,7 +156,7 @@ const Tools = () => {
</Permission>
<Permission operationCode={['system:tool:delete:tool']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnDeleteBtnClick(record)}
>
删除
@@ -543,7 +542,7 @@ const Tools = () => {
suffix={
<>
{!isRegexLegal && (
<span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
<span style={{ color: theme.colorErrorText }}>非法表达式</span>
)}
<AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
<AntdTooltip title={'正则表达式'}>.*</AntdTooltip>

19
src/pages/System/User.tsx
View File

@@ -1,10 +1,8 @@
import { ChangeEvent, Key, KeyboardEvent } from 'react'
import Icon from '@ant-design/icons'
import { useTheme } from 'antd-style'
import dayjs from 'dayjs'
import {
COLOR_BACKGROUND,
COLOR_ERROR_SECONDARY,
COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
@@ -36,6 +34,7 @@ interface ChangePasswordFields extends UserUpdatePasswordParam {
}
const User = () => {
const theme = useTheme()
const [modal, contextHolder] = AntdModal.useModal()
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -93,7 +92,7 @@ const User = () => {
alt={'Avatar'}
/>
}
style={{ background: COLOR_BACKGROUND }}
style={{ background: theme.colorBgLayout }}
/>
),
width: '0',
@@ -197,7 +196,7 @@ const User = () => {
<AntdSpace size={'middle'}>
<Permission operationCode={['system:user:modify:password']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnChangePasswordBtnClick(record)}
>
更改密码
@@ -205,7 +204,7 @@ const User = () => {
</Permission>
<Permission operationCode={['system:user:modify:one']}>
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnEditBtnClick(record)}
>
编辑
@@ -214,7 +213,7 @@ const User = () => {
<Permission operationCode={['system:user:delete:one']}>
{record.id !== '0' && (
<a
style={{ color: COLOR_PRODUCTION }}
style={{ color: theme.colorPrimary }}
onClick={handleOnDeleteBtnClick(record)}
>
删除
@@ -333,7 +332,7 @@ const User = () => {
title: (
<>
<Icon
style={{ color: COLOR_PRODUCTION, marginRight: 10 }}
style={{ color: theme.colorPrimary, marginRight: 10 }}
component={IconOxygenSetting}
/>
修改用户 {value.username} 的密码
@@ -787,7 +786,7 @@ const User = () => {
/>
}
size={100}
style={{ background: COLOR_BACKGROUND, cursor: 'pointer' }}
style={{ background: theme.colorBgLayout, cursor: 'pointer' }}
onClick={getAvatar}
/>
</AntdTooltip>
@@ -942,7 +941,7 @@ const User = () => {
suffix={
<>
{!isRegexLegal && (
<span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
<span style={{ color: theme.colorErrorText }}>非法表达式</span>
)}
<AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
<AntdTooltip title={'正则表达式'}>.*</AntdTooltip>

8
src/pages/System/index.tsx
View File

@@ -1,4 +1,4 @@
import styles from '@/assets/css/pages/system/index.module.less'
import useStyles from '@/assets/css/pages/system/index.style'
import HideScrollbar from '@/components/common/HideScrollbar'
import FitFullscreen from '@/components/common/FitFullscreen'
import FlexBox from '@/components/common/FlexBox'
@@ -6,11 +6,13 @@ import Permission from '@/components/common/Permission'
import UrlCard from '@/components/common/UrlCard'
const System = () => {
const { styles } = useStyles()
return (
<>
<FitFullscreen className={styles.root}>
<FitFullscreen>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={styles.rootContent}>
<FlexBox direction={'horizontal'} className={styles.root}>
<Permission path={'/system/statistics'}>
<UrlCard icon={IconOxygenAnalysis} url={'statistics'}>
系统概况