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

Add personal tool management page

Browse Source
This commit is contained in:
Fat Snake
2024-01-30 13:33:57 +08:00
parent ad47030cb2
commit 0e804ff732
12 changed files with 457 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/assets/css/pages/tools/index.scss Normal file
View File

@@ -0,0 +1,107 @@
@use "@/assets/css/mixins" as mixins;
@use '@/assets/css/constants' as constants;
[data-component=tools] {
.root-content {
padding: 30px;
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
> .card-box {
width: 180px;
height: 290px;
flex: 0 0 auto;
.common-card {
width: 100%;
height: 100%;
text-align: center;
align-items: center;
> * {
flex: 0 0 auto;
display: block;
}
.version-select {
position: absolute;
top: 10px;
left: 10px;
}
.icon {
display: flex;
padding-top: 50px;
padding-bottom: 20px;
color: constants.$production-color;
font-size: constants.$SIZE_ICON_XL;
justify-content: center;
img {
width: constants.$SIZE_ICON_XL;
}
}
.tool-name {
font-weight: bolder;
font-size: 1.6em;
}
}
}
& > :first-child {
cursor: pointer;
.info {
padding-top: 50px;
}
}
& > :not(:first-child) {
.info {
transform: translateY(20px);
transition: all 0.1s ease;
}
.operation {
display: flex;
flex: 1;
justify-content: center;
padding-bottom: 20px;
gap: 4px;
width: 70%;
flex-direction: column;
align-items: center;
visibility: hidden;
opacity: 0;
> *, .edit > * {
width: 100%;
}
.edit {
> * {
> :first-child {
flex: 1;
}
}
}
}
}
& > :not(:first-child):hover {
.info {
transform: translateY(-10px);
transition: all 0.2s ease;
}
.operation {
visibility: visible;
opacity: 1;
transition: all 0.4s ease;
}
}
}
}

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

