feat: 更新项目配置和依赖，增强功能和用户体验

- 完成弹幕机功能
- 在 .editorconfig 中新增对 vine.ts 文件的支持。
- 更新 package.json 中多个依赖的版本，提升稳定性和性能。
- 在 vite.config.mts 中引入 @guolao/vue-monaco-editor 插件，增强代码编辑功能。
- 在 App.vue 中调整内容填充的样式，优化界面布局。
- 新增获取配置文件哈希的 API 方法，提升配置管理能力。
- 在多个组件中优化了样式和逻辑，提升用户交互体验。

src/views/obs/blivechat/PaidMessage.vue

@@ -1,6 +1,9 @@
 <template>
-  <yt-live-chat-paid-message-renderer class="style-scope yt-live-chat-item-list-renderer" allow-animations
-    :show-only-header="!content || undefined" :style="{
+  <yt-live-chat-paid-message-renderer
+    class="style-scope yt-live-chat-item-list-renderer"
+    allow-animations
+    :show-only-header="!content || undefined"
+    :style="{
       '--yt-live-chat-paid-message-primary-color': color.contentBg,
       '--yt-live-chat-paid-message-secondary-color': color.headerBg,
       '--yt-live-chat-paid-message-header-color': color.header,
@@ -10,59 +13,94 @@
     }"
     :blc-price-level="priceConfig.priceLevel"
   >
-    <div id="card" class="style-scope yt-live-chat-paid-message-renderer">
-      <div id="header" class="style-scope yt-live-chat-paid-message-renderer">
-        <img-shadow id="author-photo" height="40" width="40" class="style-scope yt-live-chat-paid-message-renderer"
-          :imgUrl="avatarUrl"
-        ></img-shadow>
-        <div id="header-content" class="style-scope yt-live-chat-paid-message-renderer">
-          <div id="header-content-primary-column" class="style-scope yt-live-chat-paid-message-renderer">
-            <div id="author-name" class="style-scope yt-live-chat-paid-message-renderer">{{ authorName }}</div>
-            <div id="purchase-amount" class="style-scope yt-live-chat-paid-message-renderer">{{ showPriceText }}</div>
+    <div
+      id="card"
+      class="style-scope yt-live-chat-paid-message-renderer"
+    >
+      <div
+        id="header"
+        class="style-scope yt-live-chat-paid-message-renderer"
+      >
+        <img-shadow
+          id="author-photo"
+          height="40"
+          width="40"
+          class="style-scope yt-live-chat-paid-message-renderer"
+          :img-url="avatarUrl"
+        />
+        <div
+          id="header-content"
+          class="style-scope yt-live-chat-paid-message-renderer"
+        >
+          <div
+            id="header-content-primary-column"
+            class="style-scope yt-live-chat-paid-message-renderer"
+          >
+            <div
+              id="author-name"
+              class="style-scope yt-live-chat-paid-message-renderer"
+            >
+              {{ authorName }}
+            </div>
+            <div
+              id="purchase-amount"
+              class="style-scope yt-live-chat-paid-message-renderer"
+            >
+              {{ showPriceText }}
+            </div>
           </div>
-          <span id="timestamp" class="style-scope yt-live-chat-paid-message-renderer">{{ timeText }}</span>
+          <span
+            id="timestamp"
+            class="style-scope yt-live-chat-paid-message-renderer"
+          >{{ timeText }}</span>
         </div>
       </div>
-      <div id="content" class="style-scope yt-live-chat-paid-message-renderer">
-        <div id="message" dir="auto" class="style-scope yt-live-chat-paid-message-renderer">{{ content }}</div>
+      <div
+        id="content"
+        class="style-scope yt-live-chat-paid-message-renderer"
+      >
+        <div
+          id="message"
+          dir="auto"
+          class="style-scope yt-live-chat-paid-message-renderer"
+        >
+          {{ content }}
+        </div>
       </div>
     </div>
   </yt-live-chat-paid-message-renderer>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
 import ImgShadow from './ImgShadow.vue'
 import * as constants from './constants'
 import * as utils from './utils'
 
-export default {
-  name: 'PaidMessage',
-  components: {
-    ImgShadow
-  },
-  props: {
-    avatarUrl: String,
-    authorName: String,
-    price: Number, // 价格，人民币
-    priceText: String,
-    time: Date,
-    content: String
-  },
-  computed: {
-    priceConfig() {
-      return constants.getPriceConfig(this.price)
-    },
-    color() {
-      return this.priceConfig.colors
-    },
-    showPriceText() {
-      return this.priceText || `CN¥${utils.formatCurrency(this.price)}`
-    },
-    timeText() {
-      return utils.getTimeTextHourMin(this.time)
-    }
-  }
-}
+const props = defineProps({
+  avatarUrl: String,
+  authorName: String,
+  price: Number, // 价格，人民币
+  priceText: String,
+  time: Date,
+  content: String
+})
+
+const priceConfig = computed(() => {
+  return constants.getPriceConfig(props.price)
+})
+
+const color = computed(() => {
+  return priceConfig.value.colors
+})
+
+const showPriceText = computed(() => {
+  return props.priceText || `CN¥${utils.formatCurrency(props.price)}`
+})
+
+const timeText = computed(() => {
+  return utils.getTimeTextHourMin(props.time)
+})
 </script>
 
 <style src="@/assets/css/youtube/yt-live-chat-paid-message-renderer.css"></style>