✨ feat: update demo

.umirc.ts

@@ -1,9 +1,11 @@
 import { defineConfig } from 'umi'
 
 export default defineConfig({
-  routes: [
-    { path: '/', component: 'index' },
-    { path: '/docs', component: 'docs' },
-  ],
+  title: 'Template - CanisMinor',
+  favicons: ['https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg'],
+  routes: [{ path: '/', component: 'index' }],
+  define: {
+    'process.env': process.env,
+  },
   npmClient: 'yarn',
 })

README.md

@@ -21,6 +21,25 @@
 
 </div>
 
+<br/>
+
+## ⌨️ Local Development
+
+You can use Gitpod for online development:
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/canisminor1990/canisminor-template)
+
+Or clone it for local development:
+
+```bash
+$ git clone https://github.com/canisminor1990/canisminor-template.git
+$ cd canisminor-template
+$ npm install
+$ npm start
+```
+
+<br/>
+
 <!-- SHIELD LINK GROUP -->
 
 <!-- release -->

src/components/Header/Logo.tsx

@@ -0,0 +1,16 @@
+import { darkLogo, lightLogo } from '@/components/Header/style'
+import { useThemeMode } from 'antd-style'
+import React from 'react'
+
+interface LogoProps {
+  size?: number
+
+  style?: React.CSSProperties
+}
+
+const Logo: React.FC<LogoProps> = ({ size = 20, style }) => {
+  const { isDarkMode } = useThemeMode()
+  return <img src={isDarkMode ? darkLogo : lightLogo} alt="logo" style={{ height: size, ...style }} />
+}
+
+export default React.memo(Logo)

src/components/Header/index.tsx

@@ -0,0 +1,59 @@
+import PackageJson from '@/../package.json'
+import { useAppStore } from '@/store'
+import { GithubOutlined } from '@ant-design/icons'
+import { Button, Dropdown, Space } from 'antd'
+import React, { ReactNode } from 'react'
+import styled from 'styled-components'
+import { shallow } from 'zustand/shallow'
+import Logo from './Logo'
+import { ThemeList, themeIcon } from './style'
+
+/******************************************************
+ *********************** Style *************************
+ ******************************************************/
+const View = styled.div`
+  height: 46px;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: ${({ theme }) => theme.colorBgContainer};
+  border-bottom: 1px solid ${({ theme }) => theme.colorBorderSecondary};
+`
+
+/******************************************************
+ ************************* Dom *************************
+ ******************************************************/
+
+interface HeaderProps {
+  children?: ReactNode
+}
+
+const Header: React.FC<HeaderProps> = ({ children }) => {
+  const [themeMode, onSetThemeMode] = useAppStore((st) => [st.themeMode, st.onSetThemeMode], shallow)
+
+  return (
+    <>
+      <View>
+        <Logo />
+        <Space>
+          {children}
+          <a href={PackageJson.repository.url} target="_blank" rel="noreferrer">
+            <Button icon={<GithubOutlined />} />
+          </a>
+          <Dropdown
+            trigger={['click']}
+            placement="bottomRight"
+            menu={{
+              items: ThemeList({ onSetThemeMode }),
+            }}
+          >
+            <Button icon={themeIcon[themeMode]} />
+          </Dropdown>
+        </Space>
+      </View>
+    </>
+  )
+}
+
+export default React.memo(Header)

src/components/Header/style.tsx

@@ -0,0 +1,34 @@
+import { MenuProps } from 'antd'
+
+export const darkLogo = 'https://gw.alipayobjects.com/zos/bmw-prod/9ecb2822-1592-4cb0-a087-ce0097fef2ca.svg'
+export const lightLogo = 'https://gw.alipayobjects.com/zos/bmw-prod/e146116d-c65a-4306-a3d2-bb8d05e1c49b.svg'
+
+export const themeIcon = {
+  auto: (
+    <span role="img" className="anticon anticon-github">
+      <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor">
+        <path d="M14.595 8a6.595 6.595 0 1 1-13.19 0 6.595 6.595 0 0 1 13.19 0ZM8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm0 2.014v11.972A5.986 5.986 0 0 0 8 2.014Z"></path>
+      </svg>
+    </span>
+  ),
+  light: (
+    <span role="img" className="anticon anticon-github">
+      <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor">
+        <path d="M8 13a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1ZM8 3a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v1a1 1 0 0 1-1 1Zm7 4a1 1 0 1 1 0 2h-1a1 1 0 1 1 0-2h1ZM3 8a1 1 0 0 1-1 1H1a1 1 0 1 1 0-2h1a1 1 0 0 1 1 1Zm9.95 3.536.707.707a1 1 0 0 1-1.414 1.414l-.707-.707a1 1 0 0 1 1.414-1.414Zm-9.9-7.072-.707-.707a1 1 0 0 1 1.414-1.414l.707.707A1 1 0 0 1 3.05 4.464Zm9.9 0a1 1 0 0 1-1.414-1.414l.707-.707a1 1 0 0 1 1.414 1.414l-.707.707Zm-9.9 7.072a1 1 0 0 1 1.414 1.414l-.707.707a1 1 0 0 1-1.414-1.414l.707-.707ZM8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 6.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"></path>
+      </svg>
+    </span>
+  ),
+  dark: (
+    <span role="img" className="anticon anticon-github">
+      <svg viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor">
+        <path d="M8.218 1.455c3.527.109 6.327 3.018 6.327 6.545 0 3.6-2.945 6.545-6.545 6.545a6.562 6.562 0 0 1-6.036-4h.218c3.6 0 6.545-2.945 6.545-6.545 0-.91-.182-1.745-.509-2.545m0-1.455c-.473 0-.909.218-1.2.618-.29.4-.327.946-.145 1.382.254.655.4 1.31.4 2 0 2.8-2.291 5.09-5.091 5.09h-.218c-.473 0-.91.22-1.2.62-.291.4-.328.945-.146 1.38C1.891 14.074 4.764 16 8 16c4.4 0 8-3.6 8-8a7.972 7.972 0 0 0-7.745-8h-.037Z"></path>
+      </svg>
+    </span>
+  ),
+}
+
+export const ThemeList = ({ onSetThemeMode }: any): MenuProps['items'] => [
+  { icon: themeIcon.auto, label: 'Auto', key: 'auto', onClick: () => onSetThemeMode('auto') },
+  { icon: themeIcon.light, label: 'Light', key: 'light', onClick: () => onSetThemeMode('light') },
+  { icon: themeIcon.dark, label: 'Dark', key: 'dark', onClick: () => onSetThemeMode('dark') },
+]

