Hooke / stdj_h5

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
17e51e07 1 parent 2c0d6b4e

refactor: 抽取通用姓名上标格式化工具 

抽取多个视图组件中的重复姓名上标格式化逻辑至通用工具模块，替换各视图内手动编写的上标渲染代码，移除冗余的CSS样式与组件本地格式化函数。
Inline Side-by-side
Showing 6 changed files with 23 additions and 65 deletions
1 +/**
2 + * 将名称中的“上/下”渲染为上标，其余文字保持原样
3 + * @param {string} text - 原始文本
4 + * @returns {string} - 带上标的HTML字符串
5 + */
6 +export function formatNameWithSuperscript(text) {
7 + if (!text || text.length === 0) return text
8 +
9 + return Array.from(text).map((char) => {
10 + if (char === '上' || char === '下') {
11 + return `<sup style="font-size: 0.6em;">${char}</sup>`
12 + }
13 + return char
14 + }).join('')
15 +}
...@@ -18,9 +18,7 @@ ...@@ -18,9 +18,7 @@
18 </div> 18 </div>
19 <div class="item-caption"> 19 <div class="item-caption">
20 <div class="item-role">{{ item.role }}</div> 20 <div class="item-role">{{ item.role }}</div>
21 - <div class="item-name"> 21 + <div class="item-name" v-html="formatNameWithSuperscript(item.name)"></div>
22 - <sup class="name-sup">上</sup>{{ item.name.charAt(0) }}<sup class="name-sup">下</sup>{{ item.name.slice(1) }}
23 - </div>
24 </div> 22 </div>
25 </div> 23 </div>
26 </section> 24 </section>
...@@ -43,9 +41,7 @@ ...@@ -43,9 +41,7 @@
43 </div> 41 </div>
44 <div class="item-caption"> 42 <div class="item-caption">
45 <div class="item-role">{{ item.role }}</div> 43 <div class="item-role">{{ item.role }}</div>
46 - <div class="item-name small"> 44 + <div class="item-name small" v-html="formatNameWithSuperscript(item.name)"></div>
47 - <sup class="name-sup">上</sup>{{ item.name.charAt(0) }}<sup class="name-sup">下</sup>{{ item.name.slice(1) }}
48 - </div>
49 </div> 45 </div>
50 </div> 46 </div>
51 </section> 47 </section>
...@@ -68,9 +64,7 @@ ...@@ -68,9 +64,7 @@
68 </div> 64 </div>
69 <div class="item-caption"> 65 <div class="item-caption">
70 <div class="item-role">{{ item.role }}</div> 66 <div class="item-role">{{ item.role }}</div>
71 - <div class="item-name small"> 67 + <div class="item-name small" v-html="formatNameWithSuperscript(item.name)"></div>
72 - <sup class="name-sup">上</sup>{{ item.name.charAt(0) }}<sup class="name-sup">下</sup>{{ item.name.slice(1) }}
73 - </div>
74 </div> 68 </div>
75 </div> 69 </div>
76 </section> 70 </section>
...@@ -81,6 +75,7 @@ ...@@ -81,6 +75,7 @@
81 import { ref, onMounted } from 'vue' 75 import { ref, onMounted } from 'vue'
82 import { useRouter } from 'vue-router' 76 import { useRouter } from 'vue-router'
83 import { useTitle } from '@vueuse/core'; 77 import { useTitle } from '@vueuse/core';
78 +import { formatNameWithSuperscript } from '@utils/text'
84 79
85 // 导入接口 80 // 导入接口
86 import { getSSQZAPI } from '@/api/index.js' 81 import { getSSQZAPI } from '@/api/index.js'
...@@ -240,12 +235,6 @@ onMounted(async () => { ...@@ -240,12 +235,6 @@ onMounted(async () => {
240 font-size: 1.25rem; 235 font-size: 1.25rem;
241 } 236 }
242 237
243 -/* 姓名上标样式 */
244 -.name-sup {
245 - font-size: 0.6em;
246 -}
247 -
248 -
249 /* 响应式调整 */ 238 /* 响应式调整 */
250 @media (max-width: 48rem) { 239 @media (max-width: 48rem) {
251 .item-caption { 240 .item-caption {
......
...@@ -48,6 +48,7 @@ import { ref, onMounted, reactive } from 'vue' ...@@ -48,6 +48,7 @@ import { ref, onMounted, reactive } from 'vue'
48 import { useTitle } from '@vueuse/core'; 48 import { useTitle } from '@vueuse/core';
49 import { useRoute, useRouter } from 'vue-router' 49 import { useRoute, useRouter } from 'vue-router'
50 import { showImagePreview } from 'vant' 50 import { showImagePreview } from 'vant'
51 +import { formatNameWithSuperscript } from '@utils/text'
51 52
52 // 导入接口 53 // 导入接口
53 import { getArticleDetailAPI } from '@/api/index.js' 54 import { getArticleDetailAPI } from '@/api/index.js'
...@@ -62,20 +63,6 @@ const columns = reactive([[], []]) ...@@ -62,20 +63,6 @@ const columns = reactive([[], []])
62 const all_images = ref([]) 63 const all_images = ref([])
63 64
64 /** 65 /**
65 - * 为name字段的第一个文字添加上标效果
66 - * @param {string} name - 原始姓名
67 - * @returns {string} - 带上标的HTML字符串
68 - */
69 -const formatNameWithSuperscript = (name) => {
70 - if (!name || name.length === 0) return name
71 -
72 - const firstChar = name.charAt(0)
73 - const restChars = name.slice(1)
74 -
75 - return `<sup style="font-size: 0.6rem;">上</sup>${firstChar}<sup style="font-size: 0.6rem;">下</sup>${restChars}`
76 -}
77 -
78 -/**
79 * 加载文章详情 66 * 加载文章详情
80 */ 67 */
81 const loadArticleDetail = async () => { 68 const loadArticleDetail = async () => {
......
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
12 <img :src="student_info.src" :alt="student_info.title" class="item-image" /> 12 <img :src="student_info.src" :alt="student_info.title" class="item-image" />
13 <div class="item-content"> 13 <div class="item-content">
14 <!-- <div class="item-role">{{ student_info.name }}</div> --> 14 <!-- <div class="item-role">{{ student_info.name }}</div> -->
15 - <!-- <div class="item-name" v-html="formatNameWithSuperscript(student_info.courtesy_name)"></div> -->
16 <div class="item-name">{{ student_info.name }}</div> 15 <div class="item-name">{{ student_info.name }}</div>
17 <div class="item-group-title">{{ student_info.group_title }}</div> 16 <div class="item-group-title">{{ student_info.group_title }}</div>
18 <div class="item-desc" v-html="student_info.desc"></div> 17 <div class="item-desc" v-html="student_info.desc"></div>
...@@ -71,20 +70,6 @@ const info_id = ref(''); ...@@ -71,20 +70,6 @@ const info_id = ref('');
71 const student_info = ref({}) 70 const student_info = ref({})
72 71
73 /** 72 /**
74 - * 为name字段的第一个文字添加上标效果
75 - * @param {string} name - 原始姓名
76 - * @returns {string} - 带上标的HTML字符串
77 - */
78 -const formatNameWithSuperscript = (name) => {
79 - if (!name || name.length === 0) return name
80 -
81 - const firstChar = name.charAt(0)
82 - const restChars = name.slice(1)
83 -
84 - return `<sup style="font-size: 0.6rem;">上</sup>${firstChar}<sup style="font-size: 0.6rem;">下</sup>${restChars}`
85 -}
86 -
87 -/**
88 * 加载详情 73 * 加载详情
89 */ 74 */
90 const loadUserInfo = async () => { 75 const loadUserInfo = async () => {
......
...@@ -17,9 +17,7 @@ ...@@ -17,9 +17,7 @@
17 </div> 17 </div>
18 <div class="item-caption"> 18 <div class="item-caption">
19 <div class="item-role">{{ item.role }}</div> 19 <div class="item-role">{{ item.role }}</div>
20 - <div class="item-name"> 20 + <div class="item-name" v-html="formatNameWithSuperscript(item.name)"></div>
21 - <sup class="name-sup">上</sup>{{ item.name.charAt(0) }}<sup class="name-sup">下</sup>{{ item.name.slice(1) }}
22 - </div>
23 </div> 21 </div>
24 </div> 22 </div>
25 </section> 23 </section>
...@@ -30,6 +28,7 @@ ...@@ -30,6 +28,7 @@
30 import { ref, onMounted } from 'vue' 28 import { ref, onMounted } from 'vue'
31 import { useRouter } from 'vue-router' 29 import { useRouter } from 'vue-router'
32 import { useTitle } from '@vueuse/core' 30 import { useTitle } from '@vueuse/core'
31 +import { formatNameWithSuperscript } from '@utils/text'
33 32
34 import { getArticleListAPI } from '@/api/index.js' 33 import { getArticleListAPI } from '@/api/index.js'
35 34
...@@ -159,10 +158,6 @@ onMounted(() => { ...@@ -159,10 +158,6 @@ onMounted(() => {
159 font-weight: 600; 158 font-weight: 600;
160 } 159 }
161 160
162 -.name-sup {
163 - font-size: 0.6em;
164 -}
165 -
166 @media (max-width: 30rem) { 161 @media (max-width: 30rem) {
167 .yinlishi-container { 162 .yinlishi-container {
168 padding: 0.75rem; 163 padding: 0.75rem;
......
...@@ -41,6 +41,7 @@ import { ref, onMounted, reactive } from 'vue' ...@@ -41,6 +41,7 @@ import { ref, onMounted, reactive } from 'vue'
41 import { useTitle } from '@vueuse/core' 41 import { useTitle } from '@vueuse/core'
42 import { useRoute } from 'vue-router' 42 import { useRoute } from 'vue-router'
43 import { showImagePreview } from 'vant' 43 import { showImagePreview } from 'vant'
44 +import { formatNameWithSuperscript } from '@utils/text'
44 45
45 import { getArticleDetailAPI } from '@/api/index.js' 46 import { getArticleDetailAPI } from '@/api/index.js'
46 47
...@@ -53,20 +54,6 @@ const columns = reactive([[], []]) ...@@ -53,20 +54,6 @@ const columns = reactive([[], []])
53 const allImages = ref([]) 54 const allImages = ref([])
54 55
55 /** 56 /**
56 - * 为姓名的第一个字添加上标样式
57 - * @param {string} name 原始姓名
58 - * @returns {string} 带上标的 HTML
59 - */
60 -const formatNameWithSuperscript = (name) => {
61 - if (!name || name.length === 0) return name
62 -
63 - const firstChar = name.charAt(0)
64 - const restChars = name.slice(1)
65 -
66 - return `<sup style="font-size: 0.6rem;">上</sup>${firstChar}<sup style="font-size: 0.6rem;">下</sup>${restChars}`
67 -}
68 -
69 -/**
70 * 分配图片到两列 57 * 分配图片到两列
71 * @param {Array} images 新增图片列表 58 * @param {Array} images 新增图片列表
72 * @returns {void} 59 * @returns {void}
......