feat: refactor the components

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker.tsx

@@ -1,121 +0,0 @@
-'use client'
-import type { PeriodParams } from '@/app/components/app/overview/app-chart'
-import type { FC } from 'react'
-import React, { useCallback } from 'react'
-import { SimpleSelect } from '@/app/components/base/select'
-import type { Item } from '@/app/components/base/select'
-import type { Dayjs } from 'dayjs'
-import dayjs from 'dayjs'
-import { HourglassShape } from '@/app/components/base/icons/src/vender/other'
-import { noop } from 'lodash-es'
-import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
-import { RiArrowDownSLine, RiCalendarLine, RiCheckLine } from '@remixicon/react'
-import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
-import 'dayjs/locale/zh-cn'
-import { formatToLocalTime } from '@/utils/format'
-import { useI18N } from '@/context/i18n'
-
-const today = dayjs()
-
-type Props = {
-  ranges: { value: number; name: string }[]
-  onSelect: (payload: PeriodParams) => void
-  queryDateFormat: string
-}
-
-const TimeRangePicker: FC<Props> = ({
-  ranges,
-  onSelect,
-  queryDateFormat,
-}) => {
-  const { t } = useTranslation()
-
-  const isCustom = false
-
-  const renderRangeTrigger = useCallback((item: Item | null, isOpen: boolean) => {
-    return (
-      <div className={cn('flex h-8 cursor-pointer items-center space-x-1.5 rounded-lg bg-components-input-bg-normal pl-3 pr-2', isOpen && 'bg-state-base-hover-alt')}>
-        <div className='system-sm-regular text-components-input-text-filled'>{isCustom ? t('appLog.filter.period.custom') : item?.name}</div>
-        <RiArrowDownSLine className={cn('size-4 text-text-quaternary', isOpen && 'text-text-secondary')} />
-      </div>
-    )
-  }, [isCustom])
-
-  const renderOption = useCallback(({ item, selected }: { item: Item; selected: boolean }) => {
-    return (
-      <>
-        {selected && (
-          <span
-            className={cn(
-              'absolute left-2 top-[9px] flex items-center  text-text-accent',
-            )}
-          >
-            <RiCheckLine className="h-4 w-4" aria-hidden="true" />
-          </span>
-        )}
-        <span className={cn('system-md-regular block truncate')}>{item.name}</span>
-      </>
-    )
-  }, [])
-
-  const handleSelectRange = useCallback((item: Item) => {
-    const { name, value } = item
-    let period: PeriodParams['query'] | null = null
-    if (value === 0) {
-      const startOfToday = today.startOf('day').format(queryDateFormat)
-      const endOfToday = today.endOf('day').format(queryDateFormat)
-      period = { start: startOfToday, end: endOfToday }
-    }
-    else {
-      period = { start: today.subtract(item.value as number, 'day').startOf('day').format(queryDateFormat), end: today.endOf('day').format(queryDateFormat) }
-    }
-    onSelect({ query: period!, name })
-  }, [onSelect])
-
-  const { locale } = useI18N()
-
-  const renderDate = useCallback(({ value, handleClickTrigger, isOpen }: { value?: Dayjs, handleClickTrigger: () => void, isOpen: boolean }) => {
-    return (
-      <div className={cn('system-sm-regular flex h-7 cursor-pointer items-center rounded-lg px-1 text-components-input-text-filled hover:bg-state-base-hover', isOpen && 'bg-state-base-hover')} onClick={handleClickTrigger}>
-        {value ? formatToLocalTime(value, locale, 'MMM D') : ''}
-      </div>
-    )
-  }, [locale])
-
-  return (
-    <div className='flex items-center'>
-      <SimpleSelect
-        items={ranges.map(v => ({ ...v, name: t(`appLog.filter.period.${v.name}`) }))}
-        className='mt-0 !w-40'
-        notClearable={true}
-        onSelect={handleSelectRange}
-        defaultValue={0}
-        wrapperClassName='h-8'
-        optionWrapClassName='w-[200px] translate-x-[-24px]'
-        renderTrigger={renderRangeTrigger}
-        optionClassName='flex items-center py-0 pl-7 pr-2 h-8'
-        renderOption={renderOption}
-      />
-      <HourglassShape className='h-3.5 w-2 text-components-input-bg-normal' />
-      <div className='flex h-8 items-center space-x-0.5 rounded-lg bg-components-input-bg-normal px-2'>
-        <RiCalendarLine className='size-3.5 text-text-tertiary' />
-        <DatePicker
-          value={today}
-          onChange={noop}
-          renderTrigger={renderDate}
-          needTimePicker={false}
-        />
-        <span className='system-sm-regular text-text-tertiary'>-</span>
-        <DatePicker
-          value={today}
-          onChange={noop}
-          renderTrigger={renderDate}
-          needTimePicker={false}
-        />
-      </div>
-
-    </div>
-  )
-}
-export default React.memo(TimeRangePicker)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx

