🔥 整理代码

build/vite/vconsole.ts

@@ -10,9 +10,9 @@ export function createViteVConsole() {
       theme: 'light',
     },
     // https://github.com/vadxq/vite-plugin-vconsole/issues/21
-    dynamicConfig: {
+    // dynamicConfig: {
-      theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`,
+    //   theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`,
-    },
+    // },
     eventListener: `
       const targetElement = document.querySelector('html'); // 择要监听的元素
       const observerOptions = {

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)
 

src/components/README.md

@@ -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).

src/components/chart/dark.ts

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

src/components/chart/index.vue

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

src/components/chart/typing.ts

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

src/components/container/index.vue

@@ -1,5 +0,0 @@
-<template>
-  <main class="h-full w-full p-16 py-60">
-    <slot />
-  </main>
-</template>

src/components/index.ts

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

src/composables/dark.ts

@@ -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()

src/stores/modules/app.ts

@@ -1,12 +1,13 @@
 import { defineStore } from 'pinia'
 import type { ConfigProviderTheme } from 'vant'
 
-const prefersDark
+// const prefersDark
-= window.matchMedia
+// = window.matchMedia
-&& window.matchMedia('(prefers-color-scheme: dark)').matches
+// && 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) => {

src/styles/app.less

@@ -9,10 +9,10 @@ html {
   color-scheme: light;
 }
 
-html.dark {
+// html.dark {
-  background: #121212;
+//   background: #121212;
-  color-scheme: dark;
+//   color-scheme: dark;
-}
+// }
 
 *,
 *::before,

src/views/signUp/index.vue

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