feat: add github login

src/pages/ai-agent/layouts/index.tsx

@@ -1,14 +1,5 @@
-import { Outlet } from 'react-router';
+import { LayoutMain } from '@/modules/layout';
 
 export const Main = () => {
-  return (
-    <div className='flex w-full h-full flex-col bg-gray-200'>
-      <div className='layout-menu'>Agent</div>
-      <div className='flex-grow w-full'>
-        <div className='w-full h-full overflow-hidden'>
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
+  return <LayoutMain title='Agent' />;
 };

src/pages/container/store/index.ts

@@ -46,7 +46,7 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
       });
       if (res.code === 200) {
         message.success('Success');
-        set({ showEdit: false, formData: [] });
+        set({ showEdit: false, formData: res.data });
         getList();
       } else {
         message.error(res.message || 'Request failed');

src/pages/github/Callback.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { getCodeFromUrl, useGithubStore } from './store';
+import { useShallow } from 'zustand/react/shallow';
+
+export const Callback = () => {
+  const [code, setCode] = useState('');
+  const githubStore = useGithubStore(
+    useShallow((state) => {
+      return {
+        getToken: state.getToken,
+        githubToken: state.githubToken,
+      };
+    }),
+  );
+  useEffect(() => {
+    setCode(getCodeFromUrl());
+    githubStore.getToken();
+  }, []);
+  return (
+    <div className='w-full h-full'>
+      <div className='p-4'>
+        <h1>Callback</h1>
+        <p>code: {code}</p>
+        <p>access_token: {githubStore.githubToken}</p>
+      </div>
+    </div>
+  );
+};

src/pages/github/Login.tsx

@@ -0,0 +1,21 @@
+import { nanoid } from 'nanoid';
+import { useEffect, useState } from 'react';
+
+const getGithubAuth = () => {
+  const client_id = 'Ov23littcejmbA5iKrhK';
+  const redirect_uri = 'https://envision.xiongxiao.me/github/callback';
+  const scope = 'user';
+  const state = 'abc123' && nanoid(6);
+  return `https://github.com/login/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&scope=${scope}&state=${state}`;
+};
+export const Login = () => {
+  const [url, setUrl] = useState('');
+  useEffect(() => {
+    setUrl(getGithubAuth());
+  }, []);
+  return (
+    <div>
+      <a href={url}>Github登录</a>
+    </div>
+  );
+};

src/pages/github/index.tsx

@@ -0,0 +1,16 @@
+import { LayoutMain } from '@/modules/layout';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { Login } from './Login';
+import { Callback } from './Callback';
+
+export const App = () => {
+  return (
+    <Routes>
+      <Route element={<LayoutMain title='Github登录' />}>
+        <Route path='/' element={<Navigate to='/github/login' />}></Route>
+        <Route path='login' element={<Login />} />
+        <Route path='/callback' element={<Callback />}></Route>
+      </Route>
+    </Routes>
+  );
+};

src/pages/github/store/index.ts

@@ -0,0 +1,32 @@
+import { query } from '@/modules';
+import { message } from 'antd';
+import { create } from 'zustand';
+export const getCodeFromUrl = () => {
+  const searchParams = new URLSearchParams(window.location.search);
+  return searchParams.get('code') || '';
+};
+type GithubStore = {
+  githubToken?: string;
+  getToken: () => Promise<any>;
+};
+export const useGithubStore = create<GithubStore>((set) => ({
+  githubToken: '',
+  getToken: async () => {
+    const code = getCodeFromUrl();
+    if (!code) {
+      message.error('code不存在');
+    }
+    const loaded = message.loading('获取token中', 0);
+    const res = await query.post({
+      path: 'github',
+      key: 'token',
+      code,
+    });
+    loaded();
+    if (res.code === 200) {
+      const { githubToken } = res.data;
+      set({ githubToken: githubToken });
+      localStorage.setItem('githubToken', githubToken);
+    }
+  },
+}));

src/pages/prompt/layout/Main.tsx

@@ -1,13 +1,4 @@
-import { AiMoudle } from '@/pages/ai-chat';
-import { Outlet } from 'react-router';
-
+import { LayoutMain } from '@/modules/layout';
 export const Main = () => {
-  return (
-    <div className='w-full h-full flex'>
-      <div className='flex-grow h-full'>
-        <Outlet />
-      </div>
-      <AiMoudle />
-    </div>
-  );
+  return <LayoutMain title='Prompt'></LayoutMain>;
 };