解决card组件废弃属性

2026-06-25 17:07:32 +08:00
parent 6da4fe78f3
commit 690d1baba0
24 changed files with 370 additions and 198 deletions
@@ -24,6 +24,7 @@ import RemoveInfo from './pages/RemoveInfo';
 import RemoveRw from './pages/RemoveRw';
 // import RemoveFenbu from './pages/RemoveFenbu';
 import ConsumePage from './pages/ConsumePage';
+import AuthorizationWaitingPage from './pages/AuthorizationWaitingPage';
 import { useAuthStore } from './store/useAuthStore';
 const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const { user, loading, checkAuth } = useAuthStore();
@@ -109,6 +110,7 @@ const App = () => {
              <Route path="generated" element={<GeneratedRecord />} />
              <Route path="pretest" element={<PreTest />} />
              <Route path="authorization" element={<AuthorizationPage />} />
+              <Route path="authoriza-waiting" element={<AuthorizationWaitingPage />} />
              <Route path="materials" element={<MaterialListPage />} />
              <Route path="consume" element={<ConsumePage />} />
            </Route>
@@ -414,11 +414,19 @@ export async function requestOAuth(params: RequestOAuthParams): Promise<any> {
 export interface JuliangCallbackParams {
  auth_code: string;
  state: string;
+  app_id?: string;
+  material_auth_status?: string;
+  scope?: string;
+  uid?: string;
 }
 export async function juliang_callback(params: JuliangCallbackParams): Promise<any> {
  const query = new URLSearchParams();
  query.set('auth_code', params.auth_code);
  query.set('state', params.state);
+  if (params.app_id) query.set('app_id', params.app_id);
+  if (params.material_auth_status) query.set('material_auth_status', params.material_auth_status);
+  if (params.scope) query.set('scope', params.scope);
+  if (params.uid) query.set('uid', params.uid);
  return api.get(`/user-oauth/juliang_callback?${query.toString()}`);
 }

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import { Typography, Spin, Button, App } from 'antd';
+import { ClockCircleOutlined, ReloadOutlined } from '@ant-design/icons';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { juliang_callback, getOAuthList } from '../api';
+
+const AuthorizationWaitingPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { message } = App.useApp();
+  const [countdown, setCountdown] = useState(0);
+  const [isChecking, setIsChecking] = useState(true);
+  const [authSuccess, setAuthSuccess] = useState(false);
+
+  useEffect(() => {
+    const authCode = searchParams.get('auth_code');
+    const state = searchParams.get('state');
+
+    if (!authCode || !state) {
+      setIsChecking(false);
+      setCountdown(10);
+      return;
+    }
+
+    const params = {
+      auth_code: authCode,
+      state: state,
+      app_id: searchParams.get('app_id') || undefined,
+      material_auth_status: searchParams.get('material_auth_status') || undefined,
+      scope: searchParams.get('scope') || undefined,
+      uid: searchParams.get('uid') || undefined,
+    };
+
+    const handleCallback = async () => {
+      try {
+        await juliang_callback(params);
+        setAuthSuccess(true);
+        setIsChecking(false);
+        message.success('授权成功');
+        setTimeout(() => {
+          navigate('/authorization');
+        }, 1500);
+      } catch (error) {
+        console.log('授权回调失败，开始轮询检查...');
+      }
+    };
+
+    handleCallback();
+
+    const checkInterval = setInterval(async () => {
+      try {
+        // await getOAuthList({ page: 1, page_size: 1 });
+        // setAuthSuccess(true);
+        // setIsChecking(false);
+        // message.success('授权成功');
+        // clearInterval(checkInterval);
+        // setTimeout(() => {
+        //   navigate('/authorization');
+        // }, 1500);
+      } catch (error) {
+        console.log('授权检查中...');
+      }
+    }, 2000);
+
+    const timer = setInterval(() => {
+      setCountdown(prev => {
+        if (prev >= 11) {
+          clearInterval(checkInterval);
+          setIsChecking(false);
+          return prev;
+        }
+        return prev + 1;
+      });
+    }, 1000);
+
+    return () => {
+      clearInterval(checkInterval);
+      clearInterval(timer);
+    };
+  }, [navigate, searchParams, message]);
+
+  const handleRetry = () => {
+    setCountdown(0);
+    setIsChecking(true);
+    setAuthSuccess(false);
+    window.location.href = '/authorization';
+  };
+
+  if (authSuccess) {
+    return (
+      <div style={{ minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)' }}>
+        <div style={{ textAlign: 'center', padding: '60px 80px', background: '#fff', borderRadius: 16, boxShadow: '0 10px 40px rgba(0,0,0,0.1)' }}>
+          <div style={{ width: 80, height: 80, background: '#dcfce7', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '0 auto 24px' }}>
+            <Typography.Text style={{ fontSize: 40, color: '#22c55e' }}>✓</Typography.Text>
+          </div>
+          <Typography.Title level={3} style={{ marginBottom: 16, color: '#1e293b' }}>授权成功</Typography.Title>
+          <Typography.Text style={{ color: '#64748b' }}>正在跳转至授权管理页面...</Typography.Text>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)' }}>
+      <div style={{ textAlign: 'center', padding: '60px 80px', background: '#fff', borderRadius: 16, boxShadow: '0 10px 40px rgba(0,0,0,0.1)' }}>
+        <div style={{ width: 80, height: 80, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '0 auto 24px' }}>
+          {isChecking && countdown < 10 ? (
+            <Spin size="large" tip="加载中" style={{ color: '#fff' }} />
+          ) : (
+            <ClockCircleOutlined style={{ fontSize: 40, color: '#fff' }} />
+          )}
+        </div>
+        
+        {countdown >= 10 ? (
+          <>
+            <Typography.Title level={3} style={{ marginBottom: 16, color: '#ef4444' }}>授权无响应</Typography.Title>
+            <Typography.Text style={{ color: '#64748b', marginBottom: 24, display: 'block' }}>请重新授权</Typography.Text>
+            <Button
+              type="primary"
+              size="large"
+              icon={<ReloadOutlined />}
+              onClick={handleRetry}
+              style={{
+                borderRadius: 8,
+                background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+                border: 'none',
+                fontWeight: 600,
+                padding: '12px 32px',
+              }}
+            >
+              重新授权
+            </Button>
+          </>
+        ) : (
+          <>
+            <Typography.Title level={3} style={{ marginBottom: 16, color: '#1e293b' }}>授权中，请等待</Typography.Title>
+            <Typography.Text style={{ color: '#64748b', marginBottom: 24, display: 'block' }}>
+              正在等待平台完成授权操作
+            </Typography.Text>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
+              <ClockCircleOutlined style={{ color: '#6366f1' }} />
+              <Typography.Text style={{ color: '#6366f1', fontWeight: 500, fontSize: 16 }}>
+                {countdown}s
+              </Typography.Text>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AuthorizationWaitingPage;
@@ -436,7 +436,7 @@ const PreTest: React.FC = () => {
    <div style={{ minHeight: 'calc(100vh - 80px)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <FileTextOutlined style={{ color: '#6366f1', fontSize: 16 }} />
-        <Typography.Text strong style={{ fontSize: 16 }}>前测管理</Typography.Text>
+        <Typography.Text strong style={{ fontSize: 16 }}>素材前测</Typography.Text>
      </div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, marginBottom: 16 }}>
        <Button