lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: vite版重构中

Browse Source
This commit is contained in:
kailong321200875
2021-10-17 11:46:40 +08:00
parent a8163874dc
commit 0f5c55c36d
37 changed files with 2048 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

306
src/views/components-demo/echarts/echart-data.ts Normal file
View File

@@ -0,0 +1,306 @@
import { EChartsOption } from 'echarts'
import { EChartsOption as EChartsWordOption } from 'echarts-wordcloud'
export const lineOptions: EChartsOption = {
xAxis: {
data: [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月'
],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 30,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['预期', '实际']
},
series: [
{
name: '预期',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut'
}
]
}
export const pieOptions: EChartsOption = {
title: {
text: '用户访问来源',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '用户访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
}
export const barOptions: EChartsOption = {
title: {
text: '每周用户活跃量',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value'
},
series: [
{
name: '活跃量',
data: [13253, 34235, 26321, 12340, 24643, 1322, 1324],
type: 'bar'
}
]
}
export const pieOptions2: EChartsOption = {
title: {
text: '用户访问来源',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{
value: 335,
name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 274,
name: '联盟广告'
},
{
value: 235,
name: '视频广告'
},
{
value: 400,
name: '搜索引擎'
}
].sort(function (a, b) {
return a.value - b.value
}),
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
export const wordOptions: EChartsWordOption = {
tooltip: {},
series: [
{
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'pentagon',
width: 600,
height: 400,
drawOutOfBound: true,
textStyle: {
color: function () {
return (
'rgb(' +
[
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') +
')'
)
}
},
emphasis: {
textStyle: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: [
{
name: 'Sam S Club',
value: 10000,
textStyle: {
color: 'black'
},
emphasis: {
textStyle: {
color: 'red'
}
}
},
{
name: 'Macys',
value: 6181
},
{
name: 'Amy Schumer',
value: 4386
},
{
name: 'Jurassic World',
value: 4055
},
{
name: 'Charter Communications',
value: 2467
},
{
name: 'Chick Fil A',
value: 2244
},
{
name: 'Planet Fitness',
value: 1898
},
{
name: 'Pitch Perfect',
value: 1484
},
{
name: 'Express',
value: 1112
},
{
name: 'Home',
value: 965
},
{
name: 'Johnny Depp',
value: 847
},
{
name: 'Lena Dunham',
value: 582
},
{
name: 'Lewis Hamilton',
value: 555
},
{
name: 'KXAN',
value: 550
},
{
name: 'Mary Ellen Mark',
value: 462
},
{
name: 'Farrah Abraham',
value: 366
},
{
name: 'Rita Ora',
value: 360
},
{
name: 'Serena Williams',
value: 282
},
{
name: 'NCAA baseball tournament',
value: 273
},
{
name: 'Point Break',
value: 265
}
]
}
]
}

53
src/views/components-demo/echarts/index.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="统一封装 Echart 组件，自适应宽度，只需传入 options 与 height 属性即可展示对应的图表。"
type="info"
style="margin-bottom: 20px"
/>
<el-row :gutter="20">
<el-col :span="10">
<div class="chart-wrap">
<echart :height="'300px'" :options="pieOptions" />
</div>
</el-col>
<el-col :span="14">
<div class="chart-wrap">
<echart :options="barOptions" :height="'300px'" />
</div>
</el-col>
<el-col :span="14">
<div class="chart-wrap">
<echart :options="lineOptions" :height="'300px'" />
</div>
</el-col>
<el-col :span="10">
<div class="chart-wrap">
<echart :options="pieOptions2" :height="'300px'" />
</div>
</el-col>
<el-col :span="24">
<div class="chart-wrap">
<echart :options="wordOptions" :height="'300px'" />
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts" name="EchartsDemo">
import { lineOptions, pieOptions, barOptions, pieOptions2, wordOptions } from './echart-data'
import Echart from '_c/Echart/index.vue'
</script>
<style lang="less" scoped>
.chart-wrap {
padding: 10px;
margin-bottom: 20px;
background-color: #fff;
border-radius: 5px;
}
</style>

113
src/views/components-demo/preview/index.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title="抽取于 Element 的图片预览组件进行改造，实现函数式调用组件，无需基于图片进行点击预览。"
type="info"
style="margin-bottom: 20px"
/>
<el-alert
effect="dark"
:closable="false"
title="有底图预览。"
type="info"
style="margin-bottom: 20px"
/>
<div class="img-wrap">
<div
v-for="(item, $index) in imgList"
:key="item"
class="img-item"
@click="showHasImg($index)"
>
<img :src="item" alt="" />
</div>
</div>
<el-alert
effect="dark"
:closable="false"
title="无底图预览。"
type="info"
style="margin-top: 20px; margin-bottom: 20px"
/>
<el-button type="primary" @click="showNoImg">点击预览</el-button>
<el-alert
effect="dark"
:closable="false"
title="点击事件，包含图片点击事件以及关闭事件。"
type="info"
style="margin-top: 20px; margin-bottom: 20px"
/>
<el-button type="primary" @click="showImg">点击预览</el-button>
</div>
</template>
<script setup lang="ts" name="PreviewDemo">
import { ref } from 'vue'
import { createImgPreview } from '_c/Preview'
import { Message } from '_c/Message'
const imgList = ref<string[]>([
'https://img1.baidu.com/it/u=657828739,1486746195&fm=26&fmt=auto&gp=0.jpg',
'https://img0.baidu.com/it/u=3114228356,677481409&fm=26&fmt=auto&gp=0.jpg',
'https://img1.baidu.com/it/u=508846955,3814747122&fm=26&fmt=auto&gp=0.jpg',
'https://img1.baidu.com/it/u=3536647690,3616605490&fm=26&fmt=auto&gp=0.jpg',
'https://img1.baidu.com/it/u=4087287201,1148061266&fm=26&fmt=auto&gp=0.jpg',
'https://img2.baidu.com/it/u=3429163260,2974496379&fm=26&fmt=auto&gp=0.jpg'
])
function showHasImg(i: number) {
createImgPreview({
index: i,
imageList: imgList.value
})
}
function showNoImg() {
createImgPreview({
index: 0,
imageList: imgList.value
})
}
function showImg() {
createImgPreview({
index: 0,
imageList: imgList.value,
onClose: (i: number) => {
Message.info('关闭的图片索引：' + i)
},
onSelect: (i: number) => {
Message.info('当前点击的图片索引：' + i)
}
})
}
</script>
<style lang="less" scoped>
.img-wrap {
display: flex;
justify-content: center;
.img-item {
position: relative;
width: 400px;
height: 300px;
margin: 0 10px;
overflow: hidden;
cursor: pointer;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
</style>

147
src/views/dashboard/components/PanelGroup.vue Normal file
View File

@@ -0,0 +1,147 @@
<template>
<el-row :gutter="20" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">新增用户</div>
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">未读信息</div>
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">成交金额</div>
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">购物总量</div>
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
</div>
</div>
</el-col>
</el-row>
</template>
<script setup lang="ts" name="PanelGroup">
import CountTo from '_c/CountTo/index.vue'
const emit = defineEmits(['handleSetLineChartData'])
function handleSetLineChartData(type: string) {
emit('handleSetLineChartData', type)
}
</script>
<style lang="less" scoped>
.panel-group {
.card-panel-col {
margin-bottom: 20px;
}
.card-panel {
position: relative;
height: 108px;
overflow: hidden;
font-size: 12px;
color: #666;
cursor: pointer;
background: #fff;
border-color: rgba(0, 0, 0, 0.05);
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-people {
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
}
.icon-shopping {
background: #34bfa3;
}
}
.icon-people {
color: #40c9c6;
}
.icon-message {
color: #36a3f7;
}
.icon-money {
color: #f4516c;
}
.icon-shopping {
color: #34bfa3;
}
.card-panel-icon-wrapper {
float: left;
padding: 16px;
margin: 14px 0 0 14px;
border-radius: 6px;
transition: all 0.38s ease-out;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description {
float: right;
margin: 26px;
margin-left: 0;
font-weight: bold;
.card-panel-text {
margin-bottom: 12px;
font-size: 16px;
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
}
.card-panel-num {
font-size: 20px;
}
}
}
}
</style>

126
src/views/dashboard/echart-data.ts Normal file
View File

@@ -0,0 +1,126 @@
import { EChartsOption } from 'echarts'
export const lineOptions: EChartsOption = {
xAxis: {
data: [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月'
],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 30,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['预期', '实际']
},
series: [
{
name: '预期',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: '实际',
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut'
}
]
}
export const pieOptions: EChartsOption = {
title: {
text: '用户访问来源',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '用户访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
}
export const barOptions: EChartsOption = {
title: {
text: '每周用户活跃量',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value'
},
series: [
{
name: '活跃量',
data: [13253, 34235, 26321, 12340, 24643, 1322, 1324],
type: 'bar'
}
]
}

34
src/views/dashboard/index.vue
View File

@@ -1,5 +1,35 @@
<template>
<div>2222</div>
<div>
<panel-group />
<el-row :gutter="20">
<el-col :span="10">
<div class="chart__wrap">
<echart :options="pieOptions" :height="'300px'" />
</div>
</el-col>
<el-col :span="14">
<div class="chart__wrap">
<echart :options="barOptions" :height="'300px'" />
</div>
</el-col>
</el-row>
<div class="chart__wrap">
<echart :options="lineOptions" :height="'300px'" />
</div>
</div>
</template>
<script setup lang="ts" name="Dashboard"></script>
<script setup lang="ts" name="Dashboard">
import { lineOptions, pieOptions, barOptions } from './echart-data'
import Echart from '_c/Echart/index.vue'
import PanelGroup from './components/PanelGroup.vue'
</script>
<style lang="less" scoped>
.chart__wrap {
padding: 10px;
margin-bottom: 20px;
background-color: #fff;
border-radius: 5px;
}
</style>

32
src/views/guide/index.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<div>
<el-alert
effect="dark"
:closable="false"
title=" 引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。引导页基于 intro.js"
type="info"
style="margin-bottom: 20px"
/>
<el-button type="primary" @click.prevent.stop="guide"> 开始引导 </el-button>
</div>
</template>
<script setup lang="ts" name="Guide">
import { onMounted } from 'vue'
import { useIntro } from '@/hooks/web/useIntro'
const { intro } = useIntro()
import steps from './steps'
function guide() {
intro.start()
}
onMounted(() => {
intro.addSteps(steps as any[]).setOptions({
prevLabel: '上一步',
nextLabel: '下一步',
skipLabel: '跳过',
doneLabel: '结束'
})
})
</script>

40
src/views/guide/steps.ts Normal file
View File

@@ -0,0 +1,40 @@
const steps = [
{
element: '#sidebar__wrap',
title: '菜单栏',
intro: '以路由的结构渲染的菜单栏',
position: 'right'
},
{
element: '#hamburger-container',
title: '展开缩收',
intro: '用于展开和缩放菜单栏',
position: 'bottom'
},
{
element: '#breadcrumb-container',
title: '面包屑',
intro: '用于记录当前路由结构',
position: 'bottom'
},
{
element: '#screenfull-container',
title: '是否全屏',
intro: '用于设置是否全屏',
position: 'bottom'
},
{
element: '#user-container',
title: '用户信息',
intro: '用于展示用户',
position: 'bottom'
},
{
element: '#tag-container',
title: '标签页',
intro: '用于记录路由历史记录',
position: 'bottom'
}
]
export default steps

12
src/views/level/menu111.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div style="display: flex; padding: 20px; background: #fff; align-items: center">
<div style="min-width: 200px">多层级缓存-页面1-1-1：</div>
<el-input v-model="value" />
</div>
</template>
<script setup lang="ts" name="Menu111Demo">
import { ref } from 'vue'
const value = ref<string>('')
</script>

12
src/views/level/menu12.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div style="display: flex; padding: 20px; background: #fff; align-items: center">
<div style="min-width: 200px">多层级缓存-页面1-2：</div>
<el-input v-model="value" />
</div>
</template>
<script setup lang="ts" name="Menu12Demo">
import { ref } from 'vue'
const value = ref<string>('')
</script>

12
src/views/level/menu2.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div style="display: flex; padding: 20px; background: #fff; align-items: center">
<div style="min-width: 200px">多层级缓存-页面2：</div>
<el-input v-model="value" />
</div>
</template>
<script setup lang="ts" name="Menu2Demo">
import { ref } from 'vue'
const value = ref<string>('')
</script>