feat: 前端朗读/占位视觉/拼音注音/音效合成基础组件

ui-src/src/components/RubyText.vue

@@ -0,0 +1,54 @@
+<template>
+  <text class="ruby-wrap" :class="{ dark: dark }">
+    <text v-for="(ch, i) in pairs" :key="i" class="ruby-unit">
+      <text v-if="ch.p && show" class="ruby-py">{{ ch.p }}</text>
+      <text class="ruby-ch">{{ ch.c }}</text>
+    </text>
+  </text>
+</template>
+
+<script>
+import { parsePinyin, zipText } from '../utils/pinyin.js'
+
+export default {
+  name: 'RubyText',
+  props: {
+    text: { type: String, default: '' },
+    pinyin: { type: String, default: '' }, // 后端原始 JSON 字符串
+    show: { type: Boolean, default: true }, // 4-6 档显示，6-8 档可关
+    dark: { type: Boolean, default: false }
+  },
+  computed: {
+    pairs() {
+      return zipText(this.text, parsePinyin(this.pinyin))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ruby-wrap {
+  display: inline;
+  line-height: 1.9;
+}
+.ruby-unit {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  vertical-align: top;
+  margin: 0 2rpx;
+}
+.ruby-py {
+  font-size: 20rpx;
+  color: #ff6b35;
+  line-height: 1.3;
+  height: 28rpx;
+}
+.ruby-ch {
+  font-size: 32rpx;
+  line-height: 1.5;
+}
+.dark .ruby-ch {
+  color: #5b4636;
+}
+</style>