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

Finish store

Browse Source
This commit is contained in:
Fat Snake
2024-02-18 17:50:31 +08:00
parent ae16808e1d
commit 3c495cfa16
11 changed files with 362 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/constants.scss
View File

@@ -17,4 +17,5 @@ $SIZE_ICON_XS: 16px;
$SIZE_ICON_SM: 20px;
$SIZE_ICON_MD: 24px;
$SIZE_ICON_LG: 32px;
$SIZE_ICON_XL: 64px;
$SIZE_ICON_XL: 64px;
$SIZE_ICON_XXL: 96px;

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

@@ -20,8 +20,8 @@
align-items: center;
> * {
flex: 0 0 auto;
display: block;
flex: 0 0 auto;
}
.version-select {

8
src/assets/css/pages/tools/source.scss Normal file
View File

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

117
src/assets/css/pages/tools/store.scss Normal file
View File

@@ -0,0 +1,117 @@
@use '@/assets/css/constants' as constants;
[data-component=tools-store] {
.root-content {
padding: 30px;
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
> .card-box {
width: 180px;
height: 290px;
flex: 0 0 auto;
cursor: pointer;
.common-card {
width: 100%;
height: 100%;
text-align: center;
align-items: center;
> * {
display: block;
flex: 0 0 auto;
}
.icon {
display: flex;
padding-top: 40px;
padding-bottom: 20px;
color: constants.$production-color;
font-size: constants.$SIZE_ICON_XL;
justify-content: center;
img {
width: constants.$SIZE_ICON_XL;
}
}
.version {
position: absolute;
left: 10px;
top: 10px;
}
.info {
padding-top: 20px;
.tool-name {
font-weight: bolder;
font-size: 1.6em;
}
.tool-desc {
margin-top: 10px;
color: constants.$font-secondary-color;
}
}
.author {
display: flex;
margin-top: auto;
flex-direction: row;
justify-content: end;
padding-bottom: 10px;
gap: 10px;
.avatar {
> * {
width: 24px;
height: 24px;
}
}
.author-name {
display: flex;
align-items: center;
}
}
.operation {
position: absolute;
top: 6px;
right: 12px;
font-size: 1.6em;
>*:hover {
color: constants.$font-secondary-color;
}
}
}
.load-more-card {
width: 100%;
height: 100%;
text-align: center;
align-items: center;
.icon {
display: flex;
font-size: constants.$SIZE_ICON_XXL;
color: constants.$production-color;
align-items: center;
transform: translateY(-20px);
}
.text {
position: absolute;
top: 60%;
font-size: 1.2em;
font-weight: bolder;
}
}
}
}
}

1
src/assets/svg/code.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M305.6 225.6c-17.6-17.6-43.2-17.6-59.2 0L19.2 460.8c-25.6 30.4-25.6 72 0 97.6l225.6 235.2c8 8 20.8 12.8 30.4 12.8s20.8-4.8 30.4-12.8c17.6-17.6 17.6-43.2 0-59.2L88 512l217.6-225.6c17.6-17.6 17.6-43.2 0-60.8zM1001.6 460.8L774.4 225.6c-17.6-17.6-43.2-17.6-59.2 0s-17.6 43.2 0 59.2L932.8 512 715.2 737.6c-17.6 17.6-17.6 43.2 0 59.2 8 8 17.6 12.8 30.4 12.8 12.8 0 20.8-4.8 30.4-12.8l225.6-235.2c28.8-28.8 28.8-70.4 0-100.8zM612.8 230.4c-20.8-8-46.4 4.8-56 25.6L382.4 742.4c-8 20.8 4.8 46.4 25.6 56 4.8 0 8 4.8 12.8 4.8 17.6 0 33.6-12.8 38.4-30.4l179.2-491.2c8-20.8-4.8-46.4-25.6-51.2z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 662 B

1
src/assets/svg/more.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M243.2 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /><path d="M512 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /><path d="M780.8 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 296 B

89
src/pages/Tools/Source.tsx Normal file
View File

@@ -0,0 +1,89 @@
import '@/assets/css/pages/tools/source.scss'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { r_tool_detail } from '@/services/tool'
import { IFiles } from '@/components/Playground/shared'
import { base64ToFiles } from '@/components/Playground/files'
import Playground from '@/components/Playground'
import FitFullscreen from '@/components/common/FitFullscreen'
import Card from '@/components/common/Card'
import { getLoginStatus } from '@/util/auth.tsx'
const Source = () => {
const navigate = useNavigate()
const { username, toolId, ver } = useParams()
const [loading, setLoading] = useState(false)
const [files, setFiles] = useState<IFiles>({})
const [selectedFileName, setSelectedFileName] = useState('')
const render = (toolVo: ToolVo) => {
try {
setFiles(base64ToFiles(toolVo.source.data!))
setSelectedFileName(toolVo.entryPoint)
} catch (e) {
void message.error('载入工具失败')
}
}
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:
render(response.data!)
break
case DATABASE_NO_RECORD_FOUND:
void message.error('未找到指定工具')
setTimeout(() => {
navigate(-1)
}, 3000)
break
default:
void message.error('获取工具信息失败，请稍后重试')
}
})
.finally(() => {
setLoading(false)
message.destroy('LOADING')
})
}
useEffect(() => {
if (username === '!' && !getLoginStatus()) {
setTimeout(() => {
navigate(-1)
}, 3000)
return
}
if (username !== '!' && ver) {
navigate(`/source/${username}/${toolId}`)
return
}
if (username === '!' && !ver) {
navigate(`/source/!/${toolId}/latest`)
return
}
getTool()
}, [])
return (
<FitFullscreen data-component={'tools-source'}>
<Card>
<Playground.CodeEditor
readonly
files={files}
selectedFileName={selectedFileName}
onSelectedFileChange={setSelectedFileName}
/>
</Card>
</FitFullscreen>
)
}
export default Source

