feat: add loading for request

locales/en.json

@@ -1,7 +1,7 @@
 {
   "app": {
     "title": "Opuntia",
-    "description": "Vite + Vue 3 starter template."
+    "description": "Vite + Vue 3 SPA starter template, it's fast."
   },
   "page": {
     "home": {

locales/zh.json

@@ -1,7 +1,7 @@
 {
   "app": {
     "title": "Opuntia",
-    "description": "Vite + Vue 3 启动模板。"
+    "description": "Vite + Vue 3 单页面应用启动模板，它很快。"
   },
   "page": {
     "home": {

src/pages/index.vue

@@ -17,9 +17,20 @@ const { t } = useI18n()
 
 const todoList = ref<TodoList>([])
 
+const emptyText = ref(t('empty'))
+
+const loading = ref(false)
+
 function fetchData() {
+  if (loading.value)
+    return
+  loading.value = true
   getTodoListApi().then((res) => {
     todoList.value = res.data
+  }).catch((err) => {
+    emptyText.value = err.message
+  }).finally(() => {
+    loading.value = false
   })
 }
 </script>
@@ -29,16 +40,18 @@ function fetchData() {
     {{ route.meta.title }}
   </h1>
   <div flex justify-center items-center my-5>
-    <TheButton lh-2 @click="fetchData">
+    <TheButton lh-4 @click="fetchData">
+      <img v-show="loading" mr-2 src="@/assets/loading.svg">
       {{ t('page.home.get-todo-list') }}
     </TheButton>
   </div>
-  <ul v-for="item in todoList" :key="item.id" my-5 h-xl overflow-y-auto>
-    <li>
+  <ul v-if="todoList.length > 0" my-5 h-50 overflow-y-auto>
+    <li v-for="item in todoList" :key="item.id" text-base lh-normal>
+      <input type="checkbox" accent-primary>
       {{ item.title }}
     </li>
   </ul>
   <p v-if="todoList.length === 0" my-5 text-center op-75>
-    {{ t('empty') }}
+    {{ emptyText }}
   </p>
 </template>

src/styles/main.css

@@ -7,26 +7,24 @@ body,
 }
 
 html {
-  background: theme('light-color');
-  color: theme('dark-color');
+  --at-apply: bg-neutral-100 text-neutral-900;
 }
 
 html.dark {
   color-scheme: dark;
-  background: theme('dark-color');
-  color: theme('light-color');
+  --at-apply: bg-neutral-900 text-neutral-200;
 }
 
 a {
-  color: theme('primary-color');
+  --at-apply: color-primary;
 }
 
 #nprogress {
   pointer-events: none;
 }
 
 #nprogress .bar {
-  background: theme('primary-color');
+  --at-apply: bg-primary;
   opacity: 0.75;
   position: fixed;
   z-index: 1031;

uno.config.ts

@@ -11,9 +11,9 @@ import {
 
 export default defineConfig({
   theme: {
-    'light-color': '#f2f1ec',
-    'dark-color': '#171717',
-    'primary-color': '#15803d',
+    colors: {
+      primary: '#15803d',
+    },
   },
   shortcuts: [],
   presets: [