mirror of
https://github.com/woodchen-ink/aimodels-prices.git
synced 2025-07-18 05:32:00 +08:00
feat(Prices.vue): 添加模型名称复制功能
在模型名称旁添加复制图标,用户点击后可复制模型名称到剪贴板,提升用户体验。
This commit is contained in:
parent
b3c39832d3
commit
15e844f64e
@ -101,7 +101,10 @@
|
|||||||
|
|
||||||
<div class="model-info">
|
<div class="model-info">
|
||||||
<h3 class="model-name">
|
<h3 class="model-name">
|
||||||
{{ price.model }}
|
<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'"
|
<el-tag v-if="price.temp_model && price.temp_model !== 'NULL'"
|
||||||
type="warning" size="small" effect="light">
|
type="warning" size="small" effect="light">
|
||||||
待审核: {{ price.temp_model }}
|
待审核: {{ price.temp_model }}
|
||||||
@ -645,6 +648,22 @@ const billingTypeMap = {
|
|||||||
const getStatus = (status) => statusMap[status] || status
|
const getStatus = (status) => statusMap[status] || status
|
||||||
const getBillingType = (type) => billingTypeMap[type] || type
|
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函数
|
// 添加getModelType函数
|
||||||
const getModelType = (type) => {
|
const getModelType = (type) => {
|
||||||
if (!type) return ''
|
if (!type) return ''
|
||||||
@ -1828,6 +1847,33 @@ onMounted(() => {
|
|||||||
line-height: 1.2;
|
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 {
|
.model-meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user