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
/**
* 将名称中的“上/下”渲染为上标，其余文字保持原样
* @param {string} text - 原始文本
* @returns {string} - 带上标的HTML字符串
*/
export function formatNameWithSuperscript(text) {
if (!text || text.length === 0) return text
return Array.from(text).map((char) => {
if (char === '上' || char === '下') {
return `<sup style="font-size: 0.6em;">${char}</sup>`
}
return char
}).join('')
}
......@@ -18,9 +18,7 @@
</div>
<div class="item-caption">
<div class="item-role">{{ item.role }}</div>
<div class="item-name">
<sup class="name-sup">上</sup>{{ item.name.charAt(0) }}<sup class="name-sup">下</sup>{{ item.name.slice(1) }}
</div>
<div class="item-name" v-html="formatNameWithSuperscript(item.name)"></div>
</div>
</div>
</section>
......@@ -43,9 +41,7 @@
</div>
<div class="item-caption">
<div class="item-role">{{ item.role }}</div>
<div class="item-name small">
<sup class="name-sup">上</sup>{{ item.name.charAt(0) }}<sup class="name-sup">下</sup>{{ item.name.slice(1) }}
</div>
<div class="item-name small" v-html="formatNameWithSuperscript(item.name)"></div>
</div>
</div>
</section>
......@@ -68,9 +64,7 @@
</div>
<div class="item-caption">
<div class="item-role">{{ item.role }}</div>
<div class="item-name small">
<sup class="name-sup">上</sup>{{ item.name.charAt(0) }}<sup class="name-sup">下</sup>{{ item.name.slice(1) }}
</div>
<div class="item-name small" v-html="formatNameWithSuperscript(item.name)"></div>
</div>
</div>
</section>
......@@ -81,6 +75,7 @@
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useTitle } from '@vueuse/core';
import { formatNameWithSuperscript } from '@utils/text'
// 导入接口
import { getSSQZAPI } from '@/api/index.js'
......@@ -240,12 +235,6 @@ onMounted(async () => {
font-size: 1.25rem;
}
/* 姓名上标样式 */
.name-sup {
font-size: 0.6em;
}
/* 响应式调整 */
@media (max-width: 48rem) {
.item-caption {
......
......@@ -48,6 +48,7 @@ import { ref, onMounted, reactive } from 'vue'
import { useTitle } from '@vueuse/core';
import { useRoute, useRouter } from 'vue-router'
import { showImagePreview } from 'vant'
import { formatNameWithSuperscript } from '@utils/text'
// 导入接口
import { getArticleDetailAPI } from '@/api/index.js'
......@@ -62,20 +63,6 @@ const columns = reactive([[], []])
const all_images = ref([])
/**
* 为name字段的第一个文字添加上标效果
* @param {string} name - 原始姓名
* @returns {string} - 带上标的HTML字符串
*/
const formatNameWithSuperscript = (name) => {
if (!name || name.length === 0) return name
const firstChar = name.charAt(0)
const restChars = name.slice(1)
return `<sup style="font-size: 0.6rem;">上</sup>${firstChar}<sup style="font-size: 0.6rem;">下</sup>${restChars}`
}
/**
* 加载文章详情
*/
const loadArticleDetail = async () => {
......
......@@ -12,7 +12,6 @@
<img :src="student_info.src" :alt="student_info.title" class="item-image" />
<div class="item-content">
<!-- <div class="item-role">{{ student_info.name }}</div> -->
<!-- <div class="item-name" v-html="formatNameWithSuperscript(student_info.courtesy_name)"></div> -->
<div class="item-name">{{ student_info.name }}</div>
<div class="item-group-title">{{ student_info.group_title }}</div>
<div class="item-desc" v-html="student_info.desc"></div>
......@@ -71,20 +70,6 @@ const info_id = ref('');
const student_info = ref({})
/**
* 为name字段的第一个文字添加上标效果
* @param {string} name - 原始姓名
* @returns {string} - 带上标的HTML字符串
*/
const formatNameWithSuperscript = (name) => {
if (!name || name.length === 0) return name
const firstChar = name.charAt(0)
const restChars = name.slice(1)
return `<sup style="font-size: 0.6rem;">上</sup>${firstChar}<sup style="font-size: 0.6rem;">下</sup>${restChars}`
}
/**
* 加载详情
*/
const loadUserInfo = async () => {
......
......@@ -17,9 +17,7 @@
</div>
<div class="item-caption">
<div class="item-role">{{ item.role }}</div>
<div class="item-name">
<sup class="name-sup">上</sup>{{ item.name.charAt(0) }}<sup class="name-sup">下</sup>{{ item.name.slice(1) }}
</div>
<div class="item-name" v-html="formatNameWithSuperscript(item.name)"></div>
</div>
</div>
</section>
......@@ -30,6 +28,7 @@
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useTitle } from '@vueuse/core'
import { formatNameWithSuperscript } from '@utils/text'
import { getArticleListAPI } from '@/api/index.js'
......@@ -159,10 +158,6 @@ onMounted(() => {
font-weight: 600;
}
.name-sup {
font-size: 0.6em;
}
@media (max-width: 30rem) {
.yinlishi-container {
padding: 0.75rem;
......
......@@ -41,6 +41,7 @@ import { ref, onMounted, reactive } from 'vue'
import { useTitle } from '@vueuse/core'
import { useRoute } from 'vue-router'
import { showImagePreview } from 'vant'
import { formatNameWithSuperscript } from '@utils/text'
import { getArticleDetailAPI } from '@/api/index.js'
......@@ -53,20 +54,6 @@ const columns = reactive([[], []])
const allImages = ref([])
/**
* 为姓名的第一个字添加上标样式
* @param {string} name 原始姓名
* @returns {string} 带上标的 HTML
*/
const formatNameWithSuperscript = (name) => {
if (!name || name.length === 0) return name
const firstChar = name.charAt(0)
const restChars = name.slice(1)
return `<sup style="font-size: 0.6rem;">上</sup>${firstChar}<sup style="font-size: 0.6rem;">下</sup>${restChars}`
}
/**
* 分配图片到两列
* @param {Array} images 新增图片列表
* @returns {void}
......