generated from kevisual/vite-react-template
feat: 添加返回按钮和优化仓库卡片,移除未使用的 RepoInfoCard 组件
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user