feat: update design theme

kieranwv · kieranwv · commit 4bb58b108c23 · 2024-11-06T15:58:46.000+08:00
diff --git a/index.html b/index.html
@@ -6,18 +6,38 @@
   <link rel="icon" href="/favicon.ico">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>%VITE_PUBLIC_TITLE%</title>
+  <style>
+    #app-loading {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background-color: #fafafa;
+      color: #020817;
+    }
+
+    #app-loading img {
+      margin-bottom: 2rem;
+    }
+
+    .dark #app-loading {
+      background-color: #020817;
+      color: #fff;
+    }
+  </style>
 </head>
 
 <body>
   <div id="app">
-    <div class="app-loading" align="center" style="position: fixed; transform: translateY(-50%); top: 50%; width: 100vw; height: 100%vh">
-      <img src="/logo.png" alt="Logo Image" width="80px">
-      <p style="margin:  20px;">
-        <b>A thousand mile trip begins with one step</b>
-      </p>
-      <p style="margin:  20px;">
-        <b>千里之行，始于足下</b>
-      </p>
+    <div id="app-loading">
+      <img src="/logo.png" alt="Logo Image" width="100px">
       <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
         <g>
           <circle cx="12" cy="2.5" r="1.5" fill="currentColor" opacity=".14" />
@@ -35,6 +55,10 @@
     </div>
   </div>
   <script type="module" src="/src/main.ts"></script>
+  <script>
+    var theme = localStorage.getItem('color-scheme');
+    document.documentElement.classList.toggle('dark', /dark/.test(theme))
+  </script>
 </body>
 
 </html>
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/logo.png b/public/logo.png
diff --git a/src/assets/not-found.svg b/src/assets/not-found.svg
diff --git a/src/components/TheButton.vue b/src/components/TheButton.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 defineProps<{
   loading?: boolean
+  disabled?: boolean
 }>()
 </script>
 
 <template>
-  <button text-sm px-4 py-1 rd-1.5 inline-block bg-primary text-hex-f0f0f0 dark:text-hex-020617 cursor-pointer hover:op-75 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50 border-none flex items-center py-2 v-bind="$attrs">
+  <button flex="~ items-center" :disabled text-sm px-4 py-2 rd-1.5 inline-block bg-hex-0d1828 text-hex-f8fafc cursor-pointer hover:op-75 disabled:cursor-default disabled:op-50 border-none v-bind="$attrs">
     <svg v-if="loading" mr-2 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
       <g>
         <circle cx="12" cy="2.5" r="1.5" fill="currentColor" opacity=".14" />
