@douyinfe/semi-ui 2.1.4-alpha.0 → 2.2.0-beta.0

package/datePicker/navigation.tsx

@@ -6,7 +6,7 @@ import { noop } from 'lodash';
 import IconButton from '../iconButton';
 import Button from '../button';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/datePicker/constants';
-import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+import { IconChevronLeft, IconChevronRight, IconDoubleChevronLeft, IconDoubleChevronRight } from '@douyinfe/semi-icons';
 import { PanelType } from '@douyinfe/semi-foundation/datePicker/monthsGridFoundation';
 
 const prefixCls = cssClasses.NAVIGATION;
@@ -68,6 +68,8 @@ export default class Navigation extends PureComponent<NavigationProps> {
             onMonthClick,
             onNextMonth,
             onPrevMonth,
+            onPrevYear,
+            onNextYear,
             density,
             shouldBimonthSwitch,
             panelType
@@ -77,43 +79,67 @@ export default class Navigation extends PureComponent<NavigationProps> {
         const iconBtnSize = density === 'compact' ? 'default' : 'large';
         const btnNoHorizontalPadding = true;
         const buttonSize = density === 'compact' ? 'small' : 'default';
-        // Enable dual-panel synchronous switching, and the current panel is the left panel
-        const bimonthSwitchWithLeftPanel = shouldBimonthSwitch && panelType === strings.PANEL_TYPE_LEFT;
-        // Enable dual-panel synchronous switching, and the current panel is the right panel
-        const bimonthSwitchWithRightPanel = shouldBimonthSwitch && panelType === strings.PANEL_TYPE_RIGHT;
+        const isLeftPanel = panelType === strings.PANEL_TYPE_LEFT;
+        const isRightPanel =  panelType === strings.PANEL_TYPE_RIGHT;
+
+        // syncSwitchMonth and the current panel is the left
+        const hiddenLeftPanelRightButtons = shouldBimonthSwitch && isLeftPanel;
+        // syncSwitchMonth and the current panel is the right
+        const hiddenRightPanelLeftButtons = shouldBimonthSwitch && isRightPanel;
+        // `visibility: hidden` will keep the icon in position
+        const leftButtonStyle: React.CSSProperties = {};
+        const rightButtonStyle: React.CSSProperties = {};
+        if (hiddenRightPanelLeftButtons) {
+            leftButtonStyle.visibility = 'hidden';
+        }
+        if (hiddenLeftPanelRightButtons) {
+            rightButtonStyle.visibility = 'hidden';
+        }
 
         const ref = forwardRef || this.navRef;
         return (
             <div className={prefixCls} ref={ref}>
-                {
-                    !bimonthSwitchWithRightPanel &&
-                    (
-                        <IconButton
-                            icon={<IconChevronLeft size={iconBtnSize} />}
-                            size={buttonSize}
-                            onClick={onPrevMonth}
-                            theme={btnTheme}
-                            noHorizontalPadding={btnNoHorizontalPadding}
-                        />
-                    )
-                }
+                <IconButton
+                    key="double-chevron-left"
+                    icon={<IconDoubleChevronLeft size={iconBtnSize}/>} 
+                    size={buttonSize}
+                    theme={btnTheme}
+                    noHorizontalPadding={btnNoHorizontalPadding}
+                    onClick={onPrevYear}
+                    style={leftButtonStyle}
+                />
+                <IconButton
+                    key="chevron-left"
+                    icon={<IconChevronLeft size={iconBtnSize} />}
+                    size={buttonSize}
+                    onClick={onPrevMonth}
+                    theme={btnTheme}
+                    noHorizontalPadding={btnNoHorizontalPadding}
+                    style={leftButtonStyle}
+                />
                 <div className={`${prefixCls}-month`}>
                     <Button onClick={onMonthClick} theme={btnTheme} size={buttonSize}>
                         <span>{monthText}</span>
                     </Button>
                 </div>
-                {
-                    !bimonthSwitchWithLeftPanel &&
-                    (
-                        <IconButton
-                            icon={<IconChevronRight size={iconBtnSize} />}
-                            size={buttonSize}
-                            onClick={onNextMonth}
-                            theme={btnTheme}
-                            noHorizontalPadding={btnNoHorizontalPadding}
-                        />
-                    )
-                }
+                <IconButton
+                    key="chevron-right"
+                    icon={<IconChevronRight size={iconBtnSize} />}
+                    size={buttonSize}
+                    onClick={onNextMonth}
+                    theme={btnTheme}
+                    noHorizontalPadding={btnNoHorizontalPadding}
+                    style={rightButtonStyle}
+                />
+                <IconButton
+                    key="double-chevron-right"
+                    icon={<IconDoubleChevronRight size={iconBtnSize}/>} 
+                    size={buttonSize}
+                    theme={btnTheme}
+                    noHorizontalPadding={btnNoHorizontalPadding}
+                    onClick={onNextYear}
+                    style={rightButtonStyle}
+                />
             </div>
         );
     }

package/descriptions/__test__/descriptions.test.js

@@ -17,6 +17,14 @@ const dataWithHide = [
     { key: '认证状态', value: '未认证' },
 ];
 
+const dataWithKeyIsNode = [
+    { key: <strong>实际用户数量</strong>, value: '1,480,000' },
+    { key: '7天留存', value: '98%' },
+    { key: '安全等级', value: '3级' },
+    { key: '垂类标签', value: <Tag>电商</Tag> },
+    { key: '认证状态', value: '未认证' },
+];
+
 function renderDescriptions(props) {
     const realProps = {
         data,
@@ -134,7 +142,6 @@ describe('Descriptions', () => {
         largeDesc.unmount();
     });
 
-
     it('Descriptions with jsx', () => {
         const desc = mount(
             <Descriptions>
@@ -164,4 +171,23 @@ describe('Descriptions', () => {
         ).toEqual('1,480,000');
         desc.unmount();
     });
+
+    it('Descriptions with key is node', () => {
+        const desc = renderDescriptions({ data: dataWithKeyIsNode });
+        expect(
+            desc
+                .find(`.${BASE_CLASS_PREFIX}-descriptions-key strong`)
+                .at(0)
+                .getDOMNode()
+                .textContent
+        ).toEqual('实际用户数量');
+        expect(
+            desc
+                .find(`.${BASE_CLASS_PREFIX}-descriptions-key`)
+                .at(1)
+                .getDOMNode()
+                .textContent
+        ).toEqual('7天留存');
+        desc.unmount();
+    });
 })

package/descriptions/_story/descriptions.stories.js

@@ -1,7 +1,6 @@
 import React from 'react';
-// import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-
 import Descriptions from '../index';
+import Tag from '../../tag';
 
 export default {
   title: 'Descriptions',
@@ -93,3 +92,54 @@ export const DescriptionsItem = () => (
   </div>
 );
 
+export const DescriptionsKeyIsNode = () => {
+  const data = [
+      { key: <strong style={{color: 'red'}}>实际用户数量</strong>, value: '1,480,000' },
+      { key: '7天留存', value: '98%' },
+      { key: '安全等级', value: '3级' },
+      { key: '垂类标签', value: <Tag style={{ margin: 0 }}>电商</Tag> },
+      { key: '认证状态', value: '未认证' },
+  ];
+  const style = {
+      boxShadow: 'var(--shadow-elevated)',
+      backgroundColor: 'var(--color-bg-2)',
+      borderRadius: '4px',
+      padding: '10px',
+      margin: '10px',
+      width: '200px',
+  };
+  return (
+    <>
+      <div>data 传入的写法</div>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        <Descriptions align="center" data={data} style={style} />
+        <Descriptions align="justify" data={data} style={style} />
+        <Descriptions align="left" data={data} style={style} />
+        <Descriptions align="plain" data={data} style={style} />
+      </div>
+      <div>JSX 写法</div>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        <Descriptions style={style} align="center" >
+          <Descriptions.Item itemKey={<strong style={{ color: 'red' }}>实际用户数量</strong>}>1,480,000</Descriptions.Item>
+          <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
+          <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
+        </Descriptions>
+        <Descriptions style={style} align="justify">
+          <Descriptions.Item itemKey={<strong style={{ color: 'red' }}>实际用户数量</strong>}>1,480,000</Descriptions.Item>
+          <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
+          <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
+        </Descriptions>
+        <Descriptions style={style} align="left">
+          <Descriptions.Item itemKey={<strong style={{ color: 'red' }}>实际用户数量</strong>}>1,480,000</Descriptions.Item>
+          <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
+          <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
+        </Descriptions>
+        <Descriptions style={style} align="plain">
+          <Descriptions.Item itemKey={<strong style={{ color: 'red' }}>实际用户数量</strong>}>1,480,000</Descriptions.Item>
+          <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
+          <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
+        </Descriptions>
+      </div>
+    </>
+  );
+};

package/descriptions/item.tsx

@@ -36,7 +36,7 @@ export default class Item extends PureComponent<DescriptionsItemProps> {
                 <tr className={className} style={style}>
                     <td className={`${prefixCls}-item`}>
                         <span className={keyCls}>
-                            {`${itemKey}:`}
+                            {itemKey}:
                         </span>
                         <span className={valCls}>
                             {typeof children === 'function' ? children() : children}

package/dist/css/semi.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* shadow */
 /* sizing */
 /* spacing */
@@ -400,7 +399,7 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
   --semi-color-border: rgba(var(--semi-grey-9), .08);
   --semi-color-nav-bg: rgba(var(--semi-white), 1);
-  --semi-overlay-bg: rgba(22, 22, 26, .6);
+  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
   --semi-color-fill-0: rgba(var(--semi-grey-8), .05);
   --semi-color-fill-1: rgba(var(--semi-grey-8), .09);
   --semi-color-fill-2: rgba(var(--semi-grey-8), .13);
@@ -487,7 +486,7 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
   --semi-color-nav-bg: rgba(35, 36, 41, 1);
   --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
-  --semi-overlay-bg: rgba(22, 22, 26, .6);
+  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
   --semi-color-fill-0: rgba(var(--semi-white), .05);
   --semi-color-fill-1: rgba(var(--semi-white), .09);
   --semi-color-fill-2: rgba(var(--semi-white), .13);
@@ -2686,11 +2685,11 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-cascader-selection-tag:first-child {
   margin-left: 0;
 }
-.semi-cascader-selection-tag-disabled {
+.semi-cascader-selection-tag-disabled.semi-tag {
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;
 }
-.semi-cascader-selection-tag-disabled .semi-tag-close {
+.semi-cascader-selection-tag-disabled.semi-tag .semi-tag-close {
   color: var(--semi-color-disabled-text);
   cursor: not-allowed;
   pointer-events: none;
@@ -3059,12 +3058,14 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-hover);
+  box-shadow: none;
 }
 .semi-checkbox:active .semi-checkbox-inner-display {
   background: var(--semi-color-fill-1);
 }
 .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-active);
+  box-shadow: none;
 }
 .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-display {
   background: var(--semi-color-disabled-fill);
@@ -3072,6 +3073,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-disabled);
+  box-shadow: none;
 }
 .semi-checkbox-inner {
   position: relative;
@@ -3112,7 +3114,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-checkbox:hover.semi-checkbox-indeterminate .semi-checkbox-inner-display {
   background: var(--semi-color-primary-hover);
-  box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
+  box-shadow: none;
   color: var(--semi-color-white);
 }
 .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
@@ -3130,6 +3132,7 @@ body[theme-mode=dark], body .semi-always-dark {
   background: var(--semi-color-primary-active);
   border-color: var(--semi-color-primary-active);
   color: var(--semi-color-white);
+  box-shadow: none;
 }
 .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-active);
@@ -3181,10 +3184,18 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-checkbox-cardType_checked {
   background: var(--semi-color-primary-light-default);
-  border: 1px solid var(--semi-color-focus-border);
+  border: 1px solid var(--semi-color-primary);
 }
 .semi-checkbox-cardType_checked:hover {
   background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-hover);
+}
+.semi-checkbox-cardType_checked:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  box-shadow: none;
+}
+.semi-checkbox-cardType_checked:active {
+  background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-active);
 }
 .semi-checkbox-cardType_disabled:active {
   background: transparent;
@@ -3192,6 +3203,13 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-checkbox-cardType_disabled:hover {
   background: transparent;
 }
+.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-disabled);
+}
+.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  box-shadow: none;
+}
 .semi-checkbox-indeterminate .semi-checkbox-inner-display, .semi-checkbox-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary);
   color: var(--semi-color-white);
