Skip to content

Commit c3bdfe4

Browse files
LittlefeanLittlefean
committed
feat: 增加小窗口的适配
1 parent 78991ce commit c3bdfe4

File tree

5 files changed

+55
-42
lines changed

5 files changed

+55
-42
lines changed

‎app/src/App.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -351,21 +351,27 @@ export default function App() {
351351

352352
return (
353353
<div
354-
className="bg-stage-background relative flex h-full w-full flex-col gap-2 p-2"
354+
className="bg-stage-background relative flex h-full w-full flex-col overflow-clip sm:gap-2 sm:p-2"
355355
onContextMenu={(e) => e.preventDefault()}
356356
>
357357
{/* 菜单 | 标签页 | ...移动窗口区域... | 窗口控制按钮 */}
358358
<div
359359
className={cn(
360-
"z-10 flex h-9 gap-2 transition-all hover:opacity-100",
360+
"z-10 flex h-4 transition-all hover:opacity-100 sm:h-9 sm:gap-2",
361361
isClassroomMode && "opacity-0",
362362
ignoreMouseEvents && "pointer-events-none",
363363
)}
364364
>
365+
<div
366+
className="hover:bg-primary/25 h-full min-w-6 cursor-grab transition-colors active:cursor-grabbing sm:hidden"
367+
data-tauri-drag-region
368+
/>
365369
{isMac && <WindowButtons />}
366-
{/* <div className=" flex h-8 shrink-0 items-center overflow-hidden rounded-xl border"></div> */}
367370
<GlobalMenu />
368-
<div className="h-full flex-1 cursor-grab active:cursor-grabbing" data-tauri-drag-region></div>
371+
<div
372+
className="hover:bg-primary/25 h-full flex-1 cursor-grab transition-colors hover:*:opacity-100 active:cursor-grabbing sm:rounded-sm sm:hover:border"
373+
data-tauri-drag-region
374+
/>
369375
{!isMac && <WindowButtons />}
370376
</div>
371377

@@ -437,24 +443,24 @@ function WindowButtons() {
437443
};
438444

439445
return (
440-
<div className="bg-background shadow-xs flex h-full items-center rounded-md border">
446+
<div className="bg-background shadow-xs flex h-full items-center sm:rounded-md sm:border">
441447
{isClickThroughEnabled && <span className="text-destructive!">Alt + 2关闭窗口穿透点击</span>}
442448
{isMac ? (
443-
<span className="flex px-2">
449+
<span className="flex *:flex *:size-3 sm:px-2 sm:*:m-1">
444450
<div
445-
className="m-1 flex size-3 cursor-pointer items-center justify-center rounded-full bg-red-400 text-transparent hover:scale-110 hover:text-red-800"
451+
className="hidden cursor-pointer items-center justify-center rounded-full bg-red-400 text-transparent hover:scale-110 hover:text-red-800"
446452
onClick={() => getCurrentWindow().close()}
447453
>
448454
<X strokeWidth={3} size={10} />
449455
</div>
450456
<div
451-
className="m-1 flex size-3 cursor-pointer items-center justify-center rounded-full bg-yellow-400 text-transparent hover:scale-110 hover:text-yellow-800"
457+
className="hidden cursor-pointer items-center justify-center rounded-full bg-yellow-400 text-transparent hover:scale-110 hover:text-yellow-800 sm:block"
452458
onClick={() => getCurrentWindow().minimize()}
453459
>
454460
<Minus strokeWidth={3} size={10} />
455461
</div>
456462
<div
457-
className="m-1 flex size-3 cursor-pointer items-center justify-center rounded-full bg-green-400 text-transparent hover:scale-110 hover:text-green-800"
463+
className="hidden cursor-pointer items-center justify-center rounded-full bg-green-400 text-transparent hover:scale-110 hover:text-green-800 sm:block"
458464
onClick={() => {
459465
getCurrentWindow()
460466
.isFullscreen()
@@ -464,7 +470,7 @@ function WindowButtons() {
464470
<ChevronsLeftRight strokeWidth={3} size={10} className="rotate-45" />
465471
</div>
466472
<div
467-
className="m-1 flex size-3 cursor-pointer items-center justify-center rounded-full bg-blue-400 text-blue-800 hover:scale-110"
473+
className="cursor-pointer items-center justify-center rounded-full bg-blue-400 text-blue-800 hover:scale-110"
468474
onClick={async (e) => {
469475
e.stopPropagation();
470476
checkoutWindowsAlwaysTop();

‎app/src/ProjectTabs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const ProjectTabs = memo(function ProjectTabs({
7070
<div
7171
ref={tabsContainerRef}
7272
className={cn(
73-
"scrollbar-hide z-10 flex h-6 gap-1 overflow-x-auto whitespace-nowrap hover:opacity-100",
73+
"scrollbar-hide z-10 flex h-4 overflow-x-auto whitespace-nowrap hover:opacity-100 sm:h-6 sm:gap-1",
7474
isClassroomMode && "opacity-0",
7575
ignoreMouseEvents && "pointer-events-none",
7676
)}
@@ -80,7 +80,7 @@ export const ProjectTabs = memo(function ProjectTabs({
8080
<Button
8181
key={project.uri.toString()}
8282
className={cn(
83-
"hover:bg-primary/20 outline-inset h-full cursor-pointer px-2 hover:opacity-100",
83+
"hover:bg-primary/20 outline-inset h-full cursor-pointer rounded-none px-2 hover:opacity-100 sm:rounded-sm",
8484
activeProject?.uri.toString() === project.uri.toString() ? "bg-primary/70" : "bg-accent opacity-70",
8585
)}
8686
onMouseDown={(e) => {

‎app/src/components/ui/menubar.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPri
99
return (
1010
<MenubarPrimitive.Root
1111
data-slot="menubar"
12-
className={cn("bg-background shadow-xs flex h-9 items-center gap-1 rounded-md border p-1", className)}
12+
className={cn(
13+
"bg-background shadow-xs flex h-full items-center sm:gap-1 sm:rounded-md sm:border sm:p-1",
14+
className,
15+
)}
1316
{...props}
1417
/>
1518
);
@@ -36,7 +39,7 @@ function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof Men
3639
<MenubarPrimitive.Trigger
3740
data-slot="menubar-trigger"
3841
className={cn(
39-
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden flex select-none items-center rounded-sm px-2 py-1 text-sm font-medium data-[disabled]:opacity-50 [&_svg]:mr-1 [&_svg]:size-4",
42+
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden flex select-none items-center rounded-sm py-1 text-sm font-medium data-[disabled]:opacity-50 sm:px-2 [&_svg]:size-4 sm:[&_svg]:mr-1",
4043
className,
4144
)}
4245
onMouseEnter={() => {

‎app/src/components/welcome-page.tsx‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,20 @@ export default function WelcomePage() {
4343

4444
return (
4545
<div className="flex h-full w-full items-center justify-center bg-[var(--stage-background)]">
46-
<div className="flex flex-col gap-8">
47-
<div className="flex flex-col gap-2">
46+
<div className="m-2 flex flex-col p-4 sm:gap-8">
47+
{/* 顶部标题区域 */}
48+
<div className="flex flex-col sm:gap-2">
4849
<div className="flex items-center gap-2">
49-
<span className="text-3xl">{t("title")}</span>
50-
<span className="rounded-lg px-2 py-1 text-sm opacity-50 ring">{appVersion}</span>
50+
<span className="sm:text-3xl">{t("title")}</span>
51+
<span className="hidden opacity-50 sm:inline sm:rounded-lg sm:px-2 sm:py-1 md:text-sm">{appVersion}</span>
5152
</div>
52-
<div className="text-lg opacity-50">{t("slogan")}</div>
53+
<div className="hidden text-xs opacity-50 sm:block sm:text-lg">{t("slogan")}</div>
5354
</div>
54-
<div className="flex gap-16">
55-
<div className="flex flex-col gap-8">
56-
<div className="grid grid-cols-2 grid-rows-2 gap-2 gap-x-4 *:flex *:w-max *:cursor-pointer *:items-center *:gap-2 *:hover:opacity-75 *:active:scale-90">
55+
{/* 底部区域 */}
56+
<div className="flex sm:gap-16">
57+
<div className="flex flex-col sm:gap-8">
58+
{/* 常用操作 宫格区 */}
59+
<div className="grid grid-cols-2 grid-rows-2 *:flex *:w-max *:cursor-pointer *:items-center *:gap-2 *:hover:opacity-75 *:active:scale-90 sm:gap-2 sm:gap-x-4">
5760
<div
5861
onClick={() => {
5962
toast.promise(
@@ -71,27 +74,27 @@ export default function WelcomePage() {
7174
}}
7275
>
7376
<PersonStanding />
74-
<span>{t("newUserGuide")}</span>
77+
<span className="hidden sm:inline">{t("newUserGuide")}</span>
7578
</div>
7679
<div onClick={onNewDraft}>
7780
<FilePlus />
78-
<span>{t("newDraft")}</span>
79-
<span className="text-xs opacity-50">{isMac ? "⌘ + N" : "Ctrl + N"}</span>
81+
<span className="hidden sm:inline">{t("newDraft")}</span>
82+
<span className="hidden text-xs opacity-50 sm:inline">{isMac ? "⌘ + N" : "Ctrl + N"}</span>
8083
</div>
8184
<div onClick={() => RecentFilesWindow.open()}>
8285
<TableProperties />
83-
<span>{t("openRecentFiles")}</span>
84-
<span className="text-xs opacity-50">Shift + #</span>
86+
<span className="hidden sm:inline">{t("openRecentFiles")}</span>
87+
<span className="hidden text-xs opacity-50 sm:inline">Shift + #</span>
8588
</div>
8689
<div onClick={() => onOpenFile(undefined, "欢迎页面")}>
8790
<FolderOpen />
88-
<span>{t("openFile")}</span>
89-
<span className="text-xs opacity-50">{isMac ? "⌘ + O" : "Ctrl + O"}</span>
91+
<span className="hidden sm:inline">{t("openFile")}</span>
92+
<span className="hidden text-xs opacity-50 sm:inline">{isMac ? "⌘ + O" : "Ctrl + O"}</span>
9093
</div>
9194
</div>
9295
<div
9396
className={cn(
94-
"flex flex-col gap-2 *:flex *:flex-col *:transition-opacity *:*:last:opacity-50 *:hover:opacity-75",
97+
"hidden flex-col gap-2 *:flex *:flex-col *:transition-opacity *:*:last:opacity-50 *:hover:opacity-75 sm:flex",
9598
)}
9699
>
97100
{recentFiles.slice(0, 6).map((file, index) => (
@@ -112,18 +115,19 @@ export default function WelcomePage() {
112115
))}
113116
</div>
114117
</div>
115-
<div className="flex flex-col gap-2 *:flex *:w-max *:cursor-pointer *:gap-2 *:hover:opacity-75 *:active:scale-90">
118+
{/* 右侧区域 */}
119+
<div className="flex flex-col *:flex *:w-max *:cursor-pointer *:gap-2 *:hover:opacity-75 *:active:scale-90 sm:gap-2">
116120
<div onClick={() => SettingsWindow.open("settings")}>
117121
<SettingsIcon />
118-
<span>{t("settings")}</span>
122+
<span className="hidden sm:inline">{t("settings")}</span>
119123
</div>
120124
<div onClick={() => SettingsWindow.open("about")}>
121125
<Info />
122-
<span>{t("about")}</span>
126+
<span className="hidden sm:inline">{t("about")}</span>
123127
</div>
124128
<div onClick={() => shellOpen("https://project-graph.top")}>
125129
<Earth />
126-
<span>{t("website")}</span>
130+
<span className="hidden sm:inline">{t("website")}</span>
127131
</div>
128132
</div>
129133
</div>

‎app/src/core/service/GlobalMenu.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ export function GlobalMenu() {
168168
<Menu>
169169
<Trigger>
170170
<File />
171-
{t("file.title")}
171+
<span className="hidden sm:inline">{t("file.title")}</span>
172172
</Trigger>
173173
<Content>
174174
<Item onClick={() => onNewDraft()}>
@@ -511,7 +511,7 @@ export function GlobalMenu() {
511511
<Menu>
512512
<Trigger disabled={!activeProject}>
513513
<View />
514-
{t("view.title")}
514+
<span className="hidden sm:inline">{t("view.title")}</span>
515515
</Trigger>
516516
<Content>
517517
<Item
@@ -553,7 +553,7 @@ export function GlobalMenu() {
553553
<Menu>
554554
<Trigger disabled={!activeProject}>
555555
<Axe />
556-
{t("actions.title")}
556+
<span className="hidden sm:inline">{t("actions.title")}</span>
557557
</Trigger>
558558
<Content>
559559
<Item
@@ -675,7 +675,7 @@ export function GlobalMenu() {
675675
<Menu>
676676
<Trigger>
677677
<SettingsIcon />
678-
{t("settings.title")}
678+
<span className="hidden sm:inline">{t("settings.title")}</span>
679679
</Trigger>
680680
<Content>
681681
<Item onClick={() => SettingsWindow.open("settings")}>
@@ -800,7 +800,7 @@ export function GlobalMenu() {
800800
<Menu>
801801
<Trigger disabled={!activeProject}>
802802
<Bot />
803-
{t("ai.title")}
803+
<span className="hidden sm:inline">{t("ai.title")}</span>
804804
</Trigger>
805805
<Content>
806806
<Item onClick={() => AIWindow.open()}>
@@ -814,7 +814,7 @@ export function GlobalMenu() {
814814
<Menu>
815815
<Trigger>
816816
<AppWindow />
817-
{t("window.title")}
817+
<span className="hidden sm:inline">{t("window.title")}</span>
818818
</Trigger>
819819
<Content>
820820
<Item
@@ -991,7 +991,7 @@ export function GlobalMenu() {
991991
<Menu>
992992
<Trigger>
993993
<CircleAlert />
994-
{t("about.title")}
994+
<span className="hidden sm:inline">{t("about.title")}</span>
995995
</Trigger>
996996
<Content>
997997
<Item onClick={() => SettingsWindow.open("about")}>
@@ -1114,7 +1114,7 @@ export function GlobalMenu() {
11141114
<Trigger className={isDev ? "text-green-500" : "*:text-destructive! text-destructive!"}>
11151115
{/* 增加辨识度，让开发者更容易分辨dev和nightly版本 */}
11161116
{isDev ? <BugPlay /> : <MessageCircleWarning />}
1117-
{isDev ? "本地开发模式" : t("unstable.title")}
1117+
<span className="hidden sm:inline">{isDev ? "本地开发模式" : t("unstable.title")}</span>
11181118
</Trigger>
11191119
<Content>
11201120
<Item variant="destructive">v{version}</Item>

0 commit comments

Comments
 (0)