Merge pull request #27 from ZeroCatDev/copilot/align-text-to-left

Left-align Hitokoto card text and apply custom font size settings

.gitignore

@@ -172,3 +172,11 @@ dist
 vite.config.*.timestamp-*.mjs
 *.timestamp-*
 
+# Auto-generated TypeScript declaration files
+auto-imports.d.ts
+components.d.ts
+typed-router.d.ts
+
+# Package lock files (using pnpm)
+package-lock.json
+

src/components/HitokotoCard.vue

@@ -8,12 +8,24 @@
     height="100%"
     @click="fetchSentence"
   >
-    <v-card-text class="pa-6 d-flex flex-column justify-center" style="height: 100%">
+    <v-card-text
-      <div class="text-h6 font-weight-medium mb-4 serif-font" style="white-space: pre-wrap; line-height: 1.6;">
+      class="pa-6 d-flex flex-column justify-center"
+      style="height: 100%"
+    >
+      <div
+        class="font-weight-medium mb-4 serif-font"
+        :style="contentStyle"
+      >
         {{ sentence }}
       </div>
-      <div class="text-subtitle-2 text-medium-emphasis text-right serif-font">
+      <div
-        <span v-if="author" class="mr-2">{{ author }}</span>
+        class="text-medium-emphasis serif-font"
+        :style="authorStyle"
+      >
+        <span
+          v-if="author"
+          class="mr-2"
+        >{{ author }}</span>
         <span v-if="origin">《{{ origin }}》</span>
       </div>
     </v-card-text>
@@ -53,7 +65,25 @@ export default {
       origin: '',
       loading: false,
       timer: null,
-      unwatch: null
+      unwatch: null,
+      fontSize: 28 // Will be updated in mounted()
+    }
+  },
+  computed: {
+    contentStyle() {
+      return {
+        'font-size': `${this.fontSize}px`,
+        'white-space': 'pre-wrap',
+        'line-height': '1.6',
+        'text-align': 'left'
+      }
+    },
+    authorStyle() {
+      const AUTHOR_FONT_RATIO = 0.6 // Author font size is 60% of the main font size
+      return {
+        'font-size': `${this.fontSize * AUTHOR_FONT_RATIO}px`,
+        'text-align': 'left'
+      }
     }
   },
   async mounted() {
@@ -78,6 +108,7 @@ export default {
     loadLocalSettings() {
       this.enabled = SettingsManager.getSetting('hitokoto.enabled')
       this.refreshInterval = SettingsManager.getSetting('hitokoto.refreshInterval')
+      this.fontSize = SettingsManager.getSetting('font.size')
     },
     async loadKvSettings() {
       try {