Initial rearrangment of vuetom site source

packages/vuetom/blog/components/sidebar/VTSidebar.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { useSidebar } from '../../composables/sidebar.js'
+import VTSidebarTop from './VTSidebarTop.vue'
+import VTSidebarBottom from './VTSidebarBottom.vue'
+
+const { site, theme } = useData()
+const { hasSidebar } = useSidebar()
+const { base } = site.value
+let { avatar, author } = theme.value
+let baseUrl = base
+
+if (base === '/' || base.endsWith('/')) {
+  baseUrl = base.substring(0, base.length - 1)
+}
+
+avatar = `${baseUrl}${avatar}`
+author += ' '
+
+</script>
+
+<template>
+  <div
+    class="VTSidebar"
+    :class="{ 'has-sidebar': hasSidebar }"
+  >
+    <VTSidebarTop />
+    <div class="h-6"></div>
+    <VTSidebarBottom
+      :avatar="avatar"
+      :author="author"
+    />
+  </div>
+</template>
+
+<style scoped>
+</style>

packages/vuetom/blog/components/sidebar/VTSidebarBottom.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+const d = defineProps<{
+  avatar?: string,
+  author?: string
+}>()
+
+</script>
+
+<template>
+  <div class="VTSidebarBottom">
+    <div class="rounded-vt shadow-vt bg-cbg p-6">
+      <div class="avatar w-full pt-6">
+        <div
+          class="bg-cover bg-center rounded-full h-24 w-24 bg-green-100 mx-auto"
+          :style="{'background-image': `url(${d.avatar})`}"
+        >
+        </div>
+      </div>
+      <div class="author">
+        <p class="text-center py-6 text-xl font-bold">{{d.author}}</p>
+      </div>
+      <div class="tag">
+        <div class="grid grid-cols-3 w-4/5 mx-auto text-center">
+          <div>
+            <p class="font-bold">1</p>
+            <p class="text-sm hover:text-brand-d hover:font-bold">文章</p>
+          </div>
+          <div>
+            <p class="font-bold">0</p>
+            <p class="text-sm hover:text-brand-d hover:font-bold">分类</p>
+          </div>
+          <div>
+            <p class="font-bold">10</p>
+            <p class="text-sm hover:text-brand-d hover:font-bold">标签</p>
+          </div>
+        </div>
+      </div>
+      <div class="self-links">
+        <div class="py-6 flex flex-wrap text-left text-sm">
+          <div class="w-1/2 py-1.5 pl-2 mt-1 hover:bg-cbgs rounded-vt">
+            <i class="w-3 h-3 text-sm mr-1 fa fa-ambulance"></i>&nbsp;
+            <span>Gitee</span>
+          </div>
+          <div class="w-1/2 py-1.5 pl-2 mt-1 hover:bg-cbgs rounded-vt">
+            <i class="w-3 h-3 text-sm mr-1 fa fa-github-alt"></i>&nbsp;
+            <span>Github</span>
+          </div>
+          <div class="w-1/2 py-1.5 pl-2 mt-1 hover:bg-cbgs rounded-vt">
+            <i class="w-3 h-3 text-sm mr-1 fa fa-envelope-o"></i>&nbsp;
+            <span>Email</span>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="friend-links">
+        <div class="py-6 border-t-2 border-gray-100 border-opacity-50 text-center">
+          <div>
+            <a
+              class="border-b-2 border-gray-200 inline-block m-1 px-1 hover:border-gray-500 transition duration-500 border-opacity-50"
+              href="https://github.com/lauset"
+              >LauSET</a
+            >
+          </div>
+          <div>
+            <a
+              class="border-b-2 border-gray-200 inline-block m-1 px-1 hover:border-gray-500 transition duration-500 border-opacity-50"
+              href="https://github.com/lauset"
+              >Vuetom</a
+            >
+          </div>
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

packages/vuetom/blog/components/sidebar/VTSidebarLink.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { normalizeLink } from '../../support/utils.js'
+
+const props = defineProps<{
+  text: string,
+  link: string,
+  items: any
+}>()
+
+const togo = (url: string) => {
+  if (!url) url = ''
+  window.location.href = normalizeLink(url)
+}
+</script>
+
+<template>
+  <div>
+    <div class="rounded-md w-full py-1 px-4 border-2 border-transparent
+      hover:border-brand transition-colors"
+      @click="togo(link)">
+      {{text}}
+    </div>
+  </div>
+</template>

packages/vuetom/blog/components/sidebar/VTSidebarTop.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import VTSidebarLink from './VTSidebarLink.vue'
+import { useSidebar } from '../../composables/sidebar.js'
+
+const { sidebar } = useSidebar()
+</script>
+
+<template>
+  <div class="VTSidebarTop">
+    <div class="rounded-vt shadow-vt overflow-hidden bg-cbg">
+      <div class="h-20 px-6 py-3 bg-brand">
+        <p class="font-bold py-1">公告</p>
+        <p class="text-sm">暂无</p>
+      </div>
+      <div class="h-60 px-6 py-4">
+        <div v-for="s in sidebar" :key="s.text">
+          <VTSidebarLink
+            :text="s.text"
+            :items="s.items"
+            :link="s.link" />
+        </div>
+      </div>
+    </div>
+  </div >
+</template>
+
+<style scoped>
+</style>