feat: 详情页复制按钮改用 fa-copy 图标
以内联 SVG 内嵌 Font Awesome copy/check 字形(viewBox 0 0 448 512),复制成功后切换为对勾;不再为单个图标引入整个 Font Awesome 依赖。
This commit is contained in:
1 parent
63ad1eb965
commit
d727b515c8
1 file changed
+24
-5
@@ -92,7 +92,19 @@ watch(() => route.params.name, load, { immediate: true })
|
|||||||
<p class="banner-summary">{{ project.PackageDesc || t.project.noDesc }}</p>
|
<p class="banner-summary">{{ project.PackageDesc || t.project.noDesc }}</p>
|
||||||
<div class="install">
|
<div class="install">
|
||||||
<code class="install-cmd">{{ installCommand }}</code>
|
<code class="install-cmd">{{ installCommand }}</code>
|
||||||
<button class="copy" @click="copyInstall">{{ copied ? 'OK' : 'COPY' }}</button>
|
<button class="copy" :title="copied ? 'Copied' : 'Copy'" @click="copyInstall">
|
||||||
|
<!-- fa fa-copy / fa fa-check(内联 SVG,避免为单个图标引入 Font Awesome) -->
|
||||||
|
<svg v-if="!copied" viewBox="0 0 448 512" aria-hidden="true">
|
||||||
|
<path
|
||||||
|
d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448h256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg v-else viewBox="0 0 448 512" aria-hidden="true">
|
||||||
|
<path
|
||||||
|
d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<p class="banner-hint">{{ t.project.installHint }}</p>
|
<p class="banner-hint">{{ t.project.installHint }}</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -304,17 +316,24 @@ watch(() => route.params.name, load, { immediate: true })
|
|||||||
|
|
||||||
.copy {
|
.copy {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: 0.72rem;
|
display: inline-flex;
|
||||||
font-weight: 700;
|
align-items: center;
|
||||||
letter-spacing: 0.08em;
|
justify-content: center;
|
||||||
|
width: 30px;
|
||||||
|
height: 28px;
|
||||||
color: #006dad;
|
color: #006dad;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
padding: 5px 11px;
|
|
||||||
transition: background 0.15s, color 0.15s;
|
transition: background 0.15s, color 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.copy svg {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
.copy:hover {
|
.copy:hover {
|
||||||
background: rgba(255, 255, 255, 0.85);
|
background: rgba(255, 255, 255, 0.85);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user