Optimize Playground. Add create tool page.

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;

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

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<string, string>
 }

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