Initial commit: Multi-Agent Coordination Platform

- Vue 3 + TypeScript + Vite project structure
- Element Plus UI components with dark theme
- Pinia state management for agents and tasks
- JSPlumb integration for visual workflow editing
- SVG icon system for agent roles
- Axios request layer with API proxy configuration
- Tailwind CSS for styling
- Docker deployment with Caddy web server
- Complete development toolchain (ESLint, Prettier, Vitest)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/stores/index.ts

@@ -0,0 +1,11 @@
+import { createPinia } from 'pinia'
+import type { App } from 'vue'
+
+export const store = createPinia()
+
+// 全局注册 store
+export function setupStore(app: App<Element>) {
+  app.use(store)
+}
+
+export * from './modules/agents.ts'

src/stores/modules/agents.ts

@@ -0,0 +1,104 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { v4 as uuidv4 } from 'uuid'
+
+import { store } from '../index'
+import { useStorage } from '@vueuse/core'
+
+
+export interface Agent {
+  Name: string
+  Profile: string
+  Icon: string
+}
+
+type HslColorVector = [number, number, number]
+
+export interface IRichText {
+  template: string;
+  data: Record<string, {
+    text: string;
+    style?: Record<string, string>
+    color?: HslColorVector
+  }>;
+}
+
+export interface TaskProcess {
+  ActionType: string
+  AgentName: string
+  Description: string
+  ID: string
+  ImportantInput: string[]
+}
+
+export interface IRawStepTask {
+  Id?: string
+  StepName?: string
+  TaskContent?: string
+  InputObject_List?: string[]
+  OutputObject?: string
+  AgentSelection?: string[]
+  Collaboration_Brief_FrontEnd: IRichText
+  TaskProcess: TaskProcess[]
+}
+
+export interface IRawPlanResponse {
+  'Initial Input Object'?: string[] | string
+  'General Goal'?: string
+  'Collaboration Process'?: IRawStepTask[]
+}
+
+export const useAgentsStore = defineStore('counter', () => {
+  const agents = useStorage<Agent[]>('agents', [])
+  function setAgents(agent: Agent[]) {
+    agents.value = agent
+  }
+
+  // 任务搜索的内容
+  const searchValue = useStorage<string>('agent-search-value', '')
+  function setSearchValue(value: string) {
+    searchValue.value = value
+  }
+
+  // 当前的展示的任务流程
+  const currentTask = ref<IRawStepTask>()
+  function setCurrentTask(task: IRawStepTask) {
+    currentTask.value = task
+  }
+
+  const agentRawPlan = ref<{ data?: IRawPlanResponse; loading?: boolean }>({ loading: false })
+
+  function setAgentRawPlan(plan: { data?: IRawPlanResponse; loading?: boolean }) {
+    if (plan.data) {
+      plan.data['Collaboration Process'] = plan.data['Collaboration Process']?.map(item => ({
+        ...item,
+        Id: uuidv4(),
+      }))
+    }
+    agentRawPlan.value = {
+      ...agentRawPlan.value,
+      ...plan,
+    }
+  }
+
+
+  return {
+    agents,
+    setAgents,
+    searchValue,
+    setSearchValue,
+    currentTask,
+    setCurrentTask,
+    agentRawPlan,
+    setAgentRawPlan
+  }
+})
+
+/**
+ * 用于在组件外部（如在Pinia Store 中）使用 Pinia 提供的 store 实例。
+ * 官方文档解释了如何在组件外部使用 Pinia Store：
+ * https://pinia.vuejs.org/core-concepts/outside-component-usage.html#using-a-store-outside-of-a-component
+ */
+export function useAgentsStoreHook() {
+  return useAgentsStore(store)
+}