mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
Refactor code structure for improved readability and maintainability
This commit is contained in:
@@ -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" />
|
||||
|
||||
8
ccw/frontend/public/favicon.svg
Normal file
8
ccw/frontend/public/favicon.svg
Normal 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 |
75
ccw/frontend/src/components/icons/CCWLogo.tsx
Normal file
75
ccw/frontend/src/components/icons/CCWLogo.tsx
Normal 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;
|
||||
6
ccw/frontend/src/components/icons/index.ts
Normal file
6
ccw/frontend/src/components/icons/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
// ========================================
|
||||
// Icons Index
|
||||
// ========================================
|
||||
// Custom icon components for CCW Dashboard
|
||||
|
||||
export { CCWLogo } from './CCWLogo';
|
||||
@@ -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 */}
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user