diff --git a/README.md b/README.md index 8f78b30..46a6a3a 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ -

Another Mihomo GUI

+

Another Mihomo GUI

diff --git a/src/main/utils/template.ts b/src/main/utils/template.ts index 44d17be..26f2db1 100644 --- a/src/main/utils/template.ts +++ b/src/main/utils/template.ts @@ -32,6 +32,7 @@ export const defaultConfig: IAppConfig = { 'log', 'substore' ], + siderWidth: 250, sysProxy: { enable: false, mode: 'manual' } } diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 107c533..243d6d7 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -44,6 +44,7 @@ const App: React.FC = () => { appTheme = 'system', customTheme, useWindowFrame = false, + siderWidth = 250, siderOrder = [ 'sysproxy', 'tun', @@ -61,6 +62,8 @@ const App: React.FC = () => { ] } = appConfig || {} const [order, setOrder] = useState(siderOrder) + const [siderWidthValue, setSiderWidthValue] = useState(siderWidth) + const [resizing, setResizing] = useState(false) const sensors = useSensors(useSensor(PointerSensor)) const { setTheme, systemTheme } = useTheme() navigate = useNavigate() @@ -82,7 +85,8 @@ const App: React.FC = () => { } useEffect(() => { setOrder(siderOrder) - }, [siderOrder]) + setSiderWidthValue(siderWidth) + }, [siderOrder, siderWidth]) useEffect(() => { const tourShown = window.localStorage.getItem('tourShown') @@ -154,8 +158,29 @@ const App: React.FC = () => { } return ( -

-
+
{ + if (resizing) { + setResizing(false) + patchAppConfig({ siderWidth: siderWidthValue }) + } + }} + onMouseMove={(e) => { + if (!resizing) return + if (e.clientX <= 250) { + setSiderWidthValue(250) + } else if (e.clientX >= 400) { + setSiderWidthValue(400) + } else { + setSiderWidthValue(e.clientX) + } + }} + className={`w-full h-[100vh] flex ${resizing ? 'cursor-ew-resize' : ''}`} + > +
{
+
{ + setResizing(true) + }} + style={{ + position: 'fixed', + zIndex: 100, + left: `${siderWidthValue - 2}px`, + width: '5px', + height: '100vh', + cursor: 'ew-resize' + }} + className={resizing ? 'bg-primary' : ''} + /> -
{page}
+
{page}
) } diff --git a/src/renderer/src/components/settings/substore-config.tsx b/src/renderer/src/components/settings/substore-config.tsx index 0045797..dec3922 100644 --- a/src/renderer/src/components/settings/substore-config.tsx +++ b/src/renderer/src/components/settings/substore-config.tsx @@ -136,7 +136,6 @@ const SubStoreConfig: React.FC = () => { )} { @@ -170,7 +169,6 @@ const SubStoreConfig: React.FC = () => { )} { @@ -204,7 +202,6 @@ const SubStoreConfig: React.FC = () => { )} { diff --git a/src/shared/types.d.ts b/src/shared/types.d.ts index c617a1f..e8c59a5 100644 --- a/src/shared/types.d.ts +++ b/src/shared/types.d.ts @@ -245,6 +245,7 @@ interface IAppConfig { useWindowFrame: boolean proxyInTray: boolean siderOrder: string[] + siderWidth: number appTheme: AppTheme customTheme?: string autoCheckUpdate: boolean