Skip to content

Commit a97529c

Browse files
quanruquanru
committed
feat(studio): import incut playground chrome
1 parent 2c3639b commit a97529c

File tree

58 files changed

+2025
-243
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+2025
-243
lines changed

‎apps/studio/src/renderer/components/IncutPlaygroundImport/IncutPlaygroundShell.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type { ReactNode } from 'react';
2+
import './incut-playground-skin.css';
3+
4+
export interface IncutPlaygroundShellProps {
5+
children: ReactNode;
6+
className?: string;
7+
title?: string;
8+
}
9+
10+
export function IncutPlaygroundShell({
11+
children,
12+
className,
13+
title = 'Playground',
14+
}: IncutPlaygroundShellProps) {
15+
return (
16+
<div
17+
className={['incut-playground-shell', className]
18+
.filter(Boolean)
19+
.join(' ')}
20+
>
21+
<div className="pointer-events-none absolute left-0 top-0 z-10 flex h-[56px] w-full items-center border-b border-border-subtle bg-surface px-[22px]">
22+
<span className="text-[13px] leading-[22.1px] font-medium text-text-primary">
23+
{title}
24+
</span>
25+
</div>
26+
27+
<div className="min-h-0 flex-1 overflow-hidden pt-[56px]">{children}</div>
28+
</div>
29+
);
30+
}

‎apps/studio/src/renderer/components/IncutPlaygroundImport/area-main/components/ExecutionFlow.tsx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { incutPlaygroundImportAssets } from '../../assets';
2+
3+
interface IncutExecutionStepProps {
4+
content: string;
5+
iconUrl: string;
6+
isLast?: boolean;
7+
label: string;
8+
fontFamily?: string;
9+
labelFontFamily?: string;
10+
}
11+
12+
function IncutExecutionStep({
13+
content,
14+
fontFamily = 'Inter',
15+
iconUrl,
16+
isLast,
17+
label,
18+
labelFontFamily = 'Inter',
19+
}: IncutExecutionStepProps) {
20+
return (
21+
<div className="relative flex h-[66px] w-[288px] gap-2 rounded-lg">
22+
{!isLast ? (
23+
<div className="absolute left-4 top-6 h-[66px] w-px bg-black/8" />
24+
) : null}
25+
26+
<div className="flex w-8 flex-col items-center pt-1">
27+
<div className="flex w-2 justify-center" />
28+
</div>
29+
30+
<div className="flex flex-1 flex-col gap-2 pb-1 pt-1">
31+
<div className="flex h-7 w-fit items-center gap-1 rounded-[38px] bg-black/8 px-1 pr-2 py-0.5">
32+
<div className="flex h-6 w-6 items-center justify-center">
33+
<img alt="" className="h-6 w-6" src={iconUrl} />
34+
</div>
35+
<span
36+
className="flex h-[22px] items-center overflow-hidden whitespace-nowrap text-[14px] text-black/85"
37+
style={{ fontFamily: labelFontFamily }}
38+
>
39+
{label}
40+
</span>
41+
</div>
42+
<div
43+
className="h-[22px] overflow-hidden whitespace-nowrap text-[14px] leading-[22px] text-black/85"
44+
style={{ fontFamily }}
45+
>
46+
{content}
47+
</div>
48+
</div>
49+
</div>
50+
);
51+
}
52+
53+
export function IncutExecutionFlow() {
54+
const { execution } = incutPlaygroundImportAssets;
55+
56+
return (
57+
<div className="flex flex-col gap-2">
58+
<div className="mt-4 flex w-[304px] flex-col gap-2 rounded-2xl">
59+
<div className="flex h-[15px] w-[68px] items-center gap-2 px-1">
60+
<span className="h-[15px] overflow-hidden whitespace-nowrap font-['Inter'] text-[12px] leading-[15px] font-medium text-black/50">
61+
执行流程
62+
</span>
63+
<img
64+
alt="expand"
65+
className="h-3 w-3 rotate-90 object-contain"
66+
src={execution.chevron}
67+
/>
68+
</div>
69+
70+
<div className="flex w-[288px] flex-col rounded-lg">
71+
<IncutExecutionStep
72+
content="search relax"
73+
iconUrl={execution.planningPrimary}
74+
label="Planning"
75+
/>
76+
<IncutExecutionStep
77+
content="百度首页的搜索输入框"
78+
fontFamily="PingFang SC"
79+
iconUrl={execution.locateNode}
80+
label="Insight / Locate"
81+
labelFontFamily="PingFang SC"
82+
/>
83+
<IncutExecutionStep
84+
content="百度首页"
85+
iconUrl={execution.locateField}
86+
label="Insight / Locate"
87+
/>
88+
<IncutExecutionStep
89+
content="Input"
90+
iconUrl={execution.input}
91+
label="Insight / Locate"
92+
/>
93+
<IncutExecutionStep
94+
content="Tap"
95+
iconUrl={execution.tap}
96+
label="Insight / Locate"
97+
/>
98+
<IncutExecutionStep
99+
content="search relax"
100+
iconUrl={execution.planningSecondary}
101+
isLast
102+
label="Planning"
103+
/>
104+
</div>
105+
</div>
106+
</div>
107+
);
108+
}

