feat: 修改部分样式

components/article/Drawer.vue

@@ -28,7 +28,7 @@ const [prev, next] = neighbors.value || []
 </script>
 
 <template>
-  <HanaDrawer v-model="visible">
+  <HanaDrawer v-model="visible" show-info title="文章目录">
     <template #default="{ close }">
       <div v-if="activatedId !== null" class="mx-auto flex w-4/5 flex-col gap-1 overflow-auto text-text">
         <div @click="close">

components/hana/Button.vue

@@ -36,12 +36,10 @@ function handleClick(e: Event) {
     emits('click')
     if (!props.type) {
       e.preventDefault()
-      e.stopPropagation()
     }
   }
   else {
     e.preventDefault()
-    e.stopPropagation()
   }
 }
 </script>

components/hana/Dialog.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { TransitionProps } from 'vue'
+
 withDefaults(defineProps<{
   title?: string
   overlayOpacity?: number
@@ -19,7 +21,7 @@ function handleClose() {
   visible.value = false
 }
 
-const transitionClasses = {
+const transitionClasses: TransitionProps = {
   enterActiveClass: 'transition-all duration-300',
   enterFromClass: 'opacity-0 scale-105',
   enterToClass: 'opacity-100',

components/hana/Drawer.vue

@@ -7,11 +7,13 @@ const props = withDefaults(defineProps<{
   direction?: 'left' | 'right'
   overlayOpacity?: number
   showInfo?: boolean
+  width?: string
 }>(), {
   hideHeader: false,
   direction: 'right',
   overlayOpacity: 0.5,
-  showInfo: true,
+  showInfo: false,
+  width: '320px',
 })
 
 const visible = defineModel<boolean>()
@@ -58,12 +60,13 @@ onBeforeUnmount(() => {
     <aside
       v-if="visible"
       v-click-outside="() => handleClose()"
-      class="fixed top-0 z-50 flex h-screen w-4/5 max-w-80 flex-col bg-white px-5"
+      class="fixed top-0 z-50 flex h-screen w-4/5 flex-col bg-white px-5"
       :class="[direction === 'right' ? 'right-0' : 'left-0']"
+      :style="{ maxWidth: width }"
     >
       <slot name="header">
         <div v-if="!hideHeader" class="flex h-12 items-center">
-          <span v-if="title" class="text-text">{{ title }}</span>
+          <span v-if="title" class="text-xl text-hana-blue">{{ title }}</span>
           <HanaButton icon="lucide:x" class="ml-auto" icon-button @click="handleClose" />
         </div>
         <hr>
@@ -83,7 +86,7 @@ onBeforeUnmount(() => {
       <div class="mt-5 flex-1 overflow-auto">
         <slot :close="handleClose" />
       </div>
-      <div class="my-5">
+      <div v-if="$slots.footer" class="my-5">
         <hr class="mb-5">
         <slot name="footer" :close="handleClose" />
       </div>

components/hana/Input.vue

@@ -81,10 +81,10 @@ function handleKeyDown(event: KeyboardEvent) {
         v-model="value"
         :name="name"
         class="w-full border-none bg-hana-blue-50 px-3 py-2 text-sm focus:ring-2 focus:ring-hana-blue-400"
+        :class="shape === 'rounded' ? 'rounded-full' : 'rounded-lg'"
         :style="{ resize }"
         :placeholder="placeholder"
         :rows="rows"
-        :class="shape === 'rounded' ? 'rounded-lg' : ''"
         @keydown="handleKeyDown"
       />
     </template>

components/main/Header/Drawer.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  activeStatus: boolean[]
+}>(), {
+  activeStatus: () => [],
+})
+
+const { routesMap } = useRoutesMap()
+
+const visible = defineModel<boolean>()
+</script>
+
+<template>
+  <HanaDrawer v-model="visible" direction="left" title="路由导航" width="240px">
+    <template #default="{ close }">
+      <div class="mx-auto flex flex-col overflow-auto text-text">
+        <div class="my-5 flex flex-col gap-2" @click="close">
+          <HanaButton
+            v-for="([key, value], index) in routesMap" :key="key"
+            :icon="value.icon"
+            :to="value.to"
+            :active="activeStatus[index]"
+            shape="square"
+          >
+            {{ value.title }}
+          </HanaButton>
+        </div>
+      </div>
+    </template>
+  </HanaDrawer>
+</template>

components/main/Header.vue → components/main/Header/index.vue

@@ -74,30 +74,50 @@ function handleSubmit(type: 'login' | 'register', e: Event) {
       break
   }
 }
+
+const drawerVisible = ref(false)
+function toggleDrawerVisible() {
+  drawerVisible.value = !drawerVisible.value
+}
+
+const headerTop = ref('0px')
+let lastScrollY = 0
+
+function handleScroll() {
+  if (route.meta.name === 'article-detail') {
+    const currentScrollY = window.scrollY
+    if (currentScrollY > lastScrollY) {
+      headerTop.value = '-100px'
+    }
+    else {
+      headerTop.value = '0px'
+    }
+    lastScrollY = currentScrollY
+  }
+}
+
+const debouncedHandleScroll = useDebounceFn(handleScroll, 50)
+
+onMounted(() => {
+  window.addEventListener('scroll', debouncedHandleScroll)
+})
+onUnmounted(() => {
+  window.removeEventListener('scroll', debouncedHandleScroll)
+})
 </script>
 
 <template>
-  <div class="flex h-12 w-full justify-center bg-[#fff8] shadow-md backdrop-blur">
+  <div
+    class="relative flex h-12 w-full justify-center bg-[#fff8] shadow-md backdrop-blur transition-all"
+    :style="{ top: headerTop }"
+  >
     <div class="relative mx-auto flex size-full items-center justify-between px-2 md:max-w-[90%] xl:max-w-[70%]">
-      <HanaDropdown trigger="click" animation="slide" offset="start" :show-arrow="false" class="md:hidden">
-        <HanaButton
-          icon-button
-          icon="lucide:align-justify"
-        />
-        <template #dropdown>
-          <HanaDropdownMenu>
-            <HanaDropdownItem
-              v-for="([key, value], index) in routesMap"
-              :key="key"
-              :icon="value.icon"
-              :active="activeStatus[index]"
-              :to="value.to"
-            >
-              {{ value.title }}
-            </HanaDropdownItem>
-          </HanaDropdownMenu>
-        </template>
-      </HanaDropdown>
+      <HanaButton
+        class="block md:hidden"
+        icon-button
+        icon="lucide:align-justify"
+        @click="toggleDrawerVisible"
+      />
 
       <HanaLogo class="absolute left-1/2 -translate-x-1/2 md:relative md:left-0 md:translate-x-0" />
 
@@ -177,4 +197,7 @@ function handleSubmit(type: 'login' | 'register', e: Event) {
       </div>
     </form>
   </HanaDialog>
+  <div class="block md:hidden">
+    <MainHeaderDrawer v-model="drawerVisible" :active-status="activeStatus" />
+  </div>
 </template>

ecosystem.config.js

@@ -0,0 +1,16 @@
+const path = require('node:path')
+
+module.exports = {
+  apps: [
+    {
+      name: 'grey-flowers',
+      port: 2408,
+      cwd: path.join(__dirname),
+      instances: 1,
+      autorestart: true,
+      watch: false,
+      max_memory_restart: '1G',
+      script: './.output/server/index.mjs',
+    },
+  ],
+}

pages/index.vue

@@ -20,7 +20,5 @@ useHead({
 </script>
 
 <template>
-  <div>
-    <MainRecentArticles />
-  </div>
+  <MainBody />
 </template>