diff --git a/src/assets/css/pages/tools/create.scss b/src/assets/css/pages/tools/create.scss new file mode 100644 index 0000000..dea6b9a --- /dev/null +++ b/src/assets/css/pages/tools/create.scss @@ -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; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/assets/svg/help.svg b/src/assets/svg/help.svg new file mode 100644 index 0000000..189c1ca --- /dev/null +++ b/src/assets/svg/help.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svg/newProject.svg b/src/assets/svg/newProject.svg new file mode 100644 index 0000000..23d79f4 --- /dev/null +++ b/src/assets/svg/newProject.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svg/store.svg b/src/assets/svg/store.svg new file mode 100644 index 0000000..8362142 --- /dev/null +++ b/src/assets/svg/store.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Playground/Output/Preview/preview.scss b/src/components/Playground/Output/Preview/preview.scss index 37f7040..9fd2079 100644 --- a/src/components/Playground/Output/Preview/preview.scss +++ b/src/components/Playground/Output/Preview/preview.scss @@ -1,6 +1,8 @@ [data-component=playground-preview] { display: flex; position: relative; + width: 100%; + height: 100%; iframe { border: none; diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts index da960ca..dfa88ec 100644 --- a/src/components/Playground/files.ts +++ b/src/components/Playground/files.ts @@ -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 diff --git a/src/components/Playground/shared.ts b/src/components/Playground/shared.ts index e144fdb..d220e18 100644 --- a/src/components/Playground/shared.ts +++ b/src/components/Playground/shared.ts @@ -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 } diff --git a/src/components/Playground/templates.ts b/src/components/Playground/templates.ts new file mode 100644 index 0000000..3b1ac93 --- /dev/null +++ b/src/components/Playground/templates.ts @@ -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 diff --git a/src/components/Playground/templates/init/App.tsx b/src/components/Playground/templates/base/App.tsx similarity index 100% rename from src/components/Playground/templates/init/App.tsx rename to src/components/Playground/templates/base/App.tsx diff --git a/src/components/Playground/templates/init/import-map.json b/src/components/Playground/templates/base/import-map.json similarity index 100% rename from src/components/Playground/templates/init/import-map.json rename to src/components/Playground/templates/base/import-map.json diff --git a/src/components/Playground/templates/init/main.tsx b/src/components/Playground/templates/base/main.tsx similarity index 100% rename from src/components/Playground/templates/init/main.tsx rename to src/components/Playground/templates/base/main.tsx diff --git a/src/components/Playground/templates/init/tsconfig.json b/src/components/Playground/templates/base/tsconfig.json similarity index 100% rename from src/components/Playground/templates/init/tsconfig.json rename to src/components/Playground/templates/base/tsconfig.json diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx deleted file mode 100644 index f3ba8be..0000000 --- a/src/pages/OnlineEditor.tsx +++ /dev/null @@ -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 ( - <> - - - - - ) -} - -export default OnlineEditor diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx new file mode 100644 index 0000000..fb0e8f5 --- /dev/null +++ b/src/pages/Tools/Create.tsx @@ -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 ( + + + + + 配置 + + + +
+ + + + + + + + + + + .<数字>.<数字>', eg. 1.0.3` + } + ]} + > + + + + + {Object.keys(templates).map((item) => ( + + {templates[item].name} + + ))} + + + + + + + 关键字 + + + + + } + name={'keyword'} + rules={[{ required: true, message: '请输入关键字' }]} + > + + + + 类别 + + + + + } + name={'category'} + rules={[{ required: true }]} + > + + + + + 创建 + + + +
+ + + + + + 预览 + + + + + + + + ) +} + +export default Create diff --git a/src/pages/Tools/Translation.tsx b/src/pages/Tools/Translation.tsx deleted file mode 100644 index bb9dad6..0000000 --- a/src/pages/Tools/Translation.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const Translation = () => { - return <> -} - -export default Translation diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx index 0e5d787..b3dcb87 100644 --- a/src/pages/ToolsFramework.tsx +++ b/src/pages/ToolsFramework.tsx @@ -23,7 +23,7 @@ const ToolsFramework = () => { @@ -34,7 +34,7 @@ const ToolsFramework = () => { {tools.map((tool) => { return tool.menu && tool.id !== 'tools' && - tool.id !== 'tools-all' ? ( + tool.id !== 'tools-store' ? ( import('@/pages/OnlineEditor')), - name: '在线编辑器' - }, { path: '', absolutePath: '/', diff --git a/src/router/tools.tsx b/src/router/tools.tsx index aaad39c..30c6ada 100644 --- a/src/router/tools.tsx +++ b/src/router/tools.tsx @@ -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: '*',