refactor: 视图插件自定义icon

backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java

@@ -68,6 +68,8 @@ public class ShiroServiceImpl implements ShiroService {
         filterChainDefinitionMap.put("/**/*.js", ANON);
         filterChainDefinitionMap.put("/**/*.css", ANON);
         filterChainDefinitionMap.put("/**/*.map", ANON);
+        filterChainDefinitionMap.put("/**/*.svg", ANON);
+
 
         filterChainDefinitionMap.put("/api/auth/login", ANON);
         filterChainDefinitionMap.put("/api/auth/isPluginLoaded", ANON);
@@ -77,6 +79,7 @@ public class ShiroServiceImpl implements ShiroService {
         filterChainDefinitionMap.put("/api/auth/isOpenOidc", ANON);
         filterChainDefinitionMap.put("/api/auth/getPublicKey", ANON);
         filterChainDefinitionMap.put("/api/pluginCommon/component/*", ANON);
+        filterChainDefinitionMap.put("/api/pluginCommon/staticInfo/**", ANON);
         filterChainDefinitionMap.put("/plugin/oidc/authInfo", ANON);
         filterChainDefinitionMap.put("/sso/callBack*", ANON);
 

backend/src/main/java/io/dataease/plugins/server/PluginCommonServer.java

@@ -2,9 +2,11 @@ package io.dataease.plugins.server;
 
 import io.dataease.commons.utils.ServletUtils;
 import io.dataease.plugins.common.dto.PluginSysMenu;
+import io.dataease.plugins.common.dto.StaticResource;
 import io.dataease.plugins.common.service.PluginComponentService;
 import io.dataease.plugins.common.service.PluginMenuService;
 import io.dataease.plugins.config.SpringContextUtil;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
@@ -102,4 +104,43 @@ public class PluginCommonServer {
             }
        });
     }
+
+    @GetMapping("/staticInfo/{name}/{suffix}")
+    public void staticInfo(@PathVariable("name") String name, @PathVariable("suffix") String suffix) {
+        Map<String, PluginComponentService> beansOfType = SpringContextUtil.getApplicationContext().getBeansOfType(PluginComponentService.class);
+        beansOfType.values().stream().forEach(service -> {
+            List<StaticResource> staticResources = service.staticResources();
+
+            if (staticResources.stream().anyMatch(resource -> resource.match(name, suffix))) {
+                HttpServletResponse response = ServletUtils.response();
+                BufferedInputStream bis = null;
+                InputStream inputStream = null;
+                OutputStream os = null; //输出流
+                try{
+                    inputStream = service.vueResource(name, suffix);
+                    byte[] buffer = new byte[1024];
+                    os = response.getOutputStream();
+                    bis = new BufferedInputStream(inputStream);
+                    int i = bis.read(buffer);
+                    while(i != -1){
+                        os.write(buffer, 0, i);
+                        i = bis.read(buffer);
+                    }
+                    response.setContentType("image/svg+xml");
+                    os.flush();
+                }catch (Exception e) {
+                    e.printStackTrace();
+                }finally {
+                    try {
+                        bis.close();
+                        inputStream.close();
+                        os.close();
+                    } catch (IOException e) {
+                        e.printStackTrace();
+                    }
+                }
+                return;
+            }
+        });
+    }
 }

frontend/src/utils/validate.js

