feat(Prices.vue): 添加模型名称复制功能

在模型名称旁添加复制图标,用户点击后可复制模型名称到剪贴板,提升用户体验。
This commit is contained in:
wood chen 2025-05-02 16:58:41 +08:00
parent b3c39832d3
commit 15e844f64e

View File

@ -101,7 +101,10 @@
<div class="model-info">
<h3 class="model-name">
<span class="copyable-model-name" @click="copyModelName(price.model)" title="点击复制模型名称">
{{ price.model }}
<el-icon class="copy-icon"><Document /></el-icon>
</span>
<el-tag v-if="price.temp_model && price.temp_model !== 'NULL'"
type="warning" size="small" effect="light">
待审核: {{ price.temp_model }}
@ -645,6 +648,22 @@ const billingTypeMap = {
const getStatus = (status) => statusMap[status] || status
const getBillingType = (type) => billingTypeMap[type] || type
//
const copyModelName = (modelName) => {
navigator.clipboard.writeText(modelName)
.then(() => {
ElMessage({
message: `已复制模型名称: ${modelName}`,
type: 'success',
duration: 2000
})
})
.catch(err => {
console.error('复制失败:', err)
ElMessage.error('复制失败')
})
}
// getModelType
const getModelType = (type) => {
if (!type) return ''
@ -1828,6 +1847,33 @@ onMounted(() => {
line-height: 1.2;
}
.copyable-model-name {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
position: relative;
padding-right: 24px;
transition: color 0.2s ease;
}
.copyable-model-name:hover {
color: #409EFF;
}
.copy-icon {
font-size: 14px;
opacity: 0.6;
position: absolute;
right: 0;
transition: all 0.2s ease;
}
.copyable-model-name:hover .copy-icon {
opacity: 1;
color: #409EFF;
}
.model-meta {
display: flex;
gap: 0.5rem;