From 99483604355552934a5aebc94620474621f9c4e8 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 28 Nov 2024 21:07:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(vue-components):=20=E6=B7=BB=E5=8A=A0class?=
 =?UTF-8?q?Name=E9=85=8D=E7=BD=AE=EF=BC=8Cpage=E6=96=B0=E5=A2=9Ecss?=
 =?UTF-8?q?=E3=80=81cssFile=E3=80=81jsFile=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue-components/button/package.json            |  2 +-
 vue-components/button/src/formConfig.ts       |  5 ++++
 vue-components/container/package.json         |  2 +-
 vue-components/container/src/formConfig.ts    |  5 ++++
 vue-components/img/package.json               |  2 +-
 vue-components/img/src/formConfig.ts          |  5 ++++
 .../iterator-container/package.json           |  2 +-
 .../iterator-container/src/formConfig.ts      |  5 ++++
 .../page-fragment-container/package.json      |  2 +-
 .../page-fragment-container/src/formConfig.ts |  5 ++++
 vue-components/page/package.json              |  2 +-
 vue-components/page/src/formConfig.ts         | 30 ++++++++++++++++++-
 vue-components/page/src/index.vue             | 29 +++++++++++++++++-
 vue-components/qrcode/package.json            |  2 +-
 vue-components/qrcode/src/formConfig.ts       |  5 ++++
 vue-components/text/package.json              |  2 +-
 vue-components/text/src/formConfig.ts         |  5 ++++
 17 files changed, 100 insertions(+), 10 deletions(-)

diff --git a/vue-components/button/package.json b/vue-components/button/package.json
index e1195f33..4c2b1255 100644
--- a/vue-components/button/package.json
+++ b/vue-components/button/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.0.4",
+  "version": "0.0.5",
   "name": "@tmagic/vue-button",
   "type": "module",
   "main": "src/index.ts",
diff --git a/vue-components/button/src/formConfig.ts b/vue-components/button/src/formConfig.ts
index 22a9a517..689c5d92 100644
--- a/vue-components/button/src/formConfig.ts
+++ b/vue-components/button/src/formConfig.ts
@@ -17,6 +17,11 @@
  */
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     text: '文本',
     name: 'text',
diff --git a/vue-components/container/package.json b/vue-components/container/package.json
index 5a2d4102..1f115652 100644
--- a/vue-components/container/package.json
+++ b/vue-components/container/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.0.6",
+  "version": "0.0.7",
   "name": "@tmagic/vue-container",
   "type": "module",
   "main": "src/index.ts",
diff --git a/vue-components/container/src/formConfig.ts b/vue-components/container/src/formConfig.ts
index 15b707ac..8afc103e 100644
--- a/vue-components/container/src/formConfig.ts
+++ b/vue-components/container/src/formConfig.ts
@@ -19,6 +19,11 @@
 import { getElById } from '@tmagic/core';
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     name: 'layout',
     text: '容器布局',
diff --git a/vue-components/img/package.json b/vue-components/img/package.json
index 78ade734..7ea4ad10 100644
--- a/vue-components/img/package.json
+++ b/vue-components/img/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.0.4",
+  "version": "0.0.5",
   "name": "@tmagic/vue-img",
   "type": "module",
   "main": "src/index.ts",
diff --git a/vue-components/img/src/formConfig.ts b/vue-components/img/src/formConfig.ts
index 82926bdb..62e30616 100644
--- a/vue-components/img/src/formConfig.ts
+++ b/vue-components/img/src/formConfig.ts
@@ -17,6 +17,11 @@
  */
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     text: '图片',
     name: 'src',
diff --git a/vue-components/iterator-container/package.json b/vue-components/iterator-container/package.json
index bd786f65..342239f5 100644
--- a/vue-components/iterator-container/package.json
+++ b/vue-components/iterator-container/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.0.4",
+  "version": "0.0.5",
   "name": "@tmagic/vue-iterator-container",
   "type": "module",
   "main": "src/index.ts",
diff --git a/vue-components/iterator-container/src/formConfig.ts b/vue-components/iterator-container/src/formConfig.ts
index b3cfcbef..5f0b34b2 100644
--- a/vue-components/iterator-container/src/formConfig.ts
+++ b/vue-components/iterator-container/src/formConfig.ts
@@ -18,6 +18,11 @@
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, NODE_CONDS_KEY } from '@tmagic/core';
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     name: 'iteratorData',
     text: '数据源数据',
diff --git a/vue-components/page-fragment-container/package.json b/vue-components/page-fragment-container/package.json
index 078a355e..cc32fd79 100644
--- a/vue-components/page-fragment-container/package.json
+++ b/vue-components/page-fragment-container/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.0.3",
+  "version": "0.0.4",
   "name": "@tmagic/vue-page-fragment-container",
   "type": "module",
   "main": "src/index.ts",
