twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-04 07:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: standard code format in the views folder

Browse Source
This commit is contained in:
xiaoxian521 2022-05-14 10:53:06 +08:00
parent 1cf82eb7a4
commit 64326c4fb5
31 changed files with 228 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@ -33,5 +33,6 @@
"i18n-ally.enabledParsers": ["yaml", "js"],
"i18n-ally.sourceLanguage": "en",
"i18n-ally.displayLanguage": "zh-CN",
"i18n-ally.enabledFrameworks": ["vue"]
"i18n-ally.enabledFrameworks": ["vue"],
"iconify.excludes": ["el"]
}

20
src/views/able/ant-anchor.vue
View File

@ -12,19 +12,25 @@ function handleAnchorClick(e, link) {
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"
>仿antdv锚点，采用<el-link
<span class="font-medium">
仿antdv锚点，采用
<el-link
href="https://www.npmjs.com/package/@pureadmin/components"
target="_blank"
style="font-size: 16px; margin: 0 4px 5px"
>@pureadmin/components</el-link
>，完全兼容antdv的<el-link
>
@pureadmin/components
</el-link>
，完全兼容antdv的
<el-link
href="https://next.antdv.com/components/anchor-cn"
target="_blank"
style="font-size: 16px; margin: 0 4px 5px"
>Anchor</el-link
>写法</span
>
>
Anchor
</el-link>
写法
</span>
</div>
</template>
<div class="w-400px">

20
src/views/able/ant-tabs.vue
View File

@ -13,19 +13,25 @@ const callback = (val: string) => {
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"
>仿antdv标签页，采用<el-link
<span class="font-medium">
仿antdv标签页，采用
<el-link
href="https://www.npmjs.com/package/@pureadmin/components"
target="_blank"
style="font-size: 16px; margin: 0 4px 5px"
>@pureadmin/components</el-link
>，完全兼容antdv的<el-link
>
@pureadmin/components
</el-link>
，完全兼容antdv的
<el-link
href="https://next.antdv.com/components/tabs-cn"
target="_blank"
style="font-size: 16px; margin: 0 4px 5px"
>Tabs</el-link
>写法</span
>
>
Tabs
</el-link>
写法
</span>
</div>
</template>
<el-radio-group v-model="mode" size="small" class="mb-2">

26
src/views/able/ant-treeSelect.vue
View File

@ -122,19 +122,25 @@ const onLoadData = treeNode => {
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"
>仿antdv树选择，采用<el-link
<span class="font-medium">
仿antdv树选择，采用
<el-link
href="https://www.npmjs.com/package/@pureadmin/components"
target="_blank"
style="font-size: 16px; margin: 0 4px 5px"
>@pureadmin/components</el-link
>，完全兼容antdv的<el-link
>
@pureadmin/components
</el-link>
，完全兼容antdv的
<el-link
href="https://next.antdv.com/components/tree-select-cn"
target="_blank"
style="font-size: 16px; margin: 0 4px 5px"
>TreeSelect</el-link
>写法</span
>
>
TreeSelect
</el-link>
写法
</span>
</div>
</template>
<div class="flex justify-around flex-wrap">
@ -171,9 +177,9 @@ const onLoadData = treeNode => {
:max-tag-count="10"
>
<template #title="{ title, value }">
<span v-if="value === '0-0-1-0'" style="color: #1890ff">{{
title
}}</span>
<span v-if="value === '0-0-1-0'" style="color: #1890ff">
{{ title }}
</span>
<template v-else>{{ title }}</template>
</template>
</TreeSelect>

9
src/views/able/barcode.vue
View File

@ -30,12 +30,15 @@ const barcodes = [
<el-card>
<template #header>
<div class="font-medium">
条形码（基于<el-link
条形码（基于
<el-link
href="https://lindell.me/JsBarcode/"
target="_blank"
style="font-size: 16px; margin: 0 5px 4px 0"
>JsBarcode</el-link
>生成）
>
JsBarcode
</el-link>
生成）
</div>
</template>
<el-row :gutter="12">

38
src/views/able/cascader.vue
View File

@ -36,12 +36,13 @@ const handleChange = value => {
<div class="leading-10">
<div>绑定值：{{ selectedOptions1 }}</div>
<div>
区域码转汉字：{{ CodeToText[selectedOptions1[0]] }},{{
CodeToText[selectedOptions1[1]]
}}
区域码转汉字：
{{ CodeToText[selectedOptions1[0]] }},
{{ CodeToText[selectedOptions1[1]] }}
</div>
<div>
汉字转区域码：{{
汉字转区域码：
{{
convertTextToCode(
CodeToText[selectedOptions1[0]],
CodeToText[selectedOptions1[1]]
@ -64,12 +65,13 @@ const handleChange = value => {
<div class="leading-10">
<div>绑定值：{{ selectedOptions3 }}</div>
<div>
区域码转汉字：{{ CodeToText[selectedOptions3[0]] }},{{
CodeToText[selectedOptions3[1]]
}}
区域码转汉字：
{{ CodeToText[selectedOptions3[0]] }},
{{ CodeToText[selectedOptions3[1]] }}
</div>
<div>
汉字转区域码：{{
汉字转区域码：
{{
convertTextToCode(
CodeToText[selectedOptions3[0]],
CodeToText[selectedOptions3[1]]
@ -92,12 +94,14 @@ const handleChange = value => {
<div class="leading-10">
<div>绑定值：{{ selectedOptions2 }}</div>
<div>
区域码转汉字：{{ CodeToText[selectedOptions2[0]] }},{{
CodeToText[selectedOptions2[1]]
}},{{ CodeToText[selectedOptions2[2]] }}
区域码转汉字：
{{ CodeToText[selectedOptions2[0]] }},
{{ CodeToText[selectedOptions2[1]] }},
{{ CodeToText[selectedOptions2[2]] }}
</div>
<div>
汉字转区域码：{{
汉字转区域码：
{{
convertTextToCode(
CodeToText[selectedOptions2[0]],
CodeToText[selectedOptions2[1]],
@ -121,12 +125,14 @@ const handleChange = value => {
<div class="leading-10">
<div>绑定值：{{ selectedOptions4 }}</div>
<div>
区域码转汉字：{{ CodeToText[selectedOptions4[0]] }},{{
CodeToText[selectedOptions4[1]]
}},{{ CodeToText[selectedOptions4[2]] }}
区域码转汉字：
{{ CodeToText[selectedOptions4[0]] }},
{{ CodeToText[selectedOptions4[1]] }},
{{ CodeToText[selectedOptions4[2]] }}
</div>
<div>
汉字转区域码：{{
汉字转区域码：
{{
convertTextToCode(
CodeToText[selectedOptions4[0]],
CodeToText[selectedOptions4[1]],

18
src/views/able/debounce.vue
View File

@ -27,12 +27,12 @@ const throttleClick = useThrottleFn(handle, 1000, false);
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
秒内又触发了事件，则会重新计算函数执行时间。
</div>
<el-button @click="immediateDebounce"
>连续点击我，只会执行最后一次点击事件，立即执行</el-button
>
<el-button @click="debounceClick"
>连续点击我，只会执行最后一次点击事件，延后执行</el-button
>
<el-button @click="immediateDebounce">
连续点击我，只会执行最后一次点击事件，立即执行
</el-button>
<el-button @click="debounceClick">
连续点击我，只会执行最后一次点击事件，延后执行
</el-button>
</el-card>
<el-card>
<template #header>
@ -42,9 +42,9 @@ const throttleClick = useThrottleFn(handle, 1000, false);
所谓节流，就是指连续触发事件但是在 n
秒中只执行一次函数。节流会稀释函数的执行频率。
</div>
<el-button @click="throttleClick"
>连续点击我，每一秒只会执行一次点击事件</el-button
>
<el-button @click="throttleClick">
连续点击我，每一秒只会执行一次点击事件
</el-button>
</el-card>
</div>
</template>

12
src/views/able/menu-tree.vue
View File

@ -48,16 +48,18 @@ const filterMethod = (query: string, node: treeNode) => {
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"
>菜单树结构（采用element-plus的
<span class="font-medium">
菜单树结构（采用element-plus的
<el-link
href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
target="_blank"
:icon="useRenderIcon('node-tree')"
style="font-size: 16px; margin: 0 5px 4px 0"
>Tree V2</el-link
>组件并支持国际化）</span
>
>
Tree V2
</el-link>
组件并支持国际化）
</span>
</div>
</template>
<el-input

9
src/views/able/qrcode.vue
View File

@ -23,12 +23,15 @@ const disabledClick = () => {
<el-card>
<template #header>
<div class="font-medium">
二维码（基于<el-link
二维码（基于
<el-link
href="https://github.com/soldair/node-qrcode"
target="_blank"
style="font-size: 16px; margin: 0 5px 4px 0"
>qrcode</el-link
>生成）
>
qrcode
</el-link>
生成）
</div>
</template>
<el-row :gutter="20" justify="space-between">

9
src/views/able/swiper.vue
View File

@ -102,12 +102,15 @@ const swiperExample: SwiperExample[] = [
<el-card>
<template #header>
<div class="font-medium">
Swiper插件（<el-link
Swiper插件（
<el-link
href="https://github.com/nolimits4web/swiper"
target="_blank"
style="font-size: 16px; margin: 0 5px 4px 0"
>github地址</el-link
>）
>
github地址
</el-link>
）
</div>
</template>
<el-row :gutter="10">

14
src/views/able/watermark.vue
View File

@ -14,19 +14,19 @@ const { setWatermark, clear } = useWatermark();
<span class="font-medium">页面水印功能</span>
</div>
</template>
<span>请输入要创建水印的值：</span
><el-input
<span> 请输入要创建水印的值：</span>
<el-input
class="mb-4 mr-4"
style="width: 200px"
v-model="value"
clearable
/>
<span>请选择要创建水印的颜色：</span
><el-color-picker v-model="color" show-alpha />
<span>请选择要创建水印的颜色：</span>
<el-color-picker v-model="color" show-alpha />
<br />
<el-button @click="setWatermark(value, { fillStyle: color })"
>创建</el-button
>
<el-button @click="setWatermark(value, { fillStyle: color })">
创建
</el-button>
<el-button @click="clear">清除</el-button>
</el-card>
</template>

10
src/views/about/index.vue
View File

@ -70,11 +70,11 @@ Object.keys(devDependencies).forEach(key => {
</a>
</el-descriptions-item>
<el-descriptions-item label="QQ交流群" label-align="left" align="left">
<a href="https://jq.qq.com/?_wv=1027&k=HntMx0dt" target="_blank"
><span style="color: var(--el-color-primary)"
>点击链接加入群聊【Pure Admin】</span
></a
>
<a href="https://jq.qq.com/?_wv=1027&k=HntMx0dt" target="_blank">
<span style="color: var(--el-color-primary)">
点击链接加入群聊【Pure Admin】
</span>
</a>
</el-descriptions-item>
</el-descriptions>
</el-card>

21
src/views/components/contextmenu/menuDynamic.vue
View File

@ -7,20 +7,21 @@
<v-contextmenu ref="contextmenu">
<v-contextmenu-group title="操作">
<v-contextmenu-item :hide-on-click="false" @click="extra.push('item')"
>添加菜单</v-contextmenu-item
>
<v-contextmenu-item :hide-on-click="false" @click="extra.push('group')"
>添加菜单组</v-contextmenu-item
>
<v-contextmenu-item :hide-on-click="false" @click="extra.push('item')">
添加菜单
</v-contextmenu-item>
<v-contextmenu-item :hide-on-click="false" @click="extra.push('group')">
添加菜单组
</v-contextmenu-item>
<v-contextmenu-item
:hide-on-click="false"
@click="extra.push('submenu')"
>添加子菜单</v-contextmenu-item
>
<v-contextmenu-item :hide-on-click="false" @click="extra.pop()"
>删除</v-contextmenu-item
>
添加子菜单
</v-contextmenu-item>
<v-contextmenu-item :hide-on-click="false" @click="extra.pop()">
删除
</v-contextmenu-item>
</v-contextmenu-group>
<template v-for="(item, index) of extra" :key="index">

12
src/views/components/draggable/index.vue
View File

@ -51,15 +51,17 @@ onMounted(() => {
<el-card>
<template #header>
<div class="card-header">
<span
>拖拽组件，采用开源的<el-link
<span>
拖拽组件，采用开源的
<el-link
href="https://sortablejs.github.io/vue.draggable.next/#/simple"
target="_blank"
:icon="useRenderIcon('rank')"
style="font-size: 16px; margin: 0 4px 5px"
>vuedraggable</el-link
></span
>
>
vuedraggable
</el-link>
</span>
</div>
</template>
<div class="drag-container">

12
src/views/components/seamless-scroll/index.vue
View File

@ -56,8 +56,9 @@ function changeDirection(val) {
<el-button class="button" type="text" @click="changeDirection('top')">
<span
:style="{ color: classOption.direction === 'top' ? 'red' : '' }"
>向上滚动</span
>
向上滚动
</span>
</el-button>
<el-button
class="button"
@ -68,8 +69,9 @@ function changeDirection(val) {
:style="{
color: classOption.direction === 'bottom' ? 'red' : ''
}"
>向下滚动</span
>
向下滚动
</span>
</el-button>
<el-button
class="button"
@ -78,8 +80,9 @@ function changeDirection(val) {
>
<span
:style="{ color: classOption.direction === 'left' ? 'red' : '' }"
>向左滚动</span
>
向左滚动
</span>
</el-button>
<el-button
class="button"
@ -88,8 +91,9 @@ function changeDirection(val) {
>
<span
:style="{ color: classOption.direction === 'right' ? 'red' : '' }"
>向右滚动</span
>
向右滚动
</span>
</el-button>
</div>
</template>

10
src/views/components/video/index.vue
View File

@ -29,14 +29,16 @@ onMounted(() => {
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"
>视频组件，采用开源的<el-link
<span class="font-medium">
视频组件，采用开源的
<el-link
href="https://v2.h5player.bytedance.com"
target="_blank"
:icon="useRenderIcon('video-play')"
style="font-size: 16px; margin: 0 4px 5px"
>西瓜播放器</el-link
></span
>
西瓜播放器
</el-link></span
>
</div>
</template>

12
src/views/editor/index.vue
View File

@ -24,7 +24,7 @@ onMounted(() => {
}, 1500);
});
const toolbarConfig = { excludeKeys: "fullScreen" };
const toolbarConfig: any = { excludeKeys: "fullScreen" };
const editorConfig = { placeholder: "请输入内容..." };
// 组件销毁时，也及时销毁编辑器
@ -43,14 +43,16 @@ const handleCreated = editor => {
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"
>编辑器组件，采用开源的<el-link
<span class="font-medium">
编辑器组件，采用开源的
<el-link
href="https://www.wangeditor.com"
target="_blank"
:icon="useRenderIcon('edit')"
style="font-size: 16px; margin: 0 4px 5px"
>wangeditor</el-link
></span
>
wangeditor
</el-link></span
>
</div>
</template>

3
src/views/error/403.vue
View File

@ -55,8 +55,9 @@ import noAccess from "/@/assets/status/403.svg?component";
delay: 500
}
}"
>返回首页</el-button
>
返回首页
</el-button>
</div>
</div>
</template>

3
src/views/error/404.vue
View File

@ -55,8 +55,9 @@ import noExist from "/@/assets/status/404.svg?component";
delay: 500
}
}"
>返回首页</el-button
>
返回首页
</el-button>
</div>
</div>
</template>

3
src/views/error/500.vue
View File

@ -55,8 +55,9 @@ import noServer from "/@/assets/status/500.svg?component";
delay: 500
}
}"
>返回首页</el-button
>
返回首页
</el-button>
</div>
</div>
</template>

12
src/views/flow-chart/index.vue
View File

@ -62,15 +62,17 @@ onMounted(() => {
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"
>流程图组件，采用开源的<el-link
<span class="font-medium">
流程图组件，采用开源的
<el-link
href="http://logic-flow.org/"
target="_blank"
:icon="useRenderIcon('set-up')"
style="font-size: 16px; margin: 0 4px 5px"
>LogicFlow</el-link
></span
>
>
LogicFlow
</el-link>
</span>
</div>
</template>
<div class="logic-flow-view">

6
src/views/guide/index.vue
View File

@ -68,9 +68,9 @@ const guide = () => {
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"
>引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能</span
>
<span class="font-medium">
引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能
</span>
</div>
</template>
<el-button

12
src/views/list/card/components/Card.vue
View File

@ -73,12 +73,12 @@ const cardLogoClass = computed(() => [
<IconifyIconOffline icon="more-vertical" class="icon-more" />
<template #dropdown>
<el-dropdown-menu :disabled="!product.isSetup">
<el-dropdown-item @click="handleClickManage(product)"
>管理</el-dropdown-item
>
<el-dropdown-item @click="handleClickDelete(product)"
>删除</el-dropdown-item
>
<el-dropdown-item @click="handleClickManage(product)">
管理
</el-dropdown-item>
<el-dropdown-item @click="handleClickDelete(product)">
删除
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>

6
src/views/list/card/components/DialogForm.vue
View File

@ -139,9 +139,9 @@ const rules = {
</el-form>
<template #footer>
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="submitForm(ruleFormRef)"
>确定</el-button
>
<el-button type="primary" @click="submitForm(ruleFormRef)">
确定
</el-button>
</template>
</el-dialog>
</template>

6
src/views/list/card/index.vue
View File

@ -97,9 +97,9 @@ const handleManageProduct = product => {
<template>
<div class="main">
<div class="w-full flex justify-between mb-4">
<el-button :icon="useRenderIcon('add')" @click="formDialogVisible = true"
>新建产品</el-button
>
<el-button :icon="useRenderIcon('add')" @click="formDialogVisible = true">
新建产品
</el-button>
<el-input
style="width: 300px"
v-model="searchValue"

7
src/views/permission/page/index.vue
View File

@ -37,15 +37,16 @@ function changRole() {
<span style="font-size: 26px">{{ purview }}</span>
<p style="color: #ffa500">
查看左侧菜单变化(系统管理)，模拟后台根据不同角色返回对应路由
</p></span
>
</p>
</span>
</div>
</template>
<el-button
type="primary"
@click="changRole"
:icon="useRenderIcon('user', { color: '#fff' })"
>切换角色</el-button
>
切换角色
</el-button>
</el-card>
</template>

12
src/views/result/fail.vue
View File

@ -35,13 +35,15 @@
href="javascript:void(0);"
class="flex items-center"
style="color: var(--el-color-primary)"
>立即解冻
>
立即解冻
<IconifyIconOffline
icon="arrow-right-s-line"
color="var(--el-color-primary)"
width="18px"
height="18px"
/></a>
/>
</a>
</span>
</el-descriptions-item>
<el-descriptions-item>
@ -57,13 +59,15 @@
href="javascript:void(0);"
class="flex items-center"
style="color: var(--el-color-primary)"
>立即升级
>
立即升级
<IconifyIconOffline
icon="arrow-right-s-line"
color="var(--el-color-primary)"
width="18px"
height="18px"
/></a>
/>
</a>
</span>
</el-descriptions-item>
</el-descriptions>

3
src/views/result/success.vue
View File

@ -47,7 +47,8 @@ const { lastBuildTime } = __APP_INFO__;
aria-label="dingding"
class="anticon anticon-dingding cursor-pointer flex items-center cursor-pointer"
style="color: rgb(0, 160, 233); margin-left: 8px"
><svg
>
<svg
viewBox="64 64 896 896"
focusable="false"
data-icon="dingding"

12
src/views/system/dict/config.vue
View File

@ -106,14 +106,16 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
type="text"
icon="fa fa-pencil-square-o"
@click="editConfig(row)"
>编辑</vxe-button
>
编辑
</vxe-button>
<vxe-button
type="text"
icon="fa fa-trash-o"
@click="delConfig(row)"
>删除</vxe-button
>
删除
</vxe-button>
</template>
</vxe-table-column>
</vxe-table>
@ -140,9 +142,9 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
:indeterminate="configData.isIndeterminate"
@change="changeAllEvent"
/>
<span class="select-count"
>已选中{{ configData.selectRecords.length }}条</span
>
<span class="select-count">
已选中{{ configData.selectRecords.length }}条
</span>
<vxe-button size="small">{{ t("buttons.hsdelete") }}</vxe-button>
</span>
</template>

30
src/views/system/dict/index.vue
View File

@ -217,24 +217,23 @@ function handleClose() {
/>
</template>
<template #tools>
<vxe-button
icon="fa fa-plus-square-o"
status="primary"
@click="onAdd"
>{{ t("buttons.hsadd") }}</vxe-button
>
<vxe-button icon="fa fa-plus-square-o" status="primary" @click="onAdd">
{{ t("buttons.hsadd") }}
</vxe-button>
<vxe-button
icon="fa fa-folder-open-o"
status="primary"
@click="$refs.xTree.setAllTreeExpand(true)"
>{{ t("buttons.hsexpendAll") }}</vxe-button
>
{{ t("buttons.hsexpendAll") }}
</vxe-button>
<vxe-button
icon="fa fa-folder-o"
status="primary"
@click="$refs.xTree.clearTreeExpand()"
>{{ t("buttons.hscollapseAll") }}</vxe-button
>
{{ t("buttons.hscollapseAll") }}
</vxe-button>
</template>
</vxe-toolbar>
@ -269,24 +268,27 @@ function handleClose() {
type="text"
icon="fa fa-pencil-square-o"
@click="onEdit(row)"
>编辑</vxe-button
>
编辑
</vxe-button>
<vxe-button
type="text"
icon="fa fa-plus-square-o"
@click="onAddChild(row)"
>新增子类型</vxe-button
>
新增子类型
</vxe-button>
<vxe-button
v-show="row.model"
type="text"
icon="fa fa-cog"
@click="onDeploy(row)"
>字典配置</vxe-button
>
<vxe-button type="text" icon="fa fa-trash-o" @click="confirmEvent"
>删除</vxe-button
>
字典配置
</vxe-button>
<vxe-button type="text" icon="fa fa-trash-o" @click="confirmEvent">
删除
</vxe-button>
</template>
</vxe-table-column>
</vxe-table>

24
src/views/welcome/index.vue
View File

@ -89,9 +89,9 @@ const openDepot = (): void => {
>
<el-card style="height: 360px">
<template #header>
<span style="font-size: 16px; font-weight: 500"
>GitHub滚动信息</span
>
<span style="font-size: 16px; font-weight: 500">
GitHub滚动信息
</span>
</template>
<el-skeleton animated :rows="7" :loading="loading">
<template #default>
@ -123,9 +123,9 @@ const openDepot = (): void => {
>
<el-card>
<template #header>
<span style="font-size: 16px; font-weight: 500"
>GitHub饼图信息</span
>
<span style="font-size: 16px; font-weight: 500">
GitHub饼图信息
</span>
</template>
<el-skeleton animated :rows="7" :loading="loading">
<template #default>
@ -157,9 +157,9 @@ const openDepot = (): void => {
>
<el-card>
<template #header>
<span style="font-size: 16px; font-weight: 500"
>GitHub折线图信息</span
>
<span style="font-size: 16px; font-weight: 500">
GitHub折线图信息
</span>
</template>
<el-skeleton animated :rows="7" :loading="loading">
<template #default>
@ -191,9 +191,9 @@ const openDepot = (): void => {
>
<el-card>
<template #header>
<span style="font-size: 16px; font-weight: 500"
>GitHub柱状图信息</span
>
<span style="font-size: 16px; font-weight: 500">
GitHub柱状图信息
</span>
</template>
<el-skeleton animated :rows="7" :loading="loading">
<template #default>