fix css
This commit is contained in:
@@ -21,8 +21,8 @@ import {
|
|||||||
CloudServerOutlined,
|
CloudServerOutlined,
|
||||||
CloudUploadOutlined,
|
CloudUploadOutlined,
|
||||||
HistoryOutlined,
|
HistoryOutlined,
|
||||||
LeftOutlined,
|
MenuFoldOutlined,
|
||||||
RightOutlined,
|
MenuUnfoldOutlined,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import { createStyles } from "antd-style";
|
import { createStyles } from "antd-style";
|
||||||
import zhCN from "antd/locale/zh_CN";
|
import zhCN from "antd/locale/zh_CN";
|
||||||
@@ -136,12 +136,13 @@ const useStyles = createStyles(({ token, css }) => ({
|
|||||||
background: ${token.colorPrimary};
|
background: ${token.colorPrimary};
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
collapseButton: css`
|
siderCloseButton: css`
|
||||||
position: fixed;
|
flex-shrink: 0;
|
||||||
top: 50%;
|
`,
|
||||||
transform: translateY(-50%);
|
headerLeft: css`
|
||||||
z-index: 1000;
|
display: flex;
|
||||||
transition: left 0.2s;
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
`,
|
`,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@@ -217,6 +218,15 @@ const App: React.FC = () => {
|
|||||||
/>
|
/>
|
||||||
<span className={styles.logoText}>Kintone Manager</span>
|
<span className={styles.logoText}>Kintone Manager</span>
|
||||||
</div>
|
</div>
|
||||||
|
<Tooltip title="收起侧边栏" mouseEnterDelay={0.5}>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<MenuFoldOutlined />}
|
||||||
|
onClick={toggleSider}
|
||||||
|
className={styles.siderCloseButton}
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.siderContent}>
|
<div className={styles.siderContent}>
|
||||||
<div
|
<div
|
||||||
@@ -247,35 +257,29 @@ const App: React.FC = () => {
|
|||||||
)}
|
)}
|
||||||
</Sider>
|
</Sider>
|
||||||
|
|
||||||
{/* Collapse/Expand Button */}
|
|
||||||
<div
|
|
||||||
className={styles.collapseButton}
|
|
||||||
style={{ left: siderCollapsed ? 0 : siderWidth }}
|
|
||||||
>
|
|
||||||
<Tooltip title={siderCollapsed ? "展开侧边栏" : "收起侧边栏"}>
|
|
||||||
<Button
|
|
||||||
type="default"
|
|
||||||
icon={siderCollapsed ? <RightOutlined /> : <LeftOutlined />}
|
|
||||||
onClick={toggleSider}
|
|
||||||
style={{
|
|
||||||
borderRadius: "0 4px 4px 0",
|
|
||||||
boxShadow: "2px 0 8px rgba(0,0,0,0.15)",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<Layout
|
<Layout
|
||||||
className={`${styles.mainLayout} ${siderCollapsed ? styles.mainLayoutCollapsed : ""}`}
|
className={`${styles.mainLayout} ${siderCollapsed ? styles.mainLayoutCollapsed : ""}`}
|
||||||
style={{ marginLeft: siderCollapsed ? 0 : siderWidth }}
|
style={{ marginLeft: siderCollapsed ? 0 : siderWidth }}
|
||||||
>
|
>
|
||||||
<Header className={styles.header}>
|
<Header className={styles.header}>
|
||||||
|
<div className={styles.headerLeft}>
|
||||||
|
{siderCollapsed && (
|
||||||
|
<Tooltip title="展开侧边栏" mouseEnterDelay={0.5}>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<MenuUnfoldOutlined />}
|
||||||
|
onClick={toggleSider}
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
<Title level={5} style={{ margin: 0 }}>
|
<Title level={5} style={{ margin: 0 }}>
|
||||||
{currentDomain
|
{currentDomain
|
||||||
? currentDomain.name
|
? currentDomain.name
|
||||||
: "Kintone Customize Manager"}
|
: "Kintone Customize Manager"}
|
||||||
</Title>
|
</Title>
|
||||||
|
</div>
|
||||||
<Space>
|
<Space>
|
||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
|
|||||||
Reference in New Issue
Block a user