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

Complete main UI #37

Merged
FatttSnake merged 192 commits from FatttSnake into dev 2024-02-23 16:31:17 +08:00
Conversation 0 Commits 192 Files Changed 215 +332 -345
18 changed files with 332 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ec3f552ec5 - Show all commits

48
src/assets/css/pages/tools/create.scss Normal file
View File

@@ -0,0 +1,48 @@
@use "@/assets/css/mixins" as mixins;
@use "@/assets/css/constants" as constants;
[data-component=tools-create] {
.root-content {
padding: 20px;
gap: 20px;
height: 100%;
width: 100%;
> * {
gap: 10px;
width: 0;
.title {
flex: 0 0 auto;
height: 40px;
> * {
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
font-size: 1.6em;
color: constants.$production-color;
font-weight: bolder;
}
}
.config {
.config-content {
padding: 20px;
.help {
margin-left: 6px;
color: constants.$font-main-color;
font-size: 0.8em;
}
.create-bt {
width: 100%;
font-weight: bold;
}
}
}
}
}
}

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

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1024 512c0 282.624-229.376 512-512 512S0 794.624 0 512 229.376 0 512 0s512 229.376 512 512z m-510.464 209.408c-23.552 0-43.008 19.456-43.008 43.008v9.728c0 23.552 19.456 42.496 43.008 42.496 23.552 0 43.008-18.944 43.008-42.496v-9.728c0-23.552-19.456-43.008-43.008-43.008z m10.24-481.792c-56.32-1.024-99.84 13.312-129.536 42.496-32.256 31.744-48.64 81.408-48.64 147.456v0.512c1.024 10.752 10.752 30.72 37.376 30.72 26.624 0 35.328-20.48 35.84-31.232-1.024-40.96 8.192-71.168 27.136-89.6 17.92-17.408 45.568-25.6 81.92-23.552 49.664 5.632 74.752 32.768 76.8 82.944-3.584 22.528-23.04 52.224-57.344 88.576C500.224 536.576 476.16 580.608 476.16 619.52v39.424c1.536 9.728 10.752 27.648 35.328 27.648 24.064 0 33.792-17.92 35.328-27.648v-27.648c0-29.696 22.016-66.56 66.048-108.544 48.128-44.032 72.192-85.504 72.192-123.392-4.608-101.888-58.368-155.648-161.28-159.744z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 948 B

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

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M899.5 288.4L528 74c-9.9-5.7-22.1-5.7-32 0L140.3 278.9c-10 5.6-16.1 16.2-16.2 27.6l-0.1 410.6c0 11.4 6.1 22 16 27.7L512 959v0.1c20-11.4 32-32.5 32-55.3l-0.1-372.6 323.7-187.3c19.7-11.5 31.9-32.6 31.9-55.5zM188 698.7V362.4l292 168.7v335.7L188 698.7z m323.8-223L220.4 306.9 512 138.7 803.6 307 511.8 475.7z" /><path d="M928 672H800V544c0-17.7-14.3-32-32-32s-32 14.3-32 32v128H608c-17.7 0-32 14.3-32 32s14.3 32 32 32h128v128c0 17.7 14.3 32 32 32s32-14.3 32-32V736h128c17.7 0 32-14.3 32-32s-14.3-32-32-32z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 584 B

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

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M42.666667 149.482667A106.752 106.752 0 0 1 149.482667 42.666667h725.034666A106.752 106.752 0 0 1 981.333333 149.482667v725.034666A106.752 106.752 0 0 1 874.517333 981.333333H149.482667A106.752 106.752 0 0 1 42.666667 874.517333V149.482667z m85.333333 0v725.034666C128 886.421333 137.578667 896 149.482667 896h725.034666c11.904 0 21.482667-9.578667 21.482667-21.482667V149.482667C896 137.578667 886.421333 128 874.517333 128H149.482667C137.578667 128 128 137.578667 128 149.482667zM661.333333 213.333333a42.666667 42.666667 0 1 1 85.333334 0v106.666667c0 129.536-105.088 234.666667-234.666667 234.666667-129.536 0-234.666667-105.216-234.666667-234.666667v-106.666667a42.666667 42.666667 0 1 1 85.333334 0v106.666667c0 82.346667 66.944 149.333333 149.333333 149.333333 82.453333 0 149.333333-66.922667 149.333333-149.333333v-106.666667z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 918 B

