diff --git a/app/components/home.module.scss b/app/components/home.module.scss index 36e7dfae..5a640acb 100644 --- a/app/components/home.module.scss +++ b/app/components/home.module.scss @@ -20,14 +20,12 @@ .container { @include container(); - - max-width: 1080px; - max-height: 864px; } .tight-container { --window-width: 100vw; --window-height: 100vh; + --window-content-width: calc(var(--window-width) - var(--sidebar-width)); @include container(); @@ -44,6 +42,43 @@ box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05); } +.window-content { + width: var(--window-content-width); + height: 100%; +} + +.mobile { + display: none; +} + +@media only screen and (max-width: 600px) { + .container { + min-width: unset; + min-height: unset; + border: 0; + border-radius: 0; + } + + .sidebar { + position: absolute; + top: -100%; + z-index: 999; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + height: 80vh; + box-shadow: var(--shadow); + transition: all ease 0.3s; + } + + .sidebar-show { + top: 0; + } + + .mobile { + display: block; + } +} + .sidebar-header { position: relative; padding-top: 20px; @@ -72,7 +107,6 @@ } .chat-list { - width: 260px; } .chat-item { @@ -159,13 +193,8 @@ display: inline-flex; } -.sidebar-action:last-child { - margin-left: 15px; -} - -.window-content { - width: var(--window-content-width); - height: 100%; +.sidebar-action:not(:last-child) { + margin-right: 15px; } .chat { @@ -193,7 +222,7 @@ } .chat-message-container { - max-width: 80%; + max-width: var(--message-max-width); display: flex; flex-direction: column; align-items: flex-start; @@ -227,6 +256,7 @@ } .chat-message-item { + box-sizing: border-box; max-width: 100%; margin-top: 10px; border-radius: 10px; @@ -255,9 +285,6 @@ color: #aaa; } -.chat-message-action-button { -} - .chat-input-panel { position: absolute; bottom: 20px; @@ -272,15 +299,12 @@ flex: 1; } -.chat-input-panel-multi { -} - .chat-input { height: 100%; width: 100%; border-radius: 10px; border: var(--border-in-light); - box-shadow: var(--card-shadow); + box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03); background-color: var(--white); color: var(--black); font-family: inherit; diff --git a/app/components/home.tsx b/app/components/home.tsx index e7048984..48dcefd0 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -21,22 +21,13 @@ import BotIcon from "../icons/bot.svg"; import AddIcon from "../icons/add.svg"; import DeleteIcon from "../icons/delete.svg"; import LoadingIcon from "../icons/three-dots.svg"; +import MenuIcon from "../icons/menu.svg"; +import CloseIcon from "../icons/close.svg"; import { Message, SubmitKey, useChatStore, Theme } from "../store"; import { Settings } from "./settings"; import dynamic from "next/dynamic"; -export const LazySettings = dynamic( - async () => await (await import("./settings")).Settings, - { - loading: () => ( -
- -
- ), - } -); - export function Markdown(props: { content: string }) { return ( @@ -134,7 +125,7 @@ function useSubmitHandler() { }; } -export function Chat() { +export function Chat(props: { showSideBar?: () => void }) { type RenderMessage = Message & { preview?: boolean }; const session = useChatStore((state) => state.currentSession()); @@ -200,6 +191,14 @@ export function Chat() {
+
+ } + bordered + title="查看消息列表" + onClick={props?.showSideBar} + /> +
} @@ -300,6 +299,7 @@ function useSwitchTheme() { export function Home() { const [createNewSession] = useChatStore((state) => [state.newSession]); const loading = !useChatStore?.persist?.hasHydrated(); + const [showSideBar, setShowSideBar] = useState(true); // settings const [openSettings, setOpenSettings] = useState(false); @@ -322,7 +322,9 @@ export function Home() { config.tightBorder ? styles["tight-container"] : styles.container }`} > -
+
ChatGPT Next
@@ -342,6 +344,12 @@ export function Home() {
+
+ } + onClick={() => setShowSideBar(!showSideBar)} + /> +
} @@ -365,7 +373,11 @@ export function Home() {
- {openSettings ? : } + {openSettings ? ( + setOpenSettings(false)} /> + ) : ( + setShowSideBar(true)} /> + )}
); diff --git a/app/components/settings.tsx b/app/components/settings.tsx index 84974f3d..206cdfad 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -5,15 +5,15 @@ import EmojiPicker, { Emoji, Theme as EmojiTheme } from "emoji-picker-react"; import styles from "./settings.module.scss"; import ResetIcon from "../icons/reload.svg"; +import CloseIcon from "../icons/close.svg"; import { List, ListItem, Popover } from "./ui-lib"; import { IconButton } from "./button"; import { SubmitKey, useChatStore, Theme } from "../store"; import { Avatar } from "./home"; -import dynamic from "next/dynamic"; -export function Settings() { +export function Settings(props: { closeSettings: () => void }) { const [showEmojiPicker, setShowEmojiPicker] = useState(false); const [config, updateConfig, resetConfig] = useChatStore((state) => [ state.config, @@ -29,6 +29,14 @@ export function Settings() {
设置选项
+
+ } + onClick={props.closeSettings} + bordered + title="重置所有选项" + /> +
} diff --git a/app/components/window.scss b/app/components/window.scss index 8b8906b3..c01b6fd0 100644 --- a/app/components/window.scss +++ b/app/components/window.scss @@ -12,9 +12,9 @@ font-weight: bolder; overflow: hidden; text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; + white-space: nowrap; + display: block; + max-width: 50vw; } .window-header-sub-title { diff --git a/app/globals.scss b/app/globals.scss index b17048aa..6cc86d58 100644 --- a/app/globals.scss +++ b/app/globals.scss @@ -46,6 +46,17 @@ --window-height: 90vh; --sidebar-width: 300px; --window-content-width: calc(var(--window-width) - var(--sidebar-width)); + --message-max-width: 80%; +} + +@media only screen and (max-width: 600px) { + :root { + --window-width: 100vw; + --window-height: 100vh; + --sidebar-width: 100vw; + --window-content-width: var(--window-width); + --message-max-width: 100%; + } } @media (prefers-color-scheme: dark) { diff --git a/app/icons/close.svg b/app/icons/close.svg new file mode 100644 index 00000000..f8e0ec88 --- /dev/null +++ b/app/icons/close.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/icons/menu.svg b/app/icons/menu.svg new file mode 100644 index 00000000..83ba0f8a --- /dev/null +++ b/app/icons/menu.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 708e9aac..f5f00e21 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -12,7 +12,11 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - + + {children} );