amis 1.8.0-beta.2 → 1.8.0-beta.3

package/src/SchemaRenderer.tsx

@@ -15,7 +15,7 @@ import {asFormItem} from './renderers/Form/Item';
 import {renderChild, renderChildren} from './Root';
 import {IScopedContext, ScopedContext} from './Scoped';
 import {Schema, SchemaNode} from './types';
-import {DebugWrapper, enableAMISDebug} from './utils/debug';
+import {DebugWrapper} from './utils/debug';
 import getExprProperties from './utils/filter-schema';
 import {anyChanged, chainEvents, autobind} from './utils/helper';
 import {SimpleMap} from './utils/SimpleMap';
@@ -417,7 +417,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       />
     );
 
-    return enableAMISDebug ? (
+    return this.props.env.enableAMISDebug ? (
       <DebugWrapper renderer={renderer}>{component}</DebugWrapper>
     ) : (
       component

package/src/components/BarCode.tsx

@@ -20,7 +20,7 @@ export class BarCode extends React.Component<BarCodeProps> {
 
   constructor(props: BarCodeProps) {
     super(props);
-    this.dom = React.createRef<SVGSVGElement>();
+    this.dom = React.createRef<HTMLImageElement>();
   }
 
   componentDidUpdate(prevProps: BarCodeProps) {
@@ -43,7 +43,7 @@ export class BarCode extends React.Component<BarCodeProps> {
   }
 
   render() {
-    return <svg ref={this.dom}></svg>;
+    return <img ref={this.dom} />;
   }
 }
 

package/src/components/DatePicker.tsx

@@ -364,10 +364,25 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
   componentDidUpdate(prevProps: DateProps) {
     const props = this.props;
 
-    if (prevProps.value !== props.value) {
-      this.setState({
+    const prevValue = prevProps.value;
+
+    if (prevValue !== props.value) {
+      const newState: any = {
         value: normalizeValue(props.value, props.format)
-      });
+      };
+      // 相对值和公式是 didUpdate 的时候才更新
+      if (
+        typeof prevValue === 'string' &&
+        (prevValue.startsWith('+') ||
+          prevValue.startsWith('-') ||
+          prevValue.startsWith('$'))
+      ) {
+        newState.inputValue =
+          normalizeValue(this.props.value, this.props.format)?.format(
+            this.props.inputFormat
+          ) || '';
+      }
+      this.setState(newState);
     }
   }
 
@@ -724,7 +739,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
           `DatePicker`,
           {
             'is-disabled': disabled,
-            'is-focused': this.state.isFocused,
+            'is-focused': !disabled && this.state.isFocused,
             [`DatePicker--border${ucFirst(borderMode)}`]: borderMode,
             'is-mobile': useMobileUI && isMobile()
           },
@@ -734,11 +749,13 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         onClick={this.handleClick}
       >
         <Input
+          className={cx('DatePicker-input')}
           onChange={this.inputChange}
           ref={this.inputRef}
           placeholder={__(placeholder)}
           autoComplete="off"
           value={this.state.inputValue}
+          disabled={disabled}
         />
 
         {clearable && !disabled && normalizeValue(value, format) ? (

package/src/components/DateRangePicker.tsx

@@ -82,8 +82,19 @@ export const availableRanges: {[propName: string]: any} = {
     }
   },
 
-  '1dayago': {
-    label: 'DateRange.1dayago',
+  'tomorrow': {
+    label: 'Date.tomorrow',
+    startDate: (now: moment.Moment) => {
+      return now.add(1, 'days').startOf('day');
+    },
+    endDate: (now: moment.Moment) => {
+      return now.add(1, 'days').endOf('day');
+    }
+  },
+
+  // 兼容一下错误的用法
+  '1daysago': {
+    label: 'DateRange.1daysago',
     startDate: (now: moment.Moment) => {
       return now.add(-1, 'days');
     },
@@ -203,6 +214,177 @@ export const availableRanges: {[propName: string]: any} = {
   }
 };
 
+export const advancedRanges = [
+  {
+    regexp: /^(\d+)hoursago$/,
+    resolve: (__: any, _: string, hours: string) => {
+      return {
+        label: __('DateRange.hoursago', {hours}),
+        startDate: (now: moment.Moment) => {
+          return now.add(-hours, 'hours').startOf('hour');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.add(-1, 'hours').endOf('hours');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)hourslater$/,
+    resolve: (__: any, _: string, hours: string) => {
+      return {
+        label: __('DateRange.hourslater', {hours}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('hour');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.add(hours, 'hours').endOf('hour');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)daysago$/,
+    resolve: (__: any, _: string, days: string) => {
+      return {
+        label: __('DateRange.daysago', {days}),
+        startDate: (now: moment.Moment) => {
+          return now.add(-days, 'days').startOf('day');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)dayslater$/,
+    resolve: (__: any, _: string, days: string) => {
+      return {
+        label: __('DateRange.dayslater', {days}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('day');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.add(days, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)weeksago$/,
+    resolve: (__: any, _: string, weeks: string) => {
+      return {
+        label: __('DateRange.weeksago', {weeks}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('week').add(-weeks, 'weeks');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('week').add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)weekslater$/,
+    resolve: (__: any, _: string, weeks: string) => {
+      return {
+        label: __('DateRange.weekslater', {weeks}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('week');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('week').add(weeks, 'weeks').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)monthsago$/,
+    resolve: (__: any, _: string, months: string) => {
+      return {
+        label: __('DateRange.monthsago', {months}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('months').add(-months, 'months');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('month').add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)monthslater$/,
+    resolve: (__: any, _: string, months: string) => {
+      return {
+        label: __('DateRange.monthslater', {months}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('month');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('month').add(months, 'months').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)quartersago$/,
+    resolve: (__: any, _: string, quarters: string) => {
+      return {
+        label: __('DateRange.quartersago', {quarters}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('quarters').add(-quarters, 'quarters');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('quarter').add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)quarterslater$/,
+    resolve: (__: any, _: string, quarters: string) => {
+      return {
+        label: __('DateRange.quarterslater', {quarters}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('quarter');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('quarter').add(quarters, 'quarters').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)yearsago$/,
+    resolve: (__: any, _: string, years: string) => {
+      return {
+        label: __('DateRange.yearsago', {years}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('years').add(-years, 'years');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('year').add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)yearslater$/,
+    resolve: (__: any, _: string, years: string) => {
+      return {
+        label: __('DateRange.yearslater', {years}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('year');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('year').add(years, 'years').endOf('day');
+        }
+      };
+    }
+  }
+];
+
 export class DateRangePicker extends React.Component<
   DateRangePickerProps,
   DateRangePickerState
@@ -528,8 +710,20 @@ export class DateRangePicker extends React.Component<
           }
           let range: PlainObject = {};
           if (typeof item === 'string') {
-            range = availableRanges[item];
-            range.key = item;
+            if (availableRanges[item]) {
+              range = availableRanges[item];
+              range.key = item;
+            } else {
+              // 通过正则尝试匹配
+              for (let i = 0, len = advancedRanges.length; i < len; i++) {
+                let value = advancedRanges[i];
+                const m = value.regexp.exec(item);
+                if (m) {
+                  range = value.resolve.apply(item, [__, ...m]);
+                  range.key = item;
+                }
+              }
+            }
           } else if (
             (item as ShortCutDateRange).startDate &&
             (item as ShortCutDateRange).endDate

package/src/components/Radios.tsx

@@ -21,11 +21,12 @@ import Button from './Button';
 import {value2array, OptionProps, Option} from './Select';
 import chunk from 'lodash/chunk';
 import {ClassNamesFn, themeable} from '../theme';
+import {columnsSplit} from '../utils/columnsSplit';
 
 interface RadioProps extends OptionProps {
   id?: string;
   type: string;
-  optionType?: string,
+  optionType?: string;
   value?: string;
   className?: string;
   style?: React.CSSProperties;
@@ -34,7 +35,7 @@ interface RadioProps extends OptionProps {
   btnActiveLevel?: string;
   disabled?: boolean;
   onChange?: Function;
-  columnsCount: number;
+  columnsCount: number | number[];
   itemClassName?: string;
   labelField?: string;
   labelClassName?: string;
@@ -78,7 +79,7 @@ export class Radios extends React.Component<RadioProps, any> {
   }
 
   renderGroup(option: Option, index: number, valueArray: Array<Option>) {
-    const {classnames: cx, optionType, classPrefix: ns,} = this.props;
+    const {classnames: cx, optionType, classPrefix: ns} = this.props;
 
     return (
       <div key={index} className={cx('RadiosControl-group', option.className)}>
@@ -178,20 +179,8 @@ export class Radios extends React.Component<RadioProps, any> {
       );
     }
 
-    if (!inline && columnsCount > 1) {
-      let weight = 12 / (columnsCount as number);
-      let cellClassName = `Grid-col--sm${
-        weight === Math.round(weight) ? weight : ''
-      }`;
-      body = chunk(body, columnsCount).map((group, groupIndex) => (
-        <div className={cx('Grid')} key={groupIndex}>
-          {Array.from({length: columnsCount as number}).map((_, index) => (
-            <div key={index} className={cx(cellClassName)}>
-              {group[index]}
-            </div>
-          ))}
-        </div>
-      ));
+    if (!inline) {
+      body = columnsSplit(body, cx, columnsCount);
     }
 
     return (

package/src/components/Range.tsx

@@ -11,11 +11,11 @@ import difference from 'lodash/difference';
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
 
-import {RendererProps} from '../factory';
 import Overlay from './Overlay';
-import {ThemeProps, themeable} from '../theme';
+import type { ThemeProps } from '../theme'
+import {themeable} from '../theme';
 import {autobind, camel} from '../utils/helper';
-import {
+import type {
   MultipleValue,
   Value,
   FormatValue,
@@ -71,7 +71,7 @@ interface LabelProps extends ThemeProps {
  * @returns position.left
  */
 const valueToOffsetLeft = (value: any, min: number, max: number) =>
-  (value * 100) / (max - min) + '%';
+  ((value - min) * 100) / (max - min) + '%';
 
 /**
  * 滑块handle
@@ -298,7 +298,7 @@ export class Range extends React.Component<RangeItemProps, any> {
   pageXToValue(pageX: number) {
     const {x, width} = this.getBoundingClient(this.trackRef.current as Element);
     const {max, min} = this.props;
-    return ((pageX - x) * (max - min)) / width;
+    return ((pageX - x) * (max - min)) / width + min;
   }
 
   /**
@@ -366,16 +366,30 @@ export class Range extends React.Component<RangeItemProps, any> {
    */
   @autobind
   renderSteps() {
-    const {max, min, step, showSteps, classnames: cx} = this.props;
-    const steps = Math.floor((max - min) / step);
+    const {max, min, step, showSteps, classnames: cx, parts} = this.props;
+    let isShowSteps = showSteps;
+    // 只要设置了 parts 就展示分隔
+    if (parts > 1 || Array.isArray(parts)) {
+      isShowSteps = true;
+    }
+    // 总区间
+    const section = max - min;
+    // 总区间被平均分为多少块
+    const steps = parts > 1 ? parts : Math.floor(section / step);
+    // 平均分 每块的长度
+    const partLength = section / steps;
+    // parts为数组时，以0为起点(传入的值 - min)
+    const partLengthList = Array.isArray(parts)
+      ? parts.map(item => item - min)
+      : range(steps - 1).map(item => (item + 1) * partLength);
     return (
-      showSteps && (
+      isShowSteps && (
         <div>
-          {range(steps - 1).map(item => (
+          {partLengthList.map(item => (
             <span
               key={item}
               className={cx('InputRange-track-dot')}
-              style={{left: ((item + 1) * 100) / steps + '%'}}
+              style={{left: (item * 100) / (max - min) + '%'}}
             ></span>
           ))}
         </div>
@@ -437,13 +451,13 @@ export class Range extends React.Component<RangeItemProps, any> {
     const traceActiveStyle = {
       width: valueToOffsetLeft(
         multiple
-          ? (value as MultipleValue).max - (value as MultipleValue).min
+          ? (value as MultipleValue).max - (value as MultipleValue).min + min
           : value,
         min,
         max
       ),
       left: valueToOffsetLeft(
-        multiple ? (value as MultipleValue).min : 0,
+        multiple ? (value as MultipleValue).min : min,
         min,
         max
       )

package/src/components/Steps.tsx

@@ -69,8 +69,12 @@ export interface StepsSchema extends BaseSchema {
    * 展示模式
    */
   mode?: 'horizontal' | 'vertical';
-}
 
+  /**
+   * 标签放置位置
+   */
+   labelPlacement?: 'horizontal' | 'vertical';
+}
 export interface StepsProps extends ThemeProps {
   steps: StepSchema[];
   className: string;
@@ -81,6 +85,8 @@ export interface StepsProps extends ThemeProps {
         [propName: string]: StepStatus;
       };
   mode?: 'horizontal' | 'vertical';
+  labelPlacement?: 'horizontal' | 'vertical';
+  progressDot?: boolean;
   useMobileUI?: boolean;
 }
 
@@ -92,6 +98,8 @@ export function Steps(props: StepsProps) {
     current,
     status,
     mode = 'horizontal',
+    labelPlacement = 'horizontal',
+    progressDot = false,
     useMobileUI
   } = props;
   const FINISH_ICON = 'check';
@@ -129,48 +137,41 @@ export function Steps(props: StepsProps) {
 
   const mobileUI = useMobileUI && isMobile();
   return (
-    <ul
-      className={cx(
-        'Steps',
-        `Steps--${mode}`,
-        mobileUI ? 'Steps-mobile' : '',
-        className
-      )}
-    >
+    <ul className={cx( // 纵向步骤条暂时不支持labelPlacement属性
+      'Steps',
+      `Steps--Placement-${(progressDot || (labelPlacement === 'vertical' && mode != 'vertical')) ? 'vertical' : ''}`,
+      `Steps--${progressDot ? 'ProgressDot' : ''}`, 
+      `Steps--${mode}`,
+      mobileUI ? 'Steps-mobile' : '', className)}>
       {stepsRow.map((step, i) => {
         const {stepStatus, icon} = getStepStatus(step, i);
-
         return (
           <li
             key={i}
-            className={cx('StepsItem', `is-${stepStatus}`, step.className)}
+            className={cx('StepsItem', `is-${stepStatus}`, step.className, `StepsItem-${progressDot ? 'ProgressDot' : ''}`)}
           >
             <div className={cx('StepsItem-container')}>
-              <div
-                className={cx(
-                  'StepsItem-containerIcon',
-                  i < current && 'is-success'
-                )}
-              >
-                <span className={cx('StepsItem-icon')}>
-                  {icon ? <Icon icon={icon} className="icon" /> : i + 1}
-                </span>
-              </div>
+                <div className={cx('StepsItem-containerTail')}></div>
+                {progressDot ? <div className={cx('StepsItem-containerProgressDot')}></div>
+                  : <div className={cx('StepsItem-containerIcon', i < current && 'is-success')}>
+                      <span className={cx('StepsItem-icon')}>
+                          {icon ? <Icon icon={icon} className="icon" /> : i + 1}
+                      </span>
+                    </div>}
               <div className={cx('StepsItem-containerWrapper')}>
                 <div className={cx('StepsItem-body')}>
                   <div
                     className={cx(
                       'StepsItem-title',
+                      `StepsItem-${progressDot ? 'vertical-ProgressDot' : ''}`,
                       i < current && 'is-success'
                     )}
                   >
-                    <span>{step.title}</span>
-                    <span className={cx('StepsItem-subTitle')}>
-                      {step.subTitle}
-                    </span>
+                    <span className={cx('StepsItem-ellText')} title={String(step.title)}>{step.title}</span>
+                    <span className={cx('StepsItem-subTitle', 'StepsItem-ellText')} title={String(step.subTitle)}>{step.subTitle}</span>
                   </div>
-                  <div className={cx('StepsItem-description')}>
-                    {step.description}
+                  <div className={cx('StepsItem-description', 'StepsItem-ellText')} title={String(step.description)}>
+                    <span>{step.description}</span>
                   </div>
                 </div>
               </div>

package/src/components/calendar/YearsView.tsx

@@ -75,10 +75,6 @@ export class CustomYearsView extends React.Component<CustomYearsViewProps> {
         .clone()
         .set({year: year, month: irrelevantMonth, date: irrelevantDate});
 
-      // Not sure what 'rdtOld' is for, commenting out for now as it's not working properly
-      // if ( i === -1 | i === 10 )
-      // classes += ' rdtOld';
-
       noOfDaysInYear = parseInt(currentYear.endOf('year').format('DDD'), 10);
       daysInYear = Array.from({length: noOfDaysInYear}, function (e, i) {
         return i + 1;
@@ -95,6 +91,9 @@ export class CustomYearsView extends React.Component<CustomYearsViewProps> {
 
       if (selectedDate && selectedDate.year() === year) classes += ' rdtActive';
 
+      // 第一个和最后一个置灰
+      if (i === -1 || i === 10) classes += ' text-muted';
+
       props = {
         'key': year,
         'data-value': year,

package/src/factory.tsx

@@ -42,6 +42,7 @@ import {
   RendererEvent
 } from './utils/renderer-event';
 import {runActions} from './actions/Action';
+import {enableDebug} from './utils/debug';
 
 export interface TestFunc {
   (
@@ -152,6 +153,10 @@ export interface RenderOptions {
    * 过滤 html 标签，可用来添加 xss 保护逻辑
    */
   filterHtml?: (input: string) => string;
+  /**
+   * 是否开启 amis 调试
+   */
+  enableAMISDebug?: boolean;
   [propName: string]: any;
 }
 
@@ -271,6 +276,10 @@ const defaultOptions: RenderOptions = {
   affixOffsetBottom: 0,
   richTextToken: '',
   useMobileUI: true, // 是否启用移动端原生 UI
+  enableAMISDebug:
+    (window as any).enableAMISDebug ??
+    location.search.indexOf('amisDebug=1') !== -1 ??
+    false,
   loadRenderer,
   rendererEventListeners: [],
   fetcher() {
@@ -492,6 +501,10 @@ export function render(
       translate
     } as any;
 
+    if (options.enableAMISDebug) {
+      enableDebug();
+    }
+
     store = RendererStore.create({}, options);
     stores[options.session || 'global'] = store;
   }

package/src/locale/de-DE.ts

@@ -75,6 +75,19 @@ register('de-DE', {
   'Date.weekslater': '{{weeks}} Wochen später',
   'Date.yesterday': 'Gestern',
   'dateformat.year': 'YYYY',
+  'DateRange.daysago': 'letzten {{days}} Tage',
+  'DateRange.dayslater': 'innerhalb von {{days}} Tagen',
+  'DateRange.weeksago': 'letzten {{weeks}} Wochen',
+  'DateRange.weekslater': 'innerhalb von {{weeks}} Wochen',
+  'DateRange.monthsago': 'letzten {{months}} Monate',
+  'DateRange.monthslater': 'innerhalb von {{months}} Monaten',
+  'DateRange.quartersago': 'letzten {{quarters}} Quartale',
+  'DateRange.quarterslater': 'innerhalb von {{quarters}} Quartalen',
+  'DateRange.yearsago': 'letzten {{years}} Jahre',
+  'DateRange.yearslater': '{{years}} Jahren',
+  'DateRange.hoursago': 'letzten {{hours}} Stunden',
+  'DateRange.hourslater': 'innerhalb von {{hours}} Stunden',
+  'DateRange.1dayago': 'Vor 1 Tag',
   'DateRange.1daysago': 'Vor 1 Tag',
   'DateRange.7daysago': 'Vor 7 Tagen',
   'DateRange.30daysago': 'Vor 30 Tagen',

package/src/locale/en-US.ts

@@ -72,6 +72,19 @@ register('en-US', {
   'Date.weekslater': '{{weeks}} week(s) later',
   'Date.yesterday': 'Yesterday',
   'dateformat.year': 'YYYY',
+  'DateRange.daysago': 'Last {{days}} day(s)',
+  'DateRange.dayslater': 'Within {{days}} day(s)',
+  'DateRange.weeksago': 'Last {{weeks}} week(s)',
+  'DateRange.weekslater': 'Within {{weeks}} week(s)',
+  'DateRange.monthsago': 'Last {{months}} month(s)',
+  'DateRange.monthslater': 'Within {{months}} month(s)',
+  'DateRange.quartersago': 'Last {{quarters}} quarter(s)',
+  'DateRange.quarterslater': 'Within {{quarters}} quarter(s)',
+  'DateRange.yearsago': 'Last {{years}} year(s)',
+  'DateRange.yearslater': 'Within {{years}} year(s)',
+  'DateRange.hoursago': 'Last {{hours}} hour(s)',
+  'DateRange.hourslater': 'Within {{hours}} hour(s)',
+  'DateRange.1dayago': '1 day ago',
   'DateRange.1daysago': '1 day ago',
   'DateRange.7daysago': '7 days ago',
   'DateRange.30daysago': '30 days ago',

package/src/locale/zh-CN.ts

@@ -75,7 +75,20 @@ register('zh-CN', {
   'Date.weekslater': '{{weeks}}周后',
   'Date.yesterday': '昨天',
   'dateformat.year': 'YYYY年',
+  'DateRange.daysago': '最近{{days}}天',
+  'DateRange.dayslater': '{{days}}天以内',
+  'DateRange.weeksago': '最近{{weeks}}周',
+  'DateRange.weekslater': '{{weeks}}周以内',
+  'DateRange.monthsago': '最近{{months}}月',
+  'DateRange.monthslater': '{{months}}月以内',
+  'DateRange.quartersago': '最近{{quarters}}季度',
+  'DateRange.quarterslater': '{{quarters}}季度以内',
+  'DateRange.yearsago': '最近{{years}}年',
+  'DateRange.yearslater': '{{years}}年以内',
+  'DateRange.hoursago': '最近{{hours}}小时',
+  'DateRange.hourslater': '{{hours}}小时以内',
   'DateRange.1daysago': '最近1天',
+  'DateRange.1dayago': '最近1天',
   'DateRange.7daysago': '最近7天',
   'DateRange.30daysago': '最近30天',
   'DateRange.90daysago': '最近90天',