Skip to content

V
vue3-element-admin

有来技术 / vue3-element-admin

通知 3
Star 1
Fork 0
V
vue3-element-admin

体验新版 GitCode，发现更多精彩内容 >>

提交 c55eccf1 编写于 作者: H haoxr
浏览文件
操作

refactor: 控制台简化 

Former-commit-id: bb17a4f9
上级 e0dfddea
隐藏空白更改
内联 并排
Showing with 94 addition and 591 deletion
src/components/ThemePicker/index.vue 已删除 100644 → 0
浏览文件 @ e0dfddea
<template>
<el-color-picker
:predefine="[
'#409EFF',
'#1890ff',
'#304156',
'#212121',
'#11a983',
'#13c2c2',
'#6959CD',
'#f5222d'
]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</template>
<script setup lang="ts"></script>
<style>
.theme-message,
.theme-picker-dropdown {
z-index: 9999 !important;
}
.theme-picker .el-color-picker__trigger {
height: 26px !important;
width: 26px !important;
padding: 2px;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
</style>
src/directive/utils/index.ts 已删除 100644 → 0
浏览文件 @ e0dfddea
import { Directive } from 'vue';
/**
* 按钮防抖
*/
export const deBounce: Directive = {
mounted(el: HTMLElement) {
el.addEventListener('click', () => {
el.classList.add('is-disabled');
setTimeout(() => {
el.classList.remove('is-disabled');
}, 2000);
});
}
};
src/types/components.d.ts
浏览文件 @ c55eccf1
......@@ -57,6 +57,7 @@ declare module '@vue/runtime-core' {
IEpPlus: typeof import('~icons/ep/plus')['default']
IEpRefresh: typeof import('~icons/ep/refresh')['default']
IEpSearch: typeof import('~icons/ep/search')['default']
IEpSetting: typeof import('~icons/ep/setting')['default']
IEpTop: typeof import('~icons/ep/top')['default']
LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']
......
src/views/dashboard/components/Chart/BarChart.vue → src/views/dashboard/components/BarChart.vue
浏览文件 @ c55eccf1
......@@ -9,7 +9,7 @@ import {
onActivated,
onBeforeUnmount,
onDeactivated,
onMounted,
onMounted
} from 'vue';
import { init, EChartsOption } from 'echarts';
import * as echarts from 'echarts';
......@@ -18,22 +18,22 @@ import resize from '@/utils/resize';
const props = defineProps({
id: {
type: String,
default: 'barChart',
default: 'barChart'
},
className: {
type: String,
default: '',
default: ''
},
width: {
type: String,
default: '200px',
required: true,
required: true
},
height: {
type: String,
default: '200px',
required: true,
},
required: true
}
});
const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
......@@ -51,37 +51,37 @@ function initChart() {
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
color: '#337ecc',
},
color: '#337ecc'
}
},
grid: {
left: '2%',
right: '2%',
bottom: '10%',
containLabel: true,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
},
},
color: '#999'
}
}
},
legend: {
x: 'center',
y: 'bottom',
data: ['收入', '毛利润', '收入增长率', '利润增长率'],
data: ['收入', '毛利润', '收入增长率', '利润增长率']
},
xAxis: [
{
type: 'category',
data: [ '浙江', '北京', '上海', '广东','深圳'],
data: ['浙江', '北京', '上海', '广东', '深圳'],
axisPointer: {
type: 'shadow',
},
},
type: 'shadow'
}
}
],
yAxis: [
{
......@@ -90,8 +90,8 @@ function initChart() {
max: 10000,
interval: 2000,
axisLabel: {
formatter: '{value} ',
},
formatter: '{value} '
}
},
{
type: 'value',
......@@ -99,56 +99,56 @@ function initChart() {
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}%',
},
},
formatter: '{value}%'
}
}
],
series: [
{
name: '收入',
type: 'bar',
data: [7000, 7100, 7200, 7300,7400],
data: [7000, 7100, 7200, 7300, 7400],
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' },
]),
},
{ offset: 1, color: '#188df0' }
])
}
},
{
name: '毛利润',
type: 'bar',
data: [ 8000,8200, 8400, 8600, 8800],
data: [8000, 8200, 8400, 8600, 8800],
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#25d73c' },
{ offset: 0.5, color: '#1bc23d' },
{ offset: 1, color: '#179e61' },
]),
},
{ offset: 1, color: '#179e61' }
])
}
},
{
name: '收入增长率',
type: 'line',
yAxisIndex: 1,
data: [ 60,65, 70, 75, 80],
data: [60, 65, 70, 75, 80],
itemStyle: {
color: '#67C23A',
},
color: '#67C23A'
}
},
{
name: '利润增长率',
type: 'line',
yAxisIndex: 1,
data: [ 70,75, 80, 85, 90],
data: [70, 75, 80, 85, 90],
itemStyle: {
color: '#409EFF',
},
},
],
color: '#409EFF'
}
}
]
} as EChartsOption);
chart.value = barChart;
}
......
src/views/dashboard/components/Project/index.vue 已删除 100644 → 0
浏览文件 @ e0dfddea
<template>
<div class="component-container">
<el-card class="project-card">
<template #header>
<span class="fw-b">有来项目简介</span>
</template>
<div class="project-card__main">
<!-- 项目简介 -->
<el-link target="_blank" type="primary" href="https://gitee.com/haoxr">
youlai-mall
</el-link>
是基于Spring Boot 2.7、Spring Cloud 2021 & Alibaba
2021、Vue3、Element-Plus、uni-app等主流技术栈构建的一整套全栈开源商城项目，
涉及
<el-link
target="_blank"
type="primary"
href="https://gitee.com/youlaitech/youlai-mall"
>后端微服务</el-link
>
、
<el-link
target="_blank"
type="success"
href="https://gitee.com/youlaitech/youlai-mall-admin"
>前端管理</el-link
>
、
<el-link
target="_blank"
type="warning"
href="https://gitee.com/youlaitech/youlai-mall-weapp"
>微信小程序
</el-link>
和
<el-link
target="_blank"
type="danger"
href="https://gitee.com/youlaitech/youlai-mall-weapp"
>APP应用</el-link
>
等多端的开发。
<el-divider />
<!-- 源码地址 -->
<el-row :gutter="10">
<el-col :span="6">
<el-badge value="免费开源" class="fw-b"> 项目地址 </el-badge>
</el-col>
<el-col :span="6">
<el-link
target="_blank"
type="warning"
href="https://www.youlai.tech/"
>官方文档</el-link
>
</el-col>
<el-col :span="6">
<el-link
target="_blank"
type="primary"
href="https://github.com/youlaitech"
>Github</el-link
>
</el-col>
<el-col :span="6">
<el-link
target="_blank"
type="success"
href="https://gitee.com/youlaiorg"
>码云</el-link
>
</el-col>
</el-row>
<el-divider />
<!-- 技术栈 -->
<el-row :gutter="10">
<el-col :span="6" class="fw-b"> 后端技术栈 </el-col>
<el-col :span="18">
Spring Boot、Spring Cloud & Alibaba、Spring Security
OAuth2、JWT、Elastic Stack 、K8s...
</el-col>
</el-row>
<el-divider />
<el-row :gutter="10">
<el-col :span="6" class="fw-b"> 前端技术栈 </el-col>
<el-col :span="18">
Vue3、TypeScript、Element-Plus、uni-app、vue3-element-admin ...
</el-col>
</el-row>
</div>
</el-card>
</div>
</template>
<script lang="ts">
export default {
name: 'index'
};
</script>
<style lang="scss" scoped>
.component-container {
.project-card {
font-size: 14px;
&__main {
line-height: 28px;
height: 320px;
overflow-y: auto;
overflow-x: hidden;
}
}
.fw-b {
font-weight: bold;
}
}
</style>
src/views/dashboard/components/Team/index.vue 已删除 100644 → 0
浏览文件 @ e0dfddea
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from 'vue';
import BScroll from 'better-scroll';
const state = reactive({
teamActiveName: '1',
developers: [
{
imgUrl: 'https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg',
nickname: '郝先瑞',
positions: ['后端', '前端', '文档'],
homepage: 'https://www.cnblogs.com/haoxianrui/'
},
{
imgUrl: 'https://s2.loli.net/2022/04/06/cQihGv9uPsTjXk1.jpg',
nickname: '张川',
positions: ['后端', '前端'],
homepage: 'https://blog.csdn.net/qq_41595149'
},
{
imgUrl: 'https://s2.loli.net/2022/04/07/2IiOYBHnRGKgCSd.jpg',
nickname: '张加林',
positions: ['DevOps'],
homepage: 'https://gitee.com/ximy'
}
],
colors: ['', 'success', 'warning', 'danger'],
indicatorImgUrl: new URL(
`../../../../assets/index/indicator.png`,
import.meta.url
).href
});
const { teamActiveName, developers, colors, indicatorImgUrl } = toRefs(state);
let bScroll = reactive({});
const developer_container = ref<HTMLElement | any>(null);
onMounted(() => {
bScroll = new BScroll(developer_container.value, {
mouseWheel: true, //开启鼠标滚轮
disableMouse: false, //启用鼠标拖动
scrollX: true //X轴滚动启用
});
});
watchEffect(() => {
nextTick(() => {
bScroll && (bScroll as any).refresh();
});
});
</script>
<template>
<el-card class="team-card">
<template #header>
<span class="fw-b">有来开源组织 & 技术团队</span>
</template>
<el-tabs v-model="teamActiveName">
<el-tab-pane label="开发者" name="1">
<div class="developer-container" ref="developer_container">
<ul class="developer-list">
<li
class="developer-item"
v-for="(item, index) in developers"
:key="index"
>
<div class="developer-item-wrapper">
<el-image
class="developer-img"
:src="item.imgUrl"
:preview-src-list="[item.imgUrl]"
></el-image>
<div class="developer-info">
<span class="developer-info-nickname">{{ item.nickname }}</span>
<div class="developer-info-position">
<el-tag
v-for="(position, i) in item.positions"
:type="(colors[i % colors.length] as any)"
:class="i !== 0 ? 'f-ml' : ''"
size="small"
:key="i"
>{{ position }}</el-tag
>
</div>
<div class="developer-info-homepage">
<a :href="item.homepage" target="_blank">个人主页</a>
</div>
</div>
</div>
</li>
</ul>
<el-image class="developer-indicator" :src="indicatorImgUrl" />
</div>
</el-tab-pane>
<el-tab-pane label="交流群" name="2">
<div class="group">
<el-image
class="group-img"
src="https://www.youlai.tech/files/blog/youlaiqun.png"
:preview-src-list="[
'https://www.youlai.tech/files/blog/youlaiqun.png'
]"
/>
<div class="group-tip">
群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。
</div>
</div>
</el-tab-pane>
<el-tab-pane label="加入我们" name="3">
<div class="join">
<p>1. 人品良好、善于思考、执行力强；</p>
<p>2. 熟悉项目，且至少给项目提交(过)一个PR；</p>
<p>3. Git代码库活跃，个人主页或博客完善者优先；</p>
<p>4. 过分优秀者我们会主动联系您...</p>
<div class="join-way">申请加入方式: 添加开发者微信申请即可。</div>
</div>
</el-tab-pane>
</el-tabs>
</el-card>
</template>
<style lang="scss" scoped>
.team-card {
font-size: 14px;
.el-tabs__content {
.el-tab-pane {
height: 265px;
}
}
.developer-container {
width: 100%;
overflow: hidden;
.developer-list {
display: inline-flex;
overflow: hidden;
justify-content: flex-start;
padding: 10px;
.developer-item {
&:not(:first-child) {
margin-left: 20px;
}
align-items: center;
list-style: none;
width: 180px;
min-width: 180px;
.developer-item-wrapper {
border: 1px solid var(--el-border-color-light);
border-radius: 5px;
box-shadow: var(--el-box-shadow-lighter);
padding: 8px;
text-align: center;
.developer-img {
height: 100px;
width: 100px;
}
.developer-info {
padding: 6px;
font-size: 14px;
.developer-info-position {
margin-top: 10px;
}
.developer-info-homepage {
margin-top: 16px;
a {
display: inline-block;
padding: 4px 10px;
color: var(--el-color-primary);
border: 1px solid var(--el-color-primary);
border-radius: 5px;
background: var(--el-color-primary-light-9);
&:hover {
background: var(--el-color-primary);
color: var(--el-color-white);
}
}
}
}
}
}
}
.developer-indicator {
position: absolute;
right: 0;
bottom: 0;
width: 120px;
height: 100px;
}
}
.join {
overflow: hidden;
p {
font-weight: bold;
}
&-way {
margin-top: 20px;
color: #409eff;
font-weight: bold;
}
}
.group {
&-img {
height: 200px;
width: 200px;
}
}
}
.fw-b {
font-weight: bold;
}
.f-ml {
margin-left: 5px;
}
</style>
src/views/dashboard/index.vue
浏览文件 @ c55eccf1
......@@ -6,81 +6,86 @@ export default { name: 'Dashboard' };
// 组件引用
import GithubCorner from '@/components/GithubCorner/index.vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import BarChart from './components/Chart/BarChart.vue';
import PieChart from './components/Chart/PieChart.vue';
import RadarChart from './components/Chart/RadarChart.vue';
import BarChart from './components/BarChart.vue';
import PieChart from './components/PieChart.vue';
import RadarChart from './components/RadarChart.vue';
import Project from './components/Project/index.vue';
import Team from './components/Team/index.vue';
import CountUp from 'vue-countup-v3';
</script>
<template>
<div class="dashboard-container">
<!--github-->
<github-corner class="github-corner" />
<!-- 数据 -->
<el-row :gutter="40" class="mb-[12px]">
<!--访问数-->
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-user">
<svg-icon icon-class="uv" size="4em" />
<div class="data-box">
<div
class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
>
<svg-icon icon-class="uv" size="3em" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">访问数</div>
<div class="card-panel-num">1000</div>
<div class="flex flex-col space-y-3">
<div class="text-[var(--el-text-color-secondary)]">访问数</div>
<div class="text-lg">
<count-up :end-val="2000"></count-up>
</div>
</div>
</div>
</el-col>
<!--消息数-->
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" size="4em" />
<div class="data-box">
<div
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
>
<svg-icon icon-class="message" size="3em" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">消息数</div>
<div class="card-panel-num">1000</div>
<div class="flex flex-col space-y-3">
<div class="text-[var(--el-text-color-secondary)]">消息数</div>
<div class="text-lg">
<count-up :end-val="2000"></count-up>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" size="4em" />
<div class="data-box">
<div
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
>
<svg-icon icon-class="money" size="3em" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">收入金额</div>
<div class="card-panel-num">1000</div>
<div class="flex flex-col space-y-3">
<div class="text-[var(--el-text-color-secondary)]">收入金额</div>
<div class="text-lg">
<count-up :end-val="2000"></count-up>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" size="4em" />
<div class="data-box">
<div
class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
>
<svg-icon icon-class="shopping" size="3em" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">订单数</div>
<div class="card-panel-num">1000</div>
<div class="flex flex-col space-y-3">
<div class="text-[var(--el-text-color-secondary)]">订单数</div>
<div class="text-lg">
<count-up :end-val="2000"></count-up>
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 项目 + 团队成员介绍 -->
<el-row :gutter="40">
<!-- 项目介绍 -->
<el-col :md="12" :lg="12" class="mb-[12px]">
<Project />
</el-col>
<!-- 团队介绍 -->
<el-col :md="12" :lg="12" class="mb-[12px]">
<Team />
</el-col>
</el-row>
<!-- Echarts 图表 -->
<el-row :gutter="40" style="margin-top: 20px">
<el-col :sm="24" :lg="8" class="mb-[12px]">
......@@ -88,7 +93,7 @@ import Team from './components/Team/index.vue';
id="barChart"
height="400px"
width="100%"
class="chart-container"
class="bg-[var(--el-bg-color-overlay)]"
/>
</el-col>
......@@ -97,7 +102,7 @@ import Team from './components/Team/index.vue';
id="pieChart"
height="400px"
width="100%"
class="chart-container"
class="bg-[var(--el-bg-color-overlay)]"
/>
</el-col>
......@@ -106,7 +111,7 @@ import Team from './components/Team/index.vue';
id="radarChart"
height="400px"
width="100%"
class="chart-container"
class="bg-[var(--el-bg-color-overlay)]"
/>
</el-col>
</el-row>
......@@ -126,113 +131,16 @@ import Team from './components/Team/index.vue';
z-index: 99;
}
.box-center {
margin: 0 auto;
display: table;
}
.user-profile {
.box-center {
padding-top: 10px;
}
.user-role {
padding-top: 10px;
font-weight: 400;
font-size: 14px;
}
.box-social {
padding-top: 30px;
.el-table {
border-top: 1px solid var(--el-border-color-light);
}
}
.user-follow {
padding-top: 20px;
}
}
.card-panel {
height: 108px;
.data-box {
font-weight: bold;
padding: 20px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: var(--el-text-color-regular);
background: var(--el-bg-color-overlay);
box-shadow: var(--el-box-shadow-dark);
border-color: var(--el-border-color);
.icon-message {
color: #36a3f7;
}
.icon-user {
color: #40c9c6;
}
.icon-money {
color: #f4516c;
}
.icon-shopping {
color: #34bfa3;
}
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-user {
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
}
.icon-shopping {
background: #34bfa3;
}
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px 20px 0;
.card-panel-text {
line-height: 18px;
color: var(--el-text-color-secondary);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
text-align: right;
}
}
}
.chart-container {
background: var(--el-bg-color-overlay);
display: flex;
justify-content: space-between;
}
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或