Skip to content

Commit fdb1906

Browse files
cyfung1031cyfung1031
authored
πŸ› 加 Tooltip ε¦εˆ™ηœ‹δΈεˆ°θœε• (#1429)
1 parent 9bf361a commit fdb1906

1 file changed

Lines changed: 108 additions & 81 deletions

File tree

β€Žsrc/pages/components/layout/Sider.tsxβ€Ž

Lines changed: 108 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ScriptList from "@App/pages/options/routes/ScriptList";
44
import Setting from "@App/pages/options/routes/Setting";
55
import SubscribeList from "@App/pages/options/routes/SubscribeList";
66
import Tools from "@App/pages/options/routes/Tools";
7-
import { Layout, Menu } from "@arco-design/web-react";
7+
import { Layout, Menu, Tooltip } from "@arco-design/web-react";
88
import {
99
IconCode,
1010
IconFile,
@@ -53,29 +53,45 @@ const Sider: React.FC = () => {
5353
<div className="tw-flex tw-flex-col tw-justify-between tw-h-full">
5454
<Menu style={{ width: "100%" }} selectedKeys={[menuSelect]} selectable onClickMenuItem={handleMenuClick}>
5555
<CustomLink to="/">
56-
<MenuItem key="/" className="menu-script">
57-
<IconCode /> {t("installed_scripts")}
58-
</MenuItem>
56+
<Tooltip
57+
position="tl"
58+
mini
59+
content={`${t("installed_scripts")}`}
60+
popupHoverStay={false}
61+
disabled={collapsed}
62+
>
63+
<MenuItem key="/" className="menu-script">
64+
<IconCode /> {t("installed_scripts")}
65+
</MenuItem>
66+
</Tooltip>
5967
</CustomLink>
6068
<CustomLink to="/subscribe">
61-
<MenuItem key="/subscribe">
62-
<IconSubscribe /> {t("subscribe")}
63-
</MenuItem>
69+
<Tooltip position="tl" mini content={`${t("subscribe")}`} popupHoverStay={false} disabled={collapsed}>
70+
<MenuItem key="/subscribe">
71+
<IconSubscribe /> {t("subscribe")}
72+
</MenuItem>
73+
</Tooltip>
6474
</CustomLink>
6575
<CustomLink to="/logger">
66-
<MenuItem key="/logger">
67-
<IconFile /> {t("logs")}
68-
</MenuItem>
76+
<Tooltip position="tl" mini content={`${t("logs")}`} popupHoverStay={false} disabled={collapsed}>
77+
<MenuItem key="/logger">
78+
<IconFile /> {t("logs")}
79+
</MenuItem>
80+
</Tooltip>
6981
</CustomLink>
7082
<CustomLink to="/tools" className="menu-tools">
71-
<MenuItem key="/tools">
72-
<IconTool /> {t("tools")}
73-
</MenuItem>
83+
<Tooltip position="tl" mini content={`${t("tools")}`} popupHoverStay={false} disabled={collapsed}>
84+
<MenuItem key="/tools">
85+
<IconTool /> {t("tools")}
86+
</MenuItem>
87+
</Tooltip>
7488
</CustomLink>
7589
<CustomLink to="/setting" className="menu-setting">
76-
<MenuItem key="/setting">
77-
<IconSettings /> {t("settings")}
78-
</MenuItem>
90+
<Tooltip position="tl" mini content={`${t("settings")}`} popupHoverStay={false} disabled={collapsed}>
91+
<MenuItem key="/setting">
92+
<IconSettings /> {t("settings")}
93+
</MenuItem>
94+
</Tooltip>
7995
</CustomLink>
8096
</Menu>
8197
<Menu
@@ -85,84 +101,95 @@ const Sider: React.FC = () => {
85101
onClickMenuItem={handleMenuClick}
86102
mode="pop"
87103
>
88-
<Menu.SubMenu
89-
key="/help"
90-
title={
91-
<>
92-
<IconQuestion /> {t("helpcenter")}
93-
</>
94-
}
95-
triggerProps={{
96-
trigger: "hover",
97-
}}
98-
>
104+
<Tooltip position="tl" mini content={`${t("helpcenter")}`} popupHoverStay={false} disabled={collapsed}>
99105
<Menu.SubMenu
100-
key="/external_links"
106+
key="/help"
101107
title={
102108
<>
103-
<RiLinkM /> <span className="tw-grow">{t("external_links")}</span>
109+
<IconQuestion /> {t("helpcenter")}
104110
</>
105111
}
112+
triggerProps={{
113+
trigger: "hover",
114+
}}
106115
>
107-
<Menu.Item key="scriptcat/docs/dev/">
108-
<a href={`${DocumentationSite}${localePath}/docs/dev/`} target="_blank" rel="noreferrer">
109-
<RiFileCodeLine /> {t("api_docs")}
110-
</a>
111-
</Menu.Item>
112-
<Menu.Item key="scriptcat/docs/learn/">
113-
<a href="https://learn.scriptcat.org/docs/%E7%AE%80%E4%BB%8B/" target="_blank" rel="noreferrer">
114-
<RiFileCodeLine /> {t("development_guide")}
115-
</a>
116+
<Menu.SubMenu
117+
key="/external_links"
118+
title={
119+
<>
120+
<RiLinkM /> <span className="tw-grow">{t("external_links")}</span>
121+
</>
122+
}
123+
>
124+
<Menu.Item key="scriptcat/docs/dev/">
125+
<a href={`${DocumentationSite}${localePath}/docs/dev/`} target="_blank" rel="noreferrer">
126+
<RiFileCodeLine /> {t("api_docs")}
127+
</a>
128+
</Menu.Item>
129+
<Menu.Item key="scriptcat/docs/learn/">
130+
<a href="https://learn.scriptcat.org/docs/%E7%AE%80%E4%BB%8B/" target="_blank" rel="noreferrer">
131+
<RiFileCodeLine /> {t("development_guide")}
132+
</a>
133+
</Menu.Item>
134+
<Menu.Item key="scriptcat/userscript">
135+
<a href="https://scriptcat.org/search" target="_blank" rel="noreferrer">
136+
<IconLink /> {t("script_gallery")}
137+
</a>
138+
</Menu.Item>
139+
<Menu.Item key="tampermonkey/bbs">
140+
<a href="https://bbs.tampermonkey.net.cn/" target="_blank" rel="noreferrer">
141+
<IconLink /> {t("community_forum")}
142+
</a>
143+
</Menu.Item>
144+
<Menu.Item key="GitHub">
145+
<a href="https://github.com/scriptscat/scriptcat" target="_blank" rel="noreferrer">
146+
<IconGithub /> {"GitHub"}
147+
</a>
148+
</Menu.Item>
149+
</Menu.SubMenu>
150+
<Menu.Item
151+
key="/guide"
152+
onClick={() => {
153+
guideRef.current?.open();
154+
}}
155+
>
156+
<RiGuideLine /> {t("guide")}
116157
</Menu.Item>
117-
<Menu.Item key="scriptcat/userscript">
118-
<a href="https://scriptcat.org/search" target="_blank" rel="noreferrer">
119-
<IconLink /> {t("script_gallery")}
120-
</a>
121-
</Menu.Item>
122-
<Menu.Item key="tampermonkey/bbs">
123-
<a href="https://bbs.tampermonkey.net.cn/" target="_blank" rel="noreferrer">
124-
<IconLink /> {t("community_forum")}
125-
</a>
126-
</Menu.Item>
127-
<Menu.Item key="GitHub">
128-
<a href="https://github.com/scriptscat/scriptcat" target="_blank" rel="noreferrer">
129-
<IconGithub /> {"GitHub"}
158+
<Menu.Item key="scriptcat/docs/use/">
159+
<a href={`${DocumentationSite}${localePath}/docs/use/use/`} target="_blank" rel="noreferrer">
160+
<RiFileCodeLine /> {t("user_guide")}
130161
</a>
131162
</Menu.Item>
132163
</Menu.SubMenu>
133-
<Menu.Item
134-
key="/guide"
164+
</Tooltip>
165+
<Tooltip
166+
position="tl"
167+
mini
168+
content={`${collapsed ? t("show_main_sidebar") : t("hide_main_sidebar")}`}
169+
popupHoverStay={false}
170+
disabled={collapsed}
171+
className={`${collapsed ? "!tw-hidden" : ""}` /* ε¦εˆ™ expand -> disabled η”Ÿζ•ˆ -> ζ°ΈδΉ…ζ˜Ύη€Ί */}
172+
>
173+
<MenuItem
174+
key="/collapsible"
135175
onClick={() => {
136-
guideRef.current?.open();
176+
localStorage.collapsed = !collapsed;
177+
setCollapsed(!collapsed);
137178
}}
138179
>
139-
<RiGuideLine /> {t("guide")}
140-
</Menu.Item>
141-
<Menu.Item key="scriptcat/docs/use/">
142-
<a href={`${DocumentationSite}${localePath}/docs/use/use/`} target="_blank" rel="noreferrer">
143-
<RiFileCodeLine /> {t("user_guide")}
144-
</a>
145-
</Menu.Item>
146-
</Menu.SubMenu>
147-
<MenuItem
148-
key="/collapsible"
149-
onClick={() => {
150-
localStorage.collapsed = !collapsed;
151-
setCollapsed(!collapsed);
152-
}}
153-
>
154-
{collapsed ? (
155-
<>
156-
<IconRight />
157-
{t("show_main_sidebar")}
158-
</>
159-
) : (
160-
<>
161-
<IconLeft />
162-
{t("hide_main_sidebar")}
163-
</>
164-
)}
165-
</MenuItem>
180+
{collapsed ? (
181+
<>
182+
<IconRight />
183+
{t("show_main_sidebar")}
184+
</>
185+
) : (
186+
<>
187+
<IconLeft />
188+
{t("hide_main_sidebar")}
189+
</>
190+
)}
191+
</MenuItem>
192+
</Tooltip>
166193
</Menu>
167194
</div>
168195
</Layout.Sider>

0 commit comments

Comments
Β (0)