个股论坛重做

src/views/StockCommunity/components/ChannelSidebar/index.tsx

@@ -94,6 +94,7 @@ const ChannelSidebar: React.FC<ChannelSidebarProps> = ({
   const [newChannelName, setNewChannelName] = useState('');
   const [newChannelType, setNewChannelType] = useState<ChannelType>('text');
   const [newChannelTopic, setNewChannelTopic] = useState('');
+  const [newChannelCategoryId, setNewChannelCategoryId] = useState<string>('');
   const [creating, setCreating] = useState(false);
   const [hasInitialized, setHasInitialized] = useState(false);
 
@@ -170,6 +171,15 @@ const ChannelSidebar: React.FC<ChannelSidebarProps> = ({
       return;
     }
 
+    if (!newChannelCategoryId) {
+      toast({
+        title: '请选择所属分类',
+        status: 'warning',
+        duration: 2000,
+      });
+      return;
+    }
+
     setCreating(true);
     try {
       // 调用创建频道 API
@@ -177,6 +187,7 @@ const ChannelSidebar: React.FC<ChannelSidebarProps> = ({
         name: newChannelName.trim(),
         type: newChannelType,
         topic: newChannelTopic.trim() || undefined,
+        categoryId: newChannelCategoryId || undefined,
       });
 
       toast({
@@ -204,6 +215,7 @@ const ChannelSidebar: React.FC<ChannelSidebarProps> = ({
       setCreating(false);
       setNewChannelName('');
       setNewChannelTopic('');
+      setNewChannelCategoryId('');
     }
   };
 
@@ -592,6 +604,40 @@ const ChannelSidebar: React.FC<ChannelSidebarProps> = ({
                 />
               </FormControl>
 
+              <FormControl isRequired>
+                <FormLabel color="gray.300" fontSize="sm">所属分类</FormLabel>
+                <Select
+                  value={newChannelCategoryId}
+                  onChange={(e) => setNewChannelCategoryId(e.target.value)}
+                  placeholder="选择分类..."
+                  bg="rgba(255, 255, 255, 0.05)"
+                  border="1px solid"
+                  borderColor="rgba(255, 255, 255, 0.1)"
+                  color="white"
+                  _focus={{
+                    borderColor: 'purple.400',
+                    boxShadow: '0 0 0 1px var(--chakra-colors-purple-400)',
+                  }}
+                  sx={{
+                    option: { bg: '#1f2937', color: 'white' },
+                    '& option[value=""]': { color: 'gray.500' },
+                  }}
+                >
+                  {categories
+                    .filter(cat => !cat.isSystem) // 过滤掉系统分类
+                    .map(category => (
+                      <option key={category.id} value={category.id}>
+                        {category.icon} {category.name}
+                      </option>
+                    ))
+                  }
+                  {/* 如果没有用户分类，显示默认选项 */}
+                  {categories.filter(cat => !cat.isSystem).length === 0 && (
+                    <option value="" disabled>暂无可用分类</option>
+                  )}
+                </Select>
+              </FormControl>
+
               <FormControl>
                 <FormLabel color="gray.300" fontSize="sm">频道类型</FormLabel>
                 <Select
@@ -605,10 +651,12 @@ const ChannelSidebar: React.FC<ChannelSidebarProps> = ({
                     borderColor: 'purple.400',
                     boxShadow: '0 0 0 1px var(--chakra-colors-purple-400)',
                   }}
+                  sx={{
+                    option: { bg: '#1f2937', color: 'white' },
+                  }}
                 >
-                  <option value="text" style={{ background: '#1f2937' }}>💬 文字频道</option>
-                  <option value="forum" style={{ background: '#1f2937' }}>📝 论坛频道</option>
-                  <option value="prediction" style={{ background: '#1f2937' }}>⚡ 预测市场</option>
+                  <option value="text">💬 文字频道</option>
+                  <option value="forum">📝 论坛频道</option>
                 </Select>
               </FormControl>