From 2cc365f2ccfc5f54db8c0b132e0b137e5c199de7 Mon Sep 17 00:00:00 2001
From: LingandRX <rsgltzyd@hotmail.com>
Date: Sun, 3 Nov 2024 23:08:31 +0800
Subject: [PATCH 1/2] change HomeView.vue add LoginView.vue add db.json change
 App.vue

---
 db.json                          |  10 +++
 package.json                     |   2 +-
 src/App.vue                      |  66 ++++++++++-------
 src/components/CustomCard.vue    |  47 +++++-------
 src/components/images/avatar.jpg | Bin 45108 -> 8653 bytes
 src/router/index.js              |  49 ++++++++----
 src/views/HomeView.vue           |  96 +++++++++++-------------
 src/views/LoginView.vue          | 123 +++++++++++++++++++++++++++++++
 8 files changed, 271 insertions(+), 122 deletions(-)
 create mode 100644 db.json
 create mode 100644 src/views/LoginView.vue

diff --git a/db.json b/db.json
new file mode 100644
index 0000000..c2335a6
--- /dev/null
+++ b/db.json
@@ -0,0 +1,10 @@
+{
+  "users": [
+    {
+      "id": 1,
+      "username": "test",
+      "password": "test",
+      "token": "123456"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 7432159..e21a6d7 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "prettier": "^3.2.5",
-    "vite": "^5.3.1",
+    "vite": "5.4.6",
     "vite-plugin-vue-devtools": "^7.3.1"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 36a65c2..629d785 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,5 @@
-<script setup lang="js">
-import { RouterView } from 'vue-router'
-import { h, ref } from 'vue'
-import { AppstoreOutlined, MailOutlined } from '@ant-design/icons-vue'
-import CustomCard from '@/components/CustomCard.vue'
-
-const current = ref(['mail'])
-const items = ref([
-  {
-    key: 'home',
-    icon: () => h(MailOutlined),
-    label: h('a', { href: '/' }, '首页'),
-    title: '首页'
-  },
-  {
-    key: 'about',
-    icon: () => h(AppstoreOutlined),
-    label: h('a', { href: '/about' }, '关于'),
-    title: '关于'
-  }
-])
-</script>
-import CustomCard from '@/components/CustomCard.vue'
 <template>
-  <header>
+  <header v-if="isLogin">
     <div class="wrapper">
       <nav>
         <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
@@ -35,17 +12,54 @@ import CustomCard from '@/components/CustomCard.vue'
       <RouterView />
     </article>
     <aside>
-      <CustomCard :style="{margin: 'auto', padding: '10px'}" />
+      <CustomCard :style="{ margin: 'auto' }" />
     </aside>
   </main>
 </template>
 
+<script setup lang="js">
+import { RouterView } from 'vue-router'
+import { h, ref, onMounted } from 'vue'
+import { AppstoreOutlined } from '@ant-design/icons-vue'
+import CustomCard from '@/components/CustomCard.vue'
+
+const isLogin = ref(false)
+
+const current = ref(['mail'])
+const items = ref([
+  {
+    key: 'home',
+    icon: () => h(AppstoreOutlined),
+    label: h('a', { href: '/' }, '首页'),
+    title: '首页'
+  },
+  {
+    key: 'about',
+    icon: () => h(AppstoreOutlined),
+    label: h('a', { href: '/about' }, '关于'),
+    title: '关于'
+  }
+])
+onMounted(() => {
+  isLogin.value = !!localStorage.getItem('token')
+})
+</script>
+
 <style scoped>
 article {
   flex: 5;
+  border: 2px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 aside {
   flex: 2;
+  display: flex;
+  border: 2px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/CustomCard.vue b/src/components/CustomCard.vue
index 5c387f5..e2dc5eb 100644
--- a/src/components/CustomCard.vue
+++ b/src/components/CustomCard.vue
@@ -4,16 +4,15 @@ import { CustomCard } from '@/components/CustomCard.js'
 
 const customCard = ref(new CustomCard())
 </script>
+
 <template>
   <div class="card">
     <div class="avatar">
-      <img :src="customCard.avatar" alt="avatar" height="100px" width="100px" />
+      <img :src="customCard.avatar" alt="avatar" />
     </div>
-
     <div class="name">
       <h2>{{ customCard.name }}</h2>
     </div>
-
     <div class="content">
       <p>{{ customCard.content }}</p>
     </div>
@@ -24,35 +23,29 @@ const customCard = ref(new CustomCard())
 .card {
   display: flex;
   flex-direction: column;
-  text-align: center;
+  justify-content: center;
   align-items: center;
+  text-align: center;
+  height: 100%;
+  width: 100%;
   box-sizing: border-box;
-
-  .avatar {
-    width: 50%;
-    img {
-      border-radius: 50%;
-    }
-  }
-
-  .name {
-    width: 50%;
-  }
-
-  .content {
-    width: 100%;
-  }
 }
 
-@media screen and (max-width: 800px) {
-  .card {
-    width: 160px;
-  }
+.avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
 }
 
-@media screen and (min-width: 800px) {
-  .card {
-    width: 200px;
-  }
+.avatar img {
+  border-radius: 50%;
+}
+
+.name,
+.content {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>
diff --git a/src/components/images/avatar.jpg b/src/components/images/avatar.jpg
index db498130e8bb4b94f9b7c69776188b323af58bd7..806ed2e4a3a7fc0e038a0a123ae299ead90f9beb 100644
GIT binary patch
delta 8141
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
XH9Qaxq()}^z7=+S9_AY6V$S>@zCPYW

literal 45108
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

diff --git a/src/router/index.js b/src/router/index.js
index a49ae50..6bac95c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,23 +1,42 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import('../views/AboutView.vue')
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('../views/LoginView.vue'),
+    meta: {
+      requiresAuth: false
+    }
+  }
+]
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: HomeView
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
-    }
-  ]
+  routes: routes
+})
+
+router.beforeEach((to, from, next) => {
+  console.log('beforeEach', to, from)
+  const token = localStorage.getItem('token')
+  if (to.matched.some((record) => record.meta.requiresAuth === false)) {
+    next()
+  } else if (!token) {
+    next({ name: 'login' })
+  } else {
+    next()
+  }
 })
 
 export default router
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 482f230..ca74252 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,68 +3,58 @@ const cardStyle = {
   width: '200px'
 }
 
