zt-admin-template 1.0.0

package/template/src/components/MainLayout.tsx

@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+import { Layout, Menu, Breadcrumb, theme } from 'antd';
+import {
+  PieChartOutlined,
+  UserOutlined,
+  BookOutlined,
+  PictureOutlined,
+} from '@ant-design/icons';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
+import type { MenuProps } from 'antd';
+import { usePermission } from '../hooks/usePermission';
+
+const { Header, Content, Footer, Sider } = Layout;
+
+
+const items: any[] = [
+  {
+    key: "/",
+    icon: <PieChartOutlined />,
+    label: "Dashboard",
+    permission: "admin"
+  },
+  {
+    key: "system",
+    label: "系统管理",
+    icon: <UserOutlined />,
+    permission: "admin",
+    children: [
+      {
+        label: "用户管理",
+        key: "/system/user",
+        permission: "admin",
+      },
+      {
+        label: "角色管理",
+        key: "/system/role",
+        permission: "admin",
+      },
+      {
+        label: "菜单管理",
+        key: "/system/menu",
+        permission: "admin",
+      }
+    ]
+  },
+  {
+    key: "course",
+    label: "课程管理",
+    icon: <BookOutlined />,
+    permission: "admin",
+    children: [
+      {
+        label: "添加课程",
+        key: "/course/add",
+        permission: "admin",
+      },
+      {
+        label: "课程列表",
+        key: "/course/list",
+        permission: "admin",
+      }
+    ]
+  },
+  {
+    key: "banner",
+    label: "Banner管理",
+    icon: <PictureOutlined />,
+    permission: "admin",
+    children: [
+      {
+        label: "Banner列表",
+        key: "/banner/list",
+        permission: "admin",
+      }
+    ]
+  }
+];
+
+// 过滤用户拥有的菜单
+
+
+const MainLayout: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(false);
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
+    if (key.startsWith('/')) {
+      navigate(key);
+    }
+  };
+
+
+
+  //2. 从所有菜单中过滤出当前用户能看到的
+  const { filterMenu } = usePermission()
+  const visibleMenus = filterMenu(items);  
+  console.log(visibleMenus);
+  
+  console.log("--------------");
+
+
+
+  return (
+    <Layout
+      style={{
+        minWidth: "100vw",
+        minHeight: '100vh',
+      }}
+    >
+      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
+        <div className="demo-logo-vertical" style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
+        <Menu
+          theme="dark"
+          defaultSelectedKeys={['/']}
+          selectedKeys={[location.pathname]}
+          mode="inline"
+          items={visibleMenus}
+          onClick={handleMenuClick}
+        />
+      </Sider>
+      <Layout>
+        <Header
+          style={{
+            padding: 0,
+            background: colorBgContainer,
+          }}
+        />
+        <Content
+          style={{
+            margin: '0 16px',
+          }}
+        >
+          <Breadcrumb
+            style={{
+              margin: '16px 0',
+            }}
+            items={[
+              { title: 'User' },
+              { title: 'Bill' },
+            ]}
+          />
+          <div
+            style={{
+              padding: 24,
+              minHeight: 360,
+              background: colorBgContainer,
+              borderRadius: borderRadiusLG,
+            }}
+          >
+            <Outlet />
+          </div>
+        </Content>
+        <Footer
+          style={{
+            textAlign: 'center',
+          }}
+        >
+          Ant Design ©{new Date().getFullYear()} Created by Ant UED
+        </Footer>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default MainLayout;

package/template/src/components/SunZi.tsx

@@ -0,0 +1,13 @@
+import { useTheme } from '../contexts/ThemeContext'
+
+export default function SunZi() {
+
+const {theme, toggleTheme} = useTheme()
+
+  return (
+    <div>
+    孙子组件：{theme} 
+    <button onClick={toggleTheme} style={{ marginLeft: '10px' }}>切换主题</button>
+    </div>
+  )
+}

package/template/src/contexts/ThemeContext.tsx

@@ -0,0 +1,33 @@
+import { createContext, useContext, useState, ReactNode } from "react";
+
+interface ThemeContextType {
+    theme: string;
+    toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType>({
+    theme: "light",
+    toggleTheme: () => { }
+})
+
+interface ThemeProviderProps {
+    children: ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+    const [theme, setTheme] = useState<string>("light");
+
+    const toggleTheme = () => {
+        setTheme(prev => prev === "light" ? "dark" : "light");
+    }
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+export function useTheme(){
+    return useContext(ThemeContext)
+}

package/template/src/hooks/usePermission.tsx

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { AuthRouteConfig, PermissionCode, UserPermission } from "../types/permission";
+
+
+export const PermissionContext = createContext<UserPermission | null>(null);
+
+// 导出一个权限Provider，通过这个Provider给后代组件传递数据
+export const PermissionProvider: React.FC<{
+    children: React.ReactNode,
+    permission: UserPermission
+}> = ({ children, permission }) => {
+    return (
+        <PermissionContext.Provider value={permission}>
+            {children}
+        </PermissionContext.Provider>
+    );
+}
+
+// 封装一个权限校验的hook
+export const usePermission = () => {
+    //1. 先取出用户拥有的权限列表
+    const context = useContext(PermissionContext);
+
+    //2. 封装权限校验的函数
+    const hasPermission = (code: PermissionCode) => {
+        return context?.permissions.includes(code)
+    }
+
+    //3. 过滤带权限的菜单
+    const filterMenu = useMemo(() => {
+        const filter = (menus: any[]) => {
+            // 遍历所有的菜单
+            return menus.filter((menu: AuthRouteConfig) => {
+                // 如果菜单是隐藏的，就不显示
+                if (menu.hidden) return false;
+
+                if (!menu.permission) return true;
+
+                // 执行到这里，说明有权限标识符,判断一下是否有权限
+                const hasMenuPermission = hasPermission(menu.permission)
+                
+                // 还需要递归遍历子菜单
+                if (menu.children && menu.children.length > 0) {
+                    menu.children = filter(menu.children)
+                }
+
+                return hasMenuPermission;
+            })
+
+        }
+
+        return filter;
+    }, [hasPermission])
+
+
+    return {
+        hasPermission,
+        filterMenu,
+        context
+    }
+
+}

package/template/src/index.css

@@ -0,0 +1,111 @@
+:root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:
+    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow:
+      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+body {
+  margin: 0;
+}
+
+#root {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+h1,
+h2 {
+  font-family: var(--heading);
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  font-family: var(--mono);
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+}

package/template/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import './index.css'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+)

package/template/src/pages/Dashboard.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Card, Row, Col, Statistic } from 'antd';
+import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
+
+const Dashboard: React.FC = () => {
+  return (
+    <div>
+      <h2>Dashboard</h2>
+      <Row gutter={16}>
+        <Col span={12}>
+          <Card>
+            <Statistic
+              title="Active Users"
+              value={112893}
+              precision={2}
+              valueStyle={{ color: '#3f8600' }}
+              prefix={<ArrowUpOutlined />}
+              suffix="%"
+            />
+          </Card>
+        </Col>
+        <Col span={12}>
+          <Card>
+            <Statistic
+              title="Idle Users"
+              value={9.3}
+              precision={2}
+              valueStyle={{ color: '#cf1322' }}
+              prefix={<ArrowDownOutlined />}
+              suffix="%"
+            />
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default Dashboard;

package/template/src/pages/Users.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Table, Tag, Space } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+  tags: string[];
+}
+
+const columns: ColumnsType<DataType> = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    render: (text) => <a>{text}</a>,
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+  },
+  {
+    title: 'Tags',
+    key: 'tags',
+    dataIndex: 'tags',
+    render: (_, { tags }) => (
+      <>
+        {tags.map((tag) => {
+          let color = tag.length > 5 ? 'geekblue' : 'green';
+          if (tag === 'loser') {
+            color = 'volcano';
+          }
+          return (
+            <Tag color={color} key={tag}>
+              {tag.toUpperCase()}
+            </Tag>
+          );
+        })}
+      </>
+    ),
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    render: (_, record) => (
+      <Space size="middle">
+        <a>Invite {record.name}</a>
+        <a>Delete</a>
+      </Space>
+    ),
+  },
+];
+
+const data: DataType[] = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+    tags: ['nice', 'developer'],
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+];
+
+const Users: React.FC = () => {
+  return (
+    <div>
+      <h2>Users Management</h2>
+      <Table columns={columns} dataSource={data} />
+    </div>
+  );
+};
+
+export default Users;