feat(core): add page width property (#8775)

close AF-1655
2026-02-16 05:47:09 +08:00 · 2024-11-12 02:58:14 +00:00
parent 713551fbf1
commit 6fe2e42490
16 changed files with 190 additions and 22 deletions
--- a/packages/common/infra/src/modules/db/schema/schema.ts
+++ b/packages/common/infra/src/modules/db/schema/schema.ts
@@ -16,6 +16,7 @@ export const AFFiNE_WORKSPACE_DB_SCHEMA = {
    primaryMode: f.string().optional(),
    edgelessColorTheme: f.string().optional(),
    journal: f.string().optional(),
+    pageWidth: f.string().optional(),
  }),
  docCustomPropertyInfo: {
    id: f.string().primaryKey().optional().default(nanoid),
--- a/packages/common/infra/src/modules/doc/constants.ts
+++ b/packages/common/infra/src/modules/doc/constants.ts
@@ -45,4 +45,10 @@ export const BUILT_IN_CUSTOM_PROPERTY_TYPE = [
    show: 'always-hide',
    index: 'a0000007',
  },
+  {
+    id: 'pageWidth',
+    type: 'pageWidth',
+    show: 'always-hide',
+    index: 'a0000008',
+  },
 ] as DocCustomPropertyInfo[];