@@ -3479,6 +3497,9 @@ body[theme-mode=dark], body .semi-always-dark {
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   min-height: 24px;
 }
+.semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
+  min-height: 216px;
+}
 .semi-datepicker-panel-yam {
   max-width: 284px;
 }
@@ -3968,6 +3989,9 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-post {
   margin-top: 17px;
 }
+.semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
+  min-height: 168px;
+}
 .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {
   font-size: 12px;
   line-height: 16px;
@@ -11956,7 +11980,7 @@ body[theme-mode=dark], body .semi-always-dark {
   right: 0;
   left: 0;
   bottom: 0;
-  background-color: var(--semi-overlay-bg);
+  background-color: var(--semi-color-overlay-bg);
   height: 100%;
   z-index: 1000;
 }
@@ -13658,6 +13682,7 @@ body[theme-mode=dark], body .semi-always-dark {
   width: 100%;
   height: 100%;
   margin: 0;
+  cursor: pointer;
 }
 .semi-radio:hover .semi-radio-inner-display {
   background: var(--semi-color-fill-0);
@@ -13668,6 +13693,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio:hover .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-hover);
+  border-color: var(--semi-color-primary-hover);
 }
 .semi-radio:active .semi-radio-inner-display {
   background: var(--semi-color-fill-1);
@@ -13677,6 +13703,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio:active .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-active);
+  border-color: var(--semi-color-primary-active);
 }
 .semi-radio-buttonRadioComponent {
   padding: 4px;
@@ -13734,7 +13761,23 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio-cardRadioGroup_checked {
   background: var(--semi-color-primary-light-default);
-  border: 1px solid var(--semi-color-focus-border);
+  border: 1px solid var(--semi-color-primary);
+}
+.semi-radio-cardRadioGroup_checked:hover {
+  border: 1px solid var(--semi-color-primary-hover);
+}
+.semi-radio-cardRadioGroup_checked:hover .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-hover);
+}
+.semi-radio-cardRadioGroup_checked:active {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-active);
+}
+.semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-active);
+}
+.semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked:hover .semi-radio-inner-display {
+  background: var(--semi-color-primary-active);
 }
 .semi-radio-cardRadioGroup_hover {
   background: var(--semi-color-fill-0);
@@ -13742,12 +13785,23 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-radio-cardRadioGroup_disabled:active {
   background: transparent;
 }
+.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-disabled);
+}
+.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-disabled);
+}
+.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup:hover .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-disabled);
+}
 .semi-radio.semi-radio-disabled:hover .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-display {
   background: var(--semi-color-disabled-fill);
   border: solid 1px var(--semi-color-border);
 }
 .semi-radio.semi-radio-disabled:hover .semi-radio-inner-checked .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-disabled);
