docs(core): update play ground

Author: HaydenOrz

package.json

@@ -43,5 +43,7 @@
     "prettier": "^2.2.0",
     "typescript": "^4.7.4"
   },
-  "license": "ISC"
+  "license": "ISC",
+  "packageManager": "pnpm@6.35.0"
+  
 }

packages/playground/src/components/titleWithToolbar/index.less

@@ -10,10 +10,16 @@
         font-weight: 500;
     }
     .toolbar-title-toolbar {
-        .anticon svg {
+        height: 100%;
+        & > span {
+            display: inline-flex;
             cursor: pointer;
-            font-size: 14px;
-            margin-left: 12px;
+            padding: 0 6px;
+            height: 100%;
+            align-items: center;
+            .anticon svg {
+                font-size: 14px;
+            }
         }
     }
 }

packages/playground/src/components/titleWithToolbar/index.tsx

@@ -11,7 +11,7 @@ import dataSyncFormMeta from '../formSample/jsonSample/dataSync';
 import './index.less';
 import type { DefaultOptionType } from 'antd/lib/select';
 
-const options: DefaultOptionType[] = [
+export const templateOptions: DefaultOptionType[] = [
     {
         label: '登录表单',
         value: JSON.stringify(loginFormMeta, null, 4),
@@ -43,7 +43,7 @@ const TitleWithToolbar: React.FC<TitleWithToolbarProps> = (props) => {
                         style={{ width: 150, marginLeft: 12 }}
                         placeholder="选择模板以导入"
                         value={null}
-                        options={options}
+                        options={templateOptions}
                         onSelect={(value) => {
                             props.onImportTemplate(value);
                         }}
@@ -52,28 +52,32 @@ const TitleWithToolbar: React.FC<TitleWithToolbarProps> = (props) => {
             </p>
             <span className="toolbar-title-toolbar">
                 {props.onDownload ? (
-                    <Tooltip title="下载">
-                        <DownloadOutlined
-                            onClick={() => props.onDownload?.()}
-                        />
-                    </Tooltip>
+                    <span onClick={() => props.onDownload?.()}>
+                        <Tooltip title="下载">
+                            <DownloadOutlined />
+                        </Tooltip>
+                    </span>
                 ) : null}
                 {props.onCopy ? (
-                    <Tooltip title="复制">
-                        <CopyOutlined onClick={() => props.onCopy?.()} />
-                    </Tooltip>
+                    <span onClick={() => props.onCopy?.()}>
+                        <Tooltip title="复制">
+                            <CopyOutlined />
+                        </Tooltip>
+                    </span>
                 ) : null}
                 {props.onFormat ? (
-                    <Tooltip title="格式化">
-                        <FormatPainterOutlined
-                            onClick={() => props.onFormat?.()}
-                        />
-                    </Tooltip>
+                    <span onClick={() => props.onFormat?.()}>
+                        <Tooltip title="格式化">
+                            <FormatPainterOutlined />
+                        </Tooltip>
+                    </span>
                 ) : null}
                 {props.onReload ? (
-                    <Tooltip title="刷新">
-                        <ReloadOutlined onClick={() => props.onReload?.()} />
-                    </Tooltip>
+                    <span onClick={() => props.onReload?.()}>
+                        <Tooltip title="刷新">
+                            <ReloadOutlined />
+                        </Tooltip>
+                    </span>
                 ) : null}
             </span>
         </p>

packages/playground/src/pages/playground/workbench/workbench.tsx

@@ -28,6 +28,9 @@ const WorkBench: React.FC<workbenchProps> = () => {
         const file = files?.find((w) => w.name === workInProgress);
         setEditorValue(configEditorRef.current, file?.configContent ?? '');
         setEditorValue(valueEditorRef.current, file?.valuesContent ?? '');
+        if (file?.valuesContent) {
+            refreshForm();
+        }
     }, [workInProgress]);
 
     const saveCurrentPage = debounceFunctionWrap(() => {

packages/playground/src/store/reducers/workbenchSlice.ts

@@ -1,6 +1,8 @@
 import { createSlice } from '@reduxjs/toolkit';
 export const DefaultWip = 'untitled';
 
+import { templateOptions } from '@/components/titleWithToolbar';
+
 export interface FileMetaType {
     name: string;
     configContent: string;
@@ -17,8 +19,8 @@ export const initialState: WorkbenchType = {
     files: [
         {
             name: DefaultWip,
-            configContent: '',
-            valuesContent: '',
+            configContent: templateOptions[1].value as string,
+            valuesContent: '{}',
             gmtModified: Date.now(),
         },
     ],