跳转到内容
Vue Remote logo Vue Remote logo Vue Remote

Worker 文件树

这个示例由哪些部分组成

Section titled “这个示例由哪些部分组成”

这个页面展示的是完整的 Worker 嵌套文件树场景，而不是模拟预览。docs 页面负责 host DOM 和指针命中测试，remote Vue app 则在专用 Web Worker 中保存树结构、inline 编辑状态和 drag 逻辑。

这个示例包含三部分：

  • 把 HostedTree 挂到预览区域中的 host runtime；
  • 渲染文件夹、文件、inline 操作并处理 RemoteSortableEvent 的 remote Worker 应用；
  • 位于树下方的实时 snapshot，用来显示每次编辑和 drop 之后的当前嵌套 remote state。

如何交互

Section titled “如何交互”
  • 通过 handle 拖拽节点来重排同级节点或把它们移动到其他文件夹。
  • 直接 inline 重命名项目、添加文件或文件夹，并从当前树中删除节点。
  • 使用 重置树 可以恢复初始 workspace 结构。

运行在专用 Worker 中的可排序可编辑文件树

通过 handle 拖拽文件和文件夹，在文件夹之间移动节点，inline 编辑名称，创建新的条目，并在需要时将 workspace 恢复到初始状态。

正在启动专用 Worker runtime...

这个文件树接入的正是库对外公开 runtime API 所使用的同一套 host/worker transport 模型。

import type { Channel } from '@omnicajs/vue-remote/host'


import { createEndpoint, fromWebWorker } from '@remote-ui/rpc'
import {
  createApp,
  h,
} from 'vue'


import {
  HostedTree,
  createProvider,
  createReceiver,
} from '@omnicajs/vue-remote/host'


interface SandboxWorkerApi {
  release (): void;
  run (channel: Channel, labels: SortableFileTreeSandboxLabels): Promise<void>;
}


export interface SortableFileTreeSandboxLabels {
  addFileLabel: string;
  addFolderLabel: string;
  booting: string;
  cancelLabel: string;
  collapseLabel: string;
  deleteLabel: string;
  dragCanceledAction: string;
  draggingAction: string;
  emptyFolderLabel: string;
  expandLabel: string;
  failed: string;
  fileAddedAction: string;
  fileKindLabel: string;
  folderAddedAction: string;
  folderKindLabel: string;
  initialAction: string;
  movedAction: string;
  newFileName: string;
  newFolderName: string;
  ready: string;
  removedAction: string;
  renameLabel: string;
  renamedAction: string;
  resetLabel: string;
  rootEyebrow: string;
  saveLabel: string;
  snapshotLabel: string;
  snapshotUnavailable?: string;
  unsupported: string;
}


export interface SortableFileTreeSandboxElements {
  rootElement: HTMLElement;
}


export interface SortableFileTreeSandboxHandle {
  destroy (): Promise<void>;
}


export const mountSortableFileTreeSandbox = async (
  elements: SortableFileTreeSandboxElements,
  labels: SortableFileTreeSandboxLabels
): Promise<SortableFileTreeSandboxHandle> => {
  const { rootElement } = elements


  if (typeof Worker === 'undefined') {
    rootElement.textContent = labels.unsupported


    return {
      async destroy () {},
    }
  }


  rootElement.textContent = labels.booting


  const receiver = createReceiver()
  const provider = createProvider()
  const host = createApp({
    render: () => h(HostedTree, { provider, receiver }),
  })
  const worker = new Worker(new URL('./remote.worker.ts', import.meta.url), {
    type: 'module',
  })
  const endpoint = createEndpoint<SandboxWorkerApi>(fromWebWorker(worker))
  let destroyed = false


  const destroy = async () => {
    if (destroyed) {
      return
    }


    destroyed = true


    try {
      await endpoint.call.release()
    } catch {
      // Worker teardown should not block page cleanup.
    } finally {
      endpoint.terminate()
      worker.terminate()
      host.unmount()
      rootElement.innerHTML = ''
    }
  }


  try {
    host.mount(rootElement)
    await endpoint.call.run(receiver.receive, labels)
  } catch (error) {
    await destroy()
    rootElement.textContent = `${labels.failed}: ${error instanceof Error ? error.message : String(error)}`
  }


  return {
    destroy,
  }
}

相关页面

Section titled “相关页面”