!13 Markdown 目录组件

Merge pull request !13 from Sight/sightDevelop

example/docs/zh-CN/components/animation.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/avatar.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/backtop.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 
 ###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。

example/docs/zh-CN/components/badge.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/block.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/breadcrumb.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/button.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/card.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/carousel.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/checkbox.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/collapse.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/color.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 主色调
 :::
 

example/docs/zh-CN/components/colorPicker.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/confirm.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/container.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 普通容器
 :::
 

example/docs/zh-CN/components/countup.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/datePicker.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/dropdown.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/empty.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/field.md

@@ -1,3 +1,9 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
 ::: demo
 
 <template>

example/docs/zh-CN/components/form.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/grid.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/icon.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/iconPicker.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/input.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/inputNumber.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/layout.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/line.md

@@ -1,3 +1,9 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
 ::: demo
 
 <template>

example/docs/zh-CN/components/load.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/menu.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/modal.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基本使用
 :::
 

example/docs/zh-CN/components/msg.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/page.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/panel.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/progress.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/radio.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/rate.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/select.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/slider.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 横向
 :::
 

example/docs/zh-CN/components/switch.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/tab.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/table.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/textarea.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/timeline.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/tooltip.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/transfer.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 

example/docs/zh-CN/components/tree.md

@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: demo
 
 <template>

example/src/components/LayAnchor.vue