94
src/pages/Tools/Store.tsx
View File

@@ -1,18 +1,20 @@
import { DetailedHTMLProps, HTMLAttributes, ReactNode, useEffect, useState } from 'react'
import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode } from 'react'
import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
import Card from '@/components/common/Card.tsx'
import FlexBox from '@/components/common/FlexBox.tsx'
import Icon from '@ant-design/icons'
import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
import FitFullscreen from '@/components/common/FitFullscreen.tsx'
import HideScrollbar from '@/components/common/HideScrollbar.tsx'
import { r_tool_store_get } from '@/services/tool.tsx'
import '@/assets/css/pages/tools/store.scss'
import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { r_tool_store_get } from '@/services/tool'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
interface CommonCardProps
extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
icon: ReactNode
toolName: string
toolId: string
toolDesc: string
options?: TiltOptions
url: string
authorName: string
@@ -28,6 +30,7 @@ const CommonCard = ({
icon,
toolName,
toolId,
toolDesc,
options = {
reverse: true,
max: 8,
@@ -53,6 +56,11 @@ const CommonCard = ({
url && navigate(url)
}
const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation()
navigate(`/source/${authorUsername}/${toolId}`)
}
return (
<Card
style={{ overflow: 'visible', ...style }}
@@ -62,10 +70,13 @@ const CommonCard = ({
>
<FlexBox className={'common-card'}>
<div className={'icon'}>{icon}</div>
<div className={'version'}>{ver}</div>
<div className={'version'}>
<AntdTag>V{ver}</AntdTag>
</div>
<div className={'info'}>
<div className={'tool-name'}>{toolName}</div>
<div className={'tool-id'}>{`ID: ${toolId}`}</div>
{toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
</div>
<div className={'author'}>
<div className={'avatar'}>
@@ -84,6 +95,41 @@ const CommonCard = ({
<div className={'author-name'}>{authorName}</div>
</AntdTooltip>
</div>
<div className={'operation'}>
<AntdTooltip title={'源码'}>
<Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
</AntdTooltip>
</div>
</FlexBox>
</Card>
)
}
interface LoadMoreCardProps {
onClick: () => void
}
const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
const cardRef = useRef<HTMLDivElement>(null)
useEffect(() => {
cardRef.current &&
VanillaTilt.init(cardRef.current, {
reverse: true,
max: 8,
glare: true,
['max-glare']: 0.3,
scale: 1.03
})
}, [])
return (
<Card style={{ overflow: 'visible' }} ref={cardRef} onClick={onClick}>
<FlexBox className={'load-more-card'}>
<div className={'icon'}>
<Icon component={IconOxygenMore} />{' '}
</div>
<div className={'text'}>加载更多</div>
</FlexBox>
</Card>
)
@@ -91,24 +137,31 @@ const CommonCard = ({
const Store = () => {
const [isLoading, setIsLoading] = useState(false)
const [currentPage, setCurrentPage] = useState(1)
const [currentPage, setCurrentPage] = useState(0)
const [hasNextPage, setHasNextPage] = useState(true)
const [toolData, setToolData] = useState<ToolVo[]>()
const [toolData, setToolData] = useState<ToolVo[]>([])
const getTool = () => {
const getTool = (page: number) => {
if (isLoading) {
return
}
setIsLoading(true)
void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
void r_tool_store_get({ currentPage })
void r_tool_store_get({ currentPage: page })
.then((res) => {
const response = res.data
switch (response.code) {
case DATABASE_SELECT_SUCCESS:
setToolData(response.data?.records)
setCurrentPage(page)
setToolData([...toolData, ...response.data!.records])
if (response.data?.current === response.data?.pages) {
setHasNextPage(false)
}
break
default:
void message.error('加载失败，请稍后重试')
}
})
.finally(() => {
@@ -117,13 +170,20 @@ const Store = () => {
})
}
const handleOnLoadMore = () => {
if (isLoading) {
return
}
getTool(currentPage + 1)
}
useEffect(() => {
getTool()
getTool(1)
}, [])
return (
<>
<FitFullscreen data-component={'store'}>
<FitFullscreen data-component={'tools-store'}>
<HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
<FlexBox direction={'horizontal'} className={'root-content'}>
{toolData?.map((value) => (
@@ -136,13 +196,15 @@ const Store = () => {
}
toolName={value.name}
toolId={value.toolId}
url={''}
toolDesc={value.description}
url={`/view/${value.author.username}/${value.toolId}`}
authorName={value.author.userInfo.nickname}
authorAvatar={value.author.userInfo.avatar}
authorUsername={value.author.username}
ver={value.ver}
/>
))}
{hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
</FlexBox>
</HideScrollbar>
</FitFullscreen>

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

@@ -16,22 +16,32 @@ const View = () => {
const [compiledCode, setCompiledCode] = useState('')
const render = (toolVo: ToolVo) => {
try {
const baseDist = base64ToStr(toolVo.base.dist.data!)
const files = base64ToFiles(toolVo.source.data!)
const importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap
if (username === '!') {
try {
const baseDist = base64ToStr(toolVo.base.dist.data!)
const files = base64ToFiles(toolVo.source.data!)
const importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap
void compiler
.compile(files, importMap, toolVo.entryPoint)
.then((result) => {
const output = result.outputFiles[0].text
setCompiledCode(`${output}\n${baseDist}`)
})
.catch((reason) => {
void message.error(`编译失败：${reason}`)
})
} catch (e) {
void message.error('载入工具失败')
void compiler
.compile(files, importMap, toolVo.entryPoint)
.then((result) => {
const output = result.outputFiles[0].text
setCompiledCode(`${output}\n${baseDist}`)
})
.catch((reason) => {
void message.error(`编译失败：${reason}`)
})
} catch (e) {
void message.error('载入工具失败')
}
} else {
try {
const baseDist = base64ToStr(toolVo.base.dist.data!)
const dist = base64ToStr(toolVo.dist.data!)
setCompiledCode(`${dist}\n${baseDist}`)
} catch (e) {
void message.error('载入工具失败')
}
}
}

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

@@ -36,6 +36,7 @@ interface CommonCardProps
url?: string
onOpen?: () => void
onEdit?: () => void
onSource?: () => void
onPublish?: () => void
onCancelReview?: () => void
onDelete?: () => void
@@ -58,6 +59,7 @@ const CommonCard = ({
url,
onOpen,
onEdit,
onSource,
onPublish,
onCancelReview,
onDelete,
@@ -102,6 +104,11 @@ const CommonCard = ({
</AntdButton.Group>
</div>
)}
{onSource && (
<AntdButton size={'small'} onClick={onSource}>
源码
</AntdButton>
)}
{onCancelReview && (
<AntdButton size={'small'} onClick={onCancelReview}>
取消审核
@@ -140,15 +147,23 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
}
const handleOnEditTool = () => {
if (selectedTool.publish === '0' && ['NONE', 'REJECT'].includes(selectedTool.review)) {
if (['NONE', 'REJECT'].includes(selectedTool.review)) {
return () => {
navigate(`/edit/${tools[0].toolId}`)
}
}
}
const handleOnSourceTool = () => {
if (selectedTool.review === 'PASS') {
return () => {
navigate(`/source/!/${selectedTool.toolId}/${selectedTool.ver}`)
}
}
}
const handleOnPublishTool = () => {
if (selectedTool.publish === '0' && ['NONE', 'REJECT'].includes(selectedTool.review)) {
if (['NONE', 'REJECT'].includes(selectedTool.review)) {
return () => {
onSubmit?.(selectedTool)
}
@@ -156,7 +171,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
}
const handleOnCancelReview = () => {
if (selectedTool.publish === '0' && selectedTool.review === 'PROCESSING') {
if (selectedTool.review === 'PROCESSING') {
return () => {
onCancel?.(selectedTool)
}
@@ -178,6 +193,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
toolId={selectedTool.toolId}
onOpen={handleOnOpenTool}
onEdit={handleOnEditTool()}
onSource={handleOnSourceTool()}
onPublish={handleOnPublishTool()}
onCancelReview={handleOnCancelReview()}
onDelete={handleOnDeleteTool}
@@ -189,10 +205,10 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
onChange={handleOnVersionChange}
options={tools.map((value) => ({
value: value.id,
label: `${value.ver}${value.publish === '0' ? '*' : ''}`
label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`
}))}
/>
{tools.every((value) => value.publish !== '0') && (
{tools.every((value) => value.review === 'PASS') && (
<AntdTooltip title={'更新'}>
<Icon
component={IconOxygenUpgrade}

22
src/router/tools.tsx
View File

@@ -17,8 +17,7 @@ export const tools: RouteJsonObject[] = [
name: '工具商店',
titlePostfix: ' - 商店',
icon: lazy(() => import('~icons/oxygen/store')),
menu: true,
auth: true
menu: true
},
{
path: 'create',
@@ -50,7 +49,24 @@ export const tools: RouteJsonObject[] = [
absolutePath: '/edit',
id: 'tools-edit',
component: lazy(() => import('@/pages/Tools/Edit')),
name: '查看'
name: '编辑',
auth: true
},
{
path: 'source/:username/:toolId/:ver',
absolutePath: '/source',
id: 'tools-source-ver',
component: lazy(() => import('@/pages/Tools/Source')),
name: '源码',
auth: true
},
{
path: 'source/:username/:toolId',
absolutePath: '/source',
id: 'tools-source',
component: lazy(() => import('@/pages/Tools/Source')),
name: '源码',
auth: true
},
{
path: '*',