Refactor code structure for improved readability and maintainability

This commit is contained in:
catlog22
2026-02-28 22:32:07 +08:00
parent 19fb4d86c7
commit 67b2129f3c
60 changed files with 3002 additions and 643 deletions

View File

@@ -2,7 +2,7 @@
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Preconnect to Google Fonts for faster font loading -->
<link rel="preconnect" href="https://fonts.googleapis.com" />

View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<!-- Three horizontal lines - line style -->
<line x1="3" y1="6" x2="18" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="3" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="3" y1="18" x2="12" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<!-- Status dot - follows theme color -->
<circle cx="19" cy="17" r="3" fill="currentColor"/>
</svg>

After

Width:  |  Height:  |  Size: 532 B

View File

@@ -0,0 +1,75 @@
// ========================================
// CCW Logo Component
// ========================================
// Line-style logo for Claude Code Workflow
import { cn } from '@/lib/utils';
interface CCWLogoProps {
/** Size of the icon */
size?: number;
/** Additional class names */
className?: string;
/** Whether to show the status dot */
showDot?: boolean;
}
/**
* Line-style CCW logo component
* Features three horizontal lines with a status dot that follows theme color
*/
export function CCWLogo({ size = 24, className, showDot = true }: CCWLogoProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={cn('ccw-logo', className)}
style={{ color: 'hsl(var(--accent))' }}
aria-label="Claude Code Workflow"
>
{/* Three horizontal lines - line style */}
<line
x1="3"
y1="6"
x2="18"
y2="6"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
<line
x1="3"
y1="12"
x2="15"
y2="12"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
<line
x1="3"
y1="18"
x2="12"
y2="18"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
{/* Status dot - follows theme color via currentColor */}
{showDot && (
<circle
cx="19"
cy="17"
r="3"
fill="currentColor"
/>
)}
</svg>
);
}
export default CCWLogo;

View File

@@ -0,0 +1,6 @@
// ========================================
// Icons Index
// ========================================
// Custom icon components for CCW Dashboard
export { CCWLogo } from './CCWLogo';

View File

@@ -7,7 +7,6 @@ import { useCallback } from 'react';
import { Link } from 'react-router-dom';
import { useIntl } from 'react-intl';
import {
Workflow,
Moon,
Sun,
RefreshCw,
@@ -19,6 +18,7 @@ import {
Monitor,
SquareTerminal,
} from 'lucide-react';
import { CCWLogo } from '@/components/icons/CCWLogo';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
@@ -72,11 +72,11 @@ export function Header({
{/* Logo / Brand */}
<Link
to="/"
className="flex items-center gap-2 text-lg font-semibold text-primary hover:opacity-80 transition-opacity"
className="flex items-center gap-2 text-lg font-semibold hover:opacity-80 transition-opacity"
>
<Workflow className="w-6 h-6" />
<span className="hidden sm:inline">{formatMessage({ id: 'navigation.header.brand' })}</span>
<span className="sm:hidden">{formatMessage({ id: 'navigation.header.brandShort' })}</span>
<CCWLogo size={24} className="text-primary" />
<span className="hidden sm:inline text-primary">{formatMessage({ id: 'navigation.header.brand' })}</span>
<span className="sm:hidden text-primary">{formatMessage({ id: 'navigation.header.brandShort' })}</span>
</Link>
{/* A2UI Quick Action Button */}

View File

@@ -866,3 +866,10 @@
[data-theme^="dark"] .markdown-preview .prose code {
background-color: hsl(220 25% 18%);
}
/* ===========================
CCW Logo
=========================== */
.ccw-logo {
color: hsl(var(--accent));
}