mamamiyear/SnapGo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add icon for buttons

Browse Source 
- add icon for after screen shot operation buttons
- add a new button `save-remote` but not implement for now
This commit is contained in:
漂泊旅人
2026-06-11 17:09:47 +08:00
parent 1d52d154fd
commit ab4ba8c417
7 changed files with 262 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/icons/cancel.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333zM170.666667 512a341.333333 341.333333 0 0 0 550.613333 269.653333L242.304 302.762667A339.84 339.84 0 0 0 170.666667 512z m341.333333-341.333333c-78.848 0-151.466667 26.752-209.28 71.68l478.976 478.933333A341.333333 341.333333 0 0 0 512 170.666667z" fill="currentColor"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 534 B

frontend/src/assets/icons/copy.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M768 256a85.333333 85.333333 0 0 1 85.333333 85.333333v512a85.333333 85.333333 0 0 1-85.333333 85.333334h-341.333333a85.333333 85.333333 0 0 1-85.333334-85.333334V341.333333a85.333333 85.333333 0 0 1 85.333334-85.333333h341.333333z m0 85.333333h-341.333333v512h341.333333V341.333333z m-128-256a42.666667 42.666667 0 0 1 42.666667 42.666667l-0.042667 42.666667H256l-0.042667 597.333333H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V170.666667a85.333333 85.333333 0 0 1 85.333333-85.333334h384z" fill="currentColor"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 612 B

frontend/src/assets/icons/save-local.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M896 810.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333V213.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h250.368a85.333333 85.333333 0 0 1 73.173334 41.429333L563.2 213.333333H810.666667a85.333333 85.333333 0 0 1 85.333333 85.333334v512z m-85.333333-341.333334H213.333333v341.333334h597.333334v-341.333334z m-346.965334-256H213.333333v170.666667h597.333334V298.666667h-271.616a42.666667 42.666667 0 0 1-36.608-20.736L463.701333 213.333333z" fill="currentColor"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 619 B

frontend/src/assets/icons/save-remote.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M481.749333 353.792c16.682667-16.64 43.690667-16.64 60.373334 0l120.917333 120.832 3.541333 4.010667a42.666667 42.666667 0 0 1-63.872 56.32L554.666667 486.954667V896a42.666667 42.666667 0 0 1-85.333334 0v-409.173333l-48.170666 48.128a42.666667 42.666667 0 0 1-60.330667 0l-3.541333-4.010667a42.666667 42.666667 0 0 1 3.541333-56.32zM512 85.333333c122.538667 0 227.84 73.813333 273.92 179.370667A213.333333 213.333333 0 0 1 725.333333 682.666667a42.666667 42.666667 0 0 1-4.992-85.034667L725.333333 597.333333a128 128 0 0 0 36.394667-250.794666l-38.144-11.264-15.914667-36.437334a213.376 213.376 0 0 0-407.296 58.026667l-7.381333 58.368-57.173333 13.824A85.418667 85.418667 0 0 0 256 597.333333h42.666667a42.666667 42.666667 0 0 1 0 85.333334H256a170.666667 170.666667 0 0 1-40.277333-336.554667A298.709333 298.709333 0 0 1 512 85.333333z" fill="currentColor"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 946 B

frontend/src/assets/icons/upload.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M550.528 544.128L640 539.776V678.4l178.005333-178.005333L640 322.389333v129.024l-72.618667 10.922667c-155.52 23.424-251.733333 73.557333-312.874666 164.437333 84.906667-50.602667 178.261333-76.928 296.021333-82.645333zM554.666667 629.376c-27.392 1.322667-53.034667 3.968-77.141334 7.808l-8.192 1.365333c-136.704 23.637333-224.810667 87.168-310.954666 176.128-26.154667 27.008-51.882667 59.648-51.882667 59.648-14.848 18.176-24.021333 14.037333-20.352-9.173333 0 0 4.394667-31.402667 11.690667-65.792C144.938667 577.066667 250.581333 423.68 554.666667 377.941333V209.066667a38.4 38.4 0 0 1 65.536-27.136l291.328 291.285333a38.4 38.4 0 0 1 0 54.314667l-291.328 291.285333A38.4 38.4 0 0 1 554.666667 791.637333v-162.261333z" fill="currentColor" p-id="2487"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 841 B

