chore: Improved app page display in light mode (#51)

Author: cwandev

index.html

@@ -6,12 +6,14 @@
     <link rel="icon" href="/favicon.ico" />
     <script>
       ;(function () {
-        const prefersDark =
-          window.matchMedia &&
-          window.matchMedia('(prefers-color-scheme: dark)').matches
+        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
         const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
-        if (setting === 'dark' || (prefersDark && setting !== 'light'))
+        
+        if (setting === 'dark' || (prefersDark && setting !== 'light')) {
           document.documentElement.classList.toggle('dark', true)
+        } else {
+          document.documentElement.classList.toggle('light', true)
+        }
       })()
     </script>
   </head>

src/components.d.ts

@@ -8,15 +8,16 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Chart: typeof import('./components/chart/index.vue')['default']
+    Container: typeof import('./components/container/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']
     VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
     VanEmpty: typeof import('vant/es')['Empty']
-    VanLoading: typeof import('vant/es')['Loading']
     VanNavBar: typeof import('vant/es')['NavBar']
+    VanSpace: typeof import('vant/es')['Space']
     VanSwitch: typeof import('vant/es')['Switch']
     VanTag: typeof import('vant/es')['Tag']
   }

src/components/README.md

@@ -1,3 +1,3 @@
-## Components
+# 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/container/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="h-full w-full p-16 py-60" light="bg-[--van-gray-1]">
+    <slot />
+  </div>
+</template>

src/components/index.ts

@@ -1,3 +1,5 @@
+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/typed-router.d.ts

@@ -39,7 +39,7 @@ import type {
 
 declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
-    'index': RouteRecordInfo<'index', '/', Record<never, never>, Record<never, never>>,
+    'main': RouteRecordInfo<'main', '/', Record<never, never>, Record<never, never>>,
     'charts': RouteRecordInfo<'charts', '/charts', Record<never, never>, Record<never, never>>,
     'counter': RouteRecordInfo<'counter', '/counter', Record<never, never>, Record<never, never>>,
     'mock': RouteRecordInfo<'mock', '/mock', Record<never, never>, Record<never, never>>,

src/views/charts/index.vue

@@ -71,29 +71,23 @@ const onClickLeft = () => history.back()
   <div>
     <VanNavBar title="📊 Echarts" left-arrow fixed @click-left="onClickLeft" />
 
-    <div class="container">
-      <div class="chart">
+    <Container>
+      <div class="chart light:bg-white">
         <Chart :option="refBarOption" :style="{ height: '330px' }" />
       </div>
 
-      <div class="chart item">
+      <div class="chart item light:bg-white">
         <Chart :option="refLineOption" :style="{ height: '330px' }" />
       </div>
 
-      <div class="chart item">
+      <div class="chart item light:bg-white">
         <Chart :option="refScoreOption" :style="{ height: '330px' }" />
       </div>
-    </div>
+    </Container>
   </div>
 </template>
 
 <style lang="less" scoped>
-.container {
-  width: 100%;
-  height: 100%;
-  padding: 60px 16px;
-}
-
 .chart {
   width: 100%;
   height: 300px;

src/views/counter/index.vue

@@ -21,10 +21,10 @@ const onClickLeft = () => history.back()
 </script>
 
 <template>
-  <div>
+  <div class="h-full w-full">
     <VanNavBar title="🍍 持久化 Pinia 状态" left-arrow fixed @click-left="onClickLeft" />
 
-    <div class="h-100vh w-full px-20 py-60">
+    <Container>
       <h1 class="text-6xl color-pink font-semibold">
         Hello, Pinia!
       </h1>
@@ -38,6 +38,6 @@ const onClickLeft = () => history.back()
       <button class="btn border-none btn-green" @click="add">
         Add
       </button>
-    </div>
+    </Container>
   </div>
 </template>

src/views/index.vue

@@ -2,11 +2,12 @@
 import useAppStore from '@/stores/modules/app'
 
 definePage({
-  name: 'index',
+  name: 'main',
   meta: {
     level: 1,
   },
 })
+
 const appStore = useAppStore()
 const checked = ref<boolean>(isDark.value)
 
@@ -17,11 +18,11 @@ function toggle() {
 </script>
 
 <template>
-  <div class="h-full w-full pt-30 light:bg-[#eff2f5]">
-    <VanCellGroup title="一个集成最新技术栈、完整干净的移动端模板" inset>
+  <div class="h-full w-full py-60" light="bg-[--van-gray-1]">
+    <VanCellGroup inset title="一个集成最新技术栈、完整干净的移动端模板">
       <VanCell center title="🌗 暗黑模式">
         <template #right-icon>
-          <VanSwitch v-model="checked" size="23px" @click="toggle()" />
+          <VanSwitch v-model="checked" size="20px" @click="toggle()" />
         </template>
       </VanCell>
 
@@ -32,7 +33,7 @@ function toggle() {
 
       <VanCell center>
         <template #title>
-          <span class="custom-title">🎨 欢迎补充</span>
+          <span class="mr-4 v-middle">🎨 欢迎补充</span>
           <VanTag type="primary">
             PR
           </VanTag>
@@ -41,10 +42,3 @@ function toggle() {
     </VanCellGroup>
   </div>
 </template>
-
-<style lang="less" scoped>
-.custom-title {
-  margin-right: 4px;
-  vertical-align: middle;
-}
-</style>

src/views/mock/index.vue

@@ -27,24 +27,27 @@ const onClickLeft = () => history.back()
   <div class="h-full w-full">
     <VanNavBar title="💿 Mock 指南" left-arrow fixed @click-left="onClickLeft" />
 
-    <div class="h-full w-full px-30 py-74 light:bg-[#eff2f5]">
+    <Container>
       <div class="data-label">
         来自异步请求的数据
       </div>
+
       <div class="data-content dark:bg-[--van-background-2] light:bg-white">
         <div v-if="messages">
           {{ messages }}
         </div>
         <VanEmpty v-else description="暂无数据" />
       </div>
 
-      <VanButton round block type="primary" @click="pull">
-        请求
-      </VanButton>
-      <VanButton round block type="default" @click="reset">
-        清空
-      </VanButton>
-    </div>
+      <van-space class="m-10" direction="vertical" fill>
+        <VanButton type="primary" round block @click="pull">
+          请求
+        </VanButton>
+        <VanButton type="default" round block @click="reset">
+          清空
+        </VanButton>
+      </van-space>
+    </Container>
   </div>
 </template>
 
@@ -66,8 +69,4 @@ const onClickLeft = () => history.back()
   align-items: center;
   justify-content: center;
 }
-
-.van-button--block {
-  margin-top: 15px;
-}
 </style>