history: add auto delete

static/css/settings.css

@@ -67,4 +67,22 @@
 
 .settings-section .form-textarea {
     font-size: 0.85rem;
+}
+
+.settings-sub-row {
+    padding-left: 18px;
+    opacity: 0.35;
+    pointer-events: none;
+    transition: opacity 0.15s;
+}
+
+.settings-sub-row.enabled {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.settings-inline-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
 }

static/js/history.js

@@ -14,6 +14,24 @@ window.NAIHistory = {
     loadingMore: false,
     gridContainer: null,
 
+    // ── Prune history based on user settings ──
+    async pruneHistory() {
+        if (!window.NAISettings) return;
+        const unitMs = { minute: 60000, hour: 3600000, day: 86400000 };
+
+        if (NAISettings.get('historyMaxAgeEnabled')) {
+            const age = NAISettings.get('historyMaxAge') || 7;
+            const unit = NAISettings.get('historyMaxAgeUnit') || 'day';
+            const cutoff = Date.now() - age * (unitMs[unit] || 86400000);
+            await NAIIDB.deleteHistoryBefore(cutoff).catch(e => console.error('prune by age failed:', e));
+        }
+
+        if (NAISettings.get('historyMaxCountEnabled')) {
+            const maxCount = Math.max(1, NAISettings.get('historyMaxCount') || 1000);
+            await NAIIDB.deleteHistoryKeepLatest(maxCount).catch(e => console.error('prune by count failed:', e));
+        }
+    },
+
     // ── Save with PNG info extraction for search ──
     async saveWithSearch(imageB64, source, extraParams) {
         let searchText = '';
@@ -75,6 +93,7 @@ window.NAIHistory = {
                 imageB64,
                 searchText,
             });
+            await this.pruneHistory();
         } catch(e) {
             console.error('Failed to save history:', e);
         }
@@ -88,6 +107,8 @@ window.NAIHistory = {
         this.allLoaded = false;
         this.loadingMore = false;
 
+        await this.pruneHistory();
+
         try {
             this.totalCount = await NAIIDB.getHistoryCount();
         } catch (e) {

static/js/idb.js

@@ -139,5 +139,39 @@ window.NAIIDB = (() => {
                 tx.onerror = () => reject(tx.error);
             });
         },
+
+        async deleteHistoryBefore(cutoff) {
+            const db = await openDB();
+            return new Promise((resolve, reject) => {
+                const tx = db.transaction('history', 'readwrite');
+                const store = tx.objectStore('history');
+                const range = IDBKeyRange.upperBound(cutoff, true);
+                const req = store.index('timestamp').openCursor(range);
+                req.onsuccess = (e) => {
+                    const cursor = e.target.result;
+                    if (cursor) { cursor.delete(); cursor.continue(); }
+                };
+                req.onerror = () => reject(req.error);
+                tx.oncomplete = () => resolve();
+                tx.onerror = () => reject(tx.error);
+            });
+        },
+
+        async deleteHistoryKeepLatest(maxCount) {
+            const db = await openDB();
+            return new Promise((resolve, reject) => {
+                const tx = db.transaction('history', 'readwrite');
+                const store = tx.objectStore('history');
+                const keysReq = store.index('timestamp').getAllKeys();
+                keysReq.onsuccess = () => {
+                    const keys = keysReq.result;
+                    const toDelete = keys.length - maxCount;
+                    for (let i = 0; i < toDelete; i++) store.delete(keys[i]);
+                };
+                keysReq.onerror = () => reject(keysReq.error);
+                tx.oncomplete = () => resolve();
+                tx.onerror = () => reject(tx.error);
+            });
+        },
     };
 })();

static/js/settings.js