@@ -21,7 +22,6 @@ defineProps<{
         />
       </g>
     </svg>
-
     <slot />
   </button>
 </template>
diff --git a/src/components/TheCard.vue b/src/components/TheCard.vue
@@ -0,0 +1,5 @@
+<template>
+  <div transition-all hover:border-color-primary-color box-border w-full rounded-xl bg-transparent border-1 border-color-hex-849ab1 dark:border-color-hex-1e293b p-4 sm:p-6 md:p-8 lg:p-10>
+    <slot />
+  </div>
+</template>
diff --git a/src/composables/dark.ts b/src/composables/dark.ts
@@ -3,7 +3,9 @@
  *
  * @see https://vueuse.org/core/useDark/
  */
-export const isDark = useDark()
+export const isDark = useDark({
+  storageKey: `color-scheme`,
+})
 
 /**
  * Toggle dark mode
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -15,6 +15,11 @@ export const APP_VERSION = version
  */
 export const APP_STORAGE_KEY = `${APP_KEY}-v${APP_VERSION}`
 
+/**
+ * The url of the author.
+ */
+export const AUTHOR_URL = 'https://github.com/kieranwv'
+
 /**
  * The url of the GitHub repository.
  */
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <main w-screen h-screen>
+  <main>
     <RouterView />
   </main>
 </template>
diff --git a/src/layouts/page.vue b/src/layouts/page.vue
@@ -19,14 +19,14 @@ function openGithub() {
 </script>
 
 <template>
-  <main w-full h-full>
-    <header py-10 px-4 text-center>
-      <img v-if="headerLogo" alt="Logo Image" src="/logo.png" w-20 m-auto>
-      <p text-6 font-bold my-5>
+  <main px-4>
+    <header py-8 text-center>
+      <img v-if="headerLogo" mx-auto alt="Logo Image" src="/logo.png" w-20>
+      <h1>
         <span mr-2 font-800>{{ t('app.title') }}</span>
         <sup><i>v{{ APP_VERSION }}</i></sup>
-      </p>
-      <p flex flex-wrap gap-2 justify-center>
+      </h1>
+      <div flex="~ wrap gap-2 justify-center">
         <TheButton v-if="route.path === '/about'" @click="goPage('/')">
           {{ t('button.index-page') }}
         </TheButton>
@@ -45,15 +45,15 @@ function openGithub() {
         <TheButton @click="openGithub()">
           <i i="carbon-logo-github" />
         </TheButton>
-      </p>
+      </div>
     </header>
-    <main m-auto min-h-32 max-w-full px-4 sm:max-w-2xl>
+    <main m-auto min-h-32 max-w-full sm:max-w-2xl>
       <RouterView />
     </main>
-    <footer py-10 px-4 text-center>
-      <a :href="LICENSE_URL" target="_blank">MIT License</a> © {{ new Date().getFullYear() }} <a
-        href="https://github.com/kieranwv" target="_blank"
-      >Kieran Wang</a>
+    <footer flex="~ items-center justify-center gap-2" py-8>
+      <a :href="LICENSE_URL" target="_blank">MIT License</a>
+      <span> © {{ new Date().getFullYear() }} </span>
+      <a :href="AUTHOR_URL" target="_blank">Kieran Wang</a>
     </footer>
   </main>
 </template>
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -17,9 +17,9 @@
   },
   "button": {
     "back": "Back",
-    "index-page": "Index Page",
-    "about-page": "About Page",
-    "404-page": "404 Page",
+    "index-page": "Index",
+    "about-page": "About",
+    "404-page": "404",
     "show-logo": "Show Logo",
     "hide-logo": "Hide Logo",
     "toggle-logo-description": "Toggle the visibility of the logo",
diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -19,8 +19,8 @@
   "button": {
     "back": "返回",
     "index-page": "首页",
-    "about-page": "关于页面",
-    "404-page": "404 页面",
+    "about-page": "关于",
+    "404-page": "404",
     "show-logo": "显示 Logo",
     "hide-logo": "隐藏 Logo",
     "toggle-logo-description": "切换 Logo 的可见性",
diff --git a/src/pages/[...path].vue b/src/pages/[...path].vue
@@ -24,13 +24,13 @@ function goBack() {
 <template>
   <div w-full h-full flex="~ items-center justify-center col">
     <img w-80 src="@/assets/not-found.svg" alt="404 Image">
-    <p text-3xl mt-15 mb-5 font-bold color-dark>
+    <h1 text-3xl mt-15 mb-5 font-bold>
       {{ t('page.not-found.title') }}
-    </p>
-    <p mt-5 mb-15 color-gray-600>
+    </h1>
+    <p mt-5 mb-15>
       {{ t('page.not-found.content') }}
     </p>
-    <TheButton link type="info" size="large" @click="goBack">
+    <TheButton @click="goBack">
       <i i-carbon-return mr-2 />
       <span> {{ t('button.back') }}</span>
     </TheButton>
diff --git a/src/pages/about.vue b/src/pages/about.vue
@@ -14,12 +14,12 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div border-1 rd-1 border-color p-6>
-    <h1 text-center text-lg font-bold mb-5>
+  <TheCard>
+    <h2 text-center text-lg font-bold mb-5>
       {{ t('page.about.title') }}
-    </h1>
-    <p op-75 text-center>
+    </h2>
+    <p>
       {{ t('app.description') }}
     </p>
-  </div>
+  </TheCard>
 </template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -39,26 +39,26 @@ function fetchData() {
 </script>
 
 <template>
-  <div mb-6 border-1 rd-1 border-color p-6>
-    <TheButton mx-auto @click="toggleLogo">
+  <TheCard my-5>
+    <TheButton mx-auto mb-5 @click="toggleLogo">
       {{ headerLogo ? t('button.hide-logo') : t('button.show-logo') }}
     </TheButton>
-    <p op-75 my-5 text-center>
+    <p>
       {{ t('button.toggle-logo-description') }}
     </p>
-  </div>
-  <div border-1 rd-1 border-color p-6>
-    <TheButton mx-auto :loading @click="fetchData">
+  </TheCard>
+  <TheCard my-5>
+    <TheButton mx-auto mb-5 :loading @click="fetchData">
       {{ t('button.request') }}
     </TheButton>
-    <ul v-if="todoList && todoList.length > 0" my-5 h-30 overflow-y-auto>
-      <li v-for="item in todoList" :key="item.id" text-base lh-normal>
+    <ul v-if="todoList && todoList.length > 0" w-full my-5 h-30 overflow-y-auto>
+      <li v-for="item in todoList" :key="item.id">
         <input type="checkbox" accent-primary>
         {{ item.title }}
       </li>
     </ul>
-    <p v-if="todoList.length === 0" text-center my-5 op-75>
+    <p v-else>
       {{ emptyText || t('empty') }}
     </p>
-  </div>
+  </TheCard>
 </template>
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -1,3 +1,11 @@
+html.dark {
+  color-scheme: dark;
+}
+
+html:not(.dark) {
+  color-scheme: light;
+}
+
 html,
 body,
 #app {
@@ -6,36 +14,29 @@ body,
   padding: 0;
 }
 
-:root {
-  --primary-color: #09090b;
-}
-
-:root.dark {
-  --primary-color: #fafafa;
-}
-
-html.dark {
-  color-scheme: dark;
+body {
+  --at-apply: background-color text-color lh-normal;
 }
 
-html:not(.dark) {
-  color-scheme: light;
+a {
+  --at-apply: op-75 hover:op-100;
+  text-decoration: underline;
 }
 
-body {
-  --at-apply: background-color text-color;
+p {
+  --at-apply: lh-normal op-75 text-center;
 }
 
-a:hover {
-  --at-apply: op-75;
+h1 {
+  --at-apply: text-6 font-bold my-5;
 }
 
 #nprogress {
   pointer-events: none;
 }
 
 #nprogress .bar {
-  --at-apply: bg-primary;
+  background: linear-gradient(to right, #FF057C, #7C64D5, #4CC3FF);
   opacity: 0.75;
   position: fixed;
   z-index: 1031;
diff --git a/typings/auto-imports.d.ts b/typings/auto-imports.d.ts
@@ -9,6 +9,7 @@ declare global {
   const APP_KEY: typeof import('../src/constants/constants')['APP_KEY']
   const APP_STORAGE_KEY: typeof import('../src/constants/constants')['APP_STORAGE_KEY']
   const APP_VERSION: typeof import('../src/constants/constants')['APP_VERSION']
+  const AUTHOR_URL: typeof import('../src/constants/constants')['AUTHOR_URL']
   const ContentTypeEnum: typeof import('../src/constants/enums')['ContentTypeEnum']
   const EffectScope: typeof import('vue')['EffectScope']
   const GITHUB_URL: typeof import('../src/constants/constants')['GITHUB_URL']
@@ -337,6 +338,7 @@ declare module 'vue' {
     readonly APP_KEY: UnwrapRef<typeof import('../src/constants/constants')['APP_KEY']>
     readonly APP_STORAGE_KEY: UnwrapRef<typeof import('../src/constants/constants')['APP_STORAGE_KEY']>
     readonly APP_VERSION: UnwrapRef<typeof import('../src/constants/constants')['APP_VERSION']>
+    readonly AUTHOR_URL: UnwrapRef<typeof import('../src/constants/constants')['AUTHOR_URL']>
     readonly ContentTypeEnum: UnwrapRef<typeof import('../src/constants/enums')['ContentTypeEnum']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly GITHUB_URL: UnwrapRef<typeof import('../src/constants/constants')['GITHUB_URL']>
diff --git a/typings/components.d.ts b/typings/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TheButton: typeof import('./../src/components/TheButton.vue')['default']
+    TheCard: typeof import('./../src/components/TheCard.vue')['default']
     TheLoading: typeof import('./../src/components/TheLoading.vue')['default']
   }
 }
diff --git a/uno.config.ts b/uno.config.ts
@@ -12,14 +12,13 @@ import {
 export default defineConfig({
   theme: {
     colors: {
-      primary: 'var(--primary-color)',
+      primary: '#FF057C',
     },
   },
   shortcuts: [
     {
-      'background-color': 'bg-white  dark:bg-hex-09090b',
-      'text-color': 'text-hex-09090b dark:text-hex-fafafa',
-      'border-color': 'border-hex-e4e4e7 dark:border-hex-27272a',
+      'background-color': 'bg-white  dark:bg-hex-020817',
+      'text-color': 'text-hex-020817 dark:text-hex-fafafa',
     },
   ],
   presets: [
