update

Author: undefined

plugin/md/markdownToVue.ts

@@ -56,6 +56,7 @@ export function createMarkdownToVueRenderFn(
       headers: data.headers,
       relativePath,
       content: escapeHtml(content),
+      html,
       // TODO use git timestamp?
       lastUpdated: Math.round(fs.statSync(file).mtimeMs),
     };

src/components/DemoBox.vue

@@ -4,7 +4,9 @@
       <slot />
     </section>
     <section class="code-box-meta markdown">
-      <div class="code-box-title">{{ title }}</div>
+      <div class="code-box-title">
+        <a :href="`#${sectionId}`">{{ title }}</a>
+      </div>
       <div class="code-box-description">
         <slot v-if="isZhCN" name="description" />
         <slot v-else name="us-description" />
@@ -69,7 +71,7 @@
 <script lang="ts">
 import { GlobalConfig } from '@/App.vue';
 import { GLOBAL_CONFIG } from '@/SymbolKey';
-import { computed, defineComponent, inject, ref } from 'vue';
+import { computed, defineComponent, inject, onMounted, ref } from 'vue';
 import { CheckOutlined, SnippetsOutlined } from '@ant-design/icons-vue';
 export default defineComponent({
   props: {
@@ -89,6 +91,8 @@ export default defineComponent({
         .join('-')
         .replace('.vue', '')}`;
     });
+    const addDemosInfo: any = inject('addDemosInfo');
+
     const globalConfig = inject<GlobalConfig>(GLOBAL_CONFIG);
     const title = computed(
       () => props.jsfiddle?.title[globalConfig.isZhCN.value ? 'zh-CN' : 'en-US'],
@@ -116,6 +120,12 @@ export default defineComponent({
         'highlight-wrapper-expand': codeExpand.value,
       };
     });
+    onMounted(() => {
+      addDemosInfo({
+        href: `#${sectionId.value}`,
+        title,
+      });
+    });
     return {
       theme: 'light',
       type,

src/docs/button/demo/index.vue

@@ -1,16 +1,14 @@
 <template>
-  <div>
-    <demo-sort>
-      <basic />
-      <disabled />
-      <ghost />
-      <icon />
-      <loading />
-      <multiple />
-      <size />
-      <block />
-    </demo-sort>
-  </div>
+  <demo-sort>
+    <basic />
+    <disabled />
+    <ghost />
+    <icon />
+    <loading />
+    <multiple />
+    <size />
+    <block />
+  </demo-sort>
 </template>
 <script lang="ts">
 import Basic from './basic.vue';
@@ -26,15 +24,8 @@ import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  // category: 'Components',
-  // type: 'General',
-  // zhType: '通用',
-  // title: 'Button',
-  // subtitle: '按钮',
-  pageData: {
-    cn: CN.pageData,
-    us: US.pageData,
-  },
+  CN,
+  US,
   components: {
     Basic,
     Disabled,

src/layouts/Demo.vue

@@ -0,0 +1,40 @@
+<template>
+  <article class="markdown">
+    <section class="markdown">
+      <h1>
+        {{ frontmatter.title }}
+        <span v-if="isZhCN" class="subtitle">{{ frontmatter.subtitle }}</span>
+      </h1>
+      <section class="markdown" v-html="description"></section>
+    </section>
+    <section class="markdown">
+      <h2>{{ $t('app.component.examples') }}</h2>
+    </section>
+    <slot />
+    <section class="markdown api-container" v-html="api"></section>
+  </article>
+</template>
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+export default defineComponent({
+  name: 'Demo',
+  props: ['pageData', 'isZhCN'],
+  setup(props) {
+    const frontmatter = computed(() => props?.pageData?.frontmatter || {});
+    const docHtml = computed(() => {
+      return props?.pageData?.html || '';
+    });
+    const description = computed(() => {
+      return docHtml.value.split('<h2 id="api">API</h2>')[0];
+    });
+    const api = computed(() => {
+      return `
+      <h2 id="API"><span>API</span><a href="#API" class="anchor">#</a></h2>
+      ${docHtml.value.split('<h2 id="api">API</h2>')[1]}
+      `;
+    });
+    return { frontmatter, description, api };
+  },
+});
+</script>
+<style lang="less" scoped></style>

src/layouts/index.vue

@@ -18,13 +18,16 @@
       </template>
       <a-col :xxl="20" :xl="19" :lg="18" :md="18" :sm="24" :xs="24">
         <section :class="mainContainerClass">
-          <router-view />
+          <Demo v-if="isDemo" :pageData="pageData" :isZhCN="isZhCN">
+            <component :is="matchCom" />
+          </Demo>
+          <router-view v-else />
           <a-affix v-if="headers.length" class="toc-affix" :offsetTop="20">
             <a-anchor>
               <a-anchor-link
                 v-for="h in headers"
                 :key="h.title"
-                :href="`#${h.title}`"
+                :href="h.href || `#${h.title}`"
                 :title="h.title"
               ></a-anchor-link>
             </a-anchor>
@@ -39,18 +42,20 @@
 <script lang="ts">
 import { GlobalConfig } from '@/App.vue';
 import { GLOBAL_CONFIG } from '@/SymbolKey';
-import { defineComponent, inject, computed } from 'vue';
+import { defineComponent, inject, computed, ref, provide, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import Header from './header/index.vue';
 import Footer from './Footer.vue';
 import Menu from './Menu.vue';
 import PrevAndNext from './PrevAndNext.vue';
+import Demo from './Demo.vue';
 export default defineComponent({
   name: 'Layout',
   setup() {
     const route = useRoute();
     const router = useRouter();
     const routes = router.getRoutes();
+    const globalConfig = inject<GlobalConfig>(GLOBAL_CONFIG);
     const menus = computed(() => {
       const path = route.path;
       const category = path.split('/')[1];
@@ -59,6 +64,19 @@ export default defineComponent({
         .map(r => ({ ...r.meta, path: r.path.split(':lang')[0] }));
     });
 
+    const demos = ref([]);
+
+    provide('addDemosInfo', info => {
+      demos.value.push(info);
+    });
+
+    watch(
+      () => route.path,
+      () => {
+        demos.value.length = 0;
+      },
+    );
+
     const activeMenuItem = computed(() => {
       return route.path.split('-cn')[0];
     });
@@ -74,25 +92,41 @@ export default defineComponent({
     const matchCom = computed(() => {
       return route.matched[route.matched.length - 1]?.components?.default as any;
     });
-    console.log(matchCom);
+    const isZhCN = globalConfig.isZhCN;
+    const pageData = computed(() =>
+      isDemo.value
+        ? matchCom.value[isZhCN.value ? 'CN' : 'US']?.pageData
+        : matchCom.value?.pageData,
+    );
     const headers = computed(() => {
-      return (matchCom.value?.pageData?.headers || []).filter(h => h.level === 2);
+      if (isDemo.value) {
+        return [...demos.value, { title: 'API', href: '#API' }];
+      } else {
+        return (pageData.value?.headers || []).filter(h => h.level === 2);
+      }
     });
-    const globalConfig = inject<GlobalConfig>(GLOBAL_CONFIG);
-    return {
-      isMobile: globalConfig.isMobile,
-      isZhCN: globalConfig.isZhCN,
-      mainContainerClass: {
+
+    const mainContainerClass = computed(() => {
+      return {
         'main-container': true,
         'main-container-component': isDemo.value,
-      },
+      };
+    });
+    return {
+      isMobile: globalConfig.isMobile,
+      isZhCN,
+      mainContainerClass,
       menus,
       currentMenuIndex,
       activeMenuItem,
       headers,
+      isDemo,
+      matchCom,
+      pageData,
     };
   },
   components: {
+    Demo,
     Header,
     Footer,
     Menu,

src/router/index.js

@@ -8,10 +8,6 @@ const routes = [
   {
     path: '/components',
     component: Layout,
-    props: route => {
-      const name = route.path.split('/components/')[1].split('/')[0];
-      return { name, showDemo: true };
-    },
     children: [
       {
         path: 'overview:lang(.*)',

typings/shared.d.ts

@@ -31,6 +31,7 @@ export interface PageData {
   frontmatter: Record<string, any>;
   lastUpdated: number;
   content?: string;
+  html?: string;
 }
 
 export interface Header {