mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
feat: 首页添加版本更新日志模块
This commit is contained in:
xiaoxian521
parent
c437371db6
commit
7f0354cd63
@ -76,6 +76,7 @@
|
||||
"vue-types": "^4.2.1",
|
||||
"vue-virtual-scroller": "^2.0.0-alpha.1",
|
||||
"vue3-danmaku": "^1.0.0",
|
||||
"vue3-markdown-it": "^1.0.10",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vxe-table": "^4.3.6",
|
||||
"xe-utils": "^3.5.7",
|
||||
@ -102,6 +103,7 @@
|
||||
"@types/js-cookie": "^3.0.1",
|
||||
"@types/lodash": "^4.14.180",
|
||||
"@types/lodash-es": "^4.17.6",
|
||||
"@types/markdown-it": "^12.2.3",
|
||||
"@types/mockjs": "^1.0.7",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/nprogress": "0.2.0",
|
||||
|
||||
201
pnpm-lock.yaml
generated
201
pnpm-lock.yaml
generated
@ -28,6 +28,7 @@ specifiers:
|
||||
"@types/js-cookie": ^3.0.1
|
||||
"@types/lodash": ^4.14.180
|
||||
"@types/lodash-es": ^4.17.6
|
||||
"@types/markdown-it": ^12.2.3
|
||||
"@types/mockjs": ^1.0.7
|
||||
"@types/node": ^18.11.9
|
||||
"@types/nprogress": 0.2.0
|
||||
@ -118,6 +119,7 @@ specifiers:
|
||||
vue-types: ^4.2.1
|
||||
vue-virtual-scroller: ^2.0.0-alpha.1
|
||||
vue3-danmaku: ^1.0.0
|
||||
vue3-markdown-it: ^1.0.10
|
||||
vuedraggable: ^4.1.0
|
||||
vxe-table: ^4.3.6
|
||||
xe-utils: ^3.5.7
|
||||
@ -172,6 +174,7 @@ dependencies:
|
||||
vue-types: 4.2.1_vue@3.2.45
|
||||
vue-virtual-scroller: 2.0.0-beta.3_vue@3.2.45
|
||||
vue3-danmaku: 1.0.0_vue@3.2.45
|
||||
vue3-markdown-it: 1.0.10_@types+markdown-it@12.2.3
|
||||
vuedraggable: 4.1.0_vue@3.2.45
|
||||
vxe-table: 4.3.6_vue@3.2.45+xe-utils@3.5.7
|
||||
xe-utils: 3.5.7
|
||||
@ -198,6 +201,7 @@ devDependencies:
|
||||
"@types/js-cookie": 3.0.2
|
||||
"@types/lodash": 4.14.190
|
||||
"@types/lodash-es": 4.17.6
|
||||
"@types/markdown-it": 12.2.3
|
||||
"@types/mockjs": 1.0.7
|
||||
"@types/node": 18.11.9
|
||||
"@types/nprogress": 0.2.0
|
||||
@ -1504,6 +1508,12 @@ packages:
|
||||
}
|
||||
dev: true
|
||||
|
||||
/@types/linkify-it/3.0.2:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==
|
||||
}
|
||||
|
||||
/@types/lodash-es/4.17.6:
|
||||
resolution:
|
||||
{
|
||||
@ -1518,6 +1528,21 @@ packages:
|
||||
integrity: sha512-5iJ3FBJBvQHQ8sFhEhJfjUP+G+LalhavTkYyrAYqz5MEJG+erSv0k9KJLb6q7++17Lafk1scaTIFXcMJlwK8Mw==
|
||||
}
|
||||
|
||||
/@types/markdown-it/12.2.3:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==
|
||||
}
|
||||
dependencies:
|
||||
"@types/linkify-it": 3.0.2
|
||||
"@types/mdurl": 1.0.2
|
||||
|
||||
/@types/mdurl/1.0.2:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
|
||||
}
|
||||
|
||||
/@types/minimatch/3.0.5:
|
||||
resolution:
|
||||
{
|
||||
@ -2644,7 +2669,6 @@ packages:
|
||||
{
|
||||
integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
|
||||
}
|
||||
dev: true
|
||||
|
||||
/array-differ/3.0.0:
|
||||
resolution:
|
||||
@ -3911,6 +3935,13 @@ packages:
|
||||
ansi-colors: 4.1.3
|
||||
dev: true
|
||||
|
||||
/entities/2.1.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/entities/2.2.0:
|
||||
resolution:
|
||||
{
|
||||
@ -5128,6 +5159,14 @@ packages:
|
||||
}
|
||||
dev: false
|
||||
|
||||
/highlight.js/11.7.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==
|
||||
}
|
||||
engines: { node: ">=12.0.0" }
|
||||
dev: false
|
||||
|
||||
/hosted-git-info/2.8.9:
|
||||
resolution:
|
||||
{
|
||||
@ -5697,6 +5736,15 @@ packages:
|
||||
}
|
||||
dev: true
|
||||
|
||||
/linkify-it/3.0.3:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
|
||||
}
|
||||
dependencies:
|
||||
uc.micro: 1.0.6
|
||||
dev: false
|
||||
|
||||
/lint-staged/11.1.2:
|
||||
resolution:
|
||||
{
|
||||
@ -5807,6 +5855,13 @@ packages:
|
||||
}
|
||||
dev: false
|
||||
|
||||
/lodash.flow/3.5.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/lodash.foreach/4.5.0:
|
||||
resolution:
|
||||
{
|
||||
@ -5951,6 +6006,113 @@ packages:
|
||||
engines: { node: ">=8" }
|
||||
dev: true
|
||||
|
||||
/markdown-it-abbr/1.0.4:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-ZeA4Z4SaBbYysZap5iZcxKmlPL6bYA8grqhzJIHB1ikn7njnzaP8uwbtuXc4YXD5LicI4/2Xmc0VwmSiFV04gg==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/markdown-it-anchor/8.6.5_2zb4u3vubltivolgu556vv4aom:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-PI1qEHHkTNWT+X6Ip9w+paonfIQ+QZP9sCeMYi47oqhH+EsW8CrJ8J7CzV19QVOj6il8ATGbK2nTECj22ZHGvQ==
|
||||
}
|
||||
peerDependencies:
|
||||
"@types/markdown-it": "*"
|
||||
markdown-it: "*"
|
||||
dependencies:
|
||||
"@types/markdown-it": 12.2.3
|
||||
markdown-it: 12.3.2
|
||||
dev: false
|
||||
|
||||
/markdown-it-deflist/2.1.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-3OuqoRUlSxJiuQYu0cWTLHNhhq2xtoSFqsZK8plANg91+RJQU1ziQ6lA2LzmFAEes18uPBsHZpcX6We5l76Nzg==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/markdown-it-emoji/2.0.2:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-zLftSaNrKuYl0kR5zm4gxXjHaOI3FAOEaloKmRA5hijmJZvSjmxcokOLlzycb/HXlUFWzXqpIEoyEMCE4i9MvQ==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/markdown-it-footnote/3.0.3:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/markdown-it-highlightjs/3.6.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-ex+Lq3cVkprh0GpGwFyc53A/rqY6GGzopPCG1xMsf8Ya3XtGC8Uw9tChN1rWbpyDae7tBBhVHVcMM29h4Btamw==
|
||||
}
|
||||
dependencies:
|
||||
highlight.js: 11.7.0
|
||||
lodash.flow: 3.5.0
|
||||
dev: false
|
||||
|
||||
/markdown-it-ins/3.0.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-32SSfZqSzqyAmmQ4SHvhxbFqSzPDqsZgMHDwxqPzp+v+t8RsmqsBZRG+RfRQskJko9PfKC2/oxyOs4Yg/CfiRw==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/markdown-it-mark/3.0.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-HyxjAu6BRsdt6Xcv6TKVQnkz/E70TdGXEFHRYBGLncRE9lBFwDNLVtFojKxjJWgJ+5XxUwLaHXy+2sGBbDn+4A==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/markdown-it-sub/1.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-z2Rm/LzEE1wzwTSDrI+FlPEveAAbgdAdPhdWarq/ZGJrGW/uCQbKAnhoCsE4hAbc3SEym26+W2z/VQB0cQiA9Q==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/markdown-it-sup/1.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-E32m0nV9iyhRR7CrhnzL5msqic7rL1juWre6TQNxsnApg7Uf+F97JOKxUijg5YwXz86lZ0mqfOnutoryyNdntQ==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/markdown-it-task-lists/2.1.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/markdown-it-toc-done-right/4.2.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-UB/IbzjWazwTlNAX0pvWNlJS8NKsOQ4syrXZQ/C72j+jirrsjVRT627lCaylrKJFBQWfRsPmIVQie8x38DEhAQ==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/markdown-it/12.3.2:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
|
||||
}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
argparse: 2.0.1
|
||||
entities: 2.1.0
|
||||
linkify-it: 3.0.3
|
||||
mdurl: 1.0.1
|
||||
uc.micro: 1.0.6
|
||||
dev: false
|
||||
|
||||
/mathml-tag-names/2.1.3:
|
||||
resolution:
|
||||
{
|
||||
@ -5972,6 +6134,13 @@ packages:
|
||||
}
|
||||
dev: true
|
||||
|
||||
/mdurl/1.0.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/memoize-one/6.0.0:
|
||||
resolution:
|
||||
{
|
||||
@ -8490,6 +8659,13 @@ packages:
|
||||
engines: { node: ">=4.2.0" }
|
||||
hasBin: true
|
||||
|
||||
/uc.micro/1.0.6:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/unidragger/2.4.0:
|
||||
resolution:
|
||||
{
|
||||
@ -8928,6 +9104,29 @@ packages:
|
||||
vue: 3.2.45
|
||||
dev: false
|
||||
|
||||
/vue3-markdown-it/1.0.10_@types+markdown-it@12.2.3:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-mTvHu0zl7jrh7ojgaZ+tTpCLiS4CVg4bTgTu4KGhw/cRRY5YgIG8QgFAPu6kCzSW6Znc9a52Beb6hFvF4hSMkQ==
|
||||
}
|
||||
dependencies:
|
||||
markdown-it: 12.3.2
|
||||
markdown-it-abbr: 1.0.4
|
||||
markdown-it-anchor: 8.6.5_2zb4u3vubltivolgu556vv4aom
|
||||
markdown-it-deflist: 2.1.0
|
||||
markdown-it-emoji: 2.0.2
|
||||
markdown-it-footnote: 3.0.3
|
||||
markdown-it-highlightjs: 3.6.0
|
||||
markdown-it-ins: 3.0.1
|
||||
markdown-it-mark: 3.0.1
|
||||
markdown-it-sub: 1.0.0
|
||||
markdown-it-sup: 1.0.0
|
||||
markdown-it-task-lists: 2.1.1
|
||||
markdown-it-toc-done-right: 4.2.0
|
||||
transitivePeerDependencies:
|
||||
- "@types/markdown-it"
|
||||
dev: false
|
||||
|
||||
/vuedraggable/4.1.0_vue@3.2.45:
|
||||
resolution:
|
||||
{
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { markRaw } from "vue";
|
||||
import { useRenderFlicker } from "@/components/ReFlicker";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
defineOptions({
|
||||
name: "TimeLine"
|
||||
@ -11,12 +12,12 @@ const activities = [
|
||||
{
|
||||
content: "支持圆点闪动",
|
||||
timestamp: lastBuildTime,
|
||||
icon: useRenderFlicker()
|
||||
icon: markRaw(useRenderFlicker())
|
||||
},
|
||||
{
|
||||
content: "支持方形闪动",
|
||||
timestamp: lastBuildTime,
|
||||
icon: useRenderFlicker({ borderRadius: 0, background: "#67C23A" })
|
||||
icon: markRaw(useRenderFlicker({ borderRadius: 0, background: "#67C23A" }))
|
||||
},
|
||||
{
|
||||
content: "支持默认颜色",
|
||||
|
||||
@ -22,9 +22,11 @@ setOptions(
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
bottom: "20%",
|
||||
height: "68%",
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
top: "10px",
|
||||
bottom: "0",
|
||||
left: "0",
|
||||
right: "0"
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
@ -49,7 +51,7 @@ setOptions(
|
||||
{
|
||||
name: "GitHub信息",
|
||||
type: "bar",
|
||||
data: [3, 204, 1079, 1079]
|
||||
data: [1000, 10000, 20000, 66666]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -1,133 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import SeamlessScroll from "@/components/ReSeamlessScroll";
|
||||
|
||||
const scroll = ref();
|
||||
|
||||
const listData = ref([
|
||||
{
|
||||
date: "2021-09-01",
|
||||
name: "vue-pure-admin",
|
||||
star: "1000"
|
||||
},
|
||||
{
|
||||
date: "2021-09-02",
|
||||
name: "vue-pure-admin",
|
||||
star: "1100"
|
||||
},
|
||||
{
|
||||
date: "2021-09-03",
|
||||
name: "vue-pure-admin",
|
||||
star: "1200"
|
||||
},
|
||||
{
|
||||
date: "2021-09-04",
|
||||
name: "vue-pure-admin",
|
||||
star: "1300"
|
||||
},
|
||||
{
|
||||
date: "2021-09-05",
|
||||
name: "vue-pure-admin",
|
||||
star: "1400"
|
||||
},
|
||||
{
|
||||
date: "2021-09-06",
|
||||
name: "vue-pure-admin",
|
||||
star: "1500"
|
||||
},
|
||||
{
|
||||
date: "2021-09-07",
|
||||
name: "vue-pure-admin",
|
||||
star: "1600"
|
||||
},
|
||||
{
|
||||
date: "2021-09-08",
|
||||
name: "vue-pure-admin",
|
||||
star: "1700"
|
||||
},
|
||||
{
|
||||
date: "2021-09-09",
|
||||
name: "vue-pure-admin",
|
||||
star: "1800"
|
||||
},
|
||||
{
|
||||
date: "2021-09-10",
|
||||
name: "vue-pure-admin",
|
||||
star: "1900"
|
||||
}
|
||||
]);
|
||||
|
||||
const classOption = reactive({
|
||||
direction: "top"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="infinite bg-bg_color">
|
||||
<ul class="top">
|
||||
<li>更新日期</li>
|
||||
<li>项目名称</li>
|
||||
<li>Star数量</li>
|
||||
</ul>
|
||||
<SeamlessScroll
|
||||
ref="scroll"
|
||||
:data="listData"
|
||||
:class-option="classOption"
|
||||
class="warp"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="(item, index) in listData" :key="index">
|
||||
<span v-text="item.date" />
|
||||
<span v-text="item.name" />
|
||||
<span v-text="item.star" />
|
||||
</li>
|
||||
</ul>
|
||||
</SeamlessScroll>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.infinite {
|
||||
.top {
|
||||
width: 95%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
font-weight: 400;
|
||||
// background: #fafafa;
|
||||
|
||||
li {
|
||||
width: 34%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
width: 95%;
|
||||
height: 215px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 34%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -15,14 +15,16 @@ const { setOptions } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
|
||||
|
||||
setOptions(
|
||||
{
|
||||
grid: {
|
||||
bottom: "20%",
|
||||
height: "68%",
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
top: "10px",
|
||||
bottom: "0",
|
||||
left: "0",
|
||||
right: "0"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
@ -35,7 +37,7 @@ setOptions(
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [3, 204, 1079, 1079],
|
||||
data: [1000, 10000, 20000, 66666],
|
||||
type: "line",
|
||||
areaStyle: {}
|
||||
}
|
||||
|
||||
@ -27,13 +27,14 @@ setOptions(
|
||||
{
|
||||
name: "Github信息",
|
||||
type: "pie",
|
||||
radius: "60%",
|
||||
top: "20%",
|
||||
radius: "80%",
|
||||
center: ["40%", "50%"],
|
||||
data: [
|
||||
{ value: 1079, name: "watchers" },
|
||||
{ value: 1079, name: "star" },
|
||||
{ value: 204, name: "forks" },
|
||||
{ value: 3, name: "open_issues" }
|
||||
{ value: 20000, name: "watchers" },
|
||||
{ value: 66666, name: "star" },
|
||||
{ value: 10000, name: "forks" },
|
||||
{ value: 1000, name: "open_issues" }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { IconifyIconOffline } from "@/components/ReIcon";
|
||||
import TypeIt from "@/components/ReTypeit";
|
||||
|
||||
export function useColumns() {
|
||||
const lists = [
|
||||
@ -41,7 +42,7 @@ export function useColumns() {
|
||||
居住地
|
||||
</div>
|
||||
),
|
||||
value: "上海"
|
||||
value: "杭州"
|
||||
}
|
||||
];
|
||||
|
||||
@ -74,7 +75,7 @@ export function useColumns() {
|
||||
联系地址
|
||||
</div>
|
||||
),
|
||||
value: "上海市徐汇区"
|
||||
value: "杭州市西湖区"
|
||||
}
|
||||
];
|
||||
|
||||
@ -88,7 +89,14 @@ export function useColumns() {
|
||||
好好学习，天天向上
|
||||
</div>
|
||||
),
|
||||
value: "上海市徐汇区"
|
||||
cellRenderer: () => (
|
||||
<TypeIt
|
||||
className={"github"}
|
||||
values={["Coding as art. Keep open source. Enjoy open source."]}
|
||||
cursor={false}
|
||||
speed={40}
|
||||
/>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@ -1,18 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import axios from "axios";
|
||||
import Bar from "./components/Bar.vue";
|
||||
import Pie from "./components/Pie.vue";
|
||||
import Markdown from "vue3-markdown-it";
|
||||
import Line from "./components/Line.vue";
|
||||
import { openLink } from "@pureadmin/utils";
|
||||
import TypeIt from "@/components/ReTypeit";
|
||||
import Github from "./components/Github.vue";
|
||||
import Infinite from "./components/Infinite.vue";
|
||||
import { ref, computed, markRaw } from "vue";
|
||||
import { openLink, randomColor } from "@pureadmin/utils";
|
||||
import { useRenderFlicker } from "@/components/ReFlicker";
|
||||
|
||||
defineOptions({
|
||||
name: "Welcome"
|
||||
});
|
||||
|
||||
const list = ref();
|
||||
const date: Date = new Date();
|
||||
const loading = ref<boolean>(true);
|
||||
const titleClass = computed(() => {
|
||||
return ["text-base", "font-medium"];
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
loading.value = !loading.value;
|
||||
@ -27,6 +34,22 @@ const greetings = computed(() => {
|
||||
return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
|
||||
}
|
||||
});
|
||||
|
||||
axios
|
||||
.get("https://api.github.com/repos/xiaoxian521/vue-pure-admin/releases")
|
||||
.then(res => {
|
||||
list.value = res.data.map(v => {
|
||||
return {
|
||||
content: v.body,
|
||||
timestamp: v.published_at,
|
||||
icon: markRaw(
|
||||
useRenderFlicker({
|
||||
background: randomColor({ type: "hex" }) as string
|
||||
})
|
||||
)
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -38,7 +61,12 @@ const greetings = computed(() => {
|
||||
title="直达仓库地址"
|
||||
@click="openLink('https://github.com/xiaoxian521/vue-pure-admin')"
|
||||
/>
|
||||
<span>{{ greetings }}</span>
|
||||
<TypeIt
|
||||
:className="'type-it0'"
|
||||
:values="[greetings]"
|
||||
:cursor="false"
|
||||
:speed="60"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
@ -65,7 +93,14 @@ const greetings = computed(() => {
|
||||
>
|
||||
<el-card style="height: 360px">
|
||||
<template #header>
|
||||
<span style="font-size: 16px; font-weight: 500">GitHub信息</span>
|
||||
<span :class="titleClass">
|
||||
<TypeIt
|
||||
:className="'type-it1'"
|
||||
:values="['GitHub信息']"
|
||||
:cursor="false"
|
||||
:speed="120"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
@ -97,13 +132,30 @@ const greetings = computed(() => {
|
||||
>
|
||||
<el-card style="height: 360px">
|
||||
<template #header>
|
||||
<span style="font-size: 16px; font-weight: 500">
|
||||
GitHub滚动信息
|
||||
<span :class="titleClass">
|
||||
<TypeIt
|
||||
:className="'type-it2'"
|
||||
:values="['Pure-Admin 版本日志']"
|
||||
:cursor="false"
|
||||
:speed="120"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
<Infinite />
|
||||
<el-scrollbar height="274px">
|
||||
<el-timeline v-show="list?.length > 0">
|
||||
<el-timeline-item
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:icon="item.icon"
|
||||
:timestamp="item.timestamp"
|
||||
>
|
||||
<Markdown :source="item.content" />
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
<el-empty v-show="list?.length === 0" />
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
@ -131,8 +183,13 @@ const greetings = computed(() => {
|
||||
>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span style="font-size: 16px; font-weight: 500">
|
||||
GitHub饼图信息
|
||||
<span :class="titleClass">
|
||||
<TypeIt
|
||||
:className="'type-it3'"
|
||||
:values="['GitHub饼图信息']"
|
||||
:cursor="false"
|
||||
:speed="120"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
@ -165,8 +222,13 @@ const greetings = computed(() => {
|
||||
>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span style="font-size: 16px; font-weight: 500">
|
||||
GitHub折线图信息
|
||||
<span :class="titleClass">
|
||||
<TypeIt
|
||||
:className="'type-it4'"
|
||||
:values="['GitHub折线图信息']"
|
||||
:cursor="false"
|
||||
:speed="120"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
@ -199,8 +261,13 @@ const greetings = computed(() => {
|
||||
>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span style="font-size: 16px; font-weight: 500">
|
||||
GitHub柱状图信息
|
||||
<span :class="titleClass">
|
||||
<TypeIt
|
||||
:className="'type-it5'"
|
||||
:values="['GitHub柱状图信息']"
|
||||
:cursor="false"
|
||||
:speed="120"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
@ -214,13 +281,11 @@ const greetings = computed(() => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style module scoped>
|
||||
.size {
|
||||
height: 335px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-timeline-item) {
|
||||
margin: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user