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

Worker 可排序表格

这个示例由哪些部分组成

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

这个页面展示的是完整的 Worker sortable table 场景，而不是模拟预览。docs 页面负责 host DOM 和指针命中测试，remote Vue app 与行顺序状态则运行在专用 Web Worker 中。

这个示例包含三部分：

  • 把 HostedTree 挂到预览区域中的 host runtime；
  • 渲染表格行并处理 RemoteSortableEvent 的 remote Worker 应用；
  • 位于表格下方的实时 snapshot，用来显示每次 drop 之后的当前 remote order。

如何交互

Section titled “如何交互”
  • 只能通过第一列里的 Drag handle 抓取行。
  • 把一行移动到另一行的上方或下方来改变顺序。
  • 需要回到初始状态时，使用 重置表格。

运行在专用 Worker 中的 sortable 表格

通过 handle 拖拽行，在同一张表内重排行顺序，并在需要时把示例重置回初始状态。

正在启动专用 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: SortableTableSandboxLabels): Promise<void>;
}


export interface SortableTableSandboxLabels {
  booting: string;
  failed: string;
  ready: string;
  resetLabel: string;
  snapshotLabel: string;
  snapshotUnavailable?: string;
  unsupported: string;
}


export interface SortableTableSandboxElements {
  rootElement: HTMLElement;
}


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


export const mountSortableTableSandbox = async (
  elements: SortableTableSandboxElements,
  labels: SortableTableSandboxLabels
): Promise<SortableTableSandboxHandle> => {
  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 “相关页面”