@@ -33,6 +33,7 @@ export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
export const URL_TOOL = '/tool'
export const URL_TOOL_TEMPLATE = `${URL_TOOL}/template`
export const URL_TOOL_CATEGORY = `${URL_TOOL}/category`
export const URL_TOOL_DETAIL = `${URL_TOOL}/detail`
export const URL_API_V1 = '/api/v1'
export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`

5
src/global.d.ts vendored
View File

@@ -534,14 +534,12 @@ interface ToolVo {
baseId: string
author: UserInfoVo
ver: string
privately: boolean
keywords: string[]
categories: ToolCategoryVo[]
source: ToolDataVo
dist: ToolDataVo
publish: boolean
publish: string
review: number
publishTime: string
createTime: string
updateTime: string
}
@@ -553,7 +551,6 @@ interface ToolCreateParam {
description: string
ver: string
templateId: string
privately: boolean
keywords: string[]
categories: string[]
}

4
src/pages/Sign/SignUp.tsx
View File

@@ -103,7 +103,7 @@ const SignUp = () => {
return
}
setIsSending(true)
void message.loading({ content: '发送中', key: 'sending', duration: 0 })
void message.loading({ content: '发送中', key: 'SENDING', duration: 0 })
void r_auth_resend()
.then((res) => {
const response = res.data
@@ -114,7 +114,7 @@ const SignUp = () => {
}
})
.finally(() => {
message.destroy('sending')
message.destroy('SENDING')
setIsSending(false)
})
}

4
src/pages/Sign/Verify.tsx
View File

@@ -70,7 +70,7 @@ const Verify = () => {
return
}
setIsSending(true)
void message.loading({ content: '发送中', key: 'sending', duration: 0 })
void message.loading({ content: '发送中', key: 'SENDING', duration: 0 })
void r_auth_resend()
.then((res) => {
const response = res.data
@@ -81,7 +81,7 @@ const Verify = () => {
}
})
.finally(() => {
message.destroy('sending')
message.destroy('SENDING')
setIsSending(false)
})
}

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

@@ -177,7 +177,7 @@ const Base = () => {
}
setCompiling(true)
setIsLoading(true)
void message.loading({ content: '加载文件中', key: 'compile-loading', duration: 0 })
void message.loading({ content: '加载文件中', key: 'COMPILE_LOADING', duration: 0 })
if (!baseDetailLoading[value.id]) {
getBaseDetail(value)
@@ -211,7 +211,7 @@ const Base = () => {
baseDetail = prevState[value.id]
return prevState
})
message.destroy('compile-loading')
message.destroy('COMPILE_LOADING')
const files = base64ToFiles(baseDetail!.source.data!)
if (!Object.keys(files).includes(IMPORT_MAP_FILE_NAME)) {
void message.warning(`编译中止：未包含 ${IMPORT_MAP_FILE_NAME} 文件`)
@@ -263,7 +263,7 @@ const Base = () => {
resolve()
void message.loading({
content: '编译中',
key: 'compiling',
key: 'COMPILING',
duration: 0
})
void compiler
@@ -273,14 +273,12 @@ const Base = () => {
compileForm.getFieldValue('entryFileName') as string
)
.then((result) => {
void message.destroy('compiling')
message.destroy('COMPILING')
void message.loading({
content: '上传中',
key: 'uploading',
key: 'UPLOADING',
duration: 0
})
// TODO Remove debug
console.debug(result.outputFiles[0].text)
void r_sys_tool_base_update({
id: value.id,
dist: strToBase64(result.outputFiles[0].text)
@@ -297,14 +295,14 @@ const Base = () => {
}
})
.finally(() => {
void message.destroy('uploading')
message.destroy('UPLOADING')
setCompiling(false)
setIsLoading(false)
})
})
.catch((e: Error) => {
void message.error(`编译失败：${e.message}`)
void message.destroy('compiling')
message.destroy('COMPILING')
setCompiling(false)
setIsLoading(false)
})
@@ -325,7 +323,7 @@ const Base = () => {
.catch(() => {
setCompiling(false)
setIsLoading(false)
message.destroy('compile-loading')
message.destroy('COMPILE_LOADING')
})
}
}

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

@@ -45,7 +45,7 @@ const Create = () => {
)
break
case DATABASE_DUPLICATE_KEY:
void message.warning('已存在相同 ID 相同版本的应用')
void message.warning('已存在相同 ID 相同版本或未发布版本的应用')
setCreating(false)
break
default:
@@ -71,8 +71,9 @@ const Create = () => {
const reader = new FileReader()
reader.addEventListener('load', () => {
// eslint-disable-next-line @typescript-eslint/no-base-to-string
form.setFieldValue('icon', reader.result!.toString().split(',')[1])
void form.validateFields()
void form.validateFields(['icon'])
})
reader.readAsDataURL(file)
@@ -187,7 +188,7 @@ const Create = () => {
>
<AntdForm.Item
label={'图标'}
name={''}
name={'icon'}
rules={[
({ getFieldValue }) => ({
validator() {
@@ -200,6 +201,7 @@ const Create = () => {
}
})
]}
getValueFromEvent={() => {}}
>
<AntdUpload
listType={'picture-card'}
@@ -218,7 +220,7 @@ const Create = () => {
)}
</AntdUpload>
</AntdForm.Item>
<AntdForm.Item name={'icon'}>
<AntdForm.Item name={'icon'} hidden>
<AntdInput />
</AntdForm.Item>
<AntdForm.Item
@@ -291,16 +293,6 @@ const Create = () => {
onChange={handleOnTemplateChange}
/>
</AntdForm.Item>
<AntdForm.Item
label={'访问权限'}
name={'privately'}
initialValue={false}
>
<AntdSwitch
checkedChildren={'私有'}
unCheckedChildren={'公开'}
/>
</AntdForm.Item>
<AntdForm.Item
label={'关键字'}
tooltip={'工具搜索（每个不超过10个字符）'}

61
src/pages/Tools/View.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { r_tool_detail } from '@/services/tool.tsx'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
import { getLoginStatus } from '@/util/auth.tsx'
const View = () => {
const navigate = useNavigate()
const [loading, setLoading] = useState(false)
const { username, toolId, ver } = useParams()
const getTool = () => {
if (loading) {
return
}
setLoading(true)
void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
void r_tool_detail(username!, toolId!, ver || 'latest')
.then((res) => {
const response = res.data
switch (response.code) {
case DATABASE_SELECT_SUCCESS:
console.log(response.data)
break
case DATABASE_NO_RECORD_FOUND:
void message.error('未找到指定工具')
navigate('/')
break
default:
void message.error('获取工具信息失败，请稍后重试')
}
})
.finally(() => {
setLoading(false)
message.destroy('LOADING')
})
}
useEffect(() => {
if (username === '!' && !getLoginStatus()) {
navigate('/')
return
}
if (username !== '!' && ver) {
navigate(`/view/${username}/${toolId}`)
return
}
if (username === '!' && !ver) {
navigate(`/view/!/${toolId}/latest`)
return
}
getTool()
}, [])
return (
<>
{username}:{toolId}:{ver}
</>
)
}
export default View

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

@@ -1,5 +1,206 @@
import { DetailedHTMLProps, HTMLAttributes, ReactNode, useState } from 'react'
import Icon from '@ant-design/icons'
import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
import '@/assets/css/pages/tools/index.scss'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'
import { r_tool_get } from '@/services/tool.tsx'
import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
import { getLoginStatus } from '@/util/auth.tsx'
import { useNavigate } from 'react-router'
interface CommonCardProps
extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
icon: ReactNode
toolName?: string
toolId?: string
options?: TiltOptions
url?: string
onOpen?: () => void
onEdit?: () => void
onPublish?: () => void
onDelete?: () => void
}
const CommonCard = ({
style,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
ref,
icon,
toolName,
toolId,
options = {
reverse: true,
max: 8,
glare: true,
['max-glare']: 0.3,
scale: 1.03
},
url,
onOpen,
onEdit,
onPublish,
onDelete,
children,
...props
}: CommonCardProps) => {
const navigate = useNavigate()
const cardRef = useRef<HTMLDivElement>(null)
useEffect(() => {
cardRef.current && VanillaTilt.init(cardRef.current, options)
}, [options])
const handleCardOnClick = () => {
url && navigate(url)
}
return (
<Card
style={{ overflow: 'visible', ...style }}
ref={cardRef}
{...props}
onClick={handleCardOnClick}
>
<FlexBox className={'common-card'}>
<div className={'icon'}>{icon}</div>
<div className={'info'}>
{toolName && <div className={'tool-name'}>{toolName}</div>}
{toolId && <div className={'tool-id'}>{`ID: ${toolId}`}</div>}
</div>
<div className={'operation'}>
{onOpen && (
<AntdButton onClick={onOpen} size={'small'} type={'primary'}>
打开
</AntdButton>
)}
{onEdit && (
<div className={'edit'}>
<AntdButton.Group size={'small'}>
<AntdButton>编辑</AntdButton>
{onPublish && <AntdButton>发布</AntdButton>}
</AntdButton.Group>
</div>
)}
{onDelete && (
<AntdButton size={'small'} danger>
删除
</AntdButton>
)}
</div>
{children}
</FlexBox>
</Card>
)
}
interface ToolCardProps {
tools: ToolVo[]
}
const ToolCard = ({ tools }: ToolCardProps) => {
const navigate = useNavigate()
const [selectedTool, setSelectedTool] = useState(tools[0])
const handleOnVersionChange = (value: string) => {
setSelectedTool(tools.find((item) => item.id === value)!)
}
const handleOnOpenTool = () => {
navigate(`/view/!/${selectedTool.toolId}/${selectedTool.ver}`)
}
const handleOnEditTool = () => {}
const handleOnPublishTool = () => {}
const handleOnDeleteTool = () => {}
return (
<CommonCard
icon={<img src={`data:image/svg+xml;base64,${selectedTool.icon}`} alt={'Icon'} />}
toolName={selectedTool.name}
toolId={selectedTool.toolId}
onOpen={handleOnOpenTool}
onEdit={handleOnEditTool}
onPublish={handleOnPublishTool}
onDelete={handleOnDeleteTool}
>
<AntdSelect
className={'version-select'}
size={'small'}
value={selectedTool.id}
onChange={handleOnVersionChange}
options={tools.map((value) => ({
value: value.id,
label: `${value.ver}${value.publish === '0' ? '*' : ''}`
}))}
/>
</CommonCard>
)
}
const Tools = () => {
return <></>
const [loading, setLoading] = useState(false)
const [toolData, setToolData] = useState<ToolVo[]>()
const getTool = () => {
if (loading) {
return
}
setLoading(true)
void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
void r_tool_get()
.then((res) => {
const response = res.data
switch (response.code) {
case DATABASE_SELECT_SUCCESS:
setToolData(response.data!)
break
default:
void message.error('获取工具失败，请稍后重试')
}
})
.finally(() => {
setLoading(false)
message.destroy('LOADING')
})
}
useEffect(() => {
if (!getLoginStatus()) {
return
}
getTool()
}, [])
return (
<>
<FitFullscreen data-component={'tools'}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={'root-content'}>
<CommonCard
icon={<Icon component={IconOxygenNewProject} />}
toolName={'创建工具'}
url={'/create'}
/>
{toolData &&
Object.values(
toolData.reduce((result: Record<string, ToolVo[]>, item) => {
result[item.toolId] = result[item.toolId] || []
result[item.toolId].push(item)
return result
}, {})
).map((value, index) => <ToolCard key={index} tools={value} />)}
</FlexBox>
</HideScrollbar>
</FitFullscreen>
</>
)
}
export default Tools

16
src/router/tools.tsx
View File

@@ -28,9 +28,23 @@ export const tools: RouteJsonObject[] = [
name: '创建工具',
titlePostfix: ' - 创建新工具',
icon: lazy(() => import('~icons/oxygen/newProject')),
menu: true,
menu: false,
auth: true
},
{
path: 'view/:username/:toolId/:ver',
absolutePath: '/view',
id: 'tools-view-ver',
component: lazy(() => import('@/pages/Tools/View')),
name: '查看'
},
{
path: 'view/:username/:toolId',
absolutePath: '/view',
id: 'tools-view',
component: lazy(() => import('@/pages/Tools/View')),
name: '查看'
},
{
path: '*',
absolutePath: '*',

37
src/services/index.tsx
View File

@@ -68,11 +68,14 @@ service.interceptors.response.use(
switch (response.data.code) {
case PERMISSION_UNAUTHORIZED:
removeToken()
void message.error(
void message.error({
content: (
<>
<strong>未登录</strong>
</>
)
),
key: 'NO_LOGIN'
})
setTimeout(() => {
location.reload()
}, 1500)
@@ -80,11 +83,14 @@ service.interceptors.response.use(
case PERMISSION_TOKEN_ILLEGAL:
case PERMISSION_TOKEN_HAS_EXPIRED:
removeToken()
void message.error(
void message.error({
content: (
<>
<strong>登录已过期</strong>
</>
)
),
key: 'LOGIN_HAS_EXPIRED'
})
setTimeout(() => {
location.replace(
getRedirectUrl('/login', `${location.pathname}${location.search}`)
@@ -92,18 +98,24 @@ service.interceptors.response.use(
}, 1500)
throw response?.data
case PERMISSION_ACCESS_DENIED:
void message.error(
void message.error({
content: (
<>
<strong>暂无权限操作</strong>
</>
)
),
key: 'ACCESS_DENIED'
})
throw response?.data
case SYSTEM_REQUEST_TOO_FREQUENT:
void message.warning(
void message.warning({
content: (
<>
<strong>请求过于频繁，请稍后重试</strong>
</>
)
),
key: 'REQUEST_TOO_FREQUENT'
})
throw response?.data
}
return response
@@ -113,13 +125,16 @@ service.interceptors.response.use(
error.code === 'ETIMEDOUT' ||
(error.code === 'ECONNABORTED' && error.message.includes('timeout'))
) {
void message.error('请求超时，请稍后重试')
void message.error({ content: '请求超时，请稍后重试', key: 'TIMEOUT' })
} else {
void message.error(
void message.error({
content: (
<>
<strong>服务器出错</strong>，请稍后重试
</>
)
),
key: 'SERVER_ERROR'
})
}
return await Promise.reject(error?.response?.data)
}

12
src/services/tool.tsx
View File

@@ -1,5 +1,10 @@
import request from '@/services/index'
import { URL_TOOL, URL_TOOL_CATEGORY, URL_TOOL_TEMPLATE } from '@/constants/urls.constants'
import {
URL_TOOL,
URL_TOOL_CATEGORY,
URL_TOOL_DETAIL,
URL_TOOL_TEMPLATE
} from '@/constants/urls.constants'
export const r_tool_template_get = () => request.get<ToolTemplateVo[]>(URL_TOOL_TEMPLATE)
@@ -9,3 +14,8 @@ export const r_tool_template_get_one = (id: string) =>
export const r_tool_category_get = () => request.get<ToolCategoryVo[]>(URL_TOOL_CATEGORY)
export const r_tool_create = (param: ToolCreateParam) => request.post<ToolVo>(URL_TOOL, param)
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}`)