From 82c886273a8699844c1945386d5c6f5bdb02e08d Mon Sep 17 00:00:00 2001
From: Zain <lhlyzh@outlook.com>
Date: Wed, 3 Dec 2025 09:27:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=90=9C=E7=B4=A2=E8=A1=A8=E5=8D=95):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=97=A5=E6=9C=9F=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?=E4=B8=93=E7=94=A8=E6=A0=B7=E5=BC=8F=E5=B9=B6=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为日期输入框添加专用样式限制最大宽度以适配悬浮面板布局
调整搜索表单中日期范围选择器的间距
添加悬浮按钮支持的搜索引擎说明文案
---
 src/components/SearchForm.tsx | 6 +++---
 src/i18n/translations.ts      | 2 ++
 src/options/App.tsx           | 5 ++++-
 src/styles/globals.css        | 5 +++++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/SearchForm.tsx b/src/components/SearchForm.tsx
index d6beb02..3760590 100644
--- a/src/components/SearchForm.tsx
+++ b/src/components/SearchForm.tsx
@@ -474,7 +474,7 @@ export function SearchForm({
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                     {t('searchForm.dateRange.label')}
                   </label>
-                  <div className="grid grid-cols-2 gap-2">
+                  <div className="grid grid-cols-2 gap-4">
                     <div>
                       <input
                         type="date"
@@ -485,7 +485,7 @@ export function SearchForm({
                             to: searchParams.dateRange?.to || ''
                           })
                         }
-                        className="input"
+                        className="input-date"
                         placeholder={t('searchForm.dateRange.from')}
                       />
                       <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{t('searchForm.dateRange.from')}</p>
@@ -500,7 +500,7 @@ export function SearchForm({
                             to: e.target.value
                           })
                         }
-                        className="input"
+                        className="input-date"
                         placeholder={t('searchForm.dateRange.to')}
                       />
                       <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{t('searchForm.dateRange.to')}</p>
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 580055f..6f341ea 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -123,6 +123,7 @@ const translations: Record<Language, Record<string, string>> = {
     'options.fields.enableContextMenu.description': '选中文本后右键显示快速搜索菜单',
     'options.fields.enableFloatingButton.label': '启用悬浮按钮',
     'options.fields.enableFloatingButton.description': '在搜索引擎页面显示可拖动的悬浮按钮，点击打开高级语法面板',
+    'options.fields.enableFloatingButton.supportedEngines': '支持的搜索引擎:百度、必应、Yandex、DuckDuckGo',
     'options.fields.historyLimit.label': '历史记录限制',
     'options.fields.historyLimit.description': '最多保存的历史记录数量（建议不超过1000条）',
     'options.actions.export': '导出数据',
@@ -637,6 +638,7 @@ const translations: Record<Language, Record<string, string>> = {
     'options.fields.enableContextMenu.description': 'Show quick search menu when right-clicking selected text',
     'options.fields.enableFloatingButton.label': 'Enable floating button',
     'options.fields.enableFloatingButton.description': 'Show draggable floating button on search engine pages to open advanced syntax panel',
+    'options.fields.enableFloatingButton.supportedEngines': 'Supported search engines: Baidu, Bing, Yandex, DuckDuckGo',
     'options.fields.historyLimit.label': 'History limit',
     'options.fields.historyLimit.description': 'Maximum number of saved history entries (recommended ≤ 1000).',
     'options.actions.export': 'Export data',
diff --git a/src/options/App.tsx b/src/options/App.tsx
index fe378e7..de3126f 100644
--- a/src/options/App.tsx
+++ b/src/options/App.tsx
@@ -528,13 +528,16 @@ function OptionsContent({
 
           {/* 🔥 启用悬浮按钮 */}
           <div className="flex items-center justify-between">
-            <div>
+            <div className="flex-1">
               <label htmlFor="enableFloatingButton" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                 {t('options.fields.enableFloatingButton.label')}
               </label>
               <p className="text-xs text-gray-500 dark:text-gray-400">
                 {t('options.fields.enableFloatingButton.description')}
               </p>
+              <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                {t('options.fields.enableFloatingButton.supportedEngines')}
+              </p>
             </div>
             <input
               id="enableFloatingButton"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 6b15392..b693195 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -87,6 +87,11 @@
     @apply border-red-300 dark:border-red-600 focus:ring-red-500;
   }
 
+  /* 日期输入框专用样式 - 限制最大宽度以适配悬浮面板布局 */
+  .input-date {
+    @apply w-full max-w-[180px] px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
+  }
+
   /* 下拉选择框组件 */
   .select {
     @apply w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 cursor-pointer appearance-none bg-no-repeat bg-right;