App.tsx - master - KDP/ADOS

App.tsx
204 строки10 KB
Krylov Dmitry
Рыба
01 янв 2026, 20:44
01 янв 2026, 20:44f51b546

import React, { useState, useEffect, useCallback } from 'react';
import { DevOpsSettings, WorkItem, ViewState } from './types';
import { AzureDevOpsService } from './services/azureDevOpsService';
import { getTaskSummary } from './services/geminiService';
import Settings from './components/Settings';
import TaskCard from './components/TaskCard';

const STORAGE_KEY = 'azure_devops_mobile_config';

const App: React.FC = () => {
  const [settings, setSettings] = useState<DevOpsSettings | null>(null);
  const [view, setView] = useState<ViewState>('DASHBOARD');
  const [tasks, setTasks] = useState<WorkItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [summary, setSummary] = useState<string | null>(null);
  const [aiLoading, setAiLoading] = useState(false);
  const [error, setError] = useState<{ message: string; isCors?: boolean } | null>(null);

  useEffect(() => {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
      setSettings(JSON.parse(saved));
    } else {
      setView('SETTINGS');
    }
  }, []);

  const loadTasks = useCallback(async () => {
    if (!settings) return;
    setLoading(true);
    setError(null);
    try {
      const service = new AzureDevOpsService(settings);
      const data = await service.getMyWorkItems();
      setTasks(data);
    } catch (err: any) {
      const isCors = err.message.includes('CORS_ERROR');
      setError({ 
        message: isCors ? "Браузер заблокировал запрос к серверу." : err.message, 
        isCors 
      });
      console.error(err);
    } finally {
      setLoading(false);
    }
  }, [settings]);

  useEffect(() => {
    if (settings && view === 'DASHBOARD') {
      loadTasks();
    }
  }, [settings, view, loadTasks]);

  const handleSaveSettings = (newSettings: DevOpsSettings) => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(newSettings));
    setSettings(newSettings);
    setView('DASHBOARD');
  };

  const handleAiSummary = async () => {
    if (tasks.length === 0) return;
    setAiLoading(true);
    const res = await getTaskSummary(tasks);
    setSummary(res);
    setAiLoading(false);
  };

  const renderDashboard = () => (
    <div className="space-y-6 pb-20">
      <header className="flex justify-between items-center">
        <div className="text-left">
          <h1 className="text-2xl font-bold text-slate-900">Мои Задачи</h1>
          <p className="text-sm text-slate-500">
            {loading ? "Загрузка..." : `${tasks.length} активных задач`}
          </p>
        </div>
        <button 
          onClick={loadTasks}
          className="p-2 bg-white rounded-full shadow-sm border border-slate-200 text-slate-600 hover:text-blue-600 transition-colors"
          disabled={loading}
        >
          <svg className={`w-5 h-5 ${loading ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
          </svg>
        </button>
      </header>

      {error && (
        <div className="bg-red-50 text-red-700 p-4 rounded-2xl border border-red-100 text-sm text-left animate-in fade-in slide-in-from-top-2">
          <div className="flex gap-2">
             <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
             <div className="flex-1">
                <p className="font-bold mb-1">{error.message}</p>
                {error.isCors && (
                  <p className="text-xs text-red-600 opacity-80 leading-snug">
                    Это обычная защита браузера. Для работы с локальным сервером Azure DevOps установите расширение <strong>"Allow CORS"</strong> или включите доступ в настройках сервера.
                  </p>
                )}
             </div>
          </div>
          <button onClick={() => setView('SETTINGS')} className="mt-3 text-blue-600 font-bold underline text-xs">Открыть справку и настройки</button>
        </div>
      )}

      <div className="bg-gradient-to-br from-indigo-600 to-blue-500 p-6 rounded-3xl text-white shadow-xl shadow-blue-100 relative overflow-hidden text-left">
        <div className="relative z-10">
          <h2 className="text-lg font-bold mb-2">AI Ассистент</h2>
          {summary ? (
            <div className="text-sm bg-white/10 p-3 rounded-xl backdrop-blur-sm mt-2 whitespace-pre-line leading-relaxed">
              {summary}
            </div>
          ) : (
            <p className="text-sm text-blue-50 mb-4 opacity-90 leading-relaxed">
              Нажмите, чтобы получить умную сводку ваших задач на сегодня.
            </p>
          )}
          {!summary && (
            <button 
              onClick={handleAiSummary}
              disabled={aiLoading || tasks.length === 0}
              className="mt-2 bg-white text-blue-600 px-6 py-2 rounded-xl font-bold text-sm shadow-sm hover:bg-blue-50 transition-colors flex items-center gap-2"
            >
              {aiLoading ? (
                <>
                  <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <circle cx="12" cy="12" r="10" strokeWidth="4" className="opacity-25" />
                    <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                  </svg>
                  Анализ...
                </>
              ) : (
                <>
                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
                  </svg>
                  Получить сводку
                </>
              )}
            </button>
          )}
        </div>
        <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-12 translate-x-12 blur-2xl"></div>
      </div>

      <div className="grid grid-cols-1 gap-4 text-left">
        {loading && tasks.length === 0 ? (
          Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="h-28 bg-white border border-slate-200 rounded-2xl animate-pulse"></div>
          ))
        ) : tasks.length > 0 ? (
          tasks.map(item => <TaskCard key={item.id} item={item} />)
        ) : !loading && !error && (
          <div className="text-center py-12 text-slate-500">
            <svg className="w-12 h-12 mx-auto mb-3 opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
            </svg>
            Задач не найдено
          </div>
        )}
      </div>
    </div>
  );

  return (
    <div className="min-h-screen max-w-lg mx-auto bg-slate-50 relative overflow-hidden pb-24">
      <main className="p-6">
        {view === 'SETTINGS' ? (
          <Settings 
            currentSettings={settings || { serverUrl: '', collection: 'DefaultCollection', project: '', domain: '', password: '', username: '' }} 
            onSave={handleSaveSettings} 
          />
        ) : (
          renderDashboard()
        )}
      </main>

      <nav className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-lg bg-white border-t border-slate-200 flex justify-around items-center py-3 z-50 shadow-2xl">
        <button 
          onClick={() => setView('DASHBOARD')}
          className={`flex flex-col items-center gap-1 transition-colors ${view === 'DASHBOARD' ? 'text-blue-600' : 'text-slate-400'}`}
        >
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          <span className="text-[10px] font-semibold uppercase tracking-wider">Главная</span>
        </button>

        <button 
          onClick={() => setView('SETTINGS')}
          className={`flex flex-col items-center gap-1 transition-colors ${view === 'SETTINGS' ? 'text-blue-600' : 'text-slate-400'}`}
        >
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
          </svg>
          <span className="text-[10px] font-semibold uppercase tracking-wider">Настройки</span>
        </button>
      </nav>
    </div>
  );
};

export default App;