feat: 添加 HeaderBar 组件并优化 Playground 组件的布局和样式

Author: MarleneJiang

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Slidev-Parser Playground</title>
+    <title>SlidevParser Playground</title>
     <style>
       body {
         margin: 0;

playground/src/components/HeaderBar.vue

@@ -0,0 +1,72 @@
+<script lang='ts' setup>
+import { useClipboard } from '@vueuse/core'
+import { toggleDark } from '../composables/dark'
+import { inputMDC } from '../composables/url'
+
+// 接收 paneSize 的 props，并定义切换事件
+defineProps({
+  paneSize: {
+    type: Number,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['toggleSize'])
+
+const { copy, copied } = useClipboard()
+
+function handleShare() {
+  const url = new URL(window.location.href)
+  copy(url.toString())
+}
+
+function handleReset() {
+  // eslint-disable-next-line no-alert
+  if (confirm('Reset all settings? It can NOT be undone.')) {
+    inputMDC.value = ''
+  }
+}
+</script>
+
+<template>
+  <div
+    class="p2 z-10 bg-gray/10"
+    flex="~ items-center wrap gap-3" w-full
+  >
+    <div flex="~ items-center" cursor-pointer @click="emit('toggleSize')">
+      <div flex items-center gap-2>
+        <div :class="paneSize === 0 ? 'i-logos-slidev rotate-90' : 'i-logos-slidev'" />
+        <div text-lg font-bold>
+          SlidevParser
+        </div>
+      </div>
+    </div>
+    <div class="text-sm md:text-base flex flex-auto items-center justify-end flex-nowrap gap-1">
+      <button
+        :class="copied ? 'i-ri-checkbox-circle-line text-green' : 'i-ri-share-line'"
+        icon-btn
+        title="Share Link"
+        @click="handleShare"
+      />
+      <button
+        i-ri-eraser-line
+        icon-btn
+        title="Reset To Default"
+        @click="handleReset"
+      />
+      <a
+        i-ri-github-line icon-btn
+        href="https://github.com/unocss/unocss"
+        target="_blank"
+        title="GitHub"
+      />
+      <button
+        i-ri-sun-line
+        dark:i-ri-moon-line
+        icon-btn
+        title="Toggle Color Mode"
+        @click="toggleDark"
+      />
+    </div>
+  </div>
+</template>

playground/src/components/Playground.vue

@@ -3,27 +3,47 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { Pane, Splitpanes } from 'splitpanes'
 import { ref } from 'vue'
 import Editor from './Edit.vue'
+import HeaderBar from './HeaderBar.vue'
 import Preview from './Preview.vue'
 
 const bp = useBreakpoints(breakpointsTailwind)
-
 const isMobile = bp.smaller('sm')
 const isResizing = ref(false)
+
+const paneSize = ref(50)
+const savedSize = ref(50)
+
+function toggleSize() {
+  if (paneSize.value > 0) {
+    savedSize.value = paneSize.value
+    paneSize.value = 0
+  }
+  else {
+    paneSize.value = savedSize.value || 50
+  }
+}
+function onResize($event) {
+  isResizing.value = true
+  paneSize.value = $event[0].size
+}
 </script>
 
 <template>
   <Splitpanes
     h-screen
     w-screen
     :horizontal="isMobile"
+    @resize="onResize"
     @resized="isResizing = false"
-    @resize="isResizing = true"
   >
-    <Pane>
+    <Pane :size="paneSize">
       <Editor border="r t main solid" />
     </Pane>
-    <Pane>
-      <Preview :resizing="isResizing" />
+    <Pane flex="~ col" h-full :size="100 - paneSize">
+      <HeaderBar :pane-size="paneSize" @toggle-size="toggleSize" />
+      <div flex-1 of-hidden>
+        <Preview />
+      </div>
     </Pane>
   </Splitpanes>
 </template>

playground/src/composables/dark.ts

@@ -0,0 +1,48 @@
+import { useDark } from '@vueuse/core'
+import { nextTick } from 'vue'
+
+export const isDark = useDark()
+
+// @ts-expect-error: Transition API
+const isAppearanceTransition = document.startViewTransition
+  && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+/**
+ * Credit to [@hooray](https://github.com/hooray)
+ * @see https://github.com/vuejs/vitepress/pull/2347
+ */
+export function toggleDark(event?: MouseEvent) {
+  if (!isAppearanceTransition || !event) {
+    isDark.value = !isDark.value
+    return
+  }
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  )
+  const transition = document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  })
+  transition.ready.then(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ]
+    document.documentElement.animate(
+      {
+        clipPath: isDark.value
+          ? [...clipPath].reverse()
+          : clipPath,
+      },
+      {
+        duration: 400,
+        easing: 'ease-in',
+        pseudoElement: isDark.value
+          ? '::view-transition-old(root)'
+          : '::view-transition-new(root)',
+      },
+    )
+  })
+}

playground/src/composables/url.ts

@@ -19,7 +19,7 @@ export const inputMDC = ref(decode(params.get('mdc') || '') || defaultMDC)
 export const options: Ref<RendererOptions> = ref(JSON.parse(decode(params.get('options') || '') || defaultOptions))
 
 export function updateUrl() {
-  const url = new URL('/play/', window.location.origin)
+  const url = new URL('/', window.location.origin)
   params.set('mdc', encode(inputMDC.value))
   // params.set('options', encode(JSON.stringify(options.value)))
   localStorage.setItem(STORAGE_KEY, url.search)