拆分成功

frontend-react/src/components/RoleSelector/RoleSelector.css

@@ -0,0 +1,95 @@
+/* ==================== 下拉框样式 ==================== */
+
+/* 角色选择器容器 */
+.role-selector {
+  width: 100%;
+}
+
+/* 下拉框容器 */
+.dropdown-container {
+  position: relative;
+  width: 100%;
+  max-width: 300px;
+}
+
+/* 下拉框触发器 */
+.dropdown-trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.dropdown-arrow {
+  margin-left: 8px;
+  font-size: 12px;
+}
+
+/* 下拉菜单 */
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+  max-height: 200px;
+  overflow-y: auto;
+  margin-top: 5px;
+}
+
+/* 下拉菜单项 */
+.dropdown-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  position: relative;
+  font-size: 14px;
+}
+
+.dropdown-item:hover {
+  background-color: #f5f5f5;
+}
+
+.dropdown-item.selected {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+/* 嵌套下拉框 */
+.nested-dropdown {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  width: 100%;
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 11;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.nested-dropdown .dropdown-item {
+  padding-left: 20px;
+}
+
+/* 工具栏下拉框容器 */
+.toolbar-dropdown {
+  margin-bottom: 15px;
+}
+
+.toolbar-dropdown label {
+  display: block;
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: #333;
+}

frontend-react/src/components/RoleSelector/RoleSelector.jsx

@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from 'react';
+import './RoleSelector.css';
+
+const RoleSelector = ({ onRoleChange, onChatChange }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [roleData, setRoleData] = useState({});
+  const [selectedRole, setSelectedRole] = useState(null);
+  const [selectedChat, setSelectedChat] = useState(null);
+
+  // 获取角色和聊天数据
+  useEffect(() => {
+    const fetchRoleData = async () => {
+      try {
+        console.log('开始获取角色数据...');
+        const response = await fetch('/api/get_all_role_and_chat');
+        console.log('响应状态:', response.status);
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        console.log('获取到的数据:', data);
+        setRoleData(data);
+      } catch (error) {
+        console.error('获取角色数据失败:', error);
+      }
+    };
+
+    fetchRoleData();
+  }, []);
+
+  // 处理角色选择
+  const handleRoleSelect = (role) => {
+    setSelectedRole(role);
+    setSelectedChat(null);
+    if (onRoleChange) {
+      onRoleChange(role);
+    }
+  };
+
+  // 处理聊天选择
+  const handleChatSelect = (chat) => {
+    setSelectedChat(chat);
+    setIsDropdownOpen(false);
+    if (onChatChange) {
+      onChatChange(selectedRole, chat);
+    }
+  };
+
+  return (
+    <div className="role-selector">
+      <div className="dropdown-container">
+        <div
+          className="dropdown-trigger"
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        >
+          {selectedRole || '选择角色'}
+          <span className="dropdown-arrow">▼</span>
+        </div>
+
+        {isDropdownOpen && (
+          <div className="dropdown-menu">
+            {Object.keys(roleData).map(role => (
+              <div
+                key={role}
+                className={`dropdown-item ${selectedRole === role ? 'selected' : ''}`}
+                onClick={() => handleRoleSelect(role)}
+              >
+                {role}
+                {selectedRole === role && (
+                  <div className="nested-dropdown">
+                    {roleData[role].map(chat => (
+                      <div
+                        key={chat}
+                        className={`dropdown-item ${selectedChat === chat ? 'selected' : ''}`}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleChatSelect(chat);
+                        }}
+                      >
+                        {chat}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default RoleSelector;