🔧工具(deps): add ECharts
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
module.exports = {
|
||||
extents: ['@commitlint/config-conventional']
|
||||
// rules: {
|
||||
extents: ['@commitlint/config-conventional'],
|
||||
rules: {
|
||||
// 'body-leading-blank': [1, 'always'],
|
||||
// 'footer-leading-blank': [1, 'always'],
|
||||
// 'header-max-length': [2, 'always', 72],
|
||||
@@ -10,23 +10,23 @@ module.exports = {
|
||||
// 'subject-full-stop': [2, 'never', '.'],
|
||||
// 'type-case': [2, 'always', 'lower-case'],
|
||||
// 'type-empty': [2, 'never'],
|
||||
// 'type-enum': [
|
||||
// 2,
|
||||
// 'always',
|
||||
// [
|
||||
// 'build',
|
||||
// 'chore',
|
||||
// 'ci',
|
||||
// 'docs',
|
||||
// 'feat',
|
||||
// 'fix',
|
||||
// 'improvement',
|
||||
// 'perf',
|
||||
// 'refactor',
|
||||
// 'revert',
|
||||
// 'style',
|
||||
// 'test'
|
||||
// ]
|
||||
// ]
|
||||
// }
|
||||
'type-enum': [
|
||||
2,
|
||||
'always',
|
||||
[
|
||||
'build',
|
||||
'chore',
|
||||
'ci',
|
||||
'docs',
|
||||
'feat',
|
||||
'fix',
|
||||
'improvement',
|
||||
'perf',
|
||||
'refactor',
|
||||
'revert',
|
||||
'style',
|
||||
'test'
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
1
components.d.ts
vendored
1
components.d.ts
vendored
@@ -7,6 +7,7 @@ export {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
Echarts: typeof import('./src/components/echarts/ECharts.vue')['default']
|
||||
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
|
||||
73
index.html
73
index.html
@@ -2,12 +2,79 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="/schisandra.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
<title>五味子云相册</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div id="app">
|
||||
<!-- 核心代码-开始-->
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loader,
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
border-radius: 50%;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
animation-fill-mode: both;
|
||||
animation: loadAnimation 1.8s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.loader {
|
||||
color: #406eeb;
|
||||
font-size: 10px;
|
||||
margin: 80px auto;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
transform: translateZ(0);
|
||||
animation-delay: -0.16s;
|
||||
top: 0;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.loader:before {
|
||||
left: -3.5em;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
left: 3.5em;
|
||||
}
|
||||
|
||||
@keyframes loadAnimation {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 2.5em 0 -1.3em;
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0 2.5em 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="loader"></div>
|
||||
<!-- 核心代码-结束-->
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"axios": "^1.6.8",
|
||||
"core-js": "^3.36.1",
|
||||
"cz-customizable": "^7.0.0",
|
||||
"echarts": "^5.5.0",
|
||||
"husky": "^9.0.11",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.1.7",
|
||||
|
||||
20
pnpm-lock.yaml
generated
20
pnpm-lock.yaml
generated
@@ -20,6 +20,9 @@ dependencies:
|
||||
cz-customizable:
|
||||
specifier: ^7.0.0
|
||||
version: 7.0.0
|
||||
echarts:
|
||||
specifier: ^5.5.0
|
||||
version: 5.5.0
|
||||
husky:
|
||||
specifier: ^9.0.11
|
||||
version: 9.0.11
|
||||
@@ -3214,6 +3217,13 @@ packages:
|
||||
is-obj: 2.0.0
|
||||
dev: true
|
||||
|
||||
/echarts@5.5.0:
|
||||
resolution: {integrity: sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==}
|
||||
dependencies:
|
||||
tslib: 2.3.0
|
||||
zrender: 5.5.0
|
||||
dev: false
|
||||
|
||||
/editor@1.0.0:
|
||||
resolution: {integrity: sha512-SoRmbGStwNYHgKfjOrX2L0mUvp9bUVv0uPppZSOMAntEbcFtoC3MKF5b3T6HQPXKIV+QGY3xPO3JK5it5lVkuw==}
|
||||
dev: false
|
||||
@@ -5867,6 +5877,10 @@ packages:
|
||||
resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
|
||||
dev: false
|
||||
|
||||
/tslib@2.3.0:
|
||||
resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
|
||||
dev: false
|
||||
|
||||
/tslib@2.6.2:
|
||||
resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
|
||||
|
||||
@@ -6343,3 +6357,9 @@ packages:
|
||||
resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
|
||||
engines: {node: '>=12.20'}
|
||||
dev: true
|
||||
|
||||
/zrender@5.5.0:
|
||||
resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==}
|
||||
dependencies:
|
||||
tslib: 2.3.0
|
||||
dev: false
|
||||
|
||||
1
public/schisandra.svg
Normal file
1
public/schisandra.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.1 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
36
src/App.vue
36
src/App.vue
@@ -1,32 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="@/assets/svg/vue.svg" class="logo vue" alt="Vue logo" />
|
||||
</a>
|
||||
</div>
|
||||
<HelloWorld msg="Vite + Vue" />
|
||||
<!-- 设置路由出口 -->
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition name="animation" mode="out-in">
|
||||
<component :is="Component" :key="route.path" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #42b883aa);
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/assets/img/wallhaven.jpg
Normal file
BIN
src/assets/img/wallhaven.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
@@ -1,39 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import SvgIcon from '@/components/svgIcon/SvgIcon.vue'
|
||||
|
||||
defineProps<{ msg: string }>()
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
|
||||
starter
|
||||
</p>
|
||||
<p>
|
||||
Install
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
|
||||
in your IDE for a better DX
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
<svg-icon icon-class="close" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
66
src/components/echarts/ECharts.vue
Normal file
66
src/components/echarts/ECharts.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
import { ECharts, EChartsOption, init } from 'echarts'
|
||||
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
// 定义props
|
||||
interface Props {
|
||||
width?: string
|
||||
height?: string
|
||||
option: EChartsOption
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
option: () => ({})
|
||||
})
|
||||
|
||||
const myChartsRef = ref<HTMLDivElement>()
|
||||
let myChart: ECharts
|
||||
// eslint-disable-next-line no-undef
|
||||
let timer: string | number | NodeJS.Timeout | undefined
|
||||
|
||||
// 初始化echarts
|
||||
const initChart = (): void => {
|
||||
if (myChart !== undefined) {
|
||||
myChart.dispose()
|
||||
}
|
||||
myChart = init(myChartsRef.value as HTMLDivElement)
|
||||
// 拿到option配置项，渲染echarts
|
||||
myChart?.setOption(props.option, true)
|
||||
}
|
||||
|
||||
// 重新渲染echarts
|
||||
const resizeChart = (): void => {
|
||||
timer = setTimeout(() => {
|
||||
if (myChart) {
|
||||
myChart.resize()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
window.addEventListener('resize', resizeChart)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart)
|
||||
clearTimeout(timer)
|
||||
timer = 0
|
||||
})
|
||||
|
||||
watch(
|
||||
props.option,
|
||||
() => {
|
||||
initChart()
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="myChartsRef" :style="{ height: height, width: width }" :option="option" />
|
||||
</template>
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import './svgIcon.less'
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
|
||||
7
src/components/svgIcon/svgIcon.less
Normal file
7
src/components/svgIcon/svgIcon.less
Normal file
@@ -0,0 +1,7 @@
|
||||
.svg-icon {
|
||||
// svg 图标默认宽高，根据个人使用情况自行调整
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import './style/style.less'
|
||||
import App from './App.vue'
|
||||
import router from '@/router/index'
|
||||
import { createPinia } from 'pinia'
|
||||
@@ -7,7 +7,7 @@ import Antd from 'ant-design-vue'
|
||||
import 'ant-design-vue/dist/reset.css'
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||
import '@/polyfill/polyfill'
|
||||
import '@/style/global.less'
|
||||
import '@/style/scroll-bar.less'
|
||||
// 国际化
|
||||
import i18n from '../locales'
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
|
||||
// 引入 nprogress 相关方法
|
||||
import { close, start } from '@/utils/nprogress/nprogress'
|
||||
|
||||
const routes: Array<RouteRecordRaw> = []
|
||||
import login from './modules/login'
|
||||
const routes: Array<RouteRecordRaw> = [...login]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
|
||||
10
src/router/modules/login.ts
Normal file
10
src/router/modules/login.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
export default [
|
||||
{
|
||||
path: '/',
|
||||
name: 'login',
|
||||
component: () => import('@/views/login/LoginPage.vue'),
|
||||
meta: {
|
||||
title: '登录页'
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -77,3 +77,24 @@ button:focus-visible {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
/* 过度动画配置代码 */
|
||||
.animation-enter-from,
|
||||
.animation-leave-to {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-enter-to,
|
||||
.animation-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.animation-enter-active {
|
||||
transition: all 0.7s ease;
|
||||
}
|
||||
|
||||
.animation-leave-active {
|
||||
transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
|
||||
}
|
||||
/* 过度动画配置代码结束 */
|
||||
16
src/views/login/LoginPage.vue
Normal file
16
src/views/login/LoginPage.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LoginPage'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>Login</h1>
|
||||
<h2>测试页面，看到这个，那么项目就成功跑起来了</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user