feat: refine mobile toc and section titles

components/OneToc.vue

@@ -1,22 +1,39 @@
 <template>
-<nav class="one-toc">
+<nav
+  v-outside="collapseToc"
+  class="one-toc"
+  :class="{ expanded }"
+>
   <veui-anchor
     ui="s"
-    sticky
     target-offset="120px"
-    sticky-offset="20px"
     :items="flattenItems"
   />
+  <div
+    class="toggle"
+    @click="toggleToc"
+  >
+    <veui-icon
+      class="collapsed-icon"
+      name="list-unordered"
+    />
+  </div>
 </nav>
 </template>
 
 <script>
-import { Anchor } from 'veui'
+import { Anchor, Icon } from 'veui'
+import outside from 'veui/directives/outside'
+import 'veui-theme-dls-icons/list-unordered'
 
 export default {
   name: 'one-toc',
+  directives: {
+    outside
+  },
   components: {
-    'veui-anchor': Anchor
+    'veui-anchor': Anchor,
+    'veui-icon': Icon
   },
   props: {
     items: {
@@ -24,10 +41,84 @@ export default {
       default: () => []
     }
   },
+  data () {
+    return {
+      expanded: false
+    }
+  },
   computed: {
     flattenItems () {
-      return this.items.flatMap(({ children }) => children || [])
+      return this.items.flatMap(
+        ({ children }) => (children || []).map(({ children, ...child }) => child) || []
+      )
+    }
+  },
+  methods: {
+    toggleToc () {
+      this.expanded = !this.expanded
+    },
+    collapseToc () {
+      if (this.expanded) {
+        this.expanded = false
+      }
     }
   }
 }
 </script>
+
+<style lang="stylus" scoped>
+@media (max-width 480px)
+  .one-toc
+    background-color #fff
+    z-index 20
+    top 0
+    right 0
+    bottom 0
+    left auto
+    padding 40px 60px 40px 0
+    transition transform 0.3s
+    transform translateX(100%)
+
+    &::before
+      content ''
+      position absolute
+      top 0
+      bottom 0
+      left 0
+      width 1px
+      background-color #e2e6f0
+
+    &.expanded
+      transform translateX(0)
+
+  .toggle
+    z-index -1
+    display flex
+    align-items center
+    justify-content center
+    width 36px
+    height 36px
+    position absolute
+    top 80px
+    right 100%
+    border 1px solid #e2e6f0
+    border-top-left-radius 4px
+    border-bottom-left-radius 4px
+    background-color #fff
+    box-shadow 0 0 12px rgba(0, 0, 0, 0.1)
+    font-size 20px
+    transition transform 0.3s, opacity 0.3s
+
+    &::before
+      content ""
+      position absolute
+      top 0
+      bottom 0
+      right -19px
+      width 20px
+      background-color #fff
+
+  &.expanded .toggle
+    transform translateX(100%)
+    opacity 0
+</style>

layouts/default.vue

@@ -112,8 +112,8 @@ main
 
 <style lang="stylus">
 .one-toc
-  position absolute
+  position fixed
-  left 100%
+  left calc(max(840px, min(1346px, 100vw)) - 20px)
   top 120px
 </style>
 

one/docs/components/autocomplete.md

@@ -2,7 +2,7 @@
 
 ## 示例
 
-### 触发建议的时机
+### 建议触发时机
 
 设置 [`suggest-trigger`](#props-suggest-trigger) 来指定触发建议的时机。
 

one/docs/components/badge.md

@@ -14,7 +14,7 @@
 
 [[ demo src="/demo/badge/number.vue" ]]
 
-### 右上角圆点徽标
+### 圆点徽标
 
 不提供徽标内容时，徽标将以圆点样式显示在右上角。
 

one/docs/components/button-group.md

@@ -14,7 +14,7 @@
 
 [[ demo src="/demo/button-group/size.vue" ]]
 
-### 使用 `items` 数据源
+### 使用数据源
 
 可以使用 [`items`](#props-items) 属性通过数据源指定按钮内容。
 

one/docs/components/calendar.md

@@ -8,7 +8,7 @@
 
 [[ demo src="/demo/calendar/default.vue" ]]
 
-### 多日选择、日期范围选择
+### 多日、日期范围选择
 
 配置 [`multiple`](#props-multiple) 属性时，可以选择多个日期。配置 [`range`](#props-range) 属性时，可以选择一个日期范围。
 
@@ -38,7 +38,7 @@
 
 [[ demo src="/demo/calendar/disabled-date.vue" ]]
 
-### 自定义日期的样式
+### 自定义日期样式
 
 设置 [`date-class`](#props-date-class) 来自定义指定日期的 `class`。
 

one/docs/components/config-provider.md

@@ -2,7 +2,7 @@
 
 ## 示例
 
-### 配置 `Select` 的 `placeholder`
+### 配置占位符
 
 [[ demo src="/demo/config-provider/select.vue" ]]
 

one/docs/components/dialog.md

@@ -28,7 +28,7 @@
 
 [[ demo src="/demo/dialog/stack.vue" ]]
 
-### Loading or Disabled
+### 加载与禁用态
 
 [[ demo src="/demo/dialog/status.vue" ]]
 

one/docs/demo/drawer/placement.vue

@@ -5,7 +5,7 @@
       Modal
     </veui-checkbox>
     <veui-checkbox v-model="outsideClosable">
-      outside Closable
+      Outside Closable
     </veui-checkbox>
   </section>
 

one/docs/en-US/components/button-group.md

@@ -14,7 +14,7 @@ Available size variants for the [`ui`](#props-ui) prop: `xs` / `s` / `m` / `l` /
 
 [[ demo src="/demo/button-group/size.vue" ]]
 
-### Use datasource via `items`
+### Using datasource
 
 Use the [`items`](#props-items) prop to provide content with a datasource.