镜像自地址
https://github.com/lhly/search-syntax-pro.git
已同步 2026-10-21 06:41:51 +08:00
feat(搜索表单): 添加日期输入框专用样式并调整布局
为日期输入框添加专用样式限制最大宽度以适配悬浮面板布局 调整搜索表单中日期范围选择器的间距 添加悬浮按钮支持的搜索引擎说明文案
这个提交包含在:
父节点
4c52de98ad
当前提交
82c886273a
@ -474,7 +474,7 @@ export function SearchForm({
|
|||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
{t('searchForm.dateRange.label')}
|
{t('searchForm.dateRange.label')}
|
||||||
</label>
|
</label>
|
||||||
<div className="grid grid-cols-2 gap-2">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
@ -485,7 +485,7 @@ export function SearchForm({
|
|||||||
to: searchParams.dateRange?.to || ''
|
to: searchParams.dateRange?.to || ''
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
className="input"
|
className="input-date"
|
||||||
placeholder={t('searchForm.dateRange.from')}
|
placeholder={t('searchForm.dateRange.from')}
|
||||||
/>
|
/>
|
||||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{t('searchForm.dateRange.from')}</p>
|
<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
|
to: e.target.value
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
className="input"
|
className="input-date"
|
||||||
placeholder={t('searchForm.dateRange.to')}
|
placeholder={t('searchForm.dateRange.to')}
|
||||||
/>
|
/>
|
||||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{t('searchForm.dateRange.to')}</p>
|
<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.enableContextMenu.description': '选中文本后右键显示快速搜索菜单',
|
||||||
'options.fields.enableFloatingButton.label': '启用悬浮按钮',
|
'options.fields.enableFloatingButton.label': '启用悬浮按钮',
|
||||||
'options.fields.enableFloatingButton.description': '在搜索引擎页面显示可拖动的悬浮按钮,点击打开高级语法面板',
|
'options.fields.enableFloatingButton.description': '在搜索引擎页面显示可拖动的悬浮按钮,点击打开高级语法面板',
|
||||||
|
'options.fields.enableFloatingButton.supportedEngines': '支持的搜索引擎:百度、必应、Yandex、DuckDuckGo',
|
||||||
'options.fields.historyLimit.label': '历史记录限制',
|
'options.fields.historyLimit.label': '历史记录限制',
|
||||||
'options.fields.historyLimit.description': '最多保存的历史记录数量(建议不超过1000条)',
|
'options.fields.historyLimit.description': '最多保存的历史记录数量(建议不超过1000条)',
|
||||||
'options.actions.export': '导出数据',
|
'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.enableContextMenu.description': 'Show quick search menu when right-clicking selected text',
|
||||||
'options.fields.enableFloatingButton.label': 'Enable floating button',
|
'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.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.label': 'History limit',
|
||||||
'options.fields.historyLimit.description': 'Maximum number of saved history entries (recommended ≤ 1000).',
|
'options.fields.historyLimit.description': 'Maximum number of saved history entries (recommended ≤ 1000).',
|
||||||
'options.actions.export': 'Export data',
|
'options.actions.export': 'Export data',
|
||||||
|
|||||||
@ -528,13 +528,16 @@ function OptionsContent({
|
|||||||
|
|
||||||
{/* 🔥 启用悬浮按钮 */}
|
{/* 🔥 启用悬浮按钮 */}
|
||||||
<div className="flex items-center justify-between">
|
<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">
|
<label htmlFor="enableFloatingButton" className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
{t('options.fields.enableFloatingButton.label')}
|
{t('options.fields.enableFloatingButton.label')}
|
||||||
</label>
|
</label>
|
||||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||||
{t('options.fields.enableFloatingButton.description')}
|
{t('options.fields.enableFloatingButton.description')}
|
||||||
</p>
|
</p>
|
||||||
|
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
|
||||||
|
{t('options.fields.enableFloatingButton.supportedEngines')}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
id="enableFloatingButton"
|
id="enableFloatingButton"
|
||||||
|
|||||||
@ -87,6 +87,11 @@
|
|||||||
@apply border-red-300 dark:border-red-600 focus:ring-red-500;
|
@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 {
|
.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;
|
@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;
|
||||||
|
|||||||
正在加载...
在新工单中引用
屏蔽一个用户