refactor(ui,playground): 优化编码

packages/ui-vue2/src/Component.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    v-if="display()"
+    v-if="display"
     :is="tagName"
     :id="config.id"
     :class="`magic-ui-component${config.className ? ` ${config.className}` : ''}`"
@@ -34,7 +34,7 @@ export default defineComponent({
       tagName: computed(() => `magic-ui-${toLine(props.config.type)}`),
       style: computed(() => app?.transformStyle(props.config.style || {})),
 
-      display: () => {
+      display: computed(() => {
         if (props.config.visible === false) return false;
         if (props.config.condResult === false) return false;
 
@@ -44,7 +44,7 @@ export default defineComponent({
           return displayCfg(app);
         }
         return displayCfg !== false;
-      },
+      }),
     };
   },
 });

packages/ui/src/Component.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    v-if="display()"
+    v-if="display"
     ref="component"
     :is="tagName"
     :id="config.id"
@@ -32,7 +32,7 @@ const app: Core | undefined = inject('app');
 const tagName = computed(() => `magic-ui-${toLine(props.config.type)}`);
 const style = computed(() => app?.transformStyle(props.config.style));
 
-const display = () => {
+const display = computed(() => {
   if (props.config.visible === false) return false;
   if (props.config.condResult === false) return false;
 
@@ -42,5 +42,5 @@ const display = () => {
     return displayCfg(app);
   }
   return displayCfg !== false;
-};
+});
 </script>

playground/src/configs/dsl.ts

@@ -426,6 +426,41 @@ export default {
       beforeRequest: '',
       afterResponse: '',
     },
+    {
+      id: 'ds_d1a460c5',
+      type: 'base',
+      title: 'style',
+      description: '',
+      fields: [
+        {
+          name: 'color',
+          title: 'color',
+          type: 'string',
+          description: '',
+          enable: true,
+          defaultValue: '#fff',
+          fields: [],
+        },
+      ],
+      methods: [
+        {
+          name: 'setCorlor',
+          desc: '',
+          timing: '',
+          params: [],
+          content: ({ dataSource }) => {
+            // place your code here
+            setTimeout(() => {
+              dataSource.setData('red', 'color');
+            }, 1000);
+          },
+        },
+      ],
+      events: '',
+      mocks: [],
+      beforeRequest: '',
+      afterResponse: '',
+    },
   ],
   dataSourceDeps: {
     ds_b64c92b5: {