v10: 修影院编辑回填布尔化 bug；评分改 10 星制；观影人改弹窗+拼音首字母联想；豆瓣自动补充迁移（movie_details.douban_meta，schema v10）
This commit is contained in:
+298
-7
@@ -44,7 +44,22 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
|
||||
<div class="form-grid">
|
||||
<div class="field full">
|
||||
<label for="title">片名 *</label>
|
||||
<input class="input" id="title" name="title" value="<?= e(old('title', $m['title'] ?? '')) ?>" required>
|
||||
<div class="db-title-row">
|
||||
<input class="input" id="title" name="title" value="<?= e(old('title', $m['title'] ?? '')) ?>"
|
||||
required autocomplete="off">
|
||||
<button type="button" class="btn btn-ghost btn-sm" id="dbFetch"
|
||||
title="按片名从豆瓣抓取片名、简介、海报等">📡 自动获取</button>
|
||||
</div>
|
||||
<?php /* v10 豆瓣自动补充：输入片名出下拉候选，点「自动获取」直接抓。
|
||||
抓到的元数据整体进隐藏 douban_meta（JSON），海报走服务端落盘的 poster_key。 */ ?>
|
||||
<div class="db-suggest" id="dbSuggest" hidden></div>
|
||||
<input type="hidden" name="douban_meta" id="dbMeta" value="">
|
||||
<input type="hidden" name="poster_key" id="dbPosterKey" value="">
|
||||
<div class="db-poster-preview" id="dbPosterWrap" hidden>
|
||||
<img id="dbPosterImg" alt="海报预览">
|
||||
<span class="tip">海报已从豆瓣取回，保存后生效。</span>
|
||||
</div>
|
||||
<span class="tip">片名可从豆瓣自动补充：输入后从下拉里选，或点「自动获取」。</span>
|
||||
<?php if (!empty($errors['title'])): ?><span class="err"><?= e($errors['title']) ?></span><?php endif; ?>
|
||||
</div>
|
||||
|
||||
@@ -80,16 +95,42 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
|
||||
|
||||
<div class="field full">
|
||||
<label>同行的人</label>
|
||||
<?php /* v10：名册人多时 checkbox 网格会拉得很长 —— 改为「chips + 弹窗选择」。
|
||||
attendees[] 的 checkbox 仍保留（在弹窗列表里，选中即提交），无 JS 时
|
||||
借 noscript 样式把弹窗平铺成普通勾选列表，提交语义完全不变。 */ ?>
|
||||
<?php if ($people): ?>
|
||||
<div class="feel-grid">
|
||||
<div class="att-chips" id="attChips">
|
||||
<?php foreach ($people as $p): ?>
|
||||
<label class="feel-item">
|
||||
<input type="checkbox" name="attendees[]" value="<?= (int)$p['id'] ?>"
|
||||
<?= in_array((int)$p['id'], $selAttendees, true) ? 'checked' : '' ?>>
|
||||
<span><?= e($p['shown'] ?? $p['name']) ?></span>
|
||||
</label>
|
||||
<?php if (in_array((int)$p['id'], $selAttendees, true)): ?>
|
||||
<span class="att-chip" data-id="<?= (int)$p['id'] ?>"><?= e($p['shown'] ?? $p['name']) ?><button type="button" class="att-x" data-id="<?= (int)$p['id'] ?>" title="移除">×</button></span>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<button type="button" class="btn btn-ghost btn-sm att-open-btn" id="attOpen">+ 添加观影人</button>
|
||||
<div class="att-modal" id="attModal" hidden>
|
||||
<div class="att-modal-box">
|
||||
<div class="att-modal-head">
|
||||
<b>选择观影人</b>
|
||||
<button type="button" class="att-close" id="attClose" title="关闭">×</button>
|
||||
</div>
|
||||
<input class="input" id="attSearch" type="text"
|
||||
placeholder="输入名字或拼音首字母，如 zy 找「张三」" autocomplete="off">
|
||||
<div class="att-list" id="attList">
|
||||
<?php foreach ($people as $p): ?>
|
||||
<label class="att-item"
|
||||
data-name="<?= e((string)$p['name']) ?>"
|
||||
data-shown="<?= e((string)($p['shown'] ?? '')) ?>">
|
||||
<input type="checkbox" name="attendees[]" value="<?= (int)$p['id'] ?>"
|
||||
<?= in_array((int)$p['id'], $selAttendees, true) ? 'checked' : '' ?>>
|
||||
<span><?= e($p['shown'] ?? $p['name']) ?></span>
|
||||
<span class="att-initials" hidden></span>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
<div class="att-empty" hidden>没有匹配的人。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<noscript><style>.att-open-btn { display: none; } .att-modal { position: static; display: block; background: none; padding: 0; } .att-modal-box { box-shadow: none; border: 1px solid var(--line); max-height: none; }</style></noscript>
|
||||
<?php else: ?>
|
||||
<span class="tip">名册里还没有人，先把家人加进名册再来记。</span>
|
||||
<?php endif; ?>
|
||||
@@ -138,3 +179,253 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<?php if ($people): ?>
|
||||
<!-- 观影人选择弹窗：chips 同步 + 拼音首字母联想（Intl pinyin 排序 + 23 锚字二分，零依赖） -->
|
||||
<script>
|
||||
(function () {
|
||||
var modal = document.getElementById('attModal');
|
||||
if (!modal) return;
|
||||
var openBtn = document.getElementById('attOpen');
|
||||
var closeBtn = document.getElementById('attClose');
|
||||
var search = document.getElementById('attSearch');
|
||||
var list = document.getElementById('attList');
|
||||
var chips = document.getElementById('attChips');
|
||||
var emptyTip = list.querySelector('.att-empty');
|
||||
|
||||
/* ---- 汉字 → 拼音首字母：锚字表 a..z（23 个，无 i/u/v 开头字），
|
||||
用拼音 collation 做二分定位；不支持的浏览器返回 null（只按名字搜） ---- */
|
||||
var initialsOf = (function () {
|
||||
var anchors = '阿八擦搭娥发嘎哈击喀垃妈拿哦啪期然撒塌挖昔压匝';
|
||||
var letters = 'abcdefghjklmnopqrstwxyz';
|
||||
var coll;
|
||||
try { coll = new Intl.Collator('zh-Hans-CN-u-co-pinyin'); } catch (e) { return null; }
|
||||
if (!coll || coll.compare('阿', '匝') >= 0) return null; // collation 没生效
|
||||
return function (s) {
|
||||
var out = '';
|
||||
for (var i = 0; i < s.length; i++) {
|
||||
var ch = s[i];
|
||||
if (/[a-zA-Z]/.test(ch)) { out += ch.toUpperCase(); continue; }
|
||||
if (ch.charCodeAt(0) < 0x2E80) continue; // 非 CJK：不产字母
|
||||
var lo = 0, hi = anchors.length - 1, best = -1;
|
||||
while (lo <= hi) {
|
||||
var mid = (lo + hi) >> 1;
|
||||
if (coll.compare(ch, anchors[mid]) >= 0) { best = mid; lo = mid + 1; }
|
||||
else { hi = mid - 1; }
|
||||
}
|
||||
if (best >= 0) out += letters[best];
|
||||
}
|
||||
return out;
|
||||
};
|
||||
})();
|
||||
|
||||
/* 预计算每个人的首字母串，挂在 data-initials 上 */
|
||||
Array.prototype.forEach.call(list.querySelectorAll('.att-item'), function (el) {
|
||||
var s = (el.getAttribute('data-name') || '') + (el.getAttribute('data-shown') || '');
|
||||
var ini = initialsOf ? initialsOf(s) : '';
|
||||
el.setAttribute('data-initials', ini.toLowerCase());
|
||||
var badge = el.querySelector('.att-initials');
|
||||
if (badge && ini) { badge.textContent = ini; badge.hidden = false; }
|
||||
});
|
||||
|
||||
function syncChips() {
|
||||
if (!chips) return;
|
||||
chips.innerHTML = '';
|
||||
Array.prototype.forEach.call(list.querySelectorAll('.att-item input:checked'), function (box) {
|
||||
var item = box.closest('.att-item');
|
||||
var label = item.querySelector('span').textContent;
|
||||
var id = box.value;
|
||||
var chip = document.createElement('span');
|
||||
chip.className = 'att-chip';
|
||||
chip.setAttribute('data-id', id);
|
||||
chip.textContent = label;
|
||||
var x = document.createElement('button');
|
||||
x.type = 'button'; x.className = 'att-x'; x.textContent = '×';
|
||||
x.title = '移除'; x.setAttribute('data-id', id);
|
||||
chip.appendChild(x);
|
||||
chips.appendChild(chip);
|
||||
});
|
||||
}
|
||||
|
||||
chips.addEventListener('click', function (e) {
|
||||
var x = e.target.closest ? e.target.closest('.att-x') : null;
|
||||
if (!x) return;
|
||||
var id = x.getAttribute('data-id');
|
||||
Array.prototype.forEach.call(list.querySelectorAll('.att-item input'), function (box) {
|
||||
if (box.value === id) box.checked = false;
|
||||
});
|
||||
syncChips();
|
||||
});
|
||||
|
||||
function applyFilter() {
|
||||
var q = (search.value || '').trim().toLowerCase();
|
||||
var shown = 0;
|
||||
Array.prototype.forEach.call(list.querySelectorAll('.att-item'), function (el) {
|
||||
var hit = !q ||
|
||||
(el.getAttribute('data-name') || '').toLowerCase().indexOf(q) >= 0 ||
|
||||
(el.getAttribute('data-shown') || '').toLowerCase().indexOf(q) >= 0 ||
|
||||
(el.getAttribute('data-initials') || '').indexOf(q) >= 0;
|
||||
el.hidden = !hit;
|
||||
if (hit) shown++;
|
||||
});
|
||||
emptyTip.hidden = shown > 0;
|
||||
}
|
||||
|
||||
function openModal() { modal.hidden = false; search.value = ''; applyFilter(); syncChips(); search.focus(); }
|
||||
function closeModal() { modal.hidden = true; }
|
||||
openBtn.addEventListener('click', openModal);
|
||||
closeBtn.addEventListener('click', closeModal);
|
||||
modal.addEventListener('click', function (e) { if (e.target === modal) closeModal(); });
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape' && !modal.hidden) closeModal();
|
||||
});
|
||||
search.addEventListener('input', applyFilter);
|
||||
|
||||
/* 选一个 = 勾上 + 出 chips + 关弹窗（再添加就再点一次「+ 添加观影人」）；
|
||||
在弹窗里取消勾选只同步 chips，不关弹窗 */
|
||||
list.addEventListener('change', function (e) {
|
||||
if (!e.target || e.target.tagName !== 'INPUT') return;
|
||||
syncChips();
|
||||
if (e.target.checked) closeModal();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- 豆瓣自动补充：下拉联想（320ms 防抖 + 中文输入法组字期不请求）+ 一键抓取 -->
|
||||
<script>
|
||||
(function () {
|
||||
var DB_URL = <?= json_encode(url('movies/douban')) ?>;
|
||||
var titleEl = document.getElementById('title');
|
||||
var box = document.getElementById('dbSuggest');
|
||||
var fetchBtn = document.getElementById('dbFetch');
|
||||
var metaEl = document.getElementById('dbMeta');
|
||||
var posterKeyEl = document.getElementById('dbPosterKey');
|
||||
var posterWrap = document.getElementById('dbPosterWrap');
|
||||
var posterImg = document.getElementById('dbPosterImg');
|
||||
var infoEl = document.getElementById('info');
|
||||
if (!titleEl || !box || !fetchBtn || !metaEl) return;
|
||||
|
||||
var lastPosterKey = ''; // 本次会话里最近一次抓到的海报键（下次抓取时回传清理）
|
||||
var timer = null;
|
||||
var composing = false;
|
||||
var seq = 0; // 丢弃过期响应
|
||||
|
||||
titleEl.addEventListener('compositionstart', function () { composing = true; });
|
||||
titleEl.addEventListener('compositionend', function () { composing = false; schedule(); });
|
||||
titleEl.addEventListener('input', function () {
|
||||
if (composing) return; // 组字期间的拼音串没有意义，也不劫持回车
|
||||
schedule();
|
||||
});
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!box.hidden && !box.contains(e.target) && e.target !== titleEl) hideBox();
|
||||
});
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') hideBox();
|
||||
});
|
||||
|
||||
function schedule() {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(suggest, 320);
|
||||
}
|
||||
function hideBox() { box.hidden = true; box.innerHTML = ''; }
|
||||
|
||||
function suggest() {
|
||||
var q = titleEl.value.trim();
|
||||
if (q === '') { hideBox(); return; }
|
||||
var my = ++seq;
|
||||
getJson(DB_URL + '&action=suggest&q=' + encodeURIComponent(q), function (data, err) {
|
||||
if (my !== seq) return; // 过期响应丢弃
|
||||
if (err) return; // 联想失败静默（正片抓取会给出明确报错）
|
||||
renderItems(data && data.items ? data.items : []);
|
||||
});
|
||||
}
|
||||
|
||||
function renderItems(items) {
|
||||
box.innerHTML = '';
|
||||
if (!items.length) { hideBox(); return; }
|
||||
items.forEach(function (it) {
|
||||
var btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'db-item';
|
||||
if (it.thumb) {
|
||||
var im = document.createElement('img');
|
||||
im.src = it.thumb; im.alt = ''; im.loading = 'lazy';
|
||||
btn.appendChild(im);
|
||||
}
|
||||
var tx = document.createElement('span');
|
||||
tx.className = 'db-item-tx';
|
||||
var b = document.createElement('b');
|
||||
// 候选文本来自豆瓣 —— 一律 textContent 插入，绝不拼 innerHTML（豆瓣侧内容可注入脚本）
|
||||
b.textContent = it.title || '(无片名)';
|
||||
tx.appendChild(b);
|
||||
var bits = [];
|
||||
if (it.sub_title && it.sub_title !== it.title) bits.push(it.sub_title);
|
||||
if (it.year) bits.push(it.year);
|
||||
if (it.kind) bits.push(it.kind);
|
||||
if (bits.length) {
|
||||
var sm = document.createElement('small');
|
||||
sm.textContent = bits.join(' · ');
|
||||
tx.appendChild(sm);
|
||||
}
|
||||
btn.appendChild(tx);
|
||||
btn.addEventListener('click', function () { hideBox(); fetchById(it.id); });
|
||||
box.appendChild(btn);
|
||||
});
|
||||
box.hidden = false;
|
||||
}
|
||||
|
||||
function fetchById(id) {
|
||||
doFetch(DB_URL + '&id=' + encodeURIComponent(id));
|
||||
}
|
||||
fetchBtn.addEventListener('click', function () {
|
||||
var q = titleEl.value.trim();
|
||||
if (q === '') { titleEl.focus(); return; }
|
||||
doFetch(DB_URL + '&q=' + encodeURIComponent(q));
|
||||
});
|
||||
|
||||
function doFetch(urlWithQ) {
|
||||
if (lastPosterKey) urlWithQ += '&old_poster=' + encodeURIComponent(lastPosterKey);
|
||||
fetchBtn.disabled = true;
|
||||
var my = ++seq;
|
||||
getJson(urlWithQ, function (data, err) {
|
||||
fetchBtn.disabled = false;
|
||||
if (my !== seq) return;
|
||||
if (err || !data) { alert(err || '抓取失败，请稍后再试'); return; }
|
||||
if (data.error) { alert(data.error); return; }
|
||||
apply(data);
|
||||
});
|
||||
}
|
||||
|
||||
function apply(data) {
|
||||
if (data.title) titleEl.value = data.title;
|
||||
if (data.meta) {
|
||||
metaEl.value = JSON.stringify(data.meta);
|
||||
// 剧情简介填进「简介」，但只填空白的 —— 用户已经写了就不覆盖
|
||||
if (infoEl && data.meta.plot && infoEl.value.trim() === '') infoEl.value = data.meta.plot;
|
||||
}
|
||||
if (data.poster_key) {
|
||||
lastPosterKey = data.poster_key;
|
||||
posterKeyEl.value = data.poster_key;
|
||||
if (data.poster) {
|
||||
posterImg.src = data.poster;
|
||||
posterWrap.hidden = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getJson(u, cb) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', u, true);
|
||||
xhr.onload = function () {
|
||||
var data = null, err = '';
|
||||
try { data = JSON.parse(xhr.responseText); }
|
||||
catch (e) { err = '返回内容异常'; }
|
||||
if (xhr.status >= 400) err = (data && data.error) ? data.error : ('请求失败（' + xhr.status + '）');
|
||||
cb(data, err);
|
||||
};
|
||||
xhr.onerror = function () { cb(null, '网络异常'); };
|
||||
xhr.send();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
|
||||
Reference in New Issue
Block a user