‎apps/studio/src/renderer/components/IncutPlaygroundImport/area-main/components/Header.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { incutPlaygroundImportAssets } from '../../assets';
2+
3+
export function IncutImportedMainHeader() {
4+
return (
5+
<div className="flex h-[52px] w-full flex-shrink-0 items-center justify-between border-b border-[#f0f0f0] bg-white px-2 pr-4 font-['Inter']">
6+
<div className="flex items-center">
7+
<div className="ml-2 flex h-6 w-6 items-center justify-center rounded-sm bg-white">
8+
<img
9+
alt="device"
10+
className="h-[21.6px] rotate-180 object-contain"
11+
src={incutPlaygroundImportAssets.main.device}
12+
/>
13+
</div>
14+
<span className="ml-2 flex h-[23px] w-[134px] items-center overflow-hidden whitespace-nowrap text-[13px] font-medium text-[#0d0d0d]">
15+
三星 Galaxy S26 Ultra
16+
</span>
17+
<div className="ml-2 flex h-[28px] w-[60.1px] items-center gap-2 rounded-[16.1px] border border-[#adebd0] bg-[#e5fff4] px-[10px] py-2">
18+
<div className="h-2 w-2 flex-shrink-0 rounded-full border-2 border-[#adebd0] bg-[#12b981]" />
19+
<span className="flex h-[13px] items-center overflow-hidden whitespace-nowrap text-[12.1px] leading-[13px] font-medium text-[#079669]">
20+
Live
21+
</span>
22+
</div>
23+
</div>
24+
25+
<div className="flex items-center gap-2">
26+
<div className="ml-px flex h-8 cursor-pointer items-center gap-1 rounded-lg border border-[#ececec] px-3">
27+
<img
28+
alt="disconnect"
29+
className="h-3.5 w-3.5 object-contain"
30+
src={incutPlaygroundImportAssets.main.disconnect}
31+
/>
32+
<span className="ml-[3px] h-5 w-[71px] overflow-hidden whitespace-nowrap text-[13px] font-medium text-black/90">
33+
Disconnect
34+
</span>
35+
</div>
36+
37+
<div className="flex h-8 cursor-pointer items-center gap-1 rounded-lg border border-[#ececec] bg-[#f0f2f5] px-3">
38+
<div className="flex h-4 w-4 items-center">
39+
<img
40+
alt="chat"
41+
className="h-4 w-4 object-contain"
42+
src={incutPlaygroundImportAssets.main.chat}
43+
/>
44+
</div>
45+
<span className="h-5 w-[30px] overflow-hidden whitespace-nowrap text-[13px] font-medium text-black/90">
46+
Chat
47+
</span>
48+
</div>
49+
</div>
50+
</div>
51+
);
52+
}

