mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
perf: 优化页面样式
This commit is contained in:
xiaoxian521
parent
c7f1ae9fb7
commit
7892c9c600
@ -5,7 +5,7 @@ import TypeIt from "typeit";
|
||||
export default defineComponent({
|
||||
name: "TypeIt",
|
||||
props: {
|
||||
/** 打字速度，以每一步之间的毫秒数为单位 */
|
||||
/** 打字速度，以每一步之间的毫秒数为单位，默认`200` */
|
||||
speed: {
|
||||
type: Number,
|
||||
default: 200
|
||||
|
||||
@ -31,7 +31,7 @@ const barcodes = [
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
条形码（基于
|
||||
|
||||
@ -24,7 +24,7 @@ const handleChange = value => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header> 区域级联选择器 </template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
|
||||
@ -17,7 +17,7 @@ const throttleClick = throttle(handle);
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="mb-5">
|
||||
<el-card class="mb-5" shadow="never">
|
||||
<template #header>
|
||||
<div>防抖：debounce</div>
|
||||
</template>
|
||||
@ -32,7 +32,7 @@ const throttleClick = throttle(handle);
|
||||
连续点击我，只会执行最后一次点击事件，延后执行
|
||||
</el-button>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div>节流：throttle</div>
|
||||
</template>
|
||||
|
||||
@ -26,7 +26,7 @@ function down() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<span class="font-medium">文件下载功能</span>
|
||||
</template>
|
||||
|
||||
@ -69,7 +69,7 @@ const exportExcel = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
导出Execl（
|
||||
|
||||
@ -10,7 +10,7 @@ const icon = ref("ep:add-location");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">图标选择器</span>
|
||||
|
||||
@ -32,7 +32,7 @@ const load = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
表格无限滚动（
|
||||
|
||||
@ -22,7 +22,7 @@ const dataProps = {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
@ -33,7 +33,7 @@ const dataProps = {
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-[20px]">
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> 普通树结构 </span>
|
||||
@ -62,7 +62,7 @@ const dataProps = {
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> 虚拟树结构 </span>
|
||||
|
||||
@ -43,7 +43,7 @@ const filterMethod = (query: string, node: treeNode) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
|
||||
@ -34,7 +34,7 @@ const onPrint = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
PDF预览（
|
||||
|
||||
@ -77,7 +77,7 @@ const tableData: User[] = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">打印功能（报表、图表、图片）</span>
|
||||
|
||||
@ -23,7 +23,7 @@ const disabledClick = () => {
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
二维码（基于
|
||||
|
||||
@ -84,7 +84,7 @@ const swiperExample: any[] = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
Swiper插件（
|
||||
|
||||
@ -41,7 +41,7 @@ const activities = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">时间线</span>
|
||||
|
||||
@ -9,7 +9,7 @@ defineOptions({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
虚拟列表组件（
|
||||
|
||||
@ -32,7 +32,7 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
|
||||
@ -40,7 +40,7 @@ Object.keys(devDependencies).forEach(key => {
|
||||
</span>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card m-4" shadow="hover">
|
||||
<el-card class="box-card m-4" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">项目信息</span>
|
||||
@ -49,7 +49,7 @@ Object.keys(devDependencies).forEach(key => {
|
||||
<PureDescriptions :columns="columns" border :column="3" align="left" />
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card m-4" shadow="hover">
|
||||
<el-card class="box-card m-4" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">生产环境依赖</span>
|
||||
@ -73,7 +73,7 @@ Object.keys(devDependencies).forEach(key => {
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card m-4" shadow="hover">
|
||||
<el-card class="box-card m-4" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">开发环境依赖</span>
|
||||
|
||||
@ -11,7 +11,7 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">通过iframe引入按钮页面</span>
|
||||
|
||||
@ -10,7 +10,7 @@ defineOptions({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">右键菜单组件</span>
|
||||
|
||||
@ -7,7 +7,7 @@ defineOptions({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">数字动画组件</span>
|
||||
|
||||
@ -26,7 +26,7 @@ const onCropper = (): void => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">图片裁剪组件</span>
|
||||
|
||||
@ -102,7 +102,7 @@ function addDanmu() {
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
|
||||
@ -56,7 +56,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
@ -76,7 +76,7 @@ onMounted(() => {
|
||||
<!-- grid列表拖拽 -->
|
||||
<el-row :gutter="25">
|
||||
<el-col :xs="25" :sm="8" :md="8" :lg="8">
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>grid列表拖拽</span>
|
||||
@ -100,7 +100,7 @@ onMounted(() => {
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="25" :sm="8" :md="8" :lg="8">
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>单列拖拽</span>
|
||||
@ -123,7 +123,7 @@ onMounted(() => {
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="25" :sm="8" :md="8" :lg="8">
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>拖拽实现元素位置交换</span>
|
||||
|
||||
@ -72,7 +72,7 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
|
||||
@ -11,7 +11,7 @@ defineOptions({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> Message提示 </span>
|
||||
|
||||
@ -50,7 +50,7 @@ function changeDirection(val) {
|
||||
|
||||
<template>
|
||||
<el-space wrap>
|
||||
<el-card class="box-card">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>无缝滚动示例</span>
|
||||
|
||||
@ -27,7 +27,12 @@ const selectedVal = ({ left, right }): void => {
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="box-card" v-for="(item, key) in dataLists" :key="key">
|
||||
<el-card
|
||||
class="box-card"
|
||||
v-for="(item, key) in dataLists"
|
||||
:key="key"
|
||||
shadow="never"
|
||||
>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ item.title }}</span>
|
||||
|
||||
@ -20,7 +20,7 @@ const settingTB: ContextProps = reactive({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">切割面板组件</span>
|
||||
|
||||
@ -7,7 +7,7 @@ defineOptions({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> 打字机组件 </span>
|
||||
|
||||
@ -31,7 +31,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
|
||||
@ -39,7 +39,7 @@ const handleCreated = editor => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
|
||||
@ -65,7 +65,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
|
||||
@ -41,7 +41,7 @@ const guide = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
|
||||
@ -14,7 +14,7 @@ function tabClick({ index }) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
|
||||
@ -14,7 +14,7 @@ function tabClick({ index }) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
|
||||
@ -8,7 +8,7 @@ const { columns } = useColumns();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">失败页</span>
|
||||
|
||||
@ -22,7 +22,7 @@ const columns = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">成功页</span>
|
||||
|
||||
@ -46,7 +46,7 @@ function onCloseTags() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div>标签页复用，超出限制自动关闭</div>
|
||||
</template>
|
||||
|
||||
@ -7,6 +7,7 @@ import {
|
||||
useECharts,
|
||||
type EchartOptions
|
||||
} from "@pureadmin/utils";
|
||||
import * as echarts from "echarts/core";
|
||||
|
||||
const { isDark } = useDark();
|
||||
|
||||
@ -28,11 +29,13 @@ setOptions(
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
top: "10px",
|
||||
bottom: "0",
|
||||
left: "0",
|
||||
right: "0"
|
||||
bottom: "20px",
|
||||
right: "10px"
|
||||
},
|
||||
legend: {
|
||||
//@ts-expect-error
|
||||
right: true,
|
||||
data: ["watchers", "fork", "star"]
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
@ -45,7 +48,7 @@ setOptions(
|
||||
// width: "70",
|
||||
// overflow: "truncate"
|
||||
},
|
||||
data: ["open_issues", "forks", "watchers", "star"],
|
||||
data: ["2021", "2022", "2023"],
|
||||
triggerEvent: true
|
||||
}
|
||||
],
|
||||
@ -57,9 +60,58 @@ setOptions(
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "GitHub信息",
|
||||
name: "watchers",
|
||||
type: "bar",
|
||||
data: [1000, 10000, 20000, 66666]
|
||||
barWidth: "15%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#e6a23c"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#eebe77"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [200, 320, 800]
|
||||
},
|
||||
{
|
||||
name: "fork",
|
||||
type: "bar",
|
||||
barWidth: "15%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#f56c6c"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#f89898"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [1600, 2460, 4500]
|
||||
},
|
||||
{
|
||||
name: "star",
|
||||
type: "bar",
|
||||
barWidth: "15%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#409EFF"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#53a7ff"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [1450, 3620, 7500]
|
||||
}
|
||||
],
|
||||
addTooltip: true
|
||||
|
||||
@ -24,7 +24,6 @@ const list = [
|
||||
:key="index"
|
||||
:columns="item.columns"
|
||||
:column="item.column"
|
||||
class="margin-top"
|
||||
direction="vertical"
|
||||
border
|
||||
/>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useIntervalFn } from "@vueuse/core";
|
||||
import { ref, computed, watch, type Ref } from "vue";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import {
|
||||
@ -11,43 +12,129 @@ import {
|
||||
const { isDark } = useDark();
|
||||
|
||||
const theme: EchartOptions["theme"] = computed(() => {
|
||||
return isDark.value ? "dark" : "light";
|
||||
return isDark.value ? "dark" : "default";
|
||||
});
|
||||
|
||||
const lineChartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions, resize } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
|
||||
theme
|
||||
});
|
||||
const { setOptions, getInstance, resize } = useECharts(
|
||||
lineChartRef as Ref<HTMLDivElement>,
|
||||
{ theme }
|
||||
);
|
||||
|
||||
const xData = (() => {
|
||||
const data: any[] = [];
|
||||
for (let i = 1; i < 31; i++) {
|
||||
data.push(`${i}日`);
|
||||
}
|
||||
return data;
|
||||
})();
|
||||
|
||||
setOptions(
|
||||
{
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
top: "10px",
|
||||
bottom: "0",
|
||||
left: "0",
|
||||
right: "0"
|
||||
bottom: "20px",
|
||||
right: "10px"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
},
|
||||
data: ["open_issues", "forks", "watchers", "star"],
|
||||
triggerEvent: true
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
triggerEvent: true
|
||||
legend: {
|
||||
//@ts-expect-error
|
||||
right: true,
|
||||
data: ["fork", "star"]
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
triggerEvent: true,
|
||||
type: "category",
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: xData
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
triggerEvent: true,
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
show: false,
|
||||
realtime: true,
|
||||
startValue: 0,
|
||||
endValue: 24
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: [1000, 10000, 20000, 66666],
|
||||
name: "fork",
|
||||
type: "line",
|
||||
areaStyle: {}
|
||||
symbolSize: 10,
|
||||
symbol: "circle",
|
||||
color: "#f56c6c",
|
||||
markPoint: {
|
||||
label: {
|
||||
color: "#fff"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "max",
|
||||
name: "最大值"
|
||||
},
|
||||
{
|
||||
type: "min",
|
||||
name: "最小值"
|
||||
}
|
||||
]
|
||||
},
|
||||
data: [
|
||||
509, 917, 2455, 2610, 2719, 3033, 3044, 3085, 2708, 2809, 2117, 2000,
|
||||
1455, 1210, 719, 733, 944, 2285, 2208, 3372, 3936, 3693, 2962, 2810,
|
||||
3519, 2455, 2610, 2719, 2484, 2078
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "star",
|
||||
type: "line",
|
||||
symbolSize: 10,
|
||||
symbol: "circle",
|
||||
color: "#53a7ff",
|
||||
markPoint: {
|
||||
label: {
|
||||
color: "#fff"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "max",
|
||||
name: "最大值"
|
||||
},
|
||||
{
|
||||
type: "min",
|
||||
name: "最小值"
|
||||
}
|
||||
]
|
||||
},
|
||||
data: [
|
||||
2136, 3693, 2962, 3810, 3519, 3484, 3915, 3823, 3455, 4310, 4019,
|
||||
3433, 3544, 3885, 4208, 3372, 3484, 3915, 3748, 3675, 4009, 4433,
|
||||
3544, 3285, 4208, 3372, 3484, 3915, 3823, 4265, 4298
|
||||
]
|
||||
}
|
||||
],
|
||||
addTooltip: true
|
||||
@ -57,9 +144,36 @@ setOptions(
|
||||
callback: params => {
|
||||
console.log("click", params);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "contextmenu",
|
||||
callback: params => {
|
||||
console.log("contextmenu", params);
|
||||
}
|
||||
},
|
||||
// 点击空白处
|
||||
{
|
||||
type: "zrender",
|
||||
name: "click",
|
||||
callback: params => {
|
||||
console.log("点击空白处", params);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let a = 1;
|
||||
useIntervalFn(() => {
|
||||
if (a == xData.length - 24) {
|
||||
a = 0;
|
||||
}
|
||||
getInstance()!.dispatchAction({
|
||||
type: "dataZoom",
|
||||
startValue: a,
|
||||
endValue: a + 24
|
||||
});
|
||||
a++;
|
||||
}, 2000);
|
||||
|
||||
watch(
|
||||
() => useAppStoreHook().getSidebarStatus,
|
||||
() => {
|
||||
|
||||
@ -25,8 +25,8 @@ setOptions(
|
||||
trigger: "item"
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
// @ts-expect-error
|
||||
icon: "circle",
|
||||
//@ts-expect-error
|
||||
right: true
|
||||
},
|
||||
series: [
|
||||
@ -36,19 +36,19 @@ setOptions(
|
||||
top: "20%",
|
||||
radius: "80%",
|
||||
center: ["40%", "50%"],
|
||||
color: ["#e6a23c", "#f56c6c", "#53a7ff"],
|
||||
data: [
|
||||
{ value: 20000, name: "watchers" },
|
||||
{ value: 66666, name: "star" },
|
||||
{ value: 10000, name: "forks" },
|
||||
{ value: 1000, name: "open_issues" }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
||||
}
|
||||
}
|
||||
{ value: 400, name: "watchers" },
|
||||
{ value: 1600, name: "forks" },
|
||||
{ value: 7200, name: "star" }
|
||||
]
|
||||
// emphasis: {
|
||||
// itemStyle: {
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowColor: "rgba(0, 0, 0, 0.5)"
|
||||
// }
|
||||
// }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -25,7 +25,7 @@ export function useColumns() {
|
||||
用户名
|
||||
</div>
|
||||
),
|
||||
value: "xiaoxian"
|
||||
value: "乐于分享的程序员小铭"
|
||||
},
|
||||
{
|
||||
labelRenderer: () => (
|
||||
@ -47,7 +47,7 @@ export function useColumns() {
|
||||
居住地
|
||||
</div>
|
||||
),
|
||||
value: "杭州"
|
||||
value: "中国"
|
||||
}
|
||||
];
|
||||
|
||||
@ -80,7 +80,7 @@ export function useColumns() {
|
||||
联系地址
|
||||
</div>
|
||||
),
|
||||
value: "杭州市西湖区"
|
||||
value: "中华人民共和国"
|
||||
}
|
||||
];
|
||||
|
||||
@ -91,15 +91,15 @@ export function useColumns() {
|
||||
<el-icon>
|
||||
<iconify-icon-offline icon={Notebook} />
|
||||
</el-icon>
|
||||
好好学习，天天向上
|
||||
个性签名
|
||||
</div>
|
||||
),
|
||||
cellRenderer: () => (
|
||||
<TypeIt
|
||||
className={"github"}
|
||||
values={["Coding as art. Keep open source. Enjoy open source."]}
|
||||
values={["办法总比困难多"]}
|
||||
cursor={false}
|
||||
speed={40}
|
||||
speed={100}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,41 +2,20 @@
|
||||
import dayjs from "dayjs";
|
||||
import axios from "axios";
|
||||
import MdEditor from "md-editor-v3";
|
||||
import VueDanmaku from "vue3-danmaku";
|
||||
import Bar from "./components/Bar.vue";
|
||||
import Pie from "./components/Pie.vue";
|
||||
import Line from "./components/Line.vue";
|
||||
import TypeIt from "@/components/ReTypeit";
|
||||
import { ref, computed, markRaw } from "vue";
|
||||
import Github from "./components/Github.vue";
|
||||
import { openLink, randomColor } from "@pureadmin/utils";
|
||||
import { randomColor } from "@pureadmin/utils";
|
||||
import { useRenderFlicker } from "@/components/ReFlicker";
|
||||
import { ref, computed, markRaw, onMounted, onUnmounted } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "Welcome"
|
||||
});
|
||||
|
||||
const danmus = [
|
||||
"太好用了吧",
|
||||
"so easy",
|
||||
"效率大大提高呀",
|
||||
"还有精简版，还分国际化和非国际化，Perfect 😘",
|
||||
"好多组件呀，爱啦爱啦 ❤️",
|
||||
"精简版开发体验也太赞了吧 🙀",
|
||||
"pure-admin-table 真方便呀",
|
||||
"哇塞，pure-admin-utils 好多常用、易用的工具呀",
|
||||
"我要 star 这个项目，爱啦爱啦",
|
||||
"免费、开源做到这个程度，真不错 👍",
|
||||
"文档简单易懂，上手真快",
|
||||
"呀！还有免费的教学视频呢，我要去学习一下咯",
|
||||
"稳定、可靠，未来可期呀，加油！",
|
||||
"太卷了，太卷了，慢点让我跟上 😄"
|
||||
];
|
||||
|
||||
let timer = 0;
|
||||
const list = ref();
|
||||
const danmaku = ref();
|
||||
const date: Date = new Date();
|
||||
const loading = ref<boolean>(true);
|
||||
const titleClass = computed(() => {
|
||||
return ["text-base", "font-medium"];
|
||||
@ -46,23 +25,6 @@ setTimeout(() => {
|
||||
loading.value = !loading.value;
|
||||
}, 800);
|
||||
|
||||
const greetings = computed(() => {
|
||||
if (date.getHours() >= 0 && date.getHours() < 12) {
|
||||
return "上午阳光明媚，祝你薪水翻倍🌞！";
|
||||
} else if (date.getHours() >= 12 && date.getHours() < 18) {
|
||||
return "下午小风娇好，愿你青春不老😃！";
|
||||
} else {
|
||||
return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
|
||||
}
|
||||
});
|
||||
|
||||
function resizeHandler() {
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = window.setTimeout(() => {
|
||||
danmaku.value.resize();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
axios
|
||||
.get("https://api.github.com/repos/pure-admin/vue-pure-admin/releases")
|
||||
.then(res => {
|
||||
@ -78,42 +40,18 @@ axios
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
window.onresize = () => resizeHandler();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.onresize = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="welcome">
|
||||
<el-card class="top-content dark:border-none">
|
||||
<div class="left-mark select-none">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/44761321?v=4"
|
||||
title="直达仓库地址"
|
||||
@click="openLink('https://github.com/pure-admin/vue-pure-admin')"
|
||||
/>
|
||||
<TypeIt
|
||||
:className="'type-it0'"
|
||||
:values="[greetings]"
|
||||
:cursor="false"
|
||||
:speed="60"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-row :gutter="24" style="margin: 20px">
|
||||
<div>
|
||||
<el-row :gutter="24">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
style="margin-bottom: 20px"
|
||||
class="mb-[18px]"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
@ -127,66 +65,7 @@ onUnmounted(() => {
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-card style="height: 410px">
|
||||
<template #header>
|
||||
<a
|
||||
:class="titleClass"
|
||||
href="https://github.com/xiaoxian521"
|
||||
target="_black"
|
||||
>
|
||||
<TypeIt
|
||||
:className="'type-it1'"
|
||||
:values="['GitHub信息']"
|
||||
:cursor="false"
|
||||
:speed="120"
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
<Github />
|
||||
<vue-danmaku
|
||||
ref="danmaku"
|
||||
loop
|
||||
useSlot
|
||||
isSuspend
|
||||
randomChannel
|
||||
:debounce="1200"
|
||||
:danmus="danmus"
|
||||
style="width: 100%; height: 80px"
|
||||
>
|
||||
<template v-slot:dm="{ danmu }">
|
||||
<p :style="{ color: randomColor({ type: 'hex' }) as string }">
|
||||
{{ danmu }}
|
||||
</p>
|
||||
</template>
|
||||
</vue-danmaku>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
style="margin-bottom: 20px"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 200
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-card style="height: 410px">
|
||||
<el-card shadow="never" style="height: 347px">
|
||||
<template #header>
|
||||
<a
|
||||
:class="titleClass"
|
||||
@ -225,9 +104,9 @@ onUnmounted(() => {
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="12"
|
||||
:lg="8"
|
||||
:xl="8"
|
||||
style="margin-bottom: 20px"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="mb-[18px]"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
@ -237,20 +116,20 @@ onUnmounted(() => {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 400
|
||||
delay: 200
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-card>
|
||||
<el-card shadow="never" style="height: 347px">
|
||||
<template #header>
|
||||
<a
|
||||
:class="titleClass"
|
||||
href="https://github.com/pure-admin/vue-pure-admin"
|
||||
href="https://github.com/xiaoxian521"
|
||||
target="_black"
|
||||
>
|
||||
<TypeIt
|
||||
:className="'type-it3'"
|
||||
:values="['GitHub饼图信息']"
|
||||
:className="'type-it1'"
|
||||
:values="['GitHub信息']"
|
||||
:cursor="false"
|
||||
:speed="120"
|
||||
/>
|
||||
@ -258,7 +137,7 @@ onUnmounted(() => {
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
<Pie />
|
||||
<Github />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
@ -270,7 +149,7 @@ onUnmounted(() => {
|
||||
:md="12"
|
||||
:lg="8"
|
||||
:xl="8"
|
||||
style="margin-bottom: 20px"
|
||||
class="mb-[18px]"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
@ -284,7 +163,7 @@ onUnmounted(() => {
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<a
|
||||
:class="titleClass"
|
||||
@ -310,10 +189,10 @@ onUnmounted(() => {
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:md="12"
|
||||
:lg="8"
|
||||
:xl="8"
|
||||
style="margin-bottom: 20px"
|
||||
class="mb-[18px]"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
@ -327,7 +206,50 @@ onUnmounted(() => {
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<a
|
||||
:class="titleClass"
|
||||
href="https://github.com/pure-admin/vue-pure-admin"
|
||||
target="_black"
|
||||
>
|
||||
<TypeIt
|
||||
:className="'type-it3'"
|
||||
:values="['GitHub饼图信息']"
|
||||
:cursor="false"
|
||||
:speed="120"
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
<Pie />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="8"
|
||||
:xl="8"
|
||||
class="mb-[18px]"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 400
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<a
|
||||
:class="titleClass"
|
||||
@ -359,36 +281,6 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
height: 100%;
|
||||
|
||||
.top-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
background: var(--el-bg-color);
|
||||
|
||||
.left-mark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
margin: 20px 20px 0 20px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user