图标管理

 Source/plt-web/plt-web-ui/src/api/UI/Icons.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
import request from '@/router/axios';

// å›¾æ ‡åº“查询
export function getIcons(params) {
  return request({
    url: "/api/uiManagerController/getBizTree",
    method: "get",
    params
  });
}

 Source/plt-web/plt-web-ui/src/components/PLT-basic-component/input-icon.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,190 @@
<template>
  <div>
    <el-input :width="width" :class="inputClass" :style="inputStyle" :clearable="true" :value="value"
              :disabled="disabled" :placeholder="placeholder" type="text" :size="size" @clear="clearValue" @focus="handleFocus">
      <span slot="append" v-html="svgHtml"></span>
    </el-input>
    <el-dialog v-dialogDrag
               v-dialog-resize
               title="请选择图标"
               :visible.sync="visible"
               width="90%"
               :append-to-body="true"
               class="avue-dialog avue-dialog--top"
               @close="dialogClose">
      <div style="display: flex;justify-content: space-between;flex-wrap: wrap">
        <div class="tag-group">
          <span class="tag-group__title">分类</span>
          <el-tag
            v-for="item in types"
            :key="item"
            :type="checkedTypes.includes(item)?'success':'info'" size="small"
            effect="plain" @click="changeType(item)">
            {{ item }}
          </el-tag>
        </div>
        <avue-input v-model="searchText" placeholder="查询" size="mini" prefixIcon="el-icon-search" style="width: 300px;max-width: 30%"></avue-input>
      </div>
      <div style="height: 60vh">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane v-for="item in iconList" :label="item.label" :name="item.label">
            <div class="iconList">
              <div class="iconItem" v-for="svg in item.list" :data-value="svg.name" @click="checkSvg(svg,item.type)">
                <div v-html="svg.svg"></div>
                <span>{{svg.name.split(':')[1]}}</span>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {validatenull} from "@/util/validate";
import {getStore} from "@/util/store";
import func from "@/util/func";
import store from "@/store";
import {getIcons} from "@/api/UI/Icons";

export default {
  name: "input-icon",
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default:'100%'
    },
    size: {
      type: String,
      default:'small'
    },
    inputClass:{
      type: String,
      default:''
    },
    inputStyle:{
      type: String,
      default:''
    }
  },
  data(){
    return {
      visible: false,
      types: ['标签一' , '标签二' ,  '标签三' , '标签四','标签五'  ],
      checkedTypes:[],
      searchText:'',
      activeName:'',
      svgHtml:'',
      iconList:[]
    }
  },
  watch:{
    value:{
      handler(val) {
        this.svgHtml=func.getSVGByName(val);
      }
    }
  },
  created(){
    if (!validatenull(this.$store.state.icons)) {
      this.iconList = this.$store.state.icons;
    } else {
      this.iconList = getStore({ name:'icons'});
    }
    if(this.iconList && this.iconList.length>0){
      this.activeName=this.iconList[0].label;
    }else {
      getIcons().then(res => {
        this.iconList=res.data.data;
        store.dispatch("setIcons", this.iconList);
        if(this.iconList&&this.iconList.length>0) {
          this.activeName=this.iconList[0].label;
        }
      })
    }
  },
  methods:{
    dialogClose() {
      this.visible = false;
    },
    handleFocus() {debugger;
      if (!this.disabled) {
        if(this.iconList&&this.iconList.length>0) {
          this.activeName=this.iconList[0].label;
        }else {
          if (!validatenull(this.$store.state.icons)) {
            this.iconList = this.$store.state.icons;
          } else {
            this.iconList = getStore({ name:'icons'});
          }
          if(this.iconList && this.iconList.length>0){
            this.activeName=this.iconList[0].label;
          }else {
            getIcons().then(res => {
              this.iconList=res.data.data;
              store.dispatch("setIcons", this.iconList);
              if(this.iconList&&this.iconList.length>0) {
                this.activeName=this.iconList[0].label;
              }
            })
          }
        }
        this.visible = true;
      }
    },
    //选择类型查询
    changeType(type){
      if(this.checkedTypes.includes(type)){
        this.checkedTypes=this.checkedTypes.filter(item=> item!=type)
      }else {
        this.checkedTypes.push(type)
      }
    },
    handleTabClick(tab, event){

    },
    clearValue(){
      this.svgHtml='';
      this.$emit('input','')
    },
    checkSvg(item){
      this.svgHtml=item.svg;
      this.$emit('input',item.name)
      this.dialogClose();
    }
  }
}
</script>

