feat: change docTree style

terwer · Nov 16, 2024 · cfa7513 · cfa7513
1 parent 43c9f68
commit cfa7513
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 22 deletions.
diff --git a/.env.provider.example b/.env.provider.example
@@ -3,7 +3,7 @@ NUXT_PUBLIC_DEFAULT_TYPE=siyuan
 NUXT_PUBLIC_SIYUAN_API_URL=http://127.0.0.1:6806
 NUXT_PUBLIC_WAIT_TIME=500
 NUXT_PUBLIC_PROVIDER_MODE=true
-NUXT_PUBLIC_PROVIDER_URL=http://127.0.0.1:8000
+NUXT_PUBLIC_PROVIDER_URL=http://127.0.0.1:8086
 # ======= public vars =======
 
 # ======= private vars =======

diff --git a/components/static/Detail.vue b/components/static/Detail.vue
@@ -1,10 +1,24 @@
+<!--suppress ALL -->
 <template>
   <div v-if="!formData.shareEnabled || formData.isExpires">
     <el-empty :description="formData.isExpires ? t('blog.index.no.expires') : t('blog.index.no.permission')">
     </el-empty>
   </div>
   <div v-else class="app-container">
-    <aside v-if="treeData && treeData.length > 0" class="sidebar-container">
+    <!-- 固定的图标 -->
+    <div class="sidebar-toggle" @click="toggleSidebar">
+      <el-icon v-if="isSidebarVisible">
+        <Expand />
+      </el-icon>
+      <el-icon v-else>
+        <Fold />
+      </el-icon>
+    </div>
+    <aside
+      v-if="isSidebarVisible && treeData && treeData.length > 0"
+      class="sidebar-container"
+      :class="{ 'sidebar-hidden': !isSidebarVisible }"
+    >
       <sidebar
         :tree-data="treeData"
         :max-depth="maxDepth"
@@ -60,6 +74,7 @@ import { useAuthModeFetch } from "~/composables/useAuthModeFetch"
 import { useProviderMode } from "~/composables/useProviderMode"
 import Sidebar from "~/components/static/Sidebar.vue"
 import Outline from "~/components/static/Outline.vue"
+import { Fold, Expand } from "@element-plus/icons-vue"
 
 // https://github.com/nuxt/nuxt/issues/15346
 // 由于布局是个宏，静态构建情况下，不能动态设置，只能在前面的页面写死
@@ -128,6 +143,7 @@ const maxDepth = ref(formData.post?.docTreeLevel ?? 3)
 const allExpanded = ref(false)
 const defaultExpandedIds = ref([id])
 const expandedIds = ref([] as any)
+const isSidebarVisible = ref(true)
 // outline
 const outlineData = ref([] as any)
 const outlineMaxDepth = ref(formData.post?.outlineLevel ?? 6)
@@ -142,6 +158,10 @@ const handleUpdateAllExpanded = (newAllExpanded: boolean) => {
   allExpanded.value = newAllExpanded
 }
 
+const toggleSidebar = () => {
+  isSidebarVisible.value = !isSidebarVisible.value
+}
+
 // 初始化文档树
 treeData.value = TreeUtils.addParentIds(formData.post.docTree)
 expandedIds.value = TreeUtils.chainExpandedIds(treeData.value, defaultExpandedIds.value)
@@ -162,6 +182,21 @@ onMounted(() => {})
   display flex
   height 100vh
 
+.sidebar-toggle
+  position fixed
+  top 24px
+  left 14px
+  z-index 2000
+  //background-color #fff
+  //border 1px solid #ddd
+  //box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
+  padding 10px
+  cursor pointer
+  transition transform 0.3s ease-in-out
+
+  &:hover
+    transform scale(1.1)
+
 .sidebar-container
   min-width 180px
   max-width 350px
@@ -170,6 +205,11 @@ onMounted(() => {})
   overflow-y auto
   box-shadow 4px 0 6px rgba(0, 0, 0, 0.1)
   padding 16px
+  padding-left 24px
+  transition transform 0.3s ease-in-out
+
+.sidebar-hidden
+  transform translateX(-100%)
 
 .main {
   flex: 1;

diff --git a/components/static/Sidebar.vue b/components/static/Sidebar.vue
@@ -1,8 +1,13 @@
 <template>
   <div class="sidebar">
-    <button class="expand-collapse-btn" @click="toggleAll">
-      {{ props.allExpanded ? t("page.sidebar.expand.all") : t("page.sidebar.collapse.all") }}
-    </button>
+    <div class="sidebar-expand-toggle" @click="toggleAll">
+      <el-icon v-if="props.allExpanded" :title="t('page.sidebar.collapse.all')">
+        <ZoomOut />
+      </el-icon>
+      <el-icon v-else :title="t('page.sidebar.expand.all')">
+        <ZoomIn />
+      </el-icon>
+    </div>
     <sidebar-item
       v-for="item in items"
       :key="item.id"
@@ -19,6 +24,7 @@
 import { computed, defineEmits, defineProps, watch } from "vue"
 import SidebarItem from "~/components/static/SidebarItem.vue"
 import { createAppLogger } from "~/common/appLogger"
+import { ZoomIn, ZoomOut } from "@element-plus/icons-vue"
 
 const logger = createAppLogger("static-sidebar")
 const { t } = useI18n()
@@ -106,22 +112,28 @@ onMounted(() => {})
 </script>
 
 <style lang="stylus" scoped>
-//.sidebar
-//  background-color #f0f0f0
-
-.expand-collapse-btn
-  width 100%
-  padding 12px
-  margin-bottom 6px
-  background-color #1890ff
-  color white
-  border none
+.sidebar
+  position relative
+  padding 6px
+  background-color #f0f0f0
+
+.sidebar-expand-toggle
+  position absolute
+  top 6px
+  right 6px
   cursor pointer
-  text-align center
-  border-radius 4px
-  font-size 14px
-  transition background-color 0.3s
+  display flex
+  align-items center
+  justify-content center
+  width 24px
+  height 24px
+  background-color #d9d9d9
+  color #606060
+  border-radius 50%
+  box-shadow 0 1px 4px rgba(0, 0, 0, 0.1)
+  transition all 0.3s
 
   &:hover
-    background-color #40a9ff
+    background-color #bfbfbf
+    color #404040
 </style>
diff --git a/components/static/SidebarItem.vue b/components/static/SidebarItem.vue
@@ -92,7 +92,7 @@ watch(
   { immediate: true }
 )
 
-const emitUpdateExpandedIds = (newExpandedIds) => {
+const emitUpdateExpandedIds = (newExpandedIds: any[]) => {
   emit("update-expanded-ids", newExpandedIds)
 }
 
@@ -111,7 +111,7 @@ const toggle = () => {
   }
 }
 
-const handleSelect = (item) => {
+const handleSelect = (item: any) => {
   emit("select", item)
 }
 </script>