feat(ui): implement pills-style AppSwitcher with consistent button widths
Replace segmented control with pills-style switcher for better visual consistency.
This commit is contained in:
38
src/App.tsx
38
src/App.tsx
@@ -5,6 +5,7 @@ import ProviderList from "./components/ProviderList";
|
||||
import AddProviderModal from "./components/AddProviderModal";
|
||||
import EditProviderModal from "./components/EditProviderModal";
|
||||
import { ConfirmDialog } from "./components/ConfirmDialog";
|
||||
import { AppSwitcher } from "./components/AppSwitcher";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
@@ -182,39 +183,10 @@ function App() {
|
||||
<header className="app-header">
|
||||
<h1>{activeApp === "claude" ? "Claude Code" : "Codex"} 供应商切换器</h1>
|
||||
<div className="app-tabs">
|
||||
<div className="segmented" role="tablist" aria-label="选择应用">
|
||||
<span
|
||||
className="segmented-thumb"
|
||||
style={{
|
||||
transform:
|
||||
activeApp === "claude"
|
||||
? "translateX(0%)"
|
||||
: "translateX(100%)",
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeApp === "claude"}
|
||||
className={`segmented-item ${
|
||||
activeApp === "claude" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setActiveApp("claude")}
|
||||
>
|
||||
Claude Code
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeApp === "codex"}
|
||||
className={`segmented-item ${
|
||||
activeApp === "codex" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setActiveApp("codex")}
|
||||
>
|
||||
Codex
|
||||
</button>
|
||||
</div>
|
||||
<AppSwitcher
|
||||
activeApp={activeApp}
|
||||
onSwitch={setActiveApp}
|
||||
/>
|
||||
</div>
|
||||
<div className="header-actions">
|
||||
<button className="add-btn" onClick={() => setIsAddModalOpen(true)}>
|
||||
|
||||
Reference in New Issue
Block a user