workflow(sfc-playground): add reload function (#8674)

This commit is contained in:
丶远方 2023-12-12 23:06:46 +08:00 committed by GitHub
parent bb0c8899ca
commit 20ad475718
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 1 deletions

View File

@ -18,6 +18,8 @@ if (import.meta.env.DEV) {
)
}
const replRef = ref<InstanceType<typeof Repl>>()
const setVH = () => {
document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
}
@ -90,6 +92,10 @@ function toggleSSR() {
store.setFiles(store.getFiles())
}
function reloadPage() {
replRef.value?.reload()
}
const theme = ref<'dark' | 'light'>('dark')
function toggleTheme(isDark: boolean) {
theme.value = isDark ? 'dark' : 'light'
@ -108,9 +114,11 @@ onMounted(() => {
@toggle-theme="toggleTheme"
@toggle-dev="toggleDevMode"
@toggle-ssr="toggleSSR"
@reload-page="reloadPage"
/>
<Repl
v-if="EditorComponent"
ref="replRef"
:theme="theme"
:editor="EditorComponent"
@keydown.ctrl.s.prevent

View File

@ -6,6 +6,7 @@ import Moon from './icons/Moon.vue'
import Share from './icons/Share.vue'
import Download from './icons/Download.vue'
import GitHub from './icons/GitHub.vue'
import Reload from './icons/Reload.vue'
import type { ReplStore } from '@vue/repl'
import VersionSelect from './VersionSelect.vue'
@ -14,7 +15,12 @@ const props = defineProps<{
dev: boolean
ssr: boolean
}>()
const emit = defineEmits(['toggle-theme', 'toggle-ssr', 'toggle-dev'])
const emit = defineEmits([
'toggle-theme',
'toggle-ssr',
'toggle-dev',
'reload-page'
])
const { store } = props
@ -105,6 +111,9 @@ function toggleDark() {
<button title="Copy sharable URL" class="share" @click="copyLink">
<Share />
</button>
<button title="Reload page" class="reload" @click="$emit('reload-page')">
<Reload />
</button>
<button
title="Download project files"
class="download"

View File

@ -0,0 +1,6 @@
<template>
<svg fill="currentColor" width="1.7em" height="1.7em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</template>