src/components/index.ts

@@ -0,0 +1 @@
+export { default as Header } from './Header'

src/layouts/GlobalStyle.ts

@@ -0,0 +1,12 @@
+import { createGlobalStyle } from 'antd-style'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    font-family: ${({ theme }) => theme.fontFamily};
+    font-size: ${({ theme }) => theme.fontSize};
+    color: ${({ theme }) => theme.colorTextBase};
+    background: ${({ theme }) => theme.colorBgBase};
+  }
+`
+
+export default GlobalStyle

src/layouts/index.tsx

@@ -1,21 +1,50 @@
-import { Link, Outlet } from 'umi'
-import styles from './index.less'
+import { Header } from '@/components'
+import { useAppStore } from '@/store'
+import { ThemeProvider, setupStyled } from 'antd-style'
+import 'antd/dist/reset.css'
+import styled, { ThemeContext } from 'styled-components'
+import { Outlet } from 'umi'
+import { shallow } from 'zustand/shallow'
+import GlobalStyle from './GlobalStyle'
 
-export default function Layout() {
+/******************************************************
+ *********************** Style *************************
+ ******************************************************/
+
+const View = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  position: relative;
+`
+
+const Content = styled.div`
+  width: 100vw;
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+`
+
+/******************************************************
+ ************************* Dom *************************
+ ******************************************************/
+
+const Layout: React.FC = () => {
+  const [themeMode] = useAppStore((st) => [st.themeMode], shallow)
+  setupStyled({ ThemeContext })
   return (
-    <div className={styles.navs}>
-      <ul>
-        <li>
-          <Link to="/">Home</Link>
-        </li>
-        <li>
-          <Link to="/docs">Docs</Link>
-        </li>
-        <li>
-          <a href="https://github.com/umijs/umi">Github</a>
-        </li>
-      </ul>
-      <Outlet />
-    </div>
+    <ThemeProvider themeMode={themeMode}>
+      <GlobalStyle />
+      <View>
+        <Header />
+        <Content>
+          <Outlet />
+        </Content>
+      </View>
+    </ThemeProvider>
   )
 }
+
+export default Layout

src/pages/App.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+const App: React.FC = () => {
+  return <div>CanisMinor Template</div>
+}
+
+export default App

src/pages/index.tsx

@@ -1,15 +1,5 @@
-import yayJpg from '../assets/yay.jpg'
+import App from './App'
 
-export default function HomePage() {
-  return (
-    <div>
-      <h2>Yay! Welcome to umi!</h2>
-      <p>
-        <img src={yayJpg} width="388" />
-      </p>
-      <p>
-        To get started, edit <code>pages/index.tsx</code> and save to reload.
-      </p>
-    </div>
-  )
+export default () => {
+  return <App />
 }

src/store/index.tsx

@@ -0,0 +1,17 @@
+import { ThemeMode } from 'antd-style'
+import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
+
+export interface AppState {
+  themeMode: ThemeMode
+  onSetThemeMode: (themeMode: ThemeMode) => void
+}
+
+export const useAppStore = create<AppState>()(
+  devtools((set) => ({
+    themeMode: 'auto',
+    onSetThemeMode: (themeMode) => {
+      set(() => ({ themeMode }), false, 'onSetThemeMode')
+    },
+  }))
+)

src/types/index.d.ts

@@ -0,0 +1,6 @@
+import { Theme as AntdStyleTheme } from 'antd-style'
+
+declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends AntdStyleTheme {}
+}

tsconfig.json

@@ -1,24 +1,3 @@
 {
-  "extends": "./src/.umi-production/tsconfig.json",
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
+  "extends": "./src/.umi-production/tsconfig.json"
 }