‎apps/studio/src/renderer/components/IncutPlaygroundImport/area-main/components/Playground.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { incutPlaygroundImportAssets } from '../../assets';
2+
import { IncutExecutionFlow } from './ExecutionFlow';
3+
4+
export function IncutImportedPlaygroundPanel() {
5+
const { main } = incutPlaygroundImportAssets;
6+
7+
return (
8+
<div className="relative flex h-full w-[400px] flex-col rounded-br-[12px] rounded-tr-[12px] bg-white">
9+
<div className="absolute left-0 top-0 z-10 flex h-[56px] w-full items-center border-b border-[#ececec] bg-white px-[22px]">
10+
<span className="flex h-[23px] w-[71px] items-center overflow-hidden whitespace-nowrap font-['Inter'] text-[13px] font-medium text-[#0d0d0d]">
11+
Playground
12+
</span>
13+
</div>
14+
15+
<div className="flex flex-1 flex-col gap-8 overflow-y-auto px-4 pb-8 pt-[52px]">
16+
<div className="flex w-full justify-end">
17+
<div className="flex h-[38px] w-[174px] flex-shrink-0 items-center rounded-[12px] bg-[#f2f4f7] px-4 py-2">
18+
<span className="h-[22px] w-[142px] overflow-hidden whitespace-nowrap font-['Inter'] text-[14px] leading-[22px] text-black">
19+
点赞 midscene github
20+
</span>
21+
</div>
22+
</div>
23+
24+
<div className="-mt-[6px] flex w-[368px] flex-col items-start gap-4">
25+
<div className="w-full font-['PingFang_SC'] text-[14px] leading-[22px] text-black">
26+
我需要在Google搜索框中输入&quot;midscene&quot;，然后全选并删除内容。首先需要点击搜索框激活它。我应该先点击Google搜索框使其激活，这样才能输入文本。搜索框位于页面中央，点击后就可以开始输入内容。
27+
</div>
28+
29+
<IncutExecutionFlow />
30+
31+
<div className="mt-3 w-full font-['Inter'] text-[14px] leading-[22px] text-black">
32+
我将为您生成一个迷幻液体颗粒噪点弥散光模糊扭曲渐变潮流背景底纹。
33+
</div>
34+
</div>
35+
</div>
36+
37+
<div className="flex h-[132px] flex-col justify-center rounded-b-[24px] border-t border-[#ececec] bg-white p-3">
38+
<div className="flex h-[120px] flex-col justify-between rounded-[24px] border border-[#e8e8e8] p-3">
39+
<span className="mt-1 flex h-[17px] items-center overflow-hidden whitespace-nowrap font-['Inter'] text-[14px] leading-[16.9px] text-black/25">
40+
Type a message
41+
</span>
42+
43+
<div className="flex h-8 items-center justify-between">
44+
<div className="flex h-8 items-center gap-1">
45+
<div className="flex h-8 cursor-pointer items-center gap-1 rounded-[32px] px-2 py-1 transition-colors hover:bg-gray-50">
46+
<img alt="action" className="h-4 w-4" src={main.action} />
47+
<span className="flex h-4 w-[37px] items-center font-['Inter'] text-[12px] font-medium text-[#878787]">
48+
Action
49+
</span>
50+
<img
51+
alt="chevron"
52+
className="-ml-0.5 h-[9.3px] w-[5.3px] -rotate-90 object-contain opacity-25"
53+
src={main.actionChevron}
54+
/>
55+
</div>
56+
57+
<div className="flex h-8 cursor-pointer items-center justify-center rounded-[32px] px-2 py-1 transition-colors hover:bg-gray-50">
58+
<img
59+
alt="tool"
60+
className="h-4 w-4 -translate-y-px"
61+
src={main.tool}
62+
/>
63+
</div>
64+
65+
<div className="ml-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-[32px] transition-colors hover:bg-gray-50">
66+
<img
67+
alt="settings"
68+
className="h-[14px] w-[13.9px] object-contain"
69+
src={main.settings}
70+
/>
71+
</div>
72+
</div>
73+
74+
<div className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[#cce3ff] transition-colors hover:bg-[#b8d7ff]">
75+
<img
76+
alt="send"
77+
className="h-3 w-3 -rotate-180 object-contain"
78+
src={main.actionChevron}
79+
/>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
);
86+
}

‎apps/studio/src/renderer/components/IncutPlaygroundImport/area-main/index.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { incutPlaygroundImportAssets } from '../assets';
2+
import { IncutImportedMainHeader } from './components/Header';
3+
import { IncutImportedPlaygroundPanel } from './components/Playground';
4+
5+
export function IncutImportedMainArea() {
6+
return (
7+
<div className="relative flex h-[820px] w-[1040px] flex-col items-start overflow-hidden bg-[#f6f6f6]">
8+
<div className="ml-0 mt-1 flex h-[812px] w-[1036px] overflow-hidden rounded-xl border-r border-[#ececec] bg-white">
9+
<div className="relative flex h-full w-[636px] flex-col bg-white">
10+
<IncutImportedMainHeader />
11+
12+
<div className="flex flex-1 flex-col items-center px-[138px] pt-[59.7px]">
13+
<img
14+
alt="phone preview"
15+
className="h-[640.5px] w-[360.4px] object-contain"
16+
src={incutPlaygroundImportAssets.main.preview}
17+
/>
18+
</div>
19+
</div>
20+
21+
<IncutImportedPlaygroundPanel />
22+
</div>
23+
</div>
24+
);
25+
}

‎apps/studio/src/renderer/components/IncutPlaygroundImport/area-sidebar/Demo.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { IncutImportedSidebar } from './index';
2+
3+
export function IncutImportedSidebarDemo() {
4+
return (
5+
<div className="h-full w-full bg-[#f0f0f0]">
6+
<IncutImportedSidebar />
7+
</div>
8+
);
9+
}

‎apps/studio/src/renderer/components/IncutPlaygroundImport/area-sidebar/components/BottomActions.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { incutPlaygroundImportAssets } from '../../assets';
2+
3+
export function IncutSidebarBottomActions() {
4+
return (
5+
<div className="mt-auto mb-1 flex h-8 items-center px-2 font-['PingFang_SC',_'Inter']">
6+
<div className="mr-auto flex h-[30px] cursor-pointer items-center rounded-lg px-1 hover:bg-black/3">
7+
<img
8+
alt="settings"
9+
className="h-4 w-4 object-contain"
10+
src={incutPlaygroundImportAssets.sidebar.settings}
11+
/>
12+
<span className="ml-[6px] h-[22px] overflow-hidden whitespace-nowrap text-[13px] leading-[22px] text-[#474848]">
13+
设置
14+
</span>
15+
</div>
16+
17+
<div className="flex items-center gap-1">
18+
{['模型', '环境'].map((label) => (
19+
<div
20+
className="flex h-6 w-[38.1px] cursor-pointer items-center justify-center rounded-lg border border-black/8 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.06)]"
21+
key={label}
22+
>
23+
<span className="whitespace-nowrap text-[11px] leading-3 text-[#474848]">
24+
{label}
25+
</span>
26+
</div>
27+
))}
28+
</div>
29+
</div>
30+
);
31+
}

0 commit comments

Comments
 (0)