yovinchen/claudia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整页面比例

Browse Source
This commit is contained in:
YoVinchen
2025-08-10 07:54:30 +08:00
parent 6d87b7cecc
commit 68baf5f1e9
3 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ClaudeCodeSession.tsx
View File

@@ -1472,22 +1472,26 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
{/* Main Content with Input */}
<div className={cn(
"flex-1 transition-all duration-300 relative flex flex-col",
showFileExplorer && "pl-[280px]",
showGitPanel && "pr-[320px]"
)}>
"flex-1 transition-all duration-300 relative flex flex-col"
)}
style={{
marginLeft: showFileExplorer ? '15vw' : 'auto',
marginRight: showGitPanel ? '15vw' : 'auto',
width: (!showFileExplorer && !showGitPanel) ? '90%' : 'calc(100% - ' + ((showFileExplorer ? 15 : 0) + (showGitPanel ? 15 : 0)) + 'vw)',
maxWidth: (!showFileExplorer && !showGitPanel) ? '100%' : 'none'
}}>
{showPreview ? (
// Split pane layout when preview is active
<div className="h-full">
<SplitPane
left={
<div className="h-full flex flex-col">
<div className="flex-1 flex flex-col max-w-5xl mx-auto w-full">
<div className="flex-1 flex flex-col mx-auto w-full px-4">
{projectPathInput}
{messagesList}
</div>
{/* Floating Input for preview mode */}
<div className="max-w-5xl mx-auto w-full relative">
<div className="mx-auto w-full relative px-4">
<FloatingPromptInput
ref={floatingPromptRef}
onSend={handleSendPrompt}
@@ -1528,7 +1532,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
// Original layout when no preview or editor
<div className="h-full flex flex-col relative">
{/* Main content area with messages */}
<div className="flex-1 flex flex-col max-w-5xl mx-auto w-full">
<div className="flex-1 flex flex-col mx-auto w-full px-4">
{projectPathInput}
{messagesList}
@@ -1545,7 +1549,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
</div>
{/* Floating elements container - same width as main content */}
<div className="max-w-5xl mx-auto w-full relative">
<div className="mx-auto w-full relative px-4">
<ErrorBoundary>
{/* Queued Prompts Display */}
<AnimatePresence>

17
src/components/FileExplorerPanelEnhanced.tsx
View File

@@ -153,7 +153,7 @@ export const FileExplorerPanelEnhanced: React.FC<FileExplorerPanelEnhancedProps>
const [flattenedNodes, setFlattenedNodes] = useState<FileNode[]>([]);
const [lastClickTime, setLastClickTime] = useState(0);
const [lastClickPath, setLastClickPath] = useState<string | null>(null);
const [width, setWidth] = useState(320);
const [width, setWidth] = useState(window.innerWidth * 0.15); // 15% of viewport width
const [isResizing, setIsResizing] = useState(false);
const [viewMode, setViewMode] = useState<"tree" | "folder">("tree");
@@ -161,13 +161,26 @@ export const FileExplorerPanelEnhanced: React.FC<FileExplorerPanelEnhancedProps>
const resizeHandleRef = useRef<HTMLDivElement>(null);
const unlistenRef = useRef<UnlistenFn | null>(null);
// 响应窗口大小变化
useEffect(() => {
const handleResize = () => {
// 保持15%的比例
setWidth(window.innerWidth * 0.15);
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
// 处理拖拽调整宽度
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
if (!isResizing) return;
const newWidth = e.clientX;
if (newWidth >= 200 && newWidth <= 600) {
const minWidth = window.innerWidth * 0.1; // Min 10%
const maxWidth = window.innerWidth * 0.25; // Max 25%
if (newWidth >= minWidth && newWidth <= maxWidth) {
setWidth(newWidth);
}
};

17
src/components/GitPanelEnhanced.tsx
View File

@@ -139,7 +139,7 @@ export const GitPanelEnhanced: React.FC<GitPanelEnhancedProps> = ({
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [activeTab, setActiveTab] = useState("changes");
const [width, setWidth] = useState(320);
const [width, setWidth] = useState(window.innerWidth * 0.15); // 15% of viewport width
const [isResizing, setIsResizing] = useState(false);
const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
const [selectedPath, setSelectedPath] = useState<string | null>(null);
@@ -153,6 +153,17 @@ export const GitPanelEnhanced: React.FC<GitPanelEnhancedProps> = ({
const refreshIntervalRef = useRef<NodeJS.Timeout | null>(null);
// 响应窗口大小变化
useEffect(() => {
const handleResize = () => {
// 保持15%的比例
setWidth(window.innerWidth * 0.15);
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
// 处理拖拽调整宽度
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
@@ -160,8 +171,10 @@ export const GitPanelEnhanced: React.FC<GitPanelEnhancedProps> = ({
const windowWidth = window.innerWidth;
const newWidth = windowWidth - e.clientX;
const minWidth = window.innerWidth * 0.1; // Min 10%
const maxWidth = window.innerWidth * 0.25; // Max 25%
if (newWidth >= 200 && newWidth <= 600) {
if (newWidth >= minWidth && newWidth <= maxWidth) {
setWidth(newWidth);
}
};