From 23738a4987215a21ae3cdc474808a9f77785397c Mon Sep 17 00:00:00 2001
From: juetan <contact@juetan.cn>
Date: Sun, 9 Jul 2023 14:46:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/[..._all]/index.vue | 25 +++++++--
 src/pages/_login/index.vue    | 95 ++++++++++++++++++-----------------
 src/pages/demo/index.vue      |  4 +-
 src/pages/demo/test.vue       |  2 +-
 src/pages/user/index.vue      |  4 +-
 5 files changed, 75 insertions(+), 55 deletions(-)

diff --git a/src/pages/[..._all]/index.vue b/src/pages/[..._all]/index.vue
index ea4320b..e786e59 100644
--- a/src/pages/[..._all]/index.vue
+++ b/src/pages/[..._all]/index.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="w-full h-full flex justify-center items-center p-4">
-    <div class="flex flex-col items-center">
+    <div class="flex flex-col md:flex-row items-center">
       <div>
         <img src="@/assets/404.svg" alt="404" class="w-[320px]" />
       </div>
-      <div class="text-center">
-        <p class="mt-0">抱歉页面未找到，你访问的地址不存在!</p>
-        <div class="space-x-3 mt-5">
+      <div class="slide-in-bottom">
+        <h1 class="text-3xl font-bold my-0">404</h1>
+        <p class="mt-2">抱歉，您访问的地址不存在!</p>
+        <div class="space-x-3 mt-5 pb-4">
           <a-button type="primary" @click="router.back()">
             <template #icon>
               <i class="icon-park-outline-back"></i>
@@ -30,7 +31,21 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 </script>
 
