登录居中 · 个人 slogan · 三种生日 · 称呼视角化 · 附件统一走代理
按九点反馈一次性改造： 1. 登录页「图标 + 用手机号登录你的家书」包进 .auth-head 并真正居中 （以前只加了个 class 名，没有样式，看着像做了其实没做）。 2. slogan 改成两段式：系统级 slogan 作兜底，每个人可在自己的资料里写一个， 填了就显示自己的、留空就回落到系统那句。settings 里「家庭名称」字段去掉 （只在安装时归档，不参与展示）。 3. 三个生日：身份证生日（从证件号截取，永不改动）／真实阳历／农历。 同一人填了其一即自动推出另一个（靠 birthday_source 指明填的是哪一侧， 不依赖 JS）。三者落在同一天时合并成一条提醒，否则分别提醒。 农历表不是照抄流传的那份 lunarInfo（它在 5 个年份上是错的）—— 用五个独立实现按 7.3 万天多数表决重新推导，再要求 100% 重现。 4. 称呼改成「视角属性」：nicknames(family_id, viewer_id, target_id, nickname)。 「小明」不是某个人的属性——同一个人被不同人叫法不同，所以是「谁看」的属性。 旧的 persons.nickname 由 Nickname::migrateLegacy() 搬到新表，只搬一次。 5. 点自己的头像/名字直接进「我的资料」，不必再绕 「名册 → 找到自己 → 编辑资料」三步。 6. 附件（头像与其它上传）一律走 media.php 代理，不再直连 uploads/ 或云端地址： 可读性由登录态决定而不是「知道文件名」，Content-Type/缓存/下载头由服务端统一给。 uploads/ 整个目录 deny（含历史遗留备份文件），并有真实探针验证。 7. OSS 设置页加「连通性测试」（本地 / 云端两个按钮），逐步给出结论与耗时。 8. 生日输入改用「原生日期框 + 24 小时制时:分:秒 三个下拉」： datetime-local 的格式由浏览器 UI 语言决定（中文环境渲染成「下午 03:30」， 没有秒、还容易把上下午填反）。点输入框任意一处都能弹出选择器（showPicker）。 9. 结构版本号收敛成 Schema::VERSION 一处，安装时即盖章，避免首次请求白跑升级。 验证（全部为「先注入 bug 证伪、再跑通过」）： php -l 42 个文件；e2e 149 条；老库升级专测 37 条；反向验证 23 个注入全被抓； 桌面几何 108 条（768/1280/1920/2560）；移动端真机几何 212 条（360/375/390/414）； 交互检查 49 条（生日整框可点、登录居中）。
This commit is contained in:
+136
-5
@@ -64,7 +64,12 @@ a:hover { text-decoration: underline; }
|
||||
|
||||
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
|
||||
.who { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
|
||||
a.who:hover { text-decoration: none; }
|
||||
/* 头像/名字是个「编辑我自己」的入口 —— hover 时给点反馈，让人知道它可点 */
|
||||
a.who:hover .who-name { color: var(--brand); text-decoration: underline; }
|
||||
a.who:hover img { box-shadow: 0 0 0 2px var(--brand-2); }
|
||||
.who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
|
||||
.who img { transition: box-shadow .15s ease; }
|
||||
.link-quiet { color: var(--muted); font-size: 14px; }
|
||||
.link-quiet:hover { color: var(--brand); }
|
||||
|
||||
@@ -104,8 +109,22 @@ a:hover { text-decoration: underline; }
|
||||
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
|
||||
}
|
||||
.hero-logo { width: 64px; height: 64px; border-radius: 16px; flex: 0 0 auto; }
|
||||
.hero-main { flex: 1 1 240px; min-width: 0; }
|
||||
.hero h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
|
||||
.hero .motto { color: var(--muted); margin: 0; font-size: 14px; }
|
||||
/* 那句小字到底是谁的：自己写的那句要标一下，否则用户会以为这是系统统一发的 */
|
||||
.motto-from {
|
||||
display: inline-block; margin-left: 6px; padding: 0 7px;
|
||||
border-radius: 999px; background: var(--line-2);
|
||||
font-size: 11px; color: var(--faint);
|
||||
}
|
||||
.motto-edit { margin-left: 8px; font-size: 12px; color: var(--brand-2); white-space: nowrap; }
|
||||
/* 详情页顶部引用本人的一句话 */
|
||||
.motto-line {
|
||||
margin: -8px 0 16px; padding-left: 12px;
|
||||
border-left: 3px solid var(--brand-2);
|
||||
color: var(--muted); font-size: 14px;
|
||||
}
|
||||
.hero-stats { margin-left: auto; display: flex; gap: 28px; }
|
||||
.stat { text-align: center; }
|
||||
.stat b { display: block; font-size: 24px; font-weight: 600; line-height: 1.2; }
|
||||
@@ -139,17 +158,39 @@ a:hover { text-decoration: underline; }
|
||||
}
|
||||
.badge-admin { background: #F6E3D7; color: var(--brand-ink); }
|
||||
.badge-open { background: #E6F0DC; color: #4A7226; }
|
||||
.badge-me { background: var(--brand); color: #fff; }
|
||||
|
||||
/* 生日条 */
|
||||
/* 生日条 —— 一个人可能同时出两条（农历与阳历不在同一天），
|
||||
落在同一天时并成一条、kinds 里挂多个标签，正好对应"要分别提醒"。 */
|
||||
.bdays { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.bday {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
background: var(--surface); border: 1px solid var(--line);
|
||||
border-radius: 999px; padding: 6px 16px 6px 6px; box-shadow: var(--shadow);
|
||||
border-radius: var(--radius); padding: 10px 18px 10px 10px;
|
||||
box-shadow: var(--shadow);
|
||||
color: var(--ink); text-decoration: none;
|
||||
transition: transform .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
.bday img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
|
||||
.bday:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); text-decoration: none; }
|
||||
.bday img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
|
||||
.bday b { font-weight: 500; }
|
||||
.bday .d { color: var(--brand); font-size: 13px; }
|
||||
.bday-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
|
||||
.bday-date { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
|
||||
/* 「身份证生日 / 阳历生日 / 农历生日」的标签，首页与详情页共用 */
|
||||
.bd-kind {
|
||||
display: inline-block; padding: 0 7px; border-radius: 999px;
|
||||
font-size: 11px; line-height: 1.8;
|
||||
background: var(--line-2); color: var(--muted);
|
||||
}
|
||||
.bd-kind-id { background: #E6F0DC; color: #4A7226; }
|
||||
.bd-kind-solar { background: #F6E3D7; color: var(--brand-ink); }
|
||||
.bd-kind-lunar { background: #E8E4F2; color: #55477E; }
|
||||
|
||||
/* 详情页的三个生日 */
|
||||
.bd-list { list-style: none; margin: 0; padding: 0; }
|
||||
.bd-list li { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
|
||||
.bd-list .bd-val { font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* ---------------- 表单 ---------------- */
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
@@ -233,7 +274,14 @@ textarea.input { min-height: 76px; resize: vertical; }
|
||||
border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-l);
|
||||
padding: 32px;
|
||||
}
|
||||
.auth-card .logo { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 14px; }
|
||||
/* 图标 + 「用手机号登录你的家书」+ 家庭名，整块水平居中。
|
||||
⚠️ 只有这一块居中：下面的表单仍然左对齐（label 左对齐才好读），
|
||||
「忘记密码」那行本来就是居中，所以视觉上不会歪。 */
|
||||
.auth-head { text-align: center; }
|
||||
.auth-card .logo {
|
||||
display: block; margin: 0 auto 14px;
|
||||
width: 56px; height: 56px; border-radius: 14px;
|
||||
}
|
||||
.auth-card h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
|
||||
.auth-card .lead { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
|
||||
.auth-card .btn { width: 100%; margin-top: 20px; }
|
||||
@@ -246,6 +294,40 @@ textarea.input { min-height: 76px; resize: vertical; }
|
||||
.search { display: flex; gap: 8px; margin-bottom: 16px; }
|
||||
.search .input { max-width: 260px; }
|
||||
|
||||
/* ---------------- 日期 + 时:分:秒 组合控件（templates/_datetime.php） ----------------
|
||||
原生 datetime-local 的显示格式由浏览器 UI 语言/系统时间格式决定，
|
||||
中文环境渲染成「下午 03:30」且没有秒，所以自己拼一个。
|
||||
日期部分仍是原生 date 控件 → app.js 的 showPicker 让它整框可点。 */
|
||||
.dt-input { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
|
||||
.dt-input .dt-date {
|
||||
flex: 1 1 150px; min-width: 0;
|
||||
padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-s);
|
||||
background: var(--surface); color: var(--ink); font: inherit;
|
||||
accent-color: var(--brand);
|
||||
}
|
||||
.dt-input .dt-date { cursor: pointer; } /* 整框可点，光标也要说明这一点 */
|
||||
.dt-input .dt-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
|
||||
.dt-time { display: flex; align-items: center; gap: 3px; }
|
||||
.dt-input .dt-hour,
|
||||
.dt-input .dt-minute,
|
||||
.dt-input .dt-second {
|
||||
padding: 9px 6px; border: 1px solid var(--line); border-radius: var(--radius-s);
|
||||
background: var(--surface); color: var(--ink); font: inherit;
|
||||
font-variant-numeric: tabular-nums; cursor: pointer;
|
||||
}
|
||||
.dt-input .dt-colon { color: var(--muted); font-weight: 600; }
|
||||
|
||||
/* 「以哪个生日为准」的两块：被选中的那块描一圈，一眼看出填的是哪边 */
|
||||
.bd-source { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
|
||||
.bd-pane { border: 1px solid transparent; border-radius: var(--radius); padding: 10px 12px 2px; }
|
||||
.bd-pane.is-primary { border-color: var(--brand-2); background: #FDF6F1; }
|
||||
.bd-pane .bd-pane-k { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
|
||||
.bd-readonly {
|
||||
display: inline-block; padding: 6px 10px; border-radius: var(--radius-s);
|
||||
background: var(--line-2); color: var(--muted); font-size: 14px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ---------------- 称谓标签 ---------------- */
|
||||
.rel-label {
|
||||
display: inline-block; padding: 1px 9px; border-radius: 999px;
|
||||
@@ -387,3 +469,52 @@ textarea.input { min-height: 76px; resize: vertical; }
|
||||
.search { flex-wrap: wrap; }
|
||||
.search .input { max-width: none; flex: 1 1 auto; }
|
||||
}
|
||||
|
||||
/* ---------------- 「我怎么称呼家人」（视角属性，见 app/Nickname.php） ---------------- */
|
||||
.nick-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.nick-row {
|
||||
display: grid; grid-template-columns: minmax(120px, auto) 1fr auto;
|
||||
gap: 10px; align-items: center;
|
||||
padding: 8px 10px; border-radius: var(--radius-s);
|
||||
background: #FAF7F1; border: 1px solid var(--line-2);
|
||||
}
|
||||
.nick-who { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
|
||||
.nick-who img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
|
||||
.nick-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
/* 详情页上的单个"我叫他什么"输入行 */
|
||||
.nick-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||||
.nick-inline .input { flex: 1 1 220px; max-width: 340px; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.nick-row { grid-template-columns: 1fr; }
|
||||
.nick-inline .input { max-width: none; }
|
||||
}
|
||||
|
||||
/* ---------------- 连通性测试与诊断（设置页） ---------------- */
|
||||
.test-actions { display: flex; flex-direction: column; gap: 10px; }
|
||||
.test-actions form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||||
|
||||
.oss-diag {
|
||||
margin-top: 16px; border-radius: var(--radius-s); overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.oss-diag-head {
|
||||
display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
|
||||
padding: 10px 14px; font-size: 13px;
|
||||
background: var(--line-2);
|
||||
}
|
||||
.oss-diag.is-ok .oss-diag-head { background: #E6F0DC; color: #3F6021; }
|
||||
.oss-diag.is-bad .oss-diag-head { background: #F6E3D7; color: var(--brand-ink); }
|
||||
.oss-diag-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); }
|
||||
.oss-diag-table th,
|
||||
.oss-diag-table td { padding: 8px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--line-2); }
|
||||
.oss-diag-table th { font-weight: 500; color: var(--muted); font-size: 12px; }
|
||||
.oss-diag-table td:nth-child(1) { white-space: nowrap; }
|
||||
.oss-diag-table td:nth-child(3) { white-space: nowrap; }
|
||||
.oss-diag-table tr.row-ok td:nth-child(2) { color: #4A7226; }
|
||||
.oss-diag-table tr.row-bad td:nth-child(2) { color: var(--red); }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.oss-diag-table th:nth-child(3),
|
||||
.oss-diag-table td:nth-child(3) { display: none; }
|
||||
}
|
||||
|
||||
@@ -2,6 +2,30 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// ===== 时间框：点输入框任意一处都弹出选择器 =====
|
||||
// 原生行为只在点右侧那个小日历图标时才弹（而且各浏览器还不一致），
|
||||
// 用户会以为框只能读、或者找不到那个图标在哪。
|
||||
// showPicker() 是标准做法：在 click 里调它，等于把整块输入区都当成了那个图标。
|
||||
//
|
||||
// 为什么能跟浏览器自带的那次弹出共存：若本次点击已经弹过，再调一次是空操作
|
||||
// （规范里「show the picker」对已经显示的选择器直接返回），不会闪两下。
|
||||
// 不支持的浏览器（老 Safari 等）静默跳过 —— 退化成原生行为，不会比现在更差。
|
||||
(function () {
|
||||
var pickers = document.querySelectorAll('input[type="date"], input[type="datetime-local"]');
|
||||
function hook(el) {
|
||||
el.addEventListener('click', function () {
|
||||
if (typeof el.showPicker !== 'function') { return; }
|
||||
try {
|
||||
el.showPicker();
|
||||
} catch (err) {
|
||||
// NotAllowedError：不是用户手势触发的（或被跨域 iframe 挡住）。
|
||||
// 忽略即可 —— 原生那套点击行为还在，用户仍有办法选时间。
|
||||
}
|
||||
});
|
||||
}
|
||||
for (var i = 0; i < pickers.length; i++) { hook(pickers[i]); }
|
||||
})();
|
||||
|
||||
// 头像选好后即时预览，别等上传完才知道选错了
|
||||
var fileInput = document.getElementById('avatar');
|
||||
if (fileInput && window.FileReader) {
|
||||
@@ -24,4 +48,47 @@
|
||||
img.src = '/assets/avatar-default.svg';
|
||||
});
|
||||
});
|
||||
|
||||
// ===== 三个生日：选择"以哪个为准" =====
|
||||
// 阳历与农历其实是同一个人的同一天，不能各填各的（那样就自相矛盾了）。
|
||||
// 表单上让用户明确指定"我这次填的是哪一个"，服务端据此反推另一个。
|
||||
(function () {
|
||||
var sel = document.getElementById('bdSource');
|
||||
if (!sel) { return; }
|
||||
var solarBox = document.getElementById('bdSolarWrap');
|
||||
var lunarBox = document.getElementById('bdLunarWrap');
|
||||
function sync() {
|
||||
var isLunar = sel.value === 'lunar';
|
||||
if (solarBox) { solarBox.classList.toggle('is-primary', !isLunar); }
|
||||
if (lunarBox) { lunarBox.classList.toggle('is-primary', isLunar); }
|
||||
}
|
||||
sel.addEventListener('change', sync);
|
||||
sync();
|
||||
})();
|
||||
|
||||
// ===== 身份证号 → 即时算出「身份证生日」 =====
|
||||
// 让用户当场看到"系统从证件里读出来的是哪一天"，
|
||||
// 而不是存下去之后才发现跟自己的生日差了一个月。
|
||||
(function () {
|
||||
var idc = document.getElementById('id_card');
|
||||
var out = document.getElementById('idCardBirthday');
|
||||
if (!idc || !out) { return; }
|
||||
function pad(n) { return (n < 10 ? '0' : '') + n; }
|
||||
function calc() {
|
||||
var s = (idc.value || '').toUpperCase().replace(/\s/g, '');
|
||||
var y, m, d;
|
||||
if (/^\d{17}[\dX]$/.test(s)) {
|
||||
y = +s.substr(6, 4); m = +s.substr(10, 2); d = +s.substr(12, 2);
|
||||
} else if (/^\d{15}$/.test(s)) {
|
||||
y = 1900 + +s.substr(6, 2); m = +s.substr(8, 2); d = +s.substr(10, 2);
|
||||
} else {
|
||||
out.textContent = '';
|
||||
return;
|
||||
}
|
||||
if (m < 1 || m > 12 || d < 1 || d > 31) { out.textContent = ''; return; }
|
||||
out.textContent = y + '-' + pad(m) + '-' + pad(d);
|
||||
}
|
||||
idc.addEventListener('input', calc);
|
||||
calc();
|
||||
})();
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user