feat: cloud sync playground (#662)

* feat: add workspace playground page * feat: add all demands to playground Co-authored-by: tzhangchi <terry.zhangchi@outlook.com>
2026-02-12 04:18:54 +00:00 · 2023-01-03 20:24:40 +08:00
parent b309e2670d
commit b6993ca3ba
21 changed files with 2475 additions and 589 deletions
--- a/packages/app/next.config.js
+++ b/packages/app/next.config.js
@@ -70,4 +70,9 @@ const withDebugLocal = require('next-debug-local')(
  }
 );

-module.exports = withDebugLocal(nextConfig);
+const withPWA = require('next-pwa')({
+  dest: 'public',
+  disable: process.env.NODE_ENV !== 'production',
+});
+
+module.exports = withDebugLocal(withPWA(nextConfig));
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -38,7 +38,7 @@
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-i18next": "^11.18.4",
-    "yjs": "^13.5.43"
+    "yjs": "^13.5.44"
  },
  "devDependencies": {
    "@types/node": "18.7.18",
@@ -51,6 +51,7 @@
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "raw-loader": "^4.0.2",
+    "next-pwa": "^5.6.0",
    "typescript": "4.8.3"
  },
  "eslintConfig": {
--- a/packages/app/public/apple-touch-icon.png
+++ b/packages/app/public/apple-touch-icon.png
--- a/packages/app/public/chrome-192x192.png
+++ b/packages/app/public/chrome-192x192.png
--- a/packages/app/public/manifest.json
+++ b/packages/app/public/manifest.json
@@ -0,0 +1,17 @@
+{
+  "name": "AFFiNE",
+  "short_name": "AFFiNE",
+  "icons": [
+    {
+      "src": "/chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait"
+}
--- a/packages/app/src/components/quick-search/style.ts
+++ b/packages/app/src/components/quick-search/style.ts
@@ -73,7 +73,11 @@ export const StyledInputContent = styled('div')(({ theme }) => {
  };
 });
 export const StyledShortcut = styled('div')(({ theme }) => {
-  return { color: theme.colors.placeHolderColor, fontSize: theme.font.sm };
+  return {
+    color: theme.colors.placeHolderColor,
+    fontSize: theme.font.sm,
+    whiteSpace: 'nowrap',
+  };
 });

 export const StyledLabel = styled('label')(({ theme }) => {
--- a/packages/app/src/pages/_app.tsx
+++ b/packages/app/src/pages/_app.tsx
@@ -17,6 +17,8 @@ import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { PageLoading } from '@/components/loading';
+import Head from 'next/head';
+
 const ThemeProvider = dynamic(() => import('@/providers/themeProvider'), {
  ssr: false,
 });
@@ -37,6 +39,15 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {

  return (
    <>
+      <Head>
+        <meta name="theme-color" content="#fafafa" />
+        <link rel="manifest" href="/manifest.json" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/icons/apple-touch-icon.png"
+        />
+      </Head>
      <Logger />
      <ProviderComposer
        contexts={[
--- a/packages/app/src/pages/workspace/[workspaceId]/playground.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/playground.tsx
@@ -0,0 +1,90 @@
+import { styled } from '@/styles';
+
+import { ReactElement, ReactNode } from 'react';
+import WorkspaceLayout from '@/components/workspace-layout';
+import { Button } from '@/ui/button';
+
+export const FeatureCardDiv = styled('section')({
+  width: '800px',
+  border: '1px #eee solid',
+  margin: '20px auto',
+  minHeight: '100px',
+  padding: '15px',
+});
+const FeatureCard = (props: {
+  name: string;
+  children: ReactNode | ReactNode[];
+}) => {
+  return (
+    <FeatureCardDiv>
+      <h1>Feature - {props.name}</h1>
+      {props.children}
+    </FeatureCardDiv>
+  );
+};
+
+export const Playground = () => {
+  return (
+    <>
+      <FeatureCard name="Account">
+        <Button>Sign In</Button>
+        <Button>Sign Out</Button>
+      </FeatureCard>
+
+      <FeatureCard name="Workspace List">
+        <ul>
+          <li>AFFiNE Demo</li>
+          <li>AFFiNE XXX</li>
+        </ul>
+        <Button>New Workspace</Button>
+      </FeatureCard>
+
+      <FeatureCard name="Active Workspace">
+        <div>Workspace Name /[Workspace Members Count]/[Workspace Avatar]</div>
+        <div>Cloud Sync [Yes/No]</div>
+        <div>Auth [Public/Private]</div>
+        <div>
+          <Button>Update Workspace Name</Button>
+          <Button>Upload Workspace Avatar</Button>
+          <Button>Update Workspace Avatar</Button>
+        </div>
+
+        <div>
+          <Button>Leave Workspace</Button>
+          <Button>Delete Workspace </Button>
+        </div>
+        <div>
+          Cloud Sync <Button>Enalbe</Button>
+          <Button>Disable</Button>
+        </div>
+      </FeatureCard>
+
+      <FeatureCard name="Workspace Members">
+        <Button>Add Member</Button>
+        <ul>
+          <li>
+            terrychinaz@gmail <button>Delete Members</button>
+          </li>
+        </ul>
+      </FeatureCard>
+
+      <FeatureCard name="Cloud Search">
+        <input type="text" value="AFFiNE Keywords" />
+        <Button>Search</Button>
+        <ul></ul>
+      </FeatureCard>
+
+      <FeatureCard name="Import/Exeport Worpsace">
+        <div>Workspace Name</div>
+        <Button> Export Workspace</Button>
+        <Button> Import Workspace</Button>
+      </FeatureCard>
+    </>
+  );
+};
+
+Playground.getLayout = function getLayout(page: ReactElement) {
+  return <WorkspaceLayout>{page}</WorkspaceLayout>;
+};
+
+export default Playground;
--- a/packages/app/src/templates/Welcome-to-AFFiNE-Alpha-v2.0.md
+++ b/packages/app/src/templates/Welcome-to-AFFiNE-Alpha-v2.0.md
@@ -18,7 +18,7 @@ Let us know what you think of this latest version.
 ### In this release, you can now:

 - Manage your pages from the collapsible **sidebar**, which allows you to add **favourites** and restore deleted files from the **trash**
- Search through all your content with the quick search - activate with `Ctrl/⌘ + ?`
+- Search through all your content with the quick search - activate with `Ctrl/⌘ + K`
 - Quickly format text with the **pop-up toolbar** (highlight any text to give it a try)
 - Copy and paste **images** into your pages, resize them and add captions
 - Add horizontal line dividers to your text with `---` and `***`
--- a/packages/app/src/types.ts
+++ b/packages/app/src/types.ts
@@ -1,6 +1,7 @@
 declare global {
  interface Window {
    CLIENT_APP?: boolean;
+    __editoVersion?: string;
  }
 }

--- a/packages/app/src/utils/print-build-info.ts
+++ b/packages/app/src/utils/print-build-info.ts
@@ -1,5 +1,5 @@
 import getConfig from 'next/config';
-// import { isDev } from './env';
+import { isDev } from './env';
 type Config = {
  BUILD_DATE: string;
  NODE_ENV: string;
@@ -14,9 +14,9 @@ const nextConfig = getConfig();
 const publicRuntimeConfig: Config = nextConfig.publicRuntimeConfig;

 const printBuildInfo = () => {
-  // if (isDev) {
-  //   return;
-  // }
+  if (isDev) {
+    return;
+  }
  console.group('Build info');
  console.log('Project:', publicRuntimeConfig.PROJECT_NAME);
  console.log(
@@ -30,6 +30,7 @@ const printBuildInfo = () => {
    `${publicRuntimeConfig.NODE_ENV}${publicRuntimeConfig.CI ? '(ci)' : ''}`
  );
  console.log('Editor Version:', publicRuntimeConfig.EDITOR_VERSION);
+
  console.log('Version:', publicRuntimeConfig.VERSION);
  console.log(
    'AFFiNE is an open source project, you can view its source code on GitHub!'
@@ -40,6 +41,12 @@ const printBuildInfo = () => {
  console.groupEnd();
 };

+function setWindowEditorVersion() {
+  // when it is not SSR
+  if (typeof window !== 'undefined') {
+    window.__editoVersion = publicRuntimeConfig.EDITOR_VERSION;
+  }
+}
 printBuildInfo();
-
+setWindowEditorVersion();
 export {};