2
src/components/Playground/Output/Preview/preview.scss
View File

@@ -1,6 +1,8 @@
[data-component=playground-preview] {
display: flex;
position: relative;
width: 100%;
height: 100%;
iframe {
border: none;

24
src/components/Playground/files.ts
View File

@@ -1,11 +1,7 @@
import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
import { languages } from 'monaco-editor'
import DiagnosticsOptions = languages.json.DiagnosticsOptions
import { IFile, IFiles, IImportMap, ILanguage, ITsconfig } from '@/components/Playground/shared'
import initTsconfigFile from '@/components/Playground/templates/init/tsconfig.json'
import initImportMapFile from '@/components/Playground/templates/init/import-map.json'
import main from '@/components/Playground/templates/init/main.tsx?raw'
import App from '@/components/Playground/templates/init/App.tsx?raw'
import { IFile, IFiles, ILanguage } from '@/components/Playground/shared'
import tsconfigSchema from '@/components/Playground/tsconfig-schema.json'
import importMapSchema from '@/components/Playground/import-map-schema.json'
@@ -123,21 +119,3 @@ export const tsconfigJsonDiagnosticsOptions: DiagnosticsOptions = {
}
]
}
export const initFiles: IFiles = getFilesFromUrl() || {
[ENTRY_FILE_NAME]: {
name: ENTRY_FILE_NAME,
language: fileNameToLanguage(ENTRY_FILE_NAME),
value: main,
hidden: true
},
[MAIN_FILE_NAME]: {
name: MAIN_FILE_NAME,
language: fileNameToLanguage(MAIN_FILE_NAME),
value: App
}
}
export const initImportMap: IImportMap = initImportMapFile
export const initTsconfig: ITsconfig = initTsconfigFile

11
src/components/Playground/shared.ts
View File

@@ -14,6 +14,17 @@ export interface IFiles {
[key: string]: IFile
}
export interface ITemplate {
name: string
tsconfig: ITsconfig
importMap: IImportMap
files: IFiles
}
export interface ITemplates {
[key: string]: ITemplate
}
export interface IImportMap {
imports: Record<string, string>
}

59
src/components/Playground/templates.ts Normal file
View File

@@ -0,0 +1,59 @@
import { ITemplates } from '@/components/Playground/shared'
import { ENTRY_FILE_NAME, MAIN_FILE_NAME } from '@/components/Playground/files'
import baseTsconfig from '@/components/Playground/templates/base/tsconfig.json'
import baseImportMap from '@/components/Playground/templates/base/import-map.json'
import baseMain from '@/components/Playground/templates/base/main.tsx?raw'
import baseApp from '@/components/Playground/templates/base/App.tsx?raw'
import demoTsconfig from '@/components/Playground/templates/demo/tsconfig.json'
import demoImportMap from '@/components/Playground/templates/demo/import-map.json'
import demoMain from '@/components/Playground/templates/demo/main.tsx?raw'
import demoApp from '@/components/Playground/templates/demo/App.tsx?raw'
import demoAppCSS from '@/components/Playground/templates/demo/App.css?raw'
const templates: ITemplates = {
base: {
name: '基础',
tsconfig: baseTsconfig,
importMap: baseImportMap,
files: {
[ENTRY_FILE_NAME]: {
name: ENTRY_FILE_NAME,
language: 'typescript',
value: baseMain,
hidden: true
},
[MAIN_FILE_NAME]: {
name: MAIN_FILE_NAME,
language: 'typescript',
value: baseApp
}
}
},
demo: {
name: 'Demo',
tsconfig: demoTsconfig,
importMap: demoImportMap,
files: {
[ENTRY_FILE_NAME]: {
name: ENTRY_FILE_NAME,
language: 'typescript',
value: demoMain,
hidden: true
},
[MAIN_FILE_NAME]: {
name: MAIN_FILE_NAME,
language: 'typescript',
value: demoApp
},
['App.css']: {
name: 'App.css',
language: 'css',
value: demoAppCSS
}
}
}
}
export default templates

