feat: code copy

src/components/list.vue

@@ -10,7 +10,7 @@
     <div class="list">
         <RouterLink :to="{ name: 'post-by-id', params: { id: post.name } }" class="card" v-for="post in posts"
             :key="post.created.toString()">
-            <img :src="get_thumb(post)." :alt="post.title">
+            <img :src="get_thumb(post)" :alt="post.title">
             <div class="more">
                 <h1>{{ post.title }}</h1>
                 <span class="time">{{ generate_date(post) }}</span>

src/page/post.vue

@@ -6,6 +6,7 @@
     import { color_by_char } from '../utils/color';
     import CommentCard, { type IRawComment } from '../components/comment-card.vue';
     import { vJavaScript } from '../utils/vue';
+    import { vCodeHelper } from '../utils/code';
 
     const route = useRoute(),
         router = useRouter(),
@@ -62,7 +63,7 @@
         <hr>
 
         <!-- 文章内容 -->
-        <div class="content" v-html="$content" v-java-script></div>
+        <div class="content" v-html="$content" v-java-script v-code-helper></div>
         <div class="footer" v-html="CONFIG.footer_html"></div>
 
         <!-- 评论区 -->
@@ -170,14 +171,33 @@
                 word-wrap: break-word;
             }
             code {
-                padding: 0.2rem 0.4rem;
+                padding: .2rem .4rem;
                 background-color: #f5f5f5;
                 border-radius: 0.2rem;
                 font-size: 0.9rem;
                 font-family: Consolas, 'Courier New', monospace;
                 line-height: 1.5;
                 color: #3759c0;
             }
+            pre{
+                padding: 1.5rem 0;
+                position: relative;
+                max-height: 80vh;
+
+                >code{
+                    padding: .6rem 1rem;
+                    line-height: 2;
+                    word-break: break-all;
+                    display: block;
+                }
+                >button{
+                    position: absolute;
+                    top: .5rem;
+                    right: .5rem;
+                    padding: .25rem .5rem;
+                    font-size: .85rem;
+                }
+            }
             a {
                 color: #595454;
                 text-decoration: none;

src/utils/code.ts

@@ -0,0 +1,38 @@
+import type { Directive } from "vue";
+
+function copyCode(el: HTMLPreElement){
+    const code = el.getElementsByTagName('code')[0].textContent;
+    const msg = el.getElementsByClassName('copy-msg')[0];
+    if(code)
+        navigator.clipboard.writeText(code).then(() => {
+
+            msg.textContent = '复制成功';
+            setTimeout(() => msg.textContent = '复制' , 1000);
+        }).catch(() => {
+            msg.textContent = '复制失败';
+            setTimeout(() => msg.textContent = '复制', 1000);
+        });
+}
+
+function init(elCol: HTMLCollectionOf<HTMLPreElement>){
+    for (let i = 0; i < elCol.length; i++) {
+        const el = elCol[i];
+        const elCopy = document.createElement('button');
+        elCopy.innerHTML = `${/*<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M3.5 2a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5H12a.5.5 0 0 1 0-1h.5A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-12A1.5 1.5 0 0 1 3.5 1H4a.5.5 0 0 1 0 1z"/>
+    <path d="M10 .5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5.5.5 0 0 1-.5.5.5.5 0 0 0-.5.5V2a.5.5 0 0 0 .5.5h5A.5.5 0 0 0 11 2v-.5a.5.5 0 0 0-.5-.5.5.5 0 0 1-.5-.5"/>
+</svg>*/''}<span class="copy-msg">复制</span>`;
+        elCopy.onclick = () => copyCode(el);
+        el.appendChild(elCopy);
+    }
+}
+
+export const vCodeHelper: Directive<HTMLElement> = {
+    mounted(el) {
+        init(el.getElementsByTagName('pre'));
+    },
+
+    updated(el) {
+        init(el.getElementsByTagName('pre'));
+    }
+}