feat:

添加TestView
添加BlogPost
添加ButtonCounter
添加TestRouter

src/components/BlogPost.vue

@@ -0,0 +1,14 @@
+<script setup>
+const prop = defineProps(['id', 'title'])
+console.log(prop.id)
+console.log(prop.title)
+
+defineEmits(['enlarge-text'])
+</script>
+
+<template>
+  <div class="blog-post">
+    <h1>{{ id }} - {{ title }}</h1>
+    <button @click="$emit('enlarge-text')">Enlarge Text</button>
+  </div>
+</template>

src/components/ButtonCounter.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+const prop = defineProps(['title'])
+console.log(prop.title)
+
+</script>
+
+<template>
+    <h2>{{ title }}</h2>
+    <button @click="count++">
+        You clicked me {{ count }} times.
+    </button>
+</template>

src/components/CustomLogin.vue

@@ -5,6 +5,7 @@ import router from '@/router/index.js'
 import { setToken } from '@/utils/auth.js'
 
 const formState = reactive({
+  api: '',
   account: '',
   password: '',
   remember: false
@@ -47,14 +48,8 @@ const disabled = computed(() => {
 
 <template>
   <a-card class="login-container" :hoverable="true">
-    <a-form
+    <a-form :model="formState" name="login" class="login-form" autocomplete="off" @finish="onfinish"
-      :model="formState"
+      @finishFailed="onFinishFailed">
-      name="login"
-      class="login-form"
-      autocomplete="off"
-      @finish="onfinish"
-      @finishFailed="onFinishFailed"
-    >
       <a-form-item name="account" :rules="[{ required: true, message: '请输入账号' }]">
         <a-input v-model:value="formState.account" placeholder="请输入账号">
           <template #prefix>
@@ -77,8 +72,7 @@ const disabled = computed(() => {
       </a-form-item>
 
       <a-form-item style="width: 100%">
-        <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button"
+        <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">登录
-          >登录
         </a-button>
       </a-form-item>
     </a-form>

src/layouts/DefaultLayout.vue

@@ -25,6 +25,12 @@ const items = ref([
     icon: () => h(AppstoreOutlined),
     label: h('a', { href: '/tool' }, '工具'),
     title: '工具'
+  },
+  {
+    key: 'test',
+    icon: () => h(AppstoreOutlined),
+    label: h('a', { href: '/test' }, '测试'),
+    title: '测试'
   }
 ])
 
@@ -50,27 +56,15 @@ const logout = async () => {
 <template>
   <a-layout style="min-height: 100vh">
     <a-layout-header :style="{ background: '#fff', width: '100%' }">
-      <a-menu
+      <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" theme="light"
-        v-model:selectedKeys="current"
+        :style="{ justifyContent: 'center' }" />
-        mode="horizontal"
-        :items="items"
-        theme="light"
-        :style="{ justifyContent: 'center' }"
-      />
     </a-layout-header>
     <a-layout>
-      <a-layout-content
+      <a-layout-content theme="light"
-        theme="light"
+        :style="{ flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center' }">
-        :style="{ flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center' }"
-      >
         <RouterView />
       </a-layout-content>
-      <a-layout-sider
+      <a-layout-sider theme="light" :collapsible="true" :collapsed-width="0" :defaultCollapsed="true">
-        theme="light"
-        :collapsible="true"
-        :collapsed-width="0"
-        :defaultCollapsed="true"
-      >
         <CustomCard :name="'rsgl'" :style="{ margin: 'auto', padding: '10px' }" />
         <a-button @click="logout">退出登录</a-button>
       </a-layout-sider>

src/router/index.js

@@ -7,6 +7,7 @@ import LoginLayout from '@/layouts/LoginLayout.vue'
 import LoginView from '@/views/LoginView.vue'
 import HomeView from '@/views/HomeView.vue'
 import { getToken } from '@/utils/auth.js'
+import TestView from '@/views/TestView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -34,6 +35,11 @@ const router = createRouter({
           path: '/news',
           name: 'news',
           component: NewsView
+        },
+        {
+          path: '/test',
+          name: 'test',
+          component: TestView
         }
       ]
     },

src/views/TestView.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { ref } from 'vue'
+import ButtonCounter from '@/components/ButtonCounter.vue'
+import BlogPost from '@/components/BlogPost.vue'
+
+const posts = ref([
+  { id: 1, title: 'test01' },
+  { id: 2, title: 'test02' },
+  { id: 3, title: 'test03' }
+])
+
+const postFontSize = ref(1)
+</script>
+
+<template>
+  <h1>this is test page</h1>
+  <ButtonCounter title="test01" />
+
+  <div :style="{ fontSize: postFontSize + 'em' }">
+    <BlogPost
+      v-for="post of posts"
+      :key="post.id"
+      :id="post.id"
+      :title="post.title"
+      @enlarge-text="postFontSize += 0.1"
+    ></BlogPost>
+  </div>
+</template>
+
+<style scoped></style>