Initial commit

docs/.vitepress/theme/components/TaoXin.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getRandomQuote, type TaoXinQuote } from '../data/quotes'
+
+const quote = ref<TaoXinQuote | null>(null)
+
+function refreshQuote() {
+  quote.value = getRandomQuote()
+}
+
+onMounted(() => {
+  refreshQuote()
+})
+</script>
+
+<template>
+  <div class="taoxin">
+    <div class="taoxin-header">
+      <span class="taoxin-icon">🌸</span>
+      <span class="taoxin-title">桃信</span>
+    </div>
+    <div class="quote-container" @click="refreshQuote">
+      <div class="quote-text" v-if="quote">
+        "{{ quote.quote }}"
+      </div>
+      <div class="quote-meta" v-if="quote">
+        <div class="quote-author">—— {{ quote.character }}</div>
+        <div class="quote-chapter" v-if="quote?.chapter">{{ quote.chapter }}</div>
+      </div>
+    </div>
+    <div class="refresh-hint">点击换一条</div>
+  </div>
+</template>
+
+<style scoped>
+.taoxin {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  color: white;
+}
+
+.taoxin-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  flex-shrink: 0;
+}
+
+.taoxin-icon {
+  font-size: 20px;
+}
+
+.taoxin-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.quote-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  padding: 16px 0;
+  min-height: 0;
+}
+
+.quote-text {
+  font-size: 15px;
+  line-height: 1.8;
+  font-style: italic;
+  opacity: 0.95;
+  margin-bottom: 16px;
+}
+
+.quote-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.quote-author {
+  font-size: 13px;
+  opacity: 0.8;
+}
+
+.quote-chapter {
+  font-size: 11px;
+  opacity: 0.6;
+}
+
+.refresh-hint {
+  font-size: 11px;
+  opacity: 0.4;
+  text-align: center;
+  margin-top: 12px;
+  transition: opacity 0.2s ease;
+  flex-shrink: 0;
+}
+
+.taoxin:hover .refresh-hint {
+  opacity: 0.7;
+}
+</style>