文件夹改名

Former-commit-id: 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 1e795e1614aaf94f23ad99354f6ca9be303a1b1e [formerly 9ce21aef6b043d8bfcb2849dd7c6bc34e4625387]]]]]
Former-commit-id: c92d7410adc4138c7903c0067860fc3d190f54b0
Former-commit-id: 9f0ab819a505e341a6edf210efb107df8b8efe33
Former-commit-id: 3006c0d2ccda4133203372c30ffee34a73fa8944 [formerly f340ca4127e4578b3c53747d13bbaba223ed4e83]
Former-commit-id: 9624c2aaa99880b5e37f1e60f1f36ac673e021ed
Former-commit-id: 7923489f2c3c637782d9d4a1707bc48dfe3b1acf
Former-commit-id: 2375e080a7f715bc48da40d4c56235efad3f0d5d
Former-commit-id: c41402e6c0266a07e974efad41feed7c6fb7d0b6
Former-commit-id: b8814b31619151361c91ed37cb1ee7f3813853c1

src/views/demo/components/icon/components/d2-icon-cell.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <el-popover
+      ref="pop"
+      placement="right"
+      :title="icon"
+      width="300"
+      trigger="click">
+      <div class="icon-group">
+        <i :class="'fa fa-' + icon"></i>
+      </div>
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <el-tooltip effect="dark" :content="iconClass" placement="top">
+            <el-button @click="copy(iconClass)" style="width: 100%;">Class</el-button>
+          </el-tooltip>
+        </el-col>
+        <el-col :span="8">
+          <el-tooltip effect="dark" :content="iconHtml" placement="top">
+            <el-button @click="copy(iconHtml)" style="width: 100%;">HTML</el-button>
+          </el-tooltip>
+        </el-col>
+        <el-col :span="8">
+          <el-tooltip effect="dark" :content="iconComponent" placement="top">
+            <el-button @click="copy(iconComponent)" style="width: 100%;">组件</el-button>
+          </el-tooltip>
+        </el-col>
+      </el-row>
+    </el-popover>
+    <span v-popover:pop>
+      <el-tag type="info" class="icon-tag">
+        <i :class="'fa fa-' + icon"></i>
+      </el-tag>
+      <span style="font-size: 10px;">{{icon}}</span>
+    </span>
+  </div>
+</template>
+
+<script>
+import * as clipboard from 'clipboard-polyfill'
+export default {
+  props: {
+    icon: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    iconClass () {
+      return `fa fa-${this.icon}`
+    },
+    iconHtml () {
+      return `<i class="fa fa-${this.icon}" aria-hidden="true"></i>`
+    },
+    iconComponent () {
+      return `<d2-icon name="${this.icon}"/>`
+    }
+  },
+  methods: {
+    copy (text) {
+      clipboard.writeText(text)
+      this.$message({
+        message: `${text} 复制到剪贴板`,
+        type: 'success'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon-group {
+  text-align: center;
+  font-size: 200px;
+}
+.icon-tag {
+  width: 32px;
+  text-align: center;
+  margin-right: 5px;
+}
+</style>

src/views/demo/components/icon/data/index.js.REMOVED.git-id

@@ -0,0 +1 @@
+3283c245146c8130af1352a64561e780a3f585c5

src/views/demo/components/icon/icon-svg.vue

@@ -0,0 +1,52 @@
+<template>
+  <d2-container :filename="filename">
+    <template slot="header">SVG图标组件</template>
+    <el-row>
+      <el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
+        <d2-icon-svg class="icon" :name="icon"/>
+        <div class="icon-title">
+          <span>{{icon}}</span>
+        </div>
+      </el-col>
+    </el-row>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      filename: __filename
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 150px;
+  &:hover {
+    .icon {
+      transform: scale(1.1);
+    }
+    .icon-title {
+      color: $color-text-main;
+    }
+  }
+}
+.icon {
+  height: 80px;
+  width: 80px;
+  transition: all .3s;
+  cursor: pointer;
+}
+.icon-title {
+  font-size: 12px;
+  margin-top: 10px;
+  color: $color-text-normal;
+}
+</style>

src/views/demo/components/icon/icon.vue

@@ -0,0 +1,32 @@
+<template>
+  <d2-container :filename="filename">
+    <template slot="header">图标组件</template>
+    <d2-icon class="d2-mr-10"/>
+    <d2-icon name="github" class="d2-mr-10"/>
+    <d2-icon name="github" style="font-size: 100px;" class="d2-mr-10"/>
+    <d2-icon name="github" class="icon-demo"/>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      filename: __filename
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon-demo {
+  transition: all .3s;
+  font-size: 100px;
+  color: #409EFF;
+  @extend %unable-select;
+  &:hover{
+    color: #F56C6C;
+    transform: scale(1.2) rotate(30deg);
+  }
+}
+</style>

src/views/demo/components/icon/list.vue

@@ -0,0 +1,47 @@
+<template>
+  <d2-container :filename="filename">
+    <template slot="header">
+      <el-radio-group v-model="showIndex" size="mini">
+        <el-radio-button
+          v-for="(item, index) in radioOptions"
+          :key="index"
+          :label="item.value">
+          {{item.label}}
+        </el-radio-button>
+      </el-radio-group>
+    </template>
+    <el-row style="margin: -10px;">
+      <el-alert title="点击图标复制代码" type="info" class="d2-m-10" style="width: auto;"/>
+      <el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="d2-p-10">
+        <d2-icon-cell :icon="iconItem"/>
+      </el-col>
+    </el-row>
+  </d2-container>
+</template>
+
+<script>
+import icon from './data/index'
+export default {
+  components: {
+    'd2-icon-cell': () => import('./components/d2-icon-cell')
+  },
+  data () {
+    return {
+      filename: __filename,
+      icon,
+      showIndex: 12
+    }
+  },
+  computed: {
+    iconShow () {
+      return this.icon[this.showIndex]
+    },
+    radioOptions () {
+      return this.icon.map((e, index) => ({
+        label: e.title,
+        value: index
+      }))
+    }
+  }
+}
+</script>

src/views/demo/components/icon/select-svg.vue

@@ -0,0 +1,25 @@
+<template>
+  <d2-container :filename="filename">
+    <template slot="header">svg 图标选择器</template>
+    <div class="d2-mb">
+      <p class="d2-mt-0 d2-mb-10">一般用法 | {{icon || '未选择'}}</p>
+      <d2-icon-svg-select v-model="icon"/>
+    </div>
+    <div class="d2-mb">
+      <p class="d2-mt-0 d2-mb-10">用户可以输入 | {{icon2 || '未选择'}}</p>
+      <d2-icon-svg-select v-model="icon2" :user-input="true"/>
+    </div>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      filename: __filename,
+      icon: '',
+      icon2: ''
+    }
+  }
+}
+</script>

src/views/demo/components/icon/select.vue

@@ -0,0 +1,57 @@
+<template>
+  <d2-container :filename="filename">
+    <template slot="header">图标选择器</template>
+    <div class="title-group">
+      <p class="title">一般用法</p>
+      <p class="sub-title">
+        <template v-if="icon">
+          选择的图标 {{icon}}
+          <i :class="'fa fa-' + icon"></i>
+        </template>
+        <template v-else>未选择</template>
+      </p>
+    </div>
+    <d2-icon-select v-model="icon"/>
+    <div class="title-group">
+      <p class="title">用户可以输入</p>
+      <p class="sub-title">
+        <template v-if="icon2">
+          选择的图标 {{icon2}}
+          <i :class="'fa fa-' + icon2"></i>
+        </template>
+        <template v-else>未选择</template>
+      </p>
+    </div>
+    <d2-icon-select v-model="icon2" :user-input="true"/>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      filename: __filename,
+      icon: '',
+      icon2: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.title-group {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  &:first-child {
+    margin-top: 0px;
+  }
+  .title {
+    margin: 0px;
+  }
+  .sub-title {
+    margin: 0px;
+    color: $color-text-sub;
+    font-size: 10px;
+  }
+}
+</style>