0
src/components/Playground/templates/init/App.tsx → src/components/Playground/templates/base/App.tsx
View File

0
src/components/Playground/templates/init/import-map.json → src/components/Playground/templates/base/import-map.json
View File

0
src/components/Playground/templates/init/main.tsx → src/components/Playground/templates/base/main.tsx
View File

0
src/components/Playground/templates/init/tsconfig.json → src/components/Playground/templates/base/tsconfig.json
View File

19
src/pages/OnlineEditor.tsx
View File

@@ -1,19 +0,0 @@
import FitFullscreen from '@/components/common/FitFullscreen'
import Playground from '@/components/Playground'
import { initFiles, initImportMap, initTsconfig } from '@/components/Playground/files'
const OnlineEditor = () => {
return (
<>
<FitFullscreen>
<Playground
initFiles={initFiles}
initImportMapRaw={JSON.stringify(initImportMap, null, 2)}
initTsconfigRaw={JSON.stringify(initTsconfig, null, 2)}
/>
</FitFullscreen>
</>
)
}
export default OnlineEditor

191
src/pages/Tools/Create.tsx Normal file
View File

@@ -0,0 +1,191 @@
import '@/assets/css/pages/tools/create.scss'
import FlexBox from '@/components/common/FlexBox.tsx'
import Card from '@/components/common/Card.tsx'
import FitFullscreen from '@/components/common/FitFullscreen.tsx'
import Preview from '@/components/Playground/Output/Preview'
import templates from '@/components/Playground/templates.ts'
import { useEffect } from 'react'
import HideScrollbar from '@/components/common/HideScrollbar.tsx'
import Icon from '@ant-design/icons'
const Create = () => {
const [form] = AntdForm.useForm<{
name: string
toolId: string
desc: string
version: string
template: string
private: boolean
keyword: string[]
category: string[]
}>()
const formValues = AntdForm.useWatch([], form)
const [template, setTemplate] = useState(templates['demo'])
useEffect(() => {
formValues?.template && setTemplate(templates[formValues?.template])
}, [formValues?.template])
useEffect(() => {
const temp: string[] = []
formValues?.keyword.forEach((item) => {
if (item.length <= 10) {
temp.push(item)
}
})
form.setFieldValue('keyword', temp)
}, [form, formValues?.keyword])
return (
<FitFullscreen data-component={'tools-create'}>
<FlexBox direction={'horizontal'} className={'root-content'}>
<FlexBox>
<Card className={'title'}>
<FlexBox>配置</FlexBox>
</Card>
<Card className={'config'}>
<HideScrollbar>
<div className={'config-content'}>
<AntdForm form={form} layout={'vertical'}>
<AntdForm.Item
label={'名称'}
name={'name'}
rules={[{ required: true }]}
>
<AntdInput
maxLength={20}
showCount
placeholder={'请输入名称'}
/>
</AntdForm.Item>
<AntdForm.Item
label={'工具 ID'}
name={'toolId'}
rules={[
{ required: true },
{
pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,19}$/,
message:
'只能包含字母、数字、连字符和下划线，不能以数字开头'
}
]}
>
<AntdInput
maxLength={20}
showCount
placeholder={'请输入工具 ID'}
/>
</AntdForm.Item>
<AntdForm.Item label={'简介'} name={'desc'}>
<AntdInput.TextArea
autoSize={{ minRows: 6, maxRows: 6 }}
maxLength={200}
showCount
placeholder={'请输入简介'}
/>
</AntdForm.Item>
<AntdForm.Item
label={'版本'}
name={'version'}
rules={[
{ required: true },
{
pattern: /^\d+\.\d+\.\d+$/,
message: `格式必须为 '<数字>.<数字>.<数字>', eg. 1.0.3`
}
]}
>
<AntdInput
maxLength={10}
showCount
placeholder={'请输入版本'}
/>
</AntdForm.Item>
<AntdForm.Item
label={'模板'}
name={'template'}
initialValue={'demo'}
rules={[{ required: true }]}
>
<AntdSelect>
{Object.keys(templates).map((item) => (
<AntdSelect.Option key={item}>
{templates[item].name}
</AntdSelect.Option>
))}
</AntdSelect>
</AntdForm.Item>
<AntdForm.Item
label={'访问权限'}
name={'private'}
initialValue={false}
>
<AntdSwitch
checkedChildren={'私有'}
unCheckedChildren={'公开'}
/>
</AntdForm.Item>
<AntdForm.Item
label={
<>
关键字
<AntdTooltip
title={'工具搜索（每个不超过10个字符）'}
>
<Icon
className={'help'}
component={IconOxygenHelp}
/>
</AntdTooltip>
</>
}
name={'keyword'}
rules={[{ required: true, message: '请输入关键字' }]}
>
<AntdSelect mode={'tags'} maxCount={20} />
</AntdForm.Item>
<AntdForm.Item
label={
<>
类别
<AntdTooltip title={'工具分类'}>
<Icon
className={'help'}
component={IconOxygenHelp}
/>
</AntdTooltip>
</>
}
name={'category'}
rules={[{ required: true }]}
>
<AntdSelect mode={'multiple'} />
</AntdForm.Item>
<AntdForm.Item>
<AntdButton className={'create-bt'} type={'primary'}>
创建
</AntdButton>
</AntdForm.Item>
</AntdForm>
</div>
</HideScrollbar>
</Card>
</FlexBox>
<FlexBox>
<Card className={'title'}>
<FlexBox>预览</FlexBox>
</Card>
<Card className={'preview'}>
<Preview
iframeKey={JSON.stringify(template.importMap)}
files={template.files}
importMap={template.importMap}
/>
</Card>
</FlexBox>
</FlexBox>
</FitFullscreen>
)
}
export default Create

