@douyinfe/semi-ui 2.1.5 → 2.2.0

package/cascader/item.tsx

@@ -54,6 +54,7 @@ export interface CascaderItemProps {
     emptyContent: React.ReactNode;
     loadData: (selectOptions: CascaderData[]) => Promise<void>;
     data: Array<Data | Entity>;
+    separator: string;
     multiple: boolean;
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
@@ -75,6 +76,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
         checkedKeys: PropTypes.object,
         halfCheckedKeys: PropTypes.object,
         onItemCheckboxClick: PropTypes.func,
+        separator: PropTypes.string,
         keyword: PropTypes.string
     };
 
@@ -142,7 +144,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
 
     highlight = (searchText: React.ReactNode[]) => {
         const content: React.ReactNode[] = [];
-        const { keyword } = this.props;
+        const { keyword, separator } = this.props;
         searchText.forEach((item, idx) => {
             if (typeof item === 'string' && includes(item, keyword)) {
                 item.split(keyword).forEach((node, index) => {
@@ -159,7 +161,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
                 content.push(item);
             }
             if (idx !== searchText.length - 1) {
-                content.push(' / ');
+                content.push(separator);
             }
         });
         return content;

package/datePicker/__test__/datePicker.test.js

@@ -280,10 +280,12 @@ describe(`DatePicker`, () => {
         const rightPanel = document.querySelector(`.${BASE_CLASS_PREFIX}-datepicker-month-grid-right`);
         const rightNavBtns = rightPanel.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-navigation .${BASE_CLASS_PREFIX}-button`);
 
-        _.get(rightNavBtns, 1).click();
+        // 点击右边面板下一月
+        _.get(rightNavBtns, 2).click();
         await sleep();
 
-        _.times(leftPrevClickTimes).forEach(() => _.first(leftNavBtns).click());
+        // 点击左边面板上一月
+        _.times(leftPrevClickTimes).forEach(() => _.get(leftNavBtns, 1).click());
 
         const leftSecondWeek = leftPanel.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-week`)[1];
         const leftSecondWeekDays = leftSecondWeek.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-day`);
@@ -870,4 +872,85 @@ describe(`DatePicker`, () => {
         expect(allSeparators[0].textContent.trim()).toBe(rangeSeparator);
         expect(allSeparators[1].textContent.trim()).toBe(rangeSeparator);
     });
+
+    /**
+     * fix https://github.com/DouyinFE/semi-design/issues/422
+     */
+    it('test input year length larger than 4', async () => {
+        const props = {
+            motion: false,
+            defaultOpen: true,
+            defaultValue: '2021-12-21',
+        };
+        const handleChange = sinon.spy();
+        const elem = mount(
+            <DatePicker {...props} onChange={handleChange} />
+        );
+
+        elem.find('input').simulate('change', { target: { value: '20221-12-21' }});
+        expect(handleChange.called).toBeFalsy();
+    });
+
+    it('test click next/prev year buttons', () => {
+        let props = {
+          type: 'dateRange',
+          motion: false,
+          style: { width: 300 },
+          defaultPickerValue: new Date('2021-12-01'),
+          defaultOpen: true,
+        };
+        const elem = mount(<DatePicker {...props} />);
+
+        const leftPanel = document.querySelector(`.semi-datepicker-month-grid-left`);
+        const leftNavBtns = leftPanel.querySelector(`.semi-datepicker-navigation`).children;
+        const rightPanel = document.querySelector(`.semi-datepicker-month-grid-right`);
+        const rightNavBtns = rightPanel.querySelector(`.semi-datepicker-navigation`).children;
+
+        // 点击左边面板上一年
+        _.get(leftNavBtns, 0).click();
+        expect(document.querySelector(`.semi-datepicker-month-grid-left .semi-datepicker-navigation-month`).textContent).toBe('2020年 12月');
+        // 点击左边面板下一年
+        _.get(leftNavBtns, 4).click();
+        expect(document.querySelector(`.semi-datepicker-month-grid-left .semi-datepicker-navigation-month`).textContent).toBe('2021年 12月');
+
+        // 点击右边面板下一年
+        _.get(rightNavBtns, 4).click();
+        expect(document.querySelector(`.semi-datepicker-month-grid-right .semi-datepicker-navigation-month`).textContent).toBe('2023年 1月');
+        // 点击右边面板上一年
+        _.get(rightNavBtns, 0).click();
+        expect(document.querySelector(`.semi-datepicker-month-grid-right .semi-datepicker-navigation-month`).textContent).toBe('2022年 1月');
+    });
+
+    const testMonthSyncChange = type => {
+        let props = {
+            type,
+            motion: false,
+            style: { width: 300 },
+            defaultPickerValue: new Date('2021-12-01'),
+            defaultOpen: true,
+          };
+          const elem = mount(<DatePicker {...props} />);
+  
+          const leftPanel = document.querySelector(`.semi-datepicker-month-grid-left`);
+          const leftNavBtns = leftPanel.querySelector(`.semi-datepicker-navigation`).children;
+          const rightPanel = document.querySelector(`.semi-datepicker-month-grid-right`);
+          const rightNavBtns = rightPanel.querySelector(`.semi-datepicker-navigation`).children;
+  
+          // 点击左边面板下一月，自动切换右面板
+          _.get(leftNavBtns, 3).click();
+          expect(document.querySelector(`.semi-datepicker-month-grid-left .semi-datepicker-navigation-month`).textContent).toBe('2022年 1月');
+          expect(document.querySelector(`.semi-datepicker-month-grid-right .semi-datepicker-navigation-month`).textContent).toBe('2022年 2月');
+          // 点击右边面板上一月，自动切换左面板
+          _.get(rightNavBtns, 1).click();
+          expect(document.querySelector(`.semi-datepicker-month-grid-left .semi-datepicker-navigation-month`).textContent).toBe('2021年 12月');
+          expect(document.querySelector(`.semi-datepicker-month-grid-right .semi-datepicker-navigation-month`).textContent).toBe('2022年 1月');
+  
+          // 点击左边面板上一月，不需要自动切换右面板
+          _.get(leftNavBtns, 1).click();
+          expect(document.querySelector(`.semi-datepicker-month-grid-left .semi-datepicker-navigation-month`).textContent).toBe('2021年 11月');
+          elem.unmount();
+    }
+
+    it('test month sync change dateRange type', () => { testMonthSyncChange('dateRange') });
+    it('test month sync change dateTimeRange type', () => { testMonthSyncChange('dateTimeRange')});
 });

package/datePicker/_story/datePicker.stories.js

@@ -36,6 +36,7 @@ import DatePickerSlot from './DatePickerSlot';
 import DatePickerTimeZone from './DatePickerTimeZone';
 import BetterRangePicker from './BetterRangePicker';
 import SyncSwitchMonth from './SyncSwitchMonth';
+import { YearButton } from './v2';
 
 export default {
   title: 'DatePicker',
@@ -65,7 +66,8 @@ export {
   DatePickerSlot,
   DatePickerTimeZone,
   BetterRangePicker,
-  SyncSwitchMonth
+  SyncSwitchMonth,
+  YearButton
 }
 
 const demoDiv = {
@@ -634,3 +636,29 @@ export const RangeSeparator = () => (
     </div>
   </Space>
 );
+
+/**
+ * 修复输入 '20221-12-20' 类似这种年份的日期会崩溃问题
+ * https://github.com/DouyinFE/semi-design/issues/422
+ * 
+ * 非法日期的来源
+ *  - 用户输入
+ *  - 受控传入
+ * @returns 
+ */
+export const FixParseISOBug = () => (
+  <div>
+    <label>
+      <div>选择一个合法值，然后输入一个非法年份</div>
+      <DatePicker defaultValue={'2021-12-20'} onChange={v => console.log('onChange', v)} />
+    </label>
+    <label>
+      <div>defaultValue='20221-12-20'</div>
+      <DatePicker defaultValue={'20221-12-20'} defaultOpen={true} motion={false} onChange={v => console.log('onChange', v)} />
+    </label>
+  </div>
+);
+FixParseISOBug.storyName = '修复 parseISO bug';
+FixParseISOBug.parameters = {
+  chromatic: { disableSnapshot: false },
+};

package/datePicker/_story/v2/YearButton.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DatePicker } from '../../../index';
+
+export default function App() {
+    return (
+        <div>
+            <h4>type=date</h4>
+            <DatePicker />
+            <h4>type=dateRange</h4>
+            <DatePicker type="dateRange" defaultPickerValue="2021-12" />
+            <h4>type=dateTimeRange</h4>
+            <DatePicker type="dateTimeRange" />
+            <h4>type=dateRange + compact</h4>
+            <DatePicker type="dateRange" density="compact" />
+        </div>
+    );
+}

package/datePicker/_story/v2/index.js

@@ -0,0 +1 @@
+export { default as YearButton } from './YearButton';

package/datePicker/monthsGrid.tsx

@@ -446,6 +446,10 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         });
     };
 
+    getYAMOpenType = () => {
+        return this.foundation.getYAMOpenType();
+    }
+
     renderTimePicker(panelType: PanelType, panelDetail: MonthInfo) {
         const { type, locale, format, hideDisabledOptions, timePickerOpts, dateFnsLocale } = this.props;
         const { pickerDate } = panelDetail;
@@ -606,8 +610,15 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         } else if (type === 'year' || type === 'month') {
             content = 'year month';
         }
+        const yearOpenType = this.getYAMOpenType();
+
         return (
-            <div className={monthGridCls} x-type={type} ref={current => this.cacheRefCurrent('monthGrid', current)}>
+            <div
+                className={monthGridCls}
+                x-type={type}
+                x-panel-yearandmonth-open-type={yearOpenType}
+                ref={current => this.cacheRefCurrent('monthGrid', current)}
+            >
                 {content}
             </div>
         );

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 */
@@ -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;
@@ -3498,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;
 }
@@ -3987,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;
@@ -13026,19 +13031,23 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-success);
 }
 .semi-notification-notice-light.semi-notification-notice-warning {
-  background-color: var(--semi-color-warning-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-warning-light-default), var(--semi-color-warning-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-warning);
 }
 .semi-notification-notice-light.semi-notification-notice-success {
-  background-color: var(--semi-color-success-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-success-light-default), var(--semi-color-success-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-success);
 }
 .semi-notification-notice-light.semi-notification-notice-info, .semi-notification-notice-light.semi-notification-notice-default {
-  background-color: var(--semi-color-info-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-info-light-default), var(--semi-color-info-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-info);
 }
 .semi-notification-notice-light.semi-notification-notice-error {
-  background-color: var(--semi-color-danger-light-default);
+  background-image: linear-gradient(0deg, var(--semi-color-danger-light-default), var(--semi-color-danger-light-default));
+  background-color: var(--semi-color-bg-0);
   border: 1px solid var(--semi-color-danger);
 }
 .semi-notification-notice-title {
@@ -17753,6 +17762,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;
 }
@@ -19400,6 +19412,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;
@@ -19426,8 +19440,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;
 }
@@ -19562,16 +19574,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);
@@ -19608,11 +19620,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;
@@ -19677,6 +19692,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;
@@ -19689,6 +19720,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);
@@ -19769,11 +19803,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;
@@ -19790,11 +19819,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;