XingfenD/yoresee_dropbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): componentize frontend and replace native delete confirm

Browse Source 
- Split monolithic app.js/style.css into Alpine.js components (icons, store, fileSection, confirm)
- Add central Alpine.store('files') as single source of truth for file lists and actions
- Replace duplicated Inbox/Outbox markup with reusable fileSection component (props: dir, canShare)
- Add shared window.Icons module to remove duplicated inline SVGs
- Replace browser-native confirm() for file deletion with a styled, accessible modal dialog
- Split CSS into design tokens, base, and component layers; modernize visuals
- Update web.go embed and server static routes for the new component/style dirs
This commit is contained in:
XingfenD
2026-08-27 15:03:09 +08:00
parent 110a8f7d9d
commit d84e4dfdba
14 changed files with 966 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/CHANGELOG_webui.md
+13
View File
@@ -6,6 +6,19 @@ All notable changes to this template should be documented in this file.
The format loosely follows Keep a Changelog and can be adapted to the team's habits.
本文档参考了 Keep a Changelog 的思路，也可以根据团队习惯调整。
## [0.1.0] - 2026-08-27
### Changed / 变更
- Refactored the vanilla frontend into a component-based structure (Alpine.js components, a central state store, and a shared icon module) while keeping the no-build, Go-served static-file approach.
- 将原生前端重构为组件化结构（基于 Alpine.js 的组件、集中式状态 store、共享图标模块），同时保留由 Go 直接托管、无需构建的静态文件方案。
- Replaced the duplicated Inbox/Outbox markup with a single reusable `fileSection` component configured by props (`dir`, `canShare`).
- 用同一个可复用的 `fileSection` 组件（按属性 `dir`、`canShare` 配置）替换了原先重复的收件箱/发件箱标记。
- Split styles into design tokens, base, and component layers under `web/styles/`, and moved UI icons into a shared `window.Icons` module.
- 将样式拆分为 `web/styles/` 下的设计令牌、基础样式与组件样式三层，并把界面图标统一收敛到共享的 `window.Icons` 模块。
## [0.0.1] - 2026-04-28
### Added / 新增
internal/server/server.go
+4 -3
View File
@@ -69,9 +69,10 @@ func (s *Server) Handler() http.Handler {
w.Write(data)
}))
mux.Handle("GET /style.css", http.FileServerFS(web.FS))
mux.Handle("GET /app.js", http.FileServerFS(web.FS))
mux.Handle("GET /alpine.min.js", http.FileServerFS(web.FS))
static := http.FileServerFS(web.FS)
mux.Handle("GET /components/", static)
mux.Handle("GET /styles/", static)
mux.Handle("GET /alpine.min.js", static)
return mux
}
web/app.js
-69
View File
@@ -1,69 +0,0 @@
function app() {
return {
inboxFiles: [],
outboxFiles: [],
dragover: false,
toast: { show: false, message: '' },
async loadFiles() {
const [inbox, outbox] = await Promise.all([
fetch('/api/files?dir=inbox').then(r => r.json()),
fetch('/api/files?dir=outbox').then(r => r.json())
]);
this.inboxFiles = inbox.files || [];
this.outboxFiles = outbox.files || [];
},
showToast(msg) {
this.toast.message = msg;
this.toast.show = true;
setTimeout(() => { this.toast.show = false; }, 2500);
},
async upload(event, dir) {
const files = event.target.files;
if (!files || !files.length) return;
for (const file of files) {
const form = new FormData();
form.append('file', file);
form.append('dir', dir);
await fetch('/api/upload', { method: 'POST', body: form });
}
event.target.value = '';
this.showToast('File uploaded');
this.loadFiles();
},
async uploadDropped(event, dir) {
const files = event.dataTransfer.files;
if (!files || !files.length) return;
for (const file of files) {
const form = new FormData();
form.append('file', file);
form.append('dir', dir);
await fetch('/api/upload', { method: 'POST', body: form });
}
this.showToast('File uploaded');
this.loadFiles();
},
download(id) {
window.location.href = '/api/files/' + id + '/download';
},
async deleteFile(id) {
if (!confirm('Delete this file?')) return;
await fetch('/api/files/' + id, { method: 'DELETE' });
this.showToast('File deleted');
this.loadFiles();
},
async share(id) {
const res = await fetch('/api/files/' + id + '/share', { method: 'POST' });
const data = await res.json();
try {
await navigator.clipboard.writeText(data.url);
this.showToast('Share link copied to clipboard');
} catch (_) {
alert('Share URL: ' + data.url);
}
},
async logout() {
await fetch('/api/logout', { method: 'POST' });
window.location.href = '/login';
}
};
}
web/components/confirm.js
+85
View File
@@ -0,0 +1,85 @@
/**
* Confirmation dialog (a promise-based modal store + UI component).
*
* Replaces the browser-native `confirm()` with a styled, accessible modal.
* Components request confirmation via `Alpine.store('confirm').show(opts)`,
* which resolves `true`/`false` when the user acts — mirroring a UI-library
* dialog API.
*/
(function () {
function register() {
Alpine.store('confirm', {
open: false,
title: '',
message: '',
danger: false,
_resolve: null,
show(opts) {
this.title = opts.title || 'Confirm';
this.message = opts.message || '';
this.danger = opts.danger || false;
this.open = true;
return new Promise((resolve) => {
this._resolve = resolve;
});
},
accept() {
this._close(true);
},
cancel() {
this._close(false);
},
_close(result) {
this.open = false;
const resolve = this._resolve;
this._resolve = null;
if (resolve) resolve(result);
},
});
Alpine.data('confirmDialog', () => ({
get store() {
return Alpine.store('confirm');
},
get open() {
return this.store.open;
},
get title() {
return this.store.title;
},
get message() {
return this.store.message;
},
get danger() {
return this.store.danger;
},
accept() {
this.store.accept();
},
cancel() {
this.store.cancel();
},
onEscape() {
if (this.open) this.cancel();
},
init() {
this.$watch('open', (visible) => {
if (visible) {
this.$nextTick(() => {
if (this.$refs.accept) this.$refs.accept.focus();
});
}
});
},
}));
}
if (window.Alpine) register();
else document.addEventListener('alpine:init', register);
})();
web/components/fileSection.js
+44
View File
@@ -0,0 +1,44 @@
/**
* fileSection component.
*
* A single reusable component parametrized by `dir` and `canShare`. Both the
* Inbox and Outbox on the page are the same component instance with different
* props, replacing the previously copy-pasted <section> blocks.
*
* Usage:
* <section x-data="fileSection('inbox', { canShare: true })"> ... </section>
*/
(function () {
function register() {
Alpine.data('fileSection', (dir, opts = {}) => ({
dir,
canShare: opts.canShare ?? false,
dragover: false,
get files() {
return Alpine.store('files').files[dir];
},
get count() {
return this.files.length;
},
get title() {
return dir === 'inbox' ? 'Inbox' : 'Outbox';
},
get icon() {
return dir === 'inbox' ? window.Icons.inbox : window.Icons.outbox;
},
async onSelect(e) {
await Alpine.store('files').upload(this.dir, e.target.files);
e.target.value = '';
},
async onDrop(e) {
await Alpine.store('files').upload(this.dir, e.dataTransfer.files);
},
}));
}
if (window.Alpine) register();
else document.addEventListener('alpine:init', register);
})();
web/components/icons.js
+33
View File
@@ -0,0 +1,33 @@
/**
* Central icon set. Each entry is an inline SVG string (currentColor aware)
* injected via Alpine's x-html. Keeping icons here prevents the duplicated
* markup that previously littered every list row and header.
*/
window.Icons = {
logout:
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>',
inbox:
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>',
outbox:
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>',
file:
'<svg viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
download:
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
share:
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>',
trash:
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
upload:
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 13v8"/><path d="m8 17 4-4 4 4"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 4 16.3"/><path d="m8 17 4-4 4 4"/></svg>',
empty:
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 3-4-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>',
};
web/components/store.js
+88
View File
@@ -0,0 +1,88 @@
/**
* Global state store (Alpine.store).
*
* Single source of truth for the file lists and shared actions, analogous to a
* Pinia/Redux store in a framework app. Components read reactive getters and
* dispatch actions here instead of owning their own duplicate state.
*/
(function () {
function register() {
Alpine.store('files', {
files: { inbox: [], outbox: [] },
toast: { show: false, message: '', _timer: null },
async init() {
await this.loadFiles();
},
async loadFiles() {
try {
const [inbox, outbox] = await Promise.all([
fetch('/api/files?dir=inbox').then((r) => r.json()),
fetch('/api/files?dir=outbox').then((r) => r.json()),
]);
this.files.inbox = inbox.files || [];
this.files.outbox = outbox.files || [];
} catch (e) {
this.showToast('Failed to load files');
}
},
showToast(message) {
this.toast.message = message;
this.toast.show = true;
if (this.toast._timer) clearTimeout(this.toast._timer);
this.toast._timer = setTimeout(() => {
this.toast.show = false;
}, 2500);
},
async upload(dir, fileList) {
if (!fileList || !fileList.length) return;
for (const file of fileList) {
const form = new FormData();
form.append('file', file);
form.append('dir', dir);
await fetch('/api/upload', { method: 'POST', body: form });
}
this.showToast('File uploaded');
await this.loadFiles();
},
download(id) {
window.location.href = '/api/files/' + id + '/download';
},
async deleteFile(id) {
const confirmed = await Alpine.store('confirm').show({
title: 'Delete file',
message: 'This file will be permanently removed. Continue?',
danger: true,
});
if (!confirmed) return;
await fetch('/api/files/' + id, { method: 'DELETE' });
this.showToast('File deleted');
await this.loadFiles();
},
async share(id) {
const res = await fetch('/api/files/' + id + '/share', { method: 'POST' });
const data = await res.json();
try {
await navigator.clipboard.writeText(data.url);
this.showToast('Share link copied to clipboard');
} catch (_) {
window.prompt('Share URL:', data.url);
}
},
async logout() {
await fetch('/api/logout', { method: 'POST' });
window.location.href = '/login';
},
});
}
if (window.Alpine) register();
else document.addEventListener('alpine:init', register);
})();
web/index.html
+98 -58
View File
@@ -1,120 +1,160 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yDropbox</title>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/styles/tokens.css">
<link rel="stylesheet" href="/styles/base.css">
<link rel="stylesheet" href="/styles/components.css">
<!-- Components register themselves on `alpine:init`; Alpine is loaded last. -->
<script defer src="/components/icons.js"></script>
<script defer src="/components/store.js"></script>
<script defer src="/components/fileSection.js"></script>
<script defer src="/components/confirm.js"></script>
<script defer src="/alpine.min.js"></script>
</head>
<body>
<div class="app" x-data="app()" x-init="loadFiles()">
<header>
<h1>y<span>Dropbox</span></h1>
<button class="btn btn-logout" @click="logout()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
<body x-data>
<div class="app">
<header class="app-header">
<h1 class="brand">y<span>Dropbox</span></h1>
<button class="btn btn-ghost btn-logout" @click="$store.files.logout()">
<span class="icon" x-html="Icons.logout"></span>
Logout
</button>
</header>
<section class="section">
<main>
<!-- Inbox -->
<section class="section" x-data="fileSection('inbox', { canShare: true })">
<div class="section-header">
<h2>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
Inbox
<span class="badge" x-text="inboxFiles.length"></span>
<span class="icon" x-html="icon"></span>
<span x-text="title"></span>
<span class="badge" x-text="count"></span>
</h2>
</div>
<div class="section-body">
<div class="drop-zone" :class="{ 'dragover': dragover }"
<div class="drop-zone"
:class="{ 'is-dragover': dragover }"
@dragover.prevent="dragover = true"
@dragleave.prevent="dragover = false"
@drop.prevent="dragover = false; uploadDropped($event, 'inbox')">
<input type="file" @change="upload($event, 'inbox')" multiple>
<div class="drop-zone-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
</div>
@drop.prevent="dragover = false; onDrop($event)">
<input type="file" class="drop-zone-input" @change="onSelect($event)" multiple>
<div class="drop-zone-icon"><span class="icon" x-html="Icons.upload"></span></div>
<div class="drop-zone-text"><strong>Click to upload</strong> or drag and drop</div>
</div>
<template x-if="inboxFiles.length === 0">
<template x-if="count === 0">
<div class="empty-state">
<div class="empty-state-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 3L9 9l-3 3H2"/></svg>
</div>
<div class="empty-state-text">No files in inbox</div>
<span class="empty-state-icon" x-html="Icons.empty"></span>
<div class="empty-state-text" x-text="'No files in ' + title.toLowerCase()"></div>
</div>
</template>
<ul class="file-list">
<template x-for="file in inboxFiles" :key="file.id">
<ul class="file-list" x-show="count > 0">
<template x-for="file in files" :key="file.id">
<li class="file-row">
<div class="file-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
</div>
<span class="file-icon" x-html="Icons.file"></span>
<div class="file-info">
<div class="file-name" x-text="file.name"></div>
</div>
<div class="file-actions">
<button class="btn btn-sm btn-ghost" @click="download(file.id)" title="Download">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
<button class="btn btn-icon" @click="$store.files.download(file.id)" title="Download">
<span class="icon" x-html="Icons.download"></span>
</button>
<button class="btn btn-sm btn-ghost" @click="share(file.id)" title="Share">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
<button class="btn btn-icon" x-show="canShare" @click="$store.files.share(file.id)" title="Share">
<span class="icon" x-html="Icons.share"></span>
</button>
<button class="btn btn-sm btn-ghost btn-danger" @click="deleteFile(file.id)" title="Delete">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
<button class="btn btn-icon btn-danger" @click="$store.files.deleteFile(file.id)" title="Delete">
<span class="icon" x-html="Icons.trash"></span>
</button>
</div>
</li>
</template>
</ul>
</div>
</section>
<section class="section">
<!-- Outbox -->
<section class="section" x-data="fileSection('outbox')">
<div class="section-header">
<h2>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
Outbox
<span class="badge" x-text="outboxFiles.length"></span>
<span class="icon" x-html="icon"></span>
<span x-text="title"></span>
<span class="badge" x-text="count"></span>
</h2>
</div>
<div class="section-body">
<template x-if="outboxFiles.length === 0">
<div class="empty-state">
<div class="empty-state-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
<div class="drop-zone"
:class="{ 'is-dragover': dragover }"
@dragover.prevent="dragover = true"
@dragleave.prevent="dragover = false"
@drop.prevent="dragover = false; onDrop($event)">
<input type="file" class="drop-zone-input" @change="onSelect($event)" multiple>
<div class="drop-zone-icon"><span class="icon" x-html="Icons.upload"></span></div>
<div class="drop-zone-text"><strong>Click to upload</strong> or drag and drop</div>
</div>
<div class="empty-state-text">No files in outbox</div>
<template x-if="count === 0">
<div class="empty-state">
<span class="empty-state-icon" x-html="Icons.empty"></span>
<div class="empty-state-text" x-text="'No files in ' + title.toLowerCase()"></div>
</div>
</template>
<ul class="file-list">
<template x-for="file in outboxFiles" :key="file.id">
<ul class="file-list" x-show="count > 0">
<template x-for="file in files" :key="file.id">
<li class="file-row">
<div class="file-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
</div>
<span class="file-icon" x-html="Icons.file"></span>
<div class="file-info">
<div class="file-name" x-text="file.name"></div>
</div>
<div class="file-actions">
<button class="btn btn-sm btn-ghost" @click="download(file.id)" title="Download">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
<button class="btn btn-icon" @click="$store.files.download(file.id)" title="Download">
<span class="icon" x-html="Icons.download"></span>
</button>
<button class="btn btn-sm btn-ghost btn-danger" @click="deleteFile(file.id)" title="Delete">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
<button class="btn btn-icon btn-danger" @click="$store.files.deleteFile(file.id)" title="Delete">
<span class="icon" x-html="Icons.trash"></span>
</button>
</div>
</li>
</template>
</ul>
</div>
</section>
</main>
<div class="toast" :class="{ 'show': toast.show }" x-text="toast.message"></div>
<div class="toast"
:class="{ 'show': $store.files.toast.show }"
x-text="$store.files.toast.message"></div>
<!-- Confirmation modal -->
<div class="modal-overlay"
x-data="confirmDialog()"
x-show="open"
x-cloak
x-transition.opacity
@click="cancel()"
@keydown.escape.window="onEscape()">
<div class="modal"
x-transition
@click.stop
role="dialog"
aria-modal="true"
:aria-label="title">
<h3 class="modal-title" x-text="title"></h3>
<p class="modal-body" x-text="message"></p>
<div class="modal-actions">
<button class="btn btn-ghost" type="button" @click="cancel()">Cancel</button>
<button class="btn"
:class="danger ? 'btn-danger' : 'btn-primary'"
type="button"
x-ref="accept"
@click="accept()"
x-text="danger ? 'Delete' : 'Confirm'"></button>
</div>
</div>
</div>
</div>
<script src="/app.js"></script>
</body>
</html>
web/login.html
+3 -1
View File
@@ -4,7 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yDropbox Login</title>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/styles/tokens.css">
<link rel="stylesheet" href="/styles/base.css">
<link rel="stylesheet" href="/styles/components.css">
</head>
<body>
<div class="login-wrap">
web/style.css
-340
View File
@@ -1,340 +0,0 @@
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root {
--bg: #f5f6f8;
--surface: #fff;
--border: #e2e5ea;
--text: #1a1d23;
--text-secondary: #6b7280;
--primary: #2563eb;
--primary-hover: #1d4ed8;
--danger: #ef4444;
--danger-hover: #dc2626;
--success: #10b981;
--radius: 10px;
--shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--shadow-lg: 0 4px 12px rgba(0,0,0,.08);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
min-height: 100vh;
}
.app {
max-width: 720px;
margin: 0 auto;
padding: 24px 20px 60px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
}
header h1 {
font-size: 22px;
font-weight: 700;
letter-spacing: -.3px;
color: var(--text);
}
header h1 span {
color: var(--primary);
}
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-size: 13px;
font-weight: 500;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
color: var(--text);
cursor: pointer;
transition: all .15s ease;
white-space: nowrap;
}
.btn:hover { background: #f0f1f3; }
.btn-primary {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger {
color: var(--danger);
border-color: #fecaca;
}
.btn-danger:hover { background: #fef2f2; border-color: var(--danger); }
.btn-ghost {
border-color: transparent;
background: transparent;
}
.btn-ghost:hover { background: #f0f1f3; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-logout {
border-color: transparent;
color: var(--text-secondary);
font-size: 13px;
}
.btn-logout:hover { color: var(--text); background: #f0f1f3; }
.section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
margin-bottom: 20px;
overflow: hidden;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.section-header h2 {
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.section-header .badge {
font-size: 11px;
font-weight: 600;
background: var(--bg);
color: var(--text-secondary);
padding: 2px 7px;
border-radius: 10px;
}
.section-body { padding: 0; }
.drop-zone {
margin: 16px 20px;
padding: 28px 20px;
border: 2px dashed var(--border);
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: all .2s ease;
position: relative;
}
.drop-zone:hover, .drop-zone.dragover {
border-color: var(--primary);
background: #eff6ff;
}
.drop-zone input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.drop-zone-icon {
font-size: 24px;
margin-bottom: 6px;
color: var(--text-secondary);
}
.drop-zone-text {
font-size: 13px;
color: var(--text-secondary);
}
.drop-zone-text strong {
color: var(--primary);
}
.file-list { list-style: none; }
.file-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border-bottom: 1px solid #f3f4f6;
transition: background .1s ease;
}
.file-row:last-child { border-bottom: none; }
.file-row:hover { background: #fafbfc; }
.file-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: #eff6ff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.file-info {
flex: 1;
min-width: 0;
}
.file-name {
font-size: 14px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-meta {
font-size: 12px;
color: var(--text-secondary);
}
.file-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
opacity: 0;
transition: opacity .15s ease;
}
.file-row:hover .file-actions { opacity: 1; }
.empty-state {
padding: 40px 20px;
text-align: center;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 32px;
margin-bottom: 8px;
opacity: .5;
}
.empty-state-text {
font-size: 14px;
}
.login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.login-card {
width: 100%;
max-width: 360px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 40px 32px;
text-align: center;
}
.login-card h1 {
font-size: 24px;
font-weight: 700;
margin-bottom: 4px;
}
.login-card h1 span { color: var(--primary); }
.login-card p {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 28px;
}
.login-card form {
display: flex;
flex-direction: column;
gap: 12px;
}
.login-card input {
padding: 10px 14px;
font-size: 14px;
border: 1px solid var(--border);
border-radius: 8px;
outline: none;
transition: border-color .15s ease;
width: 100%;
}
.login-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.login-card .btn-primary {
width: 100%;
padding: 10px;
font-size: 14px;
justify-content: center;
}
.login-error {
font-size: 13px;
color: var(--danger);
display: none;
}
.login-error.show { display: block; }
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(80px);
background: var(--text);
color: #fff;
padding: 10px 20px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
box-shadow: var(--shadow-lg);
opacity: 0;
transition: all .3s ease;
z-index: 1000;
pointer-events: none;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px) {
.app { padding: 16px 12px 40px; }
.section-header { padding: 12px 16px; }
.file-row { padding: 10px 16px; }
.file-actions { opacity: 1; }
.drop-zone { margin: 12px 16px; }
}
web/styles/base.css
+54
View File
@@ -0,0 +1,54 @@
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-sans);
background: var(--color-bg);
background-image: var(--color-bg-gradient);
background-attachment: fixed;
color: var(--color-text);
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
button {
font-family: inherit;
}
[x-cloak] {
display: none !important;
}
a {
color: inherit;
}
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ===== App shell ===== */
.app {
max-width: 760px;
margin: 0 auto;
padding: var(--space-8) var(--space-5) var(--space-16);
}
@media (max-width: 600px) {
.app {
padding: var(--space-5) var(--space-4) var(--space-16);
}
}
web/styles/components.css
+430
View File
@@ -0,0 +1,430 @@
/* ============================================================
Components
============================================================ */
/* ----- Icon helper (x-html injected SVGs) ----- */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.icon svg {
display: block;
width: 1em;
height: 1em;
}
/* ----- Header ----- */
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-8);
}
.brand {
font-size: var(--text-2xl);
font-weight: 700;
letter-spacing: -0.4px;
color: var(--color-text);
}
.brand span {
color: var(--color-primary);
}
/* ----- Buttons ----- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: 500;
line-height: 1;
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast),
color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
white-space: nowrap;
user-select: none;
}
.btn:hover {
background: var(--color-surface-hover);
}
.btn:active {
transform: translateY(1px);
}
.btn-primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.btn-primary:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
}
.btn-danger {
color: var(--color-danger);
border-color: #fecaca;
}
.btn-danger:hover {
background: var(--color-danger-soft);
border-color: var(--color-danger);
}
.btn-ghost {
border-color: transparent;
background: transparent;
}
.btn-ghost:hover {
background: var(--color-surface-hover);
}
.btn-sm {
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
}
.btn-logout {
color: var(--color-text-secondary);
font-size: var(--text-sm);
}
.btn-logout:hover {
color: var(--color-text);
}
/* Icon-only button */
.btn-icon {
padding: var(--space-2);
color: var(--color-text-secondary);
}
.btn-icon:hover {
color: var(--color-text);
background: var(--color-surface-hover);
}
.btn-icon.btn-danger:hover {
color: var(--color-danger);
background: var(--color-danger-soft);
}
/* ----- Section (card) ----- */
.section {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-5);
overflow: hidden;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.section-header h2 {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-lg);
font-weight: 600;
}
.section-header h2 .icon {
font-size: 1.05em;
color: var(--color-primary);
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 var(--space-2);
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-secondary);
background: var(--color-bg);
border-radius: var(--radius-full);
}
/* ----- Drop zone ----- */
.drop-zone {
position: relative;
margin: var(--space-4) var(--space-5);
padding: var(--space-8) var(--space-5);
text-align: center;
border: 2px dashed var(--color-border-strong);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color var(--transition-base), background var(--transition-base);
}
.drop-zone:hover,
.drop-zone.is-dragover {
border-color: var(--color-primary);
background: var(--color-primary-soft);
}
.drop-zone-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.drop-zone-icon {
font-size: 1.6rem;
color: var(--color-text-tertiary);
margin-bottom: var(--space-2);
transition: color var(--transition-base);
}
.drop-zone:hover .drop-zone-icon,
.drop-zone.is-dragover .drop-zone-icon {
color: var(--color-primary);
}
.drop-zone-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.drop-zone-text strong {
color: var(--color-primary);
font-weight: 600;
}
/* ----- File list ----- */
.file-list {
list-style: none;
}
.file-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid #f3f4f6;
transition: background var(--transition-fast);
}
.file-row:last-child {
border-bottom: none;
}
.file-row:hover {
background: var(--color-surface-hover);
}
.file-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
font-size: 18px;
color: var(--color-primary);
background: var(--color-primary-soft);
border-radius: var(--radius-md);
}
.file-info {
flex: 1;
min-width: 0;
}
.file-name {
font-size: var(--text-sm);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-actions {
display: flex;
gap: var(--space-1);
flex-shrink: 0;
opacity: 0;
transition: opacity var(--transition-fast);
}
.file-row:hover .file-actions,
.file-row:focus-within .file-actions {
opacity: 1;
}
/* ----- Empty state ----- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-10) var(--space-5);
text-align: center;
color: var(--color-text-secondary);
}
.empty-state-icon {
font-size: 2rem;
color: var(--color-text-tertiary);
opacity: 0.6;
}
.empty-state-text {
font-size: var(--text-sm);
}
/* ----- Toast ----- */
.toast {
position: fixed;
left: 50%;
bottom: var(--space-6);
transform: translateX(-50%) translateY(120%);
padding: var(--space-3) var(--space-5);
font-size: var(--text-sm);
font-weight: 500;
color: #fff;
background: var(--color-text);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
z-index: var(--z-toast);
transition: transform var(--transition-slow), opacity var(--transition-slow);
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
* {
transition-duration: 0.01ms !important;
}
}
/* ----- Modal (confirmation dialog) ----- */
.modal-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
background: rgba(16, 24, 40, 0.45);
backdrop-filter: blur(2px);
z-index: var(--z-modal);
}
.modal {
width: 100%;
max-width: 380px;
padding: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.modal-title {
font-size: var(--text-lg);
font-weight: 600;
margin-bottom: var(--space-2);
}
.modal-body {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
}
/* ----- Login ----- */
.login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: var(--space-5);
}
.login-card {
width: 100%;
max-width: 380px;
padding: var(--space-10) var(--space-8);
text-align: center;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.login-card h1 {
font-size: var(--text-2xl);
font-weight: 700;
margin-bottom: var(--space-1);
}
.login-card h1 span {
color: var(--color-primary);
}
.login-card p {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}
.login-card form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.login-card input {
width: 100%;
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.login-card input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.login-card .btn-primary {
justify-content: center;
padding: var(--space-3);
font-size: var(--text-base);
}
.login-error {
display: none;
font-size: var(--text-sm);
color: var(--color-danger);
}
.login-error.show {
display: block;
}
/* ----- Responsive ----- */
@media (max-width: 600px) {
.section-header {
padding: var(--space-3) var(--space-4);
}
.file-row {
padding: var(--space-3) var(--space-4);
}
.file-actions {
opacity: 1;
}
.drop-zone {
margin: var(--space-3) var(--space-4);
}
.login-card {
padding: var(--space-8) var(--space-5);
}
}
web/styles/tokens.css
+63
View File
@@ -0,0 +1,63 @@
:root {
/* ===== Color ===== */
--color-bg: #f4f5f7;
--color-bg-gradient: radial-gradient(1200px 600px at 50% -10%, #eef2ff 0%, var(--color-bg) 55%);
--color-surface: #ffffff;
--color-surface-hover: #fafbfc;
--color-border: #e6e8ec;
--color-border-strong: #d4d8df;
--color-text: #1a1d23;
--color-text-secondary: #6b7280;
--color-text-tertiary: #9aa1ad;
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-primary-soft: #eff6ff;
--color-danger: #ef4444;
--color-danger-hover: #dc2626;
--color-danger-soft: #fef2f2;
--color-success: #10b981;
/* ===== Spacing (4px base) ===== */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-16: 4rem;
/* ===== Radius ===== */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-full: 9999px;
/* ===== Shadow ===== */
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
--shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
--shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.14);
/* ===== Typography ===== */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
/* ===== Motion ===== */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
/* ===== z-index ===== */
--z-toast: 1000;
--z-modal: 1100;
}
web/web.go
+1 -1
View File
@@ -2,5 +2,5 @@ package web
import "embed"
//go:embed login.html index.html style.css app.js alpine.min.js
//go:embed login.html index.html alpine.min.js components styles
var FS embed.FS