zetan-cli-dev-template-vue-element-admin 1.0.0

package/template/src/views/components-demo/mixin.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="mixin-components-container">
+    <el-row>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Buttons</span>
+        </div>
+        <div style="margin-bottom:50px;">
+          <el-col :span="4" class="text-center">
+            <router-link class="pan-btn blue-btn" to="/documentation/index">
+              Documentation
+            </router-link>
+          </el-col>
+          <el-col :span="4" class="text-center">
+            <router-link class="pan-btn light-blue-btn" to="/icon/index">
+              Icons
+            </router-link>
+          </el-col>
+          <el-col :span="4" class="text-center">
+            <router-link class="pan-btn pink-btn" to="/excel/export-excel">
+              Excel
+            </router-link>
+          </el-col>
+          <el-col :span="4" class="text-center">
+            <router-link class="pan-btn green-btn" to="/table/complex-table">
+              Table
+            </router-link>
+          </el-col>
+          <el-col :span="4" class="text-center">
+            <router-link class="pan-btn tiffany-btn" to="/example/create">
+              Form
+            </router-link>
+          </el-col>
+          <el-col :span="4" class="text-center">
+            <router-link class="pan-btn yellow-btn" to="/theme/index">
+              Theme
+            </router-link>
+          </el-col>
+        </div>
+      </el-card>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-top:50px;">
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Material Design 的input</span>
+          </div>
+          <div style="height:100px;">
+            <el-form :model="demo" :rules="demoRules">
+              <el-form-item prop="title">
+                <md-input v-model="demo.title" icon="el-icon-search" name="title" placeholder="输入标题">
+                  标题
+                </md-input>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>图片hover效果</span>
+          </div>
+          <div class="component-item">
+            <pan-thumb width="100px" height="100px" image="https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191">
+              vue-element-admin
+            </pan-thumb>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>水波纹 waves v-directive</span>
+          </div>
+          <div class="component-item">
+            <el-button v-waves type="primary">
+              水波纹效果
+            </el-button>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>hover text</span>
+          </div>
+          <div class="component-item">
+            <mallki class-name="mallki-text" text="vue-element-admin" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-top:50px;">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Share</span>
+          </div>
+          <div class="component-item" style="height:420px;">
+            <dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import PanThumb from '@/components/PanThumb'
+import MdInput from '@/components/MDinput'
+import Mallki from '@/components/TextHoverEffect/Mallki'
+import DropdownMenu from '@/components/Share/DropdownMenu'
+import waves from '@/directive/waves/index.js' // 水波纹指令
+
+export default {
+  name: 'ComponentMixinDemo',
+  components: {
+    PanThumb,
+    MdInput,
+    Mallki,
+    DropdownMenu
+  },
+  directives: {
+    waves
+  },
+  data() {
+    const validate = (rule, value, callback) => {
+      if (value.length !== 6) {
+        callback(new Error('请输入六个字符'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      demo: {
+        title: ''
+      },
+      demoRules: {
+        title: [{ required: true, trigger: 'change', validator: validate }]
+      },
+      articleList: [
+        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
+        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
+        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
+        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
+        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
+        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mixin-components-container {
+  background-color: #f0f2f5;
+  padding: 30px;
+  min-height: calc(100vh - 84px);
+}
+.component-item{
+  min-height: 100px;
+}
+</style>

package/template/src/views/components-demo/split-pane.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="components-container">
+    <aside><strong>SplitPane</strong> If you've used
+      <a href="https://codepen.io/" target="_blank"> codepen</a>,
+      <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
+      <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
+    </aside>
+    <split-pane split="vertical" @resize="resize">
+      <template slot="paneL">
+        <div class="left-container" />
+      </template>
+      <template slot="paneR">
+        <split-pane split="horizontal">
+          <template slot="paneL">
+            <div class="top-container" />
+          </template>
+          <template slot="paneR">
+            <div class="bottom-container" />
+          </template>
+        </split-pane>
+      </template>
+    </split-pane>
+  </div>
+</template>
+
+<script>
+import splitPane from 'vue-splitpane'
+
+export default {
+  name: 'SplitpaneDemo',
+  components: { splitPane },
+  methods: {
+    resize() {
+      console.log('resize')
+    }
+  }
+}
+</script>
+
+<style  scoped>
+  .components-container {
+    position: relative;
+    height: 100vh;
+  }
+
+  .left-container {
+    background-color: #F38181;
+    height: 100%;
+  }
+
+  .right-container {
+    background-color: #FCE38A;
+    height: 200px;
+  }
+
+  .top-container {
+    background-color: #FCE38A;
+    width: 100%;
+    height: 100%;
+  }
+
+  .bottom-container {
+    width: 100%;
+    background-color: #95E1D3;
+    height: 100%;
+  }
+</style>

package/template/src/views/components-demo/sticky.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <sticky :z-index="10" class-name="sub-navbar">
+      <el-dropdown trigger="click">
+        <el-button plain>
+          Platform<i class="el-icon-caret-bottom el-icon--right" />
+        </el-button>
+        <el-dropdown-menu slot="dropdown" class="no-border">
+          <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
+            <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
+              {{ item.name }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <el-dropdown trigger="click">
+        <el-button plain>
+          Link<i class="el-icon-caret-bottom el-icon--right" />
+        </el-button>
+        <el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
+          <el-input v-model="url" placeholder="Please enter the content">
+            <template slot="prepend">
+              Url
+            </template>
+          </el-input>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <div class="time-container">
+        <el-date-picker v-model="time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time" />
+      </div>
+
+      <el-button style="margin-left: 10px;" type="success">
+        publish
+      </el-button>
+    </sticky>
+
+    <div class="components-container">
+      <aside>
+        Sticky header, When the page is scrolled to the preset position will be sticky on the top.
+      </aside>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <sticky :sticky-top="200">
+        <el-button type="primary"> placeholder</el-button>
+      </sticky>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+      <div>placeholder</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Sticky from '@/components/Sticky'
+
+export default {
+  name: 'StickyDemo',
+  components: { Sticky },
+  data() {
+    return {
+      time: '',
+      url: '',
+      platforms: ['a-platform'],
+      platformsOptions: [
+        { key: 'a-platform', name: 'platformA' },
+        { key: 'b-platform', name: 'platformB' },
+        { key: 'c-platform', name: 'platformC' }
+      ],
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.components-container div {
+  margin: 10px;
+}
+
+.time-container {
+  display: inline-block;
+}
+</style>

package/template/src/views/components-demo/tinymce.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="components-container">
+    <aside>
+      Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
+      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html">Documentation</a>
+    </aside>
+    <div>
+      <tinymce v-model="content" :height="300" />
+    </div>
+    <div class="editor-content" v-html="content" />
+  </div>
+</template>
+
+<script>
+import Tinymce from '@/components/Tinymce'
+
+export default {
+  name: 'TinymceDemo',
+  components: { Tinymce },
+  data() {
+    return {
+      content:
+      `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /><ul>
+        <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li><li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
+      </ul>`
+    }
+  }
+}
+</script>
+
+<style scoped>
+.editor-content{
+  margin-top: 20px;
+}
+</style>
+

package/template/src/views/dashboard/admin/components/BarChart.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          name: 'pageA',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [79, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageB',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [80, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageC',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [30, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

package/template/src/views/dashboard/admin/components/BoxCard.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-card class="box-card-component" style="margin-left:8px;">
+    <div slot="header" class="box-card-header">
+      <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
+    </div>
+    <div style="position:relative;">
+      <pan-thumb :image="avatar" class="panThumb" />
+      <mallki class-name="mallki-text" text="vue-element-admin" />
+      <div style="padding-top:35px;" class="progress-item">
+        <span>Vue</span>
+        <el-progress :percentage="70" />
+      </div>
+      <div class="progress-item">
+        <span>JavaScript</span>
+        <el-progress :percentage="18" />
+      </div>
+      <div class="progress-item">
+        <span>CSS</span>
+        <el-progress :percentage="12" />
+      </div>
+      <div class="progress-item">
+        <span>ESLint</span>
+        <el-progress :percentage="100" status="success" />
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanThumb from '@/components/PanThumb'
+import Mallki from '@/components/TextHoverEffect/Mallki'
+
+export default {
+  components: { PanThumb, Mallki },
+
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        success: 'success',
+        pending: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      statisticsData: {
+        article_count: 1024,
+        pageviews_count: 1024
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'avatar',
+      'roles'
+    ])
+  }
+}
+</script>
+
+<style lang="scss" >
+.box-card-component{
+  .el-card__header {
+    padding: 0px!important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.box-card-component {
+  .box-card-header {
+    position: relative;
+    height: 220px;
+    img {
+      width: 100%;
+      height: 100%;
+      transition: all 0.2s linear;
+      &:hover {
+        transform: scale(1.1, 1.1);
+        filter: contrast(130%);
+      }
+    }
+  }
+  .mallki-text {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+  .panThumb {
+    z-index: 100;
+    height: 70px!important;
+    width: 70px!important;
+    position: absolute!important;
+    top: -45px;
+    left: 0px;
+    border: 5px solid #ffffff;
+    background-color: #fff;
+    margin: auto;
+    box-shadow: none!important;
+    ::v-deep .pan-info {
+      box-shadow: none!important;
+    }
+  }
+  .progress-item {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+  @media only screen and (max-width: 1510px){
+    .mallki-text{
+      display: none;
+    }
+  }
+}
+</style>