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

Style:1; Optimize:1; Feat:1 #42

Merged
FatttSnake merged 3 commits from FatttSnake into dev 2024-03-18 17:33:15 +08:00
Conversation 0 Commits 3 Files Changed 50 +592 -181
50 changed files with 592 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.env.development
View File

@@ -1,3 +1,4 @@
VITE_API_URL=http://localhost:8080
VITE_PLATFORM=WEB
VITE_API_URL=${DEV_API_URL}
VITE_API_TOKEN_URL=${VITE_API_URL}/token
VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}

1
.env.production
View File

@@ -1,3 +1,4 @@
VITE_PLATFORM=WEB
VITE_API_URL=${PRODUCT_API_URL}
VITE_API_TOKEN_URL=${VITE_API_URL}/token
VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}

1
.env.testing
View File

@@ -1,4 +1,5 @@
NODE_ENV=development
VITE_PLATFORM=WEB
VITE_API_URL=${TEST_API_URL}
VITE_API_TOKEN_URL=${VITE_API_URL}/token
VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}

1
build/resolvers/antd.ts
View File

@@ -417,6 +417,7 @@ export const AntDesignResolver = (options: AntDesignResolverOptions = {}): Compo
sideEffects: getSideEffects(importName, options)
}
}
return undefined
}
}
}

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "oxygen-ui",
"version": "1.0.0",
"version": "1.0.0-SNAPSHOT",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "oxygen-ui",
"version": "1.0.0",
"version": "1.0.0-SNAPSHOT",
"dependencies": {
"@ant-design/icons": "^5.2.6",
"@marsidev/react-turnstile": "^0.5.3",

3
package.json
View File

@@ -6,8 +6,9 @@
"scripts": {
"dev": "vite",
"dev-host": "vite --host 0.0.0.0",
"build": "vite build",
"build": "vite build && npm run typecheck",
"build-test": "vite build --mode testing",
"typecheck": "tsc",
"clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"format": "prettier --write src/",

2
src/assets/css/pages/system/index.scss
View File

@@ -2,7 +2,7 @@
[data-component=system] {
.root-content {
padding: 30px;
padding: 20px;
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;

2
src/assets/css/pages/system/settings.scss
View File

@@ -2,7 +2,7 @@
[data-component=system-settings] {
.root-content {
padding: 30px;
padding: 20px;
gap: 20px;
.root-col {

2
src/assets/css/pages/system/statistics.scss
View File

@@ -2,7 +2,7 @@
[data-component=system-statistics] {
.root-content {
padding: 30px;
padding: 20px;
gap: 20px;
flex-wrap: wrap;
justify-content: center;

4
src/assets/css/pages/system/tools/base.scss
View File

@@ -2,7 +2,7 @@
[data-component=system-tools-base] {
.root-content {
padding: 30px;
padding: 20px;
gap: 10px;
height: 100%;
width: 100%;
@@ -19,7 +19,7 @@
> *:nth-child(2) {
position: sticky;
top: 20px;
height: calc(100vh - 60px);
height: calc(100vh - 40px);
}
.close-editor-btn {

2
src/assets/css/pages/system/tools/code.scss
View File

@@ -1,5 +1,5 @@
[data-component=system-tools-code] {
padding: 30px;
padding: 20px;
.card-box {
width: 100%;

2
src/assets/css/pages/system/tools/execute.scss
View File

@@ -1,5 +1,5 @@
[data-component=system-tools-execute] {
padding: 30px;
padding: 20px;
.card-box {
width: 100%;

12
src/assets/css/pages/tools/create.scss
View File

@@ -43,6 +43,18 @@
}
}
}
.preview {
display: flex;
justify-content: center;
align-items: center;
.no-preview {
font-weight: bolder;
color: constants.$font-secondary-color;
font-size: 1.4em;
}
}
}
}
}

9
src/assets/css/pages/tools/edit.scss
View File

@@ -1,4 +1,10 @@
[data-component=tools-edit] {
padding: 20px;
.card-box {
height: 100%;
width: 100%;
.root-content {
width: 100%;
height: 100%;
@@ -13,10 +19,11 @@
height: 100%;
}
}
}
.draggable-content {
position: fixed;
inset-inline-end: 32px;
inset-inline-end: 48px;
inset-block-end: 48px;
> * {

4
src/assets/css/pages/tools/index.scss
View File

@@ -3,7 +3,7 @@
[data-component=tools] {
.root-content {
padding: 30px;
padding: 20px;
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
@@ -28,7 +28,7 @@
position: absolute;
top: 10px;
left: 10px;
width: 8em;
width: 9em;
}
.upgrade-bt {

2
src/assets/css/pages/tools/source.scss
View File

@@ -1,5 +1,5 @@
[data-component=tools-source] {
padding: 30px;
padding: 20px;
.card-box {
width: 100%;

2
src/assets/css/pages/tools/store.scss
View File

@@ -21,7 +21,7 @@
}
.root-content {
padding: 30px;
padding: 20px;
gap: 20px;
flex-wrap: wrap;
justify-content: center;

6
src/assets/css/pages/tools/user.scss
View File

@@ -3,9 +3,9 @@
[data-component=tools-store-user] .root-content {
padding: {
top: 80px;
left: 30px;
right: 30px;
bottom: 30px;
left: 20px;
right: 20px;
bottom: 20px;
};
.root-box {

2
src/assets/css/pages/tools/view.scss
View File

@@ -1,5 +1,5 @@
[data-component=tools-view] {
padding: 30px;
padding: 20px;
.card-box {
height: 100%;

6
src/assets/css/pages/user/index.scss
View File

@@ -3,9 +3,9 @@
[data-component=user] .root-content {
padding: {
top: 80px;
left: 30px;
right: 30px;
bottom: 30px;
left: 20px;
right: 20px;
bottom: 20px;
};
.card-box {

1
src/constants/urls.constants.ts
View File

@@ -30,6 +30,7 @@ export const URL_SYS_STATISTICS_ACTIVE = `${URL_SYS_STATISTICS}/active`
export const URL_SYS_TOOL = '/system/tool'
export const URL_SYS_TOOL_CATEGORY = `${URL_SYS_TOOL}/category`
export const URL_SYS_TOOL_BASE = `${URL_SYS_TOOL}/base`
export const URL_SYS_TOOL_BASE_LIST = `${URL_SYS_TOOL_BASE}/list`
export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
export const URL_TOOL = '/tool'

10
src/global.d.ts vendored
View File

@@ -1,7 +1,10 @@
/// <reference types="vite/client" />
/// <reference types="./ant-design" />
type Platform = 'WEB' | 'DESKTOP' | 'ANDROID'
interface ImportMetaEnv {
readonly VITE_PLATFORM: Platform
readonly VITE_API_URL: string
readonly VITE_API_TOKEN_URL: string
readonly VITE_TURNSTILE_SITE_KEY: string
@@ -545,6 +548,7 @@ interface ToolBaseVo {
name: string
source: ToolDataVo
dist: ToolDataVo
platform: Platform
compiled: boolean
createTime: string
updateTime: string
@@ -555,6 +559,7 @@ interface ToolBaseAddEditParam {
name?: string
source?: string
dist?: string
platform?: Platform
}
interface ToolTemplateVo {
@@ -562,6 +567,7 @@ interface ToolTemplateVo {
name: string
baseId: string
source: ToolDataVo
platform: Platform
entryPoint: string
enable: boolean
createTime: string
@@ -574,6 +580,7 @@ interface ToolTemplateAddEditParam {
name?: string
baseId?: string
source?: string
platform?: Platform
entryPoint?: string
enable?: boolean
}
@@ -583,6 +590,7 @@ interface ToolVo {
name: string
toolId: string
icon: string
platform: Platform
description: string
base: ToolBaseVo
author: UserWithInfoVo
@@ -602,6 +610,7 @@ interface ToolCreateParam {
name: string
toolId: string
icon: string
platform: Platform
description: string
ver: string
templateId: string
@@ -612,6 +621,7 @@ interface ToolCreateParam {
interface ToolUpgradeParam {
toolId: string
ver: string
platform: Platform
}
interface ToolUpdateParam {

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

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

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

@@ -285,7 +285,7 @@ const Log = () => {
<>
<FitFullscreen>
<HideScrollbar
style={{ padding: 30 }}
style={{ padding: 20 }}
isShowVerticalScrollbar
autoHideWaitingTime={1000}
>

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

@@ -641,7 +641,7 @@ const Role = () => {
<>
<FitFullscreen>
<HideScrollbar
style={{ padding: 30 }}
style={{ padding: 20 }}
isShowVerticalScrollbar
autoHideWaitingTime={1000}
>

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

@@ -41,6 +41,17 @@ const Base = () => {
currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
)
const [modal, contextHolder] = AntdModal.useModal()
const [tableParams, setTableParams] = useState<TableParam>({
pagination: {
current: 1,
pageSize: 20,
position: ['bottomCenter'],
showTotal: (total, range) =>
`第 ${
range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
} 项 共 ${total} 项`
}
})
const [form] = AntdForm.useForm<ToolBaseAddEditParam>()
const formValues = AntdForm.useWatch([], form)
const [addFileForm] = AntdForm.useForm<{ fileName: string }>()
@@ -62,6 +73,32 @@ const Base = () => {
const [compiling, setCompiling] = useState(false)
const [compileForm] = AntdForm.useForm<{ entryFileName: string }>()
const handleOnTableChange = (
pagination: _TablePaginationConfig,
filters: Record<string, _FilterValue | null>,
sorter: _SorterResult<ToolBaseVo> | _SorterResult<ToolBaseVo>[]
) => {
pagination = { ...tableParams.pagination, ...pagination }
if (Array.isArray(sorter)) {
setTableParams({
pagination,
filters,
sortField: sorter.map((value) => value.field).join(',')
})
} else {
setTableParams({
pagination,
filters,
sortField: sorter.field,
sortOrder: sorter.order
})
}
if (pagination.pageSize !== tableParams.pagination?.pageSize) {
setBaseData([])
}
}
useBeforeUnload(
useCallback(
(event) => {
@@ -78,8 +115,9 @@ const Base = () => {
const handleOnAddBtnClick = () => {
setIsDrawerEdit(false)
setIsDrawerOpen(true)
form.setFieldValue('id', undefined)
form.setFieldValue('id', null)
form.setFieldValue('name', newFormValues?.name)
form.setFieldValue('platform', newFormValues?.platform)
}
const baseColumns: _ColumnsType<ToolBaseVo> = [
@@ -91,6 +129,16 @@ const Base = () => {
</span>
)
},
{
title: '平台',
dataIndex: 'platform',
render: (value: string) => `${value.slice(0, 1)}${value.slice(1).toLowerCase()}`,
filters: [
{ text: 'Web', value: 'WEB' },
{ text: 'Desktop', value: 'DESKTOP' },
{ text: 'Android', value: 'ANDROID' }
]
},
{
title: '创建时间',
dataIndex: 'createTime',
@@ -371,6 +419,7 @@ const Base = () => {
setIsDrawerOpen(true)
form.setFieldValue('id', value.id)
form.setFieldValue('name', value.name)
form.setFieldValue('platform', value.platform)
void form.validateFields()
}
}
@@ -478,11 +527,28 @@ const Base = () => {
}
setIsLoading(true)
void r_sys_tool_base_get()
void r_sys_tool_base_get({
currentPage: tableParams.pagination?.current,
pageSize: tableParams.pagination?.pageSize,
sortField:
tableParams.sortField && tableParams.sortOrder
? (tableParams.sortField as string)
: undefined,
sortOrder:
tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
...tableParams.filters
})
.then((res) => {
const response = res.data
if (response.code === DATABASE_SELECT_SUCCESS) {
setBaseData(response.data!)
setBaseData(response.data!.records)
setTableParams({
...tableParams,
pagination: {
...tableParams.pagination,
total: response.data!.total
}
})
} else {
void message.error('获取失败，请稍后重试')
}
@@ -940,14 +1006,21 @@ const Base = () => {
if (!isDrawerEdit && formValues) {
setNewFormValues({
name: formValues.name
name: formValues.name,
platform: formValues.platform
})
}
}, [formValues])
useEffect(() => {
getBase()
}, [])
}, [
JSON.stringify(tableParams.filters),
JSON.stringify(tableParams.sortField),
JSON.stringify(tableParams.sortOrder),
JSON.stringify(tableParams.pagination?.pageSize),
JSON.stringify(tableParams.pagination?.current)
])
const drawerToolbar = (
<AntdSpace>
@@ -977,6 +1050,18 @@ const Base = () => {
>
<AntdInput allowClear />
</AntdForm.Item>
<AntdForm.Item
name={'platform'}
label={'平台'}
rules={[{ required: true }]}
hidden={isDrawerEdit}
>
<AntdSelect>
<AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
<AntdSelect.Option key={'DESKTOP'}>Desktop</AntdSelect.Option>
<AntdSelect.Option key={'ANDROID'}>Android</AntdSelect.Option>
</AntdSelect>
</AntdForm.Item>
</AntdForm>
)
@@ -990,12 +1075,13 @@ const Base = () => {
dataSource={baseData}
columns={baseColumns}
rowKey={(record) => record.id}
pagination={tableParams.pagination}
loading={isLoading}
pagination={false}
expandable={{
expandedRowRender,
onExpand: handleOnExpand
}}
onChange={handleOnTableChange}
/>
</Card>
{editingFileName && (

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

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

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

@@ -2,6 +2,7 @@ import Draggable from 'react-draggable'
import Icon from '@ant-design/icons'
import '@/assets/css/pages/system/tools/code.scss'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { checkDesktop } from '@/util/common'
import { r_sys_tool_get_one } from '@/services/system'
import { IFiles } from '@/components/Playground/shared'
import { base64ToFiles } from '@/components/Playground/files'
@@ -15,15 +16,21 @@ const Code = () => {
const [loading, setLoading] = useState(false)
const [files, setFiles] = useState<IFiles>({})
const [selectedFileName, setSelectedFileName] = useState('')
const [platform, setPlatform] = useState<Platform>('WEB')
const handleOnRunTool = () => {
if (checkDesktop() || platform !== 'DESKTOP') {
navigate(`/system/tools/execute/${id}`)
} else {
void message.warning('此应用需要桌面端环境，请在桌面端运行')
}
}
const render = (toolVo: ToolVo) => {
try {
setFiles(base64ToFiles(toolVo.source.data!))
setSelectedFileName(toolVo.entryPoint)
setPlatform(toolVo.platform)
} catch (e) {
void message.error('载入工具失败')
}
@@ -46,7 +53,7 @@ const Code = () => {
case DATABASE_NO_RECORD_FOUND:
void message.error('未找到指定工具')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
default:

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

@@ -51,7 +51,7 @@ const Execute = () => {
case DATABASE_NO_RECORD_FOUND:
void message.error('未找到指定工具')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
default:

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

@@ -16,7 +16,7 @@ import {
r_sys_tool_template_add,
r_sys_tool_template_get,
r_sys_tool_template_get_one,
r_sys_tool_base_get
r_sys_tool_base_get_list
} from '@/services/system'
import { IFile, IFiles, ITsconfig } from '@/components/Playground/shared'
import {
@@ -39,6 +39,17 @@ const Template = () => {
currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
)
const [modal, contextHolder] = AntdModal.useModal()
const [tableParams, setTableParams] = useState<TableParam>({
pagination: {
current: 1,
pageSize: 20,
position: ['bottomCenter'],
showTotal: (total, range) =>
`第 ${
range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
} 项 共 ${total} 项`
}
})
const [form] = AntdForm.useForm<ToolTemplateAddEditParam>()
const formValues = AntdForm.useWatch([], form)
const [addFileForm] = AntdForm.useForm<{ fileName: string }>()
@@ -60,6 +71,32 @@ const Template = () => {
const [templateDetailLoading, setTemplateDetailLoading] = useState<Record<string, boolean>>({})
const [tsconfig, setTsconfig] = useState<ITsconfig>()
const handleOnTableChange = (
pagination: _TablePaginationConfig,
filters: Record<string, _FilterValue | null>,
sorter: _SorterResult<ToolTemplateVo> | _SorterResult<ToolTemplateVo>[]
) => {
pagination = { ...tableParams.pagination, ...pagination }
if (Array.isArray(sorter)) {
setTableParams({
pagination,
filters,
sortField: sorter.map((value) => value.field).join(',')
})
} else {
setTableParams({
pagination,
filters,
sortField: sorter.field,
sortOrder: sorter.order
})
}
if (pagination.pageSize !== tableParams.pagination?.pageSize) {
setBaseData([])
}
}
useBeforeUnload(
useCallback(
(event) => {
@@ -95,6 +132,16 @@ const Template = () => {
</span>
)
},
{
title: '平台',
dataIndex: 'platform',
render: (value: string) => `${value.slice(0, 1)}${value.slice(1).toLowerCase()}`,
filters: [
{ text: 'Web', value: 'WEB' },
{ text: 'Desktop', value: 'DESKTOP' },
{ text: 'Android', value: 'ANDROID' }
]
},
{
title: '基板',
dataIndex: ['base', 'name']
@@ -264,9 +311,6 @@ const Template = () => {
}
}
const filterOption = (input: string, option?: { label: string; value: string }) =>
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
const handleOnSubmit = () => {
if (isSubmitting) {
return
@@ -294,7 +338,12 @@ const Template = () => {
setIsSubmitting(false)
})
} else {
void r_sys_tool_template_add(formValues)
void r_sys_tool_template_add({
...formValues,
baseId: formValues.baseId
? (formValues.baseId as unknown as string[])[1]
: undefined
})
.then((res) => {
const response = res.data
switch (response.code) {
@@ -331,11 +380,28 @@ const Template = () => {
}
setIsLoading(true)
void r_sys_tool_template_get()
void r_sys_tool_template_get({
currentPage: tableParams.pagination?.current,
pageSize: tableParams.pagination?.pageSize,
sortField:
tableParams.sortField && tableParams.sortOrder
? (tableParams.sortField as string)
: undefined,
sortOrder:
tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
...tableParams.filters
})
.then((res) => {
const response = res.data
if (response.code === DATABASE_SELECT_SUCCESS) {
setTemplateData(response.data!)
setTemplateData(response.data!.records)
setTableParams({
...tableParams,
pagination: {
...tableParams.pagination,
total: response.data!.total
}
})
} else {
void message.error('获取失败，请稍后重试')
}
@@ -786,7 +852,7 @@ const Template = () => {
}
setIsLoadingBaseData(true)
void r_sys_tool_base_get()
void r_sys_tool_base_get_list()
.then((res) => {
const response = res.data
switch (response.code) {
@@ -831,9 +897,64 @@ const Template = () => {
}
}, [formValues])
const baseDataGroupByPlatform = () => {
interface Node {
label: string
value: string
children?: Node[]
}
const temp: Node[] = []
baseData.forEach((value) => {
if (!temp.length) {
temp.push({
label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
value: value.platform,
children: [
{
label: value.name,
value: value.id
}
]
})
} else {
if (
!temp.some((platform, platformIndex) => {
if (platform.value === value.platform) {
temp[platformIndex].children!.push({
label: value.name,
value: value.id
})
return true
}
return false
})
) {
temp.push({
label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
value: value.platform,
children: [
{
label: value.name,
value: value.id
}
]
})
}
}
})
return temp
}
useEffect(() => {
getTemplate()
}, [])
}, [
JSON.stringify(tableParams.filters),
JSON.stringify(tableParams.sortField),
JSON.stringify(tableParams.sortOrder),
JSON.stringify(tableParams.pagination?.pageSize),
JSON.stringify(tableParams.pagination?.current)
])
const drawerToolbar = (
<AntdSpace>
@@ -868,15 +989,13 @@ const Template = () => {
>
<AntdInput allowClear />
</AntdForm.Item>
<AntdForm.Item name={'baseId'} label={'基板'} rules={[{ required: true }]}>
<AntdSelect
showSearch
filterOption={filterOption}
options={baseData.map((value) => ({
value: value.id,
label: value.name
}))}
/>
<AntdForm.Item
hidden={isDrawerEdit}
name={'baseId'}
label={'基板'}
rules={[{ required: true }]}
>
<AntdCascader showSearch allowClear={false} options={baseDataGroupByPlatform()} />
</AntdForm.Item>
<AntdForm.Item name={'entryPoint'} label={'入口'} rules={[{ required: true }]}>
<AntdInput allowClear />
@@ -897,13 +1016,14 @@ const Template = () => {
dataSource={templateData}
columns={templateColumns}
rowKey={(record) => record.id}
pagination={tableParams.pagination}
loading={isLoading}
pagination={false}
scroll={{ x: true }}
expandable={{
expandedRowRender,
onExpand: handleOnExpand
}}
onChange={handleOnTableChange}
/>
</Card>
{editingFileName && (

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

@@ -75,6 +75,16 @@ const Tools = () => {
},
{ dataIndex: 'toolId', title: '工具 ID' },
{ dataIndex: 'ver', title: '版本' },
{
title: '平台',
dataIndex: 'platform',
render: (value: string) => `${value.slice(0, 1)}${value.slice(1).toLowerCase()}`,
filters: [
{ text: 'Web', value: 'WEB' },
{ text: 'Desktop', value: 'DESKTOP' },
{ text: 'Android', value: 'ANDROID' }
]
},
{
title: '作者',
render: (_, record) => `${record.author.userInfo.nickname}(${record.author.username})`
@@ -379,7 +389,7 @@ const Tools = () => {
.confirm({
title: '确定删除',
maskClosable: true,
content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.ver} 吗？`
content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}:${value.ver} 吗？`
})
.then(
(confirmed) => {
@@ -568,7 +578,7 @@ const Tools = () => {
<>
<FitFullscreen>
<HideScrollbar
style={{ padding: 30 }}
style={{ padding: 20 }}
isShowVerticalScrollbar
autoHideWaitingTime={1000}
>

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

@@ -1010,7 +1010,7 @@ const User = () => {
<>
<FitFullscreen>
<HideScrollbar
style={{ padding: 30 }}
style={{ padding: 20 }}
isShowVerticalScrollbar
autoHideWaitingTime={1000}
>

69
src/pages/Tools/Create.tsx
View File

@@ -42,9 +42,11 @@ const Create = () => {
switch (response.code) {
case DATABASE_INSERT_SUCCESS:
void message.success(
`创建工具 ${response.data!.name}<${response.data!.toolId}>:${response.data!.ver} 成功`
`创建工具 ${response.data!.name}<${response.data!.toolId}:${response.data!.platform.slice(0, 1)}${response.data!.platform.slice(1).toLowerCase()}:${response.data!.ver}> 成功`
)
navigate(
`/edit/${response.data!.toolId}${response.data!.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${response.data!.platform}` : ''}`
)
navigate(`/edit/${response.data!.toolId}`)
break
case DATABASE_DUPLICATE_KEY:
void message.warning('已存在相同 ID 的应用')
@@ -82,6 +84,30 @@ const Create = () => {
return false
}
const handleOnPlatformChange = (value: string) => {
setLoadingTemplate(true)
void r_tool_template_get({
platform: value
})
.then((res) => {
const response = res.data
switch (response.code) {
case DATABASE_SELECT_SUCCESS:
setTemplateData(response.data!)
response.data?.length
? form.setFieldValue('templateId', response.data?.[0].id)
: form.setFieldValue('templateId', null)
response.data?.length && handleOnTemplateChange(response.data?.[0].id)
break
default:
void message.error('获取模板列表失败，请稍后重试')
}
})
.finally(() => {
setLoadingTemplate(false)
})
}
const handleOnTemplateChange = (value: string) => {
setPreviewTemplate(value)
if (templateDetailData[value]) {
@@ -110,6 +136,7 @@ const Create = () => {
if (!template) {
return
}
setCompiledCode('')
try {
const baseDist = base64ToStr(template.base.dist.data!)
const files = base64ToFiles(template.source.data!)
@@ -123,6 +150,7 @@ const Create = () => {
})
.catch((reason) => {
void message.error(`编译失败：${reason}`)
setCompiledCode(baseDist)
})
} catch (e) {
void message.error(`载入模板 ${templateDetailData[previewTemplate].name} 失败`)
@@ -140,22 +168,7 @@ const Create = () => {
}, [form, formValues?.keywords])
useEffect(() => {
setLoadingTemplate(true)
setLoadingCategory(true)
void r_tool_template_get()
.then((res) => {
const response = res.data
switch (response.code) {
case DATABASE_SELECT_SUCCESS:
setTemplateData(response.data!)
break
default:
void message.error('获取模板列表失败，请稍后重试')
}
})
.finally(() => {
setLoadingTemplate(false)
})
void r_tool_category_get()
.then((res) => {
const response = res.data
@@ -254,6 +267,24 @@ const Create = () => {
placeholder={'请输入工具 ID'}
/>
</AntdForm.Item>
<AntdForm.Item
label={'平台'}
name={'platform'}
rules={[{ required: true }]}
>
<AntdSelect
placeholder={'请选择平台'}
onChange={handleOnPlatformChange}
>
<AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
<AntdSelect.Option key={'DESKTOP'}>
Desktop
</AntdSelect.Option>
<AntdSelect.Option key={'ANDROID'}>
Android
</AntdSelect.Option>
</AntdSelect>
</AntdForm.Item>
<AntdForm.Item label={'简介'} name={'description'}>
<AntdInput.TextArea
autoSize={{ minRows: 6, maxRows: 6 }}
@@ -344,11 +375,13 @@ const Create = () => {
<FlexBox>预览</FlexBox>
</Card>
<Card className={'preview'}>
{compiledCode && (
{compiledCode ? (
<Playground.Output.Preview.Render
iframeKey={previewTemplate}
compiledCode={compiledCode}
/>
) : (
<span className={'no-preview'}>暂无预览</span>
)}
</Card>
</FlexBox>

26
src/pages/Tools/Edit.tsx
View File

@@ -21,10 +21,14 @@ import Playground from '@/components/Playground'
import FitFullscreen from '@/components/common/FitFullscreen'
import FlexBox from '@/components/common/FlexBox'
import LoadingMask from '@/components/common/LoadingMask'
import Card from '@/components/common/Card'
const Edit = () => {
const navigate = useNavigate()
const { toolId } = useParams()
const [searchParams] = useSearchParams({
platform: import.meta.env.VITE_PLATFORM
})
const [form] = AntdForm.useForm<ToolUpdateParam>()
const formValues = AntdForm.useWatch([], form)
const [loading, setLoading] = useState(false)
@@ -97,13 +101,13 @@ const Edit = () => {
case TOOL_UNDER_REVIEW:
void message.error('保存失败：工具审核中')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
case TOOL_HAS_BEEN_PUBLISHED:
void message.error('保存失败：工具已发布')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
default:
@@ -163,13 +167,13 @@ const Edit = () => {
case TOOL_UNDER_REVIEW:
void message.error('保存失败：工具审核中')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
case TOOL_HAS_BEEN_PUBLISHED:
void message.error('保存失败：工具已发布')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
default:
@@ -210,7 +214,7 @@ const Edit = () => {
setLoading(true)
void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
void r_tool_detail('!', toolId!, 'latest')
void r_tool_detail('!', toolId!, 'latest', searchParams.get('platform') as Platform)
.then((res) => {
const response = res.data
switch (response.code) {
@@ -224,20 +228,20 @@ const Edit = () => {
case 'PROCESSING':
void message.warning('工具审核中，请勿修改')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
default:
void message.warning('请先创建新版本后编辑工具')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
}
break
case DATABASE_NO_RECORD_FOUND:
void message.error('未找到指定工具')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
default:
@@ -300,6 +304,10 @@ const Edit = () => {
}, [formValues])
useEffect(() => {
if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
navigate('/')
return
}
getTool()
}, [])
@@ -403,6 +411,7 @@ const Edit = () => {
return (
<>
<FitFullscreen data-component={'tools-edit'}>
<Card>
<FlexBox direction={'horizontal'} className={'root-content'}>
<LoadingMask hidden={!loading}>
<Playground.CodeEditor
@@ -438,6 +447,7 @@ const Edit = () => {
</LoadingMask>
{showDraggableMask && <div className={'draggable-mask'} />}
</FlexBox>
</Card>
<Draggable
onStart={() => setShowDraggableMask(true)}
onStop={() => setShowDraggableMask(false)}

18
src/pages/Tools/Source.tsx
View File

@@ -11,6 +11,9 @@ import { getLoginStatus } from '@/util/auth'
const Source = () => {
const navigate = useNavigate()
const { username, toolId, ver } = useParams()
const [searchParams] = useSearchParams({
platform: import.meta.env.VITE_PLATFORM
})
const [loading, setLoading] = useState(false)
const [files, setFiles] = useState<IFiles>({})
const [selectedFileName, setSelectedFileName] = useState('')
@@ -31,7 +34,12 @@ const Source = () => {
setLoading(true)
void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
void r_tool_detail(username!, toolId!, ver || 'latest')
void r_tool_detail(
username!,
toolId!,
ver || 'latest',
searchParams.get('platform') as Platform
)
.then((res) => {
const response = res.data
switch (response.code) {
@@ -41,7 +49,7 @@ const Source = () => {
case DATABASE_NO_RECORD_FOUND:
void message.error('未找到指定工具')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
default:
@@ -57,7 +65,7 @@ const Source = () => {
useEffect(() => {
if (username === '!' && !getLoginStatus()) {
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
return
}
@@ -69,6 +77,10 @@ const Source = () => {
navigate(`/source/!/${toolId}/latest`)
return
}
if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
navigate('/')
return
}
getTool()
}, [])

2
src/pages/Tools/User.tsx
View File

@@ -159,7 +159,7 @@ const User = () => {
case DATABASE_NO_RECORD_FOUND:
void message.warning('用户不存在')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
default:

18
src/pages/Tools/View.tsx
View File

@@ -12,6 +12,9 @@ import Card from '@/components/common/Card'
const View = () => {
const navigate = useNavigate()
const { username, toolId, ver } = useParams()
const [searchParams] = useSearchParams({
platform: import.meta.env.VITE_PLATFORM
})
const [loading, setLoading] = useState(false)
const [compiledCode, setCompiledCode] = useState('')
@@ -52,7 +55,12 @@ const View = () => {
setLoading(true)
void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
void r_tool_detail(username!, toolId!, ver || 'latest')
void r_tool_detail(
username!,
toolId!,
ver || 'latest',
searchParams.get('platform') as Platform
)
.then((res) => {
const response = res.data
switch (response.code) {
@@ -62,7 +70,7 @@ const View = () => {
case DATABASE_NO_RECORD_FOUND:
void message.error('未找到指定工具')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
default:
@@ -78,7 +86,7 @@ const View = () => {
useEffect(() => {
if (username === '!' && !getLoginStatus()) {
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
return
}
@@ -90,6 +98,10 @@ const View = () => {
navigate(`/view/!/${toolId}/latest`)
return
}
if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
navigate('/')
return
}
getTool()
}, [])

108
src/pages/Tools/index.tsx
View File

@@ -14,6 +14,7 @@ import {
TOOL_SUBMIT_SUCCESS,
TOOL_UNDER_REVIEW
} from '@/constants/common.constants'
import { checkDesktop } from '@/util/common'
import { getLoginStatus } from '@/util/auth'
import {
r_tool_cancel,
@@ -138,28 +139,44 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
const navigate = useNavigate()
const [selectedTool, setSelectedTool] = useState(tools[0])
const handleOnVersionChange = (value: string) => {
setSelectedTool(tools.find((item) => item.id === value)!)
const handleOnVersionChange = (value: (string | number)[]) => {
setSelectedTool(tools.find((item) => item.id === value[1])!)
}
const handleOnOpenTool = () => {
navigate(`/view/!/${selectedTool.toolId}/${selectedTool.ver}`)
if (checkDesktop() || selectedTool.platform !== 'DESKTOP') {
navigate(
`/view/!/${selectedTool.toolId}/${selectedTool.ver}${selectedTool.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${selectedTool.platform}` : ''}`
)
} else {
void message.warning('此应用需要桌面端环境，请在桌面端打开')
}
}
const handleOnEditTool = () => {
if (['NONE', 'REJECT'].includes(selectedTool.review)) {
return () => {
navigate(`/edit/${tools[0].toolId}`)
if (checkDesktop() || selectedTool.platform !== 'DESKTOP') {
navigate(
`/edit/${selectedTool.toolId}${selectedTool.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${selectedTool.platform}` : ''}`
)
} else {
void message.warning('此应用需要桌面端环境，请在桌面端编辑')
}
}
}
return undefined
}
const handleOnSourceTool = () => {
if (selectedTool.review === 'PASS') {
return () => {
navigate(`/source/!/${selectedTool.toolId}/${selectedTool.ver}`)
navigate(
`/source/!/${selectedTool.toolId}/${selectedTool.ver}${selectedTool.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${selectedTool.platform}` : ''}`
)
}
}
return undefined
}
const handleOnPublishTool = () => {
@@ -168,6 +185,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
onSubmit?.(selectedTool)
}
}
return undefined
}
const handleOnCancelReview = () => {
@@ -176,6 +194,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
onCancel?.(selectedTool)
}
}
return undefined
}
const handleOnDeleteTool = () => {
@@ -186,6 +205,55 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
onUpgrade?.(selectedTool)
}
const toolsGroupByPlatform = (tools: ToolVo[]) => {
interface Node {
label: string
value: string
children?: Node[]
}
const temp: Node[] = []
tools.forEach((value) => {
if (!temp.length) {
temp.push({
label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
value: value.platform,
children: [
{
label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`,
value: value.id
}
]
})
} else {
if (
!temp.some((platform, platformIndex) => {
if (platform.value === value.platform) {
temp[platformIndex].children!.push({
label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`,
value: value.id
})
return true
}
return false
})
) {
temp.push({
label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
value: value.platform,
children: [
{
label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`,
value: value.id
}
]
})
}
}
})
return temp
}
return (
<CommonCard
icon={<img src={`data:image/svg+xml;base64,${selectedTool.icon}`} alt={'Icon'} />}
@@ -198,15 +266,17 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
onCancelReview={handleOnCancelReview()}
onDelete={handleOnDeleteTool}
>
<AntdSelect
<AntdCascader
className={'version-select'}
size={'small'}
value={selectedTool.id}
allowClear={false}
value={[
tools.find((value) => value.id === selectedTool.id)!.platform,
selectedTool.id
]}
displayRender={(label: string[]) => `${label[0].slice(0, 1)}-${label[1]}`}
onChange={handleOnVersionChange}
options={tools.map((value) => ({
value: value.id,
label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`
}))}
options={toolsGroupByPlatform(tools)}
/>
{tools.every((value) => value.review === 'PASS') && (
<AntdTooltip title={'更新'}>
@@ -233,7 +303,7 @@ const Tools = () => {
.confirm({
title: '删除',
maskClosable: true,
content: `确定删除工具 ${tool.name}:${tool.ver} 吗？`
content: `确定删除工具 ${tool.toolId}:${tool.platform.slice(0, 1)}${tool.platform.slice(1).toLowerCase()}:${tool.ver} 吗？`
})
.then(
(confirmed) => {
@@ -309,14 +379,22 @@ const Tools = () => {
() => {
return new Promise<void>((resolve, reject) => {
void r_tool_upgrade({
toolId: upgradeForm.getFieldValue('toolId') as string,
ver: upgradeForm.getFieldValue('ver') as string
toolId: tool.toolId,
ver: upgradeForm.getFieldValue('ver') as string,
platform: tool.platform
}).then((res) => {
const response = res.data
switch (response.code) {
case DATABASE_UPDATE_SUCCESS:
void message.success('创建新版本成功')
navigate(`/edit/${response.data!.toolId}`)
if (
checkDesktop() ||
response.data!.platform !== 'DESKTOP'
) {
navigate(
`/edit/${response.data!.toolId}${response.data!.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${response.data!.platform}` : ''}`
)
}
resolve()
break
case TOOL_ILLEGAL_VERSION:

11
src/services/system.tsx
View File

@@ -21,7 +21,8 @@ import {
URL_SYS_TOOL_BASE,
URL_SYS_TOOL_TEMPLATE,
URL_SYS_TOOL,
URL_SYS_SETTINGS_TWO_FACTOR
URL_SYS_SETTINGS_TWO_FACTOR,
URL_SYS_TOOL_BASE_LIST
} from '@/constants/urls.constants'
import request from '@/services/index'
@@ -145,7 +146,10 @@ export const r_sys_tool_category_update = (param: ToolCategoryAddEditParam) =>
export const r_sys_tool_category_delete = (id: string) =>
request.delete(`${URL_SYS_TOOL_CATEGORY}/${id}`)
export const r_sys_tool_base_get = () => request.get<ToolBaseVo[]>(URL_SYS_TOOL_BASE)
export const r_sys_tool_base_get = (param: PageParam) =>
request.get<PageVo<ToolBaseVo>>(URL_SYS_TOOL_BASE, param)
export const r_sys_tool_base_get_list = () => request.get<ToolBaseVo[]>(URL_SYS_TOOL_BASE_LIST)
export const r_sys_tool_base_get_one = (id: string) =>
request.get<ToolBaseVo>(`${URL_SYS_TOOL_BASE}/${id}`)
@@ -158,7 +162,8 @@ export const r_sys_tool_base_update = (param: ToolBaseAddEditParam) =>
export const r_sys_tool_base_delete = (id: string) => request.delete(`${URL_SYS_TOOL_BASE}/${id}`)
export const r_sys_tool_template_get = () => request.get<ToolTemplateVo[]>(URL_SYS_TOOL_TEMPLATE)
export const r_sys_tool_template_get = (param: PageParam) =>
request.get<PageVo<ToolTemplateVo>>(URL_SYS_TOOL_TEMPLATE, param)
export const r_sys_tool_template_get_one = (id: string) =>
request.get<ToolTemplateVo>(`${URL_SYS_TOOL_TEMPLATE}/${id}`)

7
src/services/tool.tsx
View File

@@ -7,7 +7,8 @@ import {
URL_TOOL_TEMPLATE
} from '@/constants/urls.constants'
export const r_tool_template_get = () => request.get<ToolTemplateVo[]>(URL_TOOL_TEMPLATE)
export const r_tool_template_get = (param: { platform: string }) =>
request.get<ToolTemplateVo[]>(URL_TOOL_TEMPLATE, param)
export const r_tool_template_get_one = (id: string) =>
request.get<ToolTemplateVo>(`${URL_TOOL_TEMPLATE}/${id}`)
@@ -20,8 +21,8 @@ export const r_tool_upgrade = (param: ToolUpgradeParam) => request.patch<ToolVo>
export const r_tool_get = () => request.get<ToolVo[]>(URL_TOOL)
export const r_tool_detail = (username: string, toolId: string, ver: string) =>
request.get<ToolVo>(`${URL_TOOL_DETAIL}/${username}/${toolId}/${ver}`)
export const r_tool_detail = (username: string, toolId: string, ver: string, platform: Platform) =>
request.get<ToolVo>(`${URL_TOOL_DETAIL}/${username}/${toolId}/${ver}`, { platform })
export const r_tool_update = (param: ToolUpdateParam) => request.put<ToolVo>(URL_TOOL, param)

4
src/util/common.tsx
View File

@@ -118,7 +118,7 @@ export const formatByteSize = (byteSize: number): string => {
}
const formatByte = (size: number, unit: ByteUnit): string => {
let precision
let precision: number
if ((size * 1000) % 10 > 0) {
precision = 3
} else if ((size * 100) % 10 > 0) {
@@ -131,3 +131,5 @@ const formatByte = (size: number, unit: ByteUnit): string => {
return `${size.toFixed(precision)}${unit}`
}
export const checkDesktop = () => import.meta.env.VITE_PLATFORM === 'DESKTOP'