diff --git a/src/layouts/Index.tsx b/src/layouts/Index.tsx
deleted file mode 100644
index 79be5cc..0000000
--- a/src/layouts/Index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-// import Header from './Header';
-import { Layout, Breadcrumb } from 'antd';
-const { Header, Footer, Sider, Content } = Layout;
-//导入logo图片
-import HeaderComponent from './Header';
-import SiderMenu from './SiderMenu';
-import './layout.less';
-const LayoutIndex: React.FC = (props) => {
- const { children } = props;
- return (
- <>
-
-
-
-
-
-
-
-
- Home
- List
- App
-
- {children}
-
-
-
-
- );
-};
-export default LayoutIndex;
diff --git a/src/layouts/SiderMenu.tsx b/src/layouts/SiderMenu.tsx
deleted file mode 100644
index d7f8f36..0000000
--- a/src/layouts/SiderMenu.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Menu } from 'antd';
-import { useIntl, Link, useHistory } from 'umi';
-import IconFont from '@/components/IconFont/IconFont';
-interface IMenuItem {
- label: string;
- key: string;
- path?: string;
- icon: string;
- children?: IMenuItem[];
-}
-// 引入样式文件 useIntl().formatMessage({ id: 'menu.首页' }),
-const items: IMenuItem[] = [
- {
- label: 'menu.首页',
- key: 'index',
- path: '/index',
- icon: 'icon-shouye',
- },
- {
- label: 'menu.管理员管理',
- key: 'userManage',
- path: '/userManage',
- icon: 'icon-guanliyuan',
- },
- {
- label: 'menu.下载中心管理',
- key: 'downloadManage',
- path: '/downloadManage',
- icon: 'icon-Tab_xiazaizhongxin',
- },
- {
- label: 'menu.通知中心管理',
- key: 'noticeManage',
- path: '/noticeManage',
- icon: 'icon-tongzhizhongxin',
- },
- {
- label: 'menu.政策法规管理',
- key: 'policyManage',
- path: '/policyManage',
- icon: 'icon-zhengcefagui',
- },
- {
- label: 'menu.关于我们管理',
- key: 'aboutManage',
- path: '/aboutManage',
- icon: 'icon-guanyuwomen',
- },
- {
- label: 'menu.帮助中心管理',
- key: 'helpManage',
- path: '/helpManage',
- icon: 'icon-bangzhuzhongxin'
- },
- {
- label: 'menu.用户提问管理',
- key: 'userQuestionManage',
- icon: 'icon-yonghutiwen',
- path: '/userQuestionManage',
- children: [
- {
- label: 'menu.已阅问题',
- key: 'readQuestionManage',
- icon: 'icon-yiyue',
- path: '/readQuestionManage',
- },
- {
- label: 'menu.未阅问题',
- key: 'unreadQuestionManage',
- icon: 'icon-weiyuedu',
- path: '/unreadQuestionManage',
- },
- ],
- },
- {
- label: 'menu.友情链接管理',
- key: 'friendLinkManage',
- icon: 'icon-youqinglianjie',
- children: [
- {
- label: 'menu.友情链接分类',
- key: 'friendLinkCategory',
- icon: 'icon-fenlei',
- path: '/friendLinkCategory',
- },
- {
- label: 'menu.友情链接列表',
- key: 'friendLinkList',
- icon: 'icon-liebiaomoshi',
- path: '/friendLinkManage',
- },
- ],
- },
-];
-
-const SiderMenu: React.FC = (props) => {
- //当前激活菜单
- const [current, setCurrent] = useState('index');
- const intl = useIntl();
- const history = useHistory();
- useEffect(() => {
- // 获取当前激活菜单
- const path = history.location.pathname;
- const menu = items.find((item) => item.path === path);
- if (menu) {
- setCurrent(menu.key);
- } else {
- // 如果跳转的详情页面获取根级激活菜单
- const rootActiveMenu = path.split('/')[1];
- setCurrent(rootActiveMenu);
- }
- }, [history.location.pathname]);
- return (
-
-
-
- );
-};
-export default SiderMenu;
diff --git a/src/layouts/User.tsx b/src/layouts/User.tsx
index 43f1c27..6ebc08c 100644
--- a/src/layouts/User.tsx
+++ b/src/layouts/User.tsx
@@ -4,7 +4,7 @@ const User: React.FC = (props) => {
const intl = useIntl();
return (
- {intl.formatMessage({ id: '登录/注册' })}
+ {intl.formatMessage({ id: '登录' })}
);
};
diff --git a/src/layouts/layout.less b/src/layouts/layout.less
index 3b7abb9..ca4deab 100644
--- a/src/layouts/layout.less
+++ b/src/layouts/layout.less
@@ -20,8 +20,32 @@
align-items: center;
}
.layout-content {
- background: rgb(245,246,250);
+ background: rgb(245, 246, 250);
padding: 0 15px;
height: calc(100vh - 64px);
overflow: auto;
}
+.ant-page-header.has-footer{
+ padding-top: 0 !important;
+}
+.custom-tab-bar {
+ margin-bottom: 10px !important;
+ .ant-tabs-tab {
+ border-radius: 5px !important;
+ font-size: 13px !important;
+ padding: 6px 10px !important;
+ .ant-tabs-tab-remove{
+ margin-left: 0 !important;
+ font-size: 10px !important;
+ }
+ &.ant-tabs-tab-active{
+ background-color: @main-color !important;
+ .ant-tabs-tab-btn{
+ color: #fff !important;
+ }
+ .ant-tabs-tab-remove{
+ color: #fff !important;
+ }
+ }
+ }
+}
diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts
index af39d55..2df2b39 100644
--- a/src/locales/en-US/common.ts
+++ b/src/locales/en-US/common.ts
@@ -40,7 +40,7 @@ export default {
"采购失败(流标)公告": "Failed Procurement Announcement",
"加载更多": "Load More",
"登录/注册": "Login/Register",
-
+ "登录": "Login",
// Buttons
"common.confirm": "Confirm",
"common.cancel": "Cancel",
diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts
index 0854aaf..1dec7c2 100644
--- a/src/locales/zh-CN/common.ts
+++ b/src/locales/zh-CN/common.ts
@@ -40,6 +40,7 @@ export default {
"采购失败(流标)公告": "采购失败(流标)公告",
"加载更多": "加载更多",
"登录/注册": "登录/注册",
+ "登录": "登录",
// 按钮
"common.confirm": "确定",
diff --git a/src/models/breadcrumb.ts b/src/models/breadcrumb.ts
new file mode 100644
index 0000000..de2d704
--- /dev/null
+++ b/src/models/breadcrumb.ts
@@ -0,0 +1,60 @@
+
+type Effect = (action: { payload: any }, effects: { call: any; put: any; select: any }) => Generator
;
+type Reducer = (state: S, action: { payload: any }) => S;
+
+export interface BreadcrumbState {
+ breadcrumbName: string | null;
+}
+
+export interface BreadcrumbModelType {
+ namespace: 'breadcrumb';
+ state: BreadcrumbState;
+ effects: {
+ updateBreadcrumbName: Effect;
+ resetBreadcrumb: Effect;
+ };
+ reducers: {
+ setBreadcrumbName: Reducer;
+ resetState: Reducer;
+ };
+}
+
+const BreadcrumbModel: BreadcrumbModelType = {
+ namespace: 'breadcrumb',
+
+ state: {
+ breadcrumbName: null,
+ },
+
+ effects: {
+ *updateBreadcrumbName({ payload }, { put }) {
+ yield put({
+ type: 'setBreadcrumbName',
+ payload,
+ });
+ },
+
+ *resetBreadcrumb(_, { put }) {
+ yield put({
+ type: 'resetState',
+ });
+ },
+ },
+
+ reducers: {
+ setBreadcrumbName(state: BreadcrumbState, { payload }: { payload: string }) {
+ return {
+ ...state,
+ breadcrumbName: payload,
+ };
+ },
+
+ resetState() {
+ return {
+ breadcrumbName: null,
+ };
+ },
+ },
+};
+
+export default BreadcrumbModel;
\ No newline at end of file
diff --git a/src/models/index.ts b/src/models/index.ts
new file mode 100644
index 0000000..e774b71
--- /dev/null
+++ b/src/models/index.ts
@@ -0,0 +1,6 @@
+import breadcrumb from './breadcrumb';
+
+export default {
+ breadcrumb,
+ // ... 其他 models
+};
diff --git a/src/models/tab.ts b/src/models/tab.ts
new file mode 100644
index 0000000..8105cc8
--- /dev/null
+++ b/src/models/tab.ts
@@ -0,0 +1,180 @@
+import { Effect, Reducer, Subscription } from 'umi';
+import { history } from 'umi';
+import routes from '../../config/router.config';
+
+export interface TabItem {
+ tab: string;
+ key: string;
+ path: string;
+ closable: boolean;
+}
+
+export interface TabModelState {
+ tabList: TabItem[];
+ activeKey: string;
+}
+
+export interface TabModelType {
+ namespace: 'tab';
+ state: TabModelState;
+ effects: {
+ addTab: Effect;
+ closeTab: Effect;
+ switchTab: Effect;
+ };
+ reducers: {
+ updateState: Reducer;
+ };
+ subscriptions: {
+ setup: Subscription;
+ };
+}
+
+// 递归查找路由
+const findRouteByPath = (path: string, routeData: any[]): any => {
+ let result = null;
+ for (const route of routeData) {
+ if (route.path === path) {
+ result = route;
+ break;
+ }
+ if (route.routes) {
+ const subResult = findRouteByPath(path, route.routes);
+ if (subResult) {
+ result = subResult;
+ break;
+ }
+ }
+ }
+ return result;
+};
+
+const TabModel: TabModelType = {
+ namespace: 'tab',
+
+ state: {
+ tabList: [],
+ activeKey: '/',
+ },
+
+ effects: {
+ *addTab({ payload }, { call, put, select }) {
+ const { tabList } = yield select((state: any) => state.tab);
+ const { path, tab, key } = payload;
+
+ // 检查tab是否已存在
+ const isExist = tabList.find((item: TabItem) => item.key === key);
+
+ if (!isExist) {
+ // 添加新tab
+ yield put({
+ type: 'updateState',
+ payload: {
+ tabList: [...tabList, { tab, key, path, closable: true }],
+ activeKey: key,
+ },
+ });
+ } else {
+ // 切换到已有tab
+ yield put({
+ type: 'updateState',
+ payload: {
+ activeKey: key,
+ },
+ });
+ }
+ },
+
+ *closeTab({ payload }, { call, put, select }) {
+ const { key } = payload;
+ const { tabList, activeKey } = yield select((state: any) => state.tab);
+
+ // 过滤掉要关闭的tab
+ const newTabList = tabList.filter((item: TabItem) => item.key !== key);
+
+ // 如果关闭的是当前激活的tab，则切换到前一个tab
+ let newActiveKey = activeKey;
+ if (key === activeKey) {
+ const index = tabList.findIndex((item: TabItem) => item.key === key);
+ newActiveKey = index === 0 ? (newTabList[0] || {}).key : tabList[index - 1].key;
+
+ // 切换路由
+ const targetTab = newTabList.find((item: TabItem) => item.key === newActiveKey);
+ if (targetTab) {
+ history.push(targetTab.path);
+ }
+ }
+
+ yield put({
+ type: 'updateState',
+ payload: {
+ tabList: newTabList,
+ activeKey: newActiveKey,
+ },
+ });
+ },
+
+ *switchTab({ payload }, { call, put, select }) {
+ const { key } = payload;
+ const { tabList } = yield select((state: any) => state.tab);
+
+ // 找到目标tab并跳转
+ const targetTab = tabList.find((item: TabItem) => item.key === key);
+ if (targetTab) {
+ history.push(targetTab.path);
+ }
+
+ yield put({
+ type: 'updateState',
+ payload: {
+ activeKey: key,
+ },
+ });
+ }
+ },
+
+ reducers: {
+ updateState(state, { payload }) {
+ return {
+ ...state,
+ ...payload,
+ };
+ },
+ },
+
+ subscriptions: {
+ setup({ dispatch }) {
+ return history.listen((location) => {
+ const { pathname } = location;
+
+ // 首页不做特殊处理
+ if (pathname === '/') {
+ dispatch({
+ type: 'updateState',
+ payload: {
+ activeKey: '/',
+ },
+ });
+ return;
+ }
+
+ // 查找当前路由对应的菜单项
+ const currentRoute = findRouteByPath(pathname, routes);
+
+ if (currentRoute) {
+ // 如果找到对应路由，添加或激活对应的tab
+ dispatch({
+ type: 'addTab',
+ payload: {
+ path: pathname,
+ key: pathname,
+ tab: currentRoute.name || '未命名页面',
+ },
+ });
+ }
+ });
+ },
+ },
+};
+
+export default TabModel;