Skip to content
This repository was archived by the owner on Apr 20, 2025. It is now read-only.

Commit 6d8c6a6

Browse files
BryceWGBryceWG
committed
chore: UI improve
1 parent cab8897 commit 6d8c6a6

File tree

3 files changed

+109
-84
lines changed

3 files changed

+109
-84
lines changed

‎develop_log.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,13 @@
229229
- 支持按时间范围搜索
230230
- 支持按关键词搜索
231231

232+
2. 优化UI细节
233+
- 通知气泡移动到右下角
234+
- 风格更加统一
235+
236+
3. 优化交互细节
237+
- 主页筛选按钮可以点击空白处关闭
238+
232239
## 下一步开发计划
233240
1. AI搜索
234241
- 添加AI搜索功能
@@ -240,13 +247,6 @@
240247
- 可以一键变成窄屏模式,方便挂起在屏幕侧边
241248
- 可以置顶窗口
242249

243-
3. 优化UI细节
244-
- 通知气泡移动到右下角
245-
- 风格更加统一
246-
247-
4. 优化交互细节
248-
- 主页筛选按钮可以点击空白处关闭
249-
250-
5. 优化打包体积
250+
3. 优化打包体积
251251

252-
6. Blinko联动
252+
4. Blinko联动

‎electron/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "trackflow",
3-
"version": "0.3.0",
3+
"version": "0.3.1",
44
"description": "TrackFlow Desktop App",
55
"main": "dist/main.js",
66
"repository": {

‎frontend/src/App.tsx

Lines changed: 99 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
XMarkIcon,
88
MagnifyingGlassIcon,
99
FunnelIcon,
10-
SparklesIcon
10+
SparklesIcon,
11+
ChevronUpIcon
1112
} from '@heroicons/react/24/outline'
1213
import { Modal } from './components/Modal'
1314
import { ProjectForm } from './components/ProjectForm'
@@ -135,6 +136,7 @@ function App() {
135136
dateRange: { start: null, end: null },
136137
});
137138
const [isFilterOpen, setIsFilterOpen] = useState(false);
139+
const [isSettingsCollapsed, setIsSettingsCollapsed] = useState(false);
138140

