Skip to content

Commit b63bd93

Browse files
hans000hans000
committed
Revert "feat: optimize setting UI"
This reverts commit 7eb0029.
1 parent fbdeea8 commit b63bd93

File tree

7 files changed

+94
-207
lines changed

7 files changed

+94
-207
lines changed

‎src/App.less

+1-5
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,6 @@
105105
cursor: pointer;
106106
}
107107
}
108-
&--right {
109-
width: auto;
110-
right: 0;
111-
}
112108
}
113109
&__upload button {
114110
border-radius: 0;
@@ -172,4 +168,4 @@ html::-webkit-scrollbar, body::-webkit-scrollbar, .app::-webkit-scrollbar {
172168
/*定义滑块*/
173169
::-webkit-scrollbar-thumb {
174170
background-color: #c8c8c8;
175-
}
171+
}

‎src/App.tsx

+49-56
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import './App.less'
66
import { Badge, Checkbox, BadgeProps, Button, Dropdown, Input, message, Modal, Spin, Table, Tag, Tooltip, Upload, Switch, Space, Divider, Select, Popover, Segmented, InputNumber } from 'antd'
77
import React, { useEffect, useRef, useState } from 'react'
8-
import { TagOutlined, ControlOutlined, CodeOutlined, DeleteOutlined, PlusOutlined, SearchOutlined, VerticalAlignBottomOutlined, UploadOutlined, SyncOutlined, RollbackOutlined, BugOutlined, FilterOutlined, FormOutlined, SettingOutlined, AppstoreOutlined, FieldTimeOutlined, StopOutlined, DashboardOutlined, GithubFilled } from '@ant-design/icons'
8+
import { TagOutlined, ControlOutlined, CodeOutlined, DeleteOutlined, PlusOutlined, SearchOutlined, VerticalAlignBottomOutlined, UploadOutlined, SyncOutlined, RollbackOutlined, BugOutlined, FilterOutlined, FormOutlined, SettingOutlined, AppstoreOutlined, FieldTimeOutlined, StopOutlined, DashboardOutlined } from '@ant-design/icons'
99
import { ColumnsType } from 'antd/lib/table'
1010
import { pathMatch, randID, renderSize } from './tools'
1111
import { getMethodColor } from './tools/mappings'
@@ -20,7 +20,7 @@ import Quota, { getPercent } from './components/Quota'
2020
import { runCode } from './tools/runCode'
2121
import { loader } from "@monaco-editor/react";
2222
import { sendRequestLog } from './tools/sendRequest'
23-
import { ActiveGroupId, HiddenFieldsFieldKey, ActiveIdFieldKey, RulesFieldKey, SelectedRowFieldKeys, UpdateMsgKey, WatchFilterKey, ConfigInfoFieldKey, PopupMsgKey, OpenEditorKey, PathFieldKey } from './tools/constants'
23+
import { ActiveGroupId, HiddenFieldsFieldKey, ActiveIdFieldKey, RulesFieldKey, SelectedRowFieldKeys, UpdateMsgKey, WatchFilterKey, ConfigInfoFieldKey, PopupMsgKey } from './tools/constants'
2424
import useTranslate from './hooks/useTranslate'
2525
import getStorage from './tools/getStorage'
2626
import { ConfigProvider, theme } from 'antd'
@@ -76,10 +76,6 @@ export interface ConfigInfoType {
7676
bootLog: boolean
7777
allFrames: boolean
7878
dark: boolean
79-
proxy?: Record<string, string | {
80-
target: string
81-
rewrite?: string
82-
}>
8379
}
8480

8581
const defaultConfigInfo: ConfigInfoType = {
@@ -100,13 +96,11 @@ export default function App() {
10096
const [activeGroupId, setActiveGroupId] = useStorage(ActiveGroupId, 'default')
10197
const [watchFilter, setWatchFilter] = useStorage(WatchFilterKey, '')
10298
const [rules, setRules] = useStorage<MatchRule[]>(RulesFieldKey, [])
103-
const [openEditor, setOpenEditor] = useStorage(OpenEditorKey, false)
10499
const [selectedRowKeys, setSelectedRowKeys] = useStorage(SelectedRowFieldKeys, [])
105100
const [loading, setLoading] = useState(false)
106101
const [activeId, setActiveId] = useStorage<string>(ActiveIdFieldKey, null)
107102
const [invalid, setInvalid] = useState(false)
108103
const [visible, setVisible] = useState(false)
109-
const [fileName, setFileName] = useStorage<FileType>(PathFieldKey, 'config')
110104
const [hiddenFields, setHiddenFields] = useStorage<string[]>(HiddenFieldsFieldKey, [])
111105
const [percent, setPercent] = useState(0)
112106
const originRef = useRef('')
@@ -127,8 +121,6 @@ export default function App() {
127121
const map = {
128122
[ConfigInfoFieldKey]: setConfigInfo,
129123
[RulesFieldKey]: setRules,
130-
[PathFieldKey]: setFileName,
131-
[OpenEditorKey]: setOpenEditor,
132124
[SelectedRowFieldKeys]: setSelectedRowKeys,
133125
[ActiveIdFieldKey]: setActiveId,
134126
[HiddenFieldsFieldKey]: setHiddenFields,
@@ -164,8 +156,6 @@ export default function App() {
164156
}
165157

166158
const update = (value: Record<FileType, string>, index: number) => {
167-
const configInfo = JSON.parse(value.setting)
168-
setConfigInfo(configInfo)
169159
setRules(rule => {
170160
const result = [...rule]
171161
const config = JSON.parse(value.config)
@@ -193,7 +183,9 @@ export default function App() {
193183
[selectedRowKeys, rules, activeGroupId]
194184
)
195185

196-
const editable = React.useMemo(() => !!activeId || openEditor, [activeId, openEditor])
186+
const editable = React.useMemo(() => !!activeId, [activeId])
187+
188+
const disabled = React.useMemo(() => editable, [editable])
197189

198190
const workspaces = React.useMemo(
199191
() => {
@@ -323,11 +315,7 @@ export default function App() {
323315
}}>
324316
<Tooltip placement='topLeft' title={record.description}>
325317
<a onClick={() => {
326-
setOpenEditor(true)
327318
setActiveId(record.id)
328-
if (fileName === 'setting') {
329-
setFileName('config')
330-
}
331319
}}>{shortText}</a>
332320
</Tooltip>
333321
</Dropdown>
@@ -422,19 +410,11 @@ export default function App() {
422410
},
423411
]
424412

425-
const formatResult = (record: MatchRule | undefined) => {
426-
if (!record) {
427-
return {
428-
code: '',
429-
config: '',
430-
setting: JSON.stringify(configInfo, null, 4),
431-
}
432-
}
413+
const formatResult = (record: MatchRule) => {
433414
const data = Object.fromEntries(fields.filter(field => !hiddenFields.includes(field)).map(k => [k, record[k]]))
434415
return {
435416
code: record.code,
436417
config: JSON.stringify(data, null, 4),
437-
setting: JSON.stringify(configInfo, null, 4),
438418
}
439419
}
440420

@@ -511,7 +491,7 @@ export default function App() {
511491
<div className={'app__top'}>
512492
<Button.Group style={{ padding: '0 4px' }}>
513493
<Tooltip title={t('action_add')}>
514-
<Button disabled={editable} icon={<PlusOutlined />} onClick={() => {
494+
<Button disabled={disabled} icon={<PlusOutlined />} onClick={() => {
515495
setRules(rule => {
516496
const result = [...rule, {
517497
id: randID(),
@@ -526,10 +506,10 @@ export default function App() {
526506
}]
527507
return result
528508
})
529-
}} />
509+
}}></Button>
530510
</Tooltip>
531511
<Tooltip title={getActionText(t('menu_remove'))}>
532-
<Button disabled={editable} icon={<DeleteOutlined />} onDoubleClick={() => {
512+
<Button disabled={disabled} icon={<DeleteOutlined />} onDoubleClick={() => {
533513
setRules([])
534514
}} onClick={() => {
535515
if (!selectedRowKeys.length) {
@@ -538,18 +518,18 @@ export default function App() {
538518
}
539519
setRules(rules.filter(item => !selectedRowKeys.find(id => id === item.id)))
540520
setSelectedRowKeys([])
541-
}} />
521+
}}></Button>
542522
</Tooltip>
543523
<Tooltip title={getActionText(t('action_export'))}>
544-
<Button disabled={editable} icon={<VerticalAlignBottomOutlined />} onClick={() => {
524+
<Button disabled={disabled} icon={<VerticalAlignBottomOutlined />} onClick={() => {
545525
const data = selectedRowKeys.length
546526
? rules.filter(item => !selectedRowKeys.find(id => id === item.id))
547527
: rules
548528
download(`${selectedRowKeys.length ? activeGroupId : 'all'}.json`, JSON.stringify(data, null, 2))
549-
}} />
529+
}}></Button>
550530
</Tooltip>
551531
<Tooltip title={t('action_import')}>
552-
<Upload className='app__upload' disabled={editable} showUploadList={false} beforeUpload={(file) => {
532+
<Upload className='app__upload' disabled={disabled} showUploadList={false} beforeUpload={(file) => {
553533
setLoading(true)
554534
if (! ['application/json', 'text/plain'].includes(file.type)) {
555535
message.error(t('import_modal_err'))
@@ -607,20 +587,20 @@ export default function App() {
607587
}
608588
return false
609589
}}>
610-
<Button disabled={editable} icon={<UploadOutlined />}></Button>
590+
<Button disabled={disabled} icon={<UploadOutlined />}></Button>
611591
</Upload>
612592
</Tooltip>
613593
<Tooltip title={t('action_refresh')}>
614-
<Button disabled={editable} icon={<SyncOutlined />} onClick={() => {
594+
<Button disabled={disabled} icon={<SyncOutlined />} onClick={() => {
615595
setSelectedRowKeys([])
616596
setRules(rules => rules.map(rule => ({ ...rule, count: 0 })))
617597
setActiveId(null)
618-
}} />
598+
}}></Button>
619599
</Tooltip>
620600
<Tooltip title={t('action_mode')}>
621-
<Button disabled={editable} type={configInfo.faked ? 'primary' : 'default'} icon={<BugOutlined />} onClick={() => {
601+
<Button disabled={disabled} type={configInfo.faked ? 'primary' : 'default'} icon={<BugOutlined />} onClick={() => {
622602
setConfigInfo(info => ({ ...info, faked: !info.faked }))
623-
}} />
603+
}}></Button>
624604
</Tooltip>
625605
{
626606
editable && (
@@ -631,8 +611,7 @@ export default function App() {
631611
return
632612
}
633613
setActiveId(null)
634-
setOpenEditor(false)
635-
}} />
614+
}}></Button>
636615
</Tooltip>
637616
)
638617
}
@@ -692,10 +671,35 @@ export default function App() {
692671
</div>
693672
<div className="app__bar">
694673
<div className='app__bar-item'>
695-
<SettingOutlined onClick={() => {
696-
setOpenEditor(true)
697-
setFileName('setting')
698-
}}/>
674+
<Popover trigger={['click']} placement='topLeft' showArrow={false} content={(
675+
<>
676+
<Divider orientation='left' plain>
677+
<Button size='small' type='primary' onClick={() => {
678+
setConfigInfo(info => ({ ...info, fakedLog: true, bootLog: true, dark: false, allFrames: false }))
679+
}}>{t('action_reset')}</Button>
680+
</Divider>
681+
<Space size={'large'}>
682+
<div style={{ display: 'flex' }}>
683+
<span style={{ marginRight: 8 }}>{t('action_all_frames')}</span>
684+
<Switch checked={configInfo.allFrames} onClick={() => setConfigInfo(info => ({ ...info, allFrames: !info.allFrames }))}></Switch>
685+
</div>
686+
<div style={{ display: 'flex' }}>
687+
<span style={{ marginRight: 8 }}>{t('action_theme')}</span>
688+
<Switch checked={configInfo.dark} onClick={() => setConfigInfo(info => ({ ...info, dark: !info.dark }))}></Switch>
689+
</div>
690+
<div style={{ display: 'flex' }}>
691+
<span style={{ marginRight: 8 }}>{t('action_boot_log')}</span>
692+
<Switch checked={configInfo.bootLog} onClick={() => setConfigInfo(info => ({ ...info, bootLog: !info.bootLog }))}></Switch>
693+
</div>
694+
<div style={{ display: 'flex' }}>
695+
<span style={{ marginRight: 8 }}>{t('action_faked_log')}</span>
696+
<Switch checked={configInfo.fakedLog} onClick={() => setConfigInfo(info => ({ ...info, fakedLog: !info.fakedLog }))}></Switch>
697+
</div>
698+
</Space>
699+
</>
700+
)}>
701+
<SettingOutlined />
702+
</Popover>
699703
</div>
700704
<div className='app__bar-item'>
701705
<Tooltip title={t('select_workspace')}>
@@ -803,26 +807,15 @@ export default function App() {
803807
</Tooltip>
804808
</div>
805809
</div>
806-
<div className='app__bar app__bar--right'>
807-
<div className='app__bar-item'>
808-
<GithubFilled onClick={() => {
809-
window.open('https://github.com/hans000/easy-interceptor', '_blank')
810-
}} />
811-
</div>
812-
</div>
813810
{
814-
openEditor && (
811+
editable && (
815812
<div className='app__editor'>
816813
<MainEditor
817-
fileName={fileName}
818814
isDark={configInfo.dark}
819815
ref={editorRef}
820816
index={activeIndex}
821817
rule={rules[activeIndex]}
822818
value={formatResult(rules[activeIndex])}
823-
onFileNameChange={fileName => {
824-
setFileName(fileName)
825-
}}
826819
onChange={(value, invalid) => {
827820
update(value, activeIndex)
828821
setInvalid(invalid)

‎src/components/MainEditor/config.ts

+3-20
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { MutableRefObject } from 'react';
77
import { MatchRule } from '../../App';
88
import { runCode } from '../../tools/runCode';
99
import { sendRequestLog } from '../../tools/sendRequest';
10-
import { ConfigSchema, SettingSchema, removeRequiredField } from './validator';
10+
import { ConfigSchema, removeRequiredField } from './validator';
1111

1212
interface CustomEditorContext {
1313
editor: any
@@ -27,7 +27,7 @@ interface EditorProps {
2727
onMount?: (context: CustomEditorContext) => void
2828
}
2929

30-
export type FileType = 'config' | 'code' | 'setting'
30+
export type FileType = 'config' | 'code'
3131

3232
function createAction(id: string, label: string, handle: Function) {
3333
return {
@@ -62,7 +62,7 @@ const config: EditorProps[] = [
6262
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
6363
schemas: [
6464
{
65-
uri: 'ei://config.json',
65+
uri: 'http://json-schema.org/',
6666
fileMatch: [editor.getModel().uri.toString()],
6767
schema: removeRequiredField(ConfigSchema)
6868
}
@@ -132,23 +132,6 @@ interface MatchingRule extends ResponseRule {
132132
editor.addAction(createRequestAction(context))
133133
}
134134
},
135-
{
136-
name: 'setting',
137-
language: 'json',
138-
value: 'setting',
139-
schema: SettingSchema,
140-
onMount: ({ editor, monaco }) => {
141-
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
142-
schemas: [
143-
{
144-
uri: 'ei://setting.json',
145-
fileMatch: [editor.getModel().uri.toString()],
146-
schema: SettingSchema
147-
}
148-
]
149-
})
150-
}
151-
}
152135
]
153136

154137
export default config

0 commit comments

Comments
 (0)