add prefab-link inspector ,creat i18n of components 's inspector (#24)

* add prefab-link inspector ,creat i18n of components

* Update prefab-link.js

* format html

editor/i18n/en/components.js

@@ -0,0 +1,23 @@
+module.exports = {
+    safe_area: {
+        brief_help:
+            'This component is used to adjust the layout of current node to respect the safe area of a notched mobile device such as the iPhone X.'
+            + 'It is typically used for the top node of the UI interaction area. (It will take effect automatically on mobile device and has no effect in the editor.)',
+    },
+
+    particle_system_2d: {
+        sync: 'Sync',
+        sync_tips: 'Synchronize the parameters in the File to Custom.',
+        export: 'Export',
+        export_error: 'This resource does not support exports outside of the project.',
+        export_tips: 'Export custom particle data to plist file.',
+    },
+
+    prefab_link: {
+        brief_help:
+            'Since the new Prefab system is not yet complete, the prefab that has a large difference with prefab asset cannot be automatically migrated. '
+            + 'This component is used to save the relationship between the node with the referenced prefab asset in the old Prefab system. '
+            + 'When the new Prefab system is complete, it will be automatically migrated to the new Prefab system.',
+    },
+
+};

editor/i18n/zh/components.js

@@ -0,0 +1,17 @@
+module.exports = {
+    safe_area: {
+        brief_help:
+            '该组件会将所在节点的布局适配到 iPhone X 等异形屏手机的安全区域内，通常用于 UI 交互区域的顶层节点。该组件将在真机上将自动生效，在编辑器下没有效果。',
+    },
+    particle_system_2d: {
+        sync: '同步',
+        sync_tips: '同步 File 中的参数到 Custom',
+        export: '导出',
+        export_tips: '将自定义的粒子数据导出成 plist 文件',
+    },
+    prefab_link: {
+        brief_help:
+            '由于新的 Prefab 系统还不完善，所以旧的 Prefab 系统中和 Prefab 资源差异过大的 Prefab 无法实现自动迁移。'
+            + '此组件用于保存在旧 Prefab 系统中这个节点关联的 Prefab 资源，等新的 Prefab 系统完善，会自动迁移到新的 Prefab 系统上。',
+    },
+};

editor/inspector/components.js

@@ -2,6 +2,7 @@ const { join } = require('path');
 
 module.exports = {
     // 'cc.UITransform': join(__dirname, './components/class.js'),
+    'cc.PrefabLink': join(__dirname, './components/prefab-link.js'),
     'cc.PageView': join(__dirname, './components/page-view.js'),
-    'cc.VideoPlayer': join(__dirname, './components/video-player.js')
+    'cc.VideoPlayer': join(__dirname, './components/video-player.js'),
 };

editor/inspector/components/prefab-link.js

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+const propUtils = require('../utils/prop');
+
+export const template = `
+<div class="prefab-link">
+    <style>
+        #prefabTips {
+            display: 'block';
+            background-color: '#333';
+            border: '1px solid #666';
+            border-radius: '3px';
+            margin: '10px';
+            padding: '10px';
+        }
+    </style>
+    <ui-label id="prefabTips" value="i18n:ENGINE.components.prefab_link.brief_help"></ui-label>
+
+    <!-- 渲染其他没有接管的数据 -->
+    <div id="customProps"></div>
+</div>
+
+`;
+
+exports.$ = {
+    customProps: '#customProps',
+};
+const uiElements = {
+    customProps: {
+        update () {
+            this.$.customProps.replaceChildren(...propUtils.getCustomPropElements([], this.dump, (element, prop) => {
+                element.className = 'customProp';
+                if (prop.dump.visible) {
+                    element.render(prop.dump);
+                }
+                element.style = prop.dump.visible ? '' : 'display: none;';
+            }));
+        },
+    },
+};
+
+exports.ready = function () {
+    for (const key in uiElements) {
+        const element = uiElements[key];
+        if (typeof element.ready === 'function') {
+            element.ready.call(this);
+        }
+    }
+};
+exports.update = function (dump) {
+    for (const key in dump.value) {
+        const info = dump.value[key];
+        if (dump.values) {
+            info.values = dump.values.map((value) => value[key].value);
+        }
+    }
+    this.dump = dump;
+    for (const key in uiElements) {
+        const element = uiElements[key];
+        if (typeof element.update === 'function') {
+            element.update.call(this);
+        }
+    }
+};