Skip to content

Commit 5145c19

Browse files
pandaCurepandaCure
authored
fix: fix ui problems (#257)
1 parent 1de34ef commit 5145c19

11 files changed

Lines changed: 89 additions & 80 deletions

File tree

‎frontend/src/renderer/src/Router.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const AppContent: FC = () => {
8484
background:
8585
'linear-gradient(165.9deg, #CEC1D2 -3.95%, #D9DAE8 3.32%, #F2F2F2 23.35%, #F2F0E6 71.67%, #F9FAED 76.64%, #FFEDDF 83.97%)'
8686
}}>
87-
<div style={{ appRegion: 'drag', width: '12px', height: '100%' } as React.CSSProperties} />
87+
{/* <div style={{ appRegion: 'drag', width: '12px', height: '100%' } as React.CSSProperties} /> */}
8888
<Sidebar />
8989
<div className="flex-1 flex flex-col pr-2">{routes}</div>
9090
</div>

‎frontend/src/renderer/src/components/Sidebar/index.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import settings from '/src/assets/icons/settings.svg'
1313
// import resourcesIcon from '/src/assets/icons/resources.svg'
1414
// import { IconRobot } from '@arco-design/web-react/icon'
1515
import './index.css'
16+
import { CSSProperties } from 'react'
1617
const { Sider } = Layout
1718

