doc: add surely form

site/index.html

@@ -80,6 +80,7 @@
       data-sf-delay-visible="false"
       data-sf-width="350px"
       data-sf-height="450px"
+      data-sf-preload="true"
     ></div>
     <script async src="//aliyuncdn.antdv.com/form/static/embed/v1.js"></script>
   </body>

site/src/layouts/Menu.vue

@@ -10,6 +10,29 @@
         {{ isZhCN ? '组件总览' : 'Components Overview' }}
       </router-link>
     </a-menu-item>
+    <a-menu-item-group v-if="isZhCN" title="高级组件">
+      <a-menu-item key="surely-table">
+        <a
+          href="https://www.surely.cool"
+          target="_blank"
+          rel="noopener noreferrer"
+          style="position: relative"
+        >
+          Surely Table
+        </a>
+      </a-menu-item>
+      <a-menu-item key="surely-form">
+        <a
+          href="https://form.antdv.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          style="position: relative"
+        >
+          Surely Form
+          <a-badge color="red" style="position: absolute; top: -18px; right: -15px" />
+        </a>
+      </a-menu-item>
+    </a-menu-item-group>
     <template v-for="m in menus">
       <template v-if="m.children">
         <a-menu-item-group :key="m.order" :title="isZhCN ? m.title : m.enTitle">

site/src/layouts/header/Navigation.vue

@@ -16,17 +16,35 @@
         {{ $t('app.header.menu.components') }}
       </router-link>
     </a-menu-item>
-    <a-menu-item v-if="isZhCN" key="surely-vue">
+    <a-sub-menu v-if="isZhCN" key="advanced">
-      <a
+      <template #title>
-        href="https://www.surely.cool"
+        <span style="position: relative">
-        target="_blank"
+          高级组件
-        rel="noopener noreferrer"
+          <a-badge color="red" style="position: absolute; top: -35px; right: -15px" />
-        style="position: relative"
+        </span>
-      >
+      </template>
-        高级组件
+      <a-menu-item key="surely-table">
-        <a-badge color="red" style="position: absolute; top: -35px; right: -15px" />
+        <a
-      </a>
+          href="https://www.surely.cool"
-    </a-menu-item>
+          target="_blank"
+          rel="noopener noreferrer"
+          style="position: relative"
+        >
+          Surely Table
+        </a>
+      </a-menu-item>
+      <a-menu-item key="surely-form">
+        <a
+          href="https://form.antdv.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          style="position: relative"
+        >
+          Surely Form
+          <a-badge color="red" style="position: absolute; top: -18px; right: -15px" />
+        </a>
+      </a-menu-item>
+    </a-sub-menu>
     <a-menu-item key="store">
       <a
         href="https://store.antdv.com/pro/"

site/src/layouts/header/index.vue

@@ -16,15 +16,9 @@
 
       <CloseOutlined class="close-icon" @click="visibleAdblockBanner = false" />
     </div>
-    <div v-if="visibleAlertBanner" class="alert-banner">
+    <div v-if="visibleAlertBanner && isZhCN" class="alert-banner">
-      <template v-if="isZhCN">
+      Surely Form 1.0 发布，快速搭建在线问卷，无缝嵌入各种系统，限时限量加群，记得扫码哦
-        Ant Design Vue 3 已正式发布，并成为默认文档。
+      <a href="https://form.antdv.com">立即体验</a>
-        <a href="https://www.antdv.com/docs/vue/migration-v3-cn">升级文档</a>
-      </template>
-      <template v-else>
-        Ant Design Vue 3 is now the new default version!
-        <a href="https://www.antdv.com/docs/vue/migration-v3">Update Doc</a>
-      </template>
 
       <CloseOutlined class="close-icon" @click="visibleAlertBanner = false" />
     </div>
@@ -134,10 +128,10 @@ export default defineComponent({
     watch(globalConfig?.blocked, val => {
       visibleAdblockBanner.value = val;
     });
-    const visibleAlertBanner = ref(!localStorage.getItem('v3'));
+    const visibleAlertBanner = ref(!localStorage.getItem('surelyform'));
     watch(visibleAlertBanner, () => {
       if (!visibleAlertBanner.value) {
-        localStorage.setItem('v3', version);
+        localStorage.setItem('surelyform', version);
       }
     });
     return {

site/src/views/ComponentOverview.less

@@ -43,3 +43,9 @@
     color: #bbb;
   }
 }
+
+.components-overview-img img {
+  object-fit: cover;
+  max-height: 100%;
+  max-width: 100%;
+}

site/src/views/ComponentOverview.vue

@@ -80,37 +80,50 @@ export default defineComponent({
     const inputRef = ref();
     const { dataSource } = useMenus();
     const menuItems = computed(() => {
-      return dataSource.value
+      return [
-        .filter(i => i.order > -1)
+        {
-        .map(group => {
+          children: [
-          const components = group.children.filter(
+            {
-            (component: any) =>
+              category: 'Components',
-              !search.value.trim() ||
+              cols: 1,
-              component.title.toLowerCase().includes(search.value.trim().toLowerCase()) ||
+              cover: 'https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg',
-              (component.subtitle || '').toLowerCase().includes(search.value.trim().toLowerCase()),
+              path: 'https://surely.cool/',
-          );
+              subtitle: '更强大的表格',
-          return { ...group, children: components };
+              title: 'Surely Table',
-        })
+              type: 'Advanced And Powerful',
-        .filter(i => i.children.length)
+              target: '_blank',
-        .concat([
+            },
-          {
+            {
-            children: [
+              category: 'Components',
-              {
+              cols: 1,
-                category: 'Components',
+              cover: 'https://aliyuncdn.antdv.com/form/static/assets/landing-config.4f9d5425.png',
-                cols: 1,
+              path: 'https://form.antdv.com/',
-                cover: 'https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg',
+              subtitle: '在线表单',
-                path: 'https://surely.cool/',
+              title: 'Surely Form',
-                subtitle: '更强大的表格',
+              type: 'Advanced And Powerful',
-                title: 'Powerful Table',
+              target: '_blank',
-                type: 'Advanced And Powerful',
+            },
-                target: '_blank',
+          ],
-              },
+          enTitle: 'Advanced And Powerful',
-            ],
+          title: '更强大',
-            enTitle: 'Advanced And Powerful',
+          order: 0,
-            title: '更强大',
+        },
-            order: 0,
+      ].concat(
-          },
+        dataSource.value
-        ]);
+          .filter(i => i.order > -1)
+          .map(group => {
+            const components = group.children.filter(
+              (component: any) =>
+                !search.value.trim() ||
+                component.title.toLowerCase().includes(search.value.trim().toLowerCase()) ||
+                (component.subtitle || '')
+                  .toLowerCase()
+                  .includes(search.value.trim().toLowerCase()),
+            );
+            return { ...group, children: components };
+          })
+          .filter(i => i.children.length),
+      );
     });
     onMounted(() => {
       inputRef.value.focus();