fix(UI): The form verification border should be marked red normally.

packages/ui/src/DateRanger/Ranger.tsx

@@ -32,6 +32,9 @@ import {
 } from './constant';
 import type { RangeOption } from './typing';
 import InternalPickerPanel, { Rule } from './PickerPanel';
+import { getMergedStatus, getStatusClassNames } from 'antd/es/_util/statusUtils';
+import { FormItemInputContext } from 'antd/es/form/context';
+
 import zhCN from './locale/zh-CN';
 import enUS from './locale/en-US';
 import './index.less';
@@ -103,12 +106,16 @@ const Ranger = (props: DateRangerProps) => {
     isMoment: isMomentProps,
     rules,
     tip,
+    status: customStatus,
     ...rest
   } = props;
 
-  console.log(locale, 'locale');
   const { token } = theme.useToken();
 
+  // =================== Form =====================
+  const { status: contextStatus, hasFeedback } = React.useContext(FormItemInputContext);
+  const mergedStatus = getMergedStatus(contextStatus, customStatus);
+
   // 是否为 moment 时间对象
   const isMoment =
     moment.isMoment(defaultValue?.[0]) ||
@@ -124,9 +131,10 @@ const Ranger = (props: DateRangerProps) => {
   const [innerValue, setInnerValue] = useState<RangeValue>(
     value ??
       defaultValue ??
-      (selects
-        .find(item => item.name === defaultRangeName)
-        ?.range(isMoment ? moment() : dayjs()) as RangeValue)
+      // 兼容一下匹配不上 defaultRangeName
+      ((selects.find(item => item.name === defaultRangeName) || selects[0])?.range(
+        isMoment ? moment() : dayjs()
+      ) as RangeValue)
   );
 
   const [open, setOpen] = useState(false);
@@ -295,7 +303,10 @@ const Ranger = (props: DateRangerProps) => {
       : selects[rangeNameIndex + 1];
 
   return (
-    <Space className={classNames(prefix)} style={rest.style}>
+    <Space
+      className={classNames(prefix, getStatusClassNames(prefix, mergedStatus, hasFeedback))}
+      style={rest.style}
+    >
       <Space size={0}>
         <div className={`${prefix}-wrapper`}>
           <Dropdown
@@ -338,8 +349,9 @@ const Ranger = (props: DateRangerProps) => {
                     label:
                       item.name === CUSTOMIZE ? (
                         <Tooltip
+                          overlayClassName={`${prefix}-panel-wrapper`}
                           open={tooltipOpen}
-                          arrow={false}
+                          arrow={true}
                           onOpenChange={o => {
                             if (o) {
                               setTooltipOpen(true);
@@ -352,9 +364,6 @@ const Ranger = (props: DateRangerProps) => {
                             ...tooltipProps?.overlayStyle,
                           }}
                           overlayInnerStyle={{
-                            background: '#fff',
-                            maxHeight: 'none',
-                            margin: 16,
                             ...tooltipProps?.overlayInnerStyle,
                           }}
                           title={
@@ -400,14 +409,7 @@ const Ranger = (props: DateRangerProps) => {
             }}
           >
             <Space size={0}>
-              <span
-                className={`${prefix}-label`}
-                style={{
-                  marginLeft: 8,
-                }}
-              >
-                {rangeLabel}
-              </span>
+              <div className={`${prefix}-label`}>{rangeLabel}</div>
               {isPlay && <div className={`${prefix}-play`}>{label}</div>}
             </Space>
           </Dropdown>
@@ -430,6 +432,7 @@ const Ranger = (props: DateRangerProps) => {
                 }}
                 // @ts-ignore
                 value={innerValue}
+                // @ts-ignore
                 onChange={datePickerChange}
                 allowClear={false}
                 size={size}

packages/ui/src/DateRanger/constant/index.ts

@@ -221,6 +221,8 @@ export const NEAR_TIME_LIST = [
   LAST_3_DAYS,
   TODAY,
   YESTERDAY,
+  THIS_WEEK,
+  LAST_WEEK,
   THIS_MONTH,
   LAST_MONTH,
   THIS_YEAR,

packages/ui/src/DateRanger/demo/default-quick-value.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DateRanger } from '@oceanbase/ui';
+import dayjs from 'dayjs';
+
+export default () => (
+  <DateRanger
+    defaultQuickValue={DateRanger.THIS_WEEK.name}
+    selects={[DateRanger.YESTERDAY, DateRanger.TODAY, DateRanger.THIS_WEEK, DateRanger.THIS_MONTH]}
+  />
+);

packages/ui/src/DateRanger/index.less

@@ -1,4 +1,5 @@
 @import '../variable.less';
+@import '~@oceanbase/design/es/theme/index.less';
 
 @prefix: ob-date-ranger;
 
@@ -8,9 +9,9 @@
     border-radius: 4px 0 0 4px;
     box-sizing: border-box;
     display: flex;
-    // FIXED: 存在不生效情况
+
     .@{prefix}-picker {
-      padding-left: 0px;
+      padding-left: 2px;
       border: 0px;
       pointer-events: none;
       input {
@@ -41,41 +42,57 @@
       z-index: 1;
     }
   }
-}
-
-.@{prefix}-show-range {
-  .@{prefix}-quick-picker.@{prefix}-quick-picker-select {
-    margin-right: -1px;
-
-    .@{prefixCls}-select-selector {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
 
-      &:hover {
-        z-index: 1;
-      }
-    }
+  .@{prefix}-playback-control {
+    display: flex;
 
-    .@{prefixCls}-select-arrow {
-      z-index: 1;
+    .@{prefixCls}-radio-button-wrapper {
+      padding-inline: 8px;
     }
   }
+}
 
-  .@{prefix}-playback-control {
-    margin-left: 8px;
+.@{prefix}-status-error {
+  .@{prefix}-wrapper {
+    border-color: @colorError;
+  }
+}
 
-    .@{prefixCls}-radio-button-wrapper {
-      padding-inline: 8px;
+.@{prefix}-panel-wrapper {
+  .ant-tooltip-arrow {
+    margin-inline: 16px;
+    &:before {
+      background-color: #fff;
+    }
+  }
+  .ant-tooltip-inner {
+    background: #fff;
+    margin: 16px;
+    max-height: none;
+  }
+  .ant-picker-cell-today {
+    .ant-picker-cell-inner {
+      border: 0;
     }
   }
 }
 
+.@{prefix}-time-wrapper {
+  .ant-picker-ok {
+    display: none;
+  }
+}
+
 .@{prefix}-label {
   background-color: rgb(226, 229, 237);
   display: inline-block;
   width: 60px;
+  margin-left: 8px;
   padding: 4px 0;
   border-radius: 4px;
   line-height: 1;
   text-align: center;
 }
+.@{prefix}-play {
+  white-space: nowrap;
+}

packages/ui/src/DateRanger/index.md

@@ -15,6 +15,8 @@ nav:
 
 <code src="./demo/default-value.tsx" title="指定默认值"></code>
 
+<code src="./demo/default-quick-value.tsx" title="指定快速选择的默认值"></code>
+
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |

packages/ui/src/Ranger/Ranger.tsx

@@ -168,12 +168,15 @@ const Ranger = (props: RangerProps) => {
         />
       )}
       {showRange && (
-        // @ts-ignore
         <DatePicker.RangePicker
+          // @ts-ignore
           disabledDate={pastOnly ? disabledFuture : disabledDate}
           format={DATE_TIME_FORMAT}
+          // @ts-ignore
           defaultValue={defaultValue as [Dayjs, Dayjs]}
+          // @ts-ignore
           value={(innerValue || defaultInternalValue) as [Dayjs, Dayjs]}
+          // @ts-ignore
           onChange={datePickerChange}
           showTime={true}
           className={`${prefix}-range-picker`}