-<style scoped></style>
+<style scoped>
+.slide-in-bottom {
+  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+@keyframes slide-in-bottom {
+  0% {
+    transform: translateY(100px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+</style>
 
 <route lang="json">
 {
diff --git a/src/pages/_login/index.vue b/src/pages/_login/index.vue
index 124d745..897f82f 100644
--- a/src/pages/_login/index.vue
+++ b/src/pages/_login/index.vue
@@ -1,51 +1,56 @@
 <template>
-  <div class="page-login w-full h-full flex items-center justify-center bg-white">
-    <div class="md:hidden fixed flex items-center justify-between top-0 m-0 h-13 w-full px-10 z-10">
-      <div class="flex items-center">
-        <img src="/favicon.ico" alt="" width="20" height="20" class="mr-1" />
-        <h1 class="text-lg m-0">
-          {{ appStore.title }}
-        </h1>
-      </div>
-      <div>敬请期待</div>
-    </div>
-    <div
-      class="login-box w-[920px] h-[560px] relative mx-8 grid md:grid-cols-2 rounded overflow-hidden border border-blue-100"
-    >
-      <div class="relative hidden md:block w-full h-full overflow-hidden bg-[#09f] px-4">
-        <img src="@/assets/td.svg" :alt="appStore.title" class="w-full h-full select-none" />
-      </div>
-      <div class="relative p-20 px-8 md:px-14 bg-white shadow-sm">
-        <div class="text-2xl">欢迎登陆</div>
-        <div class="text-base text-gray-500 mt-3">{{ meridiem }}好，欢迎登陆{{ appStore.title }}!</div>
-        <a-form ref="formRef" :model="model" :rules="formRules" layout="vertical" class="mt-8">
-          <a-form-item field="username" label="账号" hide-asterisk>
-            <a-input v-model="model.username" placeholder="请输入账号/手机号/邮箱" allow-clear>
-              <template #prefix>
-                <i class="icon-park-outline-user" />
-              </template>
-            </a-input>
-          </a-form-item>
-          <a-form-item field="password" label="密码" hide-asterisk>
-            <a-input-password v-model="model.password" placeholder="请输入密码" allow-clear>
-              <template #prefix>
-                <i class="icon-park-outline-lock" />
-              </template>
-            </a-input-password>
-          </a-form-item>
-          <a-space :size="16" direction="vertical">
-            <div class="flex items-center justify-between">
-              <a-checkbox checked="rememberPassword">记住我</a-checkbox>
-              <a-link @click="onForgetPasswordClick">忘记密码?</a-link>
-            </div>
-            <a-button type="primary" html-type="submit" long class="mt-2" :loading="loading" @click="onSubmitClick">
-              立即登录
-            </a-button>
-            <p type="text" long class="text-gray-400 text-center m-0">暂不支持其他方式登录</p>
-          </a-space>
-        </a-form>
+  <div class="page-login w-full h-full grid grid-rows-[auto_1fr_auto]">
+    <div class=" top-0 m-0 h-20 w-full px-10 z-10">
+      <div class="md:hidden flex items-center justify-between h-13">
+        <div class="flex items-center">
+          <img src="/favicon.ico" alt="" width="20" height="20" class="mr-1" />
+          <h1 class="text-lg m-0">
+            {{ appStore.title }}
+          </h1>
+        </div>
+        <div>v0.0.1</div>
       </div>
     </div>
+    <div class="flex items-center justify-center w-full overflow-hidden">
+      <div
+        class="login-box w-[920px] h-[560px] relative mx-8 grid md:grid-cols-2 rounded overflow-hidden border border-blue-100"
+      >
+        <div class="relative hidden md:block w-full h-full overflow-hidden bg-[#09f] px-4">
+          <img src="@/assets/td.svg" :alt="appStore.title" class="w-full h-full select-none" />
+        </div>
+        <div class="relative p-20 px-8 md:px-14 bg-white shadow-sm">
+          <div class="text-2xl">欢迎登陆</div>
+          <div class="text-base text-gray-500 mt-2">{{ meridiem }}好，欢迎登陆{{ appStore.title }}!</div>
+          <a-form ref="formRef" :model="model" :rules="formRules" layout="vertical" class="mt-8">
+            <a-form-item field="username" label="账号" hide-asterisk>
+              <a-input v-model="model.username" placeholder="请输入账号/手机号/邮箱" allow-clear>
+                <template #prefix>
+                  <i class="icon-park-outline-user" />
+                </template>
+              </a-input>
+            </a-form-item>
+            <a-form-item field="password" label="密码" hide-asterisk>
+              <a-input-password v-model="model.password" placeholder="请输入密码" allow-clear>
+                <template #prefix>
+                  <i class="icon-park-outline-lock" />
+                </template>
+              </a-input-password>
+            </a-form-item>
+            <a-space :size="16" direction="vertical">
+              <div class="flex items-center justify-between">
+                <a-checkbox checked="rememberPassword">记住我</a-checkbox>
+                <a-link @click="onForgetPasswordClick">忘记密码?</a-link>
+              </div>
+              <a-button type="primary" html-type="submit" long class="mt-2" :loading="loading" @click="onSubmitClick">
+                立即登录
+              </a-button>
+              <p type="text" long class="text-gray-400 text-center m-0">暂不支持其他方式登录</p>
+            </a-space>
+          </a-form>
+        </div>
+      </div>
+    </div>
+    <div class="text-slate-500 py-8 text-center h-20">Copyright &copy; {{ appStore.title }}, 版权所有</div>
   </div>
 </template>
 
diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
index 4b43f93..a744a4f 100644
--- a/src/pages/demo/index.vue
+++ b/src/pages/demo/index.vue
@@ -10,12 +10,12 @@
 {
   "meta": {
     "sort": 10201,
-    "title": "测试页面1",
+    "title": "表格组件",
     "icon": "icon-park-outline-add-subtract"
   },
   "parentMeta": {
     "sort": 10201,
-    "title": "测试分类",
+    "title": "内置组件",
     "icon": "icon-park-outline-add-subtract"
   }
 }
diff --git a/src/pages/demo/test.vue b/src/pages/demo/test.vue
index 78a2150..037306b 100644
--- a/src/pages/demo/test.vue
+++ b/src/pages/demo/test.vue
@@ -10,7 +10,7 @@
 {
   "meta": {
     "sort": 10202,
-    "title": "测试页面2",
+    "title": "表单组件",
     "icon": "icon-park-outline-aperture-priority"
   }
 }
diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue
index 28d2620..058ad5d 100644
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -6,10 +6,10 @@
 
 <script setup lang="tsx">
 import { ContentType, api } from "@/api";
-import { useTable } from "@/components";
+import { Table, useTable } from "@/components";
 
 const table = useTable({
-  data: async (model, paging) => [],
+  data: async (model, paging) => ({ data: [{}], meta: { total: 0 } }),
   columns: [
     {
       title: "姓名",