feat(client): supports setting the text align in the style configuration item of the field (#5272)

* feat(client): table text align

* refactor: remove useless code

* refactor: extract schemas outside the component

* chore: make e2e tests pass

* test: add e2e tests

* chore: fix build

---------

Co-authored-by: Zeke Zhang <958414905@qq.com>

packages/core/client/src/data-source/collection-record/CollectionRecord.ts

@@ -13,7 +13,7 @@ export interface CollectionRecordOptions<DataType = {}, ParentDataType = {}> {
   parentRecord?: CollectionRecord<ParentDataType>;
 }
 
-export class CollectionRecord<DataType = {}, ParentDataType = {}> {
+export class CollectionRecord<DataType = any, ParentDataType = {}> {
   public data?: DataType;
   public parentRecord?: CollectionRecord<ParentDataType>;
   public isNew?: boolean;

packages/core/client/src/locale/en_US.json

@@ -427,6 +427,7 @@
   "Option label": "Option label",
   "Color": "Color",
   "Background Color": "Background Color",
+  "Text Align": "Text Align",
   "Add option": "Add option",
   "Related collection": "Related collection",
   "Allow linking to multiple records": "Allow linking to multiple records",

packages/core/client/src/locale/zh-CN.json

@@ -448,6 +448,7 @@
   "Option label": "选项标签",
   "Color": "颜色",
   "Background Color": "背景颜色",
+  "Text Align": "文本对齐",
   "Add option": "添加选项",
   "Related collection": "关系表",
   "Allow linking to multiple records": "允许关联多条记录",

packages/core/client/src/locale/zh-TW.json

@@ -444,6 +444,7 @@
   "Option value": "選項值",
   "Option label": "選項標籤",
   "Color": "顏色",
+  "Text Align": "文本對齊",
   "Add option": "新增選項",
   "Related collection": "關聯表",
   "Allow linking to multiple records": "允許關聯多條記錄",

packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-edit/schemaSettings.test.ts

@@ -163,11 +163,9 @@ test.describe('edit form block schema settings', () => {
     await page.getByLabel('action-Action.Link-Edit record-update-general-table-').click();
     await page.getByRole('spinbutton').fill('');
     await page.getByRole('spinbutton').fill('10');
-    await expect(
+    await expect(page.getByLabel('block-item-CollectionField-general-form-general.formula-formula')).toHaveText(
-      page
+      'formula:11',
-        .getByLabel('block-item-CollectionField-general-form-general.formula-formula')
+    );
-        .locator('.nb-read-pretty-input-number'),
-    ).toHaveText('11');
     await page.getByLabel('drawer-Action.Container-general-Edit record-mask').click();
     await expect(page.getByText('Unsaved changes')).toBeVisible();
   });

packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-view/schemaSettings.test.ts

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { expect, commonFormViewPage, test } from '@nocobase/test/e2e';
+import { commonFormViewPage, expect, test } from '@nocobase/test/e2e';
 
 test.describe('field schema settings', () => {
   test('linkage style color', async ({ page, mockPage, mockRecord }) => {
@@ -60,4 +60,32 @@ test.describe('field schema settings', () => {
       .locator('div.ant-formily-item-control-content-component');
     await expect(cell).toHaveCSS('background-color', 'rgb(163, 79, 204)');
   });
+
+  test('text align', async ({ page, mockPage, mockRecord }) => {
+    const nocoPage = await mockPage(commonFormViewPage).waitForInit();
+    await mockRecord('general', { singleLineText: 'asdfcedg' });
+    await nocoPage.goto();
+    await page.getByText('asdfcedg', { exact: true }).hover();
+    await page.getByLabel('block-item-CollectionField-general-details-general.singleLineText-singleLineText').hover();
+
+    await page
+      .getByLabel('designer-schema-settings-CollectionField-fieldSettings:FormItem-general-general.singleLineText', {
+        exact: true,
+      })
+      .click();
+    await page.getByRole('menuitem', { name: 'Style' }).click();
+    await page.getByRole('button', { name: 'plus Add linkage rule' }).click();
+    await page.getByText('Add property').click();
+    await page.getByTestId('select-linkage-properties').click();
+    await page.getByText('Text Align', { exact: true }).click();
+    await page.getByTestId('select-single').click();
+    await page.getByRole('option', { name: 'right' }).click();
+    await page.getByRole('button', { name: 'OK' }).click();
+
+    const cell = page
+      .getByLabel('block-item-CollectionField-general-details-general.singleLineText-singleLineText')
+      .locator('div.ant-formily-item-control-content-component');
+
+    await expect(cell).toHaveCSS('text-align', 'right');
+  });
 });

packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/linkageStyleSettings.test.ts

@@ -57,4 +57,29 @@ test.describe('view', () => {
     const bgColor = await cell.evaluate((el) => getComputedStyle(el.parentElement).backgroundColor);
     expect(bgColor).toContain('163, 79, 204');
   });
+
+  test('text align', async ({ page, mockPage, mockRecord }) => {
+    const nocoPage = await mockPage(oneTableBlockWithIntegerAndIDColumn).waitForInit();
+    await mockRecord('general', { integer: '423' });
+    await nocoPage.goto();
+    await page.getByText('integer', { exact: true }).hover();
+
+    await page
+      .getByRole('button', {
+        name: 'designer-schema-settings-TableV2.Column-fieldSettings:TableColumn-general',
+      })
+      .click();
+    await page.getByRole('menuitem', { name: 'Style' }).click();
+    await page.getByRole('button', { name: 'plus Add linkage rule' }).click();
+    await page.getByText('Add property').click();
+    await page.getByTestId('select-linkage-properties').click();
+    await page.getByText('Text Align', { exact: true }).click();
+    await page.getByTestId('select-single').click();
+    await page.getByRole('option', { name: 'right' }).click();
+    await page.getByRole('button', { name: 'OK' }).click();
+
+    const cell = page.getByRole('button', { name: '423' });
+    const textAlign = await cell.evaluate((el) => getComputedStyle(el.parentElement).textAlign);
+    expect(textAlign).toContain('right');
+  });
 });

packages/core/client/src/schema-component/antd/input-number/ReadPretty.tsx

@@ -9,10 +9,10 @@
 
 import { isValid } from '@formily/shared';
 import { toFixedByStep } from '@nocobase/utils/client';
+import BigNumber from 'bignumber.js';
 import { format } from 'd3-format';
 import * as math from 'mathjs';
 import React, { useMemo } from 'react';
-import BigNumber from 'bignumber.js';
 
 function countDecimalPlaces(value) {
   const number = Number(value);
@@ -175,7 +175,7 @@ export const ReadPretty: React.FC<InputNumberReadPrettyProps> = (props) => {
   }
 
   return (
-    <div className={'nb-read-pretty-input-number'}>
+    <div>
       {addonBefore}
       <span dangerouslySetInnerHTML={{ __html: result }} />
       {addonAfter}

packages/core/client/src/schema-component/antd/table-v2/Table.tsx

@@ -344,9 +344,6 @@ const headerClass = css`
 const cellClass = css`
   max-width: 300px;
   white-space: nowrap;
-  .nb-read-pretty-input-number {
-    text-align: right;
-  }
   .ant-color-picker-trigger {
     position: absolute;
     top: 50%;

packages/core/client/src/schema-settings/LinkageRules/LinkageRuleAction.tsx

@@ -185,9 +185,45 @@ export const FormButtonLinkageRuleAction = observer(
   { displayName: 'FormButtonLinkageRuleAction' },
 );
 
+const colorSchema = {
+  type: 'string',
+  'x-decorator': 'FormItem',
+  'x-component': 'ColorPicker',
+  'x-component-props': {
+    defaultValue: '',
+  },
+};
+const textAlignSchema = {
+  type: 'string',
+  'x-decorator': 'FormItem',
+  'x-component': 'Select',
+  'x-component-props': {
+    defaultValue: '',
+  },
+  enum: [
+    {
+      label: 'left',
+      value: 'left',
+    },
+    {
+      label: 'right',
+      value: 'right',
+    },
+    {
+      label: 'center',
+      value: 'center',
+    },
+  ],
+};
+
+const schemas = new Map();
+schemas.set(ActionType.Color, colorSchema);
+schemas.set(ActionType.BackgroundColor, colorSchema);
+schemas.set(ActionType.TextAlign, textAlignSchema);
+
 export const FormStyleLinkageRuleAction = observer(
   (props: any) => {
-    const { value, options, collectionName } = props;
+    const { options, collectionName } = props;
     const { t } = useTranslation();
     const compile = useCompile();
     const remove = useContext(RemoveActionContext);
@@ -197,17 +233,10 @@ export const FormStyleLinkageRuleAction = observer(
         compile([
           { label: t('Color'), value: ActionType.Color, schema: {} },
           { label: t('Background Color'), value: ActionType.BackgroundColor, schema: {} },
+          { label: t('Text Align'), value: ActionType.TextAlign, schema: {} },
         ]),
       [compile, t],
     );
-    const schema = {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'ColorPicker',
-      'x-component-props': {
-        defaultValue: '',
-      },
-    };
 
     const onChange = useCallback(
       (value) => {
@@ -228,10 +257,10 @@ export const FormStyleLinkageRuleAction = observer(
             onChange={onChange}
             placeholder={t('action')}
           />
-          {[ActionType.Color, ActionType.BackgroundColor].includes(operator) && (
+          {[ActionType.Color, ActionType.BackgroundColor, ActionType.TextAlign].includes(operator) && (
             <ValueDynamicComponent
               fieldValue={fieldValue}
-              schema={schema}
+              schema={schemas.get(operator)}
               setValue={setValue}
               collectionName={collectionName}
               inputModes={['constant']}

packages/core/client/src/schema-settings/LinkageRules/compute-rules.ts

@@ -7,9 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { conditionAnalyses } from '../../schema-component/common/utils/uitls';
 import { ActionType } from './type';
 import { InputModeType } from './ValueDynamicComponent';
-import { conditionAnalyses } from '../../schema-component/common/utils/uitls';
 const getActionValue = (operator, value) => {
   const getValueByMode = (value) => {
     const mode = value?.mode as InputModeType;
@@ -18,11 +18,10 @@ const getActionValue = (operator, value) => {
     } else return null;
   };
   switch (true) {
-    case [ActionType.Color, ActionType.BackgroundColor].includes(operator):
+    case [ActionType.Color, ActionType.BackgroundColor, ActionType.TextAlign].includes(operator):
       return getValueByMode(value);
     default:
       return null;
-      break;
   }
 };
 

packages/core/client/src/schema-settings/LinkageRules/type.ts

@@ -21,6 +21,7 @@ export enum ActionType {
   Active = 'enabled',
   Color = 'color',
   BackgroundColor = 'backgroundColor',
+  TextAlign = 'textAlign',
 }
 
 export enum LinkageRuleCategory {

packages/plugins/@nocobase/plugin-field-formula/src/client/__e2e__/form-create.test.ts

@@ -9,7 +9,7 @@
 
 import { T3879 } from './utils';
 
-import { test, expect } from '@nocobase/test/e2e';
+import { expect, test } from '@nocobase/test/e2e';
 
 // https://nocobase.height.app/T-3529
 test('formula field calculation', async ({ page, mockPage }) => {
@@ -29,5 +29,7 @@ test('formula field calculation', async ({ page, mockPage }) => {
     .getByLabel('block-item-CollectionField-general-form-general.number2-number2')
     .getByRole('spinbutton')
     .fill('3');
-  await expect(await page.locator('.nb-read-pretty-input-number').innerText()).toBe('6');
+  await expect(page.getByLabel('block-item-CollectionField-general-form-general.formula-formula')).toHaveText(
+    'formula:6',
+  );
 });