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

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>