@@ -7,7 +7,7 @@
  * @returns {Boolean}
  */
 export function isExternal(path) {
-  return /^(https?:|mailto:|tel:)/.test(path)
+  return /^(https?:|mailto:|tel:)/.test(path) || /^(http?:|mailto:|tel:)/.test(path) || path.startsWith('/api/pluginCommon/staticInfo')
 }
 
 /**

frontend/src/views/chart/group/Group.vue

@@ -224,7 +224,7 @@
           </el-row>
         </el-row>
         <el-row class="chart-box" style="text-align: center;">
-          <svg-icon :icon-class="view.type" class="chart-icon" />
+          <svg-icon :icon-class="view.isPlugin ? ('/api/pluginCommon/staticInfo/' + view.type + '/svg') : view.type" class="chart-icon" />
         </el-row>
       </el-row>
 
@@ -297,6 +297,7 @@ import TableSelector from '../view/TableSelector'
 import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector'
 import ChartMoveSelector from '../components/TreeSelector/ChartMoveSelector'
 import ChartType from '@/views/chart/view/ChartType'
+import { pluginTypes } from '@/api/chart/chart'
 import {
   DEFAULT_COLOR_CASE,
   DEFAULT_LABEL,
@@ -420,7 +421,8 @@ export default {
         folder: this.$t('commons.folder')
       },
       currentViewNodeData: {},
-      currentKey: null
+      currentKey: null,
+      pluginRenderOptions: []
     }
   },
   computed: {
@@ -429,14 +431,14 @@ export default {
     },
     panelInfo() {
       return this.$store.state.panel.panelInfo
-    },
+    }
-    pluginRenderOptions() {
+    /* pluginRenderOptions() {
       const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
       const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => {
         return { name: plugin.render, value: plugin.render }
       })
       return [...this.renderOptions, ...pluginOptions]
-    }
+    } */
   },
   watch: {
     saveStatus() {
@@ -460,6 +462,21 @@ export default {
     }
 
   },
+  created() {
+    const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views'))
+    if (plugins) {
+      this.loadPluginType()
+    } else {
+      pluginTypes().then(res => {
+        const plugins = res.data
+        localStorage.setItem('plugin-views', JSON.stringify(plugins))
+        this.loadPluginType()
+      }).catch(e => {
+        localStorage.setItem('plugin-views', null)
+        this.loadPluginType()
+      })
+    }
+  },
   mounted() {
     if (this.mountedInit) {
       this.treeNode(true)
@@ -468,6 +485,13 @@ export default {
     this.getChartGroupTree()
   },
   methods: {
+    loadPluginType() {
+      const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
+      const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => {
+        return { name: plugin.render, value: plugin.render }
+      })
+      this.pluginRenderOptions = [...this.renderOptions, ...pluginOptions]
+    },
     clickAdd(param) {
       this.currGroup = param.data
       if (param.type === 'group') {

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

@@ -154,7 +154,7 @@
                   <span>{{ $t('chart.chart_type') }}</span>
                   <el-row style="padding: 4px 0 4px 10px;">
                     <span>
-                      <svg-icon :icon-class="view.type" class="chart-icon" />
+                      <svg-icon :icon-class="view.isPlugin ? ('/api/pluginCommon/staticInfo/' + view.type + '/svg') : view.type" class="chart-icon" />
                     </span>
                     <span style="float: right;">
                       <el-popover
@@ -1212,7 +1212,7 @@ import AssistLine from '@/views/chart/components/senior/AssistLine'
 import Threshold from '@/views/chart/components/senior/Threshold'
 import TotalCfg from '@/views/chart/components/shape-attr/TotalCfg'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
-
+import { pluginTypes } from '@/api/chart/chart'
 export default {
   name: 'ChartEdit',
   components: {
@@ -1365,7 +1365,8 @@ export default {
       hasEdit: false,
       quotaItemCompare: {},
       showEditQuotaCompare: false,
-      preChartId: ''
+      preChartId: '',
+      pluginRenderOptions: []
 
     }
   },
@@ -1378,14 +1379,14 @@ export default {
     },
     ...mapState([
       'panelViewEditInfo'
-    ]),
+    ])
-    pluginRenderOptions() {
+    /* pluginRenderOptions() {
       const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
       const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => {
         return { name: plugin.render, value: plugin.render }
       })
       return [...this.renderOptions, ...pluginOptions]
-    }
+    } */
   },
   watch: {
     'param': function(val) {
@@ -1411,8 +1412,19 @@ export default {
     }
   },
   created() {
-    // this.get(this.$store.state.chart.viewId);
+    const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views'))
-    // this.initAreas()
+    if (plugins) {
+      this.loadPluginType()
+    } else {
+      pluginTypes().then(res => {
+        const plugins = res.data
+        localStorage.setItem('plugin-views', JSON.stringify(plugins))
+        this.loadPluginType()
+      }).catch(e => {
+        localStorage.setItem('plugin-views', null)
+        this.loadPluginType()
+      })
+    }
   },
   mounted() {
     this.bindPluginEvent()
@@ -1424,6 +1436,13 @@ export default {
   },
 
   methods: {
+    loadPluginType() {
+      const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
+      const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => {
+        return { name: plugin.render, value: plugin.render }
+      })
+      this.pluginRenderOptions = [...this.renderOptions, ...pluginOptions]
+    },
     emptyTableData() {
       this.table = {}
       this.dimension = []

frontend/src/views/panel/ViewSelect/index.vue

@@ -47,6 +47,7 @@
               </span>
               <span v-else>
                 <svg-icon :icon-class="data.modelInnerType" style="width: 14px;height: 14px" />
+                <svg-icon :icon-class="data.isPlugin ? ('/api/pluginCommon/staticInfo/' + data.modelInnerType + '/svg') : data.modelInnerType" style="width: 14px;height: 14px" />
               </span>
               <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
             </span>
@@ -74,7 +75,7 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
 import { queryPanelViewTree } from '@/api/panel/panel'
 import { deleteCircle } from '@/api/chart/chart'
-import { delUser } from '@/api/system/user'
+import { pluginTypes } from '@/api/chart/chart'
 
 export default {
   name: 'ViewSelect',
@@ -96,7 +97,8 @@ export default {
       data: [],
       showdetail: false,
       detailItem: null,
-      loading: false
+      loading: false,
+      plugins: null
     }
   },
   computed: {
@@ -110,7 +112,20 @@ export default {
     }
   },
   created() {
-    this.loadData()
+    this.plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views'))
+    if (this.plugins) {
+      this.loadData()
+    } else {
+      pluginTypes().then(res => {
+        this.plugins = res.data
+        localStorage.setItem('plugin-views', JSON.stringify(res.data))
+        this.loadData()
+      }).catch(e => {
+        localStorage.setItem('plugin-views', null)
+        this.plugins = null
+        this.loadData()
+      })
+    }
   },
   methods: {
     filterNode(value, data) {
@@ -172,6 +187,11 @@ export default {
         if (node.modelType === 'panel' || node.nodeType === 'spine') {
           node.disabled = true
         }
+
+        if (node.modelType === 'view' && node.modelInnerType && this.plugins && this.plugins.length) {
+          node.isPlugin = this.plugins.some(plugin => plugin.value === node.modelInnerType)
+        }
+
         if (node.children && node.children.length > 0) {
           this.setParentDisable(node.children)
         }