@@ -0,0 +1,57 @@
+'use client'
+import { RiCalendarLine } from '@remixicon/react'
+import type { Dayjs } from 'dayjs'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import cn from '@/utils/classnames'
+import { formatToLocalTime } from '@/utils/format'
+import { useI18N } from '@/context/i18n'
+import Picker from '@/app/components/base/date-and-time-picker/date-picker'
+import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
+import { noop } from 'lodash-es'
+
+type Props = {
+  start: Dayjs
+  end: Dayjs
+  onStartChange: (date?: Dayjs) => void
+  onEndChange: (date?: Dayjs) => void
+}
+
+const DatePicker: FC<Props> = ({
+  start,
+  end,
+  onStartChange,
+  onEndChange,
+}) => {
+  const { locale } = useI18N()
+
+  const renderDate = useCallback(({ value, handleClickTrigger, isOpen }: TriggerProps) => {
+    return (
+      <div className={cn('system-sm-regular flex h-7 cursor-pointer items-center rounded-lg px-1 text-components-input-text-filled hover:bg-state-base-hover', isOpen && 'bg-state-base-hover')} onClick={handleClickTrigger}>
+        {value ? formatToLocalTime(value, locale, 'MMM D') : ''}
+      </div>
+    )
+  }, [locale])
+  return (
+    <div className='flex h-8 items-center space-x-0.5 rounded-lg bg-components-input-bg-normal px-2'>
+      <RiCalendarLine className='size-3.5 text-text-tertiary' />
+      <Picker
+        value={start}
+        onChange={onStartChange}
+        renderTrigger={renderDate}
+        needTimePicker={false}
+        onClear={noop}
+      />
+      <span className='system-sm-regular text-text-tertiary'>-</span>
+      <Picker
+        value={end}
+        onChange={onEndChange}
+        renderTrigger={renderDate}
+        needTimePicker={false}
+        onClear={noop}
+      />
+    </div>
+
+  )
+}
+export default React.memo(DatePicker)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/index.tsx

@@ -0,0 +1,72 @@
+'use client'
+import type { PeriodParams, PeriodParamsWithTimeRange } from '@/app/components/app/overview/app-chart'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import type { Dayjs } from 'dayjs'
+import { HourglassShape } from '@/app/components/base/icons/src/vender/other'
+import RangeSelector from './range-selector'
+import DatePicker from './date-picker'
+import dayjs from 'dayjs'
+
+const today = dayjs()
+
+type Props = {
+  ranges: { value: number; name: string }[]
+  onSelect: (payload: PeriodParams) => void
+  queryDateFormat: string
+}
+
+const TimeRangePicker: FC<Props> = ({
+  ranges,
+  onSelect,
+  queryDateFormat,
+}) => {
+  const [isCustomRange, setIsCustomRange] = useState(false)
+  const [start, setStart] = useState<Dayjs>(today)
+  const [end, setEnd] = useState<Dayjs>(today)
+
+  const handleRangeChange = useCallback((payload: PeriodParamsWithTimeRange) => {
+    setIsCustomRange(false)
+    setStart(payload.query!.start)
+    setEnd(payload.query!.end)
+    onSelect({
+      name: payload.name,
+      query: {
+        start: payload.query!.start.format(queryDateFormat),
+        end: payload.query!.end.format(queryDateFormat),
+      },
+    })
+  }, [onSelect])
+
+  const handleStartChange = useCallback((date?: Dayjs) => {
+    if (!date) return
+    setStart(date)
+    setIsCustomRange(true)
+    onSelect({ name: 'custom', query: { start: date.format(queryDateFormat), end: end.format(queryDateFormat) } })
+  }, [end, onSelect, queryDateFormat])
+
+  const handleEndChange = useCallback((date?: Dayjs) => {
+    if (!date) return
+    setEnd(date)
+    setIsCustomRange(true)
+    onSelect({ name: 'custom', query: { start: start.format(queryDateFormat), end: date.format(queryDateFormat) } })
+  }, [start, onSelect, queryDateFormat])
+
+  return (
+    <div className='flex items-center'>
+      <RangeSelector
+        isCustomRange={isCustomRange}
+        ranges={ranges}
+        onSelect={handleRangeChange}
+      />
+      <HourglassShape className='h-3.5 w-2 text-components-input-bg-normal' />
+      <DatePicker
+        start={start}
+        end={end}
+        onStartChange={handleStartChange}
+        onEndChange={handleEndChange}
+      />
+    </div>
+  )
+}
+export default React.memo(TimeRangePicker)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx

