feat(web): add i18n, light/dark theme switching, and version constant
- Add i18n (English + 简体中文) with a locale store, $t() magic, and a language toggle (persisted) - Add light/dark/system theme switching via a theme store and [data-theme] token overrides - Set the theme before paint to avoid a flash of the wrong theme - Add frontend version constant web/version.js (window.YDROPBX_VERSION) shown in the app footer - Update AGENTS.md version-control convention to mention web/version.js - Bump version to 0.1.1 across frontend, webui changelog, and backend constant
This commit is contained in:
+49
-18
@@ -8,8 +8,22 @@
|
||||
<link rel="stylesheet" href="/styles/base.css">
|
||||
<link rel="stylesheet" href="/styles/components.css">
|
||||
|
||||
<!-- Set the theme before paint to avoid a flash of the wrong theme. -->
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var t = localStorage.getItem('yd.theme') || 'system';
|
||||
var dark = t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Components register themselves on `alpine:init`; Alpine is loaded last. -->
|
||||
<script defer src="/components/icons.js"></script>
|
||||
<script defer src="/version.js"></script>
|
||||
<script defer src="/components/i18n.js"></script>
|
||||
<script defer src="/components/theme.js"></script>
|
||||
<script defer src="/components/store.js"></script>
|
||||
<script defer src="/components/fileSection.js"></script>
|
||||
<script defer src="/components/confirm.js"></script>
|
||||
@@ -19,10 +33,22 @@
|
||||
<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>
|
||||
<div class="header-actions">
|
||||
<button class="btn btn-icon" type="button"
|
||||
@click="$store.locale.toggle()"
|
||||
:title="$t('lang.label')" :aria-label="$t('lang.label')">
|
||||
<span class="icon" x-html="Icons.globe"></span>
|
||||
</button>
|
||||
<button class="btn btn-icon" type="button"
|
||||
@click="$store.theme.cycle()"
|
||||
:title="$t('theme.' + $store.theme.mode)" :aria-label="$t('theme.' + $store.theme.mode)">
|
||||
<span class="icon" x-html="Icons[$store.theme.icon()]"></span>
|
||||
</button>
|
||||
<button class="btn btn-ghost btn-logout" @click="$store.files.logout()">
|
||||
<span class="icon" x-html="Icons.logout"></span>
|
||||
<span x-text="$t('nav.logout')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
@@ -43,13 +69,13 @@
|
||||
@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 class="drop-zone-text"><strong x-text="$t('dropzone.click')"></strong> <span x-text="$t('dropzone.rest')"></span></div>
|
||||
</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 class="empty-state-text" x-text="$t('empty.' + dir)"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -61,13 +87,13 @@
|
||||
<div class="file-name" x-text="file.name"></div>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<button class="btn btn-icon" @click="$store.files.download(file.id)" title="Download">
|
||||
<button class="btn btn-icon" @click="$store.files.download(file.id)" :title="$t('action.download')">
|
||||
<span class="icon" x-html="Icons.download"></span>
|
||||
</button>
|
||||
<button class="btn btn-icon" x-show="canShare" @click="$store.files.share(file.id)" title="Share">
|
||||
<button class="btn btn-icon" x-show="canShare" @click="$store.files.share(file.id)" :title="$t('action.share')">
|
||||
<span class="icon" x-html="Icons.share"></span>
|
||||
</button>
|
||||
<button class="btn btn-icon btn-danger" @click="$store.files.deleteFile(file.id)" title="Delete">
|
||||
<button class="btn btn-icon btn-danger" @click="$store.files.deleteFile(file.id)" :title="$t('action.delete')">
|
||||
<span class="icon" x-html="Icons.trash"></span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -93,13 +119,13 @@
|
||||
@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 class="drop-zone-text"><strong x-text="$t('dropzone.click')"></strong> <span x-text="$t('dropzone.rest')"></span></div>
|
||||
</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 class="empty-state-text" x-text="$t('empty.' + dir)"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -111,10 +137,10 @@
|
||||
<div class="file-name" x-text="file.name"></div>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<button class="btn btn-icon" @click="$store.files.download(file.id)" title="Download">
|
||||
<button class="btn btn-icon" @click="$store.files.download(file.id)" :title="$t('action.download')">
|
||||
<span class="icon" x-html="Icons.download"></span>
|
||||
</button>
|
||||
<button class="btn btn-icon btn-danger" @click="$store.files.deleteFile(file.id)" title="Delete">
|
||||
<button class="btn btn-icon btn-danger" @click="$store.files.deleteFile(file.id)" :title="$t('action.delete')">
|
||||
<span class="icon" x-html="Icons.trash"></span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -141,20 +167,25 @@
|
||||
@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>
|
||||
:aria-label="$t(title)">
|
||||
<h3 class="modal-title" x-text="$t(title)"></h3>
|
||||
<p class="modal-body" x-text="$t(message)"></p>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-ghost" type="button" @click="cancel()">Cancel</button>
|
||||
<button class="btn btn-ghost" type="button" @click="cancel()" x-text="$t('confirm.cancel')"></button>
|
||||
<button class="btn"
|
||||
:class="danger ? 'btn-danger' : 'btn-primary'"
|
||||
type="button"
|
||||
x-ref="accept"
|
||||
@click="accept()"
|
||||
x-text="danger ? 'Delete' : 'Confirm'"></button>
|
||||
x-text="$t(danger ? 'confirm.delete' : 'confirm.confirm')"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">
|
||||
<span class="app-footer-brand">yDropbox</span>
|
||||
<span class="app-footer-version" x-text="'v' + YDROPBX_VERSION"></span>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user