Schisandra-Cloud-Storage/schisandra-cloud-storage-front-vue
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🔧工具(deps): add ECharts

Browse Source
This commit is contained in:
landaiqing
2024-03-20 17:20:16 +08:00
parent 21ea22e444
commit dda579424c
19 changed files with 262 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
commitlint.config.js
View File

@@ -1,32 +1,32 @@
module.exports = {
extents: ['@commitlint/config-conventional']
// rules: {
// 'body-leading-blank': [1, 'always'],
// 'footer-leading-blank': [1, 'always'],
// 'header-max-length': [2, 'always', 72],
// 'scope-case': [2, 'always', 'lower-case'],
// 'subject-case': [2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']],
// 'subject-empty': [2, 'never'],
// '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'
// ]
// ]
// }
extents: ['@commitlint/config-conventional'],
rules: {
// 'body-leading-blank': [1, 'always'],
// 'footer-leading-blank': [1, 'always'],
// 'header-max-length': [2, 'always', 72],
// 'scope-case': [2, 'always', 'lower-case'],
// 'subject-case': [2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']],
// 'subject-empty': [2, 'never'],
// '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'
]
]
}
}

1
components.d.ts vendored
View File

@@ -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']

87
index.html
View File

@@ -1,13 +1,80 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/schisandra.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>五味子云相册</title>
</head>
<body>
<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>

1
package.json
View File

@@ -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
View File

@@ -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
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

1
public/vite.svg
View File

@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

36
src/App.vue
View File

@@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

39
src/components/HelloWorld.vue
View File

@@ -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
View 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
src/components/svgIcon/SvgIcon.vue
View File

@@ -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
View File

@@ -0,0 +1,7 @@
.svg-icon {
// svg 图标默认宽高，根据个人使用情况自行调整
width: 20px;
height: 20px;
fill: currentColor;
overflow: hidden;
}

4
src/main.ts
View File

@@ -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'

4
src/router/index.ts
View File

@@ -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
View File

@@ -0,0 +1,10 @@
export default [
{
path: '/',
name: 'login',
component: () => import('@/views/login/LoginPage.vue'),
meta: {
title: '登录页'
}
}
]

0
src/style/global.less → src/style/scroll-bar.less
View File

21
src/style.css → src/style/style.less
View File

@@ -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
View 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>