Changes view

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
     "ant-design-vue": "^4.2.5",
+    "js-cookie": "^3.0.5",
     "pinia": "^2.1.7",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"

src/App.vue

@@ -1,3 +1,36 @@
+<style scoped></style>
+
+<template>
+  <a-layout style="min-height: 100vh">
+    <a-layout-header :style="{ background: '#fff', width: '100%' }">
+      <a-menu
+        v-model:selectedKeys="current"
+        mode="horizontal"
+        :items="items"
+        theme="light"
+        :style="{ justifyContent: 'center' }"
+      />
+    </a-layout-header>
+    <a-layout>
+      <a-layout-content
+        theme="light"
+        :style="{ flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center' }"
+      >
+        <RouterView />
+      </a-layout-content>
+      <a-layout-sider
+        theme="light"
+        :collapsible="true"
+        :collapsed-width="0"
+        :defaultCollapsed="true"
+      >
+        <CustomCard :name="'rsgl'" :style="{ margin: 'auto', padding: '10px' }" />
+      </a-layout-sider>
+    </a-layout>
+    <a-layout-footer> jjjj</a-layout-footer>
+  </a-layout>
+</template>
+
 <script setup lang="js">
 import { RouterView } from 'vue-router'
 import { h, ref } from 'vue'
@@ -17,35 +50,18 @@ const items = ref([
     icon: () => h(AppstoreOutlined),
     label: h('a', { href: '/about' }, '关于'),
     title: '关于'
+  },
+  {
+    key: 'tool',
+    icon: () => h(AppstoreOutlined),
+    label: h('a', { href: '/tool' }, '工具'),
+    title: '工具'
+  },
+  {
+    key: 'login',
+    icon: () => h(AppstoreOutlined),
+    label: h('a', { href: '/login' }, '登录'),
+    title: '登录'
   }
 ])
 </script>
-import CustomCard from '@/components/CustomCard.vue'
-<template>
-  <header>
-    <div class="wrapper">
-      <nav>
-        <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
-      </nav>
-    </div>
-  </header>
-
-  <main>
-    <article>
-      <RouterView />
-    </article>
-    <aside>
-      <CustomCard :style="{margin: 'auto', padding: '10px'}" />
-    </aside>
-  </main>
-</template>
-
-<style scoped>
-article {
-  flex: 5;
-}
-
-aside {
-  flex: 2;
-}
-</style>

src/components/CustomCard.js

@@ -1,7 +0,0 @@
-export class CustomCard {
-  constructor(avatar = 'src/components/images/avatar.jpg', name = '雨霖铃', content = '人生孤旅,天真以渡') {
-    this.avatar = avatar
-    this.name = name
-    this.content = content
-  }
-}

src/components/CustomCard.vue

@@ -1,23 +1,31 @@
 <script setup lang="js">
-import { ref } from 'vue'
-import { CustomCard } from '@/components/CustomCard.js'
-
-const customCard = ref(new CustomCard())
+defineProps({
+  avatar: {
+    type: String,
+    default: 'src/components/images/avatar.jpg'
+  },
+  name: {
+    type: String,
+    default: '雨霖铃'
+  },
+  content: {
+    type: String,
+    default: '人生孤旅,天真以渡'
+  }
+})
 </script>
+
 <template>
-  <div class="card">
-    <div class="avatar">
-      <img :src="customCard.avatar" alt="avatar" height="100px" width="100px" />
-    </div>
-
-    <div class="name">
-      <h2>{{ customCard.name }}</h2>
-    </div>
-
-    <div class="content">
-      <p>{{ customCard.content }}</p>
-    </div>
-  </div>
+  <a-card hoverable style="width: 100%">
+    <template #cover>
+      <img :src="avatar" alt="avatar" />
+    </template>
+    <a-card-meta :title="name" :description="content">
+      <template #avatar>
+        <a-avatar :src="avatar" />
+      </template>
+    </a-card-meta>
+  </a-card>
 </template>
 
 <style scoped>

src/components/CustomNews.vue