@@ -0,0 +1,178 @@
+<template>
+  <aside :class="classAside">
+    <div class="lay-aside-top">
+      <lay-button
+        @click="handlerBtnClick()"
+        type="primary"
+        size="xs"
+        :class="classAsideBtn"
+      >
+        <lay-icon :type="iconType" size="40"> </lay-icon>
+      </lay-button>
+    </div>
+    <lay-scroll
+      class="layui-side-scroll-bar layui-side-scroll::-webkit-scrollbar" >
+      <ul>
+        <li
+          v-for="(item, index) in anchorsComput"
+          :key="index"
+          class="lay-aside-list"
+          :class="{ active: index === curridx }"
+          @click="curridx = index"
+        >
+          <a
+            :href="`#${item}`"
+            class="lay-aside-link"
+            :class="{ active: index === curridx }"
+            >{{ item }}</a
+          >
+        </li>
+      </ul>
+    </lay-scroll>
+  </aside>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+const props = defineProps<{
+  anchors?: Array<string> | string;
+  currIndex: number;
+  show: boolean | string;
+}>();
+
+let curridx = ref(props.currIndex);
+const show = ref(props.show);
+const iconType = ref("layui-icon-right");
+const anchor = props.anchors;
+
+const anchorsComput = computed(() => {
+  return typeof anchor === "string" ? anchor?.split(",") : anchor;
+});
+
+const classAside = computed(() => [
+  "lay-aside",
+  { "lay-aside-collapse": !show.value },
+]);
+
+const classAsideBtn = computed(() => [
+  "lay-aside-collapse-btn",
+  { "lay-aside-collapse-btn-collapse": !show.value },
+]);
+
+const handlerBtnClick = () => {
+  show.value = !show.value;
+  iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
+};
+</script>
+<style lang="less" scoped>
+.layui-side-scroll-bar{
+  overflow-y: scroll; 
+  max-width: 156px;
+}
+.layui-side-scroll::-webkit-scrollbar {
+  width: 0;
+}
+.lay-aside {
+  position: fixed;
+  top: 65px;
+  right: 17px;
+  box-sizing: border-box;
+  width: 180px;
+  padding: 0 25px;
+  background-color: #ffffff;
+  border-left: 1px solid rgb(229 230 235);
+  transition: right 200ms;
+  height: calc(100% - 60px);
+}
+
+.lay-aside-top {
+  height: 29px;
+}
+
+.lay-aside-link {
+  display: inline-block;
+  padding: 1px 4px;
+  color: grey;
+  font-size: 13px;
+  line-height: 2;
+  max-width: 140px;
+  min-width: 68px;
+  text-decoration: none;
+  background-color: transparent;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+  &:hover {
+    background-color: #f6f6f6 !important;
+    color: #5fb878;
+  }
+  &:active {
+    background-color: #f6f6f6 !important;
+    color: #89d89f;
+  }
+}
+.lay-aside-list {
+  position: relative;
+  margin: 5px 0px 0px 4px;
+  padding-left: 2px;
+  max-width: 140px;
+  border-radius: 2px;
+  list-style: none;
+  &:hover {
+    background-color: #f6f6f6 !important;
+    color: #5fb878;
+  }
+}
+.active {
+  background-color: #f6f6f6 !important;
+  color: #5fb878 !important;
+}
+
+.lay-aside-collapse {
+  right: -180px;
+  opacity: 0.7;
+}
+
+.lay-aside-collapse-btn {
+  position: fixed;
+  right: 197px;
+  top: calc(50% - 20px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 40px;
+  background-color: #f6f6f6;
+  border-radius: 0px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border: rgb(229 230 235) 1px solid;
+  border-right: none;
+  transition: right 200ms;
+  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+  &:hover {
+    background-color: #e2e2e2;
+  }
+}
+.lay-aside-collapse-btn-collapse {
+  right:0px;
+}
+
+@media screen and (max-width: 768px) {
+  .lay-aside {
+    width: 100px !important;
+  }
+  .lay-aside-collapse-btn {
+    right: 98px;
+  }
+  .lay-aside-collapse-btn-collapse {
+    right: 15px;
+  }
+  .lay-aside-list {
+    max-width: 68px;
+  }
+  .layui-side-scroll-bar{
+    max-width: 68px;
+  }   
+}
+</style>

example/src/components/LayTableBox.vue

@@ -18,8 +18,8 @@
 .lay-table-box table th,
 .lay-table-box table td {
   font-size: 14px;
-  width: 160px;
+  width: 50px;
-  max-width: 160px;
+  max-width: 180px;
   height: 50px; /*统一每一行的默认高度*/
   border-top: 1px solid whitesmoke; /*内部边框样式*/
   padding: 0 10px; /*内边距*/

example/src/main.ts

@@ -7,6 +7,7 @@ import LayCode from './components/LayCode.vue'
 import LaySearch from './components/LaySearch.vue'
 import LayTableBox from './components/LayTableBox.vue'
 import LayComment from './components/LayComment.vue'
+import LayAnchor from './components/LayAnchor.vue'
 import './assets/css/index.css'
 
 export function createApp(): {
@@ -23,6 +24,7 @@ export function createApp(): {
     .component('LaySearch', LaySearch)
     .component('LayTableBox', LayTableBox)
     .component('LayComment', LayComment)
+    .component('LayAnchor',LayAnchor)
     .use(Layui)
 
   return { app, router }

example/src/plugin/common-plugins.ts

@@ -9,6 +9,7 @@ import createBlock from './create-block'
 import createDescribe from './create-describe'
 import createTable from './create-table'
 import createComment from './create-comment'
+import createAnchor from './create-anchor'
 import preWrapper from './pre-wrapper'
 
 const plugins = [
@@ -31,6 +32,7 @@ const plugins = [
         .use(...createTitle('title', ''))
         .use(...createDescribe('describe', ''))
         .use(...createComment('comment', ''))
+        .use(...createAnchor('anchor', ''))
     },
   }),
 ] as any

example/src/plugin/create-anchor.ts

@@ -0,0 +1,38 @@
+import container from "markdown-it-container";
+import type Token from "markdown-it/lib/token";
+
+type ContainerArgs = [
+  typeof container,
+  string,
+  {
+    render(tokens: Token[], idx: number): string;
+  }
+];
+
+export default function createContainer(
+  klass: string,
+  defaultTitle: string
+): ContainerArgs {
+  return [
+    container,
+    klass,
+    {
+      render(tokens, idx) {
+        const token = tokens[idx];
+        if (token.nesting === 1) {
+          const anchors = [];
+          for (const token of tokens) {
+            if (token.nesting === 1 && token.info.includes("title")) {
+              const info = token.info.trim().slice(klass.length).trim();
+              anchors.push(info);
+            }
+          }
+          // 此处仅支持 string | number | boolean 类型
+          return `<lay-anchor anchors="${anchors}" :currIndex="-1" :show="true">`;
+        } else {
+          return "</lay-anchor>\n";
+        }
+      },
+    },
+  ];
+}

example/src/plugin/create-title.ts

@@ -17,11 +17,11 @@ export default function createContainer(
     container,
     klass,
     {
-      render(tokens, idx) {
+      render(tokens, idx) {    
         const token = tokens[idx]
         const info = token.info.trim().slice(klass.length).trim()
         if (token.nesting === 1) {
-          return `<lay-field title="${
+          return `<lay-field id="${info || defaultTitle}" title="${
             info || defaultTitle
           }" style="margin-top:20px;margin-bottom: 20px;">`
         } else {

example/src/view/component.vue

@@ -37,7 +37,7 @@
       </lay-scroll>
     </lay-side>
     <lay-body>
-      <div style="padding: 20px">
+      <div style="padding: 20px; margin-right: 180px">
         <router-view />
       </div>
     </lay-body>