@@ -27,6 +27,11 @@ window.NAISettings = {
 
         // History
         clearHistoryOnRefresh: true,
+        historyMaxAgeEnabled: false,
+        historyMaxAge: 7,
+        historyMaxAgeUnit: 'day',
+        historyMaxCountEnabled: false,
+        historyMaxCount: 1000,
 
         // Cloud
         saveToCloud: true,
@@ -220,6 +225,12 @@ window.NAISettings = {
 
         // History
         $('#setting-clear-history').checked = s.clearHistoryOnRefresh;
+        $('#setting-history-max-age-enabled').checked = s.historyMaxAgeEnabled;
+        $('#setting-history-max-age').value = s.historyMaxAge;
+        $('#setting-history-max-age-unit').value = s.historyMaxAgeUnit;
+        $('#setting-history-max-count-enabled').checked = s.historyMaxCountEnabled;
+        $('#setting-history-max-count').value = s.historyMaxCount;
+        this._updateHistorySubRows();
 
         // Cloud
         $('#setting-save-cloud').checked = s.saveToCloud;
@@ -278,6 +289,11 @@ window.NAISettings = {
 
         // History
         bind('setting-clear-history', 'clearHistoryOnRefresh', 'check');
+        bind('setting-history-max-age-enabled', 'historyMaxAgeEnabled', 'check');
+        bind('setting-history-max-age', 'historyMaxAge', 'int');
+        bind('setting-history-max-age-unit', 'historyMaxAgeUnit');
+        bind('setting-history-max-count-enabled', 'historyMaxCountEnabled', 'check');
+        bind('setting-history-max-count', 'historyMaxCount', 'int');
 
         // Cloud
         bind('setting-save-cloud', 'saveToCloud', 'check');
@@ -322,10 +338,18 @@ window.NAISettings = {
         });
     },
 
+    _updateHistorySubRows() {
+        const ageRow = $('#setting-history-max-age-row');
+        if (ageRow) ageRow.classList.toggle('enabled', !!this.get('historyMaxAgeEnabled'));
+        const countRow = $('#setting-history-max-count-row');
+        if (countRow) countRow.classList.toggle('enabled', !!this.get('historyMaxCountEnabled'));
+    },
+
     _onSettingChanged(key, value) {
         if (key === 'theme') this.applyTheme();
         if (key === 'saveToCloud') this.applyCloudCheckbox();
         if (key === 'freeOnly') this._updateFreeOnlyState();
+        if (key === 'historyMaxAgeEnabled' || key === 'historyMaxCountEnabled') this._updateHistorySubRows();
     },
 
     _updateFreeOnlyState() {

templates/index.html

@@ -25,7 +25,7 @@
                 <div class="nav-item" data-page="cloud"><span class="nav-icon">☁️</span><span>云端图片浏览</span></div>
                 <div class="nav-item" data-page="settings"><span class="nav-icon">⚙️</span><span>设置</span></div>
             </nav>
-            <div class="sidebar-footer">NAI Studio v1.0.5</div>
+            <div class="sidebar-footer">NAI Studio v1.0.6</div>
         </aside>
 
         <!-- Main -->
@@ -840,6 +840,29 @@
                                     <label for="setting-clear-history">刷新后清空记录</label>
                                     <input type="checkbox" id="setting-clear-history" class="settings-checkbox">
                                 </div>
+                                <div class="settings-row">
+                                    <label for="setting-history-max-age-enabled">限制保留时间</label>
+                                    <input type="checkbox" id="setting-history-max-age-enabled" class="settings-checkbox">
+                                </div>
+                                <div class="settings-row settings-sub-row" id="setting-history-max-age-row">
+                                    <label>保留时间上限</label>
+                                    <div class="settings-inline-group">
+                                        <input type="number" id="setting-history-max-age" class="form-input" style="width:72px;" min="1" max="99999" value="7">
+                                        <select id="setting-history-max-age-unit" class="form-select" style="width:80px;">
+                                            <option value="minute">分钟</option>
+                                            <option value="hour">小时</option>
+                                            <option value="day" selected>天</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="settings-row">
+                                    <label for="setting-history-max-count-enabled">限制保留数量</label>
+                                    <input type="checkbox" id="setting-history-max-count-enabled" class="settings-checkbox">
+                                </div>
+                                <div class="settings-row settings-sub-row" id="setting-history-max-count-row">
+                                    <label>最多保留条数</label>
+                                    <input type="number" id="setting-history-max-count" class="form-input" style="width:96px;" min="1" max="65536" value="1000">
+                                </div>
                             </div>
 
                             <!-- Cloud -->