vue antd admin init
This commit is contained in:
chenghx
27
src/App.vue
Normal file
27
src/App.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<!--<img src="./assets/logo.png">-->
|
||||
<gloabl-layout>
|
||||
<router-view/>
|
||||
</gloabl-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GloablLayout from './components/layout/GloablLayout'
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {GloablLayout}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/*text-align: center;*/
|
||||
color: #2c3e50;
|
||||
/*margin-top: 60px;*/
|
||||
}
|
||||
</style>
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
113
src/components/HelloWorld.vue
Normal file
113
src/components/HelloWorld.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<h2>Essential Links</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://vuejs.org"
|
||||
target="_blank"
|
||||
>
|
||||
Core Docs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://forum.vuejs.org"
|
||||
target="_blank"
|
||||
>
|
||||
Forum
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://chat.vuejs.org"
|
||||
target="_blank"
|
||||
>
|
||||
Community Chat
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://twitter.com/vuejs"
|
||||
target="_blank"
|
||||
>
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
<a
|
||||
href="http://vuejs-templates.github.io/webpack/"
|
||||
target="_blank"
|
||||
>
|
||||
Docs for This Template
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Ecosystem</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="http://router.vuejs.org/"
|
||||
target="_blank"
|
||||
>
|
||||
vue-router
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="http://vuex.vuejs.org/"
|
||||
target="_blank"
|
||||
>
|
||||
vuex
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="http://vue-loader.vuejs.org/"
|
||||
target="_blank"
|
||||
>
|
||||
vue-loader
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/awesome-vue"
|
||||
target="_blank"
|
||||
>
|
||||
awesome-vue
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h1, h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
51
src/components/chart/MiniChart.vue
Normal file
51
src/components/chart/MiniChart.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
|
||||
<v-tooltip />
|
||||
<v-axis />
|
||||
<v-smooth-area position="time*value" />
|
||||
</v-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'viser-vue'
|
||||
|
||||
const data = [
|
||||
{ time: 0, value: 23620 },
|
||||
{ time: 2, value: 16100 },
|
||||
{ time: 4, value: 15900 },
|
||||
{ time: 6, value: 17409 },
|
||||
{ time: 8, value: 17000 },
|
||||
{ time: 10, value: 31056 },
|
||||
{ time: 12, value: 31982 },
|
||||
{ time: 14, value: 32040 },
|
||||
{ time: 16, value: 33233 },
|
||||
{ time: 18, value: 33233 },
|
||||
{ time: 20, value: 33233 },
|
||||
{ time: 22, value: 33233 }
|
||||
]
|
||||
|
||||
const scale = [{
|
||||
dataKey: 'value',
|
||||
min: 10000
|
||||
}, {
|
||||
dataKey: 'year',
|
||||
min: 0,
|
||||
max: 1
|
||||
}]
|
||||
export default {
|
||||
name: 'MiniChart',
|
||||
data () {
|
||||
return {
|
||||
data,
|
||||
scale,
|
||||
height: 400
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
72
src/components/dashboard/ChartCard.vue
Normal file
72
src/components/dashboard/ChartCard.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<a-card :body-style="{padding: '20px 24px 8px'}" :bordered="false">
|
||||
<div class="chart-card-header">
|
||||
<div class="meta">
|
||||
<span class="chart-card-title">{{title}}</span>
|
||||
<span class="chart-card-action">
|
||||
<slot name="action"></slot>
|
||||
</span>
|
||||
</div>
|
||||
<div class="total"><span>￥ 1358.34</span></div>
|
||||
</div>
|
||||
<div class="chart-card-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="chart-card-footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ACard from 'vue-antd-ui/es/card/Card'
|
||||
export default {
|
||||
name: 'ChartCard',
|
||||
components: {ACard},
|
||||
props: ['title']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-card-header{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.chart-card-header .meta{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
color: rgba(0,0,0,.45);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.chart-card-action{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.total {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
.chart-card-footer{
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding-top: 9px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.chart-card-content{
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
95
src/components/dashboard/Dashboard.vue
Normal file
95
src/components/dashboard/Dashboard.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-row style="margin: -12px">
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<chart-card title="总销售额">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<div style="display: inline-block; font-size: 14px; line-height: 22px; margin-right: 16px">
|
||||
同周比
|
||||
<span>12%</span>
|
||||
<span style="color: #f5222d; font-size: 12px"><a-icon type="caret-up" /></span>
|
||||
</div>
|
||||
<div style="display: inline-block; font-size: 14px; line-height: 22px;">
|
||||
日环比
|
||||
<span>11%</span>
|
||||
<span style="color: #52c41a; font-size: 12px"><a-icon type="caret-down" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<chart-card title="总销售额">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-chart />
|
||||
</div>
|
||||
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<chart-card title="总销售额">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<div style="display: inline-block; font-size: 14px; line-height: 22px; margin-right: 16px">
|
||||
同周比
|
||||
<span>12%</span>
|
||||
<span style="color: #f5222d; font-size: 12px"><a-icon type="caret-up" /></span>
|
||||
</div>
|
||||
<div style="display: inline-block; font-size: 14px; line-height: 22px;">
|
||||
日环比
|
||||
<span>11%</span>
|
||||
<span style="color: #52c41a; font-size: 12px"><a-icon type="caret-down" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<chart-card title="总销售额">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<div style="display: inline-block; font-size: 14px; line-height: 22px; margin-right: 16px">
|
||||
同周比
|
||||
<span>12%</span>
|
||||
<span style="color: #f5222d; font-size: 12px"><a-icon type="caret-up" /></span>
|
||||
</div>
|
||||
<div style="display: inline-block; font-size: 14px; line-height: 22px;">
|
||||
日环比
|
||||
<span>11%</span>
|
||||
<span style="color: #52c41a; font-size: 12px"><a-icon type="caret-down" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ACol from 'vue-antd-ui/es/grid/Col'
|
||||
import ARow from 'vue-antd-ui/es/grid/Row'
|
||||
import ACard from 'vue-antd-ui/es/card/Card'
|
||||
import ChartCard from './ChartCard'
|
||||
import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
|
||||
import AIcon from 'vue-antd-ui/es/icon/icon'
|
||||
import MiniChart from '../chart/MiniChart'
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
components: {MiniChart, AIcon, ATooltip, ChartCard, ACard, ARow, ACol}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
76
src/components/layout/GloablHeader.vue
Normal file
76
src/components/layout/GloablHeader.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<a-layout-header style="background: #fff; padding: 0 12px 0 0;box-shadow: 0 1px 4px rgba(0,21,41,.08);">
|
||||
<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
|
||||
<div style="float: right">
|
||||
<header-search class="header-item"/>
|
||||
<a-tooltip class="header-item" title="帮助文档" placement="bottom" >
|
||||
<a>
|
||||
<a-icon type="question-circle-o" />
|
||||
</a>
|
||||
</a-tooltip>
|
||||
<header-notice class="header-item"/>
|
||||
<header-avatar class="header-item"/>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ALayout from 'vue-antd-ui/es/layout'
|
||||
import AIcon from 'vue-antd-ui/es/icon/icon'
|
||||
import AInputSearch from 'vue-antd-ui/es/input/Search'
|
||||
import HeaderSearch from './HeaderSearch'
|
||||
import HeaderNotice from './HeaderNotice'
|
||||
import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
|
||||
import HeaderAvatar from './HeaderlAvatar'
|
||||
|
||||
const ALayoutSider = ALayout.Sider
|
||||
const ALayoutHeader = ALayout.Header
|
||||
export default {
|
||||
name: 'GloablHeader',
|
||||
components: {
|
||||
HeaderAvatar,
|
||||
ATooltip,
|
||||
HeaderNotice,
|
||||
HeaderSearch,
|
||||
AInputSearch,
|
||||
AIcon,
|
||||
ALayout,
|
||||
ALayoutSider,
|
||||
ALayoutHeader},
|
||||
props: ['collapsed'],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse () {
|
||||
this.$emit('toggleCollapse')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.trigger {
|
||||
font-size: 20px;
|
||||
line-height: 64px;
|
||||
padding: 0 24px;
|
||||
cursor: pointer;
|
||||
transition: color .3s;
|
||||
}
|
||||
|
||||
.trigger:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.header-item{
|
||||
margin: 0 12px;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header-item i{
|
||||
font-size: 16px;
|
||||
color: rgba(0,0,0,.65);
|
||||
}
|
||||
</style>
|
||||
115
src/components/layout/GloablLayout.vue
Normal file
115
src/components/layout/GloablLayout.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<a-layout>
|
||||
<a-layout-sider width="256px" collapsible v-model="collapsed" :trigger="null">
|
||||
<div class="logo">
|
||||
<a href="/">
|
||||
<img src="static/img/vue-antd-logo.png">
|
||||
<h1>Vue Ant Pro</h1>
|
||||
</a>
|
||||
</div>
|
||||
<!--<gloabl-menu :collapsed="collapsed"/>-->
|
||||
<i-menu :menuData="menuData" />
|
||||
</a-layout-sider>
|
||||
<a-layout>
|
||||
<gloabl-header :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
|
||||
<a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
|
||||
<slot></slot>
|
||||
</a-layout-content>
|
||||
<a-layout-footer></a-layout-footer>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ALayout from 'vue-antd-ui/es/layout'
|
||||
import GloablHeader from './GloablHeader'
|
||||
import AIcon from 'vue-antd-ui/es/icon/icon'
|
||||
import GloablMenu from './GloablMenu'
|
||||
import IMenu from '../menu/menu'
|
||||
|
||||
const ALayoutSider = ALayout.Sider
|
||||
const ALayoutHeader = ALayout.Header
|
||||
const ALayoutContent = ALayout.Content
|
||||
const ALayoutFooter = ALayout.Footer
|
||||
const minHeight = window.innerHeight - 64 - 48
|
||||
|
||||
const menuData = [
|
||||
{
|
||||
title: '统计分析',
|
||||
path: '/dashboard'
|
||||
},
|
||||
{
|
||||
title: '图表',
|
||||
path: '/chart',
|
||||
icon: 'line-chart'
|
||||
},
|
||||
{
|
||||
title: '报表系统'
|
||||
},
|
||||
{
|
||||
title: '日志',
|
||||
children: [
|
||||
{
|
||||
title: '日志分析',
|
||||
icon: 'none'
|
||||
},
|
||||
{
|
||||
title: '数据分析',
|
||||
icon: 'none'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'GloablLayout',
|
||||
components: {
|
||||
GloablMenu,
|
||||
AIcon,
|
||||
GloablHeader,
|
||||
ALayout,
|
||||
ALayoutSider,
|
||||
ALayoutHeader,
|
||||
ALayoutContent,
|
||||
ALayoutFooter,
|
||||
IMenu},
|
||||
data () {
|
||||
return {
|
||||
minHeight: minHeight + 'px',
|
||||
collapsed: false,
|
||||
menuData: menuData
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse () {
|
||||
this.collapsed = !this.collapsed
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.logo{
|
||||
height: 64px;
|
||||
position: relative;
|
||||
line-height: 64px;
|
||||
padding-left: 24px;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
background: #002140;
|
||||
overflow: hidden;
|
||||
}
|
||||
.logo h1{
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
margin: 0 0 0 12px;
|
||||
font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
}
|
||||
.logo img{
|
||||
width: 32px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
57
src/components/layout/GloablMenu.vue
Normal file
57
src/components/layout/GloablMenu.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<a-menu theme="dark" mode="inline" :inlineCollapsed="collapsed">
|
||||
<slot></slot>
|
||||
<a-menu-item>
|
||||
<a-icon type="dashboard" />
|
||||
<span>统计分析</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="/">
|
||||
<a-icon type="user" />
|
||||
<span>个人中心</span>
|
||||
</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-icon type="form" />
|
||||
<span>个人中心</span>
|
||||
</a-menu-item>
|
||||
<a-sub-menu>
|
||||
<span slot="title">
|
||||
<a-icon type="appstore" />
|
||||
<span>系统日志</span>
|
||||
</span>
|
||||
<a-menu-item>
|
||||
<span>应用日志</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<span>数据库日志</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<span>操作日志</span>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AIcon from 'vue-antd-ui/es/icon/icon'
|
||||
import AMenu from 'vue-antd-ui/es/menu/index'
|
||||
const ASubMenu = AMenu.SubMenu
|
||||
const AMenuItem = AMenu.Item
|
||||
|
||||
export default {
|
||||
name: 'GloablMenu',
|
||||
props: {
|
||||
collapsed: Boolean
|
||||
},
|
||||
components: {AIcon, AMenu, ASubMenu, AMenuItem},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
80
src/components/layout/HeaderNotice.vue
Normal file
80
src/components/layout/HeaderNotice.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<a-popover trigger="click" placement="bottomRight">
|
||||
<template slot="content">
|
||||
<a-spin :spinning="loadding">
|
||||
<a-tabs>
|
||||
<a-tab-pane tab="通知" key="1">
|
||||
<a-list>
|
||||
<a-list-item>
|
||||
<a-list-item-meta title="你收到了 14 份新周报" description="一年前">
|
||||
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
|
||||
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
|
||||
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="消息" key="2">
|
||||
123
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="待办" key="3">
|
||||
123
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-spin>
|
||||
</template>
|
||||
<span @click="fetchNotice">
|
||||
<a-badge count="12">
|
||||
<a-icon style="font-size: 16px; padding: 4px" type="bell" />
|
||||
</a-badge>
|
||||
</span>
|
||||
</a-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import APopover from 'vue-antd-ui/es/popover/index'
|
||||
import AIcon from 'vue-antd-ui/es/icon/icon'
|
||||
import ABadge from 'vue-antd-ui/es/badge/Badge'
|
||||
import ATabs from 'vue-antd-ui/es/tabs'
|
||||
import AList from 'vue-antd-ui/es/list/index'
|
||||
import AListItem from 'vue-antd-ui/es/list/Item'
|
||||
import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
|
||||
import ASpin from 'vue-antd-ui/es/spin/Spin'
|
||||
|
||||
const ATabPane = ATabs.TabPane
|
||||
const AListItemMeta = AListItem.Meta
|
||||
|
||||
export default {
|
||||
name: 'HeaderNotice',
|
||||
components: {ASpin, AAvatar, AListItem, AList, ATabs, ABadge, AIcon, APopover, ATabPane, AListItemMeta},
|
||||
data () {
|
||||
return {
|
||||
loadding: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchNotice () {
|
||||
if (this.loadding) {
|
||||
this.loadding = false
|
||||
return
|
||||
}
|
||||
this.loadding = true
|
||||
setTimeout(() => {
|
||||
this.loadding = false
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
75
src/components/layout/HeaderSearch.vue
Normal file
75
src/components/layout/HeaderSearch.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<span class="header-item">
|
||||
<a-icon type="search" style="font-size: 16px; cursor: pointer;" @click="enterSearchMode"/>
|
||||
<a-auto-complete
|
||||
ref="input"
|
||||
:dataSource="dataSource"
|
||||
:class="[searchMode ? 'enterSearch' : 'leaveSearch']"
|
||||
placeholder="站内搜索"
|
||||
@blur="leaveSearchMode"
|
||||
>
|
||||
<a-input style="" />
|
||||
</a-auto-complete>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AIcon from 'vue-antd-ui/es/icon/icon'
|
||||
import AAutoComplete from 'vue-antd-ui/es/auto-complete/index'
|
||||
import AInput from 'vue-antd-ui/es/input/Input'
|
||||
export default {
|
||||
name: 'HeaderSearch',
|
||||
components: {AInput, AAutoComplete, AIcon},
|
||||
data () {
|
||||
return {
|
||||
dataSource: ['选项一', '选项二'],
|
||||
searchMode: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
enterSearchMode () {
|
||||
this.searchMode = true
|
||||
this.$refs.input.focus()
|
||||
},
|
||||
leaveSearchMode () {
|
||||
this.searchMode = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.enterSearch {
|
||||
width: 225px;
|
||||
border-bottom: 1px rgba(3, 5, 6, 0.23) solid;
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
.leaveSearch {
|
||||
width: 0px;
|
||||
border-bottom: 1px rgba(3, 5, 6, 0.23) solid;
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
.enterSearch input, .leaveSearch input {
|
||||
border: 0;
|
||||
}
|
||||
.enterSearch input:focus {
|
||||
border: 0;
|
||||
box-shadow: 0 0 0 0;
|
||||
}
|
||||
.leaveSearch input{
|
||||
width: 0px;
|
||||
border: 0;
|
||||
}
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: width .3s;
|
||||
}
|
||||
.fade-enter{
|
||||
width: 200px;
|
||||
}
|
||||
.fade-leave{
|
||||
width: 0px;
|
||||
}
|
||||
.header-item{
|
||||
margin: 0 12px;
|
||||
}
|
||||
</style>
|
||||
42
src/components/layout/HeaderlAvatar.vue
Normal file
42
src/components/layout/HeaderlAvatar.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<a-dropdown style="display: inline-block; height: 100%" >
|
||||
<span style="vertical-align: middle; cursor: pointer">
|
||||
<a-avatar style="vertical-align: middle;" size="small" shape="circle" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"/>
|
||||
<span>ICZER</span>
|
||||
</span>
|
||||
<a-menu style="width: 150px" slot="overlay">
|
||||
<a-menu-item>
|
||||
<a-icon type="user" />
|
||||
<span>个人中心</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-icon type="setting" />
|
||||
<span>设置</span>
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item>
|
||||
<a-icon type="poweroff" />
|
||||
<span>退出登录</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ADropdown from 'vue-antd-ui/es/dropdown'
|
||||
import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
|
||||
import AIcon from 'vue-antd-ui/es/icon/icon'
|
||||
import AMenu from 'vue-antd-ui/es/menu/index'
|
||||
|
||||
const AMenuItem = AMenu.Item
|
||||
const AMenuDivider = AMenu.Divider
|
||||
|
||||
export default {
|
||||
name: 'HeaderAvatar',
|
||||
components: {AMenu, AMenuItem, AMenuDivider, AIcon, AAvatar, ADropdown}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
120
src/components/menu/menu.js
Normal file
120
src/components/menu/menu.js
Normal file
@@ -0,0 +1,120 @@
|
||||
/**
|
||||
* 该插件可根据菜单配置自动生成 ANTD menu组件
|
||||
* menuData示例：
|
||||
* [
|
||||
* {
|
||||
* title: '菜单标题',
|
||||
* icon: '菜单图标',
|
||||
* path: '菜单路由',
|
||||
* invisible: 'boolean, 是否不可见',
|
||||
* children: [子菜单配置]
|
||||
* },
|
||||
* {
|
||||
* title: '菜单标题',
|
||||
* icon: '菜单图标',
|
||||
* path: '菜单路由',
|
||||
* invisible: 'boolean, 是否不可见',
|
||||
* children: [子菜单配置]
|
||||
* }
|
||||
* ]
|
||||
**/
|
||||
import Menu from 'vue-antd-ui/es/menu'
|
||||
import Icon from 'vue-antd-ui/es/icon/icon'
|
||||
|
||||
const {Item, SubMenu} = Menu
|
||||
|
||||
// 默认菜单图标数组，如果菜单没配置图标，则会设置从该数组随机取一个图标配置
|
||||
const iconArr = ['dashboard', 'user', 'form', 'setting', 'message', 'safety', 'bell', 'delete', 'code-o', 'poweroff', 'eye-o', 'hourglass']
|
||||
|
||||
export default {
|
||||
name: 'IMenu',
|
||||
props: {
|
||||
menuData: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'dark'
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'inline'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderIcon: function (h, icon) {
|
||||
return icon === 'none' ? null
|
||||
: h(
|
||||
Icon,
|
||||
{
|
||||
props: {type: icon !== undefined ? icon : iconArr[Math.floor((Math.random() * iconArr.length))]}
|
||||
})
|
||||
},
|
||||
renderMenuItem: function (h, menu, pIndex, index) {
|
||||
return h(
|
||||
Item,
|
||||
{
|
||||
key: menu.path ? menu.path : 'item_' + pIndex + '_' + index
|
||||
},
|
||||
[
|
||||
h(
|
||||
'a',
|
||||
{attrs: {href: '#' + menu.path}},
|
||||
[
|
||||
this.renderIcon(h, menu.icon),
|
||||
h('span', [menu.title])
|
||||
]
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
renderSubMenu: function (h, menu, pIndex, index) {
|
||||
var this2_ = this
|
||||
var subItem = [h('span',
|
||||
{slot: 'title'},
|
||||
[
|
||||
this.renderIcon(h, menu.icon),
|
||||
h('span', [menu.title])
|
||||
]
|
||||
)]
|
||||
var itemArr = []
|
||||
var pIndex_ = pIndex + '_' + index
|
||||
menu.children.forEach(function (item, i) {
|
||||
itemArr.push(this2_.renderItem(h, item, pIndex_, i))
|
||||
})
|
||||
return h(
|
||||
SubMenu,
|
||||
{key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index},
|
||||
subItem.concat(itemArr)
|
||||
)
|
||||
},
|
||||
renderItem: function (h, menu, pIndex, index) {
|
||||
if (!menu.invisible) {
|
||||
return menu.children ? this.renderSubMenu(h, menu, pIndex, index) : this.renderMenuItem(h, menu, pIndex, index)
|
||||
}
|
||||
},
|
||||
renderMenu: function (h, menuTree) {
|
||||
var this2_ = this
|
||||
var menuArr = []
|
||||
menuTree.forEach(function (menu, i) {
|
||||
menuArr.push(this2_.renderItem(h, menu, '0', i))
|
||||
})
|
||||
return menuArr
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
return h(
|
||||
Menu,
|
||||
{
|
||||
props: {
|
||||
theme: this.$props.theme,
|
||||
mode: this.$props.mode,
|
||||
inlineCollapsed: false
|
||||
}
|
||||
}, this.renderMenu(h, this.menuData)
|
||||
)
|
||||
}
|
||||
}
|
||||
18
src/main.js
Normal file
18
src/main.js
Normal file
@@ -0,0 +1,18 @@
|
||||
// The Vue build version to load with the `import` command
|
||||
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
import 'vue-antd-ui/dist/antd.css'
|
||||
import Viser from 'viser-vue'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(Viser)
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
components: { App },
|
||||
template: '<App/>'
|
||||
})
|
||||
26
src/router/index.js
Normal file
26
src/router/index.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Dashboard from '@/components/dashboard/Dashboard'
|
||||
import MiniChart from '@/components/chart/MiniChart'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'hello',
|
||||
component: Dashboard
|
||||
},
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'dashboard',
|
||||
component: Dashboard
|
||||
},
|
||||
{
|
||||
path: '/chart',
|
||||
name: 'chart',
|
||||
component: MiniChart
|
||||
}
|
||||
]
|
||||
})
|
||||
Reference in New Issue
Block a user