feat(core): import template (#8000)

2026-02-12 04:18:54 +00:00 · 2024-08-29 04:01:35 +00:00
parent 4ec45a247e
commit b96ad57568
67 changed files with 1835 additions and 974 deletions
--- a/packages/frontend/component/src/components/card/workspace-card/index.tsx
+++ b/packages/frontend/component/src/components/card/workspace-card/index.tsx
@@ -1,111 +0,0 @@
-import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
-import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
-import { WorkspaceFlavour } from '@affine/env/workspace';
-import { CollaborationIcon, SettingsIcon } from '@blocksuite/icons/rc';
-import type { WorkspaceMetadata } from '@toeverything/infra';
-import { type MouseEvent, useCallback } from 'react';
-
-import { Button } from '../../../ui/button';
-import { Skeleton } from '../../../ui/skeleton';
-import * as styles from './styles.css';
-
-export interface WorkspaceTypeProps {
-  flavour: WorkspaceFlavour;
-  isOwner: boolean;
-}
-
-export interface WorkspaceCardProps {
-  currentWorkspaceId?: string | null;
-  meta: WorkspaceMetadata;
-  onClick: (metadata: WorkspaceMetadata) => void;
-  onSettingClick: (metadata: WorkspaceMetadata) => void;
-  onEnableCloudClick?: (meta: WorkspaceMetadata) => void;
-  isOwner?: boolean;
-  openingId?: string | null;
-  enableCloudText?: string;
-  name?: string;
-}
-
-export const WorkspaceCardSkeleton = () => {
-  return (
-    <div>
-      <div className={styles.card} data-testid="workspace-card">
-        <Skeleton variant="circular" width={28} height={28} />
-        <Skeleton
-          variant="rectangular"
-          height={43}
-          width={220}
-          style={{ marginLeft: '12px' }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export const WorkspaceCard = ({
-  onClick,
-  onSettingClick,
-  onEnableCloudClick,
-  openingId,
-  currentWorkspaceId,
-  meta,
-  isOwner = true,
-  enableCloudText = 'Enable Cloud',
-  name,
-}: WorkspaceCardProps) => {
-  const isLocal = meta.flavour === WorkspaceFlavour.LOCAL;
-  const displayName = name ?? UNTITLED_WORKSPACE_NAME;
-
-  const onEnableCloud = useCallback(
-    (e: MouseEvent) => {
-      e.stopPropagation();
-      onEnableCloudClick?.(meta);
-    },
-    [meta, onEnableCloudClick]
-  );
-  return (
-    <div
-      className={styles.card}
-      data-active={meta.id === currentWorkspaceId}
-      data-testid="workspace-card"
-      onClick={useCallback(() => {
-        onClick(meta);
-      }, [onClick, meta])}
-    >
-      <WorkspaceAvatar
-        key={meta.id}
-        meta={meta}
-        rounded={3}
-        size={28}
-        name={name}
-        colorfulFallback
-      />
-      <div className={styles.workspaceInfo}>
-        <div className={styles.workspaceTitle}>{displayName}</div>
-
-        <div className={styles.actionButtons}>
-          {isLocal ? (
-            <Button
-              loading={!!openingId && openingId === meta.id}
-              disabled={!!openingId}
-              className={styles.showOnCardHover}
-              onClick={onEnableCloud}
-            >
-              {enableCloudText}
-            </Button>
-          ) : null}
-          {isOwner ? null : <CollaborationIcon />}
-          <div
-            className={styles.settingButton}
-            onClick={e => {
-              e.stopPropagation();
-              onSettingClick(meta);
-            }}
-          >
-            <SettingsIcon width={16} height={16} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
--- a/packages/frontend/component/src/components/card/workspace-card/styles.css.ts
+++ b/packages/frontend/component/src/components/card/workspace-card/styles.css.ts
@@ -1,94 +0,0 @@
-import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
-
-import { displayFlex, textEllipsis } from '../../../styles';
-
-export const card = style({
-  width: '100%',
-  cursor: 'pointer',
-  padding: '8px 12px',
-  borderRadius: 4,
-  // border: `1px solid ${borderColor}`,
-  boxShadow: 'inset 0 0 0 1px transparent',
-  ...displayFlex('flex-start', 'flex-start'),
-  transition: 'background .2s',
-  position: 'relative',
-  color: cssVar('textSecondaryColor'),
-  background: 'transparent',
-  display: 'flex',
-  alignItems: 'center',
-  gap: 12,
-
-  selectors: {
-    '&:hover': {
-      background: cssVar('hoverColor'),
-    },
-    '&[data-active="true"]': {
-      boxShadow: 'inset 0 0 0 1px ' + cssVar('brandColor'),
-    },
-  },
-});
-
-export const workspaceInfo = style({
-  width: 0,
-  flex: 1,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: 2,
-});
-
-export const workspaceTitle = style({
-  width: 0,
-  flex: 1,
-  fontSize: cssVar('fontSm'),
-  fontWeight: 500,
-  lineHeight: '22px',
-  maxWidth: '190px',
-  color: cssVar('textPrimaryColor'),
-  ...textEllipsis(1),
-});
-
-export const actionButtons = style({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-export const settingButtonWrapper = style({});
-
-export const settingButton = style({
-  transition: 'all 0.13s ease',
-  width: 0,
-  height: 20,
-  overflow: 'hidden',
-  marginLeft: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  placeItems: 'center',
-
-  borderRadius: 4,
-  boxShadow: 'none',
-  background: 'transparent',
-  cursor: 'pointer',
-
-  selectors: {
-    [`.${card}:hover &`]: {
-      width: 20,
-      marginLeft: 8,
-      boxShadow: cssVar('shadow1'),
-      background: cssVar('white80'),
-    },
-  },
-});
-
-export const showOnCardHover = style({
-  visibility: 'hidden',
-  opacity: 0,
-  selectors: {
-    [`.${card}:hover &`]: {
-      visibility: 'visible',
-      opacity: 1,
-    },
-  },
-});
--- a/packages/frontend/component/src/components/workspace-list/index.css.ts
+++ b/packages/frontend/component/src/components/workspace-list/index.css.ts
@@ -1,8 +0,0 @@
-import { style } from '@vanilla-extract/css';
-export const workspaceItemStyle = style({
-  '@media': {
-    'screen and (max-width: 720px)': {
-      width: '100%',
-    },
-  },
-});
--- a/packages/frontend/component/src/components/workspace-list/index.tsx
+++ b/packages/frontend/component/src/components/workspace-list/index.tsx
@@ -1,71 +0,0 @@
-import { WorkspaceFlavour } from '@affine/env/workspace';
-import type { WorkspaceMetadata } from '@toeverything/infra';
-import { Suspense } from 'react';
-
-import {
-  WorkspaceCard,
-  WorkspaceCardSkeleton,
-} from '../../components/card/workspace-card';
-import { workspaceItemStyle } from './index.css';
-
-export interface WorkspaceListProps {
-  disabled?: boolean;
-  currentWorkspaceId?: string | null;
-  items: WorkspaceMetadata[];
-  openingId?: string | null;
-  onClick: (workspace: WorkspaceMetadata) => void;
-  onSettingClick: (workspace: WorkspaceMetadata) => void;
-  onEnableCloudClick?: (meta: WorkspaceMetadata) => void;
-  useIsWorkspaceOwner: (
-    workspaceMetadata: WorkspaceMetadata
-  ) => boolean | undefined;
-  useWorkspaceName: (
-    workspaceMetadata: WorkspaceMetadata
-  ) => string | undefined;
-}
-
-interface SortableWorkspaceItemProps extends Omit<WorkspaceListProps, 'items'> {
-  item: WorkspaceMetadata;
-}
-
-const SortableWorkspaceItem = ({
-  item,
-  openingId,
-  useIsWorkspaceOwner,
-  useWorkspaceName,
-  currentWorkspaceId,
-  onClick,
-  onSettingClick,
-  onEnableCloudClick,
-}: SortableWorkspaceItemProps) => {
-  const isOwner = useIsWorkspaceOwner?.(item);
-  const name = useWorkspaceName?.(item);
-  return (
-    <div className={workspaceItemStyle} data-testid="draggable-item">
-      <WorkspaceCard
-        currentWorkspaceId={currentWorkspaceId}
-        meta={item}
-        onClick={onClick}
-        onSettingClick={onSettingClick}
-        onEnableCloudClick={onEnableCloudClick}
-        openingId={openingId}
-        isOwner={isOwner}
-        name={name}
-      />
-    </div>
-  );
-};
-
-export const WorkspaceList = (props: WorkspaceListProps) => {
-  const workspaceList = props.items;
-
-  return workspaceList
-    .filter(
-      w => w.flavour !== WorkspaceFlavour.AFFINE_CLOUD || w.initialized === true
-    )
-    .map(item => (
-      <Suspense fallback={<WorkspaceCardSkeleton />} key={item.id}>
-        <SortableWorkspaceItem key={item.id} {...props} item={item} />
-      </Suspense>
-    ));
-};
--- a/packages/frontend/component/src/ui/menu/desktop/root.tsx
+++ b/packages/frontend/component/src/ui/menu/desktop/root.tsx
@@ -1,39 +1,41 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
-import { Fragment } from 'react';

 import type { MenuProps } from '../menu.types';
 import * as styles from '../styles.css';
+import * as desktopStyles from './styles.css';

 export const DesktopMenu = ({
  children,
  items,
  portalOptions,
  rootOptions,
-  noPortal,
  contentOptions: {
    className = '',
    style: contentStyle = {},
    ...otherContentOptions
  } = {},
 }: MenuProps) => {
-  const Wrapper = noPortal ? Fragment : DropdownMenu.Portal;
-  const wrapperProps = noPortal ? {} : portalOptions;
  return (
    <DropdownMenu.Root {...rootOptions}>
      <DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>

-      <Wrapper {...wrapperProps}>
+      <DropdownMenu.Portal {...portalOptions}>
        <DropdownMenu.Content
-          className={clsx(styles.menuContent, className)}
+          className={clsx(
+            styles.menuContent,
+            desktopStyles.contentAnimation,
+            className
+          )}
          sideOffset={5}
          align="start"
          style={{ zIndex: 'var(--affine-z-index-popover)', ...contentStyle }}
          {...otherContentOptions}
+          side="bottom"
        >
          {items}
        </DropdownMenu.Content>
-      </Wrapper>
+      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
 };
--- a/packages/frontend/component/src/ui/menu/desktop/styles.css.ts
+++ b/packages/frontend/component/src/ui/menu/desktop/styles.css.ts
@@ -0,0 +1,34 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+const slideDown = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(-10px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+});
+
+const slideUp = keyframes({
+  to: {
+    opacity: 0,
+    transform: 'translateY(-10px)',
+  },
+  from: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+});
+
+export const contentAnimation = style({
+  animation: `${slideDown} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
+  selectors: {
+    '&[data-state="closed"]': {
+      pointerEvents: 'none',
+      animation: `${slideUp} 150ms cubic-bezier(0.42, 0, 0.58, 1)`,
+      animationFillMode: 'forwards',
+    },
+  },
+});
--- a/packages/frontend/component/src/ui/menu/mobile/root.tsx
+++ b/packages/frontend/component/src/ui/menu/mobile/root.tsx
@@ -1,18 +1,11 @@
 import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
 import { Slot } from '@radix-ui/react-slot';
 import clsx from 'clsx';
-import {
-  Fragment,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';

 import { observeResize } from '../../../utils';
 import { Button } from '../../button';
-import { Modal, type ModalProps } from '../../modal';
+import { Modal } from '../../modal';
 import type { MenuProps } from '../menu.types';
 import type { SubMenuContent } from './context';
 import { MobileMenuContext } from './context';
@@ -22,7 +15,6 @@ import { MobileMenuSubRaw } from './sub';
 export const MobileMenu = ({
  children,
  items,
-  noPortal,
  contentOptions: {
    className,
    onPointerDownOutside,
@@ -56,25 +48,6 @@ export const MobileMenu = ({
    [onPointerDownOutside, rootOptions]
  );

-  const Wrapper = noPortal ? Fragment : Modal;
-  const wrapperProps = noPortal
-    ? {}
-    : ({
-        open: finalOpen,
-        onOpenChange,
-        width: '100%',
-        animation: 'slideBottom',
-        withoutCloseButton: true,
-        contentOptions: {
-          className: clsx(className, styles.mobileMenuModal),
-          ...otherContentOptions,
-        },
-        contentWrapperStyle: {
-          alignItems: 'end',
-          paddingBottom: 10,
-        },
-      } satisfies ModalProps);
-
  const onItemClick = useCallback((e: any) => {
    e.preventDefault();
    setOpen(prev => !prev);
@@ -127,7 +100,21 @@ export const MobileMenu = ({
      <MobileMenuContext.Provider
        value={{ subMenus, setSubMenus, setOpen: onOpenChange }}
      >
-        <Wrapper {...wrapperProps}>
+        <Modal
+          open={finalOpen}
+          onOpenChange={onOpenChange}
+          width="100%"
+          animation="slideBottom"
+          withoutCloseButton={true}
+          contentOptions={{
+            className: clsx(className, styles.mobileMenuModal),
+            ...otherContentOptions,
+          }}
+          contentWrapperStyle={{
+            alignItems: 'end',
+            paddingBottom: 10,
+          }}
+        >
          <div
            ref={sliderRef}
            className={styles.slider}
@@ -159,7 +146,7 @@ export const MobileMenu = ({
              </div>
            ))}
          </div>
-        </Wrapper>
+        </Modal>
      </MobileMenuContext.Provider>
    </>
  );
--- a/packages/frontend/component/src/ui/modal/modal.tsx
+++ b/packages/frontend/component/src/ui/modal/modal.tsx
@@ -153,14 +153,19 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
    );

    useEffect(() => {
-      const container = createContainer();
-      setContainer(container);
-      return () => {
-        setTimeout(() => {
-          container.remove();
-        }, 1000) as unknown as number;
-      };
-    }, []);
+      if (open) {
+        const container = createContainer();
+        setContainer(container);
+        return () => {
+          setTimeout(() => {
+            container.remove();
+          }, 1000) as unknown as number;
+        };
+      } else {
+        setContainer(null);
+        return;
+      }
+    }, [open]);

    const handlePointerDownOutSide = useCallback(
      (e: PointerDownOutsideEvent) => {