🔥 整理代码
This commit is contained in:
parent
1d736ea005
commit
7c60676d9d
@ -10,9 +10,9 @@ export function createViteVConsole() {
|
||||
theme: 'light',
|
||||
},
|
||||
// https://github.com/vadxq/vite-plugin-vconsole/issues/21
|
||||
dynamicConfig: {
|
||||
theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`,
|
||||
},
|
||||
// dynamicConfig: {
|
||||
// theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`,
|
||||
// },
|
||||
eventListener: `
|
||||
const targetElement = document.querySelector('html'); // 择要监听的元素
|
||||
const observerOptions = {
|
||||
|
||||
14
src/App.vue
14
src/App.vue
@ -3,20 +3,6 @@ import { storeToRefs } from 'pinia'
|
||||
import useAppStore from '@/stores/modules/app'
|
||||
import useRouteTransitionNameStore from '@/stores/modules/routeTransitionName'
|
||||
|
||||
// useHead({
|
||||
// title: 'Vue3 Vant Mobile',
|
||||
// meta: [
|
||||
// {
|
||||
// name: 'description',
|
||||
// content: 'Vue + Vite H5 Starter Template',
|
||||
// },
|
||||
// {
|
||||
// name: 'theme-color',
|
||||
// content: () => isDark.value ? '#00aba9' : '#ffffff',
|
||||
// },
|
||||
// ],
|
||||
// })
|
||||
|
||||
const appStore = useAppStore()
|
||||
const { mode } = storeToRefs(appStore)
|
||||
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
# Components
|
||||
|
||||
Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
|
||||
@ -1,179 +0,0 @@
|
||||
const contrastColor = 'rgba(255, 255, 255, 0.65)'
|
||||
const backgroundColor = 'transparent'
|
||||
const axisCommon = function () {
|
||||
return {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: contrastColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#484753',
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.05)'],
|
||||
},
|
||||
},
|
||||
minorSplitLine: {
|
||||
lineStyle: {
|
||||
color: '#20203B',
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const colorPalette = [
|
||||
'#4992ff',
|
||||
'#7cffb2',
|
||||
'#fddd60',
|
||||
'#ff6e76',
|
||||
'#58d9f9',
|
||||
'#05c091',
|
||||
'#ff8a45',
|
||||
'#8d48e3',
|
||||
'#dd79ff',
|
||||
]
|
||||
const theme: any = {
|
||||
color: colorPalette,
|
||||
backgroundColor,
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#817f91',
|
||||
},
|
||||
crossStyle: {
|
||||
color: '#817f91',
|
||||
},
|
||||
label: {
|
||||
// TODO Contrast of label backgorundColor
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: contrastColor,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: contrastColor,
|
||||
},
|
||||
title: {
|
||||
textStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
subtextStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.65)',
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
iconStyle: {
|
||||
borderColor: contrastColor,
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
borderColor: '#71708A',
|
||||
textStyle: {
|
||||
color: contrastColor,
|
||||
},
|
||||
brushStyle: {
|
||||
color: 'rgba(135,163,206,0.3)',
|
||||
},
|
||||
handleStyle: {
|
||||
color: '#353450',
|
||||
borderColor: '#C5CBE3',
|
||||
},
|
||||
moveHandleStyle: {
|
||||
color: '#B0B6C3',
|
||||
opacity: 0.3,
|
||||
},
|
||||
fillerColor: 'rgba(135,163,206,0.2)',
|
||||
emphasis: {
|
||||
handleStyle: {
|
||||
borderColor: '#91B7F2',
|
||||
color: '#4D587D',
|
||||
},
|
||||
moveHandleStyle: {
|
||||
color: '#636D9A',
|
||||
opacity: 0.7,
|
||||
},
|
||||
},
|
||||
dataBackground: {
|
||||
lineStyle: {
|
||||
color: '#71708A',
|
||||
width: 1,
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#71708A',
|
||||
},
|
||||
},
|
||||
selectedDataBackground: {
|
||||
lineStyle: {
|
||||
color: '#87A3CE',
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#87A3CE',
|
||||
},
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
textStyle: {
|
||||
color: contrastColor,
|
||||
},
|
||||
},
|
||||
timeline: {
|
||||
lineStyle: {
|
||||
color: contrastColor,
|
||||
},
|
||||
label: {
|
||||
color: contrastColor,
|
||||
},
|
||||
controlStyle: {
|
||||
color: contrastColor,
|
||||
borderColor: contrastColor,
|
||||
},
|
||||
},
|
||||
calendar: {
|
||||
itemStyle: {
|
||||
color: backgroundColor,
|
||||
},
|
||||
dayLabel: {
|
||||
color: contrastColor,
|
||||
},
|
||||
monthLabel: {
|
||||
color: contrastColor,
|
||||
},
|
||||
yearLabel: {
|
||||
color: contrastColor,
|
||||
},
|
||||
},
|
||||
timeAxis: axisCommon(),
|
||||
logAxis: axisCommon(),
|
||||
valueAxis: axisCommon(),
|
||||
categoryAxis: axisCommon(),
|
||||
|
||||
line: {
|
||||
symbol: 'circle',
|
||||
},
|
||||
graph: {
|
||||
color: colorPalette,
|
||||
},
|
||||
gauge: {
|
||||
title: {
|
||||
color: contrastColor,
|
||||
},
|
||||
},
|
||||
candlestick: {
|
||||
itemStyle: {
|
||||
color: '#FD1050',
|
||||
color0: '#0CF49B',
|
||||
borderColor: '#FD1050',
|
||||
borderColor0: '#0CF49B',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
theme.categoryAxis.splitLine.show = false
|
||||
|
||||
export default theme
|
||||
@ -1,65 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { ECharts } from 'echarts'
|
||||
import * as echarts from 'echarts'
|
||||
import { debounce } from 'lodash-es'
|
||||
import { addListener, removeListener } from 'resize-detector'
|
||||
import dark from './dark'
|
||||
|
||||
const props = defineProps({
|
||||
option: Object,
|
||||
})
|
||||
|
||||
echarts.registerTheme('dark-chart', dark)
|
||||
|
||||
const chartDom = ref<HTMLDivElement>()
|
||||
let chart: ECharts | null = null
|
||||
const isRealDark = ref(isDark.value)
|
||||
function resizeChart() {
|
||||
chart?.resize()
|
||||
}
|
||||
|
||||
const resize = debounce(resizeChart, 300)
|
||||
|
||||
function disposeChart() {
|
||||
if (chartDom.value)
|
||||
removeListener(chartDom.value, resize)
|
||||
|
||||
chart?.dispose()
|
||||
chart = null
|
||||
}
|
||||
|
||||
function initChart() {
|
||||
disposeChart()
|
||||
if (chartDom.value) {
|
||||
// init echarts
|
||||
chart = echarts.init(chartDom.value, isRealDark.value ? 'dark-chart' : undefined)
|
||||
chart.setOption(props.option)
|
||||
addListener(chartDom.value, resize)
|
||||
}
|
||||
}
|
||||
|
||||
watch(isRealDark, () => {
|
||||
initChart()
|
||||
}, {
|
||||
flush: 'post',
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
watch(() => props.option, () => {
|
||||
chart?.setOption(props.option)
|
||||
}, {
|
||||
deep: true,
|
||||
flush: 'post',
|
||||
})
|
||||
|
||||
initChart()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
disposeChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="chartDom" />
|
||||
</template>
|
||||
@ -1,15 +0,0 @@
|
||||
export interface SeriesDataItem {
|
||||
x: any
|
||||
y: any
|
||||
}
|
||||
|
||||
export interface RadarDataItem {
|
||||
label: string
|
||||
name: string
|
||||
value: string | number
|
||||
}
|
||||
|
||||
export interface RadarIndicatorItem {
|
||||
name: string
|
||||
max: number
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<main class="h-full w-full p-16 py-60">
|
||||
<slot />
|
||||
</main>
|
||||
</template>
|
||||
@ -1,5 +0,0 @@
|
||||
export { default as Container } from './container/index.vue'
|
||||
|
||||
// charts
|
||||
export { default as Chart } from './chart/index.vue'
|
||||
export type { SeriesDataItem, RadarDataItem, RadarIndicatorItem } from './chart/typing'
|
||||
@ -1,4 +0,0 @@
|
||||
// these APIs are auto-imported from @vueuse/core
|
||||
export const isDark = useDark()
|
||||
export const toggleDark = useToggle(isDark)
|
||||
export const preferredDark = usePreferredDark()
|
||||
@ -1,12 +1,13 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import type { ConfigProviderTheme } from 'vant'
|
||||
|
||||
const prefersDark
|
||||
= window.matchMedia
|
||||
&& window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
// const prefersDark
|
||||
// = window.matchMedia
|
||||
// && window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
|
||||
const useAppStore = defineStore('app', () => {
|
||||
const theme = prefersDark ? 'dark' : 'light'
|
||||
// const theme = prefersDark ? 'dark' : 'light'
|
||||
const theme = 'light'
|
||||
const mode = ref<ConfigProviderTheme>(theme)
|
||||
|
||||
const swithMode = (val: ConfigProviderTheme) => {
|
||||
|
||||
@ -9,10 +9,10 @@ html {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
background: #121212;
|
||||
color-scheme: dark;
|
||||
}
|
||||
// html.dark {
|
||||
// background: #121212;
|
||||
// color-scheme: dark;
|
||||
// }
|
||||
|
||||
*,
|
||||
*::before,
|
||||
|
||||
@ -1,26 +1,24 @@
|
||||
<script setup lang="ts" name="SignUp">
|
||||
import { getSignUpFormConfig } from '@/api/mice'
|
||||
import SignForm from '@/views/signUp/components/SignForm.vue'
|
||||
|
||||
const formConfigs = ref<any[]>([])
|
||||
|
||||
onMounted(() => {
|
||||
const miceLink = getUrlMiceLink()
|
||||
getSignUpFormConfig({ miceLink }).then((res: any) => {
|
||||
formConfigs.value = res.data
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<img
|
||||
fit="contain"
|
||||
w-full
|
||||
src="https://sn202108-1305501521.cos.ap-shanghai.myqcloud.com/202401162355044675902.jpg"
|
||||
alt=""
|
||||
/>
|
||||
>
|
||||
<SignForm />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="SignUp">
|
||||
import { getSignUpFormConfig } from "@/api";
|
||||
import { getUrlMiceLink } from "@/utils/mice";
|
||||
import { onMounted, ref } from "vue";
|
||||
import SignForm from "@/views/signUp/components/SignForm.vue";
|
||||
|
||||
const formConfigs = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
const miceLink = getUrlMiceLink();
|
||||
getSignUpFormConfig({ miceLink }).then((res: any) => {
|
||||
formConfigs.value = res.data;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user