chore(admin): 修改页面布局和样式

apps/admin/src/components/AppList/AppList.less

@@ -5,34 +5,50 @@
 
   &__filters {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: flex-end;
     justify-content: space-between;
     gap: 16px;
   }
 
+  &__filter-main {
+    display: flex;
+    flex: 0 1 auto;
+    align-items: flex-end;
+    gap: 16px;
+    min-width: 0;
+  }
+
   &__filter-items {
     display: flex;
-    flex: 1;
+    flex: 0 1 auto;
     flex-wrap: wrap;
     align-items: flex-end;
     gap: 16px;
   }
 
+  &__filter-actions {
+    flex: 0 0 auto;
+  }
+
   &__filter-item {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    align-items: center;
     gap: 8px;
   }
 
   &__filter-label {
+    flex: 0 0 auto;
     color: rgb(0 0 0 / 88%);
+    white-space: nowrap;
   }
 
   &__toolbar {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
+    flex: 0 0 auto;
   }
 
   &__blocking-error {

apps/admin/src/components/AppList/AppList.tsx

@@ -53,6 +53,7 @@ export function AppList<Row extends object, Filters extends object = Record<stri
     <div className="app-list">
       {filters ? (
         <section className="app-list__filters" aria-label="筛选条件">
+          <div className="app-list__filter-main">
             <div className="app-list__filter-items">
               {filters.items.map((item) => (
                 <div className="app-list__filter-item" key={String(item.name)}>
@@ -64,7 +65,7 @@ export function AppList<Row extends object, Filters extends object = Record<stri
                 </div>
               ))}
             </div>
-          <Space wrap>
+            <Space wrap className="app-list__filter-actions">
               <Button type="primary" icon={<SearchOutlined />} onClick={filters.onSearch}>
                 搜索
               </Button>
@@ -72,10 +73,12 @@ export function AppList<Row extends object, Filters extends object = Record<stri
                 重置
               </Button>
             </Space>
+          </div>
+          {toolbar ? <div className="app-list__toolbar">{toolbar}</div> : null}
         </section>
       ) : null}
 
-      {toolbar ? <div className="app-list__toolbar">{toolbar}</div> : null}
+      {!filters && toolbar ? <div className="app-list__toolbar">{toolbar}</div> : null}
 
       {hasRefreshError ? (
         <Alert

apps/admin/src/layout/components/breadcrumb.jsx

-import { Button } from "antd";
-import { LeftOutlined } from "@ant-design/icons";
-import { useLocation, useNavigate } from "react-router";
+import { Link } from "react-router";
 
-export default function Breadcrumb() {
-  const { pathname } = useLocation();
-  const navigate = useNavigate();
-  // const hasBack = currentMenusList.find(item => {
-  //   const regExp = new RegExp(`^${item.path}`)
-  //   return regExp.test(pathname) && item.path !== pathname
-  // })
-  const hasBack = [
-    "/books/management/add-edit",
-    "/setting/help/addedit",
-    "/books/management/chapter",
-    "/userinfo",
-    "/books/audit/detail",
-    "/books/sale/discussP",
-    "/books/sale/discuss-detail",
-    "/member/list/detail",
-    "/books/sale/detail",
-  ].includes(pathname);
-
-  if (!hasBack) return null;
+export default function Breadcrumb({ parent }) {
+  if (!parent) return null;
 
   return (
     <div className="layout-breadcrumb">
-      <Button type="text" icon={<LeftOutlined />} onClick={() => navigate(-1)}>
-        返回
-      </Button>
+      <Link to={parent.parent}>{parent.parentTitle}</Link>
+      <span aria-hidden="true">/</span>
     </div>
   );
 }

apps/admin/src/layout/index.less

 .layout-container {
   min-height: 100vh;
-  background: #f6f7f9;
+  background: #fff;
 }
 
 .layout-sider {
-  position: fixed !important;
-  top: 84px;
-  bottom: 0;
-  left: 0;
-  height: auto;
+  position: sticky !important;
+  top: 0;
+  height: 100vh;
   overflow: hidden;
-  background: #f6f7f9 !important;
+  background: #f5f6f7 !important;
   border-inline-end: 0 !important;
   box-shadow: none;
   z-index: 100;
@@ -28,20 +26,11 @@
   overflow-y: auto;
 }
 
-.layout-body {
-  min-height: calc(100vh - 84px);
-  padding-left: 200px;
-}
-
-.layout-body--collapsed {
-  padding-left: 56px;
-}
-
 .layout-brand {
   display: flex;
   align-items: center;
   height: 84px;
-  padding: 0;
+  padding: 0 20px;
 
   .layout-brand__logo {
     display: inline-flex;
@@ -68,7 +57,7 @@
   margin: 0 10px 10px;
   padding: 0;
   color: #6f7886;
-  background: #f6f7f9;
+  background: #f5f6f7;
   border: 0;
   border-radius: 8px;
   cursor: pointer;
@@ -253,7 +242,7 @@
 
 .layout-main {
   min-width: 0;
-  background: #f6f7f9;
+  background: #fff;
 }
 
 .layout-header {
@@ -264,16 +253,16 @@
   align-items: center;
   justify-content: space-between;
   height: 84px;
-  padding: 0 32px 0 20px;
+  padding: 0 32px;
   line-height: normal;
-  background: #f6f7f9;
-  border-bottom: 0;
+  background: #fff;
+  border-bottom: 1px solid #1f23290a;
 }
 
 .layout-page-title {
   display: flex;
   align-items: center;
-  height: 60px;
+  height: 56px;
   color: #252b36;
   font-size: 22px;
   font-weight: 600;
@@ -281,7 +270,10 @@
 }
 
 .layout-page-header {
-  min-height: 60px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
 }
 
 .layout-header__actions {
@@ -307,16 +299,31 @@
 .layout-breadcrumb {
   display: flex;
   align-items: center;
-  height: 40px;
-  margin-top: -8px;
+  height: 56px;
+  margin: 0;
   padding: 0;
+
+  a {
+    color: #646a73;
+    font-size: 14px;
+    text-decoration: none;
+
+    &:hover {
+      color: #1f2329;
+    }
+  }
+
+  span {
+    margin-left: 8px;
+    color: #b0b5bd;
+  }
 }
 
 .layout-content {
   min-height: calc(100vh - 84px);
-  margin: 0 32px 40px 20px;
-  padding: 0;
-  background: transparent;
+  margin: 0;
+  padding: 24px 32px 40px;
+  background: #fff;
   border-radius: 0;
   box-shadow: none;
 }
@@ -355,9 +362,9 @@
     margin-top: 16px;
     overflow: hidden;
     background: #fff;
-    border: 1px solid #e7eaee;
-    border-radius: 12px;
-    box-shadow: 0 1px 2px rgb(31 41 55 / 2%);
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
   }
 
   .ant-table,
@@ -377,13 +384,13 @@
     font-size: 13px;
     font-weight: 500;
     background: #f8f9fb !important;
-    border-bottom: 1px solid #edf0f3;
+    border-bottom: 1px solid #1f232926;
   }
 
   .ant-table-tbody > tr > td {
     height: 52px;
     color: #303641;
-    border-bottom: 1px solid #f0f2f4;
+    border-bottom: 1px solid #1f232926;
   }
 
   .ant-table-tbody > tr:nth-child(2n) {