feat: 添加返回按钮和优化仓库卡片,移除未使用的 RepoInfoCard 组件

This commit is contained in:
2026-02-26 01:39:52 +08:00
parent a54597c65e
commit 245bbb33b0
5 changed files with 74 additions and 305 deletions

View File

@@ -2,18 +2,18 @@ import { useSearch } from "@tanstack/react-router";
import { useRepoStore } from "../store";
import { useEffect, useState } from "react";
import { useShallow } from "zustand/shallow";
import { RepoInfoCard } from "../components/RepoInfoCard";
import BuildConfig from "../components/BuildConfig";
import { CommonRepoDialog } from "../page";
import { RepoCard } from "../components/RepoCard";
export const App = () => {
const params = useSearch({ strict: false }) as { repo?: string };
const params = useSearch({ strict: false }) as { repo?: string, tab?: string };
const repoStore = useRepoStore(useShallow((state) => ({
getItem: state.getItem,
editRepo: state.editRepo,
refresH: state.refresh,
})));
const [activeTab, setActiveTab] = useState("build");
const [activeTab, setActiveTab] = useState(params.tab || "build");
const tabs = [
{ key: "build", label: "构建配置" },
{ key: "info", label: "基本信息" },
@@ -31,16 +31,16 @@ export const App = () => {
}
return (
<div className="p-2 flex-col flex gap-2 h-full">
<div className="px-4">
<RepoInfoCard />
</div>
<div className="px-4 h-[calc(100%-200px)] scrollbar flex-col flex gap-4 overflow-hidden">
<div className="px-4 h-full scrollbar flex-col flex gap-4 overflow-hidden">
<div className="flex border-b mb-4">
{tabs.map(tab => (
<div
key={tab.key}
className={`px-4 py-2 cursor-pointer ${activeTab === tab.key ? 'border-b-2 border-gray-500' : ''}`}
onClick={() => setActiveTab(tab.key)}
onClick={() => {
setActiveTab(tab.key)
history.replaceState(null, '', `?repo=${params.repo}&tab=${tab.key}`)
}}
>
{tab.label}
</div>
@@ -48,8 +48,11 @@ export const App = () => {
</div>
{activeTab === 'build' && <BuildConfig />}
{activeTab === 'info' && (
<div className="p-4 border rounded bg-white h-full overflow-auto scrollbar">
<pre className="whitespace-pre-wrap break-all">{JSON.stringify(repoStore.editRepo, null, 2)}</pre>
<div className="flex flex-col gap-4 h-full">
<RepoCard repo={repoStore.editRepo} showReturn />
<div className="p-4 border rounded bg-white h-full overflow-auto scrollbar">
<pre className="whitespace-pre-wrap break-all">{JSON.stringify(repoStore.editRepo, null, 2)}</pre>
</div>
</div>
)}
</div>