From 5e60d7c3b0485e3d98b9966e8120156bd262b433 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sun, 30 Oct 2022 14:05:52 +0800
Subject: [PATCH] doc: add surely form

---
 site/index.html                        |  1 +
 site/src/layouts/Menu.vue              | 23 ++++++++
 site/src/layouts/header/Navigation.vue | 40 ++++++++++----
 site/src/layouts/header/index.vue      | 16 ++----
 site/src/views/ComponentOverview.less  |  6 +++
 site/src/views/ComponentOverview.vue   | 75 +++++++++++++++-----------
 6 files changed, 108 insertions(+), 53 deletions(-)

diff --git a/site/index.html b/site/index.html
index 4f74ad425..1d6a6181d 100644
--- a/site/index.html
+++ b/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>
diff --git a/site/src/layouts/Menu.vue b/site/src/layouts/Menu.vue
index afb5027f7..dded6def7 100644
--- a/site/src/layouts/Menu.vue
+++ b/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">
diff --git a/site/src/layouts/header/Navigation.vue b/site/src/layouts/header/Navigation.vue
index 46fbb63a7..53e4b539c 100644
--- a/site/src/layouts/header/Navigation.vue
+++ b/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
-        href="https://www.surely.cool"
-        target="_blank"
-        rel="noopener noreferrer"
-        style="position: relative"
-      >
-        高级组件
-        <a-badge color="red" style="position: absolute; top: -35px; right: -15px" />
-      </a>
-    </a-menu-item>
+    <a-sub-menu v-if="isZhCN" key="advanced">
+      <template #title>
+        <span style="position: relative">
+          高级组件
+          <a-badge color="red" style="position: absolute; top: -35px; right: -15px" />
+        </span>
+      </template>
+      <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-sub-menu>
     <a-menu-item key="store">
       <a
         href="https://store.antdv.com/pro/"
diff --git a/site/src/layouts/header/index.vue b/site/src/layouts/header/index.vue
index 981f71e01..c5b922311 100644
--- a/site/src/layouts/header/index.vue
+++ b/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">
-      <template v-if="isZhCN">
-        Ant Design Vue 3 已正式发布，并成为默认文档。
-        <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>
+    <div v-if="visibleAlertBanner && isZhCN" class="alert-banner">
+      Surely Form 1.0 发布，快速搭建在线问卷，无缝嵌入各种系统，限时限量加群，记得扫码哦
+      <a href="https://form.antdv.com">立即体验</a>
 
       <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 {
diff --git a/site/src/views/ComponentOverview.less b/site/src/views/ComponentOverview.less
index b067d56ff..234470f95 100644
--- a/site/src/views/ComponentOverview.less
+++ b/site/src/views/ComponentOverview.less
@@ -43,3 +43,9 @@
     color: #bbb;
   }
 }
+
+.components-overview-img img {
+  object-fit: cover;
+  max-height: 100%;
+  max-width: 100%;
+}
diff --git a/site/src/views/ComponentOverview.vue b/site/src/views/ComponentOverview.vue
index 479bd2c34..468f742f0 100644
--- a/site/src/views/ComponentOverview.vue
+++ b/site/src/views/ComponentOverview.vue
@@ -80,37 +80,50 @@ export default defineComponent({
     const inputRef = ref();
     const { dataSource } = useMenus();
     const menuItems = computed(() => {
-      return 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)
-        .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,
-          },
-        ]);
+      return [
+        {
+          children: [
+            {
+              category: 'Components',
+              cols: 1,
+              cover: 'https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg',
+              path: 'https://surely.cool/',
+              subtitle: '更强大的表格',
+              title: 'Surely Table',
+              type: 'Advanced And Powerful',
+              target: '_blank',
+            },
+            {
+              category: 'Components',
+              cols: 1,
+              cover: 'https://aliyuncdn.antdv.com/form/static/assets/landing-config.4f9d5425.png',
+              path: 'https://form.antdv.com/',
+              subtitle: '在线表单',
+              title: 'Surely Form',
+              type: 'Advanced And Powerful',
+              target: '_blank',
+            },
+          ],
+          enTitle: 'Advanced And Powerful',
+          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();