coder/vision-record
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: v1.1.0 - 图片按日期分文件夹保存、设置面板、序号显示模式、自动刷新

Browse Source
This commit is contained in:
hubian
2026-04-16 10:42:36 +08:00
parent 3503ee35ab
commit f703c0491c
9 changed files with 639 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
web/static/index.html
View File

@@ -14,6 +14,7 @@
<div class="status-bar">
<span id="scheduler-status">状态: 加载中...</span>
<span id="capture-count">拍照次数: 0</span>
<span id="refresh-info">刷新间隔: 5秒</span>
</div>
</header>
@@ -21,15 +22,6 @@
<section class="control-panel">
<div class="panel-section">
<h3>📹 摄像头控制</h3>
<div class="control-row">
<label>拍照间隔 (秒):</label>
<input type="number" id="interval-input" value="60" min="10" max="3600">
<button onclick="setInterval()">设置</button>
</div>
<div class="control-row">
<label>自动分析:</label>
<input type="checkbox" id="auto-analyze" checked>
</div>
<div class="control-buttons">
<button onclick="startScheduler()" id="start-btn" class="btn-primary">▶ 启动</button>
<button onclick="stopScheduler()" id="stop-btn" class="btn-danger">⏹ 停止</button>
@@ -37,6 +29,11 @@
</div>
</div>
<div class="panel-section">
<h3>⚙️ 系统设置</h3>
<button onclick="openSettingsModal()" class="btn-settings">🔧 设置参数</button>
</div>
<div class="panel-section">
<h3>📊 系统统计</h3>
<div class="stats-grid" id="stats-display">
@@ -62,15 +59,18 @@
<section class="images-section">
<h2>📷 图片时间线</h2>
<div class="filter-bar">
<select id="date-filter">
<option value="all">全部日期</option>
</select>
<select id="image-filter">
<option value="all">全部</option>
<option value="analyzed">已分析</option>
<option value="unanalyzed">未分析</option>
</select>
<button onclick="analyzeUnanalyzed()" class="btn-small">分析未分析图片</button>
<button onclick="analyzeUnanalyzed()" class="btn-small">分析未处理</button>
</div>
<div class="images-grid" id="images-grid">
<!-- 图片卡片将通过 JS 动态加载 -->
<div class="images-list" id="images-list">
<!-- 图片列表将显示序号+分析信息 -->
</div>
</section>
@@ -80,25 +80,91 @@
<div class="filter-bar">
<select id="event-filter">
<option value="all">全部类型</option>
<!-- 动态加载事件类型 -->
</select>
</div>
<div class="events-list" id="events-list">
<!-- 事件卡片将通过 JS 动态加载 -->
<!-- 事件卡片 -->
</div>
</section>
</div>
<!-- 设置模态框 -->
<div class="modal" id="settings-modal">
<div class="modal-content settings-modal-content">
<span class="modal-close" onclick="closeSettingsModal()">×</span>
<h2>⚙️ 系统设置</h2>
<div class="settings-section">
<h4>保存设置</h4>
<div class="setting-item">
<label>图片保存目录:</label>
<input type="text" id="setting-images-dir" placeholder="例如: D:\vision-images">
<button onclick="browseImagesDir()" class="btn-small">选择目录</button>
</div>
<p class="setting-note">每天的图片会自动保存到子文件夹（如 2026-04-16）</p>
</div>
<div class="settings-section">
<h4>拍照设置</h4>
<div class="setting-item">
<label>拍照间隔 (秒):</label>
<input type="number" id="setting-interval" value="60" min="10" max="3600">
</div>
<div class="setting-item">
<label>摄像头索引:</label>
<input type="number" id="setting-camera-index" value="0" min="0" max="10">
</div>
<div class="setting-item">
<label>自动分析:</label>
<input type="checkbox" id="setting-auto-analyze" checked>
</div>
</div>
<div class="settings-section">
<h4>显示设置</h4>
<div class="setting-item">
<label>显示最近数量:</label>
<input type="number" id="setting-display-limit" value="20" min="5" max="100">
</div>
<div class="setting-item">
<label>页面刷新间隔 (秒):</label>
<input type="number" id="setting-refresh-interval" value="5" min="1" max="60">
</div>
</div>
<div class="settings-section">
<h4>API 设置</h4>
<div class="setting-item">
<label>Vision API URL:</label>
<input type="text" id="setting-api-url" placeholder="API URL">
</div>
<div class="setting-item">
<label>API Key:</label>
<input type="password" id="setting-api-key" placeholder="API Key">
</div>
<div class="setting-item">
<label>模型名称:</label>
<input type="text" id="setting-model" placeholder="模型名称">
</div>
</div>
<div class="settings-actions">
<button onclick="saveSettings()" class="btn-primary">保存设置</button>
<button onclick="closeSettingsModal()" class="btn-secondary">取消</button>
</div>
</div>
</div>
<!-- 图片详情模态框 -->
<div class="modal" id="image-modal">
<div class="modal-content">
<span class="modal-close" onclick="closeModal()">×</span>
<span class="modal-close" onclick="closeImageModal()">×</span>
<img id="modal-image" src="" alt="图片详情">
<div class="modal-info">
<h3 id="modal-title">图片详情</h3>
<p id="modal-time">时间: </p>
<p id="modal-folder">日期文件夹: </p>
<div id="modal-events" class="modal-events">
<!-- 事件详情 -->
</div>
<div class="modal-actions">
<button onclick="analyzeCurrentImage()" class="btn-secondary">🔍 分析</button>