alitajs · xiaohuoni · Jun 15, 2022 · Jun 15, 2022 · Jun 15, 2022
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -14,5 +14,5 @@
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always"
   },
-  "ignore": ["@examples/boilerplate"]
+  "ignore": ["@examples/boilerplate", "@examples/tabs"]
 }
diff --git a/.changeset/friendly-cups-reflect.md b/.changeset/friendly-cups-reflect.md
@@ -0,0 +1,6 @@
+---
+'alita': patch
+'@alita/plugins': patch
+---
+
+feat: add tabs layout
diff --git a/examples/tabs/.gitignore b/examples/tabs/.gitignore
@@ -0,0 +1,7 @@
+/.env.local
+/.umirc.local.ts
+/.umirc.local.js
+/config/config.local.ts
+/config/config.local.js
+/src/.umi
+/.umi
diff --git a/examples/tabs/.umirc.ts b/examples/tabs/.umirc.ts
@@ -0,0 +1,12 @@
+export default {
+  appType: 'pc',
+  keepalive: [/users/, /foo/],
+  aconsole: {
+    console: {},
+    inspx: {},
+  },
+  mfsu: {},
+  antd: {},
+  hash: false,
+  tabsLayout: {},
+};
diff --git a/examples/tabs/mock/app.ts b/examples/tabs/mock/app.ts
@@ -0,0 +1,5 @@
+export default {
+  '/api/hello': {
+    text: 'Alita',
+  },
+};
diff --git a/examples/tabs/package.json b/examples/tabs/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@examples/tabs",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "alita dev",
+    "build": "ANALYZE=1 alita build",
+    "plugin": "alita plugin list"
+  },
+  "dependencies": {
+    "@alita/flow": "workspace:*",
+    "@ant-design/icons": "^4.7.0",
+    "alita": "workspace:*",
+    "antd": "^4.21.2"
+  }
+}
diff --git a/examples/tabs/plugin.ts b/examples/tabs/plugin.ts
@@ -0,0 +1,12 @@
+import { IApi } from 'umi';
+
+export default (api: IApi) => {
+  api.onDevCompileDone((opts) => {
+    opts;
+    // console.log('> onDevCompileDone', opts.isFirstCompile);
+  });
+  api.onBuildComplete((opts) => {
+    opts;
+    // console.log('> onBuildComplete', opts.isFirstCompile);
+  });
+};
diff --git a/examples/tabs/src/app.tsx b/examples/tabs/src/app.tsx
@@ -0,0 +1,29 @@
+export const request = {
+  prefix: '/api',
+  method: 'get',
+  errorHandler: (error) => {
+    // 集中处理错误
+    console.log(11111111);
+    console.log(error);
+  },
+};
+
+export const tabsLayout = {
+  local: {
+    '/': '首页',
+    '/users': '用户',
+    '/foo': '其他',
+  },
+};
+
+// async function delay(ms: number) {
+//   return new Promise((resolve) => setTimeout(resolve, ms));
+// }
+// export async function tabsLayout() {
+//   await delay(500);
+//   return {local:{
+//     '/':'首页',
+//     '/users':'用户',
+//     '/foo':'其他'
+//   }};
+// }
diff --git a/examples/tabs/src/assets/logo.png b/examples/tabs/src/assets/logo.png
diff --git a/examples/tabs/src/global.less b/examples/tabs/src/global.less
@@ -0,0 +1,4 @@
+.rumtime-keep-alive-layout > .ant-tabs-card .ant-tabs-tab-active {
+  background: #fff;
+  border-color: #fff;
+}
diff --git a/examples/tabs/src/layouts/index.tsx b/examples/tabs/src/layouts/index.tsx
@@ -0,0 +1,81 @@
+import {
+  DesktopOutlined,
+  PieChartOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
+import { useKeepOutlets, useLocation, useNavigate } from 'alita';
+import type { MenuProps } from 'antd';
+import { Layout, Menu } from 'antd';
+import React, { useState } from 'react';
+
+const { Header, Content, Footer, Sider } = Layout;
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+  } as MenuItem;
+}
+
+const items: MenuItem[] = [
+  getItem('首页', '/', <PieChartOutlined />),
+  getItem('用户', '/users', <UserOutlined />),
+  getItem('其他', '/foo', <DesktopOutlined />),
+];
+
+const App: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(false);
+  const element = useKeepOutlets();
+  const navigate = useNavigate();
+  const location = useLocation();
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider
+        collapsible
+        collapsed={collapsed}
+         => setCollapsed(value)}
+      >
+        <div
+          style={{
+            height: '32px',
+            margin: '16px',
+            color: '#fff',
+            textAlign: 'center',
+            fontSize: '16px',
+          }}
+        >
+          Umi 4
+        </div>
+        <Menu
+           => {
+            navigate(e?.key);
+          }}
+          theme="dark"
+          defaultSelectedKeys={[location.pathname]}
+          mode="inline"
+          items={items}
+        />
+      </Sider>
+      <Layout>
+        <Header style={{ padding: 0 }} />
+        <Content style={{ margin: '0 16px' }}>
+          <div style={{ padding: 24, minHeight: 360 }}>{element}</div>
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>
+          Umi@4 实战小册 Created by xiaohuoni
+        </Footer>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default App;
diff --git a/examples/tabs/src/pages/foo/index.tsx b/examples/tabs/src/pages/foo/index.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <h2>user: Foo</h2>;
diff --git a/examples/tabs/src/pages/index.less b/examples/tabs/src/pages/index.less
@@ -0,0 +1,6 @@
+.title {
+  font-size: 30px;
+}
+.adm-button{
+  font-size: 30px
+}
diff --git a/examples/tabs/src/pages/index.tsx b/examples/tabs/src/pages/index.tsx
@@ -0,0 +1,13 @@
+import { history } from 'alita';
+import React from 'react';
+import styles from './index.less';
+export default () => (
+  <div
+    className={styles['adm-button']}
+     => {
+      history.push('/users');
+    }}
+  >
+    Hello Alita
+  </div>
+);
diff --git a/examples/tabs/src/pages/users/index.tsx b/examples/tabs/src/pages/users/index.tsx
@@ -0,0 +1,36 @@
+import { KeepAliveContext } from '@@/plugin-keepalive';
+import { history, Outlet, useLocation } from 'alita';
+import { Button } from 'antd';
+import React, { useState } from 'react';
+
+export default () => {
+  const [count, setCount] = useState(0);
+  const location = useLocation();
+  const { dropByCacheKey } = React.useContext<any>(KeepAliveContext);
+  return (
+    <div>
+      <h2>users layout</h2>
+      <h3>当前页面状态被设置成自动保存</h3>
+      <h3>当前计数是：{count}</h3>
+      <Button
+        color="primary"
+        block
+        size="large"
+         => setCount(count + 1)}
+      >
+        点我计数加1
+      </Button>
+      <h3
+         => {
+          history.push('/');
+        }}
+      >
+        点我返回首页，记得回来看当前页面状态有没有被保存哦
+      </h3>
+      <Outlet />
+      <Button  => dropByCacheKey(location.pathname)}>
+        清除当前页面缓存
+      </Button>
+    </div>
+  );
+};
diff --git a/examples/tabs/src/services/api.ts b/examples/tabs/src/services/api.ts
@@ -0,0 +1,5 @@
+import { request } from '@@/plugin-request';
+
+export async function query(): Promise<any> {
+  return request('/hello');
+}
diff --git a/examples/tabs/tsconfig.json b/examples/tabs/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "dist",
+    "sourceMap": true,
+    "jsx": "react",
+    "declaration": false,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "es2017",
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2018", "dom"],
+    "allowSyntheticDefaultImports": true,
+    "rootDirs": ["/src", "/test", "/mock", "./typings"],
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "allowJs": true,
+    "strict": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@@/*": ["./src/.umi/*"],
+      "alita": ["./src/.umi/*"]
+    }
+  }
+}
diff --git a/examples/tabs/typings.d.ts b/examples/tabs/typings.d.ts
@@ -0,0 +1,13 @@
+declare module '*.css';
+    declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.svg';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.bmp';
+declare module '*.tiff';
+declare module '*.json';
+
diff --git a/packages/alita/assets/bundle-status.html b/packages/alita/assets/bundle-status.html
diff --git a/packages/alita/src/preset.ts b/packages/alita/src/preset.ts
@@ -13,6 +13,7 @@ export default (api: IApi) => {
     require.resolve('./commands/generate/pages'),
     require.resolve('@alita/plugins/dist/aconsole'),
     require.resolve('@alita/plugins/dist/keepalive'),
+    require.resolve('@alita/plugins/dist/tabs-layout'),
     require.resolve('@alita/plugins/dist/mainpath'),
     require.resolve('@alita/plugins/dist/request'),
     require.resolve('@alita/plugins/dist/dva'),
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import React from 'react';

		export default () => <h2>user: Foo</h2>;