优化 VarTree 的展示 & 增加 TangoConfigJson 协议文件

apps/playground/.umirc.ts

@@ -11,6 +11,7 @@ export default defineConfig({
   ],
   npmClient: 'yarn',
   mfsu: false,
+  codeSplitting: false,
   alias: {
     '@music163/tango-helpers': resolvePackageIndex('helpers/src/index.ts'),
     '@music163/tango-core': resolvePackageIndex('core/src/index.ts'),
@@ -40,6 +41,7 @@ export default defineConfig({
   https: {
     key: path.resolve(__dirname, 'local.netease.com-key.pem'),
     cert: path.resolve(__dirname, 'local.netease.com.pem'),
+    http2: false,
   },
   chainWebpack: (config: any) => {
     // @see https://github.com/graphql/graphql-js/issues/1272#issuecomment-393903706

apps/playground/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "author": "Wells <ww.sun@outlook.com>",
   "scripts": {
-    "dev": "HOST=local.netease.com umi dev",
+    "dev": "HOST=local.netease.com PORT=8001 umi dev",
     "build": "umi build",
     "postinstall": "umi setup",
     "setup": "umi setup",

apps/playground/src/helpers/index.tsx

@@ -14,23 +14,22 @@ export const bootHelperVariables = [
     title: '工具函数',
     children: [
       {
-        title: 'setStoreValue',
+        title: '设置变量值',
         key: '() => tango.setStoreValue("variableName", "variableValue")',
         type: 'function',
+        help: '设置状态值，tango.setStoreValue("variableName", "variableValue")',
       },
       {
-        title: 'getStoreValue',
+        title: '获取变量值',
         key: '() => tango.getStoreValue("variableName")',
         type: 'function',
+        help: '获取状态值',
       },
-      { title: 'openModal', key: '() => tango.openModal("")', type: 'function' },
-      { title: 'closeModal', key: '() => tango.closeModal("")', type: 'function' },
-      { title: 'navigateTo', key: '() => tango.navigateTo("/")', type: 'function' },
-      { title: 'showToast', key: '() => tango.showToast("hello")', type: 'function' },
-      { title: 'formatDate', key: '() => tango.formatDate("2022-12-12")', type: 'function' },
-      { title: 'formatNumber', key: '() => tango.formatDate(9999)', type: 'function' },
+      { title: '打开弹窗', key: '() => tango.openModal("")', type: 'function' },
+      { title: '关闭弹窗', key: '() => tango.closeModal("")', type: 'function' },
+      { title: '切换路由', key: '() => tango.navigateTo("/")', type: 'function' },
       {
-        title: 'copyToClipboard',
+        title: '拷贝到剪贴板',
         key: '() => tango.copyToClipboard("hello")',
         type: 'function',
       },

packages/designer/src/components/variable-tree.tsx

@@ -11,6 +11,7 @@ import {
   Empty,
   Popconfirm,
   Tooltip,
+  Alert,
 } from 'antd';
 import { Box, Text, css } from 'coral-system';
 import {
@@ -166,7 +167,7 @@ export function EditableVariableTree({
       height={height}
       position="relative"
     >
-      <Box p="l" width="40%" borderRight="solid" borderColor="line.normal">
+      <Box p="l" width="40%">
         <Box mb="m" position="sticky" top="0" bg="white" zIndex={2}>
           <Input.Group compact>
             <Search
@@ -201,68 +202,75 @@ export function EditableVariableTree({
         />
       </Box>
       {node ? (
-        <Panel
-          title={
-            {
-              preview: '变量值预览',
-              add: '添加变量',
-              define: '变量定义',
-            }[mode]
-          }
-          extra={
-            hasPanelSwitch && mode !== 'add' ? (
-              <Radio.Group
-                optionType="button"
-                buttonStyle="solid"
-                size="small"
-                value={mode}
-                onChange={(e) => setMode(e.target.value)}
-                options={previewOptions}
-              />
-            ) : null
-          }
-          width="60%"
-          borderRadius="m"
-          position="sticky"
-          top="0"
-          bodyProps={{ px: 'm' }}
-        >
-          {mode === 'preview' && (
-            <ValuePreview
-              value={getPreviewValue(node)}
-              onSelect={(valuePath) => {
-                return ['tango', node.key.replaceAll('.', '?.'), valuePath].join('.');
-              }}
-            />
-          )}
-          {mode === 'define' && (
-            <NodeDefineForm
-              node={node}
-              onSave={onSave}
-              onDelete={(item) => {
-                const [type, storeName, stateName] = item.key.split('.');
-                onDeleteVariable(storeName, stateName);
-                setNode(null);
-              }}
-            />
-          )}
-          {mode === 'add' && (
-            <AddNodeForm
-              parentNode={node}
-              onCancel={() => {
-                setMode(defaultMode);
-                setNode(null);
-              }}
-              onSubmit={(storeName, data) => {
-                onAddVariable(storeName, data);
-                setMode(defaultMode);
-                setNode(null);
-              }}
+        <Box width="60%" position="sticky" top="0">
+          {node.help && (
+            <Alert
+              type="info"
+              message={`使用说明：${node.help}`}
+              closable
+              style={{ marginBottom: 12 }}
             />
           )}
-        </Panel>
+          <Panel
+            shape="solid"
+            title={
+              {
+                preview: '变量值预览',
+                add: '添加变量',
+                define: '变量定义',
+              }[mode]
+            }
+            extra={
+              hasPanelSwitch && mode !== 'add' ? (
+                <Radio.Group
+                  optionType="button"
+                  buttonStyle="solid"
+                  size="small"
+                  value={mode}
+                  onChange={(e) => setMode(e.target.value)}
+                  options={previewOptions}
+                />
+              ) : null
+            }
+            bodyProps={{ px: 'm' }}
+          >
+            {mode === 'preview' && (
+              <ValuePreview
+                value={getPreviewValue(node)}
+                onSelect={(valuePath) => {
+                  return ['tango', node.key.replaceAll('.', '?.'), valuePath].join('.');
+                }}
+              />
+            )}
+            {mode === 'define' && (
+              <NodeDefineForm
+                node={node}
+                onSave={onSave}
+                onDelete={(item) => {
+                  const [type, storeName, stateName] = item.key.split('.');
+                  onDeleteVariable(storeName, stateName);
+                  setNode(null);
+                }}
+              />
+            )}
+            {mode === 'add' && (
+              <AddNodeForm
+                parentNode={node}
+                onCancel={() => {
+                  setMode(defaultMode);
+                  setNode(null);
+                }}
+                onSubmit={(storeName, data) => {
+                  onAddVariable(storeName, data);
+                  setMode(defaultMode);
+                  setNode(null);
+                }}
+              />
+            )}
+          </Panel>
+        </Box>
       ) : (
-        <Panel title="提示" flex="1" position="sticky" top="0">
+        <Panel shape="solid" title="提示" flex="1" position="sticky" top="0">
           <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="请从左侧列表中选择一个变量" />
         </Panel>
       )}
@@ -469,11 +477,11 @@ interface NodePreviewProps {
 
 export function ValuePreview({ value, onSelect }: NodePreviewProps) {
   if (isNil(value)) {
-    return <span>暂时没有可预览的数据</span>;
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂时没有可预览的数据" />;
   }
 
   if (isFunction(value)) {
-    return <span>暂不支持预览函数</span>;
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂不支持预览函数" />;
   }
 
   if (typeof value === 'object') {
@@ -503,7 +511,7 @@ function NodeDefineForm({ node, onSave = noop, onDelete = noop }: NodeDefineProp
   const [error, setError] = useState('');
   const [editable, { on, off }] = useBoolean();
   if (isNil(node.raw)) {
-    return <Empty description="缺失定义数据" />;
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="缺失定义数据" />;
   }
   return (
     <Box>

packages/designer/src/toolbar/mode-switch.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Group } from 'coral-system';
 import { Modal } from 'antd';
-import { ToggleButton } from '@music163/tango-ui';
+import { ToggleButton, CodeOutlined } from '@music163/tango-ui';
 import { observer, useDesigner, useWorkspace } from '@music163/tango-context';
-import { BorderOutlined, CodeOutlined } from '@ant-design/icons';
+import { BorderOutlined } from '@ant-design/icons';
 
 export const ModeSwitchTool = observer(() => {
   const workspace = useWorkspace();

packages/spec/README.md

@@ -0,0 +1,3 @@
+# Tango Config Spec
+
+This is the specification for the Tango Config format.

packages/spec/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "tango-spec",
+  "version": "1.0.1",
+  "description": "tango config spec",
+  "keywords": [
+    "json",
+    "schema"
+  ],
+  "author": "wwsun <ww.sww@outlook.com>",
+  "homepage": "https://github.com/NetEase/tango#readme",
+  "license": "MIT",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NetEase/tango.git"
+  },
+  "scripts": {
+    "test": "node ./__tests__/spec.test.js"
+  },
+  "bugs": {
+    "url": "https://github.com/NetEase/tango/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

packages/spec/tango-config.json

@@ -0,0 +1,118 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://unpkg.com/tango-spec/tango-config.json",
+  "title": "JSON Schema of tango.config.json",
+  "description": "tango.config.json is a configuration file for NetEase Tango apps",
+  "type": "object",
+  "properties": {
+    "packages": {
+      "type": "object",
+      "patternProperties": {
+        "^(?:@[a-z0-9-~][a-z0-9-._~]*/)?[a-z0-9-~][a-z0-9-._~]*$": {
+          "type": "object",
+          "properties": {
+            "description": {
+              "type": "string",
+              "description": "package description"
+            },
+            "version": {
+              "type": "string",
+              "description": "package version"
+            },
+            "library": {
+              "type": "string",
+              "description": "package library"
+            },
+            "type": {
+              "type": "string",
+              "description": "package type",
+              "enum": ["dependency", "bizDependency", "baseDependency"]
+            },
+            "resources": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              },
+              "description": "package resources"
+            },
+            "designerResources": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              },
+              "description": "package designer resources"
+            }
+          },
+          "additionalProperties": false,
+          "required": ["version", "library"]
+        }
+      },
+      "additionalProperties": false
+    },
+    "dataSource": {
+      "type": "object",
+      "properties": {
+        "ox": {
+          "type": "object",
+          "description": "music ox data provider",
+          "properties": {
+            "key": {
+              "type": "string",
+              "description": "dataSource provider name"
+            },
+            "value": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "app": {
+                    "type": "string",
+                    "description": "app name"
+                  },
+                  "branch": {
+                    "type": "string",
+                    "description": "branch name"
+                  }
+                },
+                "additionalProperties": false,
+                "required": ["app", "branch"]
+              }
+            }
+          }
+        }
+      }
+    },
+    "proxy": {
+      "type": "object",
+      "properties": {
+        "key": {
+          "type": "string",
+          "description": "the path of proxy rule"
+        },
+        "value": {
+          "type": "object",
+          "properties": {
+            "target": {
+              "type": "string",
+              "description": "the target of proxy rule"
+            },
+            "changeOrigin": {
+              "type": "boolean",
+              "description": "whether change origin of proxy rule"
+            }
+          },
+          "additionalProperties": false,
+          "required": ["target"]
+        }
+      }
+    },
+    "externalResources": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    }
+  },
+  "additionalProperties": true,
+  "required": ["packages"]
+}