From bc75d810c4cfbfa1b93e6265664a9bec3066ec2f Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 19 Jun 2025 17:47:31 +0800
Subject: [PATCH] feat: choose time

---
 .../time-picker/header.tsx                    |  9 +++++--
 .../time-picker/index.tsx                     |  6 +++--
 .../base/date-and-time-picker/types.ts        |  2 ++
 .../auto-update-setting/config.ts             |  2 +-
 .../auto-update-setting/index.tsx             | 24 ++++++++++++++++++-
 web/i18n/en-US/plugin.ts                      |  1 +
 web/i18n/zh-Hans/plugin.ts                    |  1 +
 7 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/web/app/components/base/date-and-time-picker/time-picker/header.tsx b/web/app/components/base/date-and-time-picker/time-picker/header.tsx
index 3d85b2ea40..dc6b56f744 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/header.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/header.tsx
@@ -1,13 +1,18 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-const Header = () => {
+type Props = {
+  title?: string
+}
+const Header = ({
+  title,
+}: Props) => {
   const { t } = useTranslation()
 
   return (
     <div className='flex flex-col border-b-[0.5px] border-divider-regular'>
       <div className='system-md-semibold flex items-center px-2 py-1.5 text-text-primary'>
-        {t('time.title.pickTime')}
+        {title || t('time.title.pickTime')}
       </div>
     </div>
   )
diff --git a/web/app/components/base/date-and-time-picker/time-picker/index.tsx b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
index a5e666d631..b21c9f9795 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
@@ -20,6 +20,8 @@ const TimePicker = ({
   onChange,
   onClear,
   renderTrigger,
+  title,
+  popupClassName,
 }: TimePickerProps) => {
   const { t } = useTranslation()
   const [isOpen, setIsOpen] = useState(false)
@@ -142,10 +144,10 @@ const TimePicker = ({
           </div>
         )}
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-50'>
+      <PortalToFollowElemContent className={cn('z-50', popupClassName)}>
         <div className='mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'>
           {/* Header */}
-          <Header />
+          <Header title={title} />
 
           {/* Time Options */}
           <Options
diff --git a/web/app/components/base/date-and-time-picker/types.ts b/web/app/components/base/date-and-time-picker/types.ts
index 214c0f011b..de3ad895fc 100644
--- a/web/app/components/base/date-and-time-picker/types.ts
+++ b/web/app/components/base/date-and-time-picker/types.ts
@@ -54,6 +54,8 @@ export type TimePickerProps = {
   onChange: (date: Dayjs | undefined) => void
   onClear: () => void
   renderTrigger?: () => React.ReactNode
+  title?: string
+  popupClassName?: string
 }
 
 export type TimePickerFooterProps = {
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/config.ts b/web/app/components/plugins/reference-setting-modal/auto-update-setting/config.ts
index 084dfc9731..2144293762 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/config.ts
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/config.ts
@@ -1,7 +1,7 @@
 import type { AutoUpdateConfig } from './types'
 import { AUTO_UPDATE_MODE, AUTO_UPDATE_STRATEGY } from './types'
 export const defaultValue: AutoUpdateConfig = {
-  strategy_setting: AUTO_UPDATE_STRATEGY.disabled,
+  strategy_setting: AUTO_UPDATE_STRATEGY.fixOnly, // For test
   upgrade_time_of_day: 0,
   upgrade_mode: AUTO_UPDATE_MODE.update_all,
   exclude_plugins: [],
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
index 71cda8814d..66eb136913 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
@@ -5,9 +5,24 @@ import { AUTO_UPDATE_STRATEGY, type AutoUpdateConfig } from './types'
 import Label from '../label'
 import StrategyPicker from './strategy-picker'
 import { useTranslation } from 'react-i18next'
+import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
 
 const i18nPrefix = 'plugin.autoUpdate'
 
+const timeOfDayToDayjs = (timeOfDay: number): Dayjs => {
+  const hours = Math.floor(timeOfDay / 3600)
+  const minutes = (timeOfDay - hours * 3600) / 60
+  const res = dayjs().startOf('day').hour(hours).minute(minutes)
+  return res
+}
+
+const dayjsToTimeOfDay = (date?: Dayjs): number => {
+  if(!date) return 0
+  return date.hour() * 3600 + date.minute() * 60
+}
+
 type Props = {
   payload: AutoUpdateConfig
   onChange: (payload: AutoUpdateConfig) => void
@@ -18,7 +33,7 @@ const AutoUpdateSetting: FC<Props> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
-  const { strategy_setting } = payload
+  const { strategy_setting, upgrade_time_of_day } = payload
   const strategyDescription = useMemo(() => {
     switch (strategy_setting) {
       case AUTO_UPDATE_STRATEGY.fixOnly:
@@ -53,6 +68,13 @@ const AutoUpdateSetting: FC<Props> = ({
           <>
             <div className='flex items-center justify-between'>
               <Label label={t(`${i18nPrefix}.updateTime`)} />
+              <TimePicker
+                value={timeOfDayToDayjs(upgrade_time_of_day)}
+                onChange={v => handleChange('upgrade_time_of_day')(dayjsToTimeOfDay(v))}
+                onClear={() => handleChange('upgrade_time_of_day')(0)}
+                popupClassName='z-[99]'
+                title={t(`${i18nPrefix}.updateTime`)}
+              />
             </div>
             <div className='flex items-center'>
               <Label label={t(`${i18nPrefix}.specifyPluginsToUpdate`)} />
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 948be8fc3b..951595765b 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -133,6 +133,7 @@ const translation = {
         selectedDescription: 'Always update to latest version',
       },
     },
+    updateTimeTitle: 'Update time',
   },
   pluginInfoModal: {
     title: 'Plugin info',
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index 0c03c27431..8529bb3044 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -133,6 +133,7 @@ const translation = {
         selectedDescription: '始终更新到最新版本',
       },
     },
+    updateTimeTitle: '更新时间',
   },
   pluginInfoModal: {
     title: '插件信息',