Skip to content

C
center-book
提交 6d1921de authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

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

上级 f0d76e9d
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 70 行增加 和 65 行删除
apps/admin/src/components/AppList/AppList.less
浏览文件 @ 6d1921de
......@@ -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
浏览文件 @ 6d1921de
......@@ -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
浏览文件 @ 6d1921de
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
浏览文件 @ 6d1921de
.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) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论