feat(skill): add multi-app skill support for Claude/Codex (#365)

* feat(skill): add multi-app skill support for Claude/Codex/Gemini

- Add app-specific skill management with AppType prefix in skill keys
- Implement per-app skill tracking in database schema
- Add get_skills_for_app command to retrieve skills by application
- Update SkillsPage to support app-specific skill loading with initialApp prop
- Parse app parameter and validate against supported app types
- Maintain backward compatibility with default claude app

* fix(usage): reorder cache columns and prevent header text wrapping

- Swap cache read and cache write columns order
- Add whitespace-nowrap to all table headers to prevent text wrapping
- Improves table readability and layout consistency
This commit is contained in:
YoVinchen
2025-12-08 20:54:17 +08:00
committed by GitHub
parent 622a24ded4
commit 1fb2d5ed44
10 changed files with 298 additions and 83 deletions
+14 -5
View File
@@ -19,11 +19,17 @@ import { RefreshCw, Search } from "lucide-react";
import { toast } from "sonner";
import { SkillCard } from "./SkillCard";
import { RepoManagerPanel } from "./RepoManagerPanel";
import { skillsApi, type Skill, type SkillRepo } from "@/lib/api/skills";
import {
skillsApi,
type Skill,
type SkillRepo,
type AppType,
} from "@/lib/api/skills";
import { formatSkillError } from "@/lib/errors/skillErrorParser";
interface SkillsPageProps {
onClose?: () => void;
initialApp?: AppType;
}
export interface SkillsPageHandle {
@@ -32,7 +38,7 @@ export interface SkillsPageHandle {
}
export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
({ onClose: _onClose }, ref) => {
({ onClose: _onClose, initialApp = "claude" }, ref) => {
const { t } = useTranslation();
const [skills, setSkills] = useState<Skill[]>([]);
const [repos, setRepos] = useState<SkillRepo[]>([]);
@@ -42,11 +48,13 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
const [filterStatus, setFilterStatus] = useState<
"all" | "installed" | "uninstalled"
>("all");
// 使用 initialApp,不允许切换
const selectedApp = initialApp;
const loadSkills = async (afterLoad?: (data: Skill[]) => void) => {
try {
setLoading(true);
const data = await skillsApi.getAll();
const data = await skillsApi.getAll(selectedApp);
setSkills(data);
if (afterLoad) {
afterLoad(data);
@@ -84,6 +92,7 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
useEffect(() => {
Promise.all([loadSkills(), loadRepos()]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useImperativeHandle(ref, () => ({
@@ -93,7 +102,7 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
const handleInstall = async (directory: string) => {
try {
await skillsApi.install(directory);
await skillsApi.install(directory, selectedApp);
toast.success(t("skills.installSuccess", { name: directory }));
await loadSkills();
} catch (error) {
@@ -122,7 +131,7 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
const handleUninstall = async (directory: string) => {
try {
await skillsApi.uninstall(directory);
await skillsApi.uninstall(directory, selectedApp);
toast.success(t("skills.uninstallSuccess", { name: directory }));
await loadSkills();
} catch (error) {
+20 -14
View File
@@ -193,30 +193,36 @@ export function RequestLogTable() {
<Table>
<TableHeader>
<TableRow>
<TableHead>{t("usage.time", "时间")}</TableHead>
<TableHead>{t("usage.provider", "供应商")}</TableHead>
<TableHead className="min-w-[280px]">
<TableHead className="whitespace-nowrap">
{t("usage.time", "时间")}
</TableHead>
<TableHead className="whitespace-nowrap">
{t("usage.provider", "供应商")}
</TableHead>
<TableHead className="min-w-[280px] whitespace-nowrap">
{t("usage.billingModel", "计费模型")}
</TableHead>
<TableHead className="text-right">
<TableHead className="text-right whitespace-nowrap">
{t("usage.inputTokens", "输入")}
</TableHead>
<TableHead className="text-right">
<TableHead className="text-right whitespace-nowrap">
{t("usage.outputTokens", "输出")}
</TableHead>
<TableHead className="text-right min-w-[90px]">
{t("usage.cacheCreationTokens", "缓存写入")}
</TableHead>
<TableHead className="text-right min-w-[90px]">
<TableHead className="text-right min-w-[90px] whitespace-nowrap">
{t("usage.cacheReadTokens", "缓存读取")}
</TableHead>
<TableHead className="text-right">
<TableHead className="text-right min-w-[90px] whitespace-nowrap">
{t("usage.cacheCreationTokens", "缓存写入")}
</TableHead>
<TableHead className="text-right whitespace-nowrap">
{t("usage.totalCost", "成本")}
</TableHead>
<TableHead className="text-center min-w-[140px]">
<TableHead className="text-center min-w-[140px] whitespace-nowrap">
{t("usage.timingInfo", "用时/首字")}
</TableHead>
<TableHead>{t("usage.status", "状态")}</TableHead>
<TableHead className="whitespace-nowrap">
{t("usage.status", "状态")}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -252,10 +258,10 @@ export function RequestLogTable() {
{log.outputTokens.toLocaleString()}
</TableCell>
<TableCell className="text-right">
{log.cacheCreationTokens.toLocaleString()}
{log.cacheReadTokens.toLocaleString()}
</TableCell>
<TableCell className="text-right">
{log.cacheReadTokens.toLocaleString()}
{log.cacheCreationTokens.toLocaleString()}
</TableCell>
<TableCell className="text-right">
${parseFloat(log.totalCostUsd).toFixed(6)}