doc: update

Author: tangjinzhou

components/table/demo/index.vue

@@ -28,7 +28,6 @@
     <Summary />
     <Responsive />
     <TemplateCom />
-    <bigData />
   </demo-sort>
 </template>
 
@@ -61,7 +60,6 @@ import MultipleSorter from './multiple-sorter.vue';
 import Summary from './summary.vue';
 import Sticky from './sticky.vue';
 import ResizableColumn from './resizable-column.vue';
-import bigData from './big-data.vue';
 import Responsive from './responsive.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -98,7 +96,6 @@ export default defineComponent({
     Summary,
     Sticky,
     ResizableColumn,
-    bigData,
     Responsive,
   },
 });

site/src/components/surelyVue.vue

@@ -5,7 +5,7 @@
         <img height="80" src="https://www.surely.cool/surely-vue-logo.png" alt="" />
       </div>
       <div class="desc">
-        <div class="title">高性能 Surely Vue</div>
+        <div class="title">Surely Vue</div>
         <div class="sub-title">
           构建更快的网站
           <br />

site/src/layouts/index.vue

@@ -48,8 +48,13 @@
                 v-for="h in headers"
                 :key="h.title"
                 :href="h.href || `#${slugifyTitle(h.title)}`"
-                :title="h.title"
-              ></a-anchor-link>
+                :target="h.target"
+              >
+                <template #title>
+                  <LinkOutlined v-if="h.target" />
+                  {{ isZhCN ? h.title : h.enTitle || h.title }}
+                </template>
+              </a-anchor-link>
             </a-anchor>
           </a-affix>
         </section>
@@ -90,7 +95,7 @@ import useMenus from '../hooks/useMenus';
 import TopAd from '../components/rice/top_rice.vue';
 import Sponsors from '../components/rice/sponsors.vue';
 import RightBottomAd from '../components/rice/right_bottom_rice.vue';
-import { CloseOutlined, MenuOutlined } from '@ant-design/icons-vue';
+import { CloseOutlined, MenuOutlined, LinkOutlined } from '@ant-design/icons-vue';
 import ThemeIcon from './ThemeIcon.vue';
 import surelyVueVue from '../components/surelyVue.vue';
 import WWAdsVue from '../components/rice/WWAds.vue';
@@ -114,6 +119,7 @@ export default defineComponent({
     ThemeIcon,
     surelyVueVue,
     WWAdsVue,
+    LinkOutlined,
   },
   setup() {
     const visible = ref(false);
@@ -147,6 +153,9 @@ export default defineComponent({
         route.path.indexOf('/components') === 0 && route.path.indexOf('/components/overview') !== 0
       );
     });
+    const isTablePage = computed(() => {
+      return route.path.indexOf('/components/table') === 0;
+    });
     const matchCom = computed(() => {
       return route.matched[route.matched.length - 1]?.components?.default;
     });
@@ -157,11 +166,43 @@ export default defineComponent({
         : (matchCom.value as any)?.pageData,
     );
     const headers = computed(() => {
+      let tempHeaders = (pageData.value?.headers || []).filter((h: Header) => h.level === 2);
       if (isDemo.value) {
-        return [...demos.value, { title: 'API', href: '#API' }];
-      } else {
-        return (pageData.value?.headers || []).filter((h: Header) => h.level === 2);
+        tempHeaders = [...demos.value];
+        if (isTablePage.value) {
+          tempHeaders.push(
+            ...[
+              {
+                title: '大数据渲染',
+                enTitle: 'Virtualized Table',
+                href: 'https://surely.cool/doc/performance',
+                target: '_blank',
+              },
+              {
+                title: '行拖拽排序',
+                enTitle: 'Row Drag Sort',
+                href: 'https://surely.cool/doc/dragable#drag-row',
+                target: '_blank',
+              },
+              {
+                title: '列拖拽排序',
+                enTitle: 'Column Drag Sort',
+                href: 'https://surely.cool/doc/dragable#drag-column',
+                target: '_blank',
+              },
+              {
+                title: '更多高性能示例',
+                enTitle: 'More high-performance examples ',
+                href: 'https://surely.cool',
+                target: '_blank',
+              },
+            ],
+          );
+        }
+        tempHeaders.push({ title: 'API', href: '#API' });
       }
+
+      return tempHeaders;
     });
 
     const mainContainerClass = computed(() => {

site/src/views/ComponentOverview.vue

@@ -35,7 +35,14 @@
         <a-row :gutter="[24, 24]">
           <template v-for="component in group.children" :key="component.title">
             <a-col :xs="24" :sm="12" :lg="8" :xl="6">
-              <router-link :to="getLocalizedPathname(component.path, isZhCN)">
+              <component
+                :is="component.target ? 'a' : 'router-link'"
+                v-bind="
+                  component.target
+                    ? { href: component.path, target: component.target }
+                    : { to: getLocalizedPathname(component.path, isZhCN) }
+                "
+              >
                 <a-card size="small" class="components-overview-card">
                   <template #title>
                     <div class="components-overview-title">
@@ -47,7 +54,7 @@
                     <img :src="component.cover" :alt="component.title" />
                   </div>
                 </a-card>
-              </router-link>
+              </component>
             </a-col>
           </template>
         </a-row>
@@ -84,8 +91,28 @@ export default defineComponent({
           );
           return { ...group, children: components };
         })
-        .filter(i => i.children.length);
+        .filter(i => i.children.length)
+        .concat([
+          {
+            children: [
+              {
+                category: 'Components',
+                cols: 1,
+                cover: 'https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg',
+                path: 'https://surely.cool/',
+                subtitle: '更强大的表格',
+                title: 'Powerful Table',
+                type: 'Advanced And Powerful',
+                target: '_blank',
+              },
+            ],
+            enTitle: 'Advanced And Powerful',
+            title: '更强大',
+            order: 0,
+          },
+        ]);
     });
+    console.log(menuItems.value);
     onMounted(() => {
       inputRef.value.focus();
     });