Building phase one
This commit is contained in:
334
publisher/app/app.vue
Normal file
334
publisher/app/app.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<header class="top-bar">
|
||||
<h1>Simple Publisher</h1>
|
||||
<button class="theme-toggle" @click="toggleDarkMode"
|
||||
:aria-label="darkMode ? 'Switch to light mode' : 'Switch to dark mode'">
|
||||
{{ darkMode ? 'Light Mode' : 'Dark Mode' }}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="layout">
|
||||
<Sidebar :sites="sites"
|
||||
:selected-id="selectedId"
|
||||
:pending-add="pendingAdd"
|
||||
@select-site="selectSite"
|
||||
@start-add="startAdd"
|
||||
@cancel-add="cancelAdd"
|
||||
@add-site="confirmAdd" />
|
||||
|
||||
<SettingsPanel v-if="selectedSite"
|
||||
:site="selectedSite"
|
||||
:last-saved="lastSaved"
|
||||
:site-id="selectedSite.id"
|
||||
@delete="deleteSelected"
|
||||
@preview="openPreview"
|
||||
@changed="handleEditChanged" />
|
||||
<SettingsEmpty v-else />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import Sidebar from './components/Sidebar.vue'
|
||||
import SettingsPanel from './components/SettingsPanel.vue'
|
||||
import SettingsEmpty from './components/SettingsEmpty.vue'
|
||||
|
||||
const API_BASE = import.meta.url.match(/^https?:\/\/[^/]+/)
|
||||
? `${location.protocol}//${location.host}`
|
||||
: ''
|
||||
|
||||
function api(url: string, options: RequestInit = {}) {
|
||||
return fetch(`${API_BASE}/api/sites${url}`, {
|
||||
headers: { 'Content-Type': 'application/json', ...options.headers },
|
||||
...options,
|
||||
})
|
||||
}
|
||||
|
||||
function genId() {
|
||||
return crypto.randomUUID?.() ?? Date.now().toString(36) + Math.random().toString(36).slice(2)
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'simple-publisher-sites'
|
||||
const THEME_KEY = 'simple-publisher-theme'
|
||||
|
||||
function defaultSite(name: string) {
|
||||
return {
|
||||
id: genId(),
|
||||
name,
|
||||
url: '',
|
||||
description: '',
|
||||
themeColor: '#2563eb',
|
||||
targetWindow: '_blank',
|
||||
enabled: true,
|
||||
}
|
||||
}
|
||||
|
||||
const darkMode = ref(false)
|
||||
|
||||
function toggleDarkMode() {
|
||||
darkMode.value = !darkMode.value
|
||||
applyClass()
|
||||
try { localStorage.setItem(THEME_KEY, darkMode.value ? 'dark' : 'light') } catch {}
|
||||
}
|
||||
|
||||
function applyClass() {
|
||||
document.documentElement.classList.toggle('dark', darkMode.value)
|
||||
}
|
||||
|
||||
const sites = ref<Array<{ _id: string; id: string; name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean }>>([])
|
||||
const selectedId = ref(null)
|
||||
const pendingAdd = ref(false)
|
||||
const lastSaved = ref('')
|
||||
|
||||
let newSites = new Map<string, any>()
|
||||
let dirtyEdits = new Map<string, any>()
|
||||
let loadTimer: ReturnType<typeof setTimeout> | null = null
|
||||
let lastSavedTimeout: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const selectedSite = computed(() => {
|
||||
return sites.value.find(s => s.id === selectedId.value) || null
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const saved = localStorage.getItem(THEME_KEY)
|
||||
if (saved === 'dark' || saved === 'light') {
|
||||
darkMode.value = saved === 'dark'
|
||||
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
darkMode.value = true
|
||||
}
|
||||
} catch {}
|
||||
|
||||
applyClass()
|
||||
|
||||
try {
|
||||
const res = await api('/')
|
||||
if (res.ok) {
|
||||
sites.value = await res.json()
|
||||
return
|
||||
}
|
||||
} catch {}
|
||||
|
||||
const stored = localStorage.getItem(STORAGE_KEY)
|
||||
if (stored) {
|
||||
sites.value = JSON.parse(stored)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
loadTimer = setInterval(async () => {
|
||||
try {
|
||||
const res = await api('/')
|
||||
if (res.ok) {
|
||||
const sitesFromServer = await res.json()
|
||||
sites.value = sitesFromServer.map((serverSite: any) => {
|
||||
if (dirtyEdits.has(serverSite.id)) {
|
||||
return { ...serverSite, ...dirtyEdits.get(serverSite.id) }
|
||||
}
|
||||
return serverSite
|
||||
})
|
||||
}
|
||||
} catch {}
|
||||
}, 5000)
|
||||
})
|
||||
|
||||
async function refreshSites() {
|
||||
try {
|
||||
const res = await api('/')
|
||||
if (res.ok) {
|
||||
sites.value = await res.json()
|
||||
}
|
||||
} catch {
|
||||
// keep local state on network failure
|
||||
}
|
||||
}
|
||||
|
||||
async function saveSite(site: any) {
|
||||
try {
|
||||
const serverSite = sites.value.find(s => s.id === site.id)
|
||||
const res = await api(`/${encodeURIComponent(site.id)}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({
|
||||
name: site.name,
|
||||
url: site.url,
|
||||
description: site.description,
|
||||
themeColor: site.themeColor,
|
||||
targetWindow: site.targetWindow,
|
||||
enabled: site.enabled,
|
||||
}),
|
||||
})
|
||||
if (res.ok) {
|
||||
const updated = await res.json()
|
||||
lastSaved.value = 'Updated at ' + new Date().toLocaleTimeString()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
async function bulkSave() {
|
||||
const allEntries = [...newSites.entries(), ...dirtyEdits.entries()]
|
||||
for (const [, site] of allEntries) {
|
||||
await saveSite(site)
|
||||
}
|
||||
newSites.clear()
|
||||
dirtyEdits.clear()
|
||||
try {
|
||||
await refreshSites()
|
||||
} catch {}
|
||||
lastSaved.value = 'Updated at ' + new Date().toLocaleTimeString()
|
||||
|
||||
if (lastSavedTimeout) clearTimeout(lastSavedTimeout)
|
||||
lastSavedTimeout = setTimeout(() => {
|
||||
lastSaved.value = ''
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
async function handleEditChanged(site: { id: string; name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean }) {
|
||||
if (newSites.has(site.id)) {
|
||||
newSites.set(site.id, site)
|
||||
} else {
|
||||
dirtyEdits.set(site.id, site)
|
||||
}
|
||||
}
|
||||
|
||||
function selectSite(site: { id: string; name: string; enabled: boolean }) {
|
||||
if (selectedId.value && dirtyEdits.has(selectedId.value)) {
|
||||
bulkSave()
|
||||
}
|
||||
selectedId.value = site.id
|
||||
}
|
||||
|
||||
function startAdd() {
|
||||
pendingAdd.value = true
|
||||
}
|
||||
|
||||
async function confirmAdd(name: string) {
|
||||
const trimmed = name.trim()
|
||||
if (!trimmed) return
|
||||
const site = defaultSite(trimmed)
|
||||
|
||||
try {
|
||||
const res = await api('/', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(site),
|
||||
})
|
||||
if (res.ok) {
|
||||
const created = await res.json()
|
||||
sites.value.unshift(created)
|
||||
pendingAdd.value = false
|
||||
selectedId.value = created.id
|
||||
lastSaved.value = 'Updated at ' + new Date().toLocaleTimeString()
|
||||
|
||||
if (lastSavedTimeout) clearTimeout(lastSavedTimeout)
|
||||
lastSavedTimeout = setTimeout(() => {
|
||||
lastSaved.value = ''
|
||||
}, 3000)
|
||||
return
|
||||
}
|
||||
} catch {}
|
||||
|
||||
sites.value.unshift(site)
|
||||
pendingAdd.value = false
|
||||
selectedId.value = site.id
|
||||
try { saveSites() } catch {}
|
||||
}
|
||||
|
||||
function cancelAdd() {
|
||||
pendingAdd.value = false
|
||||
}
|
||||
|
||||
async function removeSite(index: number) {
|
||||
const site = sites.value[index]
|
||||
newSites.delete(site.id)
|
||||
dirtyEdits.delete(site.id)
|
||||
try {
|
||||
const res = await api(`/${encodeURIComponent(site.id)}`, { method: 'DELETE' })
|
||||
if (res.ok) await res.json()
|
||||
} catch {}
|
||||
if (site.id === selectedId.value) selectedId.value = null
|
||||
sites.value.splice(index, 1)
|
||||
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(sites.value)) } catch {}
|
||||
}
|
||||
|
||||
async function deleteSelected() {
|
||||
if (!selectedSite.value) return
|
||||
const idx = sites.value.findIndex(s => s.id === selectedSite.value!.id)
|
||||
if (idx !== -1) await removeSite(idx)
|
||||
}
|
||||
|
||||
function openPreview() {
|
||||
const site = selectedSite.value
|
||||
if (!site?.url) return
|
||||
let url = site.url.trim()
|
||||
if (!/^https?:\/\//i.test(url)) url = 'https://' + url
|
||||
window.open(url, site.targetWindow || '_blank')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: var(--cancel-bg);
|
||||
border-color: var(--border-input);
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: background 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
#__nuxt {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user