-const moduleList_1 = [
-  {
-    title: 'Gitea',
-    url: 'http://10.120.20.137:3000/'
-  },
-  {
-    title: 'Pve',
-    url: 'https://10.120.20.15:8006/'
+class Module {
+  /**
+   * 模块
+   * @param {string} title
+   * @param {string} url
+   */
+  constructor(title, url) {
+    this.title = title
+    this.url = url
   }
-]
+}
 
-const moduleList_2 = [
-  {
-    title: 'zero tier',
-    url: 'https://zerotier.yulinling.asia/'
-  },
-  {
-    title: 'gitea',
-    url: 'https://gitea.yulinling.asia/'
+class ManagerModule {
+  /**
+   * 模块管理
+   * @param {string} name
+   * @param {Module[]} moduleList
+   */
+  constructor(name, moduleList) {
+    this.name = name
+    this.moduleList = moduleList
   }
+}
+
+const manageModuleList = [
+  new ManagerModule('Zero tier', [
+    new Module('Pve', 'https://10.18.80.15:8006/'),
+    new Module('fnOS', 'http://10.18.80.124:8000/')
+  ]),
+  new ManagerModule('云服务器', [
+    new Module('zero tier', 'https://zerotier.yulinling.asia/'),
+    new Module('gitea', 'https://gitea.yulinling.asia/')
+  ])
 ]
 </script>
 
 <template>
-  <div>
-    <h2>Zero tier</h2>
+  <div v-for="(item, itemIndex) in manageModuleList" :key="itemIndex">
+    <h2>{{ item.name }}</h2>
     <ul>
-      <a-card
-        v-for="(item, index) in moduleList_1"
-        :key="index"
-        :style="cardStyle"
-        :body-style="{ padding: 0, overflow: 'hidden' }"
-      >
-        <a-flex justify="space-between">
-          <a-flex vertical align="flex-end" justify="space-between" :style="{ padding: '32px' }">
-            <a-typography>
-              <a-typography-title :level="3"> “{{ item.title }}”</a-typography-title>
-            </a-typography>
-            <a-button type="primary" :href="item.url" target="_blank">Get Start</a-button>
+      <div v-for="(module, index) in item.moduleList" :key="index">
+        <a-card :style="cardStyle">
+          <a-flex justify="space-between">
+            <a-flex vertical align="flex-end" justify="space-between" :style="{ padding: '32px' }">
+              <a-typography>
+                <a-typography-title :level="3"> “{{ module.title }}”</a-typography-title>
+              </a-typography>
+              <a-button type="primary" :href="module.url" target="_blank">Get Start</a-button>
+            </a-flex>
           </a-flex>
-        </a-flex>
-      </a-card>
-    </ul>
-  </div>
-  <div>
-    <h2>aliyun</h2>
-    <ul>
-      <a-card
-        v-for="(item, index) in moduleList_2"
-        :key="index"
-        :style="cardStyle"
-        :body-style="{ padding: 0, overflow: 'hidden' }"
-      >
-        <a-flex justify="space-between">
-          <a-flex vertical align="flex-end" justify="space-between" :style="{ padding: '32px' }">
-            <a-typography>
-              <a-typography-title :level="3"> “{{ item.title }}”</a-typography-title>
-            </a-typography>
-            <a-button type="primary" :href="item.url" target="_blank">Get Start</a-button>
-          </a-flex>
-        </a-flex>
-      </a-card>
+        </a-card>
+      </div>
     </ul>
   </div>
 </template>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
new file mode 100644
index 0000000..fce119c
--- /dev/null
+++ b/src/views/LoginView.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="login-container">
+    <div v-if="!isLogin">
+      <a-form
+        :model="formState"
+        name="basic"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+        autocomplete="off"
+        @finish="onFinish"
+        @finishFailed="onFinishFailed"
+      >
+        <a-form-item
+          label="Username"
+          name="username"
+          :rules="[{ required: true, message: 'Please input your username!' }]"
+        >
+          <a-input v-model:value="formState.username">
+            <template #prefix>
+              <UserOutlined class="site-form-item-icon" />
+            </template>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item
+          label="Password"
+          name="password"
+          :rules="[{ required: true, message: 'Please input your password!' }]"
+        >
+          <a-input-password v-model:value="formState.password">
+            <template #prefix>
+              <LockOutlined class="site-form-item-icon" />
+            </template>
+          </a-input-password>
+        </a-form-item>
+
+        <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
+          <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
+        </a-form-item>
+
+        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+          <a-button type="primary" html-type="submit">Submit</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+    <div v-else>
+      <p>Welcome, you are logged in!</p>
+    </div>
+  </div>
+</template>
+<script setup>
+import { reactive, ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
+
+const formState = reactive({
+  username: '',
+  password: '',
+  remember: true
+})
+const labelCol = {
+  style: {
+    width: '200px'
+  }
+}
+const wrapperCol = {
+  span: 12
+}
+
+const isLogin = ref(false)
+const router = useRouter()
+
+onMounted(() => {
+  isLogin.value = !!localStorage.getItem('token')
+})
+
+const removeLoginRoute = () => {
+  const loginRoute = router.getRoutes().find((route) => route.name === 'login')
+  console.log('loginRoute:', loginRoute)
+  if (loginRoute) {
+    console.log(loginRoute.name)
+    router.removeRoute(loginRoute.name)
+  }
+}
+
+const onFinish = async (values) => {
+  try {
+    const response = await fetch('http://localhost:3000/users', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    const users = await response.json()
+    const user = users.find(
+      (user) => user.username === values.username && user.password === values.password
+    )
+    if (user && user.token) {
+      localStorage.setItem('token', user.token)
+      isLogin.value = true
+      removeLoginRoute()
+      await router.push('/')
+    } else {
+      alert('Invalid username or password')
+    }
+  } catch (error) {
+    console.error('Error:', error)
+  }
+}
+
+const onFinishFailed = (errorInfo) => {
+  console.log('Failed:', errorInfo)
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+</style>

From 1e7c921ae2fbbe1bf84d72664bbd3956ee70c755 Mon Sep 17 00:00:00 2001
From: LingandRX <rsgltzyd@hotmail.com>
Date: Sun, 17 Nov 2024 22:22:10 +0800
Subject: [PATCH 2/2] fix login

---
 src/App.vue             | 17 +++++---
 src/router/index.js     | 15 +++----
 src/views/LoginView.vue | 91 ++++++++++++++++++-----------------------
 3 files changed, 59 insertions(+), 64 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 629d785..2fd2cb7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script setup lang="js">
-import { RouterView } from 'vue-router'
-import { h, ref, onMounted } from 'vue'
+import { RouterView, useRoute } from 'vue-router'
+import { h, ref, onMounted, watch } from 'vue'
 import { AppstoreOutlined } from '@ant-design/icons-vue'
 import CustomCard from '@/components/CustomCard.vue'
 
-const isLogin = ref(false)
+const isLogin = ref(true)
 
 const current = ref(['mail'])
 const items = ref([
@@ -40,9 +40,16 @@ const items = ref([
     title: '关于'
   }
 ])
-onMounted(() => {
+
+const route = useRoute()
+
+const updateLoginStatus = () => {
   isLogin.value = !!localStorage.getItem('token')
-})
+  console.log('isLogin.value:', isLogin.value)
+}
+
+onMounted(updateLoginStatus)
+watch(route, updateLoginStatus)
 </script>
 
 <style scoped>
diff --git a/src/router/index.js b/src/router/index.js
index 6bac95c..98c808f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,7 +17,7 @@ const routes = [
     name: 'login',
     component: () => import('../views/LoginView.vue'),
     meta: {
-      requiresAuth: false
+      requiresAuth: true
     }
   }
 ]
@@ -28,12 +28,13 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  console.log('beforeEach', to, from)
-  const token = localStorage.getItem('token')
-  if (to.matched.some((record) => record.meta.requiresAuth === false)) {
-    next()
-  } else if (!token) {
-    next({ name: 'login' })
+  const isLogin = !!localStorage.getItem('token')
+  const requiresAuth = to.matched.some((record) => !!record.meta['requiresAuth'])
+
+  console.log('isLogin', isLogin)
+  console.log('requiresAuth', requiresAuth)
+  if (!requiresAuth && !isLogin) {
+    next('/login')
   } else {
     next()
   }
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index fce119c..cc121ed 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,51 +1,46 @@
 <template>
   <div class="login-container">
-    <div v-if="!isLogin">
-      <a-form
-        :model="formState"
-        name="basic"
-        :label-col="labelCol"
-        :wrapper-col="wrapperCol"
-        autocomplete="off"
-        @finish="onFinish"
-        @finishFailed="onFinishFailed"
+    <a-form
+      :label-col="labelCol"
+      :model="formState"
+      :wrapper-col="wrapperCol"
+      autocomplete="off"
+      name="basic"
+      @finish="onFinish"
+      @finishFailed="onFinishFailed"
+    >
+      <a-form-item
+        :rules="[{ required: true, message: 'Please input your username!' }]"
+        label="Username"
+        name="username"
       >
-        <a-form-item
-          label="Username"
-          name="username"
-          :rules="[{ required: true, message: 'Please input your username!' }]"
-        >
-          <a-input v-model:value="formState.username">
-            <template #prefix>
-              <UserOutlined class="site-form-item-icon" />
-            </template>
-          </a-input>
-        </a-form-item>
+        <a-input v-model:value="formState.username">
+          <template #prefix>
+            <UserOutlined class="site-form-item-icon" />
+          </template>
+        </a-input>
+      </a-form-item>
 
-        <a-form-item
-          label="Password"
-          name="password"
-          :rules="[{ required: true, message: 'Please input your password!' }]"
-        >
-          <a-input-password v-model:value="formState.password">
-            <template #prefix>
-              <LockOutlined class="site-form-item-icon" />
-            </template>
-          </a-input-password>
-        </a-form-item>
+      <a-form-item
+        :rules="[{ required: true, message: 'Please input your password!' }]"
+        label="Password"
+        name="password"
+      >
+        <a-input-password v-model:value="formState.password">
+          <template #prefix>
+            <LockOutlined class="site-form-item-icon" />
+          </template>
+        </a-input-password>
+      </a-form-item>
 
-        <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
-          <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
-        </a-form-item>
+      <a-form-item :wrapper-col="{ offset: 8, span: 16 }" name="remember">
+        <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
+      </a-form-item>
 
-        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
-          <a-button type="primary" html-type="submit">Submit</a-button>
-        </a-form-item>
-      </a-form>
-    </div>
-    <div v-else>
-      <p>Welcome, you are logged in!</p>
-    </div>
+      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+        <a-button html-type="submit" type="primary">Submit</a-button>
+      </a-form-item>
+    </a-form>
   </div>
 </template>
 <script setup>
@@ -74,15 +69,6 @@ onMounted(() => {
   isLogin.value = !!localStorage.getItem('token')
 })
 
-const removeLoginRoute = () => {
-  const loginRoute = router.getRoutes().find((route) => route.name === 'login')
-  console.log('loginRoute:', loginRoute)
-  if (loginRoute) {
-    console.log(loginRoute.name)
-    router.removeRoute(loginRoute.name)
-  }
-}
-
 const onFinish = async (values) => {
   try {
     const response = await fetch('http://localhost:3000/users', {
@@ -95,10 +81,11 @@ const onFinish = async (values) => {
     const user = users.find(
       (user) => user.username === values.username && user.password === values.password
     )
+
+    // const user = { username: 'test', password: 'test', token: 'test' }
     if (user && user.token) {
       localStorage.setItem('token', user.token)
       isLogin.value = true
-      removeLoginRoute()
       await router.push('/')
     } else {
       alert('Invalid username or password')