dify

dify/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx

@@ -0,0 +1,25 @@
+import type { FC } from 'react'
+import React from 'react'
+import Button from '../../button'
+import type { YearAndMonthPickerFooterProps } from '../types'
+import { useTranslation } from 'react-i18next'
+
+const Footer: FC<YearAndMonthPickerFooterProps> = ({
+  handleYearMonthCancel,
+  handleYearMonthConfirm,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='grid grid-cols-2 gap-x-1 p-2'>
+      <Button size='small' onClick={handleYearMonthCancel}>
+        {t('time.operation.cancel')}
+      </Button>
+      <Button variant='primary' size='small' onClick={handleYearMonthConfirm}>
+        {t('time.operation.ok')}
+      </Button>
+    </div>
+  )
+}
+
+export default React.memo(Footer)

dify/web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx

@@ -0,0 +1,27 @@
+import React, { type FC } from 'react'
+import type { YearAndMonthPickerHeaderProps } from '../types'
+import { useMonths } from '../hooks'
+import { RiArrowUpSLine } from '@remixicon/react'
+
+const Header: FC<YearAndMonthPickerHeaderProps> = ({
+  selectedYear,
+  selectedMonth,
+  onClick,
+}) => {
+  const months = useMonths()
+
+  return (
+    <div className='flex border-b-[0.5px] border-divider-regular p-2 pb-1'>
+      {/* Year and Month */}
+      <button type="button"
+        onClick={onClick}
+        className='system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover'
+      >
+        <span>{`${months[selectedMonth]} ${selectedYear}`}</span>
+        <RiArrowUpSLine className='h-4 w-4 text-text-tertiary' />
+      </button>
+    </div>
+  )
+}
+
+export default React.memo(Header)

dify/web/app/components/base/date-and-time-picker/year-and-month-picker/options.tsx

@@ -0,0 +1,55 @@
+import React, { type FC } from 'react'
+import type { YearAndMonthPickerOptionsProps } from '../types'
+import { useMonths, useYearOptions } from '../hooks'
+import OptionListItem from '../common/option-list-item'
+
+const Options: FC<YearAndMonthPickerOptionsProps> = ({
+  selectedMonth,
+  selectedYear,
+  handleMonthSelect,
+  handleYearSelect,
+}) => {
+  const months = useMonths()
+  const yearOptions = useYearOptions()
+
+  return (
+    <div className='grid grid-cols-2 gap-x-1 p-2'>
+      {/* Month Picker */}
+      <ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
+        {
+          months.map((month, index) => {
+            const isSelected = selectedMonth === index
+            return (
+              <OptionListItem
+                key={month}
+                isSelected={isSelected}
+                onClick={handleMonthSelect.bind(null, index)}
+              >
+                {month}
+              </OptionListItem>
+            )
+          })
+        }
+      </ul>
+      {/* Year Picker */}
+      <ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
+        {
+          yearOptions.map((year) => {
+            const isSelected = selectedYear === year
+            return (
+              <OptionListItem
+                key={year}
+                isSelected={isSelected}
+                onClick={handleYearSelect.bind(null, year)}
+              >
+                {year}
+              </OptionListItem>
+            )
+          })
+        }
+      </ul>
+    </div>
+  )
+}
+
+export default React.memo(Options)