From 7305de3621fd9685c8be2183c9efc875bd1c40b1 Mon Sep 17 00:00:00 2001 From: _Kerman Date: Thu, 9 May 2024 17:57:20 +0800 Subject: [PATCH] feat: improve preview webview UX --- .../vscode/src/composables/usePreviewState.ts | 4 +- packages/vscode/src/html/error.ts | 40 ++++++++++++------- packages/vscode/src/html/ready.ts | 2 +- packages/vscode/src/views/previewWebview.ts | 9 ++--- 4 files changed, 31 insertions(+), 24 deletions(-) diff --git a/packages/vscode/src/composables/usePreviewState.ts b/packages/vscode/src/composables/usePreviewState.ts index dd9426eb6e..878abbe95b 100644 --- a/packages/vscode/src/composables/usePreviewState.ts +++ b/packages/vscode/src/composables/usePreviewState.ts @@ -16,10 +16,10 @@ export const usePreviewState = createSingletonComposable(() => { const port = computed(() => activeServer.value?.port.value) const compatMode = useVscodeContext('slidev:preview:compat', () => !!activeServer.value?.state.compatMode) const ready = useVscodeContext('slidev:preview:ready', () => !!activeServer.value?.state.ready) - const message = computed(() => activeServer.value?.state.message ?? 'No active project') + const message = computed(() => activeServer.value?.state.message ?? '') const html = computed(() => ready.value ? generateReadyHtml(port.value!) - : generateErrorHtml(activeProject.value, message.value), + : generateErrorHtml(message.value), ) function refresh() { diff --git a/packages/vscode/src/html/error.ts b/packages/vscode/src/html/error.ts index dc1514904f..ac8b54bf67 100644 --- a/packages/vscode/src/html/error.ts +++ b/packages/vscode/src/html/error.ts @@ -1,18 +1,34 @@ -import type { SlidevProject } from '../projects' +import { activeProject, projects } from '../projects' import { getSlidesTitle } from '../utils/getSlidesTitle' -export function generateErrorHtml(project: SlidevProject | undefined, message: string) { - const infoText = project +export function generateErrorHtml(message: string) { + const project = activeProject.value + const info = project ? `Slidev server for ${getSlidesTitle(project.data)} ${project.port ? `not found on http://localhost:${project.port}` : `not started` }.` - : `No active project` + : projects.size + ? `No active project` + : `No projects found` + const errorMessage = message ? `(${message})` : `` + const instruction = project + ? `Please start the server first.` + : projects.size + ? `Please choose one first.` + : `Please add one first.` + const action = project + ? project.port + ? `` + : `` + : projects.size + ? `` + : `` return `