+  border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-inner {
   position: absolute;
@@ -13855,10 +13909,11 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-disabled);
-  border-color: var(--semi-color-border);
+  border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display:hover {
   background: var(--semi-color-primary-disabled);
+  border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-disabled .semi-radio-addon {
   color: var(--semi-color-disabled-text);
@@ -14020,6 +14075,9 @@ body[theme-mode=dark], body .semi-always-dark {
   height: 24px;
   font-size: 24px;
 }
+.semi-rating-star-wrapper {
+  position: relative;
+}
 .semi-rating-star-first, .semi-rating-star-second {
   color: var(--semi-color-fill-0);
   user-select: none;
@@ -14789,7 +14847,7 @@ body[theme-mode=dark], body .semi-always-dark {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--semi-overlay-bg);
+  background-color: var(--semi-color-overlay-bg);
 }
 .semi-sidesheet-mask-hidden {
   display: none;
@@ -16101,7 +16159,7 @@ body[theme-mode=dark], body .semi-always-dark {
   user-select: none;
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
-  z-index: 1;
+  z-index: 101;
   position: sticky;
   background-color: var(--semi-color-bg-2);
 }
@@ -16215,7 +16273,7 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: var(--semi-color-fill-0);
 }
 .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right {
-  z-index: 1;
+  z-index: 101;
   position: sticky;
   background-color: var(--semi-color-bg-2);
 }
@@ -17700,6 +17758,9 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-timeline-alternate .semi-timeline-item-tail, .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-tail, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-tail, .semi-timeline-center .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head-custom {
   left: 50%;
 }
+.semi-timeline-alternate .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-head.semi-timeline-item-head-custom {
+  margin-left: 0;
+}
 .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head {
   margin-left: -4px;
 }
@@ -19347,6 +19408,8 @@ p.semi-typography-extended,
   display: flex;
   flex-wrap: wrap;
   flex-shrink: 0;
+  gap: 8px;
+  margin-bottom: 8px;
 }
 .semi-upload-file-list-main p {
   display: flex;
@@ -19373,8 +19436,6 @@ p.semi-typography-extended,
   justify-content: space-between;
   height: 52px;
   width: 250px;
-  margin-right: 8px;
-  margin-bottom: 8px;
   background-color: var(--semi-color-fill-0);
   cursor: pointer;
 }
@@ -19509,16 +19570,16 @@ p.semi-typography-extended,
   flex-direction: column;
 }
 .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-prompt {
-  order: 2;
+  order: 1;
 }
 .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-add {
-  order: 1;
+  order: 0;
 }
 .semi-upload-picture[x-prompt-pos=right] .semi-upload-prompt {
-  order: 2;
+  order: 1;
 }
 .semi-upload-picture[x-prompt-pos=right] .semi-upload-add {
-  order: 1;
+  order: 0;
 }
 .semi-upload-picture-add {
   background-color: var(--semi-color-fill-0);
@@ -19555,11 +19616,14 @@ p.semi-typography-extended,
   margin-bottom: 0;
 }
 .semi-upload-picture-file-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 96px;
   width: 96px;
