feat(搜索表单): 添加日期输入框专用样式并调整布局

为日期输入框添加专用样式限制最大宽度以适配悬浮面板布局
调整搜索表单中日期范围选择器的间距
添加悬浮按钮支持的搜索引擎说明文案
这个提交包含在:
Zain 2025-12-03 09:27:08 +08:00
父节点 4c52de98ad
当前提交 82c886273a
共有 4 个文件被更改,包括 14 次插入 和 4 次删除

查看文件

@ -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>

查看文件

@ -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',

查看文件

@ -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"

查看文件

@ -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;