139141
// 模拟加载效果
140142
useEffect(() => {
@@ -533,45 +535,56 @@ function App() {
533535
</nav>
534536

535537
{/* AI 和用户管理按钮 */}
536-
<div className="p-4 border-t space-y-2">
537-
<button
538-
onClick={() => setIsAIConfigOpen(true)}
539-
className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 bg-gray-50 rounded-md hover:bg-gray-100"
540-
>
541-
AI 设置
542-
</button>
543-
<button
544-
onClick={() => setIsPromptPresetsOpen(true)}
545-
className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 bg-gray-50 rounded-md hover:bg-gray-100"
546-
>
547-
提示词预设
548-
</button>
549-
<button
550-
onClick={() => setIsWebDAVOpen(true)}
551-
className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 bg-gray-50 rounded-md hover:bg-gray-100"
552-
>
553-
数据管理
554-
</button>
555-
<button
556-
onClick={() => setIsShortcutSettingsOpen(true)}
557-
className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 bg-gray-50 rounded-md hover:bg-gray-100"
558-
>
559-
快捷键设置
560-
</button>
561-
{currentUser?.role === 'admin' && (
538+
<div className="p-4 border-t">
539+
<div className="flex items-center justify-between mb-2">
540+
<span className="text-sm font-medium text-gray-600">设置</span>
562541
<button
563-
onClick={() => setIsUserManagementOpen(true)}
542+
onClick={() => setIsSettingsCollapsed(!isSettingsCollapsed)}
543+
className="p-1 hover:bg-gray-100 rounded-md"
544+
>
545+
<ChevronUpIcon className={`w-4 h-4 text-gray-500 transform transition-transform duration-200 ${isSettingsCollapsed ? 'rotate-180' : ''}`} />
546+
</button>
547+
</div>
548+
<div className={`space-y-2 transition-all duration-200 ${isSettingsCollapsed ? 'h-0 overflow-hidden opacity-0' : 'h-auto opacity-100'}`}>
549+
<button
550+
onClick={() => setIsAIConfigOpen(true)}
564551
className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 bg-gray-50 rounded-md hover:bg-gray-100"
565552
>
566-
用户管理
553+
AI 设置
567554
</button>
568-
)}
569-
<button
570-
onClick={handleLogout}
571-
className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-red-600 hover:text-red-700 bg-gray-50 rounded-md hover:bg-gray-100"
572-
>
573-
退出登录
574-
</button>
555+
<button
556+
onClick={() => setIsPromptPresetsOpen(true)}
557+
className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 bg-gray-50 rounded-md hover:bg-gray-100"
558+
>
559+
提示词预设
560+
</button>
561+
<button
562+
onClick={() => setIsWebDAVOpen(true)}
563+
className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 bg-gray-50 rounded-md hover:bg-gray-100"
564+
>
565+
数据管理
566+
</button>
567+
<button
568+
onClick={() => setIsShortcutSettingsOpen(true)}
569+
className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 bg-gray-50 rounded-md hover:bg-gray-100"
570+
>
571+
快捷键设置
572+
</button>
573+
{currentUser?.role === 'admin' && (
574+
<button
575+
onClick={() => setIsUserManagementOpen(true)}
576+
className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 bg-gray-50 rounded-md hover:bg-gray-100"
577+
>
578+
用户管理
579+
</button>
580+
)}
581+
<button
582+
onClick={handleLogout}
583+
className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-red-600 hover:text-red-700 bg-gray-50 rounded-md hover:bg-gray-100"
584+
>
585+
退出登录
586+
</button>
587+
</div>
575588
</div>
576589

577590
{/* 添加快捷键设置弹窗 */}
@@ -620,30 +633,44 @@ function App() {
620633
<div className="p-4 sm:p-6">
621634
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 space-y-4 sm:space-y-0">
622635
<div className="w-full sm:w-auto pl-12 lg:pl-0">
623-
<h1 className="text-xl sm:text-2xl font-semibold text-gray-800 mb-2 sm:mb-0">
624-
{searchParams.keyword ? (
625-
<div className="flex items-center gap-2">
626-
<span>搜索结果</span>
627-
<button
628-
onClick={() => {
629-
setSearchParams({
630-
keyword: '',
631-
projectId: null,
632-
dateRange: { start: null, end: null },
633-
});
634-
}}
635-
className="text-sm font-normal text-gray-500 hover:text-gray-700 flex items-center"
636-
>
637-
<XMarkIcon className="h-5 w-5 mr-1" />
638-
清除搜索
639-
</button>
640-
</div>
641-
) : selectedProjectId ? (
642-
`${getProjectName(selectedProjectId)}的时间轴`
643-
) : (
644-
'所有记录'
645-
)}
646-
</h1>
636+
<div className="flex items-center justify-between">
637+
<h1 className="text-xl sm:text-2xl font-semibold text-gray-800 mb-0">
638+
{searchParams.keyword ? (
639+
<div className="flex items-center gap-2">
640+
<span>搜索结果</span>
641+
<button
642+
onClick={() => {
643+
setSearchParams({
644+
keyword: '',
645+
projectId: null,
646+
dateRange: { start: null, end: null },
647+
});
648+
}}
649+
className="text-sm font-normal text-gray-500 hover:text-gray-700 flex items-center"
650+
>
651+
<XMarkIcon className="h-5 w-5 mr-1" />
652+
清除搜索
653+
</button>
654+
</div>
655+
) : selectedProjectId ? (
656+
`${getProjectName(selectedProjectId)}的时间轴`
657+
) : (
658+
'所有记录'
659+
)}
660+
</h1>
661+
<button
662+
className="sm:hidden flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
663+
onClick={() => {
664+
handleOpenEntryModal();
665+
handleCloseMobileMenu();
666+
}}
667+
disabled={projects.length === 0}
668+
title={projects.length === 0 ? "请先创建项目" : "快捷键：Ctrl/Command + N"}
669+
>
670+
<PlusIcon className="w-5 h-5 mr-2" />
671+
新建记录
672+
</button>
673+
</div>
647674
{searchParams.keyword && (
648675
<div className="text-sm text-gray-500 mt-1 mb-4">
649676
{`"${searchParams.keyword}" 的搜索结果（${filteredEntries.length} 条）`}
@@ -677,20 +704,18 @@ function App() {
677704
</button>
678705
</div>
679706
</div>
680-
<div className="flex items-center gap-2">
681-
<button
682-
className="w-full sm:w-auto flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
683-
onClick={() => {
684-
handleOpenEntryModal();
685-
handleCloseMobileMenu();
686-
}}
687-
disabled={projects.length === 0}
688-
title={projects.length === 0 ? "请先创建项目" : "快捷键：Ctrl/Command + N"}
689-
>
690-
<PlusIcon className="w-5 h-5 mr-2" />
691-
新建记录
692-
</button>
693-
</div>
707+
<button
708+
className="hidden sm:flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
709+
onClick={() => {
710+
handleOpenEntryModal();
711+
handleCloseMobileMenu();
712+
}}
713+
disabled={projects.length === 0}
714+
title={projects.length === 0 ? "请先创建项目" : "快捷键：Ctrl/Command + N"}
715+
>
716+
<PlusIcon className="w-5 h-5 mr-2" />
717+
新建记录
718+
</button>
694719
</div>
695720

696721
{/* 时间轴 */}

0 commit comments

Comments
 (0)