diff --git a/vue-components/page-fragment-container/src/formConfig.ts b/vue-components/page-fragment-container/src/formConfig.ts
index 3ba71aa2..756beec7 100644
--- a/vue-components/page-fragment-container/src/formConfig.ts
+++ b/vue-components/page-fragment-container/src/formConfig.ts
@@ -17,6 +17,11 @@
  */
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     name: 'pageFragmentId',
     text: '页面片ID',
diff --git a/vue-components/page/package.json b/vue-components/page/package.json
index 1768ce64..6ea075e1 100644
--- a/vue-components/page/package.json
+++ b/vue-components/page/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.0.4",
+  "version": "0.0.6",
   "name": "@tmagic/vue-page",
   "type": "module",
   "main": "src/index.ts",
diff --git a/vue-components/page/src/formConfig.ts b/vue-components/page/src/formConfig.ts
index cdff7ddc..c2f4187e 100644
--- a/vue-components/page/src/formConfig.ts
+++ b/vue-components/page/src/formConfig.ts
@@ -28,7 +28,6 @@ export default [
   {
     text: '页面标题',
     name: 'title',
-    type: 'data-source-input',
   },
   {
     name: 'layout',
@@ -51,4 +50,33 @@ export default [
       }
     },
   },
+  {
+    name: 'jsFiles',
+    text: 'js',
+    type: 'table',
+    items: [
+      {
+        name: 'url',
+        label: '链接',
+      },
+    ],
+  },
+  {
+    name: 'cssFiles',
+    text: 'css',
+    type: 'table',
+    items: [
+      {
+        name: 'url',
+        label: '链接',
+      },
+    ],
+  },
+  {
+    text: 'css',
+    name: 'css',
+    type: 'code',
+    language: 'css',
+    height: '500px',
+  },
 ];
diff --git a/vue-components/page/src/index.vue b/vue-components/page/src/index.vue
index 42dbfdd6..261fc699 100644
--- a/vue-components/page/src/index.vue
+++ b/vue-components/page/src/index.vue
@@ -5,9 +5,31 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue-demi';
 
-import type { MPage } from '@tmagic/core';
+import { asyncLoadCss, asyncLoadJs, type MPage } from '@tmagic/core';
 import { useApp, useComponent } from '@tmagic/vue-runtime-help';
 
+const createCss = (config: MPage) => {
+  if (config.cssFile) {
+    asyncLoadCss(config.cssFile);
+  }
+
+  if (Array.isArray(config.cssFiles)) {
+    config.cssFiles.map((file) => asyncLoadCss(file.url));
+  }
+
+  if (config.css) {
+    const style = window.document.createElement('style');
+    style.innerHTML = config.css;
+    window.document.head.appendChild(style);
+  }
+};
+
+const createJs = (config: MPage) => {
+  if (Array.isArray(config.jsFiles)) {
+    config.jsFiles.map((file) => asyncLoadJs(file.url));
+  }
+};
+
 export default defineComponent({
   props: {
     config: {
@@ -30,6 +52,11 @@ export default defineComponent({
       methods: { refresh },
     });
 
+    if (app?.jsEngine === 'browser') {
+      createCss(props.config);
+      createJs(props.config);
+    }
+
     const containerComponent = useComponent({ componentType: 'container', app });
 
     return {
diff --git a/vue-components/qrcode/package.json b/vue-components/qrcode/package.json
index afa4c996..9a14466c 100644
--- a/vue-components/qrcode/package.json
+++ b/vue-components/qrcode/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.0.3",
+  "version": "0.0.4",
   "name": "@tmagic/vue-qrcode",
   "type": "module",
   "main": "src/index.ts",
diff --git a/vue-components/qrcode/src/formConfig.ts b/vue-components/qrcode/src/formConfig.ts
index e5c4ef09..a14c98df 100644
--- a/vue-components/qrcode/src/formConfig.ts
+++ b/vue-components/qrcode/src/formConfig.ts
@@ -17,6 +17,11 @@
  */
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     text: '链接',
     name: 'url',
diff --git a/vue-components/text/package.json b/vue-components/text/package.json
index 7f930219..b951351f 100644
--- a/vue-components/text/package.json
+++ b/vue-components/text/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.0.3",
+  "version": "0.0.4",
   "name": "@tmagic/vue-text",
   "type": "module",
   "main": "src/index.ts",
diff --git a/vue-components/text/src/formConfig.ts b/vue-components/text/src/formConfig.ts
index 2e86b78c..3bb9b153 100644
--- a/vue-components/text/src/formConfig.ts
+++ b/vue-components/text/src/formConfig.ts
@@ -17,6 +17,11 @@
  */
 
 export default [
+  {
+    name: 'className',
+    type: 'data-source-input',
+    text: 'class',
+  },
   {
     name: 'text',
     text: '文本',