feat: 统一多个组件的边框半径以提升样式一致性

ant-design · Jan 16, 2025 · 3cbc9da · 3cbc9da · vercel · Jan 16, 2025
1 parent 3810f77
commit 3cbc9da
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 15 deletions.
diff --git a/src/MarkdownEditor/editor/elements/LinkCard/style.ts b/src/MarkdownEditor/editor/elements/LinkCard/style.ts
@@ -14,7 +14,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
       '&-container': {
         padding: 12,
         border: '1px solid #f0f0f0',
-        borderRadius: '1.2px',
+        borderRadius: '0.5em',
         margin: '8px 0',
         width: '100%',
         maxHeight: '120px',

diff --git a/src/MarkdownEditor/editor/elements/chart/ChartRender.tsx b/src/MarkdownEditor/editor/elements/chart/ChartRender.tsx
@@ -267,7 +267,7 @@ export const ChartRender: React.FC<{
             margin: 12,
             overflow: 'auto',
             border: '1px solid #eee',
-            borderRadius: '1.2em',
+            borderRadius: '0.5em',
             flex: 1,
             maxWidth: 'calc(100% - 32px)',
             maxHeight: 400,

diff --git a/src/MarkdownEditor/editor/elements/chart/index.tsx b/src/MarkdownEditor/editor/elements/chart/index.tsx
@@ -268,7 +268,7 @@ export const Chart: React.FC<RenderElementProps> = (props) => {
           style={{
             display: 'flex',
             flexDirection: 'column',
-            borderRadius: '1.2em',
+            borderRadius: '0.5em',
             overflow: 'auto',
           }}
         >
@@ -411,7 +411,7 @@ export const Chart: React.FC<RenderElementProps> = (props) => {
                             key={index + subIndex}
                             style={{
                               border: '1px solid #eee',
-                              borderRadius: '1.2em',
+                              borderRadius: '0.5em',
                               margin: 'auto',
                               minWidth: `calc(${100 / columnLength}% - 16px)`,
                               flex: 1,
@@ -431,7 +431,7 @@ export const Chart: React.FC<RenderElementProps> = (props) => {
                         style={{
                           userSelect: 'none',
                           border: '1px solid #eee',
-                          borderRadius: '1.2em',
+                          borderRadius: '0.5em',
                           margin: 'auto',
                           minWidth: `calc(${100 / columnLength}% - 16px)`,
                           flex: 1,

diff --git a/src/MarkdownEditor/editor/elements/code/style.ts b/src/MarkdownEditor/editor/elements/code/style.ts
@@ -135,7 +135,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
           },
         },
         '& &-code-content': {
-          borderRadius: '1.2px',
+          borderRadius: '0.5em',
           fontSize: '0.85em',
           boxSizing: 'border-box',
           lineHeight: '1.62em',

diff --git a/src/MarkdownEditor/editor/elements/description/style.ts b/src/MarkdownEditor/editor/elements/description/style.ts
@@ -9,21 +9,21 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
     [token.componentCls]: {
       maxWidth: '100%',
       overflow: 'auto',
-      borderRadius: '1.2px',
+      borderRadius: '0.5em',
       border: '1px solid rgb(232, 232, 232)',
       table: {
         '& th': {
           padding: '12px 20px',
           textAlign: 'left',
           fontWeight: 500,
           border: '1px solid rgb(232, 232, 232)',
-          borderRadius: '1.2px',
+          borderRadius: '0.5em',
         },
         '& td': {
           padding: '12px 20px',
           textAlign: 'left',
           border: '1px solid rgb(232, 232, 232)',
-          borderRadius: '1.2px',
+          borderRadius: '0.5em',
         },
         '& tr': {
           'td:first-child': {

diff --git a/src/MarkdownEditor/editor/elements/media.tsx b/src/MarkdownEditor/editor/elements/media.tsx
@@ -296,7 +296,7 @@ export function Media({
           style={{
             padding: 12,
             border: '1px solid #f0f0f0',
-            borderRadius: '1.2px',
+            borderRadius: '0.5em',
             width: '100%',
             backgroundImage:
               'linear-gradient(rgb(249, 251, 255) 0%, rgb(243, 248, 255) 100%)',

diff --git a/src/MarkdownEditor/editor/elements/table.tsx b/src/MarkdownEditor/editor/elements/table.tsx
@@ -19,6 +19,8 @@ import { useEditorStore } from '../store';
 import { DragHandle } from '../tools/DragHandle';
 import { TableAttr } from '../tools/TableAttr';
 
+const numberValidationRegex = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;
+
 /**
  * TableCell 组件用于渲染表格单元格，根据元素的 title 属性决定渲染 <th> 或 <td>。
  *
@@ -101,6 +103,9 @@ export function TableCell(props: RenderElementProps) {
                 WebkitBoxOrient: 'vertical',
                 WebkitLineClamp: 2,
                 maxHeight: 40,
+                textAlign: numberValidationRegex.test(text?.replaceAll(',', ''))
+                  ? 'right'
+                  : undefined,
               }}
             >
               {text}
@@ -112,6 +117,12 @@ export function TableCell(props: RenderElementProps) {
               minWidth: minWidth,
               textWrap: 'wrap',
               maxWidth: '200px',
+              display: 'flex',
+              justifyContent: numberValidationRegex.test(
+                text?.replaceAll(',', ''),
+              )
+                ? 'end'
+                : 'start',
             }}
           >
             {props.children}
@@ -332,7 +343,7 @@ export const Table = observer((props: RenderElementProps) => {
             maxWidth: '100%',
             width: '100%',
             border: '1px solid #e8e8e8',
-            borderRadius: '1.2px',
+            borderRadius: '0.5em',
             display: 'flex',
             minWidth: 0,
             boxShadow:

diff --git a/src/MarkdownEditor/editor/style.ts b/src/MarkdownEditor/editor/style.ts
@@ -280,10 +280,10 @@ const genSlideStyle: GenerateStyle<ChatTokenType> = (token) => {
           borderRight: 'none',
         },
         'th:last-child': {
-          borderTopRightRadius: 16,
+          borderTopRightRadius: '0.5em',
         },
         'th:first-child': {
-          borderTopLeftRadius: 16,
+          borderTopLeftRadius: '0.5em',
         },
         'tr:last-child th,tr:last-child td': {
           borderBottom: 'none',

diff --git a/src/MarkdownEditor/editor/tools/ToolBar/toolBarStyle.ts b/src/MarkdownEditor/editor/tools/ToolBar/toolBarStyle.ts
@@ -8,8 +8,8 @@
 const genStyle: GenerateStyle<ChatTokenType> = (token) => {
   return {
     [token.componentCls]: {
-      borderTopLeftRadius: '16px',
-      borderTopRightRadius: '16px',
+      borderTopLeftRadius: '0.5em',
+      borderTopRightRadius: '0.5em',
       borderBottom: '1px solid rgb(229 231 235 / 0.8)',
       overflow: 'hidden',
       height: '42px',