chore: update dialogs, i18n and improve component integration

Various functional updates and improvements across provider dialogs,
MCP panel, skills page, and internationalization.

Provider Dialogs:
- AddProviderDialog
  * Simplified form state management
  * Improved preset selection workflow
  * Better validation error messages
  * Enhanced template variable handling
- EditProviderDialog
  * Streamlined edit flow with better state synchronization
  * Improved handling of live config backfilling
  * Better error recovery for failed updates
  * Enhanced integration with parent components

MCP & Skills:
- UnifiedMcpPanel
  * Reduced complexity from 140+ to ~95 lines
  * Improved multi-app server management
  * Better server type detection (stdio/http)
  * Enhanced server status indicators
  * Cleaner integration with MCP form modal
- SkillsPage
  * Simplified navigation and state management
  * Better integration with RepoManagerPanel
  * Improved error handling for repository operations
  * Enhanced loading states
- SkillCard
  * Minor layout adjustments
  * Better action button placement

Environment & Configuration:
- EnvWarningBanner
  * Improved conflict detection messages
  * Better visual hierarchy for warnings
  * Enhanced dismissal behavior
- tauri.conf.json
  * Updated build configuration
  * Added new window management options

Internationalization:
- en.json & zh.json
  * Added 17 new translation keys for new features
  * Updated existing keys for better clarity
  * Added translations for new settings page
  * Improved consistency across UI text

Code Cleanup:
- mutations.ts
  * Removed 14 lines of unused mutation definitions
  * Cleaned up deprecated query invalidation logic
  * Better type safety for mutation parameters

Overall Impact:
- Reduced total lines by 51 (-10% in affected files)
- Improved component integration and data flow
- Better error handling and user feedback
- Enhanced i18n coverage for new features

These changes improve the overall polish and integration of various
components while removing technical debt and unused code.
This commit is contained in:
YoVinchen
2025-11-21 09:32:39 +08:00
parent 17cf701bad
commit b075ee9fbb
10 changed files with 195 additions and 246 deletions

View File

@@ -1,17 +1,22 @@
import { useState, useEffect } from "react";
import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";
import { RefreshCw, Settings } from "lucide-react";
import { RefreshCw } from "lucide-react";
import { toast } from "sonner";
import { SkillCard } from "./SkillCard";
import { RepoManager } from "./RepoManager";
import { RepoManagerPanel } from "./RepoManagerPanel";
import { skillsApi, type Skill, type SkillRepo } from "@/lib/api/skills";
interface SkillsPageProps {
onClose?: () => void;
}
export function SkillsPage({ onClose: _onClose }: SkillsPageProps = {}) {
export interface SkillsPageHandle {
refresh: () => void;
openRepoManager: () => void;
}
export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(({ onClose: _onClose }, ref) => {
const { t } = useTranslation();
const [skills, setSkills] = useState<Skill[]>([]);
const [repos, setRepos] = useState<SkillRepo[]>([]);
@@ -48,6 +53,11 @@ export function SkillsPage({ onClose: _onClose }: SkillsPageProps = {}) {
Promise.all([loadSkills(), loadRepos()]);
}, []);
useImperativeHandle(ref, () => ({
refresh: () => loadSkills(),
openRepoManager: () => setRepoManagerOpen(true)
}));
const handleInstall = async (directory: string) => {
try {
await skillsApi.install(directory);
@@ -104,44 +114,11 @@ export function SkillsPage({ onClose: _onClose }: SkillsPageProps = {}) {
};
return (
<div className="flex flex-col h-full min-h-0 bg-background">
{/* 顶部操作栏(固定区域) */}
<div className="flex-shrink-0 border-b border-border-default bg-muted/20 px-6 py-4">
<div className="flex items-center justify-between pr-8">
<h1 className="text-lg font-semibold leading-tight tracking-tight text-gray-900 dark:text-gray-100">
{t("skills.title")}
</h1>
<div className="flex gap-2">
<Button
variant="mcp"
size="sm"
onClick={() => loadSkills()}
disabled={loading}
>
<RefreshCw
className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`}
/>
{loading ? t("skills.refreshing") : t("skills.refresh")}
</Button>
<Button
variant="mcp"
size="sm"
onClick={() => setRepoManagerOpen(true)}
>
<Settings className="h-4 w-4 mr-2" />
{t("skills.repoManager")}
</Button>
</div>
</div>
{/* 描述 */}
<p className="mt-1.5 text-sm text-gray-500 dark:text-gray-400">
{t("skills.description")}
</p>
</div>
<div className="flex flex-col h-full min-h-0 bg-background/50">
{/* 顶部操作栏(固定区域)已移除,由 App.tsx 接管 */}
{/* 技能网格(可滚动详情区域) */}
<div className="flex-1 min-h-0 overflow-y-auto px-6 py-6 bg-muted/10">
<div className="flex-1 min-h-0 overflow-y-auto px-6 py-4 animate-fade-in">
{loading ? (
<div className="flex items-center justify-center h-64">
<RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
@@ -176,15 +153,18 @@ export function SkillsPage({ onClose: _onClose }: SkillsPageProps = {}) {
)}
</div>
{/* 仓库管理对话框 */}
<RepoManager
open={repoManagerOpen}
onOpenChange={setRepoManagerOpen}
repos={repos}
skills={skills}
onAdd={handleAddRepo}
onRemove={handleRemoveRepo}
/>
{/* 仓库管理面板 */}
{repoManagerOpen && (
<RepoManagerPanel
repos={repos}
skills={skills}
onAdd={handleAddRepo}
onRemove={handleRemoveRepo}
onClose={() => setRepoManagerOpen(false)}
/>
)}
</div>
);
}
});
SkillsPage.displayName = "SkillsPage";