1819
const tabItems = [
@@ -61,13 +62,11 @@ const Sidebar = () => {
6162
return (
6263
<Sider
6364
width={176}
64-
className="sidebar-container [&_.arco-layout-sider]: !flex !flex-col !bg-transparent !height-[100vh]">
65+
className="sidebar-container [&_.arco-layout-sider]: !flex !flex-col !bg-transparent !height-[100vh] !px-[12px]"
66+
style={{ appRegion: 'drag' } as CSSProperties}>
6567
{/* Top logo and title */}
6668
<div style={{ height: '16px', appRegion: 'drag' } as React.CSSProperties} />
67-
<div
68-
className="flex items-center px-4 py-2 h-[80px] flex-shrink-0"
69-
onClick={() => handleTabChange('home')}
70-
style={{ appRegion: 'drag' } as React.CSSProperties}>
69+
<div className="flex items-center px-4 py-2 h-[80px] flex-shrink-0">
7170
<div className="flex items-center gap-2 flex-1">
7271
<img
7372
src={logo}
@@ -86,7 +85,7 @@ const Sidebar = () => {
8685
</div>
8786

8887
{/* Tab navigation */}
89-
<div className="flex-shrink-0">
88+
<div className="flex-shrink-0" style={{ appRegion: 'no-drag' } as CSSProperties}>
9089
{tabItems.map((item) => (
9190
<div
9291
key={item.key}
@@ -100,8 +99,8 @@ const Sidebar = () => {
10099
))}
101100
</div>
102101

103-
<VaultTree className='flex-1' />
104-
<div className="mt-2 mr-3 mb-5">
102+
<VaultTree className="flex-1" />
103+
<div className="mt-2 mr-3 mb-5" style={{ appRegion: 'no-drag' } as CSSProperties}>
105104
<UpdateAvailableButton />
106105
</div>
107106
</Sider>

‎frontend/src/renderer/src/components/ai-assistant/chat-history-list-item.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const ChatHistoryListItem: FC<ChatHistoryListItemProps> = (props) => {
4444
<>
4545
<Trigger
4646
popup={() => (
47-
<div className="text-black border border-[#EAEDF1] rounded-[4px] p-[6px] shadow-[0_5px_15px_rgba(0,0,0,0.052)] bg-white w-[158px] p-[6px]">
47+
<div className="text-black border border-[#EAEDF1] p-[6px] shadow-[0_5px_15px_rgba(0,0,0,0.052)] bg-white w-[158px] p-[6px] rounded-[8px]">
4848
<div
4949
className="flex items-center mb-[4px] px-[12px] py-[6px] gap-[4px] hover:bg-[#f6f7fa] cursor-pointer"
5050
onClick={(e) => {
@@ -88,7 +88,7 @@ const ChatHistoryListItem: FC<ChatHistoryListItemProps> = (props) => {
8888
<Trigger
8989
updateOnScroll
9090
popup={() => (
91-
<div className="text-black border border-[#EAEDF1] rounded-[4px] p-[6px] shadow-[0_5px_15px_rgba(0,0,0,0.052)] bg-white w-[158px] p-[6px]">
91+
<div className="text-black border border-[#EAEDF1] rounded-[8px] p-[6px] shadow-[0_5px_15px_rgba(0,0,0,0.052)] bg-white w-[158px] p-[6px]">
9292
<div
9393
className="flex items-center mb-[4px] px-[12px] py-[6px] gap-[4px] hover:bg-[#f6f7fa] cursor-pointer"
9494
onClick={(e) => {

‎frontend/src/renderer/src/components/ai-assistant/chat-history-list.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const ChatHistoryList: FC<ChatHistoryListProps> = (props) => {
2121
)
2222
}
2323
return (
24-
<div className="w-[270px] h-[70%] px-[8px] py-[16px]">
24+
<div className="w-[270px] h-[70%] p-[8px]">
2525
<div className="text-[14px] leading-[22px] text-[#0c0d0e] font-medium mb-[8px] px-[12px] py-[2px]">
2626
Recent chats
2727
</div>

‎frontend/src/renderer/src/components/ai-assistant/header.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const AIAssistantHeader: FC<AIAssistantHeaderProps> = (props) => {
5757
<div
5858
className="flex items-center font-medium text-[#5252FF] cursor-pointer"
5959
onClick={startNewConversation}
60-
style={{ padding: '12px 16px' }}>
60+
style={{ padding: '12px 16px 12px 0' }}>
6161
<img src={addChatIcon} alt="add-chat" className="w-[16px] h-[16px] mr-[6px]" />
6262
New chat
6363
</div>
@@ -72,7 +72,7 @@ const AIAssistantHeader: FC<AIAssistantHeaderProps> = (props) => {
7272
refreshConversationList={refreshConversationList}
7373
/>
7474
}
75-
trigger={['click', 'hover']}
75+
trigger={['click']}
7676
onVisibleChange={handleVisibleChange}
7777
popupVisible={popupVisible}
7878
className="[&_.arco-popover-content]:!p-0"
@@ -87,14 +87,18 @@ const AIAssistantHeader: FC<AIAssistantHeaderProps> = (props) => {
8787
'flex items-center justify-center w-[32px] h-[32px] hover:bg-[#F6F7FA] rounded-[6px] cursor-pointer',
8888
{ 'bg-[#F6F7FA]': popupVisible }
8989
)}
90-
onClick={showChatHistoryPopup}
91-
onMouseEnter={showChatHistoryPopup}>
90+
onClick={showChatHistoryPopup}>
9291
<img src={chatHistoryIcon} className="w-[14px] h-[14px]" />
9392
</div>
9493
</Popover>
9594

9695
<Divider type="vertical" className="!mx-0" />
97-
<Button type="text" icon={<IconClose />} onClick={onClose} className="text-[#86909c]" />
96+
<Button
97+
type="text"
98+
icon={<IconClose className="!text-[#6e718c]" />}
99+
onClick={onClose}
100+
className="text-[#86909c]"
101+
/>
98102
</Space>
99103
</div>
100104
)

‎frontend/src/renderer/src/components/vault-tree/index.tsx‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import fileIcon from '/src/assets/icons/file.svg'
1313
import addIcon from '/src/assets/icons/add.svg'
1414
import deleteIcon from '/src/assets/icons/delete.svg'
1515
import renameIcon from '/src/assets/icons/rename.svg'
16-
import { useEffect, useMemo, useRef, useState } from 'react'
16+
import { CSSProperties, useEffect, useMemo, useRef, useState } from 'react'
1717
import { useEvents } from '@renderer/hooks/use-events'
1818
import { PushDataTypes } from '@renderer/constant/feed'
1919
import { get } from 'lodash'
@@ -175,7 +175,7 @@ const Node = ({ node, dragHandle }: NodeRendererProps<VaultTreeNode>) => {
175175
)
176176
}
177177

178-
const Sidebar = ({ className } : { className?: string }) => {
178+
const Sidebar = ({ className }: { className?: string }) => {
179179
const {
180180
vaults: treeData,
181181
updateVaultPosition,
@@ -251,29 +251,29 @@ const Sidebar = ({ className } : { className?: string }) => {
251251
const treeContainerRef = useRef<HTMLDivElement>(null)
252252
const [treeDimensions, setTreeDimensions] = useState({ width: 200, height: 600 })
253253
useEffect(() => {
254-
if (!treeContainerRef.current) return
254+
if (!treeContainerRef.current) return
255255

256-
const updateSize = () => {
257-
const el = treeContainerRef.current
258-
if (!el) return
259-
setTreeDimensions({
260-
height: el.clientHeight,
261-
width: el.clientWidth
262-
})
263-
}
264-
265-
// 初始化时先更新一次
266-
updateSize()
256+
const updateSize = () => {
257+
const el = treeContainerRef.current
258+
if (!el) return
259+
setTreeDimensions({
260+
height: el.clientHeight,
261+
width: el.clientWidth
262+
})
263+
}
267264

268-
const observer = new ResizeObserver(() => {
265+
// 初始化时先更新一次
269266
updateSize()
270-
})
271267

272-
observer.observe(treeContainerRef.current)
268+
const observer = new ResizeObserver(() => {
269+
updateSize()
270+
})
271+
272+
observer.observe(treeContainerRef.current)
273273

274-
// 清理 observer
275-
return () => observer.disconnect()
276-
}, [treeContainerRef])
274+
// 清理 observer
275+
return () => observer.disconnect()
276+
}, [treeContainerRef])
277277

278278
const onRename = ({ id, name }: { id: string; name: string }) => {
279279
onRenameVault(Number(id), name)
@@ -315,7 +315,9 @@ const Sidebar = ({ className } : { className?: string }) => {
315315
)
316316

317317
return (
318-
<div className={clsx('flex flex-col min-h-[0]', className)} style={{ marginTop: 12 }}>
318+
<div
319+
className={clsx('flex flex-col min-h-[0]', className)}
320+
style={{ marginTop: 12, appRegion: 'no-drag' } as CSSProperties}>
319321
<div className="flex flex-col flex-1 min-h-[0]">
320322
{/* Vault notes section */}
321323
<div className="px-[12px] shrink-0">
@@ -334,23 +336,25 @@ const Sidebar = ({ className } : { className?: string }) => {
334336
</div>
335337

336338
{/* Modern tree structure */}
337-
<div className="text-black flex-1 min-h-[0] [&_.arco-typography]: !font-[13px] overflow-auto" ref={treeContainerRef}>
339+
<div
340+
className="text-black flex-1 min-h-[0] [&_.arco-typography]: !font-[13px] overflow-auto"
341+
ref={treeContainerRef}>
338342
<Tree
339-
idAccessor={(data) => data.id.toString()}
340-
data={treeData?.children || []}
341-
onRename={onRename}
342-
onMove={onMove}
343-
width={treeDimensions.width}
344-
height={treeDimensions.height}
345-
rowHeight={32}
346-
indent={0}
347-
onActivate={(node) => {
348-
if (node.data.is_folder !== 1) {
349-
navigateToVault(node.data.id)
350-
}
351-
}}>
352-
{Node}
353-
</Tree>
343+
idAccessor={(data) => data.id.toString()}
344+
data={treeData?.children || []}
345+
onRename={onRename}
346+
onMove={onMove}
347+
width={treeDimensions.width}
348+
height={treeDimensions.height}
349+
rowHeight={32}
350+
indent={0}
351+
onActivate={(node) => {
352+
if (node.data.is_folder !== 1) {
353+
navigateToVault(node.data.id)
354+
}
355+
}}>
356+
{Node}
357+
</Tree>
354358
</div>
355359
</div>
356360
</div>

‎frontend/src/renderer/src/pages/home/components/chat-card/chat-card.tsx‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Typography } from '@arco-design/web-react'
77
import { useAppDispatch } from '@renderer/store'
88
import { setActiveConversationId, toggleCreationAiAssistant, toggleHomeAiAssistant } from '@renderer/store/chat-history'
99
import { useNavigation } from '@renderer/hooks/use-navigation'
10+
import { formatRelativeTime } from '@renderer/utils/time'
1011
const ChatCard = () => {
1112
const { data: conversationList, run } = useRequest(
1213
async () => {
@@ -44,14 +45,27 @@ const ChatCard = () => {
4445
return (
4546
<CardLayout title="Recent chat" emptyText="No chats in the latest 7 days. " isEmpty={isEmpty(conversationList)}>
4647
{(conversationList || [])?.map((conversation) => (
47-
<div
48-
className="cursor-pointer flex items-center gap-[6px]"
49-
key={conversation.id}
50-
onClick={() => handleNavigation(conversation)}>
51-
<img src={chatHistoryIcon} className="block" />
52-
<Typography.Text className="!my-0 !flex-1 !text-[13px] !leading-[22px]" ellipsis={{ rows: 1 }}>
53-
{conversation.title || 'Untitled Conversation'}
54-
</Typography.Text>
48+
<div className="flex items-center cursor-pointer justify-between group w-full hover:bg-[#F7F8FD] rounded-[6px] py-[5px] px-[4px]">
49+
<div
50+
className=" flex items-center gap-[6px] "
51+
key={conversation.id}
52+
onClick={() => handleNavigation(conversation)}>
53+
<img src={chatHistoryIcon} className="block" />
54+
<Typography.Text className="!my-0 !flex-1 !text-[13px] !leading-[22px] !font-normal" ellipsis={{ rows: 1 }}>
55+
{conversation.title || 'Untitled Conversation'}
56+
</Typography.Text>
57+
{conversation.updated_at && (
58+
<span className="flex text-[#AEAFC2] items-center text-[11px] font-normal leading-[22px] opacity-0 group-hover:opacity-100">
59+
{formatRelativeTime(conversation.updated_at)}
60+
</span>
61+
)}
62+
</div>
63+
<div className="flex items-center">
64+
{/* View button - hidden by default, shown on hover */}
65+
<button className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-[#7075FF] font-pingfang-sc text-[12px] font-medium leading-[20px] tracking-[0.036px] cursor-pointer">
66+
View
67+
</button>
68+
</div>
5569
</div>
5670
))}
5771
</CardLayout>

‎frontend/src/renderer/src/pages/screen-monitor/components/recording-timeline.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const RecordingTimeline: React.FC<RecordingTimelineProps> = ({
3737
<div className="mt-5">
3838
<Timeline labelPosition="relative">
3939
{isToday && (
40-
<TimelineItem label="Now">
40+
<TimelineItem label="Now" className="!pb-[24px]">
4141
{isMonitoring ? (
4242
canRecord ? (
4343
<>
@@ -49,7 +49,6 @@ const RecordingTimeline: React.FC<RecordingTimelineProps> = ({
4949
Every {SCREEN_INTERVAL_TIME} minutes, MineContext generates an Activity based on screen analysis.
5050
</div>
5151
</div>
52-
{console.log('[RecordingTimeline] About to render RecordingStatsCard')}
5352
<RecordingStatsCard stats={recordingStats} />
5453
</>
5554
) : (

‎frontend/src/renderer/src/pages/screen-monitor/components/screen-monitor-header.tsx‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import { Button, Space, Typography, Popover } from '@arco-design/web-react'
3-
import { IconPlayArrow, IconSettings, IconRecordStop, IconVideoCamera } from '@arco-design/web-react/icon'
3+
import { IconPlayArrow, IconSettings, IconRecordStop } from '@arco-design/web-react/icon'
44

55
const { Title, Text } = Typography
66

@@ -24,8 +24,7 @@ const ScreenMonitorHeader: React.FC<ScreenMonitorHeaderProps> = ({
2424
appAllSources,
2525
onOpenSettings,
2626
onStartMonitoring,
27-
onStopMonitoring,
28-
onRequestPermission
27+
onStopMonitoring
2928
}) => {
3029
return (
3130
<div className="flex justify-between items-start mb-3 flex-col md:flex-row">
@@ -82,17 +81,7 @@ const ScreenMonitorHeader: React.FC<ScreenMonitorHeaderProps> = ({
8281
</Button>
8382
)}
8483
</Space>
85-
) : (
86-
<Button
87-
type="primary"
88-
status="danger"
89-
icon={<IconVideoCamera />}
90-
size="large"
91-
onClick={onRequestPermission}
92-
className="[&_.arco-btn-primary]:!bg-red-500 [&_.arco-btn-primary:hover]:!bg-red-600">
93-
Request permission
94-
</Button>
95-
)}
84+
) : null}
9685
</div>
9786
</div>
9887
)

‎frontend/src/renderer/src/pages/screen-monitor/screen-monitor.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const ScreenMonitor: React.FC = () => {
5757
} = useSetting()
5858
const {
5959
currentSession,
60-
hasPermission,
60+
hasPermission = false,
6161
grantPermission,
6262
selectedImage,
6363
setSelectedImage,

0 commit comments

Comments
 (0)