5
src/pages/Tools/Translation.tsx
View File

@@ -1,5 +0,0 @@
const Translation = () => {
return <></>
}
export default Translation

4
src/pages/ToolsFramework.tsx
View File

@@ -23,7 +23,7 @@ const ToolsFramework = () => {
<Sidebar.Item end path={''} icon={tools[0].icon} text={tools[0].name} />
<Sidebar.Item
end
path={'all'}
path={'store'}
icon={tools[1].icon}
text={tools[1].name}
/>
@@ -34,7 +34,7 @@ const ToolsFramework = () => {
{tools.map((tool) => {
return tool.menu &&
tool.id !== 'tools' &&
tool.id !== 'tools-all' ? (
tool.id !== 'tools-store' ? (
<Sidebar.Item
path={tool.absolutePath}
icon={tool.icon}

7
src/router/index.tsx
View File

@@ -61,13 +61,6 @@ const root: RouteJsonObject[] = [
auth: true,
permission: true
},
{
path: 'online-editor',
absolutePath: '/online-editor',
id: 'online-editor',
component: lazy(() => import('@/pages/OnlineEditor')),
name: '在线编辑器'
},
{
path: '',
absolutePath: '/',

304
src/router/tools.tsx
View File

@@ -10,300 +10,26 @@ export const tools: RouteJsonObject[] = [
auth: false
},
{
path: 'all',
absolutePath: '/all',
id: 'tools-all',
path: 'store',
absolutePath: '/store',
id: 'tools-store',
component: lazy(() => import('@/pages/Tools')),
name: '全部工具',
titlePostfix: ' - 全部工具',
icon: lazy(() => import('~icons/oxygen/tool')),
name: '工具商店',
titlePostfix: ' - 商店',
icon: lazy(() => import('~icons/oxygen/store')),
menu: true,
auth: false
auth: true
},
{
path: 'translation',
absolutePath: '/translation',
id: 'tools-translation',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译',
icon: lazy(() => import('~icons/oxygen/jenkins')),
path: 'create',
absolutePath: '/create',
id: 'tools-create',
component: lazy(() => import('@/pages/Tools/Create')),
name: '创建工具',
titlePostfix: ' - 创建新工具',
icon: lazy(() => import('~icons/oxygen/newProject')),
menu: true,
auth: false,
children: [
{
path: '1',
absolutePath: '/translation/1',
id: '1',
name: '翻译1',
icon: lazy(() => import('~icons/oxygen/logo')),
menu: true,
auth: false
},
{
path: '2',
absolutePath: '/translation/2',
id: '2',
name: '翻译2',
menu: true,
auth: false
}
]
},
{
path: 'translation-',
absolutePath: '/translation-',
id: 'tools-translation-',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译-',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false,
children: [
{
path: '1-',
absolutePath: '/translation-/1-',
id: '1-',
name: '翻译1-',
menu: true,
auth: false
},
{
path: '2-',
absolutePath: '/translation-/2-',
id: '2-',
name: '翻译2-',
menu: true,
auth: false
}
]
},
{
path: 'translation--',
absolutePath: '/translation--',
id: 'tools-translation--',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--1',
absolutePath: '/translation--1',
id: 'tools-translation--1',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--1',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--2',
absolutePath: '/translation--2',
id: 'tools-translation--2',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--2',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--3',
absolutePath: '/translation--3',
id: 'tools-translation--3',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--3',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--4',
absolutePath: '/translation--4',
id: 'tools-translation--4',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--4',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--5',
absolutePath: '/translation--5',
id: 'tools-translation--5',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--5',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--6',
absolutePath: '/translation--6',
id: 'tools-translation--6',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--6',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--7',
absolutePath: '/translation--7',
id: 'tools-translation--7',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--7',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--8',
absolutePath: '/translation--8',
id: 'tools-translation--8',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--8',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--9',
absolutePath: '/translation--9',
id: 'tools-translation--9',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--9',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--10',
absolutePath: '/translation--10',
id: 'tools-translation--10',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--10',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--1-',
absolutePath: '/translation--1-',
id: 'tools-translation--1-',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--1-',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--2-',
absolutePath: '/translation--2-',
id: 'tools-translation--2-',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--2-',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--3-',
absolutePath: '/translation--3-',
id: 'tools-translation--3-',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--3-',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--4-',
absolutePath: '/translation--4-',
id: 'tools-translation--4-',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--4-',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--5-',
absolutePath: '/translation--5-',
id: 'tools-translation--5-',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--5-',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--6-',
absolutePath: '/translation--6-',
id: 'tools-translation--6-',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--6-',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--7-',
absolutePath: '/translation--7-',
id: 'tools-translation--7-',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--7-',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--8-',
absolutePath: '/translation--8-',
id: 'tools-translation--8-',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--8-',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--9-',
absolutePath: '/translation--9-',
id: 'tools-translation--9-',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--9-',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false
},
{
path: 'translation--10-',
absolutePath: '/translation--10-',
id: 'tools-translation--10-',
component: lazy(() => import('@/pages/Tools/Translation')),
name: '翻译--10-',
icon: lazy(() => import('~icons/oxygen/jenkins')),
menu: true,
auth: false,
children: [
{
path: '1-1',
absolutePath: '/translation--10-/1-1',
id: '1-1',
name: '翻译1-',
menu: true,
auth: false
},
{
path: '2-1',
absolutePath: '/translation--10-/2-1',
id: '2-1',
name: '翻译2-',
menu: true,
auth: false
}
]
auth: true
},
{
path: '*',