--- a/packages/frontend/core/src/commands/affine-settings.tsx
+++ b/packages/frontend/core/src/commands/affine-settings.tsx
@@ -174,10 +174,10 @@ export function registerAffineSettingsCommands({
    registerAffineCommand({
      id: `affine:change-full-width-layout`,
      label: () =>
-        `${t['com.affine.cmdk.affine.full-width-layout.to']()} ${t[
+        `${t[
          settings$.value.fullWidthLayout
-            ? 'com.affine.cmdk.affine.switch-state.off'
-            : 'com.affine.cmdk.affine.switch-state.on'
+            ? 'com.affine.cmdk.affine.default-page-width-layout.standard'
+            : 'com.affine.cmdk.affine.default-page-width-layout.full-width'
        ]()}`,
      category: 'affine:settings',
      icon: <SettingsIcon />,
--- a/packages/frontend/core/src/components/doc-properties/types/constant.tsx
+++ b/packages/frontend/core/src/components/doc-properties/types/constant.tsx
@@ -6,6 +6,7 @@ import {
  EdgelessIcon,
  FileIcon,
  HistoryIcon,
+  LongerIcon,
  NumberIcon,
  TagIcon,
  TextIcon,
@@ -19,6 +20,7 @@ import { DocPrimaryModeValue } from './doc-primary-mode';
 import { EdgelessThemeValue } from './edgeless-theme';
 import { JournalValue } from './journal';
 import { NumberValue } from './number';
+import { PageWidthValue } from './page-width';
 import { TagsValue } from './tags';
 import { TextValue } from './text';
 import type { PropertyValueProps } from './types';
@@ -100,6 +102,12 @@ export const DocPropertyTypes = {
    name: 'com.affine.page-properties.property.edgelessTheme',
    description: 'com.affine.page-properties.property.edgelessTheme.tooltips',
  },
+  pageWidth: {
+    icon: LongerIcon,
+    value: PageWidthValue,
+    name: 'com.affine.page-properties.property.pageWidth',
+    description: 'com.affine.page-properties.property.pageWidth.tooltips',
+  },
 } as Record<
  string,
  {
--- a/packages/frontend/core/src/components/doc-properties/types/page-width.css.ts
+++ b/packages/frontend/core/src/components/doc-properties/types/page-width.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+export const container = style({
+  paddingTop: '3px',
+  paddingBottom: '3px',
+});
--- a/packages/frontend/core/src/components/doc-properties/types/page-width.tsx
+++ b/packages/frontend/core/src/components/doc-properties/types/page-width.tsx
@@ -0,0 +1,61 @@
+import { PropertyValue, RadioGroup, type RadioItem } from '@affine/component';
+import { EditorSettingService } from '@affine/core/modules/editor-setting';
+import { useI18n } from '@affine/i18n';
+import { DocService, useLiveData, useService } from '@toeverything/infra';
+import { useCallback, useMemo } from 'react';
+
+import { container } from './page-width.css';
+import type { PageLayoutMode } from './types';
+
+export const PageWidthValue = () => {
+  const t = useI18n();
+  const editorSetting = useService(EditorSettingService).editorSetting;
+  const defaultPageWidth = useLiveData(editorSetting.settings$).fullWidthLayout;
+
+  const doc = useService(DocService).doc;
+  const pageWidth = useLiveData(doc.properties$.selector(p => p.pageWidth));
+
+  const radioValue =
+    pageWidth ??
+    ((defaultPageWidth ? 'fullWidth' : 'standard') as PageLayoutMode);
+
+  const radioItems = useMemo<RadioItem[]>(
+    () => [
+      {
+        value: 'standard' as PageLayoutMode,
+        label:
+          t[
+            'com.affine.settings.editorSettings.page.default-page-width.standard'
+          ](),
+        testId: 'standard-width-trigger',
+      },
+      {
+        value: 'fullWidth' as PageLayoutMode,
+        label:
+          t[
+            'com.affine.settings.editorSettings.page.default-page-width.full-width'
+          ](),
+        testId: 'full-width-trigger',
+      },
+    ],
+    [t]
+  );
+
+  const handleChange = useCallback(
+    (value: PageLayoutMode) => {
+      doc.record.setProperty('pageWidth', value);
+    },
+    [doc]
+  );
+  return (
+    <PropertyValue className={container} hoverable={false}>
+      <RadioGroup
+        width={194}
+        itemHeight={24}
+        value={radioValue}
+        onChange={handleChange}
+        items={radioItems}
+      />
+    </PropertyValue>
+  );
+};
--- a/packages/frontend/core/src/components/doc-properties/types/types.ts
+++ b/packages/frontend/core/src/components/doc-properties/types/types.ts
@@ -5,3 +5,5 @@ export interface PropertyValueProps {
  value: any;
  onChange: (value: any) => void;
 }
+
+export type PageLayoutMode = 'standard' | 'fullWidth';
--- a/packages/frontend/core/src/components/hooks/affine/use-register-blocksuite-editor-commands.tsx
+++ b/packages/frontend/core/src/components/hooks/affine/use-register-blocksuite-editor-commands.tsx
@@ -5,6 +5,7 @@ import {
 } from '@affine/core/commands';
 import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import type { Editor } from '@affine/core/modules/editor';
+import { EditorSettingService } from '@affine/core/modules/editor-setting';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/favorite';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useI18n } from '@affine/i18n';
@@ -30,6 +31,11 @@ export function useRegisterBlocksuiteEditorCommands(editor: Editor) {
  const t = useI18n();
  const workspace = useService(WorkspaceService).workspace;

+  const editorSetting = useService(EditorSettingService).editorSetting;
+  const defaultPageWidth = useLiveData(editorSetting.settings$).fullWidthLayout;
+  const pageWidth = useLiveData(doc.properties$.selector(p => p.pageWidth));
+  const checked = pageWidth ? pageWidth === 'fullWidth' : defaultPageWidth;
+
  const favAdapter = useService(CompatibleFavoriteItemsAdapter);
  const favorite = useLiveData(favAdapter.isFavorite$(docId, 'doc'));
  const trash = useLiveData(doc.trash$);
@@ -159,6 +165,24 @@ export function useRegisterBlocksuiteEditorCommands(editor: Editor) {
      })
    );

+    unsubs.push(
+      registerAffineCommand({
+        id: `editor:page-set-width`,
+        preconditionStrategy: () => mode === 'page',
+        category: `editor:page`,
+        icon: <PageIcon />,
+        label: checked
+          ? t['com.affine.cmdk.affine.current-page-width-layout.standard']()
+          : t['com.affine.cmdk.affine.current-page-width-layout.full-width'](),
+        async run() {
+          doc.record.setProperty(
+            'pageWidth',
+            checked ? 'standard' : 'fullWidth'
+          );
+        },
+      })
+    );
+
    // TODO(@Peng): should not show duplicate for journal
    unsubs.push(
      registerAffineCommand({
@@ -308,5 +332,8 @@ export function useRegisterBlocksuiteEditorCommands(editor: Editor) {
    docId,
    doc,
    openInfoModal,
+    pageWidth,
+    defaultPageWidth,
+    checked,
  ]);
 }
--- a/packages/frontend/core/src/components/page-detail-editor.tsx
+++ b/packages/frontend/core/src/components/page-detail-editor.tsx
@@ -1,7 +1,7 @@
 import './page-detail-editor.css';

 import type { AffineEditorContainer } from '@blocksuite/affine/presets';
-import { useLiveData, useService } from '@toeverything/infra';
+import { DocService, useLiveData, useService } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
 import clsx from 'clsx';
 import type { CSSProperties } from 'react';
@@ -33,6 +33,9 @@ export const PageDetailEditor = ({ onLoad }: PageDetailEditorProps) => {
  const mode = useLiveData(editor.mode$);
  const defaultOpenProperty = useLiveData(editor.defaultOpenProperty$);

+  const doc = useService(DocService).doc;
+  const pageWidth = useLiveData(doc.properties$.selector(p => p.pageWidth));
+
  const isSharedMode = editor.isSharedMode;
  const editorSetting = useService(EditorSettingService).editorSetting;
  const settings = useLiveData(
@@ -42,6 +45,9 @@ export const PageDetailEditor = ({ onLoad }: PageDetailEditorProps) => {
      fullWidthLayout: s.fullWidthLayout,
    }))
  );
+  const fullWidthLayout = pageWidth
+    ? pageWidth === 'fullWidth'
+    : settings.fullWidthLayout;

  const value = useMemo(() => {
    const fontStyle = fontStyleOptions.find(
@@ -60,7 +66,7 @@ export const PageDetailEditor = ({ onLoad }: PageDetailEditorProps) => {
  return (
    <Editor
      className={clsx(styles.editor, {
-        'full-screen': !isSharedMode && settings.fullWidthLayout,
+        'full-screen': !isSharedMode && fullWidthLayout,
        'is-public': isSharedMode,
      })}
      style={
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/page.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/page.tsx
@@ -1,20 +1,46 @@
-import { Switch } from '@affine/component';
+import { RadioGroup, type RadioItem, Switch } from '@affine/component';
 import {
  SettingRow,
  SettingWrapper,
 } from '@affine/component/setting-components';
+import type { PageLayoutMode } from '@affine/core/components/doc-properties/types/types';
 import { EditorSettingService } from '@affine/core/modules/editor-setting';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+
+import { settingWrapper } from './style.css';

 export const Page = () => {
  const t = useI18n();
  const editorSetting = useService(EditorSettingService).editorSetting;
  const settings = useLiveData(editorSetting.settings$);

+  const radioItems = useMemo<RadioItem[]>(
+    () => [
+      {
+        value: 'standard' as PageLayoutMode,
+        label:
+          t[
+            'com.affine.settings.editorSettings.page.default-page-width.standard'
+          ](),
+        testId: 'standard-width-trigger',
+      },
+      {
+        value: 'fullWidth' as PageLayoutMode,
+        label:
+          t[
+            'com.affine.settings.editorSettings.page.default-page-width.full-width'
+          ](),
+        testId: 'full-width-trigger',
+      },
+    ],
+    [t]
+  );
+
  const handleFullWidthLayoutChange = useCallback(
-    (checked: boolean) => {
+    (value: PageLayoutMode) => {
+      const checked = value === 'fullWidth';
      editorSetting.set('fullWidthLayout', checked);
    },
    [editorSetting]
@@ -35,14 +61,18 @@ export const Page = () => {
  return (
    <SettingWrapper title={t['com.affine.settings.editorSettings.page']()}>
      <SettingRow
-        name={t['com.affine.settings.editorSettings.page.full-width.title']()}
+        name={t[
+          'com.affine.settings.editorSettings.page.default-page-width.title'
+        ]()}
        desc={t[
-          'com.affine.settings.editorSettings.page.full-width.description'
+          'com.affine.settings.editorSettings.page.default-page-width.description'
        ]()}
      >
-        <Switch
-          data-testid="full-width-layout-trigger"
-          checked={settings.fullWidthLayout}
+        <RadioGroup
+          items={radioItems}
+          value={settings.fullWidthLayout ? 'fullWidth' : 'standard'}
+          width={250}
+          className={settingWrapper}
          onChange={handleFullWidthLayoutChange}
        />
      </SettingRow>
--- a/packages/frontend/i18n/src/i18n-completenesses.json
+++ b/packages/frontend/i18n/src/i18n-completenesses.json
@@ -7,16 +7,16 @@
  "es-AR": 14,
  "es-CL": 16,
  "es": 14,
-  "fr": 71,
+  "fr": 70,
  "hi": 2,
  "it": 1,
  "ja": 94,
-  "ko": 84,
+  "ko": 83,
  "pl": 0,
  "pt-BR": 91,
-  "ru": 78,
+  "ru": 77,
  "sv-SE": 5,
  "ur": 3,
  "zh-Hans": 95,
-  "zh-Hant": 93
+  "zh-Hant": 92
 }
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -333,6 +333,10 @@
  "com.affine.cmdk.affine.editor.trash-footer-hint": "This doc has been moved to the trash, you can either restore or permanently delete it.",
  "com.affine.cmdk.affine.font-style.to": "Change font style to",
  "com.affine.cmdk.affine.full-width-layout.to": "Change full width layout to",
+  "com.affine.cmdk.affine.default-page-width-layout.standard": "Change default width for new pages in to standard",
+  "com.affine.cmdk.affine.default-page-width-layout.full-width": "Change default width for new pages in to full width",
+  "com.affine.cmdk.affine.current-page-width-layout.standard": "Change current page width to standard",
+  "com.affine.cmdk.affine.current-page-width-layout.full-width": "Change current page width to full width",
  "com.affine.cmdk.affine.getting-started": "Getting started",
  "com.affine.cmdk.affine.import-workspace": "Import workspace",
  "com.affine.cmdk.affine.insert-link": "Insert this link to the current doc",
@@ -681,6 +685,7 @@
  "com.affine.page-properties.property.createdAt": "Created",
  "com.affine.page-properties.property.updatedAt": "Updated",
  "com.affine.page-properties.property.edgelessTheme": "Edgeless theme",
+  "com.affine.page-properties.property.pageWidth": "Page width",
  "com.affine.page-properties.property.tags.tooltips": "Add relevant identifiers or categories to the doc. Useful for organizing content, improving searchability, and grouping related docs together.",
  "com.affine.page-properties.property.journal.tooltips": "Indicates that this doc is a journal entry or daily note. Facilitates easy capture of ideas, quick logging of thoughts, and ongoing personal reflection.",
  "com.affine.page-properties.property.checkbox.tooltips": "Use a checkbox to indicate whether a condition is true or false. Useful for confirming options, toggling features, or tracking task states.",
@@ -698,6 +703,7 @@
  "com.affine.page-properties.property.createdAt.tooltips": "Track when a doc was first created. Useful for maintaining record history, sorting by creation date, or auditing content chronologically.",
  "com.affine.page-properties.property.docPrimaryMode.tooltips": "Select the doc mode from Page Mode, Edgeless Mode, or Auto. Useful for choosing the best display for your content.",
  "com.affine.page-properties.property.edgelessTheme.tooltips": "Select the doc theme from Light, Dark, or System. Useful for precise control over content viewing style.",
+  "com.affine.page-properties.property.pageWidth.tooltips": "Control the width of this page to fit content display needs.",
  "com.affine.propertySidebar.property-list.section": "Properties",
  "com.affine.propertySidebar.add-more.section": "Add more properties",
  "com.affine.page-properties.settings.title": "customize properties",
@@ -1132,6 +1138,10 @@
  "com.affine.settings.editorSettings.page.display-doc-info.title": "Display doc info",
  "com.affine.settings.editorSettings.page.full-width.description": "Maximise display of content within a page.",
  "com.affine.settings.editorSettings.page.full-width.title": "Full width layout",
+  "com.affine.settings.editorSettings.page.default-page-width.title": "Default page width",
+  "com.affine.settings.editorSettings.page.default-page-width.description": "Set default width for new pages, individual pages can override.",
+  "com.affine.settings.editorSettings.page.default-page-width.standard": "Standard",
+  "com.affine.settings.editorSettings.page.default-page-width.full-width": "Full width",
  "com.affine.settings.editorSettings.page.edgeless-default-theme.description": "Set edgeless default color scheme.",
  "com.affine.settings.editorSettings.page.edgeless-default-theme.title": "Edgeless default theme",
  "com.affine.settings.editorSettings.page.edgeless-default-theme.specified": "Specified by current color mode",
--- a/packages/frontend/i18n/src/resources/zh-Hans.json
+++ b/packages/frontend/i18n/src/resources/zh-Hans.json
@@ -330,6 +330,10 @@
  "com.affine.cmdk.affine.editor.trash-footer-hint": "该文档已移至回收站，您可以恢复或永久删除它。",
  "com.affine.cmdk.affine.font-style.to": "更改字体样式为",
  "com.affine.cmdk.affine.full-width-layout.to": "更改全宽布局为",
+  "com.affine.cmdk.affine.default-page-width-layout.standard": "将新页面的默认宽度更改为标准",
+  "com.affine.cmdk.affine.default-page-width-layout.full-width": "将新页面的默认宽度更改为全宽",
+  "com.affine.cmdk.affine.current-page-width-layout.standard": "将当前页面宽度更改为标准",
+  "com.affine.cmdk.affine.current-page-width-layout.full-width": "将当前页面宽度更改为全宽",
  "com.affine.cmdk.affine.getting-started": "开始使用",
  "com.affine.cmdk.affine.import-workspace": "导入工作区",
  "com.affine.cmdk.affine.insert-link": "将这个链接插入到当前文档",
@@ -666,6 +670,7 @@
  "com.affine.page-properties.property.text": "文本",
  "com.affine.page-properties.property.updatedBy": "最后编辑者",
  "com.affine.page-properties.property.edgelessTheme": "无界配色方案",
+  "com.affine.page-properties.property.pageWidth": "页面宽度",
  "com.affine.page-properties.property.createdAt": "创建时间",
  "com.affine.page-properties.property.updatedAt": "更新时间",
  "com.affine.page-properties.property.tags.tooltips": "为文档添加相关标识或类别，有助于组织内容、提高搜索效率并将相关文档归类。",
@@ -685,6 +690,7 @@
  "com.affine.page-properties.property.createdAt.tooltips": "跟踪文档首次创建的时间。用于维护记录历史、按创建日期排序或按时间顺序审核内容。",
  "com.affine.page-properties.property.docPrimaryMode.tooltips": "选择页面模式、无边界模式或自动模式，适合根据内容选择最佳显示方式。",
  "com.affine.page-properties.property.edgelessTheme.tooltips": "选择浅色、深色或系统主题，精确控制内容的查看样式。",
+  "com.affine.page-properties.property.pageWidth.tooltips": "控制此页面的宽度以适合内容显示需要。",
  "com.affine.page-properties.settings.title": "自定义属性",
  "com.affine.page-properties.tags.open-tags-page": "打开标签页面",
  "com.affine.page-properties.tags.selector-header-title": "选择或者创建一个标签",
@@ -1094,6 +1100,10 @@
  "com.affine.settings.editorSettings.page.display-doc-info.title": "显示文档信息",
  "com.affine.settings.editorSettings.page.full-width.description": "文档内容的最大显示量。",
  "com.affine.settings.editorSettings.page.full-width.title": "全宽布局",
+  "com.affine.settings.editorSettings.page.default-page-width.title": "默认文档页面宽度",
+  "com.affine.settings.editorSettings.page.default-page-width.description": "设置新页面的默认宽度，单独在页面中设置页面宽度属性可以覆盖默认设置。",
+  "com.affine.settings.editorSettings.page.default-page-width.standard": "标准",
+  "com.affine.settings.editorSettings.page.default-page-width.full-width": "全宽",
  "com.affine.settings.editorSettings.page.edgeless-default-theme.description": "设置默认的无界配色方案。",
  "com.affine.settings.editorSettings.page.edgeless-default-theme.title": "无界默认配色方案",
  "com.affine.settings.editorSettings.page.edgeless-default-theme.specified": "由当前应用的配色方案指定",