feat: Add vision controls, function menu, and custom alert dialogs

- Add Vision menu with Camera (QRCode) and Barcode (Keyence) controls - Add Function menu with Manage, Log Viewer, and folder navigation - Add quick action buttons (Manual, Light, Print, Cancel) to header - Replace browser alert() with custom AlertDialog component - Add MachineBridge methods for vision, lighting, folders, and manual operations - Add WebSocketServer handlers for all new commands - Add communication layer methods for frontend-backend integration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 23:39:38 +09:00
parent 6219c4c60e
commit 8bbd76e670
13 changed files with 1398 additions and 112 deletions
--- a/FrontEnd/contexts/AlertContext.tsx
+++ b/FrontEnd/contexts/AlertContext.tsx
@@ -0,0 +1,118 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface AlertConfig {
+    type: 'success' | 'error' | 'warning' | 'info';
+    title: string;
+    message: string;
+}
+
+interface AlertContextType {
+    showAlert: (config: AlertConfig) => void;
+}
+
+const AlertContext = createContext<AlertContextType | undefined>(undefined);
+
+export const useAlert = () => {
+    const context = useContext(AlertContext);
+    if (!context) {
+        throw new Error('useAlert must be used within AlertProvider');
+    }
+    return context;
+};
+
+interface AlertProviderProps {
+    children: ReactNode;
+}
+
+export const AlertProvider: React.FC<AlertProviderProps> = ({ children }) => {
+    const [alertConfig, setAlertConfig] = useState<(AlertConfig & { isOpen: boolean }) | null>(null);
+
+    const showAlert = (config: AlertConfig) => {
+        setAlertConfig({ ...config, isOpen: true });
+    };
+
+    const closeAlert = () => {
+        setAlertConfig(null);
+    };
+
+    return (
+        <AlertContext.Provider value={{ showAlert }}>
+            {children}
+            {alertConfig && (
+                <div className="fixed inset-0 z-[100] flex items-center justify-center">
+                    {/* Backdrop */}
+                    <div
+                        className="absolute inset-0 bg-black/80 backdrop-blur-sm"
+                        onClick={closeAlert}
+                    />
+
+                    {/* Dialog */}
+                    <div
+                        className={`relative bg-black/95 backdrop-blur-md border-2 ${getBorderColor(alertConfig.type)} rounded-lg shadow-2xl max-w-md w-full mx-4 animate-fadeIn`}
+                    >
+                        {/* Icon and Title */}
+                        <div className="flex items-center gap-4 p-6 border-b border-white/10">
+                            {getIcon(alertConfig.type)}
+                            <h2 className="text-xl font-tech font-bold text-white uppercase tracking-wider">
+                                {alertConfig.title}
+                            </h2>
+                        </div>
+
+                        {/* Message */}
+                        <div className="p-6 max-w-full overflow-hidden">
+                            <p className="text-slate-300 font-mono text-sm whitespace-pre-wrap leading-relaxed break-words max-w-full">
+                                {alertConfig.message}
+                            </p>
+                        </div>
+
+                        {/* Button */}
+                        <div className="flex justify-end p-6 border-t border-white/10">
+                            <button
+                                onClick={closeAlert}
+                                className="px-6 py-2 bg-neon-blue/20 hover:bg-neon-blue/30 border border-neon-blue text-neon-blue font-tech font-bold rounded transition-colors shadow-glow-blue"
+                            >
+                                OK
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </AlertContext.Provider>
+    );
+};
+
+const getIcon = (type: 'success' | 'error' | 'warning' | 'info') => {
+    const icons = {
+        success: (
+            <svg className="w-12 h-12 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        ),
+        error: (
+            <svg className="w-12 h-12 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        ),
+        warning: (
+            <svg className="w-12 h-12 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+        ),
+        info: (
+            <svg className="w-12 h-12 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        ),
+    };
+    return icons[type];
+};
+
+const getBorderColor = (type: 'success' | 'error' | 'warning' | 'info') => {
+    const colors = {
+        success: 'border-green-500',
+        error: 'border-red-500',
+        warning: 'border-amber-500',
+        info: 'border-blue-500',
+    };
+    return colors[type];
+};