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:
catlog22
@@ -237,7 +237,7 @@ After Phase 4 completes, determine Phase 5 variant:
|
||||
### Phase 5-L: Loop Completion (when inner_loop=true AND more same-prefix tasks pending)
|
||||
|
||||
1. **TaskUpdate**: Mark current task `completed`
|
||||
2. **Message Bus**: Log completion
|
||||
2. **Message Bus**: Log completion with verification evidence
|
||||
```
|
||||
mcp__ccw-tools__team_msg(
|
||||
operation="log",
|
||||
@@ -245,7 +245,7 @@ After Phase 4 completes, determine Phase 5 variant:
|
||||
from=<role>,
|
||||
to="coordinator",
|
||||
type=<message_types.success>,
|
||||
summary="[<role>] <task-id> complete. <brief-summary>",
|
||||
summary="[<role>] <task-id> complete. <brief-summary>. Verified: <verification_method>",
|
||||
ref=<artifact-path>
|
||||
)
|
||||
```
|
||||
@@ -283,7 +283,7 @@ After Phase 4 completes, determine Phase 5 variant:
|
||||
| Condition | Action |
|
||||
|-----------|--------|
|
||||
| Same-prefix successor (inner loop role) | Do NOT spawn — main agent handles via inner loop |
|
||||
| 1 ready task, simple linear successor, different prefix | Spawn directly via `Task(run_in_background: true)` |
|
||||
| 1 ready task, simple linear successor, different prefix | Spawn directly via `Task(run_in_background: true)` + log `fast_advance` to message bus |
|
||||
| Multiple ready tasks (parallel window) | SendMessage to coordinator (needs orchestration) |
|
||||
| No ready tasks + others running | SendMessage to coordinator (status update) |
|
||||
| No ready tasks + nothing running | SendMessage to coordinator (pipeline may be complete) |
|
||||
@@ -311,6 +311,23 @@ inner_loop: <true|false based on successor role>`
|
||||
})
|
||||
```
|
||||
|
||||
### Fast-Advance Notification
|
||||
|
||||
After spawning a successor via fast-advance, MUST log to message bus:
|
||||
|
||||
```
|
||||
mcp__ccw-tools__team_msg(
|
||||
operation="log",
|
||||
team=<session_id>,
|
||||
from=<role>,
|
||||
to="coordinator",
|
||||
type="fast_advance",
|
||||
summary="[<role>] fast-advanced <completed-task-id> → spawned <successor-role> for <successor-task-id>"
|
||||
)
|
||||
```
|
||||
|
||||
This is a passive log entry (NOT a SendMessage). Coordinator reads it on next callback to reconcile `active_workers`.
|
||||
|
||||
### SendMessage Format
|
||||
|
||||
```
|
||||
@@ -320,8 +337,10 @@ SendMessage(team_name=<team_name>, recipient="coordinator", message="[<role>] <f
|
||||
**Final report contents**:
|
||||
- Tasks completed (count + list)
|
||||
- Artifacts produced (paths)
|
||||
- Files modified (paths + before/after evidence from Phase 4 verification)
|
||||
- Discuss results (verdicts + ratings)
|
||||
- Key decisions (from context_accumulator)
|
||||
- Verification summary (methods used, pass/fail status)
|
||||
- Any warnings or issues
|
||||
|
||||
---
|
||||
|
||||
@@ -90,16 +90,26 @@ Apply merging rules to reduce role count (cap at 5).
|
||||
|
||||
### Step 6: Role-Spec Metadata Assignment
|
||||
|
||||
For each role, determine frontmatter fields:
|
||||
For each role, determine frontmatter and generation hints:
|
||||
|
||||
| Field | Derivation |
|
||||
|-------|------------|
|
||||
| `prefix` | From capability prefix (e.g., RESEARCH, DRAFT, IMPL) |
|
||||
| `inner_loop` | `true` if role has 2+ serial same-prefix tasks |
|
||||
| `subagents` | Inferred from responsibility type: orchestration -> [explore], code-gen (docs) -> [explore], validation -> [] |
|
||||
| `subagents` | Suggested, not mandatory — coordinator may adjust based on task needs |
|
||||
| `pattern_hint` | Reference pattern name from role-spec-template (research/document/code/analysis/validation) — guides coordinator's Phase 2-4 composition, NOT a rigid template selector |
|
||||
| `output_type` | `artifact` (new files in session/artifacts/) / `codebase` (modify existing project files) / `mixed` (both) — determines verification strategy in Behavioral Traits |
|
||||
| `message_types.success` | `<prefix>_complete` |
|
||||
| `message_types.error` | `error` |
|
||||
|
||||
**output_type derivation**:
|
||||
|
||||
| Task Signal | output_type | Example |
|
||||
|-------------|-------------|---------|
|
||||
| "write report", "analyze", "research" | `artifact` | New analysis-report.md in session |
|
||||
| "update docs", "modify code", "fix bug" | `codebase` | Modify existing project files |
|
||||
| "implement feature + write summary" | `mixed` | Code changes + implementation summary |
|
||||
|
||||
## Phase 4: Output
|
||||
|
||||
Write `<session-folder>/task-analysis.json`:
|
||||
@@ -132,6 +142,8 @@ Write `<session-folder>/task-analysis.json`:
|
||||
"inner_loop": false,
|
||||
"role_spec_metadata": {
|
||||
"subagents": ["explore"],
|
||||
"pattern_hint": "research",
|
||||
"output_type": "artifact",
|
||||
"message_types": {
|
||||
"success": "research_complete",
|
||||
"error": "error"
|
||||
|
||||
@@ -60,10 +60,12 @@ Receive callback from [<role>]
|
||||
+- None completed -> STOP
|
||||
```
|
||||
|
||||
**Fast-advance note**: A worker may have already spawned its successor via fast-advance. When processing a callback:
|
||||
1. Check if the expected next task is already `in_progress` (fast-advanced)
|
||||
2. If yes -> skip spawning that task, update active_workers to include the fast-advanced worker
|
||||
3. If no -> normal handleSpawnNext
|
||||
**Fast-advance reconciliation**: A worker may have already spawned its successor via fast-advance. When processing any callback or resume:
|
||||
1. Read recent `fast_advance` messages from team_msg (type="fast_advance")
|
||||
2. For each fast_advance message: add the spawned successor to `active_workers` if not already present
|
||||
3. Check if the expected next task is already `in_progress` (fast-advanced)
|
||||
4. If yes -> skip spawning that task (already running)
|
||||
5. If no -> normal handleSpawnNext
|
||||
|
||||
---
|
||||
|
||||
@@ -262,6 +264,13 @@ handleCallback / handleResume detects:
|
||||
4. -> handleSpawnNext (will re-spawn the task normally)
|
||||
```
|
||||
|
||||
### Fast-Advance State Sync
|
||||
|
||||
On every coordinator wake (handleCallback, handleResume, handleCheck):
|
||||
1. Read team_msg entries with `type="fast_advance"` since last coordinator wake
|
||||
2. For each entry: sync `active_workers` with the spawned successor
|
||||
3. This ensures coordinator's state reflects fast-advance decisions even before the successor's callback arrives
|
||||
|
||||
### Consensus-Blocked Handling
|
||||
|
||||
```
|
||||
|
||||
@@ -182,13 +182,15 @@ Regardless of complexity score or role count, coordinator MUST:
|
||||
|
||||
4. **Call TeamCreate** with team name derived from session ID
|
||||
|
||||
5. **Read `specs/role-spec-template.md`** + task-analysis.json
|
||||
5. **Read `specs/role-spec-template.md`** for Behavioral Traits + Reference Patterns
|
||||
|
||||
6. **For each role in task-analysis.json#roles**:
|
||||
- Fill role-spec template with:
|
||||
- YAML frontmatter: role, prefix, inner_loop, subagents, message_types
|
||||
- Phase 2-4 content from responsibility type reference sections in template
|
||||
- Task-specific instructions from task description
|
||||
- Fill YAML frontmatter: role, prefix, inner_loop, subagents, message_types
|
||||
- **Compose Phase 2-4 content** (NOT copy from template):
|
||||
- Phase 2: Derive input sources and context loading steps from **task description + upstream dependencies**
|
||||
- Phase 3: Describe **execution goal** (WHAT to achieve) from task description — do NOT prescribe specific subagent or tool
|
||||
- Phase 4: Combine **Behavioral Traits** (from template) + **output_type** (from task analysis) to compose verification steps
|
||||
- Reference Patterns may guide phase structure, but task description determines specific content
|
||||
- Write generated role-spec to `<session>/role-specs/<role-name>.md`
|
||||
|
||||
7. **Register roles** in team-session.json#roles (with `role_spec` path instead of `role_file`)
|
||||
|
||||
@@ -63,233 +63,74 @@ message_types:
|
||||
| `<placeholder>` notation | Use angle brackets for variable substitution |
|
||||
| Reference subagents by name | team-worker resolves invocation from its delegation templates |
|
||||
|
||||
## Phase 2-4 Content by Responsibility Type
|
||||
## Behavioral Traits
|
||||
|
||||
Select the matching section based on `responsibility_type` from task analysis.
|
||||
All dynamically generated role-specs MUST embed these traits into Phase 4. Coordinator copies this section verbatim into every generated role-spec as a Phase 4 appendix.
|
||||
|
||||
### orchestration
|
||||
**Design principle**: Constrain behavioral characteristics (accuracy, feedback, quality gates), NOT specific actions (which tool, which subagent, which path). Tasks are diverse — the coordinator composes task-specific Phase 2-3 instructions, while these traits ensure execution quality regardless of task type.
|
||||
|
||||
**Phase 2: Context Assessment**
|
||||
### Accuracy — outputs must be verifiable
|
||||
|
||||
```
|
||||
| Input | Source | Required |
|
||||
|-------|--------|----------|
|
||||
| Task description | From TaskGet | Yes |
|
||||
| Shared memory | <session>/shared-memory.json | No |
|
||||
| Prior artifacts | <session>/artifacts/ | No |
|
||||
| Wisdom | <session>/wisdom/ | No |
|
||||
- Files claimed as **created** → Read to confirm file exists and has content
|
||||
- Files claimed as **modified** → Read to confirm content actually changed
|
||||
- Analysis claimed as **complete** → artifact file exists in `<session>/artifacts/`
|
||||
|
||||
Loading steps:
|
||||
1. Extract session path from task description
|
||||
2. Read shared-memory.json for cross-role context
|
||||
3. Read prior artifacts (if any from upstream tasks)
|
||||
4. Load wisdom files for accumulated knowledge
|
||||
5. Optionally call explore subagent for codebase context
|
||||
```
|
||||
### Feedback Contract — completion report must include evidence
|
||||
|
||||
**Phase 3: Subagent Execution**
|
||||
Phase 4 must produce a verification summary with these fields:
|
||||
|
||||
```
|
||||
Delegate to appropriate subagent based on task:
|
||||
| Field | When Required | Content |
|
||||
|-------|---------------|---------|
|
||||
| `files_produced` | New files created | Path list |
|
||||
| `files_modified` | Existing files changed | Path + before/after line count |
|
||||
| `artifacts_written` | Always | Paths in `<session>/artifacts/` |
|
||||
| `verification_method` | Always | How verified: Read confirm / syntax check / diff |
|
||||
|
||||
Task({
|
||||
subagent_type: "general-purpose",
|
||||
run_in_background: false,
|
||||
description: "<task-type> for <task-id>",
|
||||
prompt: "## Task
|
||||
- <task description>
|
||||
- Session: <session-folder>
|
||||
## Context
|
||||
<prior artifacts + shared memory + explore results>
|
||||
## Expected Output
|
||||
Write artifact to: <session>/artifacts/<artifact-name>.md
|
||||
Return JSON summary: { artifact_path, summary, key_decisions[], warnings[] }"
|
||||
})
|
||||
```
|
||||
### Quality Gate — verify before reporting complete
|
||||
|
||||
**Phase 4: Result Aggregation**
|
||||
- Phase 4 MUST verify Phase 3's **actual output** (not planned output)
|
||||
- Verification fails → retry Phase 3 (max 2 retries)
|
||||
- Still fails → report `partial_completion` with details, NOT `completed`
|
||||
- Update `shared-memory.json` with key findings after verification passes
|
||||
|
||||
```
|
||||
1. Verify subagent output artifact exists
|
||||
2. Read artifact, validate structure/completeness
|
||||
3. Update shared-memory.json with key findings
|
||||
4. Write insights to wisdom/ files
|
||||
```
|
||||
### Error Protocol
|
||||
|
||||
### code-gen (docs)
|
||||
- Primary approach fails → try alternative (different subagent / different tool)
|
||||
- 2 retries exhausted → escalate to coordinator with failure details
|
||||
- NEVER: skip verification and report completed
|
||||
|
||||
**Phase 2: Load Prior Context**
|
||||
---
|
||||
|
||||
```
|
||||
| Input | Source | Required |
|
||||
|-------|--------|----------|
|
||||
| Task description | From TaskGet | Yes |
|
||||
| Prior artifacts | <session>/artifacts/ from upstream | Conditional |
|
||||
| Shared memory | <session>/shared-memory.json | No |
|
||||
## Reference Patterns
|
||||
|
||||
Loading steps:
|
||||
1. Extract session path from task description
|
||||
2. Read upstream artifacts
|
||||
3. Read shared-memory.json for cross-role context
|
||||
```
|
||||
Coordinator MAY reference these patterns when composing Phase 2-4 content for a role-spec. These are **structural guidance, not mandatory templates**. The task description determines specific behavior — patterns only suggest common phase structures.
|
||||
|
||||
**Phase 3: Document Generation**
|
||||
### Research / Exploration
|
||||
|
||||
```
|
||||
Task({
|
||||
subagent_type: "universal-executor",
|
||||
run_in_background: false,
|
||||
description: "Generate <doc-type> for <task-id>",
|
||||
prompt: "## Task
|
||||
- Generate: <document type>
|
||||
- Session: <session-folder>
|
||||
## Prior Context
|
||||
<upstream artifacts + shared memory>
|
||||
## Expected Output
|
||||
Write document to: <session>/artifacts/<doc-name>.md
|
||||
Return JSON: { artifact_path, summary, key_decisions[], warnings[] }"
|
||||
})
|
||||
```
|
||||
- Phase 2: Define exploration scope + load prior knowledge from shared-memory and wisdom
|
||||
- Phase 3: Explore via subagents, direct tool calls, or codebase search — approach chosen by agent
|
||||
- Phase 4: Verify findings documented (Behavioral Traits) + update shared-memory
|
||||
|
||||
**Phase 4: Structure Validation**
|
||||
### Document / Content
|
||||
|
||||
```
|
||||
1. Verify document artifact exists
|
||||
2. Check document has expected sections
|
||||
3. Validate no placeholder text remains
|
||||
4. Update shared-memory.json with document metadata
|
||||
```
|
||||
- Phase 2: Load upstream artifacts + read target files (if modifying existing docs)
|
||||
- Phase 3: Create new documents OR modify existing documents — determined by task, not template
|
||||
- Phase 4: Verify documents exist with expected content (Behavioral Traits) + update shared-memory
|
||||
|
||||
### code-gen (code)
|
||||
### Code Implementation
|
||||
|
||||
**Phase 2: Load Plan/Specs**
|
||||
- Phase 2: Load design/spec artifacts from upstream
|
||||
- Phase 3: Implement code changes — subagent choice and approach determined by task complexity
|
||||
- Phase 4: Syntax check + file verification (Behavioral Traits) + update shared-memory
|
||||
|
||||
```
|
||||
| Input | Source | Required |
|
||||
|-------|--------|----------|
|
||||
| Task description | From TaskGet | Yes |
|
||||
| Plan/design artifacts | <session>/artifacts/ | Conditional |
|
||||
| Shared memory | <session>/shared-memory.json | No |
|
||||
### Analysis / Audit
|
||||
|
||||
Loading steps:
|
||||
1. Extract session path from task description
|
||||
2. Read plan/design artifacts from upstream
|
||||
3. Load shared-memory.json for implementation context
|
||||
```
|
||||
- Phase 2: Load analysis targets (artifacts or source files)
|
||||
- Phase 3: Multi-dimension analysis — perspectives and depth determined by task
|
||||
- Phase 4: Verify report exists + severity classification (Behavioral Traits) + update shared-memory
|
||||
|
||||
**Phase 3: Code Implementation**
|
||||
### Validation / Testing
|
||||
|
||||
```
|
||||
Task({
|
||||
subagent_type: "code-developer",
|
||||
run_in_background: false,
|
||||
description: "Implement <task-id>",
|
||||
prompt: "## Task
|
||||
- <implementation description>
|
||||
- Session: <session-folder>
|
||||
## Plan/Design Context
|
||||
<upstream artifacts>
|
||||
## Expected Output
|
||||
Implement code changes.
|
||||
Write summary to: <session>/artifacts/implementation-summary.md
|
||||
Return JSON: { artifact_path, summary, files_changed[], warnings[] }"
|
||||
})
|
||||
```
|
||||
|
||||
**Phase 4: Syntax Validation**
|
||||
|
||||
```
|
||||
1. Run syntax check (tsc --noEmit or equivalent)
|
||||
2. Verify all planned files exist
|
||||
3. If validation fails -> attempt auto-fix (max 2 attempts)
|
||||
4. Write implementation summary to artifacts/
|
||||
```
|
||||
|
||||
### read-only
|
||||
|
||||
**Phase 2: Target Loading**
|
||||
|
||||
```
|
||||
| Input | Source | Required |
|
||||
|-------|--------|----------|
|
||||
| Task description | From TaskGet | Yes |
|
||||
| Target artifacts/files | From task description or upstream | Yes |
|
||||
| Shared memory | <session>/shared-memory.json | No |
|
||||
|
||||
Loading steps:
|
||||
1. Extract session path and target files from task description
|
||||
2. Read target artifacts or source files for analysis
|
||||
3. Load shared-memory.json for context
|
||||
```
|
||||
|
||||
**Phase 3: Multi-Dimension Analysis**
|
||||
|
||||
```
|
||||
Task({
|
||||
subagent_type: "general-purpose",
|
||||
run_in_background: false,
|
||||
description: "Analyze <target> for <task-id>",
|
||||
prompt: "## Task
|
||||
- Analyze: <target description>
|
||||
- Dimensions: <analysis dimensions from coordinator>
|
||||
- Session: <session-folder>
|
||||
## Target Content
|
||||
<artifact content or file content>
|
||||
## Expected Output
|
||||
Write report to: <session>/artifacts/analysis-report.md
|
||||
Return JSON: { artifact_path, summary, findings[], severity_counts }"
|
||||
})
|
||||
```
|
||||
|
||||
**Phase 4: Severity Classification**
|
||||
|
||||
```
|
||||
1. Verify analysis report exists
|
||||
2. Classify findings by severity (Critical/High/Medium/Low)
|
||||
3. Update shared-memory.json with key findings
|
||||
4. Write issues to wisdom/issues.md
|
||||
```
|
||||
|
||||
### validation
|
||||
|
||||
**Phase 2: Environment Detection**
|
||||
|
||||
```
|
||||
| Input | Source | Required |
|
||||
|-------|--------|----------|
|
||||
| Task description | From TaskGet | Yes |
|
||||
| Implementation artifacts | Upstream code changes | Yes |
|
||||
|
||||
Loading steps:
|
||||
1. Detect test framework from project files
|
||||
2. Get changed files from implementation
|
||||
3. Identify test command and coverage tool
|
||||
```
|
||||
|
||||
**Phase 3: Test-Fix Cycle**
|
||||
|
||||
```
|
||||
Task({
|
||||
subagent_type: "test-fix-agent",
|
||||
run_in_background: false,
|
||||
description: "Test-fix for <task-id>",
|
||||
prompt: "## Task
|
||||
- Run tests and fix failures
|
||||
- Session: <session-folder>
|
||||
- Max iterations: 5
|
||||
## Changed Files
|
||||
<from upstream implementation>
|
||||
## Expected Output
|
||||
Write report to: <session>/artifacts/test-report.md
|
||||
Return JSON: { artifact_path, pass_rate, coverage, remaining_failures[] }"
|
||||
})
|
||||
```
|
||||
|
||||
**Phase 4: Result Analysis**
|
||||
|
||||
```
|
||||
1. Check pass rate >= 95%
|
||||
2. Check coverage meets threshold
|
||||
3. Generate test report with pass/fail counts
|
||||
4. Update shared-memory.json with test results
|
||||
```
|
||||
- Phase 2: Detect test framework + identify changed files from upstream
|
||||
- Phase 3: Run test-fix cycle — iteration count and strategy determined by task
|
||||
- Phase 4: Verify pass rate + coverage (Behavioral Traits) + update shared-memory
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { defineConfig } from 'vitepress'
|
||||
import { withMermaid } from 'vitepress-plugin-mermaid'
|
||||
|
||||
const repoName = process.env.GITHUB_REPOSITORY?.split('/')[1]
|
||||
const isUserOrOrgSite = Boolean(repoName && repoName.endsWith('.github.io'))
|
||||
@@ -7,8 +8,8 @@ const base =
|
||||
process.env.CCW_DOCS_BASE ||
|
||||
(process.env.GITHUB_ACTIONS && repoName && !isUserOrOrgSite ? `/${repoName}/` : '/')
|
||||
|
||||
export default defineConfig({
|
||||
title: 'CCW Documentation',
|
||||
export default withMermaid(defineConfig({
|
||||
title: 'Claude Code Workflow Documentation',
|
||||
description: 'Claude Code Workspace - Advanced AI-Powered Development Environment',
|
||||
lang: 'zh-CN',
|
||||
base,
|
||||
@@ -83,7 +84,7 @@ export default defineConfig({
|
||||
text: '📖 指南',
|
||||
collapsible: false,
|
||||
items: [
|
||||
{ text: 'What is Claude_dms3', link: '/guide/ch01-what-is-claude-dms3' },
|
||||
{ text: 'What is Claude Code Workflow', link: '/guide/ch01-what-is-claude-dms3' },
|
||||
{ text: 'Getting Started', link: '/guide/ch02-getting-started' },
|
||||
{ text: 'Core Concepts', link: '/guide/ch03-core-concepts' },
|
||||
{ text: 'Workflow Basics', link: '/guide/ch04-workflow-basics' },
|
||||
@@ -287,7 +288,7 @@ export default defineConfig({
|
||||
zh: {
|
||||
label: '简体中文',
|
||||
lang: 'zh-CN',
|
||||
title: 'CCW 文档',
|
||||
title: 'Claude Code Workflow 文档',
|
||||
description: 'Claude Code Workspace - 高级 AI 驱动开发环境',
|
||||
themeConfig: {
|
||||
outline: {
|
||||
@@ -312,7 +313,7 @@ export default defineConfig({
|
||||
text: '📖 指南',
|
||||
collapsible: false,
|
||||
items: [
|
||||
{ text: 'Claude_dms3 是什么', link: '/zh/guide/ch01-what-is-claude-dms3' },
|
||||
{ text: 'Claude Code Workflow 是什么', link: '/zh/guide/ch01-what-is-claude-dms3' },
|
||||
{ text: '快速开始', link: '/zh/guide/ch02-getting-started' },
|
||||
{ text: '核心概念', link: '/zh/guide/ch03-core-concepts' },
|
||||
{ text: '工作流基础', link: '/zh/guide/ch04-workflow-basics' },
|
||||
@@ -425,4 +426,4 @@ export default defineConfig({
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
|
||||
@@ -1,42 +1,85 @@
|
||||
<template>
|
||||
<div class="agent-orchestration">
|
||||
<div class="orchestration-title">🤖 Agent Orchestration</div>
|
||||
<div class="orchestration-title">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="title-icon">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
|
||||
</svg>
|
||||
Agent Orchestration
|
||||
</div>
|
||||
|
||||
<div class="agent-flow">
|
||||
<!-- CLI Layer -->
|
||||
<div class="flow-layer cli-layer">
|
||||
<div class="layer-label">CLI Tools</div>
|
||||
<div class="agents-row">
|
||||
<div class="agent-card cli" @mouseenter="showTooltip('cli-explore')" @mouseleave="hideTooltip">🔍 Explore</div>
|
||||
<div class="agent-card cli" @mouseenter="showTooltip('cli-plan')" @mouseleave="hideTooltip">📋 Plan</div>
|
||||
<div class="agent-card cli" @mouseenter="showTooltip('cli-exec')" @mouseleave="hideTooltip">⚡ Execute</div>
|
||||
<div class="agent-card cli" @mouseenter="showTooltip('cli-discuss')" @mouseleave="hideTooltip">💬 Discuss</div>
|
||||
<div class="agent-card cli" @mouseenter="showTooltip('cli-explore')" @mouseleave="hideTooltip">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
Explore
|
||||
</div>
|
||||
<div class="agent-card cli" @mouseenter="showTooltip('cli-plan')" @mouseleave="hideTooltip">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="8" x2="16" y2="8"/><line x1="8" y1="12" x2="16" y2="12"/><line x1="8" y1="16" x2="12" y2="16"/></svg>
|
||||
Plan
|
||||
</div>
|
||||
<div class="agent-card cli" @mouseenter="showTooltip('cli-exec')" @mouseleave="hideTooltip">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
Execute
|
||||
</div>
|
||||
<div class="agent-card cli" @mouseenter="showTooltip('cli-discuss')" @mouseleave="hideTooltip">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
||||
Discuss
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flow Arrow -->
|
||||
<div class="flow-arrow">▼</div>
|
||||
<div class="flow-arrow">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Development Layer -->
|
||||
<div class="flow-layer dev-layer">
|
||||
<div class="layer-label">Development</div>
|
||||
<div class="agents-row">
|
||||
<div class="agent-card dev" @mouseenter="showTooltip('code-dev')" @mouseleave="hideTooltip">👨💻 Code</div>
|
||||
<div class="agent-card dev" @mouseenter="showTooltip('tdd')" @mouseleave="hideTooltip">🧪 TDD</div>
|
||||
<div class="agent-card dev" @mouseenter="showTooltip('test-fix')" @mouseleave="hideTooltip">🔧 Fix</div>
|
||||
<div class="agent-card dev" @mouseenter="showTooltip('code-dev')" @mouseleave="hideTooltip">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
||||
Code
|
||||
</div>
|
||||
<div class="agent-card dev" @mouseenter="showTooltip('tdd')" @mouseleave="hideTooltip">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3h6M12 3v7l-4 8h8l-4-8"/><circle cx="8" cy="20" r="1"/><circle cx="16" cy="20" r="1"/></svg>
|
||||
TDD
|
||||
</div>
|
||||
<div class="agent-card dev" @mouseenter="showTooltip('test-fix')" @mouseleave="hideTooltip">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>
|
||||
Fix
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flow Arrow -->
|
||||
<div class="flow-arrow">▼</div>
|
||||
<div class="flow-arrow">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Output Layer -->
|
||||
<div class="flow-layer output-layer">
|
||||
<div class="layer-label">Output</div>
|
||||
<div class="agents-row">
|
||||
<div class="agent-card doc" @mouseenter="showTooltip('doc-gen')" @mouseleave="hideTooltip">📄 Docs</div>
|
||||
<div class="agent-card ui" @mouseenter="showTooltip('ui-design')" @mouseleave="hideTooltip">🎨 UI</div>
|
||||
<div class="agent-card universal" @mouseenter="showTooltip('universal')" @mouseleave="hideTooltip">🌐 Universal</div>
|
||||
<div class="agent-card doc" @mouseenter="showTooltip('doc-gen')" @mouseleave="hideTooltip">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></svg>
|
||||
Docs
|
||||
</div>
|
||||
<div class="agent-card ui" @mouseenter="showTooltip('ui-design')" @mouseleave="hideTooltip">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
||||
UI
|
||||
</div>
|
||||
<div class="agent-card universal" @mouseenter="showTooltip('universal')" @mouseleave="hideTooltip">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
|
||||
Universal
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -54,16 +97,16 @@ const tooltip = ref(false)
|
||||
const tooltipText = ref('')
|
||||
|
||||
const tooltips = {
|
||||
'cli-explore': 'cli-explore-agent: 代码库探索和语义搜索',
|
||||
'cli-plan': 'cli-planning-agent: 任务规划和分解',
|
||||
'cli-exec': 'cli-execution-agent: 命令执行和结果处理',
|
||||
'cli-discuss': 'cli-discuss-agent: 多视角讨论和共识达成',
|
||||
'code-dev': 'code-developer: 代码实现和开发',
|
||||
'tdd': 'tdd-developer: 测试驱动开发',
|
||||
'test-fix': 'test-fix-agent: 测试修复循环',
|
||||
'doc-gen': 'doc-generator: 文档自动生成',
|
||||
'ui-design': 'ui-design-agent: UI设计和设计令牌',
|
||||
'universal': 'universal-executor: 通用任务执行器'
|
||||
'cli-explore': 'cli-explore-agent: Codebase exploration & semantic search',
|
||||
'cli-plan': 'cli-planning-agent: Task planning & decomposition',
|
||||
'cli-exec': 'cli-execution-agent: Command execution & result handling',
|
||||
'cli-discuss': 'cli-discuss-agent: Multi-perspective discussion & consensus',
|
||||
'code-dev': 'code-developer: Code implementation & development',
|
||||
'tdd': 'tdd-developer: Test-driven development',
|
||||
'test-fix': 'test-fix-agent: Test-fix iteration loop',
|
||||
'doc-gen': 'doc-generator: Auto documentation generation',
|
||||
'ui-design': 'ui-design-agent: UI design & design tokens',
|
||||
'universal': 'universal-executor: General-purpose task executor'
|
||||
}
|
||||
|
||||
function showTooltip(key) {
|
||||
@@ -88,6 +131,10 @@ function hideTooltip() {
|
||||
}
|
||||
|
||||
.orchestration-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
text-align: center;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
@@ -95,6 +142,10 @@ function hideTooltip() {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.agent-flow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -125,6 +176,9 @@ function hideTooltip() {
|
||||
}
|
||||
|
||||
.agent-card {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.9rem;
|
||||
@@ -171,14 +225,13 @@ function hideTooltip() {
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
color: var(--vp-c-divider);
|
||||
font-size: 1.25rem;
|
||||
animation: bounce 2s infinite;
|
||||
color: var(--vp-c-text-4);
|
||||
animation: arrowBounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); opacity: 0.5; }
|
||||
50% { transform: translateY(8px); opacity: 1; }
|
||||
@keyframes arrowBounce {
|
||||
0%, 100% { transform: translateY(0); opacity: 0.4; }
|
||||
50% { transform: translateY(6px); opacity: 0.8; }
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@@ -203,6 +256,14 @@ function hideTooltip() {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.agent-orchestration {
|
||||
padding: 2rem 1rem;
|
||||
|
||||
@@ -1,54 +1,188 @@
|
||||
<template>
|
||||
<div class="hero-animation-container" :class="{ 'is-visible': isVisible }">
|
||||
<div class="glow-bg"></div>
|
||||
<svg viewBox="0 0 400 320" class="hero-svg" preserveAspectRatio="xMidYMid meet">
|
||||
<div class="hero-anim" :class="{ 'is-visible': isVisible }">
|
||||
<svg viewBox="0 0 360 340" class="hero-svg" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur stdDeviation="3.5" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<linearGradient id="pathGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="var(--vp-c-brand-1)" stop-opacity="0" />
|
||||
<stop offset="50%" stop-color="var(--vp-c-brand-1)" stop-opacity="0.5" />
|
||||
<stop offset="100%" stop-color="var(--vp-c-brand-1)" stop-opacity="0" />
|
||||
<linearGradient id="coreGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="var(--vp-c-brand-1)"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="ccwBorder" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="var(--vp-c-brand-1)" stop-opacity="0.6"/>
|
||||
<stop offset="50%" stop-color="#8B5CF6" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="var(--vp-c-brand-1)" stop-opacity="0.6"/>
|
||||
</linearGradient>
|
||||
<filter id="ccwShadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feDropShadow dx="0" dy="1" stdDeviation="3" flood-color="var(--vp-c-brand-1)" flood-opacity="0.12"/>
|
||||
</filter>
|
||||
<linearGradient id="beltFade" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="var(--vp-c-text-3)" stop-opacity="0"/>
|
||||
<stop offset="8%" stop-color="var(--vp-c-text-3)" stop-opacity="0.12"/>
|
||||
<stop offset="92%" stop-color="var(--vp-c-text-3)" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="var(--vp-c-text-3)" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<clipPath id="beltClip">
|
||||
<rect x="10" y="211" width="340" height="14"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
<!-- Connection Lines -->
|
||||
<g class="data-paths">
|
||||
<path v-for="(path, i) in paths" :key="'path-'+i" :d="path" class="connection-path" />
|
||||
<circle v-for="(path, i) in paths" :key="'dot-'+i" r="2" class="data-pulse">
|
||||
<animateMotion :dur="2 + i * 0.4 + 's'" repeatCount="indefinite" :path="path" />
|
||||
<!-- Background mesh -->
|
||||
<g opacity="0.025">
|
||||
<line v-for="i in 6" :key="'v'+i" :x1="i*60" y1="0" :x2="i*60" y2="340" stroke="var(--vp-c-brand-1)" stroke-width="0.5"/>
|
||||
<line v-for="i in 6" :key="'h'+i" x1="0" :y1="i*57" x2="360" :y2="i*57" stroke="var(--vp-c-brand-1)" stroke-width="0.5"/>
|
||||
</g>
|
||||
|
||||
<!-- === CCW Controller === -->
|
||||
<g transform="translate(180, 30)">
|
||||
<!-- Outer pulse rings -->
|
||||
<circle r="38" fill="none" stroke="url(#coreGrad)" stroke-width="0.5" opacity="0.08" class="ccw-ring1"/>
|
||||
<circle r="32" fill="none" stroke="url(#coreGrad)" stroke-width="0.4" opacity="0.12" class="ccw-ring2"/>
|
||||
<!-- Main badge -->
|
||||
<rect x="-56" y="-20" width="112" height="40" rx="12" class="ccw-bg" filter="url(#ccwShadow)"/>
|
||||
<rect x="-56" y="-20" width="112" height="40" rx="12" fill="none" stroke="url(#ccwBorder)" stroke-width="1.2"/>
|
||||
<!-- Logo icon (simplified favicon: blue square + white lines + green dot) -->
|
||||
<g transform="translate(-48, -13)">
|
||||
<rect width="26" height="26" rx="6" fill="var(--vp-c-brand-1)" opacity="0.12"/>
|
||||
<rect width="26" height="26" rx="6" fill="none" stroke="var(--vp-c-brand-1)" stroke-width="0.8" opacity="0.25"/>
|
||||
<line x1="6" y1="9" x2="20" y2="9" stroke="var(--vp-c-brand-1)" stroke-width="2" stroke-linecap="round" opacity="0.65"/>
|
||||
<line x1="6" y1="13" x2="17" y2="13" stroke="var(--vp-c-brand-1)" stroke-width="2" stroke-linecap="round" opacity="0.65"/>
|
||||
<line x1="6" y1="17" x2="14" y2="17" stroke="var(--vp-c-brand-1)" stroke-width="2" stroke-linecap="round" opacity="0.65"/>
|
||||
<circle cx="19" cy="17.5" r="3" fill="#22C55E" opacity="0.8"/>
|
||||
</g>
|
||||
<!-- Text — shifted right to avoid logo overlap -->
|
||||
<text x="16" y="0" text-anchor="middle" class="ccw-label">CCW</text>
|
||||
<text x="16" y="12" text-anchor="middle" class="ccw-sub">Orchestrator</text>
|
||||
<!-- Signal indicator -->
|
||||
<circle cx="50" cy="-12" r="2.5" fill="#22C55E" opacity="0.5" class="ccw-signal"/>
|
||||
<circle cx="50" cy="-12" r="1.2" fill="#22C55E" opacity="0.8"/>
|
||||
</g>
|
||||
|
||||
<!-- Control lines (CCW → stations) -->
|
||||
<path d="M134,50 L134,68 L60,68 L60,90" class="ctrl-line" style="--d:0.3s"/>
|
||||
<path d="M180,50 L180,90" class="ctrl-line" style="--d:0.5s"/>
|
||||
<path d="M226,50 L226,68 L300,68 L300,90" class="ctrl-line" style="--d:0.7s"/>
|
||||
<!-- Signal pulses on control lines -->
|
||||
<circle r="1.5" fill="var(--vp-c-brand-1)" class="line-pulse">
|
||||
<animateMotion dur="2s" repeatCount="indefinite" path="M134,50 L134,68 L60,68 L60,90" begin="0.3s"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="var(--vp-c-brand-1)" class="line-pulse">
|
||||
<animateMotion dur="2s" repeatCount="indefinite" path="M180,50 L180,90" begin="0.5s"/>
|
||||
</circle>
|
||||
<circle r="1.5" fill="var(--vp-c-brand-1)" class="line-pulse">
|
||||
<animateMotion dur="2s" repeatCount="indefinite" path="M226,50 L226,68 L300,68 L300,90" begin="0.7s"/>
|
||||
</circle>
|
||||
<circle cx="60" cy="90" r="2.5" fill="#D97757" opacity="0.5"/>
|
||||
<circle cx="180" cy="90" r="2.5" fill="#10A37F" opacity="0.5"/>
|
||||
<circle cx="300" cy="90" r="2.5" fill="#4285F4" opacity="0.5"/>
|
||||
|
||||
<!-- === Station: Claude (Design) === -->
|
||||
<!-- Outer <g> for SVG positioning, inner <g> for CSS animation -->
|
||||
<g transform="translate(60, 94)">
|
||||
<g class="station" style="--sd:0.3s">
|
||||
<rect x="-40" y="0" width="80" height="66" rx="12" class="station-box" style="--sc:#D97757"/>
|
||||
<circle cy="24" r="14" fill="#D97757" opacity="0.05"/>
|
||||
<!-- Official Claude (Anthropic) icon -->
|
||||
<svg x="-11" y="8" width="22" height="22" viewBox="0 0 16 16" fill="#D97757">
|
||||
<path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/>
|
||||
</svg>
|
||||
<text y="46" text-anchor="middle" class="st-name" fill="#D97757">Claude</text>
|
||||
<text y="58" text-anchor="middle" class="st-role">Design</text>
|
||||
<line x1="0" y1="66" x2="0" y2="104" stroke="#D97757" stroke-width="1.2" opacity="0.2"/>
|
||||
<polygon points="-3,104 3,104 0,110" fill="#D97757" opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- === Station: OpenAI (Build) === -->
|
||||
<g transform="translate(180, 94)">
|
||||
<g class="station" style="--sd:0.5s">
|
||||
<rect x="-40" y="0" width="80" height="66" rx="12" class="station-box" style="--sc:#10A37F"/>
|
||||
<circle cy="24" r="14" fill="#10A37F" opacity="0.05"/>
|
||||
<!-- Official OpenAI icon -->
|
||||
<svg x="-11" y="8" width="22" height="22" viewBox="0 0 16 16" fill="#10A37F">
|
||||
<path d="M14.949 6.547a3.94 3.94 0 0 0-.348-3.273 4.11 4.11 0 0 0-4.4-1.934A4.1 4.1 0 0 0 8.423.2 4.15 4.15 0 0 0 6.305.086a4.1 4.1 0 0 0-1.891.948 4.04 4.04 0 0 0-1.158 1.753 4.1 4.1 0 0 0-1.563.679A4 4 0 0 0 .554 4.72a3.99 3.99 0 0 0 .502 4.731 3.94 3.94 0 0 0 .346 3.274 4.11 4.11 0 0 0 4.402 1.933c.382.425.852.764 1.377.995.526.231 1.095.35 1.67.346 1.78.002 3.358-1.132 3.901-2.804a4.1 4.1 0 0 0 1.563-.68 4 4 0 0 0 1.14-1.253 3.99 3.99 0 0 0-.506-4.716m-6.097 8.406a3.05 3.05 0 0 1-1.945-.694l.096-.054 3.23-1.838a.53.53 0 0 0 .265-.455v-4.49l1.366.778q.02.011.025.035v3.722c-.003 1.653-1.361 2.992-3.037 2.996m-6.53-2.75a2.95 2.95 0 0 1-.36-2.01l.095.057L5.29 12.09a.53.53 0 0 0 .527 0l3.949-2.246v1.555a.05.05 0 0 1-.022.041L6.473 13.3c-1.454.826-3.311.335-4.15-1.098m-.85-6.94A3.02 3.02 0 0 1 3.07 3.949v3.785a.51.51 0 0 0 .262.451l3.93 2.237-1.366.779a.05.05 0 0 1-.048 0L2.585 9.342a2.98 2.98 0 0 1-1.113-4.094zm11.216 2.571L8.747 5.576l1.362-.776a.05.05 0 0 1 .048 0l3.265 1.86a3 3 0 0 1 1.173 1.207 2.96 2.96 0 0 1-.27 3.2 3.05 3.05 0 0 1-1.36.997V8.279a.52.52 0 0 0-.276-.445m1.36-2.015-.097-.057-3.226-1.855a.53.53 0 0 0-.53 0L6.249 6.153V4.598a.04.04 0 0 1 .019-.04L9.533 2.7a3.07 3.07 0 0 1 3.257.139c.474.325.843.778 1.066 1.303.223.526.289 1.103.191 1.664zM5.503 8.575 4.139 7.8a.05.05 0 0 1-.026-.037V4.049c0-.57.166-1.127.476-1.607s.752-.864 1.275-1.105a3.08 3.08 0 0 1 3.234.41l-.096.054-3.23 1.838a.53.53 0 0 0-.265.455zm.742-1.577 1.758-1 1.762 1v2l-1.755 1-1.762-1z"/>
|
||||
</svg>
|
||||
<text y="46" text-anchor="middle" class="st-name" fill="#10A37F">OpenAI</text>
|
||||
<text y="58" text-anchor="middle" class="st-role">Build</text>
|
||||
<line x1="0" y1="66" x2="0" y2="104" stroke="#10A37F" stroke-width="1.2" opacity="0.2"/>
|
||||
<polygon points="-3,104 3,104 0,110" fill="#10A37F" opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- === Station: Gemini (Verify) === -->
|
||||
<g transform="translate(300, 94)">
|
||||
<g class="station" style="--sd:0.7s">
|
||||
<rect x="-40" y="0" width="80" height="66" rx="12" class="station-box" style="--sc:#4285F4"/>
|
||||
<circle cy="24" r="14" fill="#4285F4" opacity="0.05"/>
|
||||
<!-- Official Google Gemini icon (4-point star) -->
|
||||
<svg x="-11" y="8" width="22" height="22" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9" stroke="#4285F4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="#4285F4" fill-opacity="0.15"/>
|
||||
</svg>
|
||||
<text y="46" text-anchor="middle" class="st-name" fill="#4285F4">Gemini</text>
|
||||
<text y="58" text-anchor="middle" class="st-role">Verify</text>
|
||||
<line x1="0" y1="66" x2="0" y2="104" stroke="#4285F4" stroke-width="1.2" opacity="0.2"/>
|
||||
<polygon points="-3,104 3,104 0,110" fill="#4285F4" opacity="0.25"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- === Conveyor Belt === -->
|
||||
<rect x="8" y="212" width="344" height="12" rx="6" fill="url(#beltFade)"/>
|
||||
<line x1="18" y1="212" x2="342" y2="212" stroke="var(--vp-c-divider)" stroke-width="0.3" opacity="0.4"/>
|
||||
<line x1="18" y1="224" x2="342" y2="224" stroke="var(--vp-c-divider)" stroke-width="0.3" opacity="0.4"/>
|
||||
<!-- Rollers -->
|
||||
<circle v-for="i in 9" :key="'r'+i" :cx="18 + i * 36" cy="218" r="2.5" class="roller"/>
|
||||
<!-- Scrolling belt marks -->
|
||||
<g clip-path="url(#beltClip)" class="belt-scroll">
|
||||
<line v-for="i in 22" :key="'bm'+i" :x1="i * 18 - 18" y1="213" :x2="i * 18 - 18" y2="223"
|
||||
stroke="var(--vp-c-text-3)" stroke-width="0.3" opacity="0.1"/>
|
||||
</g>
|
||||
|
||||
<!-- Flow direction arrows -->
|
||||
<g opacity="0.12">
|
||||
<polygon points="116,215 116,221 121,218" fill="var(--vp-c-text-2)"/>
|
||||
<polygon points="236,215 236,221 241,218" fill="var(--vp-c-text-2)"/>
|
||||
<polygon points="340,215 340,221 345,218" fill="var(--vp-c-text-2)"/>
|
||||
</g>
|
||||
|
||||
<!-- === Flow Items === -->
|
||||
<g class="flow-items">
|
||||
<g v-for="(item, i) in flowItems" :key="'fi'+i">
|
||||
<rect :width="item.w" height="7" rx="2" :fill="item.color" :opacity="item.opacity">
|
||||
<animateMotion :dur="item.dur + 's'" repeatCount="indefinite"
|
||||
path="M6,215 L354,215" :begin="item.delay + 's'"/>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Sparks at stations -->
|
||||
<g v-for="(sp, i) in sparks" :key="'sp'+i">
|
||||
<circle :r="sp.r" :fill="sp.color" class="spark">
|
||||
<animateMotion :dur="sp.dur + 's'" repeatCount="indefinite" :path="sp.path" :begin="sp.delay + 's'"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- Orbit Rings -->
|
||||
<g class="orbit-rings">
|
||||
<circle cx="200" cy="160" r="130" class="orbit-ring ring-outer" />
|
||||
<circle cx="200" cy="160" r="95" class="orbit-ring ring-inner" />
|
||||
<!-- I/O labels -->
|
||||
<text x="18" y="244" class="io-label">Tasks</text>
|
||||
<text x="342" y="244" text-anchor="end" class="io-label">Done</text>
|
||||
<!-- Output check -->
|
||||
<g transform="translate(350, 218)">
|
||||
<circle r="7" fill="#22C55E" opacity="0.06" class="check-pulse"/>
|
||||
<polyline points="-3,1 -1,3 3,-1" fill="none" stroke="#22C55E" stroke-width="1.3" stroke-linecap="round" opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
<!-- Agent Nodes -->
|
||||
<g v-for="(agent, i) in agents" :key="'agent-'+i" class="agent-node" :style="{ '--delay': i * 0.4 + 's' }">
|
||||
<g class="agent-group" :style="{ transform: `translate(${agent.x}px, ${agent.y}px)` }">
|
||||
<circle r="8" :fill="agent.color" class="agent-circle" filter="url(#glow)" />
|
||||
<circle r="12" :stroke="agent.color" fill="none" class="agent-halo" />
|
||||
<text y="22" text-anchor="middle" class="agent-label">{{ agent.name }}</text>
|
||||
<!-- Status row -->
|
||||
<g class="status-row">
|
||||
<g v-for="(s, i) in statusDots" :key="'sd'+i" :transform="`translate(${s.x}, 274)`">
|
||||
<line x1="0" y1="-20" x2="0" y2="-14" :stroke="s.color" stroke-width="0.5" opacity="0.2"/>
|
||||
<circle r="3" :fill="s.color" opacity="0.12"/>
|
||||
<circle r="1.5" :fill="s.color" opacity="0.5" class="status-blink"/>
|
||||
<text y="14" text-anchor="middle" class="status-text">{{ s.label }}</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Central Core -->
|
||||
<g class="central-core" transform="translate(200, 160)">
|
||||
<circle r="40" class="core-bg" />
|
||||
<circle r="32" fill="var(--vp-c-brand-1)" filter="url(#glow)" class="core-inner" />
|
||||
<text y="8" text-anchor="middle" class="core-text">CCW</text>
|
||||
|
||||
<!-- Scanning Effect -->
|
||||
<path d="M-32 0 A32 32 0 0 1 32 0" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" class="core-scanner" />
|
||||
</g>
|
||||
<!-- Micro-particles -->
|
||||
<circle v-for="(p, i) in particles" :key="'mp'+i"
|
||||
:cx="p.x" :cy="p.y" :r="p.r"
|
||||
fill="var(--vp-c-brand-1)" :opacity="p.opacity"
|
||||
class="micro-dot" :style="{ '--fd': p.dur + 's', '--fdy': p.delay + 's' }"/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
@@ -59,156 +193,112 @@ import { ref, onMounted } from 'vue'
|
||||
const isVisible = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
isVisible.value = true
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
|
||||
const agents = [
|
||||
{ name: 'Analyze', x: 200, y: 35, color: '#3B82F6' },
|
||||
{ name: 'Plan', x: 315, y: 110, color: '#10B981' },
|
||||
{ name: 'Code', x: 285, y: 245, color: '#8B5CF6' },
|
||||
{ name: 'Test', x: 115, y: 245, color: '#F59E0B' },
|
||||
{ name: 'Review', x: 85, y: 110, color: '#EF4444' }
|
||||
const flowItems = [
|
||||
{ w: 12, color: 'var(--vp-c-text-3)', opacity: 0.35, dur: 7, delay: 0 },
|
||||
{ w: 10, color: '#D97757', opacity: 0.55, dur: 7, delay: 1.75 },
|
||||
{ w: 14, color: '#10A37F', opacity: 0.55, dur: 7, delay: 3.5 },
|
||||
{ w: 10, color: '#4285F4', opacity: 0.55, dur: 7, delay: 5.25 }
|
||||
]
|
||||
|
||||
const paths = [
|
||||
'M200,160 L200,35',
|
||||
'M200,160 L315,110',
|
||||
'M200,160 L285,245',
|
||||
'M200,160 L115,245',
|
||||
'M200,160 L85,110',
|
||||
'M200,35 Q260,35 315,110',
|
||||
'M315,110 Q315,180 285,245',
|
||||
'M285,245 Q200,285 115,245',
|
||||
'M115,245 Q85,180 85,110',
|
||||
'M85,110 Q85,35 200,35'
|
||||
const sparks = [
|
||||
{ r: 1.5, color: '#D97757', dur: 2, delay: 0, path: 'M60,212 Q57,202 55,192' },
|
||||
{ r: 1, color: '#D97757', dur: 2.5, delay: 0.5, path: 'M62,212 Q65,202 67,192' },
|
||||
{ r: 1.5, color: '#10A37F', dur: 2, delay: 0.8, path: 'M180,212 Q177,202 175,192' },
|
||||
{ r: 1, color: '#10A37F', dur: 2.5, delay: 1.3, path: 'M182,212 Q185,202 187,192' },
|
||||
{ r: 1.5, color: '#4285F4', dur: 2, delay: 1.6, path: 'M300,212 Q297,202 295,192' },
|
||||
{ r: 1, color: '#4285F4', dur: 2.5, delay: 2.1, path: 'M302,212 Q305,202 307,192' }
|
||||
]
|
||||
|
||||
const statusDots = [
|
||||
{ x: 60, color: '#D97757', label: 'Planning' },
|
||||
{ x: 180, color: '#10A37F', label: 'Coding' },
|
||||
{ x: 300, color: '#4285F4', label: 'Testing' }
|
||||
]
|
||||
|
||||
const particles = Array.from({ length: 10 }, () => ({
|
||||
x: 15 + Math.random() * 330,
|
||||
y: 10 + Math.random() * 320,
|
||||
r: 0.5 + Math.random() * 1,
|
||||
opacity: 0.05 + Math.random() * 0.1,
|
||||
dur: 3 + Math.random() * 4,
|
||||
delay: Math.random() * 3
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hero-animation-container {
|
||||
.hero-anim {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
transform: scale(0.92) translateY(12px);
|
||||
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.hero-animation-container.is-visible {
|
||||
.hero-anim.is-visible {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.glow-bg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: var(--vp-c-brand-1);
|
||||
filter: blur(80px);
|
||||
opacity: 0.15;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.orbit-ring {
|
||||
fill: none;
|
||||
stroke: var(--vp-c-brand-1);
|
||||
stroke-width: 0.5;
|
||||
opacity: 0.1;
|
||||
stroke-dasharray: 4 4;
|
||||
}
|
||||
/* CCW */
|
||||
.ccw-bg { fill: var(--vp-c-bg-soft); }
|
||||
.ccw-ring1 { animation: ccwRing 4s ease-in-out infinite; }
|
||||
.ccw-ring2 { animation: ccwRing 4s ease-in-out infinite 2s; }
|
||||
.ccw-label { font-size: 15px; font-weight: 800; fill: var(--vp-c-brand-1); letter-spacing: 0.1em; }
|
||||
.ccw-sub { font-size: 7px; fill: var(--vp-c-text-3); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
|
||||
.ccw-signal { animation: signalPulse 2s ease-in-out infinite; }
|
||||
.line-pulse { opacity: 0.4; }
|
||||
|
||||
.ring-outer { animation: rotate 60s linear infinite; transform-origin: 200px 160px; }
|
||||
.ring-inner { animation: rotate 40s linear infinite reverse; transform-origin: 200px 160px; }
|
||||
/* Control lines */
|
||||
.ctrl-line { fill: none; stroke: var(--vp-c-text-4); stroke-width: 0.8; stroke-dasharray: 3 3; opacity: 0; animation: fadeIn 0.6s ease forwards; animation-delay: var(--d); }
|
||||
|
||||
.connection-path {
|
||||
fill: none;
|
||||
stroke: var(--vp-c-brand-1);
|
||||
stroke-width: 0.8;
|
||||
opacity: 0.05;
|
||||
}
|
||||
/* Stations - animation only uses opacity, no transform conflict */
|
||||
.station { opacity: 0; animation: stationAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: var(--sd); }
|
||||
.station-box { fill: var(--vp-c-bg-soft); stroke: var(--sc); stroke-width: 1.2; transition: all 0.3s ease; }
|
||||
.station:hover .station-box { stroke-width: 2; }
|
||||
.st-name { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
|
||||
.st-role { font-size: 7.5px; fill: var(--vp-c-text-3); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
|
||||
|
||||
.data-pulse {
|
||||
fill: var(--vp-c-brand-2);
|
||||
filter: drop-shadow(0 0 4px var(--vp-c-brand-2));
|
||||
}
|
||||
/* Belt */
|
||||
.roller { fill: var(--vp-c-bg-soft); stroke: var(--vp-c-divider); stroke-width: 0.5; }
|
||||
.belt-scroll { animation: beltScroll 1.2s linear infinite; }
|
||||
|
||||
.agent-group {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
/* Sparks */
|
||||
.spark { opacity: 0.5; filter: drop-shadow(0 0 2px currentColor); }
|
||||
|
||||
.agent-circle {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
/* I/O */
|
||||
.io-label { font-size: 8px; fill: var(--vp-c-text-3); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; opacity: 0.5; }
|
||||
.check-pulse { animation: checkPulse 2.5s ease-in-out infinite; }
|
||||
|
||||
.agent-halo {
|
||||
opacity: 0.2;
|
||||
animation: agent-pulse 2s ease-in-out infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
/* Status */
|
||||
.status-blink { animation: blink 2.5s ease-in-out infinite; }
|
||||
.status-text { font-size: 7.5px; fill: var(--vp-c-text-3); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; opacity: 0.5; }
|
||||
|
||||
.agent-label {
|
||||
font-size: 10px;
|
||||
fill: var(--vp-c-text-2);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
/* Particles */
|
||||
.micro-dot { animation: microFloat var(--fd) ease-in-out infinite; animation-delay: var(--fdy); }
|
||||
|
||||
.core-bg {
|
||||
fill: var(--vp-c-bg-soft);
|
||||
stroke: var(--vp-c-brand-soft);
|
||||
stroke-width: 1;
|
||||
}
|
||||
/* Keyframes */
|
||||
@keyframes ccwRing { 0%, 100% { opacity: 0.06; } 50% { opacity: 0.18; } }
|
||||
@keyframes signalPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }
|
||||
@keyframes fadeIn { to { opacity: 0.25; } }
|
||||
/* Only animate opacity - SVG positioning handled by parent <g> transform attribute */
|
||||
@keyframes stationAppear { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes beltScroll { from { transform: translateX(0); } to { transform: translateX(-18px); } }
|
||||
@keyframes blink { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.15; } }
|
||||
@keyframes checkPulse { 0%, 100% { opacity: 0.06; } 50% { opacity: 0.14; } }
|
||||
@keyframes microFloat { 0%, 100% { transform: translateY(0); opacity: 0.05; } 50% { transform: translateY(-5px); opacity: 0.14; } }
|
||||
|
||||
.core-inner {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.core-text {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
fill: white;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.core-scanner {
|
||||
animation: rotate 3s linear infinite;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes agent-pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 0.2; }
|
||||
50% { transform: scale(1.3); opacity: 0.1; }
|
||||
}
|
||||
|
||||
.agent-node {
|
||||
animation: agent-float 4s ease-in-out infinite;
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
|
||||
@keyframes agent-float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
}
|
||||
|
||||
.hero-animation-container:hover .agent-circle {
|
||||
filter: blur(2px) brightness(1.5);
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
|
||||
.hero-anim.is-visible { opacity: 1; transform: none; }
|
||||
.station { opacity: 1; }
|
||||
.ctrl-line { opacity: 0.25; }
|
||||
}
|
||||
</style>
|
||||
@@ -23,29 +23,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="terminal-visual">
|
||||
<div class="terminal-window">
|
||||
<div class="terminal-header">
|
||||
<div class="dots"><span></span><span></span><span></span></div>
|
||||
<div class="title">workflow.json — ccw run</div>
|
||||
</div>
|
||||
<div class="terminal-body font-mono">
|
||||
<div v-for="(line, idx) in terminalLines.slice(0, terminalStep)" :key="idx" :class="line.color" class="line">
|
||||
{{ line.text }}
|
||||
</div>
|
||||
<div v-if="terminalStep < terminalLines.length" class="cursor">_</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<HeroAnimation />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Grid -->
|
||||
<section class="features-section">
|
||||
<section class="features-section" ref="featuresRef">
|
||||
<div class="section-container">
|
||||
<h2 class="section-title">{{ t.featureTitle }}</h2>
|
||||
<h2 class="section-title reveal-text" :class="{ visible: featuresVisible }">{{ t.featureTitle }}</h2>
|
||||
<div class="features-grid">
|
||||
<div v-for="(f, i) in t.features" :key="i" class="feature-card">
|
||||
<div v-for="(f, i) in t.features" :key="i" class="feature-card reveal-card" :class="{ visible: featuresVisible }" :style="{ '--card-delay': i * 0.1 + 's' }">
|
||||
<div class="feature-icon-box">
|
||||
<svg v-if="i === 0" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/><circle cx="12" cy="16" r="1"/>
|
||||
@@ -68,9 +57,9 @@
|
||||
</section>
|
||||
|
||||
<!-- Pipeline Visual -->
|
||||
<section class="pipeline-section">
|
||||
<section class="pipeline-section" ref="pipelineRef">
|
||||
<div class="section-container">
|
||||
<div class="section-header">
|
||||
<div class="section-header reveal-text" :class="{ visible: pipelineVisible }">
|
||||
<h2>{{ t.pipelineTitle }}</h2>
|
||||
<p>{{ t.pipelineSubtitle }}</p>
|
||||
</div>
|
||||
@@ -147,9 +136,9 @@
|
||||
</section>
|
||||
|
||||
<!-- JSON Demo -->
|
||||
<section class="json-section">
|
||||
<section class="json-section" ref="jsonRef">
|
||||
<div class="section-container">
|
||||
<div class="json-grid">
|
||||
<div class="json-grid reveal-slide" :class="{ visible: jsonVisible }">
|
||||
<div class="json-text">
|
||||
<h2>{{ t.jsonTitle }}</h2>
|
||||
<p>{{ t.jsonSubtitle }}</p>
|
||||
@@ -172,9 +161,9 @@
|
||||
</section>
|
||||
|
||||
<!-- Quick Start Section -->
|
||||
<section class="quickstart-section">
|
||||
<section class="quickstart-section" ref="quickstartRef">
|
||||
<div class="section-container">
|
||||
<div class="quickstart-layout">
|
||||
<div class="quickstart-layout reveal-slide" :class="{ visible: quickstartVisible }">
|
||||
<div class="quickstart-info">
|
||||
<h2 class="quickstart-title">{{ t.quickStartTitle }}</h2>
|
||||
<p class="quickstart-desc">{{ t.quickStartDesc }}</p>
|
||||
@@ -225,9 +214,9 @@
|
||||
</section>
|
||||
|
||||
<!-- CTA Footer -->
|
||||
<section class="cta-section">
|
||||
<section class="cta-section" ref="ctaRef">
|
||||
<div class="section-container">
|
||||
<div class="cta-card">
|
||||
<div class="cta-card reveal-scale" :class="{ visible: ctaVisible }">
|
||||
<h2>{{ t.ctaTitle }}</h2>
|
||||
<p>{{ t.ctaDesc }}</p>
|
||||
<div class="cta-actions">
|
||||
@@ -248,6 +237,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import HeroAnimation from './HeroAnimation.vue'
|
||||
|
||||
const props = defineProps({
|
||||
lang: { type: String, default: 'en' }
|
||||
@@ -256,6 +246,21 @@ const props = defineProps({
|
||||
const localePath = computed(() => props.lang === 'zh' ? '/zh' : '')
|
||||
const activeTab = ref(0)
|
||||
|
||||
// --- Scroll Reveal ---
|
||||
const featuresRef = ref(null)
|
||||
const pipelineRef = ref(null)
|
||||
const jsonRef = ref(null)
|
||||
const quickstartRef = ref(null)
|
||||
const ctaRef = ref(null)
|
||||
|
||||
const featuresVisible = ref(false)
|
||||
const pipelineVisible = ref(false)
|
||||
const jsonVisible = ref(false)
|
||||
const quickstartVisible = ref(false)
|
||||
const ctaVisible = ref(false)
|
||||
|
||||
let observer = null
|
||||
|
||||
// --- Translations ---
|
||||
const content = {
|
||||
en: {
|
||||
@@ -263,7 +268,7 @@ const content = {
|
||||
heroTitle: 'JSON-Driven Multi-Agent <br/> <span class="gradient-text">Collaborative Framework</span>',
|
||||
heroSubtitle: 'Industrial-grade orchestration blending 21 specialized agents and 32 core skills with precision cadence control.',
|
||||
getStarted: 'Get Started',
|
||||
featureTitle: 'The CCW Ecosystem',
|
||||
featureTitle: 'The Claude Code Workflow Ecosystem',
|
||||
features: [
|
||||
{ title: "21 Specialized Agents", desc: "From CLI exploration to TDD implementation and UI design token management." },
|
||||
{ title: "32 Core Skills", desc: "Standalone, Team, and Workflow skills including brainstorm, spec-gen, and code-review." },
|
||||
@@ -336,7 +341,7 @@ const content = {
|
||||
heroTitle: 'JSON 驱动的多智能体 <br/> <span class="gradient-text">协同开发框架</span>',
|
||||
heroSubtitle: '融合 21 个专业代理与 32 项核心技能，通过精准节拍控制实现工业级自动化工作流处理。',
|
||||
getStarted: '快速开始',
|
||||
featureTitle: 'CCW 全局生态概览',
|
||||
featureTitle: 'Claude Code Workflow 全局生态概览',
|
||||
features: [
|
||||
{ title: "21 个专业代理", desc: "涵盖 CLI 探索、TDD 实现、UI 设计令牌管理等全流程智能体。" },
|
||||
{ title: "32 项核心技能", desc: "独立技能、团队技能与工作流技能，覆盖头脑风暴、规格生成、代码审查等场景。" },
|
||||
@@ -465,11 +470,34 @@ onMounted(() => {
|
||||
pipelineInterval = setInterval(() => {
|
||||
currentTick.value = (currentTick.value + 1) % sequence.length
|
||||
}, 3000)
|
||||
|
||||
// Scroll reveal observer
|
||||
const sectionMap = new Map([
|
||||
[featuresRef.value, featuresVisible],
|
||||
[pipelineRef.value, pipelineVisible],
|
||||
[jsonRef.value, jsonVisible],
|
||||
[quickstartRef.value, quickstartVisible],
|
||||
[ctaRef.value, ctaVisible]
|
||||
])
|
||||
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const visRef = sectionMap.get(entry.target)
|
||||
if (visRef) visRef.value = true
|
||||
}
|
||||
})
|
||||
}, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' })
|
||||
|
||||
sectionMap.forEach((_, el) => {
|
||||
if (el) observer.observe(el)
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(terminalInterval)
|
||||
clearInterval(pipelineInterval)
|
||||
if (observer) observer.disconnect()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -483,7 +511,7 @@ onUnmounted(() => {
|
||||
.section-container {
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -493,7 +521,9 @@ onUnmounted(() => {
|
||||
.hero-section {
|
||||
width: 100%;
|
||||
padding: 5rem 0 4rem;
|
||||
background: radial-gradient(ellipse at 70% 20%, var(--vp-c-brand-soft) 0%, transparent 55%);
|
||||
background:
|
||||
radial-gradient(ellipse 120% 80% at 65% 30%, var(--vp-c-brand-soft) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 60% 50% at 90% 60%, color-mix(in srgb, var(--vp-c-brand-soft) 40%, transparent) 0%, transparent 100%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -502,13 +532,19 @@ onUnmounted(() => {
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 3rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
padding: 0 1.5rem;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -539,12 +575,6 @@ onUnmounted(() => {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
@@ -1045,9 +1075,94 @@ onUnmounted(() => {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
* Terminal cursor blink
|
||||
* ============================================ */
|
||||
.cursor-blink {
|
||||
color: #10b981;
|
||||
font-weight: bold;
|
||||
animation: cursorBlink 1s step-end infinite;
|
||||
}
|
||||
|
||||
.term-line {
|
||||
animation: termLineReveal 0.3s ease-out both;
|
||||
animation-delay: calc(var(--line-idx, 0) * 0.05s);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
* Scroll Reveal Animations
|
||||
* ============================================ */
|
||||
.reveal-text {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.reveal-text.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.reveal-card {
|
||||
opacity: 0;
|
||||
transform: translateY(32px);
|
||||
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition-delay: var(--card-delay, 0s);
|
||||
}
|
||||
.reveal-card.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.reveal-slide {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.reveal-slide.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.reveal-scale {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(20px);
|
||||
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.reveal-scale.visible {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
* Gradient text shimmer
|
||||
* ============================================ */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--vp-c-brand-1), #8B5CF6, var(--vp-c-brand-2));
|
||||
background-size: 200% 200%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: gradientShimmer 6s ease infinite;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
* Animations
|
||||
* ============================================ */
|
||||
@keyframes cursorBlink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes termLineReveal {
|
||||
from { opacity: 0; transform: translateX(-8px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes gradientShimmer {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
|
||||
@@ -1063,8 +1178,13 @@ onUnmounted(() => {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
.reveal-text, .reveal-card, .reveal-slide, .reveal-scale {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
||||
@@ -2,7 +2,11 @@
|
||||
<div class="workflow-animation">
|
||||
<div class="workflow-container">
|
||||
<div class="workflow-node coordinator">
|
||||
<div class="node-icon">🎯</div>
|
||||
<div class="node-icon">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="node-label">Coordinator</div>
|
||||
</div>
|
||||
|
||||
@@ -30,19 +34,36 @@
|
||||
|
||||
<div class="workflow-nodes">
|
||||
<div class="workflow-node analyst">
|
||||
<div class="node-icon">📊</div>
|
||||
<div class="node-icon">
|
||||
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M18 20V10M12 20V4M6 20v-6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="node-label">Analyst</div>
|
||||
</div>
|
||||
<div class="workflow-node writer">
|
||||
<div class="node-icon">✍️</div>
|
||||
<div class="node-icon">
|
||||
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 3a2.83 2.83 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="node-label">Writer</div>
|
||||
</div>
|
||||
<div class="workflow-node executor">
|
||||
<div class="node-icon">⚡</div>
|
||||
<div class="node-icon">
|
||||
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="node-label">Executor</div>
|
||||
</div>
|
||||
<div class="workflow-node tester">
|
||||
<div class="node-icon">🧪</div>
|
||||
<div class="node-icon">
|
||||
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M9 3h6M12 3v7l-4 8h8l-4-8"/>
|
||||
<circle cx="8" cy="20" r="1"/><circle cx="16" cy="20" r="1"/><circle cx="12" cy="17" r="1"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="node-label">Tester</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -57,10 +78,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
onMounted(() => {
|
||||
// Add animation class after mount
|
||||
document.querySelector('.workflow-animation')?.classList.add('animate')
|
||||
})
|
||||
</script>
|
||||
@@ -129,6 +149,7 @@ onMounted(() => {
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--vp-shadow-sm);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.workflow-node:hover {
|
||||
@@ -138,8 +159,14 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
font-size: 2rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.node-label {
|
||||
@@ -155,10 +182,19 @@ onMounted(() => {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.workflow-node.coordinator .node-icon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.workflow-node.coordinator .node-label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.workflow-node.analyst .node-icon { color: #3B82F6; }
|
||||
.workflow-node.writer .node-icon { color: #8B5CF6; }
|
||||
.workflow-node.executor .node-icon { color: #10B981; }
|
||||
.workflow-node.tester .node-icon { color: #F59E0B; }
|
||||
|
||||
.workflow-legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -186,6 +222,14 @@ onMounted(() => {
|
||||
.dot.impl { background: var(--vp-c-secondary-500); }
|
||||
.dot.test { background: var(--vp-c-accent-400); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.workflow-animation {
|
||||
padding: 1.5rem;
|
||||
|
||||
209
docs/.vitepress/theme/composables/useDynamicIcon.ts
Normal file
209
docs/.vitepress/theme/composables/useDynamicIcon.ts
Normal file
@@ -0,0 +1,209 @@
|
||||
import { onMounted, onBeforeUnmount, ref, computed } from 'vue'
|
||||
|
||||
/**
|
||||
* Theme color mappings for light and dark modes
|
||||
*/
|
||||
export const THEME_COLORS = {
|
||||
blue: {
|
||||
light: '#3B82F6',
|
||||
dark: '#60A5FA'
|
||||
},
|
||||
green: {
|
||||
light: '#22C55E',
|
||||
dark: '#34D399'
|
||||
},
|
||||
orange: {
|
||||
light: '#F59E0B',
|
||||
dark: '#FBBF24'
|
||||
},
|
||||
purple: {
|
||||
light: '#8B5CF6',
|
||||
dark: '#A78BFA'
|
||||
}
|
||||
} as const
|
||||
|
||||
export type ThemeName = keyof typeof THEME_COLORS
|
||||
|
||||
/**
|
||||
* Status dot colors (always green)
|
||||
*/
|
||||
export const STATUS_COLORS = {
|
||||
light: '#22C55E',
|
||||
dark: '#34D399'
|
||||
} as const
|
||||
|
||||
const STORAGE_KEY_THEME = 'ccw-theme'
|
||||
const STORAGE_KEY_COLOR_MODE = 'ccw-color-mode'
|
||||
|
||||
/**
|
||||
* Get current theme from localStorage or default
|
||||
*/
|
||||
export function getCurrentTheme(): ThemeName {
|
||||
const saved = localStorage.getItem(STORAGE_KEY_THEME)
|
||||
if (saved && saved in THEME_COLORS) {
|
||||
return saved as ThemeName
|
||||
}
|
||||
return 'blue'
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if dark mode is active
|
||||
*/
|
||||
export function isDarkMode(): boolean {
|
||||
const mode = localStorage.getItem(STORAGE_KEY_COLOR_MODE) || 'auto'
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
return mode === 'dark' || (mode === 'auto' && prefersDark)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the appropriate theme color based on current mode
|
||||
*/
|
||||
export function getThemeColor(theme: ThemeName, isDark: boolean): string {
|
||||
return isDark ? THEME_COLORS[theme].dark : THEME_COLORS[theme].light
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the appropriate status color based on current mode
|
||||
*/
|
||||
export function getStatusColor(isDark: boolean): string {
|
||||
return isDark ? STATUS_COLORS.dark : STATUS_COLORS.light
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate favicon SVG with dynamic colors (line style)
|
||||
*/
|
||||
export function generateFaviconSvg(theme: ThemeName, isDark: boolean): string {
|
||||
const lineColor = getThemeColor(theme, isDark)
|
||||
const dotColor = getThemeColor(theme, isDark) // Dot follows theme color
|
||||
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
||||
<line x1="3" y1="6" x2="18" y2="6" stroke="${lineColor}" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="3" y1="12" x2="15" y2="12" stroke="${lineColor}" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="3" y1="18" x2="12" y2="18" stroke="${lineColor}" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="19" cy="17" r="3" fill="${dotColor}"/>
|
||||
</svg>`
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the favicon with current theme colors
|
||||
*/
|
||||
export function updateFavicon(theme: ThemeName, isDark: boolean): void {
|
||||
const svg = generateFaviconSvg(theme, isDark)
|
||||
const dataUrl = `data:image/svg+xml,${encodeURIComponent(svg)}`
|
||||
|
||||
// Update existing favicon or create new one
|
||||
let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
|
||||
if (!link) {
|
||||
link = document.createElement('link')
|
||||
link.rel = 'icon'
|
||||
link.type = 'image/svg+xml'
|
||||
document.head.appendChild(link)
|
||||
}
|
||||
link.href = dataUrl
|
||||
|
||||
// Also update apple-touch-icon if exists
|
||||
const appleLink = document.querySelector<HTMLLinkElement>('link[rel="apple-touch-icon"]')
|
||||
if (appleLink) {
|
||||
appleLink.href = dataUrl
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Composable for dynamic icon management
|
||||
*/
|
||||
export function useDynamicIcon() {
|
||||
const currentTheme = ref<ThemeName>(getCurrentTheme())
|
||||
const darkMode = ref(isDarkMode())
|
||||
|
||||
let mediaQuery: MediaQueryList | null = null
|
||||
let mutationObserver: MutationObserver | null = null
|
||||
let storageHandler: ((e: StorageEvent) => void) | null = null
|
||||
|
||||
/**
|
||||
* Update favicon based on current state
|
||||
*/
|
||||
const updateIcon = () => {
|
||||
updateFavicon(currentTheme.value, darkMode.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* Check and update dark mode state
|
||||
*/
|
||||
const checkDarkMode = () => {
|
||||
darkMode.value = isDarkMode()
|
||||
updateIcon()
|
||||
}
|
||||
|
||||
/**
|
||||
* Check and update theme state
|
||||
*/
|
||||
const checkTheme = () => {
|
||||
currentTheme.value = getCurrentTheme()
|
||||
updateIcon()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// Initial update
|
||||
updateIcon()
|
||||
|
||||
// Listen for system color scheme changes
|
||||
mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
mediaQuery.addEventListener('change', checkDarkMode)
|
||||
|
||||
// Listen for storage changes (cross-tab sync)
|
||||
storageHandler = (e: StorageEvent) => {
|
||||
if (e.key === STORAGE_KEY_THEME) checkTheme()
|
||||
if (e.key === STORAGE_KEY_COLOR_MODE) checkDarkMode()
|
||||
}
|
||||
window.addEventListener('storage', storageHandler)
|
||||
|
||||
// Observe DOM changes for dark class and data-theme attribute
|
||||
mutationObserver = new MutationObserver((mutations) => {
|
||||
for (const mutation of mutations) {
|
||||
if (mutation.type === 'attributes') {
|
||||
const target = mutation.target as HTMLElement
|
||||
if (mutation.attributeName === 'class') {
|
||||
const isDark = target.classList.contains('dark')
|
||||
if (isDark !== darkMode.value) {
|
||||
darkMode.value = isDark
|
||||
updateIcon()
|
||||
}
|
||||
}
|
||||
if (mutation.attributeName === 'data-theme') {
|
||||
const theme = target.getAttribute('data-theme') as ThemeName
|
||||
if (theme && theme !== currentTheme.value && theme in THEME_COLORS) {
|
||||
currentTheme.value = theme
|
||||
updateIcon()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
mutationObserver.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class', 'data-theme']
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (mediaQuery) {
|
||||
mediaQuery.removeEventListener('change', checkDarkMode)
|
||||
}
|
||||
if (storageHandler) {
|
||||
window.removeEventListener('storage', storageHandler)
|
||||
}
|
||||
if (mutationObserver) {
|
||||
mutationObserver.disconnect()
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
currentTheme,
|
||||
darkMode,
|
||||
updateIcon,
|
||||
themeColors: THEME_COLORS
|
||||
}
|
||||
}
|
||||
|
||||
export type UseDynamicIconReturn = ReturnType<typeof useDynamicIcon>
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import { onBeforeUnmount, onMounted } from 'vue'
|
||||
import { useDynamicIcon } from '../composables/useDynamicIcon'
|
||||
|
||||
let mediaQuery: MediaQueryList | null = null
|
||||
let systemThemeChangeHandler: (() => void) | null = null
|
||||
@@ -18,6 +19,9 @@ function applyColorMode() {
|
||||
document.documentElement.classList.toggle('dark', isDark)
|
||||
}
|
||||
|
||||
// Initialize dynamic favicon system
|
||||
useDynamicIcon()
|
||||
|
||||
onMounted(() => {
|
||||
applyTheme()
|
||||
applyColorMode()
|
||||
|
||||
@@ -56,14 +56,16 @@
|
||||
/* ============================================
|
||||
* Layout Container Adjustments
|
||||
* ============================================ */
|
||||
.VPDoc .content-container {
|
||||
max-width: var(--vp-content-width);
|
||||
.VPDoc .content-container,
|
||||
.VPDoc.has-aside .content-container {
|
||||
max-width: 90% !important;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
/* Adjust sidebar and content layout */
|
||||
.VPDoc {
|
||||
padding-left: var(--vp-sidebar-width);
|
||||
.VPDoc,
|
||||
.VPDoc[data-v-343c73d6] {
|
||||
padding-left: var(--vp-sidebar-width) !important;
|
||||
}
|
||||
|
||||
/* Right side outline (TOC) adjustments */
|
||||
@@ -84,6 +86,28 @@
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Remove horizontal padding for home page only (has .VPHome class) */
|
||||
.VPHome .VPDoc {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.VPHome .VPDoc .content-container {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.VPHome .VPDoc .content {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.VPHome .VPContent {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.VPHomeHero {
|
||||
padding: 80px 24px;
|
||||
background: linear-gradient(180deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);
|
||||
|
||||
@@ -183,7 +183,7 @@
|
||||
|
||||
.VPDoc .content-container {
|
||||
padding: 0 24px;
|
||||
max-width: var(--vp-content-width);
|
||||
max-width: 90% !important;
|
||||
}
|
||||
|
||||
.VPHomeHero {
|
||||
@@ -225,7 +225,7 @@
|
||||
}
|
||||
|
||||
.VPDoc .content-container {
|
||||
max-width: var(--vp-content-width);
|
||||
max-width: 90% !important;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
@@ -272,6 +272,7 @@
|
||||
}
|
||||
|
||||
.VPDoc .content-container {
|
||||
max-width: 90% !important;
|
||||
padding: 0 48px;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
* Color Scheme: Blue (Default)
|
||||
* ============================================ */
|
||||
|
||||
/* Logo Colors - follow theme */
|
||||
--logo-line-color: currentColor;
|
||||
--logo-dot-color: var(--vp-c-primary);
|
||||
|
||||
/* Primary Colors */
|
||||
--vp-c-primary-50: #eff6ff;
|
||||
--vp-c-primary-100: #dbeafe;
|
||||
@@ -38,14 +42,18 @@
|
||||
--vp-c-secondary-900: #064e3b;
|
||||
--vp-c-secondary: var(--vp-c-secondary-500);
|
||||
|
||||
/* Accent Colors */
|
||||
--vp-c-accent-50: #fef3c7;
|
||||
--vp-c-accent-100: #fde68a;
|
||||
--vp-c-accent-200: #fcd34d;
|
||||
--vp-c-accent-300: #fbbf24;
|
||||
--vp-c-accent-400: #f59e0b;
|
||||
--vp-c-accent-500: #d97706;
|
||||
--vp-c-accent: var(--vp-c-accent-400);
|
||||
/* Accent Colors (Orange) */
|
||||
--vp-c-accent-50: #fffbeb;
|
||||
--vp-c-accent-100: #fef3c7;
|
||||
--vp-c-accent-200: #fde68a;
|
||||
--vp-c-accent-300: #fcd34d;
|
||||
--vp-c-accent-400: #fbbf24;
|
||||
--vp-c-accent-500: #f59e0b;
|
||||
--vp-c-accent-600: #d97706;
|
||||
--vp-c-accent-700: #b45309;
|
||||
--vp-c-accent-800: #92400e;
|
||||
--vp-c-accent-900: #78350f;
|
||||
--vp-c-accent: var(--vp-c-accent-500);
|
||||
|
||||
/* Background Colors (Light Mode) */
|
||||
--vp-c-bg: #ffffff;
|
||||
@@ -99,8 +107,8 @@
|
||||
/* Shadows */
|
||||
--vp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--vp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--vp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
--vp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
||||
--vp-shadow-lg: 0 10px 15px -3 rgb(0 0 0 / 0.1);
|
||||
--vp-shadow-xl: 0 20px 25px -5 rgb(0 0 0 / 0.1);
|
||||
|
||||
/* Transitions */
|
||||
--vp-transition-color: 0.2s ease;
|
||||
@@ -120,6 +128,9 @@
|
||||
* Dark Mode
|
||||
* ============================================ */
|
||||
.dark {
|
||||
/* Logo Colors (Dark Mode) - follow theme */
|
||||
--logo-dot-color: var(--vp-c-primary);
|
||||
|
||||
/* Background Colors (Dark Mode) */
|
||||
--vp-c-bg: #111827;
|
||||
--vp-c-bg-soft: #1f2937;
|
||||
@@ -172,41 +183,136 @@
|
||||
--vp-c-secondary-800: #d1fae5;
|
||||
--vp-c-secondary-900: #ecfdf5;
|
||||
--vp-c-secondary: var(--vp-c-secondary-400);
|
||||
|
||||
/* Accent Colors (adjusted for dark mode) */
|
||||
--vp-c-accent-50: #451a03;
|
||||
--vp-c-accent-100: #78350f;
|
||||
--vp-c-accent-200: #92400e;
|
||||
--vp-c-accent-300: #b45309;
|
||||
--vp-c-accent-400: #d97706;
|
||||
--vp-c-accent-500: #f59e0b;
|
||||
--vp-c-accent-600: #fbbf24;
|
||||
--vp-c-accent-700: #fcd34d;
|
||||
--vp-c-accent-800: #fde68a;
|
||||
--vp-c-accent-900: #fef3c7;
|
||||
--vp-c-accent: var(--vp-c-accent-400);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
* Color Scheme: Green
|
||||
* ============================================ */
|
||||
|
||||
/* Green - Light Mode */
|
||||
[data-theme="green"] {
|
||||
--vp-c-primary: var(--vp-c-secondary-500);
|
||||
--vp-c-primary-50: #ecfdf5;
|
||||
--vp-c-primary-100: #d1fae5;
|
||||
--vp-c-primary-200: #a7f3d0;
|
||||
--vp-c-primary-300: #6ee7b7;
|
||||
--vp-c-primary-400: #34d399;
|
||||
--vp-c-primary-500: #22c55e;
|
||||
--vp-c-primary-600: #10b981;
|
||||
--vp-c-primary-700: #059669;
|
||||
--vp-c-primary-800: #047857;
|
||||
--vp-c-primary-900: #065f46;
|
||||
--vp-c-primary: var(--vp-c-primary-500);
|
||||
--vp-c-brand-1: var(--vp-c-primary-500);
|
||||
--vp-c-brand-soft: rgba(34, 197, 94, 0.1);
|
||||
}
|
||||
|
||||
/* Green - Dark Mode */
|
||||
.dark[data-theme="green"],
|
||||
[data-theme="green"].dark {
|
||||
--vp-c-primary: var(--vp-c-secondary-400);
|
||||
--vp-c-primary-50: #064e3b;
|
||||
--vp-c-primary-100: #065f46;
|
||||
--vp-c-primary-200: #047857;
|
||||
--vp-c-primary-300: #059669;
|
||||
--vp-c-primary-400: #10b981;
|
||||
--vp-c-primary-500: #34d399;
|
||||
--vp-c-primary-600: #6ee7b7;
|
||||
--vp-c-primary-700: #a7f3d0;
|
||||
--vp-c-primary-800: #d1fae5;
|
||||
--vp-c-primary-900: #ecfdf5;
|
||||
--vp-c-primary: var(--vp-c-primary-400);
|
||||
--vp-c-brand-1: var(--vp-c-primary-400);
|
||||
--vp-c-brand-soft: rgba(52, 211, 153, 0.2);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
* Color Scheme: Orange
|
||||
* ============================================ */
|
||||
|
||||
/* Orange - Light Mode */
|
||||
[data-theme="orange"] {
|
||||
--vp-c-primary: var(--vp-c-accent-500);
|
||||
--vp-c-primary-50: #fffbeb;
|
||||
--vp-c-primary-100: #fef3c7;
|
||||
--vp-c-primary-200: #fde68a;
|
||||
--vp-c-primary-300: #fcd34d;
|
||||
--vp-c-primary-400: #fbbf24;
|
||||
--vp-c-primary-500: #f59e0b;
|
||||
--vp-c-primary-600: #d97706;
|
||||
--vp-c-primary-700: #b45309;
|
||||
--vp-c-primary-800: #92400e;
|
||||
--vp-c-primary-900: #78350f;
|
||||
--vp-c-primary: var(--vp-c-primary-500);
|
||||
--vp-c-brand-1: var(--vp-c-primary-500);
|
||||
--vp-c-brand-soft: rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
/* Orange - Dark Mode */
|
||||
.dark[data-theme="orange"],
|
||||
[data-theme="orange"].dark {
|
||||
--vp-c-primary: var(--vp-c-accent-400);
|
||||
--vp-c-primary-50: #451a03;
|
||||
--vp-c-primary-100: #78350f;
|
||||
--vp-c-primary-200: #92400e;
|
||||
--vp-c-primary-300: #b45309;
|
||||
--vp-c-primary-400: #d97706;
|
||||
--vp-c-primary-500: #f59e0b;
|
||||
--vp-c-primary-600: #fbbf24;
|
||||
--vp-c-primary-700: #fcd34d;
|
||||
--vp-c-primary-800: #fde68a;
|
||||
--vp-c-primary-900: #fef3c7;
|
||||
--vp-c-primary: var(--vp-c-primary-400);
|
||||
--vp-c-brand-1: var(--vp-c-primary-400);
|
||||
--vp-c-brand-soft: rgba(251, 191, 36, 0.2);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
* Color Scheme: Purple
|
||||
* ============================================ */
|
||||
|
||||
/* Purple - Light Mode */
|
||||
[data-theme="purple"] {
|
||||
--vp-c-primary-500: #8b5cf6;
|
||||
--vp-c-primary-600: #7c3aed;
|
||||
--vp-c-primary-700: #6d28d9;
|
||||
--vp-c-primary: var(--vp-c-primary-500);
|
||||
--vp-c-primary-50: #faf5ff;
|
||||
--vp-c-primary-100: #f3e8ff;
|
||||
--vp-c-primary-200: #e9d5ff;
|
||||
--vp-c-primary-300: #d8b4fe;
|
||||
--vp-c-primary-400: #c084fc;
|
||||
--vp-c-primary-500: #a855f7;
|
||||
--vp-c-primary-600: #8b5cf6;
|
||||
--vp-c-primary-700: #7c3aed;
|
||||
--vp-c-primary-800: #6d28d9;
|
||||
--vp-c-primary-900: #5b21b6;
|
||||
--vp-c-primary: var(--vp-c-primary-600);
|
||||
--vp-c-brand-1: var(--vp-c-primary-600);
|
||||
--vp-c-brand-soft: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Purple - Dark Mode */
|
||||
.dark[data-theme="purple"],
|
||||
[data-theme="purple"].dark {
|
||||
--vp-c-primary-400: #a78bfa;
|
||||
--vp-c-primary-50: #2e1065;
|
||||
--vp-c-primary-100: #3b0764;
|
||||
--vp-c-primary-200: #581c87;
|
||||
--vp-c-primary-300: #6d28d9;
|
||||
--vp-c-primary-400: #7c3aed;
|
||||
--vp-c-primary-500: #8b5cf6;
|
||||
--vp-c-primary-600: #a78bfa;
|
||||
--vp-c-primary-700: #c4b5fd;
|
||||
--vp-c-primary-800: #ddd6fe;
|
||||
--vp-c-primary-900: #f3e8ff;
|
||||
--vp-c-primary: var(--vp-c-primary-400);
|
||||
--vp-c-brand-1: var(--vp-c-primary-400);
|
||||
--vp-c-brand-soft: rgba(167, 139, 250, 0.2);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## One-Liner
|
||||
|
||||
**Core orchestration commands are the workflow brain of Claude_dms3** — analyzing task intent, selecting appropriate workflows, and automatically executing command chains.
|
||||
**Core orchestration commands are the workflow brain of Claude Code Workflow** — analyzing task intent, selecting appropriate workflows, and automatically executing command chains.
|
||||
|
||||
## Command List
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## One-Liner
|
||||
|
||||
**Claude Commands is the core command system of Claude_dms3** — invoking various workflows, tools, and collaboration features through slash commands.
|
||||
**Claude Commands is the core command system of Claude Code Workflow** — invoking various workflows, tools, and collaboration features through slash commands.
|
||||
|
||||
## Core Concepts
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## One-Liner
|
||||
|
||||
**Workflow commands are the execution engine of Claude_dms3** — providing complete workflow support from lightweight tasks to complex projects.
|
||||
**Workflow commands are the execution engine of Claude Code Workflow** — providing complete workflow support from lightweight tasks to complex projects.
|
||||
|
||||
## Command List
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## One-Liner
|
||||
|
||||
**Commands is the command system of Claude_dms3** — comprising Claude Code Commands and Codex Prompts, providing a complete command-line toolchain from specification to implementation to testing to review.
|
||||
**Commands is the command system of Claude Code Workflow** — comprising Claude Code Commands and Codex Prompts, providing a complete command-line toolchain from specification to implementation to testing to review.
|
||||
|
||||
## Command Categories
|
||||
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
# What is Claude_dms3
|
||||
# What is Claude Code Workflow
|
||||
|
||||
## One-Line Positioning
|
||||
|
||||
**Claude_dms3 is an AI-powered development workbench for VS Code** — Through semantic code indexing, multi-model CLI invocation, and team collaboration systems, it enables AI to deeply understand your project and generate high-quality code according to specifications.
|
||||
**Claude Code Workflow is an AI-powered development workbench for VS Code** — Through semantic code indexing, multi-model CLI invocation, and team collaboration systems, it enables AI to deeply understand your project and generate high-quality code according to specifications.
|
||||
|
||||
> AI capabilities bloom like vines — Claude_dms3 is the trellis that guides AI along your project's architecture, coding standards, and team workflows.
|
||||
> AI capabilities bloom like vines — Claude Code Workflow is the trellis that guides AI along your project's architecture, coding standards, and team workflows.
|
||||
|
||||
---
|
||||
|
||||
## 1.1 Pain Points Solved
|
||||
|
||||
| Pain Point | Current State | Claude_dms3 Solution |
|
||||
| Pain Point | Current State | Claude Code Workflow Solution |
|
||||
|------------|---------------|---------------------|
|
||||
| **AI doesn't understand the project** | Every new session requires re-explaining project background, tech stack, and coding standards | Memory system persists project context, AI remembers project knowledge across sessions |
|
||||
| **Difficult code search** | Keyword search can't find semantically related code, don't know where functions are called | CodexLens semantic indexing, supports natural language search and call chain tracing |
|
||||
@@ -22,7 +22,7 @@
|
||||
|
||||
## 1.2 vs Traditional Methods
|
||||
|
||||
| Dimension | Traditional AI Assistant | **Claude_dms3** |
|
||||
| Dimension | Traditional AI Assistant | **Claude Code Workflow** |
|
||||
|-----------|-------------------------|-----------------|
|
||||
| **Code Search** | Text keyword search | **Semantic vector search + LSP call chain** |
|
||||
| **AI Invocation** | Single model fixed call | **Multi-model collaboration, optimal model per task** |
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph Claude_dms3_Architecture[Claude_dms3 Architecture]
|
||||
subgraph Claude Code Workflow_Architecture[Claude Code Workflow Architecture]
|
||||
A[CodexLens<br/>Semantic Index]
|
||||
B[CCW<br/>CLI Call Framework]
|
||||
C[Memory<br/>Persistent Context]
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## One-Line Positioning
|
||||
|
||||
**Getting Started is a 5-minute quick-start guide** — Installation, first command, first workflow, quickly experience Claude_dms3's core features.
|
||||
**Getting Started is a 5-minute quick-start guide** — Installation, first command, first workflow, quickly experience Claude Code Workflow's core features.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -2,17 +2,17 @@
|
||||
|
||||
## One-Line Positioning
|
||||
|
||||
**Core Concepts are the foundation for understanding Claude_dms3** — Three-layer abstraction of Commands, Skills, Prompts, Workflow session management, and team collaboration patterns.
|
||||
**Core Concepts are the foundation for understanding Claude Code Workflow** — Three-layer abstraction of Commands, Skills, Prompts, Workflow session management, and team collaboration patterns.
|
||||
|
||||
---
|
||||
|
||||
## 3.1 Three-Layer Abstraction
|
||||
|
||||
Claude_dms3's command system is divided into three layers of abstraction:
|
||||
Claude Code Workflow's command system is divided into three layers of abstraction:
|
||||
|
||||
### 3.1.1 Commands - Built-in Commands
|
||||
|
||||
**Commands are the atomic operations of Claude_dms3** — Predefined reusable commands that complete specific tasks.
|
||||
**Commands are the atomic operations of Claude Code Workflow** — Predefined reusable commands that complete specific tasks.
|
||||
|
||||
| Category | Count | Description |
|
||||
| --- | --- | --- |
|
||||
@@ -137,7 +137,7 @@ graph LR
|
||||
|
||||
### 3.4.1 Role System
|
||||
|
||||
Claude_dms3 supports 8 team workflows, each defining different roles:
|
||||
Claude Code Workflow supports 8 team workflows, each defining different roles:
|
||||
|
||||
| Workflow | Roles | Description |
|
||||
| --- | --- | --- |
|
||||
|
||||
@@ -312,7 +312,7 @@ graph LR
|
||||
|
||||
## Summary
|
||||
|
||||
Claude_dms3 best practices can be summarized as:
|
||||
Claude Code Workflow best practices can be summarized as:
|
||||
|
||||
1. **Standards First** - Establish clear team standards
|
||||
2. **Process Assurance** - Use appropriate workflows
|
||||
@@ -324,7 +324,7 @@ Claude_dms3 best practices can be summarized as:
|
||||
|
||||
## Related Links
|
||||
|
||||
- [What is Claude_dms3](ch01-what-is-claude-dms3.md)
|
||||
- [What is Claude Code Workflow](ch01-what-is-claude-dms3.md)
|
||||
- [Getting Started](ch02-getting-started.md)
|
||||
- [Core Concepts](ch03-core-concepts.md)
|
||||
- [Workflow Basics](ch04-workflow-basics.md)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: page
|
||||
title: CCW Documentation
|
||||
title: Claude Code Workflow Documentation
|
||||
titleTemplate: Claude Code Workspace
|
||||
---
|
||||
|
||||
|
||||
1488
docs/package-lock.json
generated
1488
docs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "ccw-docs",
|
||||
"version": "1.0.0",
|
||||
"description": "CCW Documentation Site",
|
||||
"description": "Claude Code Workflow Documentation Site",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"docs:prepare": "node scripts/build-search-index.mjs",
|
||||
@@ -11,11 +11,12 @@
|
||||
"docs:serve": "vitepress serve"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vitepress": "^1.0.0",
|
||||
"vue": "^3.4.0",
|
||||
"@vue/devtools-api": "^7.0.0",
|
||||
"flexsearch": "^0.7.43",
|
||||
"shiki": "^1.0.0"
|
||||
"shiki": "^1.0.0",
|
||||
"vitepress": "^1.0.0",
|
||||
"vitepress-plugin-mermaid": "^2.0.17",
|
||||
"vue": "^3.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-i18n": "^10.0.0"
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||
<rect width="32" height="32" rx="6" fill="#3b82f6"/>
|
||||
<path d="M8 12h16M8 16h12M8 20h8" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="22" cy="20" r="4" fill="#10b981"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
|
||||
<style>
|
||||
.logo-line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
|
||||
.logo-dot { fill: var(--vp-c-primary, #3B82F6); }
|
||||
</style>
|
||||
<!-- Three horizontal lines - line style -->
|
||||
<line class="logo-line" x1="3" y1="6" x2="18" y2="6"/>
|
||||
<line class="logo-line" x1="3" y1="12" x2="15" y2="12"/>
|
||||
<line class="logo-line" x1="3" y1="18" x2="12" y2="18"/>
|
||||
<!-- Status dot - follows theme -->
|
||||
<circle class="logo-dot" cx="19" cy="17" r="3"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 277 B After Width: | Height: | Size: 547 B |
@@ -1,32 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<defs>
|
||||
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#3B82F6"/>
|
||||
<stop offset="100%" style="stop-color:#8B5CF6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="iconGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#60A5FA"/>
|
||||
<stop offset="100%" style="stop-color:#A78BFA"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background Circle -->
|
||||
<circle cx="100" cy="100" r="95" fill="url(#bgGrad)" opacity="0.9"/>
|
||||
|
||||
<!-- C Letter -->
|
||||
<path d="M130 50 C80 50 50 80 50 100 C50 120 80 150 130 150"
|
||||
fill="none" stroke="white" stroke-width="12" stroke-linecap="round"/>
|
||||
|
||||
<!-- Connection Lines (representing workflow) -->
|
||||
<line x1="100" y1="75" x2="140" y2="75" stroke="url(#iconGrad)" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
|
||||
<line x1="100" y1="100" x2="150" y2="100" stroke="url(#iconGrad)" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
|
||||
<line x1="100" y1="125" x2="140" y2="125" stroke="url(#iconGrad)" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
|
||||
|
||||
<!-- Agent Dots -->
|
||||
<circle cx="155" cy="75" r="6" fill="#10B981"/>
|
||||
<circle cx="165" cy="100" r="6" fill="#F59E0B"/>
|
||||
<circle cx="155" cy="125" r="6" fill="#EF4444"/>
|
||||
|
||||
<!-- Orbit Ring -->
|
||||
<circle cx="100" cy="100" r="70" fill="none" stroke="white" stroke-width="1" opacity="0.3"/>
|
||||
<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" style="fill: var(--logo-dot-color, var(--vp-c-primary, currentColor))"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 583 B |
BIN
docs/screenshot-ccw-fixed.png
Normal file
BIN
docs/screenshot-ccw-fixed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 869 KiB |
BIN
docs/screenshot-ccw-redesign.png
Normal file
BIN
docs/screenshot-ccw-redesign.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 870 KiB |
BIN
docs/screenshot-gradient-fix.png
Normal file
BIN
docs/screenshot-gradient-fix.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
docs/screenshot-hero-fix.png
Normal file
BIN
docs/screenshot-hero-fix.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 859 KiB |
BIN
docs/screenshot-official-icons.png
Normal file
BIN
docs/screenshot-official-icons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 864 KiB |
@@ -6,7 +6,7 @@
|
||||
|
||||
## Pain Points Solved
|
||||
|
||||
| Pain Point | Current State | Claude_dms3 Solution |
|
||||
| Pain Point | Current State | Claude Code Workflow Solution |
|
||||
|------------|---------------|----------------------|
|
||||
| **Single model limitation** | Can only call one AI model | Multi-role parallel collaboration, leveraging各自专长 |
|
||||
| **Chaotic task orchestration** | Manual task dependency and state management | Automatic task discovery, dependency resolution, pipeline orchestration |
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
## vs Traditional Methods Comparison
|
||||
|
||||
| Dimension | Traditional Methods | **Claude_dms3** |
|
||||
| Dimension | Traditional Methods | **Claude Code Workflow** |
|
||||
|-----------|---------------------|-----------------|
|
||||
| Task orchestration | Manual management | Automatic pipeline orchestration |
|
||||
| AI models | Single model | Multi-model parallel collaboration |
|
||||
@@ -43,7 +43,7 @@
|
||||
|
||||
### Team Architecture Models
|
||||
|
||||
Claude_dms3 supports two team architecture models:
|
||||
Claude Code Workflow supports two team architecture models:
|
||||
|
||||
1. **team-coordinate** (Universal Coordinator)
|
||||
- Only coordinator is built-in
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
## Pain Points Solved
|
||||
|
||||
| Pain Point | Current State | Claude_dms3 Solution |
|
||||
| Pain Point | Current State | Claude Code Workflow Solution |
|
||||
|------------|---------------|----------------------|
|
||||
| **New session amnesia** | Every conversation needs to re-explain project background | Memory persists context |
|
||||
| **Knowledge loss** | Valuable insights and decisions disappear with session | Memory compression and Tips recording |
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
## Pain Points Solved
|
||||
|
||||
| Pain Point | Current State | Claude_dms3 Solution |
|
||||
| Pain Point | Current State | Claude Code Workflow Solution |
|
||||
|------------|---------------|----------------------|
|
||||
| **Complex skill creation** | Manual skill structure and file creation | Automated skill generation |
|
||||
| **Missing specifications** | Project specs scattered everywhere | Unified specification generation system |
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
## Pain Points Solved
|
||||
|
||||
| Pain Point | Current State | Claude_dms3 Solution |
|
||||
| Pain Point | Current State | Claude Code Workflow Solution |
|
||||
|------------|---------------|----------------------|
|
||||
| **Incomplete review dimensions** | Manual review easily misses dimensions | 6-dimension automatic review |
|
||||
| **Chaotic issue classification** | Hard to distinguish severity | Structured issue classification |
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
## Pain Points Solved
|
||||
|
||||
| Pain Point | Current State | Claude_dms3 Solution |
|
||||
| Pain Point | Current State | Claude Code Workflow Solution |
|
||||
|------------|---------------|----------------------|
|
||||
| **Manual task breakdown** | Manual decomposition, easy to miss | Automated task generation and dependency management |
|
||||
| **Scattered execution state** | Tools independent, state not unified | Unified session management, TodoWrite tracking |
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## 一句话定位
|
||||
|
||||
**核心编排命令是 Claude_dms3 的工作流大脑** — 分析任务意图、选择合适的工作流、自动执行命令链。
|
||||
**核心编排命令是 Claude Code Workflow 的工作流大脑** — 分析任务意图、选择合适的工作流、自动执行命令链。
|
||||
|
||||
## 命令列表
|
||||
|
||||
@@ -17,47 +17,128 @@
|
||||
|
||||
**功能**: 主工作流编排器 - 意图分析→工作流选择→命令链执行
|
||||
|
||||
**核心概念: 自包含 Skill (Self-Contained Skills)**
|
||||
|
||||
每个 Skill 是**自包含执行单元**，内部处理完整流水线。单次 Skill 调用即完成一个有意义的工作里程碑。
|
||||
|
||||
| 单元类型 | Skill | 说明 |
|
||||
|---------|-------|------|
|
||||
| 轻量 Plan+Execute | `workflow-lite-plan` | 内部完成 plan→execute |
|
||||
| 标准 Planning | `workflow-plan` → `workflow-execute` | plan 和 execute 是独立 Skill |
|
||||
| TDD Planning | `workflow-tdd-plan` → `workflow-execute` | tdd-plan 和 execute 是独立 Skill |
|
||||
| 规格驱动 | `spec-generator` → `workflow-plan` → `workflow-execute` | 规格文档驱动完整开发 |
|
||||
| 测试流水线 | `workflow-test-fix` | 内部完成 gen→cycle |
|
||||
| 代码审查 | `review-cycle` | 内部完成 review→fix |
|
||||
| 分析→规划 | `workflow:analyze-with-file` → `workflow-lite-plan` | 协作分析产物自动传递给 lite-plan |
|
||||
| 头脑风暴→规划 | `workflow:brainstorm-with-file` → `workflow-lite-plan` | 头脑风暴产物自动传递给 lite-plan |
|
||||
| 协作规划 | `workflow:collaborative-plan-with-file` → `workflow:unified-execute-with-file` | 多 agent 协作规划→通用执行 |
|
||||
| 需求路线图 | `workflow:roadmap-with-file` → `team-planex` | 需求拆解→issue 创建→wave pipeline 执行 |
|
||||
| 集成测试循环 | `workflow:integration-test-cycle` | 自迭代集成测试闭环 |
|
||||
| 重构循环 | `workflow:refactor-cycle` | 技术债务发现→重构→验证 |
|
||||
|
||||
**语法**:
|
||||
```bash
|
||||
/ccw "任务描述"
|
||||
```
|
||||
|
||||
**选项**:
|
||||
- `--yes` / `-y`: 自动模式，跳过确认步骤
|
||||
- `--yes` / `-y`: 自动模式，跳过确认步骤并传播到下游 Skill
|
||||
|
||||
**工作流程**:
|
||||
**5 阶段工作流程**:
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[用户输入] --> B[分析意图]
|
||||
A[用户输入] --> B[Phase 1: 分析意图]
|
||||
B --> C{清晰度评分}
|
||||
C -->|≥2| D[直接选择工作流]
|
||||
C -->|<2| E[需求澄清]
|
||||
C -->|≥2| D[Phase 2: 选择工作流]
|
||||
C -->|<2| E[Phase 1.5: 需求澄清]
|
||||
E --> D
|
||||
D --> F[构建命令链]
|
||||
F --> G{用户确认}
|
||||
G -->|确认| H[执行命令链]
|
||||
G -->|取消| I[结束]
|
||||
H --> J{更多步骤?}
|
||||
J -->|是| F
|
||||
J -->|否| K[完成]
|
||||
D --> F[Phase 3: 用户确认]
|
||||
F --> G{确认?}
|
||||
G -->|是| H[Phase 4: 设置跟踪]
|
||||
G -->|否| I[结束]
|
||||
H --> J[Phase 5: 执行命令链]
|
||||
J --> K[完成]
|
||||
```
|
||||
|
||||
**任务类型检测**:
|
||||
**Phase 1.5: 需求澄清** (当清晰度 < 2 时触发)
|
||||
|
||||
| 类型 | 触发关键词 | 工作流 |
|
||||
| --- | --- | --- |
|
||||
| **Bug 修复** | urgent, production, critical + fix, bug | lite-fix |
|
||||
| **头脑风暴** | brainstorm, ideation, 头脑风暴, 创意 | brainstorm-with-file |
|
||||
| **调试文档** | debug document, hypothesis, 假设验证 | debug-with-file |
|
||||
| **协作分析** | analyze document, collaborative analysis | analyze-with-file |
|
||||
| **协作规划** | collaborative plan, 协作规划 | collaborative-plan-with-file |
|
||||
| **需求路线图** | roadmap, 需求规划 | req-plan-with-file |
|
||||
| **集成测试** | integration test, 集成测试 | integration-test-cycle |
|
||||
| **重构** | refactor, 重构 | refactor-cycle |
|
||||
| **团队工作流** | team + 关键词 | 对应团队工作流 |
|
||||
| **TDD** | tdd, test-first | tdd-plan → execute |
|
||||
| **测试修复** | test fix, failing test | test-fix-gen → test-cycle-execute |
|
||||
| 问题类型 | 示例 |
|
||||
|---------|------|
|
||||
| **目标** | Create / Fix / Optimize / Analyze |
|
||||
| **范围** | 单文件 / 模块 / 跨模块 / 系统 |
|
||||
| **约束** | 向后兼容 / 跳过测试 / 紧急热修复 |
|
||||
|
||||
**自动模式 (-y) 传播机制**:
|
||||
|
||||
| Phase | 正常行为 | 自动模式行为 |
|
||||
|-------|---------|-------------|
|
||||
| Phase 1.5 | 清晰度<2 时询问 | 跳过澄清，用已有信息推断 |
|
||||
| Phase 3 | 要求用户确认 | 跳过确认，直接执行 |
|
||||
| Phase 5 错误 | 询问 Retry/Skip/Abort | 自动选择 "Skip" |
|
||||
| Skill 调用 | 使用给定参数 | 自动附加 `-y` 到下游 Skill |
|
||||
|
||||
**任务类型检测 (24 种模式)**:
|
||||
|
||||
| 优先级 | 类型 | 触发关键词 | 工作流 |
|
||||
|--------|------|-----------|--------|
|
||||
| 1 | Bug 修复 (紧急) | urgent, production, critical + fix, bug | lite-fix (--hotfix) |
|
||||
| 2 | 头脑风暴 | brainstorm, ideation, 头脑风暴, 创意, 发散思维 | brainstorm-with-file |
|
||||
| 3 | 头脑风暴→Issue | brainstorm.*issue, 头脑风暴.*issue | issue:from-brainstorm |
|
||||
| 4 | 调试文档 | debug.*document, hypothesis, 假设验证, 深度调试 | debug-with-file |
|
||||
| 5 | 协作分析 | analyze.*document, collaborative analysis, 协作分析 | analyze-with-file |
|
||||
| 6 | 协作规划 | collaborative.*plan, 协作规划, 多人规划 | collaborative-plan-with-file |
|
||||
| 7 | 需求路线图 | roadmap, 需求规划, 需求拆解 | roadmap-with-file |
|
||||
| 8 | 规格驱动 | spec.*gen, specification, PRD, 产品需求 | spec-generator → plan |
|
||||
| 9 | 集成测试 | integration.*test, 集成测试, 端到端测试 | integration-test-cycle |
|
||||
| 10 | 重构 | refactor, 重构, tech.*debt, 技术债务 | refactor-cycle |
|
||||
| 11 | 团队工作流 | team.*plan.*exec, 团队规划执行, wave pipeline | team-planex |
|
||||
| 12 | 多CLI协作 | multi.*cli, 多CLI, 多模型协作 | multi-cli-plan |
|
||||
| 13 | Bug 修复 | fix, bug, error, crash, fail, debug | lite-fix |
|
||||
| 14 | Issue 批量 | issues?.*batch, 批量issue | issue:discover → execute |
|
||||
| 15 | Issue 转换 | issue workflow, structured workflow | lite-plan → convert-to-plan |
|
||||
| 16 | 探索 | uncertain, explore, 研究, what if | brainstorm → plan |
|
||||
| 17 | 快速任务 | quick, simple, small + feature | lite-plan |
|
||||
| 18 | UI 设计 | ui, design, component, style | ui-design:* |
|
||||
| 19 | TDD | tdd, test-driven, 先写测试 | tdd-plan → execute |
|
||||
| 20 | 测试修复 | 测试失败, test fail, failing test | test-fix-gen → cycle |
|
||||
| 21 | 测试生成 | generate test, 写测试, 补充测试 | test-gen → execute |
|
||||
| 22 | 代码审查 | review, 审查, code review | review-cycle |
|
||||
| 23 | 文档 | docs, documentation, readme | lite-plan |
|
||||
| 24 | 功能 (默认) | *(其他)* | lite-plan 或 plan → execute |
|
||||
|
||||
**With-File 自动链式机制**:
|
||||
|
||||
当 `analyze-with-file` 或 `brainstorm-with-file` 完成时，其产物（discussion.md / brainstorm.md）**自动传递**给 `workflow-lite-plan` 作为上下文输入。
|
||||
|
||||
| 工作流 | 自动链目标 | 产物传递 |
|
||||
|--------|-----------|---------|
|
||||
| analyze-with-file | → workflow-lite-plan | discussion.md |
|
||||
| brainstorm-with-file | → workflow-lite-plan | brainstorm.md |
|
||||
|
||||
**Cycle 工作流自迭代模式**:
|
||||
|
||||
| 工作流 | 流水线 | 特点 |
|
||||
|--------|--------|------|
|
||||
| integration-test-cycle | explore → test dev → test-fix → reflection | 最大迭代次数, 自动继续 |
|
||||
| refactor-cycle | discover → prioritize → execute → validate | 多维度分析, 回归验证 |
|
||||
|
||||
**同步执行模型**:
|
||||
|
||||
```
|
||||
用户输入 → 分析意图 → 选择工作流 → [确认] → 执行命令链
|
||||
↓
|
||||
Skill (阻塞)
|
||||
↓
|
||||
更新 TodoWrite
|
||||
↓
|
||||
下一个命令...
|
||||
```
|
||||
|
||||
**双跟踪系统**:
|
||||
|
||||
1. **TodoWrite 跟踪** (UI 显示): 所有执行状态通过 `CCW:` 前缀跟踪
|
||||
2. **status.json 跟踪** (持久化): 位置 `.workflow/.ccw/{session_id}/status.json`
|
||||
|
||||
**示例**:
|
||||
|
||||
@@ -65,9 +146,18 @@ graph TD
|
||||
# 基础用法 - 自动选择工作流
|
||||
/ccw "实现用户认证功能"
|
||||
|
||||
# 自动模式 - 跳过确认并传播 -y
|
||||
/ccw -y "实现用户认证功能"
|
||||
|
||||
# Bug 修复
|
||||
/ccw "修复登录失败的 bug"
|
||||
|
||||
# 协作分析 (自动链到 lite-plan)
|
||||
/ccw "协作分析: 认证架构的设计决策"
|
||||
|
||||
# 头脑风暴 (自动链到 lite-plan)
|
||||
/ccw "头脑风暴: 用户通知系统重新设计"
|
||||
|
||||
# TDD 开发
|
||||
/ccw "使用 TDD 实现支付功能"
|
||||
|
||||
@@ -79,12 +169,11 @@ graph TD
|
||||
|
||||
**功能**: 命令编排工具 - 分析任务、推荐命令链、顺序执行、状态持久化
|
||||
|
||||
**语法**:
|
||||
```bash
|
||||
/ccw-coordinator "任务描述"
|
||||
```
|
||||
**核心概念: 最小执行单元 (Minimum Execution Units)**
|
||||
|
||||
**最小执行单元**:
|
||||
最小执行单元是一组必须**作为原子组执行**的命令集合，拆分这些命令会破坏逻辑流并创建不完整状态。
|
||||
|
||||
**规划+执行单元**:
|
||||
|
||||
| 单元名称 | 命令链 | 输出 |
|
||||
| --- | --- | --- |
|
||||
@@ -93,19 +182,76 @@ graph TD
|
||||
| **Bug 修复** | lite-plan (--bugfix) → lite-execute | 修复的代码 |
|
||||
| **完整规划+执行** | plan → execute | 工作代码 |
|
||||
| **验证规划+执行** | plan → plan-verify → execute | 工作代码 |
|
||||
| **重规划+执行** | replan → execute | 工作代码 |
|
||||
| **TDD 规划+执行** | tdd-plan → execute | 工作代码 |
|
||||
| **测试生成+执行** | test-gen → execute | 生成的测试 |
|
||||
| **审查循环** | review-session-cycle → review-cycle-fix | 修复的代码 |
|
||||
| **Issue 工作流** | discover → plan → queue → execute | 完成的 Issue |
|
||||
| **规格驱动完整流水线** | spec-generator → plan → execute | 工作代码 |
|
||||
|
||||
**工作流程**:
|
||||
**测试单元**:
|
||||
|
||||
| 单元名称 | 命令链 | 输出 |
|
||||
| --- | --- | --- |
|
||||
| **测试验证** | test-fix-gen → test-cycle-execute | 测试通过 |
|
||||
|
||||
**审查单元**:
|
||||
|
||||
| 单元名称 | 命令链 | 输出 |
|
||||
| --- | --- | --- |
|
||||
| **代码审查 (会话)** | review-session-cycle → review-cycle-fix | 修复的代码 |
|
||||
| **代码审查 (模块)** | review-module-cycle → review-cycle-fix | 修复的代码 |
|
||||
|
||||
**Issue 单元**:
|
||||
|
||||
| 单元名称 | 命令链 | 输出 |
|
||||
| --- | --- | --- |
|
||||
| **Issue 工作流** | discover → plan → queue → execute | 完成的 Issue |
|
||||
| **快速转 Issue** | lite-plan → convert-to-plan → queue → execute | 完成的 Issue |
|
||||
| **头脑风暴转 Issue** | from-brainstorm → queue → execute | 完成的 Issue |
|
||||
|
||||
**With-File 单元**:
|
||||
|
||||
| 单元名称 | 命令链 | 输出 |
|
||||
| --- | --- | --- |
|
||||
| **分析到规划** | analyze-with-file → lite-plan | discussion.md + 代码 |
|
||||
| **头脑风暴到规划** | brainstorm-with-file → lite-plan | brainstorm.md + 代码 |
|
||||
| **调试文档** | debug-with-file | understanding.md |
|
||||
| **协作规划** | collaborative-plan-with-file → unified-execute-with-file | plan-note.md + 代码 |
|
||||
| **路线图规划** | roadmap-with-file → team-planex | execution-plan.json + 代码 |
|
||||
|
||||
**Cycle 单元**:
|
||||
|
||||
| 单元名称 | 命令链 | 输出 |
|
||||
| --- | --- | --- |
|
||||
| **集成测试循环** | integration-test-cycle | 测试通过 |
|
||||
| **重构循环** | refactor-cycle | 重构后代码 |
|
||||
|
||||
**原子组规则**:
|
||||
|
||||
1. **永不拆分单元**: Coordinator 必须推荐完整单元，而非部分链
|
||||
2. **多单元参与**: 某些命令可参与多个单元 (如 plan → execute 或 plan → plan-verify → execute)
|
||||
3. **用户覆盖**: 用户可显式请求部分执行 (高级模式)
|
||||
4. **可视化**: 流水线视图用 `【 】` 标记显示单元边界
|
||||
5. **验证**: 执行前验证所有单元命令已包含
|
||||
|
||||
**流水线可视化示例**:
|
||||
```
|
||||
需求 → 【lite-plan → lite-execute】→ 代码 → 【test-fix-gen → test-cycle-execute】→ 测试通过
|
||||
└──── 快速实现 ────┘ └────── 测试验证 ──────┘
|
||||
```
|
||||
|
||||
**语法**:
|
||||
```bash
|
||||
/ccw-coordinator "任务描述"
|
||||
```
|
||||
|
||||
**3 阶段工作流程**:
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[任务分析] --> B[发现命令]
|
||||
B --> C[推荐命令链]
|
||||
A[Phase 1: 任务分析] --> B[Phase 2: 发现命令]
|
||||
B --> C[Phase 2b: 推荐命令链]
|
||||
C --> D{用户确认}
|
||||
D -->|确认| E[顺序执行]
|
||||
D -->|确认| E[Phase 3: 顺序执行]
|
||||
D -->|修改| F[调整命令链]
|
||||
F --> D
|
||||
E --> G[状态持久化]
|
||||
@@ -114,6 +260,84 @@ graph TD
|
||||
H -->|否| I[完成]
|
||||
```
|
||||
|
||||
**命令端口定义**:
|
||||
|
||||
每个命令有**输入/输出端口**用于流水线组合:
|
||||
|
||||
| 端口 | 描述 |
|
||||
|------|------|
|
||||
| `requirement` | 初始用户需求 |
|
||||
| `bug-report` | Bug 报告 |
|
||||
| `plan` | 基础规划输出 |
|
||||
| `detailed-plan` | 详细规划输出 |
|
||||
| `multi-cli-plan` | 多CLI规划输出 |
|
||||
| `verified-plan` | 验证后规划 |
|
||||
| `test-tasks` | 生成的测试任务 |
|
||||
| `code` | 执行的代码 |
|
||||
| `test-passed` | 测试通过验证 |
|
||||
| `discussion-document` | 分析讨论文件 |
|
||||
| `brainstorm-document` | 头脑风暴输出 |
|
||||
| `plan-note` | 协作规划笔记 |
|
||||
|
||||
**外部 CLI 执行格式**:
|
||||
|
||||
```bash
|
||||
ccw cli -p "PROMPT_CONTENT" --tool <tool> --mode <mode>
|
||||
```
|
||||
|
||||
**参数**:
|
||||
- `-p "PROMPT_CONTENT"`: 要执行的提示内容 (必需)
|
||||
- `--tool <tool>`: CLI 工具 (如 `claude`, `gemini`, `qwen`)
|
||||
- `--mode <mode>`: 执行模式 (`analysis` 或 `write`)
|
||||
|
||||
**提示组装格式**:
|
||||
```
|
||||
/workflow:<command> -y <parameters>
|
||||
|
||||
Task: <description>
|
||||
|
||||
<optional_context>
|
||||
```
|
||||
|
||||
**串行阻塞执行**:
|
||||
|
||||
命令逐个执行。启动后台 CLI 后:
|
||||
1. 编排器立即停止 (`break`)
|
||||
2. 等待 Hook 回调 - **不使用 TaskOutput 轮询**
|
||||
3. Hook 回调触发下一个命令
|
||||
|
||||
**状态持久化 (state.json)**:
|
||||
|
||||
位置: `.workflow/.ccw-coordinator/{session_id}/state.json`
|
||||
|
||||
```json
|
||||
{
|
||||
"session_id": "ccw-coord-20250124-143025",
|
||||
"status": "running|waiting|completed|failed",
|
||||
"analysis": { "goal": "...", "task_type": "..." },
|
||||
"command_chain": [
|
||||
{ "index": 0, "command": "/workflow-plan", "status": "completed" },
|
||||
{ "index": 1, "command": "/workflow-execute", "status": "running" }
|
||||
],
|
||||
"execution_results": [
|
||||
{ "index": 0, "command": "/workflow-plan", "status": "completed",
|
||||
"session_id": "WFS-plan-20250124", "artifacts": ["IMPL_PLAN.md"] }
|
||||
],
|
||||
"prompts_used": [
|
||||
{ "index": 0, "command": "plan", "prompt": "/workflow:plan -y \"...\"" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**状态值**: `running` → `waiting` → `completed` | `failed`
|
||||
|
||||
**Hook 回调机制**:
|
||||
|
||||
处理后台 CLI 任务完成并触发链中下一个命令:
|
||||
1. 解析 CLI 输出提取 session_id 和 artifacts
|
||||
2. 更新 state.json 完成结果
|
||||
3. 调用 `resumeChainExecution()` 继续链
|
||||
|
||||
**示例**:
|
||||
|
||||
```bash
|
||||
@@ -122,6 +346,9 @@ graph TD
|
||||
|
||||
# 自动编排功能实现
|
||||
/ccw-coordinator "添加用户头像上传功能"
|
||||
|
||||
# 自动模式
|
||||
/ccw-coordinator -y "实现用户认证系统"
|
||||
```
|
||||
|
||||
## 自动模式
|
||||
@@ -138,24 +365,45 @@ graph TD
|
||||
- 跳过需求澄清
|
||||
- 跳过用户确认
|
||||
- 直接执行命令链
|
||||
- 错误时自动选择 "Skip" 继续
|
||||
|
||||
## 相关 Skills
|
||||
|
||||
| Skill | 功能 |
|
||||
| Skill | 包含操作 |
|
||||
| --- | --- |
|
||||
| `workflow-lite-plan` | 轻量级规划工作流 |
|
||||
| `workflow-plan` | 完整规划工作流 |
|
||||
| `workflow-execute` | 执行工作流 |
|
||||
| `workflow-tdd-plan` | TDD 工作流 |
|
||||
| `review-cycle` | 代码审查循环 |
|
||||
| `workflow-lite-plan` | lite-plan, lite-execute |
|
||||
| `workflow-plan` | plan, plan-verify, replan |
|
||||
| `workflow-execute` | execute |
|
||||
| `workflow-tdd-plan` | tdd-plan, tdd-verify |
|
||||
| `workflow-test-fix` | test-fix-gen, test-cycle-execute |
|
||||
| `review-cycle` | review-session-cycle, review-module-cycle, review-cycle-fix |
|
||||
| `brainstorm` | auto-parallel, artifacts, role-analysis, synthesis |
|
||||
| `spec-generator` | product-brief → PRD → architecture → epics |
|
||||
|
||||
## 命名空间 Skill
|
||||
|
||||
| 类别 | Skill |
|
||||
|------|-------|
|
||||
| **With-File 工作流** | workflow:brainstorm-with-file, workflow:debug-with-file, workflow:analyze-with-file, workflow:collaborative-plan-with-file, workflow:roadmap-with-file |
|
||||
| **Cycle 工作流** | workflow:integration-test-cycle, workflow:refactor-cycle |
|
||||
| **执行** | workflow:unified-execute-with-file |
|
||||
| **会话管理** | workflow:session:start, workflow:session:resume, workflow:session:complete, workflow:session:solidify, workflow:session:list, workflow:session:sync |
|
||||
| **工具** | workflow:clean, workflow:init, workflow:init-guidelines, workflow:status |
|
||||
| **Issue 工作流** | issue:discover, issue:discover-by-prompt, issue:plan, issue:queue, issue:execute, issue:convert-to-plan, issue:from-brainstorm, issue:new |
|
||||
|
||||
## 对比
|
||||
|
||||
| 特性 | /ccw | /ccw-coordinator |
|
||||
| --- | --- | --- |
|
||||
| **执行位置** | 主进程 | 外部 CLI + 后台任务 |
|
||||
| **状态持久化** | 无 | 有 |
|
||||
| **Hook 回调** | 不支持 | 支持 |
|
||||
| **核心概念** | Self-Contained Skills (自包含 Skill) | Minimum Execution Units (最小执行单元) |
|
||||
| **执行位置** | 主进程 (同步阻塞) | 外部 CLI + 后台任务 |
|
||||
| **执行模型** | Skill 调用 (阻塞到完成) | ccw cli + Hook 回调 |
|
||||
| **状态持久化** | status.json (轻量) | state.json (含 execution_results, prompts_used) |
|
||||
| **状态轮询** | 不适用 | **禁止** TaskOutput 轮询，使用 Hook 回调 |
|
||||
| **命令组合** | Skill-Based (独立 Skill 组合) | Port-Based (端口匹配组合) |
|
||||
| **单元可视化** | 无 | `【 】` 标记原子组边界 |
|
||||
| **Hook 回调** | 不支持 | 支持 (事件驱动继续) |
|
||||
| **工作流阶段** | 5 阶段 (含 Phase 1.5 澄清) | 3 阶段 |
|
||||
| **复杂工作流** | 简单链式 | 支持并行、依赖 |
|
||||
| **适用场景** | 日常开发 | 复杂项目、团队协作 |
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## 一句话定位
|
||||
|
||||
**Claude Commands 是 Claude_dms3 的核心命令系统** — 通过斜杠命令调用各种工作流、工具和协作功能。
|
||||
**Claude Commands 是 Claude Code Workflow 的核心命令系统** — 通过斜杠命令调用各种工作流、工具和协作功能。
|
||||
|
||||
## 核心概念速览
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## 一句话定位
|
||||
|
||||
**工作流命令是 Claude_dms3 的执行引擎** — 提供从轻量级任务到复杂项目的完整工作流支持。
|
||||
**工作流命令是 Claude Code Workflow 的执行引擎** — 提供从轻量级任务到复杂项目的完整工作流支持。
|
||||
|
||||
## 命令列表
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## 一句话定位
|
||||
|
||||
**Commands 是 Claude_dms3 的命令系统** — 包含 Claude Code Commands 和 Codex Prompts 两大类别，提供从规范到实现到测试到审查的完整命令行工具链。
|
||||
**Commands 是 Claude Code Workflow 的命令系统** — 包含 Claude Code Commands 和 Codex Prompts 两大类别，提供从规范到实现到测试到审查的完整命令行工具链。
|
||||
|
||||
## 命令分类
|
||||
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
# Claude_dms3 是什么
|
||||
# Claude Code Workflow 是什么
|
||||
|
||||
## 一句话定位
|
||||
|
||||
**Claude_dms3 是 VS Code 的 AI 辅助开发工作台** — 通过语义代码索引、多模型 CLI 调用和团队协作系统，让 AI 深度理解项目并按规范生成高质量代码。
|
||||
**Claude Code Workflow 是 VS Code 的 AI 辅助开发工作台** — 通过语义代码索引、多模型 CLI 调用和团队协作系统，让 AI 深度理解项目并按规范生成高质量代码。
|
||||
|
||||
> AI 能力如藤蔓般生长 — Claude_dms3 是引导 AI 沿着您的项目架构、编码规范和团队工作流前行的支架。
|
||||
> AI 能力如藤蔓般生长 — Claude Code Workflow 是引导 AI 沿着您的项目架构、编码规范和团队工作流前行的支架。
|
||||
|
||||
---
|
||||
|
||||
## 1.1 解决的痛点
|
||||
|
||||
| 痛点 | 现状 | Claude_dms3 方案 |
|
||||
| 痛点 | 现状 | Claude Code Workflow 方案 |
|
||||
|------|------|------------------|
|
||||
| **AI 不理解项目** | 每次新会话都要重新解释项目背景、技术栈和编码规范 | Memory 系统持久化项目上下文，AI 跨会话记住项目知识 |
|
||||
| **代码搜索困难** | 关键词搜索找不到语义相关代码，不知道函数在哪里被调用 | CodexLens 语义索引，支持自然语言搜索和调用链追踪 |
|
||||
@@ -22,7 +22,7 @@
|
||||
|
||||
## 1.2 vs 传统方式对比
|
||||
|
||||
| 维度 | 传统 AI 助手 | **Claude_dms3** |
|
||||
| 维度 | 传统 AI 助手 | **Claude Code Workflow** |
|
||||
|------|-------------|-----------------|
|
||||
| **代码搜索** | 文本关键词搜索 | **语义向量搜索 + LSP 调用链** |
|
||||
| **AI 调用** | 单一模型固定调用 | **多模型协作，按任务选择最优模型** |
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph Claude_dms3_Architecture[Claude_dms3 架构]
|
||||
subgraph Claude Code Workflow_Architecture[Claude Code Workflow 架构]
|
||||
A[CodexLens<br/>语义索引]
|
||||
B[CCW<br/>CLI调用框架]
|
||||
C[Memory<br/>持久化上下文]
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## 一句话定位
|
||||
|
||||
**快速开始是 5 分钟上手指南** — 安装配置、第一个命令、第一个工作流，快速体验 Claude_dms3 核心功能。
|
||||
**快速开始是 5 分钟上手指南** — 安装配置、第一个命令、第一个工作流，快速体验 Claude Code Workflow 核心功能。
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -2,17 +2,17 @@
|
||||
|
||||
## 一句话定位
|
||||
|
||||
**核心概念是理解 Claude_dms3 的基础** — Commands、Skills、Prompts 三层抽象，Workflow 会话管理，团队协作模式。
|
||||
**核心概念是理解 Claude Code Workflow 的基础** — Commands、Skills、Prompts 三层抽象，Workflow 会话管理，团队协作模式。
|
||||
|
||||
---
|
||||
|
||||
## 3.1 三层抽象
|
||||
|
||||
Claude_dms3 的命令系统分为三层抽象：
|
||||
Claude Code Workflow 的命令系统分为三层抽象：
|
||||
|
||||
### 3.1.1 Commands - 内置命令
|
||||
|
||||
**Commands 是 Claude_dms3 的原子操作** — 预定义的可复用命令，完成特定任务。
|
||||
**Commands 是 Claude Code Workflow 的原子操作** — 预定义的可复用命令，完成特定任务。
|
||||
|
||||
| 类别 | 命令数量 | 说明 |
|
||||
| --- | --- | --- |
|
||||
@@ -137,7 +137,7 @@ graph LR
|
||||
|
||||
### 3.4.1 角色系统
|
||||
|
||||
Claude_dms3 支持 8 种团队工作流，每种工作流定义了不同的角色：
|
||||
Claude Code Workflow 支持 8 种团队工作流，每种工作流定义了不同的角色：
|
||||
|
||||
| 工作流 | 角色 | 说明 |
|
||||
| --- | --- | --- |
|
||||
|
||||
@@ -312,7 +312,7 @@ graph LR
|
||||
|
||||
## 总结
|
||||
|
||||
Claude_dms3 的最佳实践可以总结为：
|
||||
Claude Code Workflow 的最佳实践可以总结为：
|
||||
|
||||
1. **规范先行** - 制定清晰的团队规范
|
||||
2. **流程保障** - 使用合适的工作流
|
||||
@@ -324,7 +324,7 @@ Claude_dms3 的最佳实践可以总结为：
|
||||
|
||||
## 相关链接
|
||||
|
||||
- [Claude_dms3 是什么](ch01-what-is-claude-dms3.md)
|
||||
- [Claude Code Workflow 是什么](ch01-what-is-claude-dms3.md)
|
||||
- [快速开始](ch02-getting-started.md)
|
||||
- [核心概念](ch03-core-concepts.md)
|
||||
- [工作流基础](ch04-workflow-basics.md)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: page
|
||||
title: CCW 文档
|
||||
title: Claude Code Workflow 文档
|
||||
titleTemplate: Claude Code Workspace
|
||||
---
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
## 解决的痛点
|
||||
|
||||
| 痛点 | 现状 | Claude_dms3 方案 |
|
||||
| 痛点 | 现状 | Claude Code Workflow 方案 |
|
||||
| --- | --- | --- |
|
||||
| **单模型局限** | 只能调用一个 AI 模型 | 多角色并行协作，发挥各自专长 |
|
||||
| **任务编排混乱** | 手动管理任务依赖和状态 | 自动任务发现、依赖解析、流水线编排 |
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
## vs 传统方法对比
|
||||
|
||||
| 维度 | 传统方式 | **Claude_dms3** |
|
||||
| 维度 | 传统方式 | **Claude Code Workflow** |
|
||||
| --- | --- | --- |
|
||||
| 任务编排 | 手动管理 | 自动流水线编排 |
|
||||
| AI 模型 | 单一模型 | 多模型并行协作 |
|
||||
@@ -43,7 +43,7 @@
|
||||
|
||||
### 团队架构模型
|
||||
|
||||
Claude_dms3 支持两种团队架构模型：
|
||||
Claude Code Workflow 支持两种团队架构模型：
|
||||
|
||||
1. **team-coordinate** (通用协调器)
|
||||
- 只有 coordinator 是内置的
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
## 解决的痛点
|
||||
|
||||
| 痛点 | 现状 | Claude_dms3 方案 |
|
||||
| 痛点 | 现状 | Claude Code Workflow 方案 |
|
||||
| --- | --- | --- |
|
||||
| **新会话失忆** | 每次对话需要重新解释项目背景 | Memory 持久化上下文 |
|
||||
| **知识流失** | 有价值的洞察和决策随会话消失 | Memory 压缩和 Tips 记录 |
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
## 解决的痛点
|
||||
|
||||
| 痛点 | 现状 | Claude_dms3 方案 |
|
||||
| 痛点 | 现状 | Claude Code Workflow 方案 |
|
||||
| --- | --- | --- |
|
||||
| **Skill 创建复杂** | 手动创建 Skill 结构和文件 | 自动化 Skill 生成 |
|
||||
| **规范缺失** | 项目规范散落各处 | 统一规范生成系统 |
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
## 解决的痛点
|
||||
|
||||
| 痛点 | 现状 | Claude_dms3 方案 |
|
||||
| 痛点 | 现状 | Claude Code Workflow 方案 |
|
||||
| --- | --- | --- |
|
||||
| **审查维度不全** | 手动审查容易遗漏维度 | 6 维度自动审查 |
|
||||
| **问题分类混乱** | 难以区分严重程度 | 结构化问题分类 |
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
## 解决的痛点
|
||||
|
||||
| 痛点 | 现状 | Claude_dms3 方案 |
|
||||
| 痛点 | 现状 | Claude Code Workflow 方案 |
|
||||
| --- | --- | --- |
|
||||
| **手动任务拆解** | 人工分解任务，容易遗漏 | 自动化任务生成和依赖管理 |
|
||||
| **执行状态分散** | 各工具独立，状态不统一 | 统一会话管理、TodoWrite 追踪 |
|
||||
|
||||
Reference in New Issue
Block a user