修改问答广场中 应用类型分类的前端效果，从 Select 组件 改成平铺的按钮切换

src/pages/deepseek/questionAnswer/list/index.tsx

@@ -16,7 +16,8 @@ import {
   Form,
   Space,
   Row,
-  Col
+  Col,
+  Input
 } from 'antd';
 import {
   PlusOutlined,
@@ -25,7 +26,10 @@ import {
   DeleteOutlined,
   StepForwardOutlined,
   SearchOutlined,
-  ReloadOutlined
+  ReloadOutlined,
+  BookOutlined,
+  TeamOutlined,
+  AppstoreOutlined
 } from '@ant-design/icons';
 import { apis } from '@/apis';
 import './style.less';
@@ -124,7 +128,7 @@ const QuestionAnswerList : React.FC = () => {
   const [ projectList, setProjectList ] = React.useState<ProjectTypeList>( [] );
   const [ appProjectList, setAppProjectList ] = React.useState<AppTypeList>( [] );
   const [ showSubPanel, setShowSubPanel ] = React.useState( false );
-  const [ selectedType, setSelectedType ] = React.useState<number | null>( null );
+  const [ selectedType, setSelectedType ] = React.useState<string | null>( '全部' );
   const wrapperRef = React.useRef<HTMLDivElement>( null );
   const selectRef = React.useRef<any>( null );
   const [ levelTypeList, setLevelTypeList ] = React.useState<AppTypeList>( [] );
@@ -298,6 +302,9 @@ const QuestionAnswerList : React.FC = () => {
     await projectApi.fetchProject();
     await appProTypeApi.fetchAppProType();
     await levelTypeApi.fetchLevelAppType();
+    
+    // 设置默认选择"全部"
+    form.setFieldsValue({ typeId: '全部' });
   }
   
   React.useEffect( () => {
@@ -347,6 +354,7 @@ const QuestionAnswerList : React.FC = () => {
   const handleClickReset = async () => {
     form.resetFields();
     setShowSubPanel( false );
+    setSelectedType( '全部' ); // 重置为"全部"
     page.pageNumber = 1;
     page.pageSize = 10;
     await appApi.fetchList( null, null );
@@ -368,9 +376,8 @@ const QuestionAnswerList : React.FC = () => {
   }, [] );
   
   
-  const handleAppTypeChange = ( value : number ) => {
-    console.log( value, 'sssss' );
-    if ( value === 41 ) {
+  const handleAppTypeChange = ( value : string ) => {
+    if ( value === '41' ) {
       // 如果是项目级应用，切换面板状态
       // setShowSubPanel(prev => !prev);
       setShowSubPanel( true );
@@ -380,9 +387,20 @@ const QuestionAnswerList : React.FC = () => {
     }
     setSelectedType( value );
     form.setFieldsValue( { typeId: value } );
+    
+    // 自动提交逻辑
+    if (value === '全部') {
+      // 全部选项，传递null给后端
+      appApi.fetchList( null, null );
+      indexApi.fetchIndex( null, null );
+    } else {
+      // 其他选项，传递对应的typeId
+      appApi.fetchList( value, null );
+      indexApi.fetchIndex( value, null );
+    }
   };
   
-  const handleAppProTypeChange = ( value : number ) => {
+  const handleAppProTypeChange = ( value : string ) => {
     console.log( value, 'valuevalue' );
     
     setSelectedType( value );
@@ -391,7 +409,6 @@ const QuestionAnswerList : React.FC = () => {
   
   return (
       <div>
-        
         <div style={ { padding: '16px 20px' , display: 'flex' } }>
           <Form
               form={ form }
@@ -400,30 +417,52 @@ const QuestionAnswerList : React.FC = () => {
               style={{ flex: 1 }}
           >
             <div>
-              {/* 主选择器 */ }
+              {/* 主选择器 - 修改为按钮组形式 */}
               <FormItem
-                  // label="应用类型"
                   name="typeId"
                   style={ { marginBottom: 0 } }
               >
-                <Select
-                    ref={ selectRef }
-                    // style={ { width: 200 } }
-                    placeholder="请选择应用类型"
-                    onChange={ handleAppTypeChange }
-                    value={ selectedType }
-                    allowClear
-                >
-                  { appTypeList.map( item => (
-                      <Option key={ item.value } value={ item.value }>
-                        { item.label }
-                      </Option>
-                  ) ) }
-                </Select>
+                <div className="filter-button-group">
+                  {/* 全部按钮 */}
+                  <Button
+                    key="全部"
+                    type={selectedType === '全部' ? 'primary' : 'default'}
+                    size="small"
+                    onClick={() => handleAppTypeChange('全部')}
+                  >
+                    全部
+                  </Button>
+                  {/* 动态应用类型按钮 */}
+                  {appTypeList.map(item => {
+                    // 根据label匹配对应的图标
+                    let icon = null;
+                    const isSelected = selectedType === item.value;
+                    
+                    if (item.label === '专业知识') {
+                      icon = <BookOutlined style={{ fontSize: '14px', marginRight: '0' }} />;
+                    } else if (item.label === '职能管理') {
+                      icon = <TeamOutlined style={{ fontSize: '14px', marginRight: '0' }} />;
+                    } else if (item.label === '项目级应用') {
+                      icon = <AppstoreOutlined style={{ fontSize: '14px', marginRight: '0' }} />;
+                    }
+                    
+                    return (
+                      <Button
+                        key={item.value}
+                        type={isSelected ? 'primary' : 'default'}
+                        size="small"
+                        onClick={() => handleAppTypeChange(item.value)}
+                      >
+                        {icon}
+                        {item.label}
+                      </Button>
+                    );
+                  })}
+                </div>
               </FormItem>
               
               {/* 子选项面板 */ }
-              { showSubPanel && selectedType === 41 && (
+              { showSubPanel && selectedType === '41' && (
                   
                   <FormItem
                       label='类型'
@@ -434,7 +473,12 @@ const QuestionAnswerList : React.FC = () => {
                         placeholder='请选择'
                         allowClear
                         // style={ { width: 200 } }
-                        // onChange={handleAppProTypeChange}
+                        onChange={(value) => {
+                          // 项目类型选择器自动提交逻辑
+                          const currentProjectId = form.getFieldValue('projectId');
+                          appApi.fetchList(value, currentProjectId);
+                          indexApi.fetchIndex(value, currentProjectId);
+                        }}
                     >
                       {
                         appProjectList.map( ( item, index ) => {
@@ -464,6 +508,13 @@ const QuestionAnswerList : React.FC = () => {
                   // style={ { width: '200px' } }
                   placeholder='请选择项目'
                   allowClear
+                  onChange={(value) => {
+                    // 项目选择器自动提交逻辑
+                    const currentTypeId = form.getFieldValue('typeId');
+                    const typeId = currentTypeId === '全部' ? null : currentTypeId;
+                    appApi.fetchList(typeId, value);
+                    indexApi.fetchIndex(typeId, value);
+                  }}
               >
                 {
                   projectList.map( ( item, index ) => {
@@ -478,21 +529,22 @@ const QuestionAnswerList : React.FC = () => {
             
             <FormItem>
               <Space size={ 12 }>
-                <Button
-                    // style={ { marginRight: 16 } }
+                <Tooltip title="重置">
+                  <Button
+                    shape="circle"
+                    icon={ <ReloadOutlined /> }
+                    onClick={ handleClickReset }
+                  />
+                </Tooltip>
+                <Tooltip title="查询">
+                  <Button
                     type='primary'
+                    shape="circle"
                     onClick={ handleClickSearch }
                     icon={ <SearchOutlined /> }
-                >
-                  查询
-                </Button>
-                <Button
-                    icon={ <ReloadOutlined /> }
-                    onClick={ handleClickReset }>
-                  重置
-                </Button>
+                  />
+                </Tooltip>
               </Space>
-            
             </FormItem>
             
             {/* {
@@ -745,14 +797,14 @@ const QuestionAnswerList : React.FC = () => {
               </div>
               :
               <div>
-                {
+                {/* {
                     createFlag &&
                     <Button type='primary'
                             icon={ <PlusOutlined /> }
                             onClick={ () => {
                               router.navigate( { pathname: '/deepseek/questionAnswer/create' } );
                             } }>创建问答应用</Button>
-                }
+                } */}
                 <Empty image={ Empty.PRESENTED_IMAGE_SIMPLE } />
               </div>
         }

src/pages/deepseek/questionAnswer/list/style.less

@@ -58,3 +58,189 @@
     background-color: rgba(0, 123, 255, 0.1);
   }
 }
+
+// 按钮式选择器样式
+.app-type-dropdown {
+  .ant-dropdown-menu {
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 8px 0;
+    
+    .ant-dropdown-menu-item {
+      padding: 8px 16px;
+      font-size: 14px;
+      transition: all 0.3s ease;
+      
+      &:hover {
+        background-color: #f5f5f5;
+      }
+      
+      &.selected {
+        color: #1890ff;
+        background-color: #f0f8ff;
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+// 按钮样式优化
+.app-type-button {
+  border-radius: 16px !important;
+  height: 32px !important;
+  padding: 0 16px !important;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  border: 1px solid #d9d9d9 !important;
+  background-color: #fff !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  min-width: 140px !important;
+  justify-content: space-between !important;
+  transition: all 0.3s ease !important;
+  
+  &:hover {
+    border-color: #40a9ff !important;
+    color: #40a9ff !important;
+  }
+  
+  &:focus {
+    border-color: #1890ff !important;
+    box-shadow: 0 0 0 1px rgba(24, 144, 255, 0.2) !important;
+  }
+}
+
+// 按钮组筛选样式
+.filter-button-group {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  
+  .ant-btn {
+    border-radius: 16px;
+    height: 32px;
+    padding: 0 16px;
+    font-size: 14px;
+    font-weight: 400;
+    border: 1px solid #d9d9d9;
+    background-color: #fff;
+    color: #000;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+      border-color: #40a9ff;
+      color: #40a9ff;
+    }
+    
+    // 所有选中状态的按钮都使用统一的蓝色主题
+    &.ant-btn-primary {
+      background-color: #1890ff !important;
+      border-color: #1890ff !important;
+      color: #fff !important;
+      font-weight: 500 !important;
+      
+      &:hover {
+        background-color: #40a9ff !important;
+        border-color: #40a9ff !important;
+        color: #fff !important;
+      }
+    }
+    
+    // 全部按钮特殊样式 - 未选中时
+    &:first-child:not(.ant-btn-primary) {
+      background-color: #f5f5f5;
+      border-color: #d9d9d9;
+      color: #666;
+      
+      &:hover {
+        background-color: #e6f7ff;
+        border-color: #40a9ff;
+        color: #40a9ff;
+      }
+    }
+    
+    // 图标样式优化
+    .anticon {
+      font-size: 14px;
+      margin-right: 4px;
+      transition: color 0.3s ease;
+      color: #666; // 默认颜色
+    }
+    
+    // 悬停时图标颜色变化
+    &:hover .anticon {
+      color: #40a9ff !important;
+    }
+    
+    // 选中状态时图标颜色
+    &.ant-btn-primary .anticon {
+      color: #fff !important;
+    }
+    
+    // 选中状态悬停时图标颜色
+    &.ant-btn-primary:hover .anticon {
+      color: #fff !important;
+    }
+    
+    // 全部按钮未选中时图标颜色
+    &:first-child:not(.ant-btn-primary) .anticon {
+      color: #666;
+    }
+    
+    // 全部按钮悬停时图标颜色
+    &:first-child:not(.ant-btn-primary):hover .anticon {
+      color: #40a9ff;
+    }
+  }
+}
+
+// 响应式处理
+@media (max-width: 768px) {
+  .filter-button-group {
+    gap: 6px;
+    
+    .ant-btn {
+      font-size: 12px;
+      padding: 0 12px;
+      height: 28px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .filter-button-group {
+    gap: 4px;
+    
+    .ant-btn {
+      font-size: 11px;
+      padding: 0 8px;
+      height: 24px;
+      border-radius: 12px;
+    }
+  }
+}
+
+// 圆形按钮样式优化
+.ant-btn-circle {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+  }
+  
+  .anticon {
+    font-size: 14px;
+  }
+}

src/pages/layout/components/Breadcrumb.tsx

@@ -58,7 +58,7 @@ const Breadcrumb: React.FC<Props> = (props: Props) => {
     };
 
     const items = routerMatchList.map((item, index) => {
-        const color = (index === 0 || index < routerMatchList.length - 1) ? '#8C8C8C' : '#595959';
+        const color = (index === 0 || index < routerMatchList.length - 1) ? '#595959' : '#1a1a1a';
         return {
             key: index,
             title: <Link

src/router.tsx

@@ -44,7 +44,7 @@ const routerList: RouteObject[] = [
                 path: '/deepseek/questionAnswer',
                 handle: {
                     menuLevel: 1,
-                    breadcrumbName: '问答应用',
+                    breadcrumbName: '问答广场',
                 },
                 children: [
                     {