+  border-radius: var(--semi-border-radius-small);
   position: relative;
-  margin-right: 8px;
-  margin-bottom: 8px;
+  overflow: hidden;
 }
 .semi-upload-picture-file-card img {
   height: 96px;
@@ -19570,7 +19634,7 @@ p.semi-typography-extended,
 .semi-upload-picture-file-card-close {
   width: 16px;
   height: 16px;
-  background-color: var(--semi-overlay-bg);
+  background-color: var(--semi-color-overlay-bg);
   position: absolute;
   top: 8px;
   right: 8px;
@@ -19624,6 +19688,22 @@ p.semi-typography-extended,
   color: var(--semi-color-white);
   transform: translate3D(-50%, -50%, 0);
 }
+.semi-upload-picture-file-card-pic-info {
+  display: inline-flex;
+  box-sizing: border-box;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  height: 24px;
+  padding: 0 10px;
+  bottom: 0;
+  left: 0;
+  color: var(--semi-color-white);
+  font-size: 12px;
+  font-weight: 600;
+  background: linear-gradient(0deg, rgba(22, 22, 26, 0.3) 0%, rgba(22, 22, 26, 0) 77.08%);
+}
 .semi-upload-picture-file-card-icon-loading, .semi-upload-picture-file-card-icon-error {
   position: absolute;
   bottom: 6px;
@@ -19636,6 +19716,9 @@ p.semi-typography-extended,
 .semi-upload-picture-file-card-show-pointer {
   cursor: pointer;
 }
+.semi-upload-picture-file-card-error {
+  outline: 1px solid var(--semi-color-danger);
+}
 .semi-upload-drag-area {
   border-radius: var(--semi-border-radius-small);
   border: 2px dashed var(--semi-color-border);
@@ -19716,11 +19799,6 @@ p.semi-typography-extended,
 .semi-portal-rtl .semi-upload-file-list-title-clear {
   display: inline-block;
 }
-.semi-rtl .semi-upload-file-card,
-.semi-portal-rtl .semi-upload-file-card {
-  margin-right: 0;
-  margin-left: 8px;
-}
 .semi-rtl .semi-upload-file-card-info-size,
 .semi-portal-rtl .semi-upload-file-card-info-size {
   margin-left: 0;
@@ -19737,11 +19815,6 @@ p.semi-typography-extended,
   margin-right: 0;
   margin-left: 2px;
 }
-.semi-rtl .semi-upload-picture-file-card,
-.semi-portal-rtl .semi-upload-picture-file-card {
-  margin-right: 0;
-  margin-left: 8px;
-}
 .semi-rtl .semi-upload-picture-file-card-close,
 .semi-portal-rtl .semi-upload-picture-file-card-close {
   right: auto;