Skip to content

Commit 9701584

Browse files
HaloWangHaloWang
committed
Refactor content scripts and update dependencies
- Removed the sampleFunction and replaced its usage with contentStart in content scripts. - Updated the Dashboard component to utilize SideButton for status display and improved hover interactions. - Enhanced message handling in content-ui to accommodate new message types. - Updated pnpm-lock.yaml to reflect dependency upgrades, including @types/node and esbuild versions.
1 parent 4f1a6bf commit 9701584

File tree

7 files changed

+419
-343
lines changed

7 files changed

+419
-343
lines changed

‎pages/content-ui/src/matches/all/Dashboard.tsx‎

Lines changed: 82 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,10 @@
1+
import { SideButton } from './SideButton';
12
import { ignoreHref } from '@extension/shared';
23
import { useState, useEffect } from 'react';
34
import { FaPlay, FaStop, FaEye, FaEyeSlash, FaMousePointer, FaExpand, FaBan, FaDesktop, FaBug } from 'react-icons/fa';
45
import type { SetState } from '@extension/shared';
56
import type React from 'react';
67

7-
// --- Status Item Component ---
8-
const StatusItem: React.FC<{ icon: React.ReactNode; title: string; value: string; onClick?: () => void }> = ({
9-
icon,
10-
title,
11-
value,
12-
onClick,
13-
}) => {
14-
const [isDarkMode, setIsDarkMode] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches);
15-
16-
useEffect(() => {
17-
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
18-
const handleChange = (e: MediaQueryListEvent) => {
19-
setIsDarkMode(e.matches);
20-
};
21-
mediaQuery.addEventListener('change', handleChange);
22-
return () => {
23-
mediaQuery.removeEventListener('change', handleChange);
24-
};
25-
}, []);
26-
27-
const style: React.CSSProperties = {
28-
display: 'flex',
29-
alignItems: 'center',
30-
backdropFilter: 'blur(8px)',
31-
borderRadius: '8px',
32-
padding: '2px 4px',
33-
...(isDarkMode
34-
? {
35-
backgroundColor: 'rgba(0, 0, 0, 0.5)',
36-
border: '1px solid rgba(255, 255, 255, 0.5)',
37-
color: '#fff',
38-
}
39-
: {
40-
backgroundColor: 'rgba(255, 255, 255, 0.5)',
41-
border: '1px solid rgba(0, 0, 0, 0.5)',
42-
color: '#111',
43-
}),
44-
};
45-
46-
if (onClick) {
47-
style.pointerEvents = 'auto';
48-
style.cursor = 'pointer';
49-
}
50-
return (
51-
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
52-
<div onClick={onClick} style={style}>
53-
<div
54-
style={{
55-
width: '24px',
56-
height: '24px',
57-
marginRight: '2px',
58-
flexShrink: 0,
59-
display: 'flex',
60-
alignItems: 'center',
61-
justifyContent: 'center',
62-
}}>
63-
{icon}
64-
</div>
65-
<div style={{ display: 'flex', flexDirection: 'column' }}>
66-
<div style={{ fontSize: '0.9rem', fontWeight: 600, lineHeight: '1.3' }}>{title}</div>
67-
<div style={{ fontSize: '0.8rem', opacity: 0.7 }}>{value}</div>
68-
</div>
69-
</div>
70-
);
71-
};
72-
738
export const Dashboard: React.FC = () => {
749
// 是否运行中, websocket 是否处于链接状态?
7510
const [running, setRunning] = useState(false);
@@ -79,6 +14,10 @@ export const Dashboard: React.FC = () => {
7914
const [interactionMode, setInteractionMode] = useState<'hover' | 'full'>('hover');
8015
// 演示模式
8116
const [demoMode, setDemoMode] = useState(false);
17+
// 是否显示其他状态项
18+
const [hoverd, setHoverd] = useState(false);
19+
// 是否正在hover其他状态项
20+
const [hoveringOthers, setHoveringOthers] = useState(false);
8221

8322
const [inspecting, setInspecting] = useState(false);
8423

@@ -150,42 +89,94 @@ export const Dashboard: React.FC = () => {
15089
const dashboardStyle: React.CSSProperties = {
15190
position: 'fixed',
15291
bottom: 0,
153-
left: 0,
92+
right: 0,
15493
top: 0,
155-
width: 180,
15694
zIndex: 2147483647,
15795
pointerEvents: 'none',
15896
display: 'flex',
15997
flexDirection: 'column',
160-
alignItems: 'flex-start',
98+
alignItems: 'flex-end',
16199
justifyContent: 'center',
162-
padding: '20px 20px 20px 4px',
100+
paddingTop: 0,
101+
paddingBottom: 0,
102+
paddingLeft: 0,
103+
paddingRight: 0,
163104
gap: '4px',
105+
userSelect: 'none',
106+
backgroundColor: 'rgba(0, 0, 0, 0.1)',
164107
};
165108

109+
// 计算是否应该显示其他状态项
110+
const shouldShowOthers = hoverd || hoveringOthers;
111+
166112
return (
167113
<div style={dashboardStyle}>
168-
<StatusItem
169-
icon={running ? <FaPlay /> : <FaStop />}
170-
title="RWKV 运行状态"
171-
value={running ? '运行中' : '未运行'}
172-
/>
173-
<StatusItem icon={ignored ? <FaEyeSlash /> : <FaEye />} title="页面被忽略了" value={ignored ? '是' : '否'} />
174-
<StatusItem
175-
icon={getInteractionModeIcon()}
176-
title="交互模式"
177-
// value={interactionMode ?? 'None'}
178-
value={'未实现'}
179-
onClick={toggleInteractionMode}
180-
/>
181-
<StatusItem
182-
icon={<FaDesktop />}
183-
title="演示模式"
184-
// value={demoMode ? '是' : '否'}
185-
value={'未实现'}
186-
onClick={toggleDemoMode}
187-
/>
188-
<StatusItem icon={<FaBug />} title="诊断模式" value={inspecting ? '是' : '否'} onClick={toggleDiagnoseMode} />
114+
<div onMouseEnter={() => setHoverd(true)} onMouseLeave={() => setHoverd(false)}>
115+
<SideButton
116+
icon={running ? <FaPlay /> : <FaStop />}
117+
title="??"
118+
value={running ? '运行中' : '未运行'}
119+
style={{
120+
transform: shouldShowOthers || hoverd ? 'translateX(0)' : 'translateX(67%)',
121+
opacity: shouldShowOthers || hoverd ? 1 : 0.5,
122+
transition: 'transform 0.1s ease-out, opacity 0.1s ease-out',
123+
}}
124+
/>
125+
</div>
126+
127+
<div
128+
style={{
129+
display: 'flex',
130+
flexDirection: 'column',
131+
gap: '4px',
132+
pointerEvents: shouldShowOthers ? 'auto' : 'none',
133+
}}
134+
onMouseEnter={() => setHoveringOthers(true)}
135+
onMouseLeave={() => setHoveringOthers(false)}>
136+
<SideButton
137+
icon={ignored ? <FaEyeSlash /> : <FaEye />}
138+
title="页面被忽略了"
139+
value={ignored ? '是' : '否'}
140+
style={{
141+
transform: shouldShowOthers ? 'translateX(0)' : 'translateX(100%)',
142+
opacity: shouldShowOthers ? 1 : 0,
143+
transition: 'transform 0.1s ease-out, opacity 0.1s ease-out',
144+
}}
145+
/>
146+
<SideButton
147+
icon={getInteractionModeIcon()}
148+
title="交互模式"
149+
value={'未实现'}
150+
onClick={toggleInteractionMode}
151+
style={{
152+
transform: shouldShowOthers ? 'translateX(0)' : 'translateX(100%)',
153+
opacity: shouldShowOthers ? 1 : 0,
154+
transition: 'transform 0.1s ease-out, opacity 0.1s ease-out',
155+
}}
156+
/>
157+
<SideButton
158+
icon={<FaDesktop />}
159+
title="演示模式"
160+
value={'未实现'}
161+
onClick={toggleDemoMode}
162+
style={{
163+
transform: shouldShowOthers ? 'translateX(0)' : 'translateX(100%)',
164+
opacity: shouldShowOthers ? 1 : 0,
165+
transition: 'transform 0.1s ease-out, opacity 0.1s ease-out',
166+
}}
167+
/>
168+
<SideButton
169+
icon={<FaBug />}
170+
title="诊断模式"
171+
value={inspecting ? '是' : '否'}
172+
onClick={toggleDiagnoseMode}
173+
style={{
174+
transform: shouldShowOthers ? 'translateX(0)' : 'translateX(100%)',
175+
opacity: shouldShowOthers ? 1 : 0,
176+
transition: 'transform 0.1s ease-out, opacity 0.1s ease-out',
177+
}}
178+
/>
179+
</div>
189180
</div>
190181
);
191182
};

‎pages/content-ui/src/matches/all/SideButton.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { useState, useEffect } from 'react';
2+
import type React from 'react';
3+
4+
// --- Status Item Component ---
5+
export const SideButton: React.FC<{
6+
icon: React.ReactNode;
7+
title: string;
8+
value: string;
9+
onClick?: () => void;
10+
style?: React.CSSProperties;
11+
}> = ({ icon, title, value, onClick, style: additionalStyle }) => {
12+
const [isDarkMode, setIsDarkMode] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches);
13+
14+
useEffect(() => {
15+
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
16+
const handleChange = (e: MediaQueryListEvent) => {
17+
setIsDarkMode(e.matches);
18+
};
19+
mediaQuery.addEventListener('change', handleChange);
20+
return () => {
21+
mediaQuery.removeEventListener('change', handleChange);
22+
};
23+
}, []);
24+
25+
const style: React.CSSProperties = {
26+
pointerEvents: 'auto',
27+
display: 'flex',
28+
alignItems: 'center',
29+
backdropFilter: 'blur(8px)',
30+
borderRadius: '8px',
31+
padding: '2px 4px',
32+
userSelect: 'none',
33+
transition: 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out',
34+
...(isDarkMode
35+
? {
36+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
37+
border: '1px solid rgba(255, 255, 255, 0.5)',
38+
color: '#fff',
39+
}
40+
: {
41+
backgroundColor: 'rgba(255, 255, 255, 0.5)',
42+
border: '1px solid rgba(0, 0, 0, 0.5)',
43+
color: '#111',
44+
}),
45+
...additionalStyle,
46+
};
47+
48+
if (onClick) {
49+
style.pointerEvents = 'auto';
50+
style.cursor = 'pointer';
51+
}
52+
return (
53+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
54+
<div onClick={onClick} style={style}>
55+
<div
56+
style={{
57+
width: '24px',
58+
height: '24px',
59+
marginRight: '2px',
60+
flexShrink: 0,
61+
display: 'flex',
62+
alignItems: 'center',
63+
justifyContent: 'center',
64+
}}>
65+
{icon}
66+
</div>
67+
<div style={{ display: 'flex', flexDirection: 'column' }}>
68+
<div style={{ fontSize: '0.9rem', fontWeight: 600, lineHeight: '1.3' }}>{title}</div>
69+
<div style={{ fontSize: '0.8rem', opacity: 0.7 }}>{value}</div>
70+
</div>
71+
</div>
72+
);
73+
};

‎pages/content-ui/src/matches/all/index.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,18 @@ const onMessage = (
1919
document.dispatchEvent(new CustomEvent('state-changed', { detail: message }));
2020
break;
2121
}
22+
case 'QueryRequest': {
23+
break;
24+
}
25+
case 'QueryResponse': {
26+
break;
27+
}
28+
case 'SetState': {
29+
break;
30+
}
31+
case 'GetState': {
32+
break;
33+
}
2234
}
2335
};
2436

@@ -29,7 +41,7 @@ const startListen = () => {
2941
setTimeout(() => {
3042
console.log('sendMessage: content-ui', { func: 'GetState' });
3143
chrome.runtime.sendMessage({ func: 'GetState' });
32-
}, 1000);
44+
}, 500);
3345
};
3446

3547
const stopListen = () => {

pages/content/src/sample-function.ts renamed to pages/content/src/contentStart.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { injectCss } from './injectcss';
33
import { state } from './state';
44
import { ignoreHref } from '@extension/shared';
55

6-
export const sampleFunction = () => {
6+
export const contentStart = () => {
77
injectCss();
88

99
const handleStateChanged = (event: CustomEvent) => {

‎pages/content/src/matches/all/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { sampleFunction } from '@src/sample-function';
1+
import { contentStart } from '@src/contentStart';
22

33
console.log('[CEB] All content script loaded');
44

5-
void sampleFunction();
5+
void contentStart();

‎pages/content/src/matches/example/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { sampleFunction } from '@src/sample-function';
1+
import { contentStart } from '@src/contentStart';
22

33
console.log('[CEB] Example content script loaded');
44

5-
void sampleFunction();
5+
void contentStart();

0 commit comments

Comments
 (0)