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

feat: add FTP and SFTP upload support

Browse Source
This commit is contained in:
漂泊旅人
2026-07-12 10:04:21 +08:00
parent f1998fb23c
commit dd12521be2
22 changed files with 1466 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+14 -1
View File
@@ -22,6 +22,7 @@ import {
CopyRegionImage,
SaveRegionImage,
SaveRegionToRemote,
UploadRegionToFTP,
SummarizeRegion,
ExtractTextRegion,
CancelRegion,
@@ -59,7 +60,7 @@ async function loadThemePreference() {
// `SettingsTab` is hoisted to the App shell so the sidebar (which lives
// here) and the inner SettingsView (which renders the matching card) can
// share a single source of truth without an event bus.
type SettingsTab = 'general' | 's3' | 'ssh' | 'llm' | 'ocr'
type SettingsTab = 'general' | 's3' | 'ftp' | 'ssh' | 'llm' | 'ocr'
const activeTab = ref<SettingsTab>('general')
// Sidebar entries are declarative so adding a destination type later is
@@ -67,6 +68,7 @@ const activeTab = ref<SettingsTab>('general')
const sidebarItems: Array<{ id: SettingsTab; label: string }> = [
{ id: 'general', label: '通用设置' },
{ id: 's3', label: '对象存储' },
{ id: 'ftp', label: 'FTP / SFTP' },
{ id: 'ssh', label: '远程主机' },
{ id: 'llm', label: '智能识图' },
{ id: 'ocr', label: '文字提取' },
@@ -184,6 +186,16 @@ async function onOverlaySaveRemote(rect: OverlayResult) {
}
}
async function onOverlayUploadFTP(rect: OverlayResult) {
mode.value = 'settings'
overlayPayload.value = null
try {
await UploadRegionToFTP(rect as any)
} catch {
/* Surfaced via upload:failure */
}
}
async function onOverlaySummarize(rect: OverlayResult) {
mode.value = 'settings'
overlayPayload.value = null
@@ -275,6 +287,7 @@ onUnmounted(() => {
@copy="onOverlayCopy"
@save="onOverlaySave"
@save-remote="onOverlaySaveRemote"
@upload-ftp="onOverlayUploadFTP"
@summarize="onOverlaySummarize"
@ocr="onOverlayOCR"
@cancel="onOverlayCancel"
frontend/src/assets/icons/ftp.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M128 128h768v256H128V128zm64 64v128h640V192H192zm64 48h64v32h-64v-32zM128 448h416v64H192v192h352v64H128V448zm560-32 160 160-45.248 45.248L720 538.496V832h-64V538.496l-82.752 82.752L528 576l160-160z" fill="currentColor"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 306 B

frontend/src/views/CaptureOverlay.vue
+35 -7
View File
@@ -8,6 +8,7 @@ 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 saveRemoteIcon from '../assets/icons/save-remote.svg?raw'
import ftpIcon from '../assets/icons/ftp.svg?raw'
import uploadIcon from '../assets/icons/upload.svg?raw'
interface Props {
@@ -54,6 +55,10 @@ const emit = defineEmits<{
e: 'save-remote',
payload: { rect: Rect; annotations: Annotation[] }
): void
(
e: 'upload-ftp',
payload: { rect: Rect; annotations: Annotation[] }
): void
(
e: 'summarize',
payload: { rect: Rect; annotations: Annotation[] }
@@ -142,7 +147,7 @@ const sizeLabel = computed(() => {
})
const MARK_TOOLBAR_W = 178
const ACTION_TOOLBAR_W = 252
const ACTION_TOOLBAR_W = 288
const TOOLBAR_GROUP_GAP = 8
const toolOrder: Tool[] = ['pen', 'rect', 'ellipse', 'text']
@@ -571,6 +576,10 @@ function onSaveRemote() {
emitAction('save-remote')
}
function onUploadFTP() {
emitAction('upload-ftp')
}
function onSummarize() {
emitAction('summarize')
}
@@ -579,7 +588,16 @@ function onOCR() {
emitAction('ocr')
}
function emitAction(action: 'confirm' | 'copy' | 'save' | 'save-remote' | 'summarize' | 'ocr') {
function emitAction(
action:
| 'confirm'
| 'copy'
| 'save'
| 'save-remote'
| 'upload-ftp'
| 'summarize'
| 'ocr'
) {
if (!rect.value) return
commitTextDraft()
const payload = {
@@ -590,6 +608,7 @@ function emitAction(action: 'confirm' | 'copy' | 'save' | 'save-remote' | 'summa
if (action === 'copy') emit('copy', payload)
if (action === 'save') emit('save', payload)
if (action === 'save-remote') emit('save-remote', payload)
if (action === 'upload-ftp') emit('upload-ftp', payload)
if (action === 'summarize') emit('summarize', payload)
if (action === 'ocr') emit('ocr', payload)
}
@@ -995,11 +1014,18 @@ onUnmounted(() => {
/>
<button
class="action-btn"
data-tip="保存远端"
aria-label="保存远端"
data-tip="上传 SSH/SCP"
aria-label="上传 SSH/SCP"
@click="onSaveRemote"
v-html="saveRemoteIcon"
/>
<button
class="action-btn"
data-tip="上传 FTP/SFTP"
aria-label="上传 FTP/SFTP"
@click="onUploadFTP"
v-html="ftpIcon"
/>
<button
class="action-btn"
data-tip="提取文字"
@@ -1030,8 +1056,8 @@ onUnmounted(() => {
</button>
<button
class="action-btn primary"
data-tip="上传云端"
aria-label="上传云端"
data-tip="上传 S3"
aria-label="上传 S3"
@click="onConfirm"
v-html="uploadIcon"
/>
@@ -1148,7 +1174,9 @@ onUnmounted(() => {
width: 178px;
}
.action-toolbar {
width: 252px;
box-sizing: border-box;
width: 288px;
gap: 8px;
}
.icon-btn,
frontend/src/views/SettingsView.vue
+195 -1
View File
@@ -7,6 +7,7 @@
*
* • "general" — the global hotkey / capture parameters.
* • "s3" — S3-compatible object-storage credentials.
* • "ftp" — FTP/SFTP file-transfer destination.
* • "ssh" — SSH/SCP destination for the "save remote" button.
* • "llm" — multimodal screenshot summary provider settings.
* • "ocr" — cloud OCR provider settings for text extraction.
@@ -18,14 +19,16 @@ import {
GetConfig,
SaveConfig,
TestConnection,
TestFTPConnection,
TestSSHConnection,
CaptureNow,
} from '../../wailsjs/go/main/App'
// Tab discriminator shared with the App shell. Kept as a string union so
// the parent can pass the value without importing a type from this view.
type TabId = 'general' | 's3' | 'ssh' | 'llm' | 'ocr'
type TabId = 'general' | 's3' | 'ftp' | 'ssh' | 'llm' | 'ocr'
type ThemeMode = 'auto' | 'light' | 'dark'
type FTPProtocol = 'ftp' | 'sftp'
const props = defineProps<{
tab: TabId
@@ -59,6 +62,19 @@ interface SSHConfig {
connectTimeoutSecs: number
}
interface FTPConfig {
protocol: FTPProtocol
host: string
port: number
user: string
authMethod: 'password' | 'key'
password: string
pathPrefix: string
strictHostKey: boolean
knownHostsPath: string
connectTimeoutSecs: number
}
interface LLMProviderConfig {
label: string
baseUrl: string
@@ -97,6 +113,7 @@ interface AppConfig {
theme: ThemeMode
s3: S3Config
ssh: SSHConfig
ftp: FTPConfig
llm: LLMConfig
ocr: OCRConfig
}
@@ -145,6 +162,18 @@ function defaultConfig(): AppConfig {
publicUrlBase: '',
usePathStyle: true,
},
ftp: {
protocol: 'ftp',
host: '',
port: 21,
user: '',
authMethod: 'password',
password: '',
pathPrefix: 'snapgo/',
strictHostKey: false,
knownHostsPath: '',
connectTimeoutSecs: 10,
},
ssh: {
host: '',
port: 22,
@@ -223,6 +252,7 @@ const config = ref<AppConfig>(defaultConfig())
const saving = ref(false)
const testing = ref(false)
const testingFTP = ref(false)
const testingSSH = ref(false)
const message = ref<{ kind: 'ok' | 'err'; text: string } | null>(null)
@@ -240,6 +270,39 @@ const sshPathDisplay = computed({
},
})
// FTP and SFTP both upload relative to the authenticated login directory.
// The visible prefix communicates how that location will be copied: FTP uses
// its virtual root, while SFTP uses the SSH user's home directory.
const ftpPathDisplay = computed({
get: () => config.value.ftp.pathPrefix,
set: (raw: string) => {
let cleaned = raw.trim()
cleaned = cleaned.replace(/^~/, '')
cleaned = cleaned.replace(/^\/+/, '')
config.value.ftp.pathPrefix = cleaned
},
})
const ftpPathRootLabel = computed(() =>
config.value.ftp.protocol === 'sftp' ? '~/' : '/'
)
function changeFTPProtocol(event: Event) {
const next = (event.target as HTMLSelectElement).value as FTPProtocol
const previous = config.value.ftp.protocol
const previousDefault = previous === 'sftp' ? 22 : 21
if (config.value.ftp.port === previousDefault) {
config.value.ftp.port = next === 'sftp' ? 22 : 21
}
config.value.ftp.protocol = next
}
function changeFTPAuthMethod(event: Event) {
config.value.ftp.authMethod = (event.target as HTMLSelectElement).value as
| 'password'
| 'key'
}
const activeLLMProvider = computed(() => {
const id = config.value.llm.activeProvider || 'openai'
if (!config.value.llm.providers[id]) {
@@ -280,6 +343,7 @@ async function load() {
Object.assign(merged, cfg)
merged.s3 = { ...merged.s3, ...(cfg as any).s3 }
merged.ssh = { ...merged.ssh, ...(cfg as any).ssh }
merged.ftp = { ...merged.ftp, ...(cfg as any).ftp }
merged.llm = { ...merged.llm, ...(cfg as any).llm }
merged.llm.providers = {
...defaultConfig().llm.providers,
@@ -320,6 +384,21 @@ async function test() {
}
}
async function testFTP() {
testingFTP.value = true
try {
await TestFTPConnection(config.value.ftp as any)
flash(
'ok',
`${config.value.ftp.protocol.toUpperCase()} connection OK — remote directory is writable`
)
} catch (err: any) {
flash('err', `FTP/SFTP test failed: ${err?.message ?? err}`)
} finally {
testingFTP.value = false
}
}
async function testSSH() {
testingSSH.value = true
try {
@@ -450,6 +529,121 @@ onMounted(load)
</div>
</section>
<!-- FTP/SFTP tab — file-transfer destination for its toolbar action. -->
<section v-if="props.tab === 'ftp'" class="card">
<h2>FTP / SFTP destination</h2>
<div class="grid">
<label class="field">
<span>Protocol</span>
<select :value="config.ftp.protocol" @change="changeFTPProtocol">
<option value="ftp">FTP</option>
<option value="sftp">SFTP (SSH File Transfer Protocol)</option>
</select>
</label>
<label class="field">
<span>Port</span>
<input
v-model.number="config.ftp.port"
type="number"
min="1"
max="65535"
:placeholder="config.ftp.protocol === 'sftp' ? '22' : '21'"
/>
</label>
<label class="field">
<span>Host (IP or domain) *</span>
<input v-model.trim="config.ftp.host" placeholder="files.example.com" />
</label>
<label class="field">
<span>User *</span>
<input v-model.trim="config.ftp.user" placeholder="snapgo" />
</label>
<label
v-if="config.ftp.protocol === 'sftp'"
key="sftp-auth-method"
class="field"
>
<span>Auth method</span>
<select
:value="config.ftp.authMethod"
@change="changeFTPAuthMethod"
>
<option value="password">Password</option>
<option value="key">SSH-Key</option>
</select>
</label>
<label
v-if="config.ftp.protocol === 'ftp' || config.ftp.authMethod === 'password'"
:key="`${config.ftp.protocol}-password`"
class="field"
>
<span>Password</span>
<input v-model="config.ftp.password" type="password" />
</label>
<label class="field full">
<span>Remote directory (under login root)</span>
<div class="prefixed-input">
<span class="input-prefix">{{ ftpPathRootLabel }}</span>
<input
v-model="ftpPathDisplay"
placeholder="snapgo/"
spellcheck="false"
/>
</div>
</label>
<label class="field">
<span>Connect timeout (sec)</span>
<input
v-model.number="config.ftp.connectTimeoutSecs"
type="number"
min="1"
max="120"
placeholder="10"
/>
</label>
<label v-if="config.ftp.protocol === 'sftp'" class="field">
<span>Known hosts path</span>
<input
v-model="config.ftp.knownHostsPath"
placeholder="~/.ssh/known_hosts"
:disabled="!config.ftp.strictHostKey"
/>
</label>
<label v-if="config.ftp.protocol === 'sftp'" class="field checkbox">
<input type="checkbox" v-model="config.ftp.strictHostKey" />
<span>Strict host key checking (recommended)</span>
</label>
</div>
<p v-if="config.ftp.protocol === 'ftp'" class="hint warn">
FTP sends the username, password, and screenshot without encryption.
Prefer SFTP on networks you do not fully trust. SFTP is not FTPS.
</p>
<p
v-else-if="config.ftp.authMethod === 'key'"
class="hint"
>
SSH-Key mode uses your <code>ssh-agent</code> and
<code>~/.ssh/id_*</code> keys.
</p>
<p
v-else-if="!config.ftp.strictHostKey"
class="hint warn"
>
Host key checking is disabled. Enable it for production servers to
detect server impersonation.
</p>
<div class="actions">
<button class="btn" :disabled="testingFTP" @click="testFTP">
{{ testingFTP ? 'Testing…' : 'Test connection' }}
</button>
<button class="btn primary" :disabled="saving" @click="save">
{{ saving ? 'Saving…' : 'Save' }}
</button>
</div>
</section>
<!-- SSH-Conf tab — destination for the save-remote action. -->
<section v-if="props.tab === 'ssh'" class="card">
<h2>SSH / SCP destination</h2>
frontend/wailsjs/go/main/App.d.ts
Vendored
+6
View File
@@ -47,4 +47,10 @@ export function SummarizeRegion(arg1:main.CaptureResult):Promise<void>;
export function TestConnection(arg1:domain.S3Config):Promise<void>;
export function TestFTPConnection(arg1:domain.FTPConfig):Promise<void>;
export function TestSSHConnection(arg1:domain.SSHConfig):Promise<void>;
export function UploadNativeRegionToFTP(arg1:main.CaptureResult):Promise<void>;
export function UploadRegionToFTP(arg1:main.CaptureResult):Promise<void>;
frontend/wailsjs/go/main/App.js
+12
View File
@@ -90,6 +90,18 @@ export function TestConnection(arg1) {
return window['go']['main']['App']['TestConnection'](arg1);
}
export function TestFTPConnection(arg1) {
return window['go']['main']['App']['TestFTPConnection'](arg1);
}
export function TestSSHConnection(arg1) {
return window['go']['main']['App']['TestSSHConnection'](arg1);
}
export function UploadNativeRegionToFTP(arg1) {
return window['go']['main']['App']['UploadNativeRegionToFTP'](arg1);
}
export function UploadRegionToFTP(arg1) {
return window['go']['main']['App']['UploadRegionToFTP'](arg1);
}
frontend/wailsjs/go/models.ts
+33
View File
@@ -179,6 +179,36 @@ export namespace domain {
return a;
}
}
export class FTPConfig {
protocol: string;
host: string;
port: number;
user: string;
authMethod: string;
password: string;
pathPrefix: string;
strictHostKey: boolean;
knownHostsPath: string;
connectTimeoutSecs: number;
static createFrom(source: any = {}) {
return new FTPConfig(source);
}
constructor(source: any = {}) {
if ('string' === typeof source) source = JSON.parse(source);
this.protocol = source["protocol"];
this.host = source["host"];
this.port = source["port"];
this.user = source["user"];
this.authMethod = source["authMethod"];
this.password = source["password"];
this.pathPrefix = source["pathPrefix"];
this.strictHostKey = source["strictHostKey"];
this.knownHostsPath = source["knownHostsPath"];
this.connectTimeoutSecs = source["connectTimeoutSecs"];
}
}
export class SSHConfig {
host: string;
port: number;
@@ -238,6 +268,7 @@ export namespace domain {
theme: string;
s3: S3Config;
ssh: SSHConfig;
ftp: FTPConfig;
llm: LLMConfig;
ocr: OCRConfig;
@@ -251,6 +282,7 @@ export namespace domain {
this.theme = source["theme"];
this.s3 = this.convertValues(source["s3"], S3Config);
this.ssh = this.convertValues(source["ssh"], SSHConfig);
this.ftp = this.convertValues(source["ftp"], FTPConfig);
this.llm = this.convertValues(source["llm"], LLMConfig);
this.ocr = this.convertValues(source["ocr"], OCRConfig);
}
@@ -278,6 +310,7 @@ export namespace domain {
}