init

src/components/CodeBlock.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="overflow-hidden rounded-xl bg-slate-900 p-3 text-gray-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]"
+  >
+    <div class="mb-2 flex items-center justify-between text-[11px] uppercase tracking-[0.08em] text-gray-400">
+      <span>{{ lang || 'text' }}</span>
+      <button
+        class="rounded-full border border-white/10 bg-white/10 px-2.5 py-1 text-[11px] text-gray-50 transition-colors hover:bg-white/15"
+        @click="handleCopy"
+      >
+        {{ copied ? '已复制' : '复制' }}
+      </button>
+    </div>
+    <pre class="m-0 whitespace-pre-wrap font-mono text-[13px] leading-relaxed"><code>{{ code }}</code></pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  code: string
+  lang?: string
+}>()
+
+const copied = ref(false)
+
+const handleCopy = async () => {
+  try {
+    await navigator.clipboard.writeText(props.code)
+    copied.value = true
+    setTimeout(() => (copied.value = false), 1500)
+  } catch (e) {
+    console.error(e)
+  }
+}
+</script>