refactor: 插件样式设置兼容

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -256,6 +256,7 @@ export default {
     })
     // 监听画布div变动事件
     const tempCanvas = document.getElementById('canvasInfoTemp')
+    if (tempCanvas) {
       erd.listenTo(document.getElementById('canvasInfoTemp'), element => {
         _this.$nextTick(() => {
           // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
@@ -263,6 +264,7 @@ export default {
           this.$emit('mainHeightChange', _this.mainHeight)
         })
       })
+    }
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     _this.$store.commit('clearLinkageSettingInfo', false)
     _this.canvasStyleDataInit()

frontend/src/store/index.js

@@ -125,7 +125,8 @@ const data = {
     changeProperties: {
       customStyle: {},
       customAttr: {}
-    }
+    },
+    allViewRender: []
   },
   mutations: {
     ...animation.mutations,
@@ -550,7 +551,7 @@ const data = {
         // get view base info
         const viewBaseInfo = state.componentViewsData[id]
         // get properties
-        const viewConfig = TYPE_CONFIGS.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
+        const viewConfig = state.allViewRender.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
         const viewProperties = viewConfig ? viewConfig[0].properties : []
         if (state.mixProperties.length > 0) {
           // If it exists , taking the intersection
@@ -641,6 +642,12 @@ const data = {
         customStyle: {},
         customAttr: {}
       }
+    },
+    initViewRender(state, pluginViews) {
+      pluginViews.forEach(plugin => {
+        plugin.isPlugin = true
+      })
+      state.allViewRender = [...TYPE_CONFIGS, ...pluginViews]
     }
   },
   modules: {

frontend/src/views/chart/view/ChartEdit.vue

@@ -652,7 +652,7 @@
         </el-tab-pane>
         <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 300px">
           <chart-style
-            v-if="chartProperties || view.isPlugin"
+            v-if="chartProperties"
             :param="param"
             :view="view"
             :chart="chart"
@@ -1170,7 +1170,7 @@ export default {
     chartProperties() {
       const _this = this
       if (_this.chart && _this.chart.render) {
-        const viewConfig = TYPE_CONFIGS.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
+        const viewConfig = this.allViewRender.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
         if (viewConfig && viewConfig.length) {
           return viewConfig[0].properties
         } else {
@@ -1188,7 +1188,8 @@ export default {
     },
     ...mapState([
       'curComponent',
-      'panelViewEditInfo'
+      'panelViewEditInfo',
+      'allViewRender'
     ])
     /* pluginRenderOptions() {
       const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []

frontend/src/views/panel/list/PanelMain.vue

@@ -30,6 +30,7 @@ import PanelList from '../list/PanelList'
 import PanelViewShow from '../list/PanelViewShow'
 import ShareTree from '../GrantAuth/shareTree'
 import Enshrine from '../enshrine/index'
+import { pluginTypes } from '@/api/chart/chart'
 
 export default {
   name: 'PanelMain',
@@ -59,6 +60,20 @@ export default {
     }
   },
   mounted() {
+    // init all views (include plugins) base info
+    const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views'))
+    if (plugins) {
+      this.$store.commit('initViewRender', plugins)
+    } else {
+      pluginTypes().then(res => {
+        const plugins = res.data
+        localStorage.setItem('plugin-views', JSON.stringify(plugins))
+        this.$store.commit('initViewRender', plugins)
+      }).catch(e => {
+        localStorage.setItem('plugin-views', null)
+        this.$store.commit('initViewRender', plugins)
+      })
+    }
     this.clear()
   },
   methods: {