feat: doc vip with notion component

rowthan · Jul 9, 2024 · 5152683 · 5152683
1 parent 2106182
commit 5152683
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 40 deletions.
diff --git a/apps/web/layouts/BasicLayout.tsx b/apps/web/layouts/BasicLayout.tsx
@@ -4,6 +4,7 @@ import Breadcrumbs from '../components/Breadcrumbs'
 import ErrorBoundary from '../components/debug/ErrorBound'
 import Error from 'components/debug/ErrorTip'
 import {Asides} from '../components/HelpAside'
+import Footer from "../components/Footer";
 
 // 给普通用户访问的页面，基础layout
 export default function BasicLayout(
@@ -53,7 +54,10 @@ export default function BasicLayout(
           {/*    <Breadcrumbs />*/}
           {/*  </nav>*/}
           {/*)}*/}
-          <main className="mx-auto relative min-h-fill">{children}</main>
+          <main className="mx-auto relative min-h-fill">
+              {children}
+          </main>
+          {footer && <Footer />}
           <Asides/>
         </>
       </ErrorBoundary>

diff --git a/apps/web/layouts/Doc.tsx b/apps/web/layouts/Doc.tsx
@@ -1,7 +1,5 @@
 import { type ReactNode } from 'react'
 import 'react-notion-x/src/styles.css'
-import HelpAside from '../components/HelpAside'
-import BasicLayout from "./BasicLayout";
 
 // core styles shared by all of react-notion-x (required)
 interface Props {
@@ -11,10 +9,9 @@ interface Props {
 export default function Doc(props: Props) {
   const { children } = props
   return (
-    <BasicLayout>
+    <>
       {children}
-    </BasicLayout>
+    </>
   )
 }
 
-Doc.defaultProps = {}
diff --git a/apps/web/pages/ext/achieve.tsx b/apps/web/pages/ext/achieve.tsx
@@ -10,6 +10,7 @@ import dayjs from "dayjs";
 import {Button} from "../../@/components/ui/button";
 import {openHtml} from "../../service/offline";
 import Empty from "../../components/Empty";
+import ExtLayout from "../../layouts/ExtLayout";
 
 interface Props {
     css?: string
@@ -78,7 +79,7 @@ const Achieve: FC<PropsWithChildren<Props>> = (props) => {
     }, [])
 
     return (
-        <BasicLayout nav={false}>
+        <ExtLayout>
             <div className={'m-2'}>
                 {
                     data.map((url)=>(
@@ -98,7 +99,7 @@ const Achieve: FC<PropsWithChildren<Props>> = (props) => {
                 }
 
             </div>
-        </BasicLayout>
+        </ExtLayout>
     );
 }
 export default Achieve
diff --git a/apps/web/pages/ext/setting.tsx b/apps/web/pages/ext/setting.tsx
@@ -1,7 +1,6 @@
 import SettingIndex from 'components/setting/Setting'
 import { HashRouter as Router, Route, Routes } from 'react-router-dom'
 import React from 'react'
-import BasicLayout from 'layouts/BasicLayout'
 import RedirectToExt from '../../components/RedirectToExt'
 import { useMountedState } from 'react-use'
 import ExtLayout from "../../layouts/ExtLayout";

diff --git a/apps/web/pages/vip.tsx b/apps/web/pages/vip.tsx
@@ -1,7 +1,13 @@
-import {type ReactNode} from 'react';
+import React, {type ReactNode} from 'react';
 import NotionContent from "../components/notion/NotionContent";
 import { getNotionDocDetail } from 'service/server/doc';
 import { NotionDocProp } from 'components/notion/NotionDoc';
+import ProPlan from "./widget/pro-plan";
+import Plans from "../components/pro/Plans";
+import {PlanInfo} from "../typing";
+import {getPlansFromServer} from "../service/server/api";
+import BasicLayout from "../layouts/BasicLayout";
+import ExtLayout from "../layouts/ExtLayout";
 
 interface Props {
     children?: ReactNode;
@@ -10,21 +16,32 @@ const NOTION_DOC_ID = '/pro-plan/tips'
 // This function gets called at build time
 export async function getStaticProps() {
     // Call an external API endpoint to get posts
-    const res = await getNotionDocDetail(NOTION_DOC_ID)   
+    const res = await getNotionDocDetail(NOTION_DOC_ID);
+    const plans = await getPlansFromServer();
     // By returning { props: { posts } }, the Blog component
     // will receive `posts` as a prop at build time
-    return res;
+    return {
+        props: {
+            doc: res.props,
+            plans: plans
+        }
+    };
 }
 
-export default function expired1(props: NotionDocProp) {
+export default function expired1(props: {doc: NotionDocProp,plans: PlanInfo[]}) {
+    const { plans,doc } = props
+
     return (
-        <div className="">
+        <BasicLayout>
+            <div className={'m-auto px-6 max-w-7xl py-16'}>
+                <Plans plans={plans || []} />
+            </div>
             {/*https://page-note.notion.site/da8bdda50ec344f488d7c84ba52faea5?pvs=4*/}
             <NotionContent
                 docId={NOTION_DOC_ID}
-                notionDoc={props}
+                notionDoc={props.doc}
                 // docId={'97d2bd1d27284a9da670fdfb9b25d0fe'}
             />
-        </div>
+        </BasicLayout>
     );
 }
diff --git a/apps/web/service/server/api.ts b/apps/web/service/server/api.ts
@@ -1,5 +1,6 @@
 // 制定获取 notion 数据源的接口；默认请求自身服务。
 import {NotionDocProp} from "../../components/notion/NotionDoc";
+import {PlanInfo} from "../../typing";
 export const WEB_HOST = process.env.NODE_ENV === 'development'
     ? "http://localhost:3000"
     : ( process.env.WEB_HOST || "https://pagenote.cn");
@@ -14,3 +15,47 @@ export async function getNotionDetailFromServer(id: string): Promise<NotionDocPr
         console.error('fetch doc detail error',e)
     }
 }
+
+
+export async function getPlansFromServer(): Promise<PlanInfo[]> {
+    const data = await fetch(
+        `${process.env.API_HOST}/api/graph/book?query=query{plans{dataJson}}`,
+        {
+            headers: {
+                'x-pagenote-priority': '1.1'
+            }
+        }
+    ).then(async function (response) {
+        const res = await response.json()
+        const dataJson = res.data?.plans?.dataJson
+        if (dataJson) {
+            const plans: PlanInfo[] = JSON.parse(dataJson)
+            return plans
+        }
+    }).catch(function () {
+        return [{
+            title: '终身VIP',
+            description: '没有时限的VIP用户。',
+            price: 125,
+            duration: '终身',
+            unit: '元(累计)',
+            bg: 'indigo',
+            role: 2,
+            deduct: true,
+            final: true,
+            rights: [{
+                label: '解锁所有功能',
+            }],
+            payments: [{
+                id: 'alipay',
+                label: '支付宝',
+                url: "https://pagenote-public.oss-cn-beijing.aliyuncs.com/_static/alipay.png",
+            },{
+                id:'wechat',
+                label: '微信',
+                url: "https://pagenote-public.oss-cn-beijing.aliyuncs.com/0000/wechat_pay.jpg?x-oss-process=style/q75",
+            }]
+        },]
+    })
+    return data || [];
+}
diff --git a/apps/web/typing/index.ts b/apps/web/typing/index.ts
@@ -16,8 +16,8 @@ export interface PlanInfo {
 
   rights: {
     label: string
-    allowed: boolean
-    disAllowLabel: string
+    allowed?: boolean
+    disAllowLabel?: string
   }[]
 
   payments:{

diff --git a/yarn.lock b/yarn.lock
@@ -3189,28 +3189,6 @@
   dependencies:
     "@octokit/openapi-types" "^18.0.0"
 
-"@pagenote/actions@^0.1.1-next.2":
-  version "0.1.3"
-  resolved "https://registry.npmjs.org/@pagenote/actions/-/actions-0.1.3.tgz"
-  integrity sha512-pxAazrQ9LDiP2/i6LyifToVhODEaVjDAam/sfqPoDG7Tlaf/UKGWfRhp9kRUVxK+WfqdNEzHJTZM2hGUW/ESVA==
-  dependencies:
-    expr-eval "^2.0.2"
-    handlebars "^4.7.8"
-    js-yaml "^4.1.0"
-    lodash "^4.17.21"
-    marked "^11.2.0"
-
-"@pagenote/shared@^1.14.28-next.0", "@pagenote/shared@^1.14.36-next.0", "@pagenote/shared@^1.14.36-next.1":
-  version "1.14.39"
-  resolved "https://registry.npmjs.org/@pagenote/shared/-/shared-1.14.39.tgz"
-  integrity sha512-GWYpcs24tzoJ1JLbM72dBm3uN45/1xYNwVZP4I/drPtyA4ZwexlRE2EKKWqeQ1sNRzyuHSVGdPH+Md+f1zfSuw==
-  dependencies:
-    "@pagenote/bridge" "^1.0.17"
-    colord "^2.9.3"
-    lodash "^4.17.21"
-    md5 "^2.3.0"
-    mustache "^4.2.0"
-
 "@parcel/[email protected]":
   version "2.11.0"
   resolved "https://registry.npmmirror.com/@parcel/bundler-default/-/bundler-default-2.11.0.tgz"