初始化

client/src/pages/Snippets.vue

@@ -39,24 +39,39 @@
             <div class="text-xs font-mono text-art-accent opacity-0 group-hover:opacity-100 transition-opacity">点击运行 -></div>
           </div>
           <!-- Code Preview (Styled) -->
-          <div class="p-6 overflow-x-auto font-mono text-sm leading-relaxed pointer-events-none opacity-80 group-hover:opacity-100 transition-opacity">
-            <pre class="text-gray-300">{{ snippet.code }}</pre>
+          <div class="p-6 overflow-hidden font-mono text-sm leading-relaxed pointer-events-none opacity-80 group-hover:opacity-100 transition-opacity">
+            <pre class="whitespace-pre-wrap break-all line-clamp-4"><CodeBlock :code="snippet.code" :language="getSnippetLang(snippet.type)" /></pre>
           </div>
         </div>
       </div>
     </div>
+    
+    <!-- Snippet Modal -->
+    <SnippetModal 
+      :is-open="modalOpen" 
+      :title="currentSnippet.title" 
+      :code="currentSnippet.code" 
+      :type="currentSnippet.type"
+      @close="closeSnippet"
+    />
   </section>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeMount } from 'vue'
+import { ref, onMounted, onBeforeMount, nextTick } from 'vue'
 import { fetchSnippets, Snippet } from '../services/api'
 import { useScrollAnimation } from '../composables/useScrollAnimation'
+import SnippetModal from '../components/SnippetModal.vue'
+import CodeBlock from '../components/CodeBlock.vue'
+import hljs from 'highlight.js'
 
 const snippets = ref<Snippet[]>([])
 const loading = ref(false)
 const error = ref('')
 
+const modalOpen = ref(false)
+const currentSnippet = ref<Snippet>({ id: '', title: '', code: '', type: '' })
+
 const { initObserver } = useScrollAnimation()
 
 const fetchSnippetsData = async () => {
@@ -94,6 +109,8 @@ export const useMousePosition = () => {
         code: `.glass-panel {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 }`, 
         type: 'glass' 
@@ -102,7 +119,7 @@ export const useMousePosition = () => {
         id: 'noise', 
         title: 'SVG 噪点纹理滤镜', 
         code: `<filter id="noise">
-  <feTurbulence type="fractalNoise" baseFrequency="0.8" /
+  <feTurbulence type="fractalNoise" baseFrequency="0.8" />
 </filter>`, 
         type: 'noise' 
       },
@@ -127,24 +144,23 @@ export const useMousePosition = () => {
   }
 }
 
-const getSnippetType = (type: string) => {
-  const typeMap: Record<string, string> = {
-    javascript: 'JavaScript',
-    css: 'CSS',
-    html: 'HTML',
-    mouse: 'React Hook',
-    glass: 'CSS',
-    noise: 'SVG',
-    animate: 'CSS Animation'
+const getSnippetLang = (type: string) => {
+  const map: Record<string, string> = {
+    'mouse': 'javascript',
+    'glass': 'css',
+    'noise': 'xml',
+    'animate': 'css'
   }
-  return typeMap[type] || type
+  return map[type] || 'plaintext'
 }
 
-const openSnippet = (snippet: any) => {
-  // 使用全局函数打开代码片段模态框
-  if (window.showSnippet) {
-    window.showSnippet(snippet.title, snippet.code)
-  }
+const openSnippet = (snippet: Snippet) => {
+  currentSnippet.value = snippet
+  modalOpen.value = true
+}
+
+const closeSnippet = () => {
+  modalOpen.value = false
 }
 
 onMounted(() => {