@@ -0,0 +1,82 @@
+<template>
+  <a-list
+    class="demo-loadmore-list"
+    :loading="initLoading"
+    item-layout="horizontal"
+    :data-source="list"
+    :style="{ width: '70%' }"
+  >
+    <template #loadMore>
+      <div
+        v-if="!initLoading && !loading"
+        :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
+      >
+        <a-button @click="onLoadMore">loading more</a-button>
+      </div>
+    </template>
+    <template #renderItem="{ item }">
+      <a-list-item>
+        <a-skeleton avatar :title="false" :loading="!!item.loading" active>
+          <a-list-item-meta
+            description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+          >
+            <template #title>
+              <a href="https://www.antdv.com/">{{ item.name.last }}</a>
+            </template>
+          </a-list-item-meta>
+        </a-skeleton>
+      </a-list-item>
+    </template>
+  </a-list>
+</template>
+
+<script setup>
+import { onMounted, ref, nextTick } from 'vue'
+
+const count = 3
+const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`
+const initLoading = ref(true)
+const loading = ref(false)
+const data = ref([])
+const list = ref([])
+
+onMounted(() => {
+  fetch(fakeDataUrl)
+    .then((res) => res.json())
+    .then((res) => {
+      initLoading.value = false
+      data.value = res.results
+      list.value = res.results
+    })
+})
+
+const onLoadMore = () => {
+  loading.value = true
+  list.value = data.value.concat(
+    [...new Array(count)].map(() => ({
+      loading: true,
+      name: {},
+      picture: {}
+    }))
+  )
+  fetch(fakeDataUrl)
+    .then((res) => res.json())
+    .then((res) => {
+      const newData = data.value.concat(res.results)
+      loading.value = false
+      data.value = newData
+      list.value = newData
+      nextTick(() => {
+        // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
+        // In real scene, you can using public method of react-virtualized:
+        // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
+        window.dispatchEvent(new Event('resize'))
+      })
+    })
+}
+</script>
+<style scoped>
+.demo-loadmore-list {
+  min-height: 350px;
+}
+</style>

src/components/CustomTimestamp.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { watch, ref } from 'vue'
+import { dateTimeToTimestamp, formatDate, timestampToDateTime } from '@/utils/time.js'
+
+const inputTimestamp = ref('')
+const outputDatetime = ref('')
+const timestampSelect = ref('ms')
+
+const inputDatetime = ref('')
+const outputTimestamp = ref('')
+const datetimeSelect = ref('ms')
+
+watch(inputTimestamp, async () => {
+  outputDatetime.value = formatDate(
+    timestampToDateTime(timestampSelect.value, Number(inputTimestamp.value))
+  )
+})
+
+function changeTimestamp() {
+  outputDatetime.value = formatDate(
+    timestampToDateTime(timestampSelect.value, Number(inputTimestamp.value))
+  )
+}
+
+function changeDateTime() {
+  outputTimestamp.value = dateTimeToTimestamp(timestampSelect.value, inputDatetime.value)
+}
+</script>
+
+<template>
+  <a-space direction="horizontal" justify="center" class="time">
+    <a-input v-model:value.lazy="inputTimestamp" placeholder="输入时间戳" />
+    <a-select v-model:value="timestampSelect" style="width: 100px">
+      <a-select-option value="ms">ms/毫秒</a-select-option>
+      <a-select-option value="s">s/秒</a-select-option>
+    </a-select>
+    <a-button @click="changeTimestamp">转换</a-button>
+    <a-input v-model:value="outputDatetime" placeholder="输出结果" />
+  </a-space>
+  <a-space direction="horizontal" justify="center" class="time">
+    <a-input v-model:value.lazy="inputDatetime" placeholder="输入时间日期" />
+    <a-button @click="changeDateTime">转换</a-button>
+    <a-select v-model:value="datetimeSelect" style="width: 100px">
+      <a-select-option value="ms">ms/毫秒</a-select-option>
+      <a-select-option value="s">s/秒</a-select-option>
+    </a-select>
+    <a-input v-model:value="outputTimestamp" placeholder="输出结果" />
+  </a-space>
+</template>
+
+<style scoped>
+.time {
+  margin: 10px 0;
+}
+</style>

src/router/index.js

@@ -1,5 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomeView from '@/views/HomeView.vue'
+import AboutView from '@/views/AboutView.vue'
+import ToolView from '@/views/ToolView.vue'
+import LoginView from '@/views/LoginView.vue'
+import NewsView from '@/views/NewsView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,10 +16,22 @@ const router = createRouter({
     {
       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')
+      component: AboutView
+    },
+    {
+      path: '/tool',
+      name: 'tool',
+      component: ToolView
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: LoginView
+    },
+    {
+      path: '/news',
+      name: 'news',
+      component: NewsView
     }
   ]
 })

src/utils/time.js

@@ -0,0 +1,54 @@
+function timestampToDateTime(pattern, timestamp) {
+  if (pattern === 's') {
+    return new Date(timestamp * 1000)
+  } else if (pattern === 'ms') {
+    console.log(typeof timestamp)
+    console.log(timestamp)
+    return new Date(timestamp)
+  }
+  
+  return NaN
+}
+
+function dateTimeToTimestamp(pattern, datetime) {
+  const timestamp = new Date(datetime).getTime()
+  if (pattern === 's') {
+    return Math.floor(timestamp / 1000).toString()
+  } else if (pattern === 'ms') {
+    return timestamp.toString()
+  }
+  return NaN.toString()
+}
+
+Date.prototype.Format = function (fmt) {
+  var o = {
+    'M+': this.getMonth() + 1, //月份
+    'd+': this.getDate(), //日
+    'h+': this.getHours(), //小时
+    'm+': this.getMinutes(), //分
+    's+': this.getSeconds(), //秒
+    'q+': Math.floor((this.getMonth() + 3) / 3), //季度
+    S: this.getMilliseconds() //毫秒
+  }
+  if (/(y+)/.test(fmt))
+    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
+  for (var k in o)
+    if (new RegExp('(' + k + ')').test(fmt))
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
+      )
+  return fmt
+}
+
+function formatDate(date) {
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hour = date.getHours()
+  const minute = date.getMinutes()
+  const second = date.getSeconds()
+  return `${year}-${month}-${day}-${hour}:${minute}:${second}`
+}
+
+export { timestampToDateTime, dateTimeToTimestamp, formatDate }

src/views/AboutView.vue

@@ -1,7 +1,15 @@
+<script setup lang="js">
+import { useRouter } from 'vue-router'
+import CustomNews from '@/components/CustomNews.vue'
+
+const router = useRouter()
+</script>
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <a-button @click="() => router.push('/news')">Goto News</a-button>
   </div>
+  <CustomNews />
 </template>
 
 <style>

src/views/GameView.vue

@@ -0,0 +1,9 @@
+<script setup></script>
+
+<template>
+  <a-card>
+    <a-card-meta :title="'GameView'" :description="'GameView'"> </a-card-meta>
+  </a-card>
+</template>
+
+<style scoped></style>

src/views/HomeView.vue

@@ -3,62 +3,59 @@ 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 moduleCard {
+  title
+  content
+  url
 
-const moduleList_2 = [
+  constructor(title, content, url) {
+    this.title = title
+    this.content = content
+    this.url = url
+  }
+
+  introduceSelf() {
+    console.log(`title:${this.title}\ncontent:${this.content}\nurl:${this.url}`)
+  }
+}
+
+const modules = [
   {
     title: 'zero tier',
-    url: 'https://zerotier.yulinling.asia/'
+    content: [
+      new moduleCard('gitea', '', 'http://10.120.20.137:3000/'),
+      new moduleCard('pve', '', 'http://10.120.20.15:8006/')
+    ]
   },
   {
-    title: 'gitea',
-    url: 'https://gitea.yulinling.asia/'
+    title: '腾讯云服务',
+    content: [
+      new moduleCard('zero tier', '', 'https://zerotier.yulinling.asia/'),
+      new moduleCard('gitea', '', 'https://gitea.yulinling.asia/')
+    ]
   }
 ]
 </script>
 
 <template>
-  <div>
-    <h2>Zero tier</h2>
+  <div v-for="(item, index) in modules" :key="index">
+    <h2>{{ item.title }}</h2>
     <ul>
       <a-card
-        v-for="(item, index) in moduleList_1"
+        v-for="(item, index) in item.content"
         :key="index"
         :style="cardStyle"
         :body-style="{ padding: 0, overflow: 'hidden' }"
+        hoverable
       >
         <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>
-    </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
+            vertical
+            align="flex-end"
+            justify="space-between"
+            :style="{ padding: '32px', margin: 'auto', alignItems: 'center' }"
           >
-        <a-flex justify="space-between">
-          <a-flex vertical align="flex-end" justify="space-between" :style="{ padding: '32px' }">
-            <a-typography>
+            <a-typography :style="{ margin: 'auto' }">
               <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>
@@ -70,12 +67,18 @@ const moduleList_2 = [
 </template>
 
 <style scoped>
+h2 {
+  margin: 10px;
+}
+
 ul {
   display: flex;
   flex-direction: row;
+  list-style: none;
+  padding: 0;
 }
 
 ul > div {
-  margin: 10px;
+  margin: 0 10px;
 }
 </style>

src/views/LoginView.vue

@@ -0,0 +1,12 @@
+<script setup>
+
+import XiaoMiLogin from '@/components/XiaoMiLogin.vue'
+</script>
+
+<template>
+  <XiaoMiLogin style="margin: 100px auto"/>
+</template>
+
+<style scoped>
+
+</style>

src/views/NewsView.vue

@@ -0,0 +1,9 @@
+<script setup>
+import CustomNews from '@/components/CustomNews.vue'
+</script>
+
+<template>
+  <CustomNews></CustomNews>
+</template>
+
+<style scoped></style>

src/views/ToolView.vue

@@ -0,0 +1,12 @@
+<script setup>
+import Timestamp from '@/components/CustomTimestamp.vue'
+</script>
+
+<template>
+<div>this is tool view page</div>
+  <Timestamp></Timestamp>
+</template>
+
+<style scoped>
+
+</style>