@@ -0,0 +1,81 @@
+'use client'
+import type { PeriodParamsWithTimeRange, TimeRange } from '@/app/components/app/overview/app-chart'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { SimpleSelect } from '@/app/components/base/select'
+import type { Item } from '@/app/components/base/select'
+import dayjs from 'dayjs'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+
+const today = dayjs()
+
+type Props = {
+  isCustomRange: boolean
+  ranges: { value: number; name: string }[]
+  onSelect: (payload: PeriodParamsWithTimeRange) => void
+}
+
+const RangeSelector: FC<Props> = ({
+  isCustomRange,
+  ranges,
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+
+  const handleSelectRange = useCallback((item: Item) => {
+    const { name, value } = item
+    let period: TimeRange | null = null
+    if (value === 0) {
+      const startOfToday = today.startOf('day')
+      const endOfToday = today.endOf('day')
+      period = { start: startOfToday, end: endOfToday }
+    }
+    else {
+      period = { start: today.subtract(item.value as number, 'day').startOf('day'), end: today.endOf('day') }
+    }
+    onSelect({ query: period!, name })
+  }, [onSelect])
+
+  const renderTrigger = useCallback((item: Item | null, isOpen: boolean) => {
+    return (
+      <div className={cn('flex h-8 cursor-pointer items-center space-x-1.5 rounded-lg bg-components-input-bg-normal pl-3 pr-2', isOpen && 'bg-state-base-hover-alt')}>
+        <div className='system-sm-regular text-components-input-text-filled'>{isCustomRange ? t('appLog.filter.period.custom') : item?.name}</div>
+        <RiArrowDownSLine className={cn('size-4 text-text-quaternary', isOpen && 'text-text-secondary')} />
+      </div>
+    )
+  }, [isCustomRange])
+
+  const renderOption = useCallback(({ item, selected }: { item: Item; selected: boolean }) => {
+    return (
+      <>
+        {selected && (
+          <span
+            className={cn(
+              'absolute left-2 top-[9px] flex items-center  text-text-accent',
+            )}
+          >
+            <RiCheckLine className="h-4 w-4" aria-hidden="true" />
+          </span>
+        )}
+        <span className={cn('system-md-regular block truncate')}>{item.name}</span>
+      </>
+    )
+  }, [])
+  return (
+    <SimpleSelect
+      items={ranges.map(v => ({ ...v, name: t(`appLog.filter.period.${v.name}`) }))}
+      className='mt-0 !w-40'
+      notClearable={true}
+      onSelect={handleSelectRange}
+      defaultValue={0}
+      wrapperClassName='h-8'
+      optionWrapClassName='w-[200px] translate-x-[-24px]'
+      renderTrigger={renderTrigger}
+      optionClassName='flex items-center py-0 pl-7 pr-2 h-8'
+      renderOption={renderOption}
+    />
+  )
+}
+export default React.memo(RangeSelector)

web/app/components/app/overview/app-chart.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import ReactECharts from 'echarts-for-react'
 import type { EChartsOption } from 'echarts'
 import useSWR from 'swr'
+import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import { get } from 'lodash-es'
 import Decimal from 'decimal.js'
@@ -78,6 +79,16 @@ export type PeriodParams = {
   }
 }
 
+export type TimeRange = {
+  start: Dayjs
+  end: Dayjs
+}
+
+export type PeriodParamsWithTimeRange = {
+  name: string
+  query?: TimeRange
+}
+
 export type IBizChartProps = {
   period: PeriodParams
   id: string
@@ -215,9 +226,7 @@ const Chart: React.FC<IChartProps> = ({
           formatter(params) {
             return `<div style='color:#6B7280;font-size:12px'>${params.name}</div>
                           <div style='font-size:14px;color:#1F2A37'>${valueFormatter((params.data as any)[yField])}
-                              ${!CHART_TYPE_CONFIG[chartType].showTokens
-                                ? ''
-                                : `<span style='font-size:12px'>
+                              ${!CHART_TYPE_CONFIG[chartType].showTokens ? '' : `<span style='font-size:12px'>
                                   <span style='margin-left:4px;color:#6B7280'>(</span>
                                   <span style='color:#FF8A4C'>~$${get(params.data, 'total_price', 0)}</span>
                                   <span style='color:#6B7280'>)</span>