feat: 本次提交更新内容如下

梳理了icon ，增加了layout的loading

nkebao/src/components/Layout/Layout.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+import { SpinLoading } from "antd-mobile";
 import styles from "./layout.module.scss";
+
 interface LayoutProps {
   loading?: boolean;
   children?: React.ReactNode;
@@ -7,11 +9,25 @@ interface LayoutProps {
   footer?: React.ReactNode;
 }
 
-const Layout: React.FC<LayoutProps> = ({ children, header, footer }) => {
+const Layout: React.FC<LayoutProps> = ({
+  children,
+  header,
+  footer,
+  loading = false,
+}) => {
   return (
     <div className={styles.container}>
       {header && <header>{header}</header>}
-      <main>{children}</main>
+      <main>
+        {loading ? (
+          <div className={styles.loadingContainer}>
+            <SpinLoading color="primary" style={{ fontSize: 32 }} />
+            <div className={styles.loadingText}>加载中...</div>
+          </div>
+        ) : (
+          children
+        )}
+      </main>
       {footer && <footer>{footer}</footer>}
     </div>
   );

nkebao/src/components/Layout/layout.module.scss

@@ -8,4 +8,21 @@
 .container main {
   flex: 1;
   overflow: auto;
+}
+
+.loadingContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.loadingText {
+  margin-top: 16px;
+  color: #666;
+  font-size: 14px;
+  text-align: center;
 } 

nkebao/src/components/MeauMobile/MeauMoible.tsx

@@ -1,81 +1,81 @@
-import React, { useState, useEffect } from "react";
-import { TabBar } from "antd-mobile";
-import {
-  AppOutline,
-  ShopbagOutline,
-  PieOutline,
-  UserOutline,
-} from "antd-mobile-icons";
-import { useLocation, useNavigate } from "react-router-dom";
-
-const tabs = [
-  {
-    key: "home",
-    title: "首页",
-    icon: <AppOutline />,
-    path: "/",
-  },
-  {
-    key: "scene",
-    title: "场景获客",
-    icon: <ShopbagOutline />,
-    path: "/scene",
-  },
-  {
-    key: "work",
-    title: "工作台",
-    icon: <PieOutline />,
-    path: "/workspace",
-  },
-  {
-    key: "mine",
-    title: "我的",
-    icon: <UserOutline />,
-    path: "/mine",
-  },
-];
-
-// 需要展示菜单的路由白名单（可根据实际业务调整）
-const menuPaths = ["/", "/scene", "/workspace", "/mine"];
-
-const MeauMobile: React.FC = () => {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const [activeKey, setActiveKey] = useState("home");
-
-  // 根据当前路由自动设置 activeKey，支持嵌套路由
-  useEffect(() => {
-    const found = tabs.find((tab) =>
-      tab.path === "/"
-        ? location.pathname === "/"
-        : location.pathname.startsWith(tab.path)
-    );
-    if (found) setActiveKey(found.key);
-  }, [location.pathname]);
-
-  // 判断当前路由是否需要展示菜单
-  const showMenu = menuPaths.some((path) =>
-    path === "/"
-      ? location.pathname === "/"
-      : location.pathname.startsWith(path)
-  );
-  if (!showMenu) return null;
-
-  return (
-    <TabBar
-      style={{ background: "#fff" }}
-      activeKey={activeKey}
-      onChange={(key) => {
-        setActiveKey(key);
-        const tab = tabs.find((t) => t.key === key);
-        if (tab && tab.path) navigate(tab.path);
-      }}
-    >
-      {tabs.map((item) => (
-        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
-      ))}
-    </TabBar>
-  );
-};
-
-export default MeauMobile;
+import React, { useState, useEffect } from "react";
+import { TabBar } from "antd-mobile";
+import {
+  AppOutline,
+  ShopbagOutline,
+  PieOutline,
+  UserOutline,
+} from "antd-mobile-icons";
+import { useLocation, useNavigate } from "react-router-dom";
+
+const tabs = [
+  {
+    key: "home",
+    title: "首页",
+    icon: <AppOutline />,
+    path: "/",
+  },
+  {
+    key: "scene",
+    title: "场景获客",
+    icon: <ShopbagOutline />,
+    path: "/scene",
+  },
+  {
+    key: "work",
+    title: "工作台",
+    icon: <PieOutline />,
+    path: "/workspace",
+  },
+  {
+    key: "mine",
+    title: "我的",
+    icon: <UserOutline />,
+    path: "/mine",
+  },
+];
+
+// 需要展示菜单的路由白名单（可根据实际业务调整）
+const menuPaths = ["/", "/scene", "/workspace", "/mine"];
+
+const MeauMobile: React.FC = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [activeKey, setActiveKey] = useState("home");
+
+  // 根据当前路由自动设置 activeKey，支持嵌套路由
+  useEffect(() => {
+    const found = tabs.find((tab) =>
+      tab.path === "/"
+        ? location.pathname === "/"
+        : location.pathname.startsWith(tab.path)
+    );
+    if (found) setActiveKey(found.key);
+  }, [location.pathname]);
+
+  // 判断当前路由是否需要展示菜单
+  const showMenu = menuPaths.some((path) =>
+    path === "/"
+      ? location.pathname === "/"
+      : location.pathname.startsWith(path)
+  );
+  if (!showMenu) return null;
+
+  return (
+    <TabBar
+      style={{ background: "#fff" }}
+      activeKey={activeKey}
+      onChange={(key) => {
+        setActiveKey(key);
+        const tab = tabs.find((t) => t.key === key);
+        if (tab && tab.path) navigate(tab.path);
+      }}
+    >
+      {tabs.map((item) => (
+        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
+      ))}
+    </TabBar>
+  );
+};
+
+export default MeauMobile;

nkebao/src/components/PlaceholderPage.tsx

@@ -1,56 +1,56 @@
-import React from "react";
-import { NavBar, Button } from "antd-mobile";
-import { AddOutline } from "antd-mobile-icons";
-import Layout from "@/components/Layout/Layout";
-import MeauMobile from "@/components/MeauMobile/MeauMoible";
-
-interface PlaceholderPageProps {
-  title: string;
-  showBack?: boolean;
-  showAddButton?: boolean;
-  addButtonText?: string;
-  showFooter?: boolean;
-}
-
-const PlaceholderPage: React.FC<PlaceholderPageProps> = ({
-  title,
-  showBack = true,
-  showAddButton = false,
-  addButtonText = "新建",
-  showFooter = true,
-}) => {
-  return (
-    <Layout
-      header={
-        <NavBar
-          backArrow={showBack}
-          style={{ background: "#fff" }}
-          onBack={showBack ? () => window.history.back() : undefined}
-          left={
-            <div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
-              {title}
-            </div>
-          }
-          right={
-            showAddButton ? (
-              <Button size="small" color="primary">
-                <AddOutline />
-                <span style={{ marginLeft: 4, fontSize: 12 }}>
-                  {addButtonText}
-                </span>
-              </Button>
-            ) : undefined
-          }
-        />
-      }
-      footer={showFooter ? <MeauMobile /> : undefined}
-    >
-      <div style={{ padding: 20, textAlign: "center", color: "#666" }}>
-        <h3>{title}页面</h3>
-        <p>此页面正在开发中...</p>
-      </div>
-    </Layout>
-  );
-};
-
-export default PlaceholderPage;
+import React from "react";
+import { NavBar, Button } from "antd-mobile";
+import { PlusOutlined } from "@ant-design/icons";
+import Layout from "@/components/Layout/Layout";
+import MeauMobile from "@/components/MeauMobile/MeauMoible";
+
+interface PlaceholderPageProps {
+  title: string;
+  showBack?: boolean;
+  showAddButton?: boolean;
+  addButtonText?: string;
+  showFooter?: boolean;
+}
+
+const PlaceholderPage: React.FC<PlaceholderPageProps> = ({
+  title,
+  showBack = true,
+  showAddButton = false,
+  addButtonText = "新建",
+  showFooter = true,
+}) => {
+  return (
+    <Layout
+      header={
+        <NavBar
+          backArrow={showBack}
+          style={{ background: "#fff" }}
+          onBack={showBack ? () => window.history.back() : undefined}
+          left={
+            <div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
+              {title}
+            </div>
+          }
+          right={
+            showAddButton ? (
+              <Button size="small" color="primary">
+                <PlusOutlined />
+                <span style={{ marginLeft: 4, fontSize: 12 }}>
+                  {addButtonText}
+                </span>
+              </Button>
+            ) : undefined
+          }
+        />
+      }
+      footer={showFooter ? <MeauMobile /> : undefined}
+    >
+      <div style={{ padding: 20, textAlign: "center", color: "#666" }}>
+        <h3>{title}页面</h3>
+        <p>此页面正在开发中...</p>
+      </div>
+    </Layout>
+  );
+};
+
+export default PlaceholderPage;