diff --git a/docs/zh-CN/components/progress.md b/docs/zh-CN/components/progress.md index c7d04467c..09b553b6a 100755 --- a/docs/zh-CN/components/progress.md +++ b/docs/zh-CN/components/progress.md @@ -212,19 +212,51 @@ List 的内容、Card 卡片的内容配置同上 } ``` -## 圆形进度条设置线条宽度 +## 设置线条宽度 可设置 strokeWidth 调整线条宽度 ```schema { "type": "page", - "body": { - "type": "progress", - "value": 60, - "mode": "dashboard", - "strokeWidth": 3 - } + "body": [ + { + "type": "progress", + "value": 60, + "mode": "line", + "strokeWidth": 4 + }, + { + "type": "progress", + "value": 60, + "mode": "line", + "strokeWidth": 8 + }, + { + "type": "progress", + "value": 60, + "mode": "line", + "strokeWidth": 12 + }, + { + "type": "progress", + "value": 60, + "mode": "dashboard", + "strokeWidth": 4 + }, + { + "type": "progress", + "value": 60, + "mode": "dashboard", + "strokeWidth": 8 + }, + { + "type": "progress", + "value": 60, + "mode": "dashboard", + "strokeWidth": 12 + }, + ] } ``` diff --git a/fis-conf.js b/fis-conf.js index 71396696b..497411015 100644 --- a/fis-conf.js +++ b/fis-conf.js @@ -15,7 +15,7 @@ fis.set('project.ignore', [ '.*/**' ]); // 配置只编译哪些文件。 - +fis.config.set("project.watch.usePolling", true) const Resource = fis.require('postpackager-loader/lib/resource.js'); const versionHash = fis.util.md5(package.version); diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index c89900ed9..ec3d7a2f3 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -131,8 +131,8 @@ --Alert-boxShadow: none; --Alert-fontSize: var(--fontSizeBase); --Alert-marginBottom: var(--gap-md); - --Alert-paddingX: var(--gap-sm); - --Alert-paddingY: var(--gap-sm); + --Alert-paddingX: var(--gap-md); + --Alert-paddingY: var(--gap-xs); --Audio-border: #{px2rem(1px)} solid #dee2e6; --Audio-height: #{px2rem(50px)}; @@ -607,7 +607,7 @@ --DatePicker-height: var(--Form-input-height); --DatePicker-iconColor: var(--icon-color); --DatePicker-lineHeight: var(--Form-input-lineHeight); - --DatePicker-onFocused-borderColor: var(--Form-input-onFocused-borderColor); + --DatePicker-onFocused-borderColor: #144BCC; --DatePicker-onHover-bg: var(--DatePicker-bg); --DatePicker-onHover-borderColor: var(--Form-input-onFocused-borderColor); --DatePicker-onHover-iconColor: var(--icon-onHover-color); @@ -1608,8 +1608,8 @@ --Wizard-steps-ulDisplay: block; --Wizard-stepsContent-padding: var(--gap-base); - --AnchorNav-links-container-borderRight: #{px2rem(1px)} solid #d3dae0; - --AnchorNav-onActive-borderWidth: 0 #{px2rem(2px)} 0 0; + --AnchorNav-links-container-borderRight: #{px2rem(2px)} solid #d3dae0; + --AnchorNav-onActive-borderWidth: 0 0 0 #{px2rem(2px)}; --Steps-bg: var(--borderColorDarken); --Steps-status-success: var(--info); diff --git a/packages/amis-ui/scss/components/_alert.scss b/packages/amis-ui/scss/components/_alert.scss index 2b5ab8b71..fe7e9de22 100644 --- a/packages/amis-ui/scss/components/_alert.scss +++ b/packages/amis-ui/scss/components/_alert.scss @@ -12,6 +12,21 @@ justify-content: space-between; align-items: flex-start; + &-has-title { + padding: var(--Alert-paddingX); + + .#{$ns}Alert-content { + + .#{$ns}Alert-title { + line-height: #{px2rem(22px)}; + } + + .#{$ns}Alert-desc { + line-height: #{px2rem(20px)}; + } + } + } + &-icon { margin-right: var(--gap-sm); font-size: var(--fontSizeLg); diff --git a/packages/amis-ui/scss/components/_anchor-nav.scss b/packages/amis-ui/scss/components/_anchor-nav.scss index 52c85a1fd..1e50ea2bf 100644 --- a/packages/amis-ui/scss/components/_anchor-nav.scss +++ b/packages/amis-ui/scss/components/_anchor-nav.scss @@ -7,7 +7,7 @@ margin: 0; padding: 0; width: var(--Tabs--vertical-width); - border-right: var(--AnchorNav-links-container-borderRight); + border-left: var(--AnchorNav-links-container-borderRight); padding-bottom: px2rem(60px); > .#{$ns}AnchorNav-link { @@ -19,24 +19,39 @@ border: var(--Tabs-borderWidth) solid transparent; border-width: var(--AnchorNav-onActive-borderWidth); color: var(--Tabs-color); - padding: var(--Tabs-linkPadding); - font-size: var(--Tabs-linkFontSize); + padding: 0 var(--gap-sm); + padding-left: px2rem(10px); + font-size: var(--fontSizeSm); outline: none; - text-align: right; + text-align: left; text-decoration: none; cursor: pointer; margin: 0; + margin-left: px2rem(-2px); + height: px2rem(32px); + line-height: px2rem(32px); &:hover { color: var(--primary); } + + &:active { + color: #144bcc; + } } &.is-active { - > a, + > a { + color: var(--primary); + border-color: var(--primary); + } > a:hover { - color: var(--Tabs--vertical-onActive-color); - border-color: var(--Tabs--vertical-onActive-border); + color: #528EFF; + border-color: #528EFF; + } + > a:active { + color: #144bcc; + border-color: #144bcc; } } } diff --git a/packages/amis-ui/scss/components/_progress.scss b/packages/amis-ui/scss/components/_progress.scss index 34bc54934..01c3f595e 100644 --- a/packages/amis-ui/scss/components/_progress.scss +++ b/packages/amis-ui/scss/components/_progress.scss @@ -29,9 +29,10 @@ &-bar { float: left; width: 0; - height: 10px; + height: 8px; background: var(--primary); transition: width var(--animation-duration) ease; + border-radius: var(--Progress-borderRadius); &--stripe { background-image: linear-gradient( diff --git a/packages/amis-ui/scss/components/form/_date-range.scss b/packages/amis-ui/scss/components/form/_date-range.scss index 0d5efcdc1..3f216b304 100644 --- a/packages/amis-ui/scss/components/form/_date-range.scss +++ b/packages/amis-ui/scss/components/form/_date-range.scss @@ -4,7 +4,7 @@ flex-wrap: nowrap; border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor); font-size: var(--DatePicker-fontSize); - padding: var(--DatePicker-paddingY) var(--DatePicker-paddingX); + padding: 0 var(--DatePicker-paddingX); height: var(--DatePicker-height); outline: none; border-radius: var(--DatePicker-borderRadius); @@ -29,11 +29,11 @@ display: none; } } - } - &.is-focused { - border-color: var(--DatePicker-onFocused-borderColor); - box-shadow: var(--Form-input-boxShadow); + &.is-focused { + border-color: var(--DatePicker-onFocused-borderColor); + box-shadow: var(--Form-input-boxShadow); + } } .#{$ns}DateRangePicker-input { @@ -44,6 +44,11 @@ background: 0; flex: 1; width: 50%; + line-height: px2rem(30px); + + &::placeholder { + color: #{$G6}; + } } .#{$ns}DateRangePicker-input.isActive { @@ -52,6 +57,14 @@ .#{$ns}DateRangePicker-input-separator { margin: 0 var(--gap-sm); + display: flex; + align-items: center; + + &-line { + width: var(--gap-sm); + height: 1px; + background: #B8BABF; + } } &.is-disabled { @@ -95,8 +108,7 @@ .#{$ns}DateRangePicker-start, .#{$ns}DateRangePicker-end { - display: inline-block; - vertical-align: top; + display: block; .rdtPicker { padding: 0; diff --git a/packages/amis-ui/scss/components/form/_date.scss b/packages/amis-ui/scss/components/form/_date.scss index 8f722fcce..0b103b1ab 100644 --- a/packages/amis-ui/scss/components/form/_date.scss +++ b/packages/amis-ui/scss/components/form/_date.scss @@ -24,6 +24,9 @@ outline: none; box-sizing: none; } + &::placeholder { + color: #{$G6}; + } } .#{$ns}DatePicker-clear { @@ -47,11 +50,11 @@ display: none; } } - } - &.is-focused { - border-color: var(--DatePicker-onFocused-borderColor); - box-shadow: var(--Form-input-boxShadow); + &.is-focused { + border-color: var(--DatePicker-onFocused-borderColor); + box-shadow: var(--Form-input-boxShadow); + } } &.is-disabled { @@ -254,11 +257,17 @@ .rdtTimeToggle { background: var(--Calendar-cell-bg); - &:hover { + &:hover span { background: var(--Calendar-cell-onHover-bg); } } + td.rdtToday { + &:hover span { + background: transparent; + } + } + td.rdtBetween { background: var(--Calendar-cell-onBetween-bg); } @@ -293,7 +302,6 @@ } } - td.rdtDisabled, td.rdtDisabled:hover { > span { background: var(--Calendar-cell-onDisabled-bg); @@ -368,15 +376,22 @@ text-align: center; height: 28px; line-height: 28px; - &.is-highlight, - &:hover { + &.is-highlight { color: var(--Form-select-menu-onHover-color); background: var(--Form-select-menu-onHover-bg); } + &:hover { + color: var(--Form-select-menu-onHover-color); + background: #F7F7F9; + } } } } +.#{$ns}TimeContentWrapper { + display: flex; +} + .#{$ns}TimeRangeHeaderWrapper { height: 40px; padding-top: 10px; @@ -390,6 +405,7 @@ justify-content: space-between; align-items: center; padding: 0 12px; + border-top: 1px solid var(--Calendar-input-borderColor); .#{$ns}Button { height: 24px; @@ -573,7 +589,6 @@ display: table; table-layout: fixed; border-collapse: separate; - border-bottom: 1px solid var(--Calendar-input-borderColor); height: 40px; width: 100%; margin-top: -8px; @@ -587,6 +602,28 @@ .rdtSwitch + .rdtSwitch { margin-left: var(--gap-xs); } + + .date-icon-arrow-left, + .date-icon-arrow { + width: #{px2rem(10px)}; + height: #{px2rem(10px)}; + top: 0; + } + + .date-icon-arrow-left { + transform: rotate(180deg); + transform-origin: 50% 50%; + } +} + +.header-line { + display: block; + position: absolute; + right: 0; + left: 0; + top: 40px; + height: 1px; + background: var(--Calendar-input-borderColor); } td.rdtMonth, @@ -600,7 +637,15 @@ td.rdtQuarter { background: var(--Calendar-cell-onBetween-bg); } - &:hover, + &:hover { + background: transparent; + + > span { + color: var(--Form-select-menu-onHover-color); + background: #F7F7F9; + } + } + &.rdtActive, &.rdtActive:hover { background: transparent; diff --git a/packages/amis-ui/scss/components/react-datetime.scss b/packages/amis-ui/scss/components/react-datetime.scss index be9614703..84ad553a0 100644 --- a/packages/amis-ui/scss/components/react-datetime.scss +++ b/packages/amis-ui/scss/components/react-datetime.scss @@ -16,6 +16,11 @@ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border: 1px solid #f9f9f9; } + +.rdtPickerNotDays { + width: 192px; +} + .rdtOpen .rdtPicker { display: block; } @@ -57,7 +62,7 @@ > span { display: inline-block; border-radius: 2px; - height: 100%; + height: 24px; width: 24px; } } diff --git a/packages/amis-ui/scss/themes/_cxd-variables.scss b/packages/amis-ui/scss/themes/_cxd-variables.scss index 9c7173a6f..f2e77bf35 100644 --- a/packages/amis-ui/scss/themes/_cxd-variables.scss +++ b/packages/amis-ui/scss/themes/_cxd-variables.scss @@ -558,7 +558,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06), --TransferSelect-heading-borderBottom: 0; // Alert - --Alert-fontColor: #{$G4}; + --Alert-fontColor: #{$G2}; --Alert-title-fontColor: #{$G2}; --Alert-height: #{px2rem(40px)}; @@ -567,19 +567,19 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06), --Alert-borderRadius: #{$R3}; --Alert-marginBottom: var(--gap-md); - --Alert--danger-color: #{$G4}; + --Alert--danger-color: #{$G2}; --Alert--danger-bg: #{$danger-bg}; --Alert--danger-borderColor: transparent; - --Alert--info-color: #{$G4}; + --Alert--info-color: #{$G2}; --Alert--info-bg: #{$info-bg}; --Alert--info-borderColor: transparent; - --Alert--success-color: #{$G4}; + --Alert--success-color: #{$G2}; --Alert--success-bg: #{$success-bg}; --Alert--success-borderColor: transparent; - --Alert--warning-color: #{$G4}; + --Alert--warning-color: #{$G2}; --Alert--warning-bg: #{$warning-bg}; --Alert--warning-borderColor: transparent; diff --git a/packages/amis-ui/src/components/Alert2.tsx b/packages/amis-ui/src/components/Alert2.tsx index 8f3c8e9ed..2e9d72d3d 100644 --- a/packages/amis-ui/src/components/Alert2.tsx +++ b/packages/amis-ui/src/components/Alert2.tsx @@ -92,7 +92,7 @@ export class Alert extends React.Component { ) : null; return this.state.show ? ( -
+
{showIcon && iconNode ? (
{iconNode}
) : null} diff --git a/packages/amis-ui/src/components/DateRangePicker.tsx b/packages/amis-ui/src/components/DateRangePicker.tsx index bdcea6afa..e4bb32ae5 100644 --- a/packages/amis-ui/src/components/DateRangePicker.tsx +++ b/packages/amis-ui/src/components/DateRangePicker.tsx @@ -1505,7 +1505,9 @@ export class DateRangePicker extends React.Component< value={this.state.startInputValue || ''} disabled={disabled} /> - - + + + { this.getLabel(prefixCls) ]; } else if (type === 'circle' || type === 'dashboard') { - const circleWidth = strokeWidth || 6; + const circleWidth = strokeWidth || 8; + const circleStyle = { + width: circleWidth * 10 + 'px', + height: circleWidth * 10 + 'px' + }; const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top'; const getGapDegree = () => { if (gapDegree || gapDegree === 0) { @@ -149,8 +153,9 @@ export class Progress extends React.Component { viewValue = [
{ prefixCls={isColorClass ? bgColor : ''} gapDegree={getGapDegree()} gapPosition={gapPos} + style={circleStyle} /> {this.getLabel(prefixCls)}
diff --git a/packages/amis-ui/src/components/calendar/Calendar.tsx b/packages/amis-ui/src/components/calendar/Calendar.tsx index addd2866c..27f5024b5 100644 --- a/packages/amis-ui/src/components/calendar/Calendar.tsx +++ b/packages/amis-ui/src/components/calendar/Calendar.tsx @@ -692,6 +692,9 @@ class BaseDatePicker extends React.Component< ? 'rdtPickerTime' : dateFormat && !timeFormat ? 'rdtPickerDate' + : '', + viewMode === 'months' || viewMode === 'years' || viewMode === 'quarters' + ? 'rdtPickerNotDays' : '' )} > diff --git a/packages/amis-ui/src/components/calendar/DaysView.tsx b/packages/amis-ui/src/components/calendar/DaysView.tsx index af0d74f42..c6eeefe11 100644 --- a/packages/amis-ui/src/components/calendar/DaysView.tsx +++ b/packages/amis-ui/src/components/calendar/DaysView.tsx @@ -17,6 +17,7 @@ import Picker from '../Picker'; import {PickerOption} from '../PickerColumn'; import {DateType} from './Calendar'; import type {TimeScale} from './TimeView'; +import {Icon} from '../icons'; interface CustomDaysViewProps extends LocaleProps { classPrefix?: string; @@ -737,13 +738,13 @@ export class CustomDaysView extends React.Component { className="rdtPrev" onClick={this.props.subtractTime(1, 'years')} > - « + - ‹ +
@@ -765,12 +766,13 @@ export class CustomDaysView extends React.Component { className="rdtNext" onClick={this.props.addTime(1, 'months')} > - › + - » +
+
diff --git a/packages/amis-ui/src/components/icons.tsx b/packages/amis-ui/src/components/icons.tsx index 9e65dd65d..d516af561 100644 --- a/packages/amis-ui/src/components/icons.tsx +++ b/packages/amis-ui/src/components/icons.tsx @@ -98,6 +98,7 @@ import DotIcon from '../icons/dot.svg'; import Invisible from '../icons/invisible.svg'; import DateIcon from '../icons/date.svg'; import InvisibleIcon from '../icons/invisible.svg'; +import RightDoubleArrowIcon from '../icons/right-double-arrow.svg'; // 兼容原来的用法，后续不直接试用。 @@ -223,6 +224,7 @@ registerIcon('plus-fine', PlusFineIcon); registerIcon('date', DateIcon); registerIcon('remove', RemoveIcon); registerIcon('invisible', InvisibleIcon); +registerIcon('right-double-arrow', RightDoubleArrowIcon); export function Icon({ icon, @@ -266,5 +268,6 @@ export { UserRemove, Role, Department, - Post + Post, + RightDoubleArrowIcon }; diff --git a/packages/amis-ui/src/icons/alert-danger.svg b/packages/amis-ui/src/icons/alert-danger.svg index f30942095..a2ec345ca 100644 --- a/packages/amis-ui/src/icons/alert-danger.svg +++ b/packages/amis-ui/src/icons/alert-danger.svg @@ -1 +1 @@ - + diff --git a/packages/amis-ui/src/icons/alert-success.svg b/packages/amis-ui/src/icons/alert-success.svg index 824192a33..470977e98 100644 --- a/packages/amis-ui/src/icons/alert-success.svg +++ b/packages/amis-ui/src/icons/alert-success.svg @@ -1 +1 @@ - + diff --git a/packages/amis-ui/src/icons/alert-warning.svg b/packages/amis-ui/src/icons/alert-warning.svg index 0db08866d..69f546700 100644 --- a/packages/amis-ui/src/icons/alert-warning.svg +++ b/packages/amis-ui/src/icons/alert-warning.svg @@ -1 +1 @@ - + diff --git a/packages/amis-ui/src/icons/right-double-arrow.svg b/packages/amis-ui/src/icons/right-double-arrow.svg new file mode 100644 index 000000000..3f87e6056 --- /dev/null +++ b/packages/amis-ui/src/icons/right-double-arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/dateRange.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/dateRange.test.tsx.snap index b6c611b32..3e4dd00cd 100644 --- a/packages/amis/__tests__/renderers/Form/__snapshots__/dateRange.test.tsx.snap +++ b/packages/amis/__tests__/renderers/Form/__snapshots__/dateRange.test.tsx.snap @@ -66,7 +66,9 @@ exports[`Renderer:dateRange 1`] = ` - - + - « + - ‹ +
- › + - » +
+
@@ -540,12 +555,18 @@ exports[`Renderer:calendar largeMode 1`] = ` - « + - ‹ +
- › + - » +
+
@@ -1181,12 +1211,18 @@ exports[`Renderer:calendar scheduleAction 1`] = ` - « + - ‹ +
- › + - » +
+