feat: 日志管理界面按钮优化
parent
11b726017d
commit
95f7f766c5
|
|
@ -0,0 +1,55 @@
|
||||||
|
.logs-tabs {
|
||||||
|
padding: 12px 24px 0;
|
||||||
|
|
||||||
|
.ant-tabs-nav {
|
||||||
|
margin: 0 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tabs-nav::before,
|
||||||
|
.ant-tabs-ink-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tabs-nav-list {
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tabs-tab {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tabs-tab + .ant-tabs-tab {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logs-tab-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 86px;
|
||||||
|
height: 34px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border: 1px solid #d9e6ff;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff;
|
||||||
|
color: rgba(0, 0, 0, 0.72);
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1;
|
||||||
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||||
|
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tabs-tab:hover .logs-tab-button {
|
||||||
|
color: var(--app-primary-color, #1677ff);
|
||||||
|
border-color: #91caff;
|
||||||
|
background: rgba(22, 119, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tabs-tab-active .logs-tab-button {
|
||||||
|
color: var(--app-primary-color, #1677ff);
|
||||||
|
border-color: var(--app-primary-color, #1677ff);
|
||||||
|
background: rgba(22, 119, 255, 0.08);
|
||||||
|
box-shadow: 0 6px 16px rgba(22, 119, 255, 0.14);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -9,6 +9,7 @@ import PageContainer from "@/components/shared/PageContainer";
|
||||||
import ListTable from "@/components/shared/ListTable/ListTable";
|
import ListTable from "@/components/shared/ListTable/ListTable";
|
||||||
import AppPagination from "@/components/shared/AppPagination";
|
import AppPagination from "@/components/shared/AppPagination";
|
||||||
import type { SysLog, UserProfile } from "@/types";
|
import type { SysLog, UserProfile } from "@/types";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
const { RangePicker } = DatePicker;
|
const { RangePicker } = DatePicker;
|
||||||
const { Text } = Typography;
|
const { Text } = Typography;
|
||||||
|
|
@ -61,6 +62,13 @@ export default function Logs() {
|
||||||
return activeTab === "OPERATION" ? t("logs.opLog") : t("logs.loginLog");
|
return activeTab === "OPERATION" ? t("logs.opLog") : t("logs.loginLog");
|
||||||
}, [activeTab, logTypeDict, t]);
|
}, [activeTab, logTypeDict, t]);
|
||||||
|
|
||||||
|
const renderLogTab = (type: string, label: string) => (
|
||||||
|
<span className="logs-tab-button">
|
||||||
|
{type === "OPERATION" ? <InfoCircleOutlined aria-hidden="true" /> : <UserOutlined aria-hidden="true" />}
|
||||||
|
<span>{label}</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
|
||||||
const loadData = async (currentParams = params) => {
|
const loadData = async (currentParams = params) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
|
|
@ -328,6 +336,7 @@ export default function Logs() {
|
||||||
>
|
>
|
||||||
<Card className="app-page__content-card" style={{ flex: 1, minHeight: 0 }} styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}>
|
<Card className="app-page__content-card" style={{ flex: 1, minHeight: 0 }} styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}>
|
||||||
<Tabs
|
<Tabs
|
||||||
|
className="logs-tabs"
|
||||||
activeKey={activeTab}
|
activeKey={activeTab}
|
||||||
onChange={(key) => { setActiveTab(key); setParams((prev) => ({ ...prev, current: 1, moduleName: "" })); }}
|
onChange={(key) => { setActiveTab(key); setParams((prev) => ({ ...prev, current: 1, moduleName: "" })); }}
|
||||||
size="large"
|
size="large"
|
||||||
|
|
@ -347,8 +356,8 @@ export default function Logs() {
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{logTypeDict.length > 0
|
{logTypeDict.length > 0
|
||||||
? logTypeDict.map((item) => <Tabs.TabPane tab={<span>{item.itemValue === "OPERATION" ? <InfoCircleOutlined aria-hidden="true" /> : <UserOutlined aria-hidden="true" />}{item.itemLabel}</span>} key={item.itemValue} />)
|
? logTypeDict.map((item) => <Tabs.TabPane tab={renderLogTab(item.itemValue, item.itemLabel)} key={item.itemValue} />)
|
||||||
: <><Tabs.TabPane tab={<span><InfoCircleOutlined aria-hidden="true" />{t("logs.opLog")}</span>} key="OPERATION" /><Tabs.TabPane tab={<span><UserOutlined aria-hidden="true" />{t("logs.loginLog")}</span>} key="LOGIN" /></>}
|
: <><Tabs.TabPane tab={renderLogTab("OPERATION", t("logs.opLog"))} key="OPERATION" /><Tabs.TabPane tab={renderLogTab("LOGIN", t("logs.loginLog"))} key="LOGIN" /></>}
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
<div className="app-page__table-wrap" style={{flex: 1, minHeight: 0, overflow: "hidden", padding: "0 24px"}}>
|
<div className="app-page__table-wrap" style={{flex: 1, minHeight: 0, overflow: "hidden", padding: "0 24px"}}>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue