UI: button style unified

frontend/src/i18n/locales/en.json

@@ -366,6 +366,7 @@
   "subagents": "Subagents",
   "subagentManagement": "Subagent Management",
   "manageSubagentsDesc": "Manage subagents for this project",
+  "createSubagent": "New Subagent",
   "addSubagent": "Add Subagent",
   "editSubagent": "Edit Subagent",
   "subagentName": "Subagent Name",

frontend/src/i18n/locales/zh.json

@@ -367,6 +367,7 @@
   "subagents": "智能体编排",
   "subagentManagement": "智能体编排",
   "manageSubagentsDesc": "管理该项目的子智能体",
+  "createSubagent": "新建子智能体",
   "addSubagent": "添加子智能体",
   "editSubagent": "编辑子智能体",
   "subagentName": "子智能体名称",

frontend/src/pages/DataSources.tsx

@@ -346,12 +346,12 @@ export function DataSources() {
 
   return (
     <div className="h-full flex flex-col bg-background">
-      <div className="border-b border-border px-8 py-5 flex items-center justify-between">
+      <div className="h-14 px-6 flex items-center justify-between border-b border-border bg-background">
-        <div>
+        <div className="flex items-center gap-2 text-foreground/80 font-medium">
-          <h1 className="text-2xl font-bold text-foreground">{t('dataSourceConfig')}</h1>
+          <Database className="h-5 w-5 text-indigo-500" />
-          <p className="text-sm text-muted-foreground mt-1">{t('manageDataSourceConnections')}</p>
+          {t('dataSourceConfig')}
         </div>
-        <Button onClick={handleCreate} className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground gap-2">
+        <Button onClick={handleCreate} className="h-9 bg-[#ff4d29] hover:bg-[#ff4d29]/90 text-white gap-2 rounded-md px-3">
           <Plus className="h-4 w-4" />
           {t('newDataSource')}
         </Button>

frontend/src/pages/KnowledgeBases.tsx

@@ -406,12 +406,12 @@ export function KnowledgeBases() {
 
   return (
     <div className="h-full flex flex-col bg-background">
-      <div className="border-b border-border px-8 py-5 flex items-center justify-between">
+      <div className="h-14 px-6 flex items-center justify-between border-b border-border bg-background">
-        <div>
+        <div className="flex items-center gap-2 text-foreground/80 font-medium">
-          <h1 className="text-2xl font-bold text-foreground">{t('knowledgeBases')}</h1>
+          <BookOpen className="h-5 w-5 text-indigo-500" />
-          <p className="text-sm text-muted-foreground mt-1">{t('knowledgeBaseSettingsDesc', 'Manage knowledge bases and their documents')}</p>
+          {t('knowledgeBases')}
         </div>
-        <Button onClick={handleCreateKb} className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground gap-2" disabled={!currentProject}>
+        <Button onClick={handleCreateKb} className="h-9 bg-[#ff4d29] hover:bg-[#ff4d29]/90 text-white gap-2 rounded-md px-3" disabled={!currentProject}>
           <Plus className="h-4 w-4" />
           {t('createKnowledgeBase', 'New Knowledge Base')}
         </Button>

frontend/src/pages/ModelConfigs.tsx

@@ -217,7 +217,7 @@ export function ModelConfigs() {
           <Button variant="outline" size="icon" className="h-8 w-8 text-muted-foreground" onClick={fetchConfigs}>
             <RefreshCw className="h-4 w-4" />
           </Button>
-          <Button className="h-8 px-3 bg-indigo-600 hover:bg-indigo-700 text-primary-foreground text-sm" onClick={openCreate}>
+          <Button className="h-9 px-3 bg-[#ff4d29] hover:bg-[#ff4d29]/90 text-white text-sm rounded-md" onClick={openCreate}>
             <Plus className="h-4 w-4 mr-1" />{t('addModel')}</Button>
         </div>
       </div>

frontend/src/pages/Projects.tsx

@@ -82,8 +82,9 @@ export function Projects() {
         <Button onClick={() => {
           setFormData({ name: '', description: '' });
           setIsCreateDialogOpen(true);
-        }} size="sm" className="gap-2">
+        }} className="h-9 gap-2 bg-[#ff4d29] hover:bg-[#ff4d29]/90 text-white rounded-md px-3">
-          <Plus className="h-4 w-4" />{t('newProject')}</Button>
+          <Plus className="h-4 w-4" />{t('newProject')}
+        </Button>
       </div>
 
       <div className="flex-1 p-6 overflow-auto">

frontend/src/pages/Skills.tsx

@@ -286,14 +286,26 @@ export function Skills() {
 
   return (
     <div className="h-full flex flex-col bg-background overflow-hidden">
-      <div className="border-b border-border px-8 pt-5 pr-24 bg-background shrink-0">
+      <div className="h-14 px-6 flex items-center justify-between border-b border-border bg-background">
-        <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2 text-foreground/80 font-medium">
-          <div>
+          <Wand2 className="h-5 w-5 text-indigo-500" />
-            <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
+          {t('skillsRepository')}
-              < Wand2 className="h-6 w-6 text-indigo-500" />{t('skillsRepository')}</h1>
+        </div>
-            <p className="text-sm text-muted-foreground mt-1">{t('manageAiSkillsDesc')}</p>
+        <div className="flex items-center gap-3">
+          <div className="flex bg-muted/50 rounded-lg p-1">
+            <button 
+              className={`px-3 py-1 text-sm font-medium rounded-md transition-colors ${activeTab === 'skills' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground/80'}`}
+              onClick={() => setActiveTab('skills')}
+            >
+              {t('skills')}
+            </button>
+            <button 
+              className={`px-3 py-1 text-sm font-medium rounded-md transition-colors ${activeTab === 'mcp' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground/80'}`}
+              onClick={() => setActiveTab('mcp')}
+            >
+              {t('mcpConfig')}
+            </button>
           </div>
-          <div className="flex gap-3">
           {activeTab === 'skills' ? (
             <>
               <input
@@ -304,7 +316,7 @@ export function Skills() {
                 accept=".md,.zip,.tar.gz,.tgz"
               />
               <Button 
-                  className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground gap-2"
+                className="h-9 bg-[#ff4d29] hover:bg-[#ff4d29]/90 text-white gap-2 rounded-md px-3"
                 onClick={() => fileInputRef.current?.click()}
               >
                 <Upload className="h-4 w-4" />{t('uploadSkill')}
@@ -312,7 +324,7 @@ export function Skills() {
             </>
           ) : (
             <Button 
-                className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground gap-2"
+              className="h-9 bg-[#ff4d29] hover:bg-[#ff4d29]/90 text-white gap-2 rounded-md px-3"
               onClick={() => setIsMcpDialogOpen(true)}
             >
               <Plus className="h-4 w-4" />{t('addMcpServer')}
@@ -320,21 +332,6 @@ export function Skills() {
           )}
         </div>
       </div>
-        <div className="flex gap-6">
-          <button 
-            className={`pb-3 text-sm font-medium border-b-2 transition-colors ${activeTab === 'skills' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-muted-foreground hover:text-foreground/80'}`}
-            onClick={() => setActiveTab('skills')}
-          >
-            {t('skills')}
-          </button>
-          <button 
-            className={`pb-3 text-sm font-medium border-b-2 transition-colors ${activeTab === 'mcp' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-muted-foreground hover:text-foreground/80'}`}
-            onClick={() => setActiveTab('mcp')}
-          >
-            {t('mcpConfig')}
-          </button>
-        </div>
-      </div>
 
       <div className="flex-1 overflow-auto p-4 md:p-8 bg-muted/50/30">
         {activeTab === 'skills' ? (

frontend/src/pages/Subagents.tsx

@@ -130,22 +130,20 @@ export function Subagents() {
 
   return (
     <div className="h-full flex flex-col bg-background overflow-hidden">
-      <div className="border-b border-border px-8 pt-5 pb-5 bg-background shrink-0 flex items-center justify-between">
+      <div className="h-14 px-6 flex items-center justify-between border-b border-border bg-background shrink-0">
-        <div>
+        <div className="flex items-center gap-2 text-foreground/80 font-medium">
-          <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
+          <Bot className="h-5 w-5 text-indigo-500" />
-            <Bot className="h-6 w-6 text-indigo-500" />{t('subagentManagement', 'Subagent Management')}
+          {t('subagentManagement', 'Subagent Management')}
-          </h1>
-          <p className="text-sm text-muted-foreground mt-1">{t('manageSubagentsDesc', 'Manage subagents for this project')}</p>
         </div>
         <Button 
-          className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground gap-2"
+          className="h-9 bg-[#ff4d29] hover:bg-[#ff4d29]/90 text-white gap-2 rounded-md px-3"
           onClick={() => {
             setEditingSubagent(null);
             setNewSubagent({ name: '', description: '', model: '', instructions: '', status: 'active' });
             setIsDialogOpen(true);
           }}
         >
-          <Plus className="h-4 w-4" />{t('addSubagent', 'Add Subagent')}
+          <Plus className="h-4 w-4" />{t('createSubagent', 'New Subagent')}
         </Button>
       </div>
 

frontend/src/pages/Users.tsx

@@ -121,7 +121,7 @@ export function Users() {
           {t('userManagement')}
         </div>
         <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogTrigger className="inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 bg-indigo-600 hover:bg-indigo-700 text-primary-foreground rounded-md px-3" onClick={() => handleOpenDialog()}>
+          <DialogTrigger className="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-9 bg-[#ff4d29] hover:bg-[#ff4d29]/90 text-white rounded-md px-3" onClick={() => handleOpenDialog()}>
             <Plus className="h-4 w-4" />
             {t('addUser')}
           </DialogTrigger>