<style scoped>
.tag-group{font-size: 14px;}
.el-tag{
  margin: 0 0 10px 10px;
  cursor: pointer;
}
.iconList{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.iconList .iconItem{
  width: 65px;
  margin: 6px;
  text-align: center;
}
.iconList .iconItem div:hover{
  transform: scale(1.5);
}
.iconList .iconItem span{
  font-size: 12px;
}
</style>

 Source/plt-web/plt-web-ui/src/main.js

@@ -44,6 +44,8 @@
import formUpload from "@/components/PLT-basic-component/formUpload";
// ç©¿æ¢­æ¡†ç»„件
import transfer from "@/components/PLT-basic-component/transfer";
//图标选择器组件
import inputIcon from "@/components/PLT-basic-component/input-icon";
// æ³¨å†Œå…¨å±€å®¹å™¨
Vue.component('basicContainer', basicContainer);
Vue.component('basicBlock', basicBlock);
@@ -60,6 +62,7 @@
Vue.component('formUpload', formUpload);
Vue.component('Divider', Divider);
Vue.component('transfer', transfer);
Vue.component('inputIcon', inputIcon);
import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)


 Source/plt-web/plt-web-ui/src/store/index.js

@@ -21,12 +21,17 @@
  },
  getters,
  state: {
    icons:undefined,//图标库数据
    viewtabparams:undefined, //tab浏览 Action参数
  },
  mutations: {
    // è§„程详情参数
    // tab浏览参数
    getViewtabparams(state, obj) {
      state.viewtabparams = obj;
    },
    // å›¾æ ‡åº“
    getIcons(state, obj) {
      state.icons = obj;
    },
  },
  actions: {
@@ -37,6 +42,15 @@
        content:obj,
        type:'session'
      });
    },
    //保存图标库到本地
    setIcons({commit},obj){
      commit("getIcons", obj);
      setStore({
        name:'icons',
        content:obj,
        type:'session'
      });
    }
  }
})

 Source/plt-web/plt-web-ui/src/util/func.js

@@ -2,6 +2,10 @@
 * é€šç”¨å·¥å…·ç±»
 */
import CryptoJS from 'crypto-js'
import {validatenull} from "@/util/validate";
import {getStore} from "@/util/store";
import {getIcons} from "@/api/UI/Icons";
import store from "@/store/index"

export default class func {

@@ -313,6 +317,38 @@
    });
    return encrypted.toString();
  }

  /* æ ¹æ®name获取svg图标
  * @param name
  * @returns {string}
  */
  static getSVGByName(name) {
    let svgHtml = '';
    if(name && name.indexOf(':')!=-1) {
      let iconList = getStore({name: 'icons'});
      if (iconList && iconList.length > 0) {
        let libName = name.split(':')[0];
        let currentLic = iconList.find(item => item.label == libName);
        if (currentLic.list) {
          currentLic.list.find(item => {
            if (item.name == name) {
              svgHtml = item.svg;
            }
            return item.name == name;
          })
        }
      }else {
        getIcons().then(res => {
          this.iconList=res.data.data;
          store.dispatch("setIcons", this.iconList);
          if(this.iconList.length>0) {
            this.activeName=this.iconList[0].label;
          }
        })
      }
    }
    return svgHtml;
  }
}



 Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/businessType/index.vue

@@ -188,8 +188,7 @@
              </el-col>
              <el-col :span="12">
                <el-form-item label="图标：" prop="imageName">
                  <avue-input-icon v-model="form.imageName" :icon-list="iconList" placeholder="请选择图标">
                  </avue-input-icon>
                  <input-icon v-model="form.imageName" placeholder="请选择图标"></input-icon>
                </el-form-item>
              </el-col>
            </el-row>
@@ -442,13 +441,11 @@
import func from "@/util/func";
import {getUsedVersionRuleList, getVersionRuleAllList} from "@/api/modeling/version/api";
import {gridLifeCycle} from "@/api/modeling/lifeCycle/api";
import iconList from "@/config/iconList";

export default {
  name: "index",
  data() {
    return {
      iconList: iconList,
      indexLoading: false,
      indexFormRead: false,
      indexAttrRow: {},
@@ -652,7 +649,7 @@
          {validator: this.validateEnglishOnly, trigger: 'blur'}
        ],
        imageName:[
          {required: true, message: '请选择图标', trigger: 'blur'},
          {required: true, message: '请选择图标', trigger: 'submit'},
        ],
        revLevel: [
          {required: true, message: '请选择版本规则', trigger: 'blur'},

 Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/Icons/index.vue

@@ -2,17 +2,31 @@
  <el-container>
    <el-main>
      <basic-container>
        <div class="tag-group">
          <span class="tag-group__title">分类</span>
          <el-tag
            v-for="item in types"
            :key="item"
            :type="checkedTypes.includes(item)?'success':'info'" size="small"
            effect="plain" @click="changeType(item)">
            {{ item }}
          </el-tag>
        <div style="display: flex;justify-content: space-between;flex-wrap: wrap">
          <div class="tag-group">
            <span class="tag-group__title">分类</span>
            <el-tag
              v-for="item in types"
              :key="item"
              :type="checkedTypes.includes(item)?'success':'info'" size="small"
              effect="plain" @click="changeType(item)">
              {{ item }}
            </el-tag>
          </div>
          <avue-input v-model="form" placeholder="查询" size="mini" prefixIcon="el-icon-search" style="width: 300px;max-width: 30%"></avue-input>
        </div>
        <div>
        <div style="height: calc(100vh - 190px)">
          <input-icon v-model="iconValue"></input-icon>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="item in iconList" :label="item.label" :name="item.label">
              <div class="iconList">
                <div class="iconItem" v-for="svg in item.list" :data-value="svg.name">
                  <div v-html="svg.svg"></div>
                  <span>{{svg.name.split(':')[1]}}</span>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </basic-container>
    </el-main>
@@ -20,12 +34,138 @@
</template>

<script>
import {getIcons} from "@/api/UI/Icons";
import {validatenull} from "@/util/validate";
import {getStore} from "@/util/store";
import store from "@/store";

export default {
name: "index",
  data() {
    return {
      types: ['标签一' , '标签二' ,  '标签三' , '标签四','标签五'  ],
      checkedTypes:[]
      checkedTypes:[],
      form:'',
      activeName:'',
      iconValue:'iconoir2:adobe-illustrator',
      iconList:[]
    }
  },
  created() {debugger;
    if (!validatenull(this.$store.state.icons)) {
      this.iconList = this.$store.state.icons;
    } else {
      this.iconList = getStore({ name:'icons'});
    }
    if(this.iconList && this.iconList.length>0){
      this.activeName=this.iconList[0].label;
    }else {
      getIcons().then(res => {
        this.iconList=res.data.data;
        this.iconList=[{
          label:'iconoir',
          type:'标签一',
          list:[{
            "name": "iconoir:accessibility",
            "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10M7 9l5 1m5-1l-5 1m0 0v3m0 0l-2 5m2-5l2 5\"/><path fill=\"currentColor\" d=\"M12 7a.5.5 0 1 1 0-1a.5.5 0 0 1 0 1\"/></g></svg>"
          },
            {
              "name": "iconoir:accessibility-sign",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"m11.5 12.5l7-.5l-1.5 6.5m-5.5-6l4.5-5L12.5 5L10 7.5m8.5-1a2 2 0 1 1 0-4a2 2 0 0 1 0 4\"/><path d=\"M5.5 12.5a5 5 0 0 1 7.584 6M3.729 15A5 5 0 0 0 11 20.831\"/></g></svg>"
            },
            {
              "name": "iconoir:accessibility-tech",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M3 19V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m12.5 12.16l4-.16l-.5 4.5M11.833 12L13.5 9.538L10.833 8L9.5 9.846\"/><path fill=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.5 7.5a.5.5 0 1 1 0-1a.5.5 0 0 1 0 1\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10.5 18a3 3 0 1 1 0-6a3 3 0 0 1 0 6\"/></g></svg>"
            },
            {
              "name": "iconoir:activity",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M3 12h3l3-9l6 18l3-9h3\"/></svg>"
            },
            {
              "name": "iconoir:adobe-after-effects",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M21 7v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4\"/><path d=\"M14 13v-1a2 2 0 0 1 2-2v0a2 2 0 0 1 2 2v1zm0 0v1a2 2 0 0 0 2 2h1.5M6 16l1.125-3M12 16l-1.125-3m-3.75 0L9 8l1.875 5m-3.75 0h3.75\"/></g></svg>"
            },
            {
              "name": "iconoir:adobe-after-effects-solid",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M21.75 17A4.75 4.75 0 0 1 17 21.75H7A4.75 4.75 0 0 1 2.25 17V7A4.75 4.75 0 0 1 7 2.25h10A4.75 4.75 0 0 1 21.75 7zm-3.5-1a.75.75 0 0 1-.75.75H16A2.75 2.75 0 0 1 13.25 14v-2a2.75 2.75 0 1 1 5.5 0v1a.75.75 0 0 1-.75.75h-3.25V14c0 .69.56 1.25 1.25 1.25h1.5a.75.75 0 0 1 .75.75m-1-3.75V12a1.25 1.25 0 1 0-2.5 0v.25zM5.298 15.736a.75.75 0 1 0 1.404.527l.943-2.513h2.71l.943 2.513a.75.75 0 1 0 1.404-.527l-3-8a.75.75 0 0 0-1.404 0zm4.495-3.486H8.207L9 10.136z\" clip-rule=\"evenodd\"/></svg>"
            },
            {
              "name": "iconoir:adobe-illustrator",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M21 7v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4m-5 5v4m0-7v.01\"/><path d=\"m7 16l1.125-3M13 16l-1.125-3m-3.75 0L10 8l1.875 5m-3.75 0h3.75\"/></g></svg>"
            },
            {
              "name": "iconoir:adobe-illustrator-solid",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M17 21.75A4.75 4.75 0 0 0 21.75 17V7A4.75 4.75 0 0 0 17 2.25H7A4.75 4.75 0 0 0 2.25 7v10A4.75 4.75 0 0 0 7 21.75zM15.25 16a.75.75 0 0 0 1.5 0v-4a.75.75 0 0 0-1.5 0zM16 9.76a.75.75 0 0 1-.75-.75V9a.75.75 0 0 1 1.5 0v.01a.75.75 0 0 1-.75.75m-9.702 5.977a.75.75 0 1 0 1.404.526l.943-2.513h2.71l.943 2.513a.75.75 0 1 0 1.404-.527l-3-8a.75.75 0 0 0-1.404 0zM10 10.136l.793 2.114H9.207z\" clip-rule=\"evenodd\"/></svg>"
            }]
        },{
          label:'iconoir2',
          type:'标签二',
          list:[{
            "name": "iconoir2:adobe-illustrator",
            "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M21 7v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4m-5 5v4m0-7v.01\"/><path d=\"m7 16l1.125-3M13 16l-1.125-3m-3.75 0L10 8l1.875 5m-3.75 0h3.75\"/></g></svg>"
          },
            {
              "name": "iconoir2:adobe-illustrator-solid",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M17 21.75A4.75 4.75 0 0 0 21.75 17V7A4.75 4.75 0 0 0 17 2.25H7A4.75 4.75 0 0 0 2.25 7v10A4.75 4.75 0 0 0 7 21.75zM15.25 16a.75.75 0 0 0 1.5 0v-4a.75.75 0 0 0-1.5 0zM16 9.76a.75.75 0 0 1-.75-.75V9a.75.75 0 0 1 1.5 0v.01a.75.75 0 0 1-.75.75m-9.702 5.977a.75.75 0 1 0 1.404.526l.943-2.513h2.71l.943 2.513a.75.75 0 1 0 1.404-.527l-3-8a.75.75 0 0 0-1.404 0zM10 10.136l.793 2.114H9.207z\" clip-rule=\"evenodd\"/></svg>"
            },
            {
              "name": "iconoir2:adobe-indesign",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M21 7v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4M8.5 8v8\"/><path d=\"M15.5 12v3.4a.6.6 0 0 1-.6.6h-1.4a2 2 0 0 1-2-2v0a2 2 0 0 1 2-2zm0 0V9\"/></g></svg>"
            },
            {
              "name": "iconoir2:adobe-indesign-solid",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M21.75 17A4.75 4.75 0 0 1 17 21.75H7A4.75 4.75 0 0 1 2.25 17V7A4.75 4.75 0 0 1 7 2.25h10A4.75 4.75 0 0 1 21.75 7zM8.5 16.75a.75.75 0 0 1-.75-.75V8a.75.75 0 0 1 1.5 0v8a.75.75 0 0 1-.75.75m5-4h1.25v2.5H13.5a1.25 1.25 0 1 1 0-2.5m0 4a2.75 2.75 0 1 1 0-5.5h1.25V9a.75.75 0 0 1 1.5 0v6.4a1.35 1.35 0 0 1-1.35 1.35z\" clip-rule=\"evenodd\"/></svg>"
            },
            {
              "name": "iconoir2:adobe-lightroom",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M21 7v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4\"/><path d=\"M7 8v8h4m3-5.5V13m0 3v-3m0 0s0-2.5 3-2.5\"/></g></svg>"
            },
            {
              "name": "iconoir2:adobe-lightroom-solid",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M21.75 17A4.75 4.75 0 0 1 17 21.75H7A4.75 4.75 0 0 1 2.25 17V7A4.75 4.75 0 0 1 7 2.25h10A4.75 4.75 0 0 1 21.75 7zM7 16.75a.75.75 0 0 1-.75-.75V8a.75.75 0 0 1 1.5 0v7.25H11a.75.75 0 0 1 0 1.5zm6.25-.75a.75.75 0 0 0 1.5 0v-2.998l.003-.045a2 2 0 0 1 .265-.82c.235-.392.736-.887 1.982-.887a.75.75 0 0 0 0-1.5c-.973 0-1.713.232-2.268.586a.75.75 0 0 0-1.482.164z\" clip-rule=\"evenodd\"/></svg>"
            },
            {
              "name": "iconoir2:adobe-photoshop",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M21 7v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4\"/><path d=\"M7 16v-4m0 0V8h2a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2zm10-1c-.306-.613-.933-1-1.618-1H15a1.5 1.5 0 0 0-1.5 1.5v0A1.5 1.5 0 0 0 15 13h.5a1.5 1.5 0 0 1 1.5 1.5v0a1.5 1.5 0 0 1-1.5 1.5h-.382a1.81 1.81 0 0 1-1.618-1v0\"/></g></svg>"
            },
            {
              "name": "iconoir2:adobe-photoshop-solid",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M21.75 17A4.75 4.75 0 0 1 17 21.75H7A4.75 4.75 0 0 1 2.25 17V7A4.75 4.75 0 0 1 7 2.25h10A4.75 4.75 0 0 1 21.75 7zM7 16.75a.75.75 0 0 1-.75-.75V8A.75.75 0 0 1 7 7.25h2a2.75 2.75 0 1 1 0 5.5H7.75V16a.75.75 0 0 1-.75.75m.75-5.5H9a1.25 1.25 0 1 0 0-2.5H7.75zm8.579.085a.75.75 0 1 0 1.342-.67a2.56 2.56 0 0 0-2.29-1.415H15a2.25 2.25 0 0 0 0 4.5h.5a.75.75 0 0 1 0 1.5h-.382a1.06 1.06 0 0 1-.947-.585a.75.75 0 0 0-1.342.67a2.56 2.56 0 0 0 2.289 1.415h.382a2.25 2.25 0 1 0 0-4.5H15a.75.75 0 0 1 0-1.5h.382c.4 0 .768.227.947.585\" clip-rule=\"evenodd\"/></svg>"
            },
            {
              "name": "iconoir2:adobe-xd",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M21 7v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4M7 8l4 8m-4 0l4-8\"/><path d=\"M17 12v3.4a.6.6 0 0 1-.6.6H15a2 2 0 0 1-2-2v0a2 2 0 0 1 2-2zm0 0V9\"/></g></svg>"
            },
            {
              "name": "iconoir2:adobe-xd-solid",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M21.75 17A4.75 4.75 0 0 1 17 21.75H7A4.75 4.75 0 0 1 2.25 17V7A4.75 4.75 0 0 1 7 2.25h10A4.75 4.75 0 0 1 21.75 7zm-15.085-.33a.75.75 0 0 1-.336-1.006L8.162 12L6.329 8.335a.75.75 0 0 1 1.342-.67l1.33 2.658l1.328-2.659a.75.75 0 0 1 1.342.671L9.839 12l1.832 3.664a.75.75 0 0 1-1.342.671L9 13.677l-1.329 2.658a.75.75 0 0 1-1.006.336M15 12.75h1.25v2.5H15a1.25 1.25 0 1 1 0-2.5m0 4a2.75 2.75 0 1 1 0-5.5h1.25V9a.75.75 0 0 1 1.5 0v6.4a1.35 1.35 0 0 1-1.35 1.35z\" clip-rule=\"evenodd\"/></svg>"
            },
            {
              "name": "iconoir2:african-tree",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 22V12m0-4v4m0 0l3-3m-2.576 9.576l6.169-6.169a5.502 5.502 0 0 0-.513-8.234a9.904 9.904 0 0 0-12.16 0a5.502 5.502 0 0 0-.513 8.234l6.169 6.169a.6.6 0 0 0 .848 0\"/></svg>"
            },
            {
              "name": "iconoir2:agile",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M17.5 19H22m0 0l-2.5-2.5M22 19l-2.5 2.5M12 2L9.5 4.5L12 7\"/><path d=\"M10.5 4.5a7.5 7.5 0 0 1 0 15H2\"/><path d=\"M6.756 5.5A7.5 7.5 0 0 0 3 12c0 1.688.558 3.246 1.5 4.5\"/></g></svg>"
            },
            {
              "name": "iconoir2:air-conditioner",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M22 3.6V11H2V3.6a.6.6 0 0 1 .6-.6h18.8a.6.6 0 0 1 .6.6M18 7h1M2 11l.79 2.584A2 2 0 0 0 4.702 15H6m16-4l-.79 2.584A2 2 0 0 1 19.298 15H18m-8.5-.5s0 7-3.5 7m8.5-7s0 7 3.5 7m-6-7v7\"/></svg>"
            },
            {
              "name": "iconoir2:airplane",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M10.5 4.5v4.667a.6.6 0 0 1-.282.51l-7.436 4.647a.6.6 0 0 0-.282.508v.9a.6.6 0 0 0 .746.582l6.508-1.628a.6.6 0 0 1 .746.582v2.96a.6.6 0 0 1-.205.451l-2.16 1.89c-.458.402-.097 1.151.502 1.042l3.256-.591a.6.6 0 0 1 .214 0l3.256.591c.599.11.96-.64.502-1.041l-2.16-1.89a.6.6 0 0 1-.205-.452v-2.96a.6.6 0 0 1 .745-.582l6.51 1.628a.6.6 0 0 0 .745-.582v-.9a.6.6 0 0 0-.282-.508l-7.436-4.648a.6.6 0 0 1-.282-.509V4.5a1.5 1.5 0 0 0-3 0\"/></svg>"
            },
            {
              "name": "iconoir2:airplane-helix",
              "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"1.5\" stroke-width=\"1.5\"><path d=\"M12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6\"/><path d=\"M12 9s-1.988-1.975-2-4c.001-1.993-.05-4.001 2-4c1.948.001 1.997 1.976 2 4c.003 1.985-2 4-2 4m3 3s1.975-1.988 4-2c1.993.001 4.001-.05 4 2c-.001 1.948-1.976 1.997-4 2c-1.985.003-4-2-4-2m-6 0s-1.975 1.988-4 2c-1.993-.001-4.001.05-4-2c.001-1.948 1.976-1.997 4-2c1.985-.003 4 2 4 2m3 3s1.988 1.975 2 4c-.001 1.993.05 4.001-2 4c-1.948-.001-1.997-1.976-2-4c-.003-1.985 2-4 2-4\" clip-rule=\"evenodd\"/></g></svg>"
            }]
        }]
        store.dispatch("setIcons", this.iconList);
        if(this.iconList.length>0) {
          this.activeName=this.iconList[0].label;
        }
      })
    }
  },
  methods:{
@@ -35,6 +175,9 @@
      }else {
        this.checkedTypes.push(type)
      }
    },
    handleClick(tab, event){

    }
  }
}
@@ -46,4 +189,20 @@
  margin: 0 0 10px 10px;
  cursor: pointer;
}
.iconList{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.iconList .iconItem{
  width: 65px;
  margin: 6px;
  text-align: center;
}
.iconList .iconItem div:hover{
  transform: scale(1.5);
}
.iconList .iconItem span{
  font-size: 12px;
}
</style>