chore: remove sd new

app/components/home.tsx

@@ -59,10 +59,6 @@ const Sd = dynamic(async () => (await import("./sd")).Sd, {
   loading: () => <Loading noLogo />,
 });
 
-const SdNew = dynamic(async () => (await import("./sd")).SdNew, {
-  loading: () => <Loading noLogo />,
-});
-
 export function useSwitchTheme() {
   const config = useAppConfig();
 
@@ -157,7 +153,7 @@ function Screen() {
   const renderContent = () => {
     if (isAuth) return <AuthPage />;
     if (isSd) return <Sd />;
-    if (isSdNew) return <SdNew />;
+    if (isSdNew) return <Sd />;
     return (
       <>
         <SideBar className={isHome ? styles["sidebar-show"] : ""} />

app/components/sd/index.tsx

@@ -1,3 +1,2 @@
 export * from "./sd";
 export * from "./sd-panel";
-export * from "./sd-new";

app/components/sd/sd-new.tsx

@@ -1,127 +0,0 @@
-import homeStyles from "@/app/components/home.module.scss";
-
-import { IconButton } from "@/app/components/button";
-import GithubIcon from "@/app/icons/github.svg";
-import ReturnIcon from "@/app/icons/return.svg";
-import Locale from "@/app/locales";
-import HistoryIcon from "@/app/icons/history.svg";
-
-import { Path, REPO_URL } from "@/app/constant";
-
-import { useNavigate } from "react-router-dom";
-import dynamic from "next/dynamic";
-import {
-  SideBarContainer,
-  SideBarBody,
-  SideBarTail,
-  useDragSideBar,
-  useHotKey,
-} from "@/app/components/sidebar";
-import { getParams, getModelParamBasicData } from "./sd-panel";
-import { useSdStore } from "@/app/store/sd";
-import { showToast } from "@/app/components/ui-lib";
-
-const SdPanel = dynamic(
-  async () => (await import("@/app/components/sd")).SdPanel,
-  {
-    loading: () => null,
-  },
-);
-
-export function SdNew() {
-  useHotKey();
-  const { onDragStart, shouldNarrow } = useDragSideBar();
-  const navigate = useNavigate();
-  const sdStore = useSdStore();
-  const currentModel = sdStore.currentModel;
-  const params = sdStore.currentParams;
-  const setParams = sdStore.setCurrentParams;
-
-  const handleSubmit = () => {
-    const columns = getParams?.(currentModel, params);
-    const reqParams: any = {};
-    for (let i = 0; i < columns.length; i++) {
-      const item = columns[i];
-      reqParams[item.value] = params[item.value] ?? null;
-      if (item.required) {
-        if (!reqParams[item.value]) {
-          showToast(Locale.SdPanel.ParamIsRequired(item.name));
-          return;
-        }
-      }
-    }
-    let data: any = {
-      model: currentModel.value,
-      model_name: currentModel.name,
-      status: "wait",
-      params: reqParams,
-      created_at: new Date().toLocaleString(),
-      img_data: "",
-    };
-    sdStore.sendTask(data, () => {
-      setParams(getModelParamBasicData(columns, params, true));
-      navigate(Path.Sd);
-    });
-  };
-  return (
-    <SideBarContainer
-      onDragStart={onDragStart}
-      shouldNarrow={shouldNarrow}
-      className={homeStyles["sidebar-show"]}
-    >
-      <div
-        className="window-header"
-        data-tauri-drag-region
-        style={{
-          paddingLeft: 0,
-          paddingRight: 0,
-        }}
-      >
-        {
-          <div className="window-actions">
-            <div className="window-action-button">
-              <IconButton
-                icon={<ReturnIcon />}
-                bordered
-                title={Locale.Sd.Actions.ReturnHome}
-                onClick={() => navigate(Path.Home)}
-              />
-            </div>
-          </div>
-        }
-
-        <div className={`window-header-title`}>
-          <div className={`window-header-main-title`}>Stability</div>
-        </div>
-        <div className="window-actions">
-          <div className="window-action-button">
-            <IconButton
-              icon={<HistoryIcon />}
-              bordered
-              title={Locale.Sd.Actions.History}
-              onClick={() => navigate(Path.Sd)}
-            />
-          </div>
-        </div>
-      </div>
-      <SideBarBody>
-        <SdPanel />
-      </SideBarBody>
-      <SideBarTail
-        primaryAction={
-          <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
-            <IconButton icon={<GithubIcon />} shadow />
-          </a>
-        }
-        secondaryAction={
-          <IconButton
-            text={Locale.SdPanel.Submit}
-            type="primary"
-            shadow
-            onClick={handleSubmit}
-          ></IconButton>
-        }
-      />
-    </SideBarContainer>
-  );
-}

app/components/sd/sd-sidebar.tsx

@@ -2,6 +2,7 @@ import { IconButton } from "@/app/components/button";
 import GithubIcon from "@/app/icons/github.svg";
 import SDIcon from "@/app/icons/sd.svg";
 import ReturnIcon from "@/app/icons/return.svg";
+import HistoryIcon from "@/app/icons/history.svg";
 import Locale from "@/app/locales";
 
 import { Path, REPO_URL } from "@/app/constant";
@@ -20,6 +21,7 @@ import {
 import { getParams, getModelParamBasicData } from "./sd-panel";
 import { useSdStore } from "@/app/store/sd";
 import { showToast } from "@/app/components/ui-lib";
+import { useMobileScreen } from "@/app/utils";
 
 const SdPanel = dynamic(
   async () => (await import("@/app/components/sd")).SdPanel,
@@ -30,6 +32,7 @@ const SdPanel = dynamic(
 
 export function SideBar(props: { className?: string }) {
   useHotKey();
+  const isMobileScreen = useMobileScreen();
   const { onDragStart, shouldNarrow } = useDragSideBar();
   const navigate = useNavigate();
   const sdStore = useSdStore();
@@ -69,17 +72,50 @@ export function SideBar(props: { className?: string }) {
       shouldNarrow={shouldNarrow}
       {...props}
     >
-      <SideBarHeader
+      {isMobileScreen ? (
-        title={
+        <div
-          <IconButton
+          className="window-header"
-            icon={<ReturnIcon />}
+          data-tauri-drag-region
-            bordered
+          style={{
-            title={Locale.Sd.Actions.ReturnHome}
+            paddingLeft: 0,
-            onClick={() => navigate(Path.Home)}
+            paddingRight: 0,
-          />
+          }}
-        }
+        >
-        logo={<SDIcon width={38} height={38} />}
+          <div className="window-actions">
-      ></SideBarHeader>
+            <div className="window-action-button">
+              <IconButton
+                icon={<ReturnIcon />}
+                bordered
+                title={Locale.Sd.Actions.ReturnHome}
+                onClick={() => navigate(Path.Home)}
+              />
+            </div>
+          </div>
+          <SDIcon width={50} height={50} />
+          <div className="window-actions">
+            <div className="window-action-button">
+              <IconButton
+                icon={<HistoryIcon />}
+                bordered
+                title={Locale.Sd.Actions.History}
+                onClick={() => navigate(Path.SdNew)}
+              />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <SideBarHeader
+          title={
+            <IconButton
+              icon={<ReturnIcon />}
+              bordered
+              title={Locale.Sd.Actions.ReturnHome}
+              onClick={() => navigate(Path.Home)}
+            />
+          }
+          logo={<SDIcon width={38} height={38} />}
+        ></SideBarHeader>
+      )}
       <SideBarBody>
         <SdPanel />
       </SideBarBody>

app/components/sd/sd.tsx

@@ -1,5 +1,7 @@
 import chatStyles from "@/app/components/chat.module.scss";
 import styles from "@/app/components/sd/sd.module.scss";
+import homeStyles from "@/app/components/home.module.scss";
+
 import { IconButton } from "@/app/components/button";
 import ReturnIcon from "@/app/icons/return.svg";
 import Locale from "@/app/locales";
@@ -10,7 +12,7 @@ import {
   getMessageTextContent,
   useMobileScreen,
 } from "@/app/utils";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { useAppConfig } from "@/app/store";
 import MinIcon from "@/app/icons/min.svg";
 import MaxIcon from "@/app/icons/max.svg";
@@ -24,6 +26,7 @@ import { useSdStore } from "@/app/store/sd";
 import locales from "@/app/locales";
 import LoadingIcon from "@/app/icons/three-dots.svg";
 import ErrorIcon from "@/app/icons/delete.svg";
+import SDIcon from "@/app/icons/sd.svg";
 import { Property } from "csstype";
 import {
   showConfirm,
@@ -88,12 +91,14 @@ function getSdTaskStatus(item: any) {
 export function Sd() {
   const isMobileScreen = useMobileScreen();
   const navigate = useNavigate();
+  const location = useLocation();
   const clientConfig = useMemo(() => getClientConfig(), []);
   const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;
   const config = useAppConfig();
   const scrollRef = useRef<HTMLDivElement>(null);
   const sdStore = useSdStore();
   const [sdImages, setSdImages] = useState(sdStore.draw);
+  const isSd = location.pathname === Path.Sd;
 
   useEffect(() => {
     setSdImages(sdStore.draw);
@@ -101,7 +106,7 @@ export function Sd() {
 
   return (
     <>
-      <SideBar />
+      <SideBar className={isSd ? homeStyles["sidebar-show"] : ""} />
       <WindowContent>
         <div className={chatStyles.chat} key={"1"}>
           <div className="window-header" data-tauri-drag-region>
@@ -112,7 +117,7 @@ export function Sd() {
                     icon={<ReturnIcon />}
                     bordered
                     title={Locale.Chat.Actions.ChatList}
-                    onClick={() => navigate(Path.SdNew)}
+                    onClick={() => navigate(Path.Sd)}
                   />
                 </div>
               </div>
@@ -140,6 +145,7 @@ export function Sd() {
                   />
                 </div>
               )}
+              {isMobileScreen && <SDIcon width={50} height={50} />}
             </div>
           </div>
           <div className={chatStyles["chat-body"]} ref={scrollRef}>