` + `` 会让页面 DOM 翻几倍（本项目在名册页踩过：2369 个 form 把浏览器拖卡）。 ⚠️ 表单里留一个原生「完成」按钮并**不依赖 JS 才能提交**：脚本没跑时行上的「编辑」按钮就是一个 `` 到锚点，弹框默认可见（`

公共标签全家人共用的一套

人

还没有公共标签。加一个吧。

/* 🔴 v63：公共标签的「编辑」弹框。 ⚠️ 写在一个 IIFE 里并**只在元素存在时才跑** —— 这一页可能因为权限/升级而少渲染某几块（比如表还没迁移完），别让脚本在别处抛错。 ⚠️ 颜色有两个来源（色板按钮 / 取色器），最终都写进 `#pgEditColor` 这个 hidden 字段：**只提交一个** `name="color"`，服务端就不用猜 "到底以哪个为准"（两个同名控件同时提交时，PHP 取最后一个 —— 那是隐式行为，不该依赖）。 */ (function () { var modal = document.getElementById('pgEditModal'); if (!modal || !document.querySelector('.js-pg-edit')) { return; } var form = document.getElementById('pgEditForm'); var fId = document.getElementById('pgEditId'); var fName = document.getElementById('pgEditName'); var fColor = document.getElementById('pgEditColor'); var picker = document.getElementById('pgEditColorPick'); var swBox = document.getElementById('pgEditSwatches'); var delId = document.getElementById('pgDelId'); function markOn(color) { var list = swBox ? swBox.querySelectorAll('.pg-sw') : []; for (var i = 0; i < list.length; i++) { var on = (list[i].getAttribute('data-pg-color') || '').toLowerCase() === color.toLowerCase(); list[i].classList.toggle('is-on', on); } } function setColor(color) { fColor.value = color || ''; if (picker) { picker.value = color || '#a84a28'; } markOn(color || ''); } function open(btn) { var gid = btn.getAttribute('data-pg-id') || ''; fId.value = gid; fName.value = btn.getAttribute('data-pg-name') || ''; setColor(btn.getAttribute('data-pg-color') || ''); // ⚠️ 删除表单里的 id 也要跟着灌 —— 忘了这一句，删除按钮会提交**上一次编辑过**的 // 那个标签的 id（或者空 id），症状是"删掉的不是我点的那个"。 if (delId) { delId.value = gid; } modal.hidden = false; fName.focus(); fName.select(); } function close() { modal.hidden = true; } // 行上的「编辑」 var btns = document.querySelectorAll('.js-pg-edit'); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener('click', function () { open(this); }); } // 关闭：遮罩 / ✕ / 取消 var closers = modal.querySelectorAll('[data-pg-close]'); for (var j = 0; j < closers.length; j++) { closers[j].addEventListener('click', close); } // Esc 关（与全站其它弹框一致） document.addEventListener('keydown', function (e) { if (!modal.hidden && (e.key === 'Escape' || e.keyCode === 27)) { close(); } }); // 色板点击 if (swBox) { swBox.addEventListener('click', function (e) { var b = e.target && e.target.closest ? e.target.closest('.pg-sw') : null; if (b) { setColor(b.getAttribute('data-pg-color') || ''); } }); } // 取色器改了就同步 if (picker) { picker.addEventListener('input', function () { setColor(picker.value); }); } })();

附件存储头像等文件存哪儿

数据库里只存「相对路径」，所以随时可以在本地与云端之间切换 —— 已上传的文件会按「本地优先」的顺序去找，切换后老文件照样能打开，出问题也能随时切回来。
不管选哪个，页面上的图片与附件都统一走 media.php 代理：桶不必开公共读、uploads/ 也可以封死，能不能看由登录态决定。

> 服务器本地
最简单，文件和服务在一起。适合家里自己用。 > 阿里云 OSS
文件独立存放，换服务器不丢。

云端配置还不完整，系统现在临时用本地存储在跑 —— 填全下面的信息再保存。

当前生效：阿里云 OSS

阿里云 OSS 参数

凭据方式若这台服务器是阿里云 ECS 且绑了 RAM 角色，优先用角色 —— 服务器上不落长期密钥。

Endpoint 不要带 https://，且要和桶的地域一致。

桶内前缀一个桶放多个站点时用它隔开。

AccessKey Secret

自定义域名 / CDN 填了会替代 bucket.endpoint 生成访问地址；该域名需已绑定到这个桶。

> 服务端读取优先走内网 endpoint（服务器与桶在同地域时更快，还免流量费） > 用 HTTPS 访问对象

连通性测试两种测试的分工不一样

「当前存储」测的是现在生效的那一个（可能是本地），只回答"能不能存东西"；「OSS 连通性」测的是下面填的那套 OSS 参数本身 —— 即使现在跑在本地也能测，这样就可以先把 OSS 测通、再切过去，而不是"先切、发现不行、再切回来"。

共步，通过步 ·

步骤	结论	耗时	详情
		ms

探针对象用后即删，不会在桶里留垃圾；跑完这一遍之后再切驱动最稳妥。

还没测过。建议先在下面填好 OSS 参数并保存，再点「测试 OSS 连通性」，通过之后再回到上面把「存在哪里」切到阿里云 OSS。

运行环境

PHP
数据库
加密密钥: 未配置' ?>
附件存储: （设置的是 OSS，但配置不全，实际用本地）
附件出口: 统一走 media.php 代理（本地与云端同一形态，需登录才能读）
账号: 管理员 · 家庭成员 · 访客

手机号与身份证号都是加密后入库的。这个密钥一旦换掉，已有数据就再也解不开 —— 请把它和数据库分开、各备份一份。

访客账号在「邀请访客」里开通。