content面板样式

src/components/layout/contentbar.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-
 import { Outlet } from 'react-router-dom';
 import { Card } from 'antd';
 
 
 const PageContent: React.FC = () => {
   return (
-    <div style={{ padding: "0 20px", height: "calc(100vh - 200px)", overflow: "auto" }}>
-      <Card style={{ height: "100%", overflow: 'auto' }}>
+    <div className='w-full px-[10px] h-[calc(100vh-64px)] overflow-auto'>
+      <Card className='w-full h-full overflow-auto rounded-[0]'>
         <Outlet />
       </Card>
     </div>

src/components/layout/headerbar.tsx

@@ -1,23 +1,39 @@
 
-import { Layout, Switch } from 'antd';
-import { GithubOutlined } from '@ant-design/icons';
+import { Button, Dropdown, Layout, message, Switch} from 'antd';
 import useConfigStore from '../../store/config';
+import LogoIcon from "@src/assets/images/login/logo.svg?react";
+import Icon from "@ant-design/icons";
+import { logout } from "../../http/sso";
+import { useNavigate } from 'react-router-dom';
+
 const { Header } = Layout;
 
 const Headerbar = (props: { colorBgContainer: string }) => {
+	const navigate = useNavigate()
   const setAlgorithm = useConfigStore(state => state.setAlgorithm)
-  const setCompactAlgorithm = useConfigStore(state => state.setCompactAlgorithm)
+
+	const logoutHandle = async () => {
+		await logout()
+		message.success('已退出账号')
+		// TODO: 退出后跳转登录页
+		navigate('/login')
+	}
 
   return (
-    <Header title='React Admin Dashboard' style={{ padding: 0, background: props.colorBgContainer }}>
-      <div style={{ display: 'flex', alignItems: 'center', height: '100%', padding: "0 20px", justifyContent: 'space-between' }}>
-        <h2>React Admin Dashboard</h2>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+    <Header title='票圈内容合作平台' className='bg-[#20214F] px-[0]'>
+      <div className='text-[#9090a7] flex items-center justify-between h-full px-[20px] '>
+        <div className='flex items-center gap-[12px]'>
+          <Icon component={LogoIcon} className='text-[40px]' />
+          <span className='text-lg font-bold'>票圈内容合作平台</span>
+        </div>
+        <div className='flex items-center gap-[10px] cursor-pointer'>
           <Switch checkedChildren="Light" unCheckedChildren="Dark" defaultChecked onChange={(checked) => setAlgorithm(checked ? 'default' : 'dark')} />
-          <Switch checkedChildren="Compact" unCheckedChildren="Loose" onChange={(checked) => setCompactAlgorithm(checked ? 'compact' : '')} />
-          <p style={{ marginRight: 10 }}>Yujian Xue</p>
-          <img src="https://avatars.githubusercontent.com/u/48818060?s=48&v=4" alt="avatar" style={{ width: 40, height: 40 }} />
-          <GithubOutlined style={{ fontSize: 30 }} onClick={() => window.open('https://github.com/larry-xue/react-admin-dashboard')} />
+					<Dropdown trigger={['hover']} menu={{items: [{label: (<Button type="primary" onClick={logoutHandle}>退出账号</Button>), key: 'logout'}]}}>
+						<view className='flex items-center gap-[10px]'>
+							<view>Yujian Xue</view>
+							<img src="https://avatars.githubusercontent.com/u/48818060?s=48&v=4" alt="avatar" style={{ width: 40, height: 40 }} />
+						</view>
+					</Dropdown>
         </div>
       </div>
     </Header>

src/components/layout/index.tsx

@@ -1,28 +1,20 @@
 import React from 'react';
-
 import { Layout, theme } from 'antd';
 import PageSidebar from './sidebar';
 import PageContent from './contentbar';
-import PageBreadcrumb from './breadcrumb';
 import Headerbar from './headerbar';
 
-const { Footer } = Layout;
-
 const PageLayout: React.FC = () => {
   const {
     token: { colorBgContainer },
   } = theme.useToken();
 
   return (
-    <Layout style={{ minHeight: '100vh' }}>
-      <PageSidebar />
-      <Layout>
-        <Headerbar colorBgContainer={colorBgContainer} />
-        <PageBreadcrumb />
+		<Layout className='w-full min-h-screen flex flex-col'>
+			<Headerbar colorBgContainer={colorBgContainer} />
+      <Layout className='w-full'>
+      	<PageSidebar />
         <PageContent></PageContent>
-        <Footer style={{ textAlign: 'center' }}>
-          {/* React Admin Dashboard ©{new Date().getFullYear()} Created by Yujian Xue */}
-        </Footer>
       </Layout>
     </Layout>
   );

src/index.css

@@ -9,7 +9,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #fff;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

src/store/config.ts

@@ -26,7 +26,7 @@ const useConfigStore = create<ConfigState & Actions>()((set) => ({
   themeConfig: {
     _algorithm: ['default'],
     algorithm: [theme.defaultAlgorithm],
-    primaryColor: '#03dac6'
+    primaryColor: '#1890ff'
   },
   themeOptions: [
     { label: 'Light', value: 'default' },

src/views/publishContent/weCom/index.tsx

@@ -60,20 +60,7 @@ const columns: TableProps<DataType>['columns'] = [
 ];
 
 const data: DataType[] = [
-  {
-    key: '1',
-    name: 'John Brown1111',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-    tags: ['nice', 'developer'],
-  },
-  {
-    key: '2',
-    name: 'Jim Green 1111',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser'],
-  },
+
 ];
 
 const DemoTable: React.FC = () => <Table columns={columns} dataSource={data} />;

src/views/publishContent/weGZH/index.tsx

@@ -80,9 +80,86 @@ const data: DataType[] = [
     age: 32,
     address: 'Sydney No. 1 Lake Park',
     tags: ['cool', 'teacher'],
-  },
+	},
+	{
+		key: '4',
+		name: 'Joe Black',
+		age: 32,
+		address: 'Sydney No. 1 Lake Park',
+		tags: ['cool', 'teacher'],
+	},
+	{
+		key: '5',
+		name: 'Joe Black',
+		age: 32,
+		address: 'Sydney No. 1 Lake Park',
+		tags: ['cool', 'teacher'],
+	},
+	{
+		key: '6',
+		name: 'Joe Black',
+		age: 32,
+		address: 'Sydney No. 1 Lake Park',
+		tags: ['cool', 'teacher'],
+	},
+	{
+		key: '7',
+		name: 'Joe Black',
+		age: 32,
+		address: 'Sydney No. 1 Lake Park',
+		tags: ['cool', 'teacher'],
+	},
+	{
+		key: '8',
+		name: 'Joe Black',
+		age: 32,
+		address: 'Sydney No. 1 Lake Park',
+		tags: ['cool', 'teacher'],
+	},
+	{
+		key: '9',
+		name: 'Joe Black',
+		age: 32,
+		address: 'Sydney No. 1 Lake Park',
+		tags: ['cool', 'teacher'],
+	},
+	{
+		key: '10',
+		name: 'Joe Black',
+		age: 32,
+		address: 'Sydney No. 1 Lake Park',
+		tags: ['cool', 'teacher'],
+	},
+	{
+		key: '11',
+		name: 'Joe Black',
+		age: 32,
+		address: 'Sydney No. 1 Lake Park',
+		tags: ['cool', 'teacher'],
+	},
+	{
+		key: '12',
+		name: 'Joe Black',
+		age: 32,
+		address: 'Sydney No. 1 Lake Park',
+		tags: ['cool', 'teacher'],
+	},
+	{
+		key: '13',
+		name: 'Joe Black',
+		age: 32,
+		address: 'Sydney No. 1 Lake Park',
+		tags: ['cool', 'teacher'],
+	},
+	{
+		key: '14',
+		name: 'Joe Black',
+		age: 32,
+		address: 'Sydney No. 1 Lake Park',
+		tags: ['cool', 'teacher'],
+	},
 ];
 
-const DemoTable: React.FC = () => <Table columns={columns} dataSource={data} />;
+const DemoTable: React.FC = () => <Table  columns={columns} dataSource={data} />;
 
 export default DemoTable;