frontend/src/views/CaptureOverlay.vue
+98 -31
View File
@@ -1,5 +1,13 @@
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'
// Inline SVG markup imported as raw strings via Vite's `?raw` suffix.
// Rationale: rendering through v-html lets the icon inherit `currentColor`
// from the toolbar button, so styling stays in CSS without bundling extra
// SVG-as-component plugins.
import cancelIcon from '../assets/icons/cancel.svg?raw'
import copyIcon from '../assets/icons/copy.svg?raw'
import saveIcon from '../assets/icons/save-local.svg?raw'
import uploadIcon from '../assets/icons/upload.svg?raw'
interface Props {
width: number
@@ -100,7 +108,7 @@ const sizeLabel = computed(() => {
const rightToolbarPos = computed(() => {
if (!rect.value) return null
return placeToolbar(rect.value, 304, 40, 'right')
return placeToolbar(rect.value, 144, 40, 'right')
})
const leftToolbarPos = computed(() => {
@@ -556,13 +564,34 @@ onUnmounted(() => {
:style="{ left: rightToolbarPos.x + 'px', top: rightToolbarPos.y + 'px' }"
@mousedown.stop
>
<button class="btn cancel" @click="onCancel" title="Esc">Cancel</button>
<button class="btn secondary" @click="onSave" title="Save to folder">
Save
</button>
<button class="btn primary" @click="onConfirm" title="Enter">
Upload &amp; copy
</button>
<button
class="action-btn cancel"
data-tip="取消截图"
aria-label="取消截图"
@click="onCancel"
v-html="cancelIcon"
/>
<button
class="action-btn"
data-tip="复制图标"
aria-label="复制图标"
@click="onCopy"
v-html="copyIcon"
/>
<button
class="action-btn"
data-tip="保存本地"
aria-label="保存本地"
@click="onSave"
v-html="saveIcon"
/>
<button
class="action-btn primary"
data-tip="上传云端"
aria-label="上传云端"
@click="onConfirm"
v-html="uploadIcon"
/>
</div>
<div v-if="!rect" class="hint">
@@ -650,44 +679,82 @@ onUnmounted(() => {
width: 190px;
}
.action-toolbar {
width: 304px;
width: 144px;
}
.btn,
.icon-btn,
.action-btn,
.swatch {
font-family: inherit;
}
.btn {
/*
* .action-btn — Square SVG icon button used in the bottom-right action toolbar.
*
* Design rationale:
* - Mirrors .icon-btn sizing (32px square) so the action toolbar is visually
* balanced with the annotation toolbar.
* - Uses `currentColor` so each instance can override its own hue (e.g. the
* primary upload button is blue) while sharing one base set of rules.
* - The native CSS tooltip is rendered through `::after` driven by the
* `data-tip` attribute. This avoids the system `title` tooltip's slow show
* delay and lets us style/position the bubble consistently.
*/
.action-btn {
position: relative;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 5px;
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.btn.cancel {
background: transparent;
color: #d1d5db;
background: transparent;
cursor: pointer;
padding: 0;
}
.btn.cancel:hover {
background: rgba(255, 255, 255, 0.08);
}
.btn.secondary {
.action-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.12);
}
.action-btn.cancel:hover {
color: #fca5a5;
background: rgba(239, 68, 68, 0.18);
}
.action-btn.primary {
color: #60a5fa;
}
.action-btn.primary:hover {
color: #fff;
}
.btn.secondary:hover {
background: rgba(255, 255, 255, 0.18);
}
.btn.primary {
background: #3b82f6;
color: #fff;
}
.btn.primary:hover {
background: #2563eb;
}
.action-btn :deep(svg) {
width: 18px;
height: 18px;
display: block;
fill: currentColor;
pointer-events: none;
}
.action-btn::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: 3px 8px;
font-size: 12px;
color: #fff;
background: rgba(15, 23, 42, 0.92);
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.12s ease 0.05s;
z-index: 5;
}
.action-btn:hover::after {
opacity: 1;
}
.icon-btn {
display: grid;