# @critical-path/svelte 中文文档

规范地址：https://npmcn.com/package/%40critical-path/svelte/

版本：0\.19\.11
npm 元数据更新时间：2026-11-05T14:30:18.440Z
中文译文更新时间：2026-11-11T01:02:08.821Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40critical-path/svelte
原文对照：https://npmcn.com/package/%40critical-path/svelte/?lang=original
项目主页：https://github.com/Pixerate/critical-path#readme
源码仓库：https://github.com/Pixerate/critical-path

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：278 kB，39 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=24\.0\.0
- 运行依赖：3 个
- peer 依赖：svelte ^5\.57\.2
- 首次发布：2026-08-24T12:22:46.262Z
- 最新版本发布：2026-11-05T14:30:18.046Z
- 近 30 天下载量：3974（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：95（近 12 个月 95 个）

## 中文简介

Svelte 5 Runes 关键路径无头项目管理框架的状态和反应性整合

## 安装

```sh
npm install @critical-path/svelte
```

也可以使用：`pnpm add @critical-path/svelte`、`yarn add @critical-path/svelte`、`bun add @critical-path/svelte`

## README

# @ 关键路径/ svelte

> **Svelte 5 Runes 关键路径的活性集成.**

> **升级?** 升级一次 `@critical-path/*` 组合在一起。 编码代理: 遵循 [更新(md)](https://github.com/Pixerate/critical-path/blob/main/UPGRADING.md); 已标记断开的更改 **刹车** 此软件包中 `CHANGELOG.md`。 。 。 .

`@critical-path/svelte` 提供Svelte 5 Runes反应性国家班级和工厂(`ProjectState`, (中文(简体) ), `TaskState`, (中文(简体) ), `KanbanState`, (中文(简体) ), `TaskTransitionsState`, (中文(简体) ), `WorkflowState`, (中文(简体) ), `CommentState`, (中文(简体) ), `AttachmentState`, (中文(简体) ), `TaskActivityState`, (中文(简体) ), `DeliverableState`, (中文(简体) ), `DeliverableSummaryState`, (中文(简体) ), `WebMcpState`在Svelte 5和SvelteKit应用中用于建设项目管理 UIs.

* * *

## \* 安装

```bash
npm install @critical-path/svelte svelte@^5.0.0
# or
pnpm add @critical-path/svelte svelte@^5.0.0
```

* * *

## 使用实例( Svelte 5 Runes)

### 1\. 项目和任务

```svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import {
    createCriticalPathClient,
    createProjectState,
    createTaskState
  } from '@critical-path/svelte';

  const client = createCriticalPathClient({ baseUrl: '/api/critical-path' });
  const projectState = createProjectState(client);
  const taskState = createTaskState(client, 'proj_1');

  onMount(() => {
    projectState.fetch();
    taskState.fetch();
  });
</script>

{#if taskState.loading || projectState.loading}
  <p>Loading tasks...</p>
{:else if taskState.error}
  <p style="color: red;">Error: {taskState.error.message}</p>
{:else}
  <ul>
    {#each taskState.data as task}
      <li><strong>{task.title}</strong> - {task.status}</li>
    {/each}
  </ul>
{/if}
```

### 2\. 反动Kanban委员会(`KanbanState`(中文(简体) )

Buckets 任务被动进入工作流程列(`backlog`, (中文(简体) ), `todo`, (中文(简体) ), `in_progress`等)或语义列(`not_started`, (中文(简体) ), `in_progress`, (中文(简体) ), `completed`, (中文(简体) ), `canceled`:

```svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import { createCriticalPathClient, createKanbanState } from '@critical-path/svelte';

  const client = createCriticalPathClient({ baseUrl: '/api/critical-path' });
  const kanban = createKanbanState(client, 'proj_1');

  onMount(() => {
    kanban.fetch();
  });
</script>

<div class="board" style="display: flex; gap: 16px;">
  {#each Object.entries(kanban.columns) as [status, tasks]}
    <div class="column">
      <h3>{status} ({tasks.length})</h3>
      {#each tasks as task}
        <div class="card">
          <h4>{task.title}</h4>
          <button on:click={() => kanban.moveTask(task.id, 'done')}>Mark Done</button>
        </div>
      {/each}
    </div>
  {/each}
</div>
```

### 3\. 统一任务活动和线索讨论(`TaskActivityState`(中文(简体) )

将线性注释与内置附件合并( Name`attachment.commentId === comment.id`单活性商店的独立附件:

```svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import { createCriticalPathClient, createTaskActivityState } from '@critical-path/svelte';

  const client = createCriticalPathClient({ baseUrl: '/api/critical-path' });
  const activityState = createTaskActivityState(client, 'task_1');

  onMount(() => {
    activityState.fetch();
  });

  async function handleSend(text: string, fileUrl?: string) {
    await activityState.addComment(
      { content: text },
      fileUrl ? [{ filename: 'upload.png', url: fileUrl, mimeType: 'image/png', sizeBytes: 1024 }] : []
    );
  }
</script>

{#each activityState.threads as thread}
  <div class="comment">
    <p><strong>{thread.authorId}</strong>: {thread.content}</p>
    
    <!-- Inline comment attachments -->
    {#if thread.attachments.length > 0}
      <div class="attachments">
        {#each thread.attachments as att}
          <a href={att.url} target="_blank">{att.filename}</a>
        {/each}
      </div>
    {/if}

    <!-- Emoji Reactions -->
    <div class="reactions">
      <button on:click={() => activityState.addReaction(thread.id, '👍')}>👍</button>
      <button on:click={() => activityState.addReaction(thread.id, '🚀')}>🚀</button>
      <span>{thread.reactions?.length || 0} reactions</span>
    </div>

    <!-- Threaded replies -->
    {#each thread.replies as reply}
      <div class="reply">
        <p>↪ {reply.authorId}: {reply.content}</p>
      </div>
    {/each}
  </div>
{/each}
```

### 4\. 抽象梯子`TimelineLadderState`(中文(简体) )

在宏观阶段健康、标准甘特任务与CPM关键路径以及使用Svelte 5 Runes的可实现/努力之间流畅地进行:

```svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import { createCriticalPathClient, createTimelineLadderState, createCriticalPathState } from '@critical-path/svelte';

  const client = createCriticalPathClient({ baseUrl: '/api/critical-path' });
  const ladderState = createTimelineLadderState(client, 'proj_1', { level: 'all' });
  const cpmState = createCriticalPathState(client, 'proj_1');

  onMount(() => {
    ladderState.fetch();
    cpmState.fetch();
  });
</script>

<!-- Level Switcher -->
<div class="flex gap-2">
  <button on:click={() => ladderState.setLevel('macro')}>Macro</button>
  <button on:click={() => ladderState.setLevel('standard')}>Standard Gantt</button>
  <button on:click={() => ladderState.setLevel('concrete')}>Concrete</button>
  <button on:click={() => ladderState.setLevel('all')}>All Rungs</button>
</div>

{#if ladderState.loading}
  <p>Loading timeline ladder...</p>
{:else}
  <!-- Macro Rung -->
  {#if ladderState.macro}
    <div class="macro-banner">
      <h3>Phase Health: {ladderState.macro.health} ({ladderState.macro.overallProgressPercentage}% Complete)</h3>
      <p>Total Duration: {ladderState.macro.totalDurationHours}h | Critical Path: {ladderState.macro.criticalPathDurationHours}h</p>
    </div>
  {/if}

  <!-- Standard Rung -->
  {#if ladderState.standard}
    <div class="standard-gantt">
      <h4>Gantt Schedule</h4>
      {#each ladderState.standard.tasks as item}
        <div class:is-critical={item.isCritical}>
          {item.task.title} (Early Start: {item.schedule.earlyStart}h, Total Slack: {item.schedule.totalSlack}h)
        </div>
      {/each}
    </div>
  {/if}

  <!-- Concrete Rung -->
  {#if ladderState.concrete}
    <div class="concrete-grounding">
      <h4>Concrete Ground Truth</h4>
      {#each Object.entries(ladderState.concrete) as [taskId, evidence]}
        <div>Task {taskId}: {evidence.deliverables.length} deliverables, {evidence.attachments.length} files</div>
      {/each}
    </div>
  {/if}
{/if}
```

* * *

## & & 清理

每个状态类在 `fetch()` (或 `fetchMetrics()`,.)被再次唤起,所以最新的呼叫总是获胜. 打电话 `destroy()` 当一个组件消失以取消任何仍在飞行中的东西时:

```svelte
<script lang="ts">
  import { onDestroy } from 'svelte';
  const tasks = createTaskState(client, projectId);
  onDestroy(() => tasks.destroy());
</script>
```

## 许可证

麻省理工学院 [关键路径](https://github.com/Pixerate/Critical-Path)

## 常见问题

### @critical-path/svelte 是什么？

Svelte 5 Runes 关键路径无头项目管理框架的状态和反应性整合

### 如何安装 @critical-path/svelte？

在项目目录运行 npm install @critical-path/svelte，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（^5\.57\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @critical-path/svelte 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @critical-path/svelte 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @critical-path/svelte 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=24\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @critical-path/svelte 可以商用吗？

@critical-path/svelte 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @critical-path/svelte 的下载量有多少？

根据 npm 官方下载统计，@critical-path/svelte 在 2026/10/11 – 2026/11/09 这 30 天内被下载 3,974 次，日均约 132 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @critical-path/svelte 还在维护吗？

最新版本 0\.19\.11 发布于 2026/11/05（5 天前）；至今共发布 95 个版本，其中过去 12 个月发布了 95 个；首次发布于 2026/08/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。