refactor: 数据库迁移到 ~/.showpic.db
This commit is contained in:
yinzhou.ma
+10
-88
@@ -20,17 +20,6 @@
|
|||||||
|
|
||||||
.content { padding: 30px; }
|
.content { padding: 30px; }
|
||||||
|
|
||||||
.group-label {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.group-label .countdown {
|
|
||||||
color: #1890ff;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-grid {
|
.image-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -53,49 +42,25 @@
|
|||||||
color: #999;
|
color: #999;
|
||||||
padding: 80px 0;
|
padding: 80px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicator {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.indicator .dot {
|
|
||||||
width: 8px; height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #ddd;
|
|
||||||
}
|
|
||||||
.indicator .dot.active {
|
|
||||||
background: #1890ff;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">首页</div>
|
||||||
首页
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div id="groupLabel" class="group-label" style="display:none;">
|
|
||||||
<span id="groupName"></span>
|
|
||||||
<span id="countdown" class="countdown"></span>
|
|
||||||
</div>
|
|
||||||
<div class="image-grid" id="imageGrid"></div>
|
<div class="image-grid" id="imageGrid"></div>
|
||||||
<div class="empty" id="empty">暂无图片</div>
|
<div class="empty" id="empty">暂无图片</div>
|
||||||
<div class="indicator" id="indicator"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let ws;
|
var ws;
|
||||||
let countdownTimer = null;
|
|
||||||
let remaining = 0;
|
|
||||||
|
|
||||||
function connectWS() {
|
function connectWS() {
|
||||||
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
var protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
ws = new WebSocket(protocol + '//' + location.host);
|
ws = new WebSocket(protocol + '//' + location.host);
|
||||||
|
|
||||||
ws.onmessage = function(e) {
|
ws.onmessage = function(e) {
|
||||||
try {
|
try {
|
||||||
const data = JSON.parse(e.data);
|
var data = JSON.parse(e.data);
|
||||||
if (data.type === 'state') renderState(data);
|
if (data.type === 'state') renderState(data);
|
||||||
} catch(err) {}
|
} catch(err) {}
|
||||||
};
|
};
|
||||||
@@ -106,37 +71,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function renderState(state) {
|
function renderState(state) {
|
||||||
const grid = document.getElementById('imageGrid');
|
var grid = document.getElementById('imageGrid');
|
||||||
const empty = document.getElementById('empty');
|
var empty = document.getElementById('empty');
|
||||||
const groupLabel = document.getElementById('groupLabel');
|
|
||||||
const indicator = document.getElementById('indicator');
|
|
||||||
|
|
||||||
if (!state.playing || state.images.length === 0) {
|
if (!state.playing || state.images.length === 0) {
|
||||||
grid.innerHTML = '';
|
grid.innerHTML = '';
|
||||||
empty.style.display = 'block';
|
empty.style.display = 'block';
|
||||||
groupLabel.style.display = 'none';
|
|
||||||
indicator.innerHTML = '';
|
|
||||||
if (countdownTimer) { clearInterval(countdownTimer); countdownTimer = null; }
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
empty.style.display = 'none';
|
empty.style.display = 'none';
|
||||||
groupLabel.style.display = 'block';
|
|
||||||
document.getElementById('groupName').textContent = state.group_name + ' ';
|
|
||||||
|
|
||||||
remaining = state.remaining;
|
|
||||||
updateCountdownDisplay();
|
|
||||||
if (countdownTimer) clearInterval(countdownTimer);
|
|
||||||
if (remaining > 0) {
|
|
||||||
countdownTimer = setInterval(function() {
|
|
||||||
remaining--;
|
|
||||||
if (remaining <= 0) {
|
|
||||||
clearInterval(countdownTimer);
|
|
||||||
countdownTimer = null;
|
|
||||||
}
|
|
||||||
updateCountdownDisplay();
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
grid.innerHTML = '';
|
grid.innerHTML = '';
|
||||||
state.images.forEach(function(img) {
|
state.images.forEach(function(img) {
|
||||||
@@ -148,7 +92,10 @@
|
|||||||
var pressTimer;
|
var pressTimer;
|
||||||
imgEl.addEventListener('touchstart', function() {
|
imgEl.addEventListener('touchstart', function() {
|
||||||
pressTimer = setTimeout(function() {
|
pressTimer = setTimeout(function() {
|
||||||
saveImage('/uploads/' + img.filename, img.original_name);
|
var a = document.createElement('a');
|
||||||
|
a.href = '/uploads/' + img.filename;
|
||||||
|
a.download = img.original_name || 'image.jpg';
|
||||||
|
a.click();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
});
|
});
|
||||||
imgEl.addEventListener('touchend', function() { clearTimeout(pressTimer); });
|
imgEl.addEventListener('touchend', function() { clearTimeout(pressTimer); });
|
||||||
@@ -156,31 +103,6 @@
|
|||||||
div.appendChild(imgEl);
|
div.appendChild(imgEl);
|
||||||
grid.appendChild(div);
|
grid.appendChild(div);
|
||||||
});
|
});
|
||||||
|
|
||||||
indicator.innerHTML = '';
|
|
||||||
for (var i = 0; i < state.total; i++) {
|
|
||||||
var dot = document.createElement('div');
|
|
||||||
dot.className = 'dot' + (i === state.current_index ? ' active' : '');
|
|
||||||
indicator.appendChild(dot);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCountdownDisplay() {
|
|
||||||
var el = document.getElementById('countdown');
|
|
||||||
if (remaining < 0) {
|
|
||||||
el.textContent = '持续展示';
|
|
||||||
} else if (remaining > 0) {
|
|
||||||
el.textContent = remaining + '秒';
|
|
||||||
} else {
|
|
||||||
el.textContent = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveImage(url, name) {
|
|
||||||
var a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
a.download = name || 'image.jpg';
|
|
||||||
a.click();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
connectWS();
|
connectWS();
|
||||||
|
|||||||
+1
-10
@@ -7,16 +7,7 @@
|
|||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
|
||||||
<div class="container">
|
|
||||||
<h1>图片资源管理</h1>
|
|
||||||
<nav>
|
|
||||||
<a href="/">首页</a>
|
|
||||||
<a href="/login">登录</a>
|
|
||||||
<a href="/admin">管理</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="container">
|
<main class="container">
|
||||||
<div class="login-form">
|
<div class="login-form">
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
const express = require('express');
|
const express = require('express');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
const os = require('os');
|
||||||
const multer = require('multer');
|
const multer = require('multer');
|
||||||
const initSqlJs = require('sql.js');
|
const initSqlJs = require('sql.js');
|
||||||
const { v4: uuidv4 } = require('uuid');
|
const { v4: uuidv4 } = require('uuid');
|
||||||
@@ -11,11 +12,12 @@ const FRONT_PORT = 80;
|
|||||||
|
|
||||||
let db;
|
let db;
|
||||||
|
|
||||||
|
const DB_PATH = path.join(os.homedir(), '.showpic.db');
|
||||||
|
|
||||||
async function initDB() {
|
async function initDB() {
|
||||||
const SQL = await initSqlJs();
|
const SQL = await initSqlJs();
|
||||||
const dbPath = path.join(__dirname, 'data', 'sqlite.db');
|
if (fs.existsSync(DB_PATH)) {
|
||||||
if (fs.existsSync(dbPath)) {
|
db = new SQL.Database(fs.readFileSync(DB_PATH));
|
||||||
db = new SQL.Database(fs.readFileSync(dbPath));
|
|
||||||
} else {
|
} else {
|
||||||
db = new SQL.Database();
|
db = new SQL.Database();
|
||||||
}
|
}
|
||||||
@@ -42,7 +44,7 @@ async function initDB() {
|
|||||||
|
|
||||||
function saveDB() {
|
function saveDB() {
|
||||||
const data = db.export();
|
const data = db.export();
|
||||||
fs.writeFileSync(path.join(__dirname, 'data', 'sqlite.db'), Buffer.from(data));
|
fs.writeFileSync(DB_PATH, Buffer.from(data));
|
||||||
}
|
}
|
||||||
|
|
||||||
function runQuery(sql, params) {
|
function runQuery(sql, params) {
|
||||||
|
|||||||
Reference in New Issue
Block a user