1

src/components/settings/AboutCard.vue

@@ -13,7 +13,7 @@
           <div class="d-flex flex-column align-start">
             <v-avatar size="120" class="mb-4">
               <v-img
-                src="https://github.com/Sunwuyuan.png"
+                src="https://github.com/SunWuyuan.png"
                 alt="Sunwuyuan"
               />
             </v-avatar>

src/components/settings/cards/EchoChamberCard.vue

@@ -7,21 +7,16 @@
   >
     <v-card-text>
       <div ref="typewriter" class="typewriter-text"></div>
-      <div ref="sourceWriter" class="source-text text-caption text-grey"></div>
+      <div ref="sourceWriter" class="source-text"></div>
     </v-card-text>
-    <div class="d-flex align-center">
+    <transition name="fade">
-      <transition name="fade">
+      <v-chip v-if="currentQuote?.contributor" class="contributor">
-        <div v-if="currentQuote?.contributor" class="contributor">
+        <v-avatar start>
-          <v-chip>
+          <v-img :src="`https://github.com/${currentQuote.contributor}.png`" />
-            <v-avatar start>
+        </v-avatar>
-              <v-img
+        {{ currentQuote.contributor }}
-                :src="`https://github.com/${currentQuote.contributor}.png`"
+      </v-chip>
-              ></v-img> </v-avatar
+    </transition>
-            >{{ currentQuote.contributor }}
-          </v-chip>
-        </div>
-      </transition>
-    </div>
   </settings-card>
 </template>
 
@@ -30,129 +25,88 @@ import Typewriter from "typewriter-effect/dist/core";
 import quotes from "@/data/echoChamber.json";
 import SettingsCard from "@/components/SettingsCard.vue";
 
+const INITIAL_STATE = {
+  text: "点击此处可以查看 Classworks 用户群里沙雕群友们的发言",
+  author: "点击后会复制当前句子到剪贴板中"
+};
+
+const TYPEWRITER_CONFIG = {
+  main: { delay: 50, deleteSpeed: 100 },
+  source: { delay: 10, deleteSpeed: 10, cursor: "" }
+};
+
 export default {
   name: "EchoChamberCard",
   components: { SettingsCard },
-  data() {
+  data: () => ({
-    return {
+    typewriter: null,
-      typewriter: null,
+    sourceWriter: null,
-      sourceWriter: null,
+    currentQuote: INITIAL_STATE,
-      currentQuote: {
+    hasClicked: false
-        text: this.INITIAL_TEXT,
+  }),
-        author: this.INITIAL_SOURCE,
+
-      },
-      showCopySuccess: false,
-      hasClicked: false,
-      INITIAL_TEXT: "点击此处可以查看 Classworks 用户群里沙雕群友们的发言",
-      INITIAL_SOURCE: "点击后会复制当前句子到剪贴板中",
-    };
-  },
   mounted() {
     this.initTypewriters();
   },
+
   methods: {
-    getRandomQuote() {
-      const index = Math.floor(Math.random() * quotes.quotes.length);
-      return quotes.quotes[index];
-    },
     initTypewriters() {
-      // 主文本打字机
+      this.typewriter = new Typewriter(this.$refs.typewriter, TYPEWRITER_CONFIG.main);
-      this.typewriter = new Typewriter(this.$refs.typewriter, {
+      this.sourceWriter = new Typewriter(this.$refs.sourceWriter, TYPEWRITER_CONFIG.source);
-        delay: 50,
+      this.typeQuote(INITIAL_STATE);
-        deleteSpeed: 100,
-        loop: false,
-      });
-
-      // 来源文本打字机
-      this.sourceWriter = new Typewriter(this.$refs.sourceWriter, {
-        delay: 10,
-        deleteSpeed: 10,
-        loop: false,
-        cursor: "",
-      });
-
-      // 显示初始提示
-      this.typewriter.typeString(this.INITIAL_TEXT).start();
-      this.sourceWriter.typeString(this.INITIAL_SOURCE).start();
     },
 
     typeQuote(quote) {
       this.typewriter.deleteAll(30).typeString(quote.text).start();
-
       if (quote.author) {
-        this.sourceWriter.deleteAll(20).typeString(`${quote.author}`).start();
+        this.sourceWriter.deleteAll(20).typeString(quote.author).start();
       }
     },
 
-    refreshQuote() {
-      this.currentQuote = this.getRandomQuote();
-      this.typeQuote(this.currentQuote);
-    },
-
     async handleClick() {
       if (!this.hasClicked) {
         this.hasClicked = true;
-        this.currentQuote = this.getRandomQuote();
       }
       await this.copyToClipboard();
-      this.refreshQuote();
+      this.currentQuote = this.getRandomQuote();
+      this.typeQuote(this.currentQuote);
+    },
+
+    getRandomQuote() {
+      return quotes.quotes[Math.floor(Math.random() * quotes.quotes.length)];
     },
 
     async copyToClipboard() {
       if (!this.currentQuote) return;
 
-      const quote = this.currentQuote;
+      const { text, author, contributor, link } = this.currentQuote;
-      const text = `${quote.text}\n${
+      const parts = [
-        quote.author ? `作者：${quote.author}` : ""
+        text,
-      }\n${quote.contributor ? `贡献者：${quote.contributor}` : ""}${
+        author && `作者：${author}`,
-        quote.link
+        contributor && `贡献者：${contributor}`,
-          ? `\n来源：${quote.link}`
+        (link || contributor) && `来源：${link || `https://github.com/${contributor}`}`
-          : quote.contributor
+      ].filter(Boolean);
-          ? "\n来源：https://github.com/" + quote.contributor
-          : ""
-      }`;
 
       try {
-        await navigator.clipboard.writeText(text);
+        await navigator.clipboard.writeText(parts.join('\n'));
-        this.showCopySuccess = true;
       } catch (err) {
         console.error("复制失败:", err);
       }
-    },
+    }
   },
+
   beforeUnmount() {
-    if (this.typewriter) {
+    [this.typewriter, this.sourceWriter].forEach(writer => writer?.stop());
-      this.typewriter.stop();
+  }
-    }
-    if (this.sourceWriter) {
-      this.sourceWriter.stop();
-    }
-  },
 };
 </script>
 
 <style scoped>
-.cursor-pointer {
+.source-text, .contributor {
-  cursor: pointer;
-}
-
-.source-text {
   opacity: 0.7;
   font-size: 0.9em;
 }
 
-.contributor {
+.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
-  opacity: 0.7;
+.fade-enter-from, .fade-leave-to { opacity: 0; }
-  font-size: 0.9em;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
 </style>