Refactor(css): Change all less to module mode

This commit is contained in:
2024-10-17 20:26:06 +08:00
parent 3d77dc793b
commit b7c3fb8524
111 changed files with 962 additions and 858 deletions

View File

@@ -636,7 +636,7 @@ const Group = () => {
return (
<>
<FitFullscreen data-component={'system-group'}>
<FitFullscreen>
<HideScrollbar
style={{ padding: 20 }}
isShowVerticalScrollbar

View File

@@ -1,4 +1,4 @@
import '@/assets/css/pages/system/settings.less'
import styles from '@/assets/css/pages/system/settings.module.less'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
@@ -11,10 +11,10 @@ import TwoFactor from '@/pages/System/Settings/TwoFactor'
const Settings = () => {
return (
<>
<FitFullscreen data-component={'system-settings'}>
<FitFullscreen className={styles.root}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={'root-content'}>
<FlexBox className={'root-col'}>
<FlexBox direction={'horizontal'} className={styles.rootContent}>
<FlexBox className={styles.rootCol}>
<Permission operationCode={['system:settings:query:base']}>
<Base />
</Permission>
@@ -22,7 +22,7 @@ const Settings = () => {
<SensitiveWord />
</Permission>
</FlexBox>
<FlexBox className={'root-col'}>
<FlexBox className={styles.rootCol}>
<Permission operationCode={['system:settings:query:mail']}>
<Mail />
</Permission>

View File

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

View File

@@ -1,5 +1,5 @@
import Icon from '@ant-design/icons'
import '@/assets/css/pages/system/tools/base.less'
import styles from '@/assets/css/pages/system/tools/base.module.less'
import {
COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
@@ -125,7 +125,7 @@ const Base = () => {
{
title: '名称',
render: (_, record) => (
<span className={hasEdited[record.id] ? 'has-edited' : undefined}>
<span className={hasEdited[record.id] ? styles.hasEdited : undefined}>
{record.name}
</span>
)
@@ -1077,9 +1077,9 @@ const Base = () => {
return (
<>
<FitFullscreen data-component={'system-tools-base'}>
<FitFullscreen className={styles.root}>
<HideScrollbar>
<FlexBox direction={'horizontal'} className={'root-content'}>
<FlexBox direction={'horizontal'} className={styles.rootContent}>
<Card>
<AntdTable
dataSource={baseData}
@@ -1110,7 +1110,10 @@ const Base = () => {
}
extraLibs={editorExtraLibs}
/>
<div className={'close-editor-btn'} onClick={handleOnCloseBtnClick}>
<div
className={styles.closeEditorBtn}
onClick={handleOnCloseBtnClick}
>
<Icon component={IconOxygenClose} />
</div>
</Card>

View File

@@ -285,7 +285,7 @@ const Category = () => {
return (
<>
<FitFullscreen data-component={'system-tools-category'}>
<FitFullscreen>
<HideScrollbar
style={{ padding: 20 }}
isShowVerticalScrollbar

View File

@@ -1,6 +1,6 @@
import Draggable from 'react-draggable'
import Icon from '@ant-design/icons'
import '@/assets/css/pages/system/tools/code.less'
import styles from '@/assets/css/pages/system/tools/code.module.less'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { checkDesktop } from '@/util/common'
import { navigateToExecute, navigateToRepository } from '@/util/navigation'
@@ -81,8 +81,8 @@ const Code = () => {
return (
<>
<FitFullscreen data-component={'system-tools-code'}>
<Card>
<FitFullscreen className={styles.root}>
<Card className={styles.rootBox}>
<Playground.CodeEditor
readonly
files={files}
@@ -93,7 +93,7 @@ const Code = () => {
</Card>
<Draggable bounds={'#root'}>
<div className={'draggable-content'}>
<div className={styles.draggableContent}>
<AntdFloatButton
type={'primary'}
icon={<Icon component={IconOxygenExecute} />}

View File

@@ -1,4 +1,4 @@
import '@/assets/css/pages/system/tools/execute.less'
import styles from '@/assets/css/pages/system/tools/execute.module.less'
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'
@@ -71,8 +71,8 @@ const Execute = () => {
}, [id])
return (
<FitFullscreen data-component={'system-tools-execute'}>
<Card>
<FitFullscreen className={styles.root}>
<Card className={styles.rootBox}>
<Playground.Output.Preview.Render iframeKey={`${id}`} compiledCode={compiledCode} />
</Card>
</FitFullscreen>

View File

@@ -1,5 +1,5 @@
import Icon from '@ant-design/icons'
import '@/assets/css/pages/system/tools/template.less'
import styles from '@/assets/css/pages/system/tools/template.module.less'
import {
COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
@@ -128,7 +128,7 @@ const Template = () => {
{
title: '名称',
render: (_, record) => (
<span className={hasEdited[record.id] ? 'has-edited' : undefined}>
<span className={hasEdited[record.id] ? styles.hasEdited : undefined}>
{record.name}
</span>
)
@@ -1020,9 +1020,9 @@ const Template = () => {
return (
<>
<FitFullscreen data-component={'system-tools-template'}>
<FitFullscreen className={styles.root}>
<HideScrollbar>
<FlexBox direction={'horizontal'} className={'root-content'}>
<FlexBox direction={'horizontal'} className={styles.rootContent}>
<Card>
<AntdTable
dataSource={templateData}
@@ -1054,7 +1054,10 @@ const Template = () => {
}
extraLibs={editorExtraLibs}
/>
<div className={'close-editor-btn'} onClick={handleOnCloseBtnClick}>
<div
className={styles.closeEditorBtn}
onClick={handleOnCloseBtnClick}
>
<Icon component={IconOxygenClose} />
</div>
</Card>

View File

@@ -1,4 +1,4 @@
import '@/assets/css/pages/system/index.less'
import styles from '@/assets/css/pages/system/index.module.less'
import HideScrollbar from '@/components/common/HideScrollbar'
import FitFullscreen from '@/components/common/FitFullscreen'
import FlexBox from '@/components/common/FlexBox'
@@ -8,9 +8,9 @@ import UrlCard from '@/components/common/UrlCard'
const System = () => {
return (
<>
<FitFullscreen data-component={'system'}>
<FitFullscreen className={styles.root}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={'root-content'}>
<FlexBox direction={'horizontal'} className={styles.rootContent}>
<Permission path={'/system/statistics'}>
<UrlCard icon={IconOxygenAnalysis} url={'statistics'}>