:root{ --bg:#eef1f6; --panel:#ffffff; --line:#e5e9f0; --ink:#1e2733; --mut:#667085; --brand:#4f46e5; --brand2:#7c6cf0; --ok:#16a34a; --warn:#f59e0b; --bad:#e5484d; --req:#3b82f6; --dev:#10b981; --itm:#f59e0b; --radius:14px; --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04); --side:#111a2e; --chip-bg:#f2f4f8; --chip-border:#e2e6ee; --chip-on:#4f46e5; /* 全站唯一的一枚下拉角标（自绘 svg）：表单、查询条、弹窗里的下拉都用它。 位置、大小、让位（padding-right）由各控件自己定，图只在这里定义一次。 */ --dd-arrow:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } *{box-sizing:border-box;margin:0;padding:0} /* 整页不滚：外壳固定「一屏高」，滚动交给内容区（.pagewrap）。 以前是窗口自己滚 —— 滚动条一出现就从右边切掉 10px，而顶栏 / 标签栏是常驻的白条， 右边被切出一条灰缝（也就是「标题旁边空一块」），页面还会跟着抖一下。 */ html,body{height:100%;overflow:hidden} body{font-family:"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px} button{font-family:inherit;cursor:pointer} input,select,textarea{font-family:inherit;font-size:13px;color:var(--ink)} /* 滚动条：10px 的槽里放一枚 4px 的半透明圆角「药丸」（3px 透明边框 + background-clip 收细）， 静止时几乎看不见，悬停 / 拖动才显色 —— 原来那条实心 9px 灰条贴在白色卡片旁太扎眼。 注意：同一元素上若写了 scrollbar-color / scrollbar-width，Chrome 会转用原生滚动条、忽略这一套。 */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border:3px solid transparent;background-clip:content-box;border-radius:99px} ::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,.62);background-clip:content-box} ::-webkit-scrollbar-thumb:active{background:rgba(79,70,229,.55);background-clip:content-box} /* 横竖滚动条相交的那个小方块：默认是白的，在圆角卡片里同样是一处「空一块」 */ ::-webkit-scrollbar-corner{background:transparent} @supports (-moz-appearance:none){ /* Firefox 不认 ::-webkit-scrollbar，用标准属性给它一份等价的细滚动条 */ *{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.6) transparent} } #app{display:flex;height:100vh;height:100dvh} /* 100dvh：手机上按「当前可见高度」算，地址栏不会盖住底部 */ /* ---------- sidebar ---------- */ .side{width:232px;flex:0 0 232px;background:linear-gradient(180deg,#111a2e,#0d1526);color:#c6cfe2;display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .brand{padding:20px 18px 14px;border-bottom:1px solid rgba(255,255,255,.07)} .brand .logo{display:flex;align-items:center;gap:10px} .brand .logo .cube{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#a78bfa);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;box-shadow:0 4px 12px rgba(99,102,241,.4)} .brand .logo b{color:#fff;font-size:15px;letter-spacing:.5px} .brand .src{font-size:11px;color:#7f8aa6;margin-top:10px;line-height:1.5} .nav{padding:12px 10px;flex:1;overflow:auto} /* 分组 = 树状分区手风琴：一级是带图标的分组头，二级缩进到竖线里 */ .nav .ngroup{margin:0 0 4px} .nav .nhead{width:100%;display:flex;align-items:center;gap:9px;background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:#98a5c0;padding:7px 8px;border-radius:9px;cursor:pointer;text-align:left;transition:background .15s,color .15s} .nav .nhead:hover{background:rgba(255,255,255,.06);color:#e2e8f7} /* 分组头左边那枚色块：现在是分组对象自带的图标（render.js 的 navGroups() 读出来）， 不再借组里第一项凑 —— 配套支持图片档（dataURL 嵌进 img）和「不要底色」（nobg）。 */ .nav .nhead .gico{width:22px;height:22px;flex:none;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);overflow:hidden} .nav .nhead .gico img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit;pointer-events:none} .nav .nhead .gico:not(.nobg) img{padding:14%} .nav .nhead .gico.nobg{background:transparent;color:#98a5c0;box-shadow:none;border:1px dashed rgba(151,168,196,.4)} .nav .nhead .gname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav .nhead .gcount{flex:none;background:rgba(255,255,255,.08);color:#93a1bd;font-size:10.5px;font-weight:500;letter-spacing:0;line-height:16px;padding:0 6px;border-radius:9px;font-variant-numeric:tabular-nums} .nav .nhead .chev{width:12px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:#5c6b8c;transition:transform .22s,color .15s} .nav .ngroup.open .nhead .chev{transform:rotate(90deg)} /* 当前页所在的分组：整条分组头点亮，一眼看出「我在哪一片」 */ .nav .ngroup.on .nhead{background:rgba(99,102,241,.14);color:#c7cdfb} .nav .ngroup.on .nhead .chev{color:#a5b4fc} .nav .ngroup.on .nhead .gcount{background:rgba(99,102,241,.34);color:#ccd2fb} .nav .nbody{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .24s cubic-bezier(.4,0,.2,1)} .nav .ngroup.open .nbody{grid-template-rows:1fr} /* 二级项缩进到分组图标的中线上（8px 内边距 + 11px 半个色块），左边一条竖线把「这一片」串起来 */ .nav .ninner{min-height:0;overflow:hidden;margin:2px 0 6px 19px;padding-left:9px;border-left:1px solid rgba(255,255,255,.1)} .nav a{display:flex;align-items:center;gap:9px;color:#b9c3da;text-decoration:none;padding:8px 10px;border-radius:9px;margin:2px 0;transition:.15s;font-size:13.5px} .nav a:hover{background:rgba(255,255,255,.06);color:#fff} .nav a.on{background:linear-gradient(90deg,rgba(99,102,241,.28),rgba(99,102,241,.06));color:#fff;box-shadow:inset 2px 0 0 #6366f1} .nav a .ico{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:700;flex:none} /* 图标配了图片时（菜单管理里可上传）：图片在色块里留一圈边距、不顶着四条边；字符模式照旧显示文字。 图片是贴着自身边缘画的（上传的图基本都这样），铺满时会跟色块边界糊在一起 —— 圆角被图片的直角吃掉、 四周没有一圈底色兜着，小小一枚看着就是"糊在格子上"，一眼分不出是什么图。留 14% 的边距后， 底色变成图片外围那圈框，图片自己四边留白、形状才看得清（勾了「不配置底色」的 .nobg 没有底色可留， 照旧铺满整格）。用 padding 而不是 margin：色块的 22 / 24 / 34px 尺寸不动，字符图标那一档也不受影响。 */ .ico img,.tico img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit;pointer-events:none} .ico:not(.nobg) img,.tico:not(.nobg) img{padding:14%} /* 菜单名过长时省略号收起，而不是把右侧数量徽章一起挤出侧栏 */ .nav a .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav a .cnt{margin-left:auto;flex:none;background:rgba(255,255,255,.09);padding:1px 8px;border-radius:20px;font-size:11px;color:#aab7d2;font-variant-numeric:tabular-nums;white-space:nowrap} .navfoot{padding:10px;border-top:1px solid rgba(255,255,255,.07);flex:none} .nav-toggle{width:100%;background:rgba(255,255,255,.06);border:none;color:#aab7d2;border-radius:8px;padding:8px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:.15s} .nav-toggle:hover{background:rgba(255,255,255,.12);color:#fff} .side{transition:width .2s,flex-basis .2s} .side.collapsed{width:64px;flex:0 0 64px} .side.collapsed .brand{padding:20px 14px 14px} .side.collapsed .brand .logo{justify-content:center} .side.collapsed .brand b,.side.collapsed .brand .src{display:none} .side.collapsed .nav{padding:12px 8px} .side.collapsed .nav .ngroup{margin:0 0 3px} /* 收起后分组头自己变成一枚图标按钮：分组名 / 数量 / 箭头都收起来，只留色块，内容改在浮层里看 */ .side.collapsed .nav .nhead{display:flex;justify-content:center;width:100%;height:auto;padding:8px;margin:0;background:none;border-radius:9px;overflow:visible;pointer-events:auto;cursor:pointer} .side.collapsed .nav .nhead:hover{background:rgba(255,255,255,.08)} .side.collapsed .nav .nhead .gname,.side.collapsed .nav .nhead .gcount,.side.collapsed .nav .nhead .chev{display:none} .side.collapsed .nav .nhead .gico{width:24px;height:24px;font-size:12.5px} .side.collapsed .nav .ngroup.on .nhead{background:rgba(99,102,241,.2)} .side.collapsed .nav .nbody{display:none} .side.collapsed .nav a{justify-content:center;padding:10px;gap:0;margin:2px 0} .side.collapsed .nav a .txt,.side.collapsed .nav a .cnt{display:none} .side.collapsed .nav-toggle span{transform:rotate(180deg)} /* ---------- 收起状态的分组浮层（元素挂在 body 上，见 render.js 的 navFlyShow） ---------- 白底卡片浮在侧栏右侧，列出该分组下的页面；当前页用淡紫底 + 左侧竖条标出来。 */ .navfly{position:fixed;z-index:200;min-width:174px;max-width:264px;max-height:70vh;overflow:auto; background:#fff;border:1px solid #e6e9f2;border-radius:12px;padding:6px; box-shadow:0 12px 34px rgba(16,24,40,.24);opacity:0;transform:translateX(-4px); transition:opacity .12s ease,transform .12s ease} .navfly.show{opacity:1;transform:none} .navfly-t{font-size:11.5px;font-weight:700;letter-spacing:.4px;color:#98a2b3;padding:5px 10px 4px} .navfly a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;margin:1px 0; color:#344054;font-size:13.5px;text-decoration:none;cursor:pointer;transition:.15s} .navfly a:hover{background:#f2f4f9;color:#111827} .navfly a.on{background:#eef1ff;color:#4f46e5;font-weight:600;box-shadow:inset 2px 0 0 #6366f1} .navfly a .ico{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:700;flex:none} .navfly a .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- main ---------- */ .main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column} /* 顶栏 / 标签栏不再需要 sticky：它们本来就常驻（滚动发生在下面的 .pagewrap 里） */ .topbar{height:58px;flex:none;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 22px;position:relative;z-index:20} /* 折叠侧栏的那 200ms 里（body.nav-anim，见 render.js 的 toggleNav）顶栏毛玻璃临时关掉： 宽度每帧都在变，blur 就得每帧重算 —— 这是折叠卡顿的另一半来源。 */ body.nav-anim .topbar{backdrop-filter:none} .topbar .t1{font-size:16px;font-weight:700} .topbar .t2{font-size:12px;color:var(--mut);margin-top:1px} .topbar .sp{flex:1} .chip{font-size:11.5px;color:#475467;background:#f2f4f8;border:1px solid #e2e6ee;padding:3px 10px;border-radius:20px;white-space:nowrap} .statbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center} .statbar .chip{cursor:pointer;transition:.15s} .statbar .chip:hover{background:#e9ecf2} .statbar .chip.on{background:var(--brand);border-color:var(--brand);color:#fff} .content{padding:20px 22px 22px;max-width:1500px;width:100%;margin:0 auto} .content.full{max-width:none;padding:22px 28px 22px} /* ---------- 页面标签栏 ---------- */ .tabs{flex:none;height:40px;display:flex;align-items:flex-end;gap:4px;padding:0 14px;background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:19;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#d5dbe6 transparent} /* 下面两行是老内核 / Safari 的兜底：新一点的 Chrome 写了 scrollbar-width 后走原生滚动条，不再认这里 */ .tabs::-webkit-scrollbar{height:3px} .tabs::-webkit-scrollbar-thumb{background:#d5dbe6} /* ---------- 内容区滚动 ---------- 外壳固定一屏高（html,body / #app），顶栏与标签栏常驻，只有这一层滚： 滚动条于是落在窗口最右侧、且只占内容区这一段，不会再从上面那些标题条上切过去。 */ .pagewrap{flex:1;min-height:0;overflow:auto;position:relative} /* relative：外链页那层 .linkhost 靠它铺满这一格 */ .tab{display:inline-flex;align-items:center;gap:6px;height:32px;max-width:196px;flex:none;padding:0 6px 0 10px;border:1px solid transparent;border-bottom:none;border-radius:9px 9px 0 0;font-size:12.5px;color:#475467;cursor:pointer;white-space:nowrap;user-select:none;position:relative;transition:background .12s,color .12s,border-color .12s} .tab:hover{background:#f4f6fb;color:#1e2733} .tab.on{background:#eef2ff;border-color:#dbe0ff;color:#4338ca;font-weight:600} .tab.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand)} .tab .tico{width:16px;height:16px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;line-height:1;color:#fff;font-weight:700;flex:none;font-style:normal} .tab .tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tab .tx{width:16px;height:16px;flex:none;padding:0;border:none;background:transparent;color:#98a2b3;border-radius:50%;font-size:10px;line-height:1;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s,background .12s,color .12s} .tab:hover .tx,.tab.on .tx{opacity:1} .tab .tx:hover{background:#dfe3ee;color:#1e2733} .tabdd{flex:none;position:sticky;right:0;z-index:2;width:24px;height:24px;margin:0 0 4px 2px;padding:0;border:1px solid var(--line);background:#fff;color:#667085;border-radius:7px;font-size:11px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s,border-color .12s} .tabdd:hover{background:#eef2ff;border-color:#dbe0ff;color:#4338ca} .tabmenu{position:fixed;left:-9999px;top:-9999px;z-index:200;min-width:146px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.16);padding:5px;display:none;flex-direction:column;gap:1px} .tabmenu.show{display:flex} .tabmi{display:block;width:100%;text-align:left;border:none;background:transparent;padding:7px 10px;border-radius:7px;font-size:12.5px;color:#344054;cursor:pointer} .tabmi:hover:not(:disabled){background:#f4f6fb;color:#4338ca} .tabmi:disabled{opacity:.4;cursor:not-allowed} .tabmenu.tabacts{min-width:158px;padding:6px} .tabmenu.tabacts .tabmi{padding:8px 12px} .tabmenu.tabacts .tabmi:last-child{color:#b42318} .tabmenu.tabacts .tabmi:last-child:hover{background:#fef3f2;color:#b42318} /* JSON ⇄ Excel 这页自带虚拟滚动列表，必须拿到确定高度： 外壳（#app）与内容区（.pagewrap）现在都是硬高度，这里再给一个显式 height（顶栏 58px + 标签栏 40px）， 正好等于 .pagewrap 那一格，页面本身不滚、交给页内的虚拟滚动。 */ .content.jsonpage{padding:0;background:transparent;border:none;box-shadow:none;display:flex;flex-direction:column;min-height:0;max-width:none;margin:0;height:calc(100vh - 98px);max-height:calc(100vh - 98px);overflow:hidden} /* ---------- 自定义链接页（菜单里「类型＝自定义链接」那一项）：链接画面嵌在页面里 ---------- 画法：和全站其它页一样是一张卡片 —— 顶上一条常驻工具条（这是导航里的哪一项、连到哪儿、两个出口）， 下面整块给药嵌进来的那个网页。 位置：这一页的画面不在内容区（.content）里，而是挂在 .pagewrap 下另一层常驻容器 .linkhost 上。 内容区是整块 innerHTML 重画的，而嵌进来的网页最怕重画：一挪窝、甚至只是「摘下来再挂回去」， 浏览器就会把它整个重载一遍（图多的、接口多的页面每次切回来都要重新等）。 所以每个外链页在 .linkhost 里占一块自己的面板（.lkpane），切页只切「哪一块可见」—— DOM 一个节点都不动，于是切多少次、切多远，看到的都还是刚才那一份（见 menumgr.js 的 linkShow）。 面板外面那圈留白 / 白卡片由 .lkpane + .linkcard 出，和其它页一个观感。 早先这里是「iframe 铺满整格 + 右上角一条半透明小条」，后来又改成「挪进 body 尾部一块看不见的 #linkPark」—— 两条路都试过，现在这版才是真正不重载的那一版。 */ .content.linkpage{display:none} /* 这一页的画面在 .linkhost 里，内容区整格让开 */ .linkhost{position:absolute;left:0;right:0;top:0;bottom:0;visibility:hidden;pointer-events:none} .linkhost.show{visibility:visible;pointer-events:auto} /* 一块面板＝一个外链页（里面装着工具条、舞台和那块 iframe）。 切走的那块只是「不可见」：尺寸和内容原样留着 —— 用 visibility 而不是 display:none， 免得里面的网页在 0 尺寸和真尺寸之间来回重排（那是要重新算布局的，外链页尤其吃不消）。 */ .lkpane{position:absolute;left:0;right:0;top:0;bottom:0;padding:14px 16px 16px;visibility:hidden;pointer-events:none} .lkpane.on{visibility:visible;pointer-events:auto} /* 容器整层收起来时，里面的面板一律跟着藏。 这条是兜底：visibility 是继承来的，子元素写 visible 就能盖掉父级的 hidden —— 万一哪天出现「容器收着、面板还带着 .on」，那就不只是看不见，还会有一块透明的 iframe 盖在内容区上把点击全吃掉。这里按容器状态一刀切，不看面板自己的类。 */ .linkhost:not(.show) .lkpane{visibility:hidden;pointer-events:none} .linkcard{height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .linkhead{flex:none;height:48px;display:flex;align-items:center;gap:9px;padding:0 10px 0 12px;background:#fbfcfe;border-bottom:1px solid var(--line)} .linkhead .ico{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex:none} .linkhead .ico.nobg{background:transparent;color:#475467} /* 菜单名在前、网址在后：一眼认出「这是导航里的哪一项」，再看它到底连到哪儿。 网址那条现在是地址栏（可改、回车就跳），不再只是给人看的一行字。 */ .linkhead .lk-name{flex:none;max-width:180px;font-size:13.5px;font-weight:700;color:#1e2733;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ← → ↻：这一页自己的前进 / 后退 / 重新加载（见 menumgr.js 的 LINK_HIST）。 三枚连成一组，和右边那两个出口按钮分开 —— 「走去哪儿」和「打开方式」是两回事。 退到底 / 进到底时按钮自己变灰（disabled），不用另外画一档「不能用」的样子。 */ .linkhead .lk-nav{flex:none;display:flex;align-items:center;gap:3px} .lkbtn{width:27px;height:27px;flex:none;padding:0;border:1px solid var(--line);background:#fff;border-radius:8px; color:#475467;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer} .lkbtn:hover:not(:disabled){background:#eef2ff;border-color:#c7d2fe;color:var(--brand)} .lkbtn:disabled{opacity:.35;cursor:default} /* 地址栏：跟着这一页现在停在哪儿变（站内跳转也同步），改完回车或点「前往」就在这一格里跳过去 */ .linkhead .lk-addr{flex:1;min-width:90px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:8px; background:#fff;font-size:12.5px;font-family:inherit;color:#475467} .linkhead .lk-addr:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(99,102,241,.12)} .linkhead .lk-acts{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px} .linkhead a.btn{text-decoration:none} .linkstage{position:relative;flex:1;min-height:0;background:#fff} .linkframe{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;border:0;background:#fff;display:block} /* 加载遮罩：跨域网页在加载完之前整片白，一句话都不说就像「这一页打不开」。 .stuck 是「8 秒了还没好」那一档（见 menumgr.js 的 linkWatch）：白底让开、只留一张小卡摆在中间， 底下其实在慢慢加载的页面也看得见，遮罩不再吃鼠标 —— 想直接看那个页面就看。 */ .linkwait{position:absolute;left:0;right:0;top:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:rgba(255,255,255,.92);transition:opacity .18s;pointer-events:auto} .linkwait.gone{opacity:0;pointer-events:none} .linkwait .lkw-box{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 26px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(16,24,40,.12);max-width:520px} .linkwait.stuck{background:rgba(255,255,255,.6)} .linkwait.stuck .lkw-spin{display:none} .linkwait.stuck .lkw-t{font-size:14px} .linkwait.stuck .lkw-box{box-shadow:0 10px 30px rgba(16,24,40,.14)} .linkwait .lkw-spin{width:22px;height:22px;border-radius:50%;border:2.5px solid #e6e9f4;border-top-color:var(--brand);animation:lkwspin .7s linear infinite} @keyframes lkwspin{to{transform:rotate(360deg)}} .linkwait .lkw-t{font-size:13px;font-weight:600;color:#1e2733} .linkwait .lkw-d{max-width:470px;font-size:12px;color:var(--mut);line-height:1.8} .linkwait .lkw-act{display:flex;align-items:center;gap:8px} .linkwait .lkw-act a.btn{text-decoration:none} /* 工具条上多了「← → ↻ + 地址栏 + 两个出口」：窄一点先把菜单名收掉， 再窄才动出口按钮 —— 地址栏是能看清「现在在哪儿」的唯一一处，尽量留住。 */ @media(max-width:1180px){.linkhead .lk-name{display:none}} @media(max-width:820px){.linkhead .lk-acts .btn{font-size:12px;padding:4px 8px}} /* ---------- cards & home（首页统计整版重做） ---------- */ /* 首页顶部查询条：一条**通栏白条**（不是圆角面板）——左右各用负边距吃掉 .content 的内边距， 于是它从内容区最左铺到最右，横贯一整条，查询条件就装在这条白条里。 上一版给的是圆角白面板，看着像一张卡片、不像「一条」，所以这里去圆角、只留底边线。 */ .homebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:none;border-bottom:1px solid var(--line);border-radius:0;box-shadow:0 1px 2px rgba(16,24,40,.04);padding:10px 22px;margin:0 -22px 16px} @media(max-width:760px){.homebar{padding:10px 14px;margin:0 -14px 12px}} /* —— 清单卡片：四栏一行（窗口窄了自动降两栏 / 一栏）—— 顶部一道表色 + 右上角一团同色光晕（8% 透明）：不靠边框也认得出是谁； 图标放大到 34px 圆角块；「已完成 / 进行待办」做成胶囊徽章； 分布条加粗、图例两列 —— 卡片窄，一列会把卡片撑得很高。 */ .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px} @media(max-width:1240px){.cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){.cards{grid-template-columns:1fr}} .modcard{position:relative;overflow:hidden;background:#fff;border:1px solid #e8ecf5;border-radius:16px;padding:16px 16px 15px; box-shadow:0 1px 2px rgba(16,24,40,.05);transition:transform .18s,box-shadow .18s,border-color .18s} .modcard:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,24,40,.10);border-color:#dfe4f2} .modcard .bar{position:absolute;left:0;right:0;top:0;height:3px} .modcard .glow{position:absolute;right:-34px;top:-34px;width:110px;height:110px;border-radius:50%;opacity:.08;pointer-events:none} .modcard h3{position:relative;z-index:1;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px;font-weight:700;color:#111a2e} .modcard h3 .tag{font-size:10.5px;color:#fff;padding:2px 8px;border-radius:999px;font-weight:600} /* 卡片标题前那枚图标：与左导航、标签栏同一枚（字符 / 图片），跟着菜单管理的配置走 */ .modcard h3 .ico{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:#fff;font-weight:700;flex:none;box-shadow:0 3px 8px rgba(16,24,40,.14)} .modcard h3 .ico.nobg{background:transparent;color:#475467;box-shadow:none} .modcard .big{font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1.1;color:#111a2e;margin:14px 0 8px} .modcard .big a{color:inherit;text-decoration:none;cursor:pointer} .modcard .big small{font-size:12.5px;color:#98a2b3;font-weight:600;margin-left:6px} .modcard .big.zero a{color:#c7cdd9} /* 两枚胶囊徽章：以前是带虚线的文字，和后面的分类统计挤成一行、分不清哪是哪 */ .modcard .meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px} .modcard .meta a.pill{font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 10px;cursor:pointer;transition:.15s;text-decoration:none} .modcard .meta a.pill.done{background:#ecfdf3;color:#067647;border:1px solid #d1fadf} .modcard .meta a.pill.done:hover{background:#d1fadf} .modcard .meta a.pill.open{background:#fff7ed;color:#b54708;border:1px solid #fed7aa} .modcard .meta a.pill.open:hover{background:#fed7aa} .modcard .meta .note{font-size:11.5px;color:#98a2b3} .segstack{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#eef1f6;margin:0 0 9px} .segstack i{display:block} .modcard .legend2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} .modcard .legend2 .minirow{min-width:0;overflow:hidden;white-space:nowrap} .minirow{display:flex;align-items:center;gap:8px;font-size:12px;color:#3d4757;margin:3px 0} .minirow .dot{width:8px;height:8px;border-radius:50%;flex:none} .minirow .n{margin-left:auto;font-weight:700} /* 左右两栏（即将到期 / 最近更新）：头一行浅底把标题分开，列表项悬停给底； 内容长了在面板里滚，不再把整页撑老长 */ .grid2 .panel{border-radius:16px;border-color:#e8ecf5} .grid2 .panel .ph{background:#fafbfe;border-radius:16px 16px 0 0} .grid2 .panel .pb{max-height:46vh;overflow:auto;padding:10px 16px} .grid2 .feed li{padding:10px 8px;border-radius:10px;transition:background .15s} .grid2 .feed li:hover{background:#fafbfe} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:1000px){.grid2{grid-template-columns:1fr}} .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .panel .ph{padding:13px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px} .panel .ph .sp{flex:1} .panel .pb{padding:14px 16px} /* 三个小统计：左侧一枚淡色图标块（发 / 今 / 周）+ 数字；左色条与图标同色（紫 / 绿 / 橙） */ .statmods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px} @media(max-width:900px){.statmods{grid-template-columns:1fr}} .statmod{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e8ecf5;border-radius:16px; padding:14px 16px;cursor:pointer;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:transform .18s,box-shadow .18s,border-color .18s} .statmod:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,24,40,.10);border-color:#dfe4f2} .statmod:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#6366f1} .statmod .sic{width:38px;height:38px;border-radius:12px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:800} .statmod .stit{font-size:12px;color:#98a2b3;margin-bottom:2px} .statmod .snum{font-size:26px;font-weight:800;color:#111a2e;line-height:1.15} .statmod .snum small{font-size:12px;font-weight:600;color:#98a2b3;margin-left:5px} .statmods .statmod:nth-child(2):before{background:#10b981} .statmods .statmod:nth-child(3):before{background:#f59e0b} .statmods .statmod:nth-child(1) .sic{background:#eef0ff;color:#4f46e5} .statmods .statmod:nth-child(2) .sic{background:#ecfdf3;color:#067647} .statmods .statmod:nth-child(3) .sic{background:#fff7ed;color:#b54708} .charts{display:none} /* bar */ .bars{margin-top:6px} .barline{display:grid;grid-template-columns:86px 1fr 44px;gap:8px;align-items:center;margin:7px 0;font-size:12px} .barline .nm{color:#475467;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .barline .tr{background:#eef1f6;border-radius:5px;height:12px;overflow:hidden} .barline .tr i{display:block;height:100%;border-radius:5px;min-width:2px} .barline .v{font-weight:700;text-align:right;color:#1e2733} .donutwrap{display:flex;align-items:center;gap:18px} .donut{width:104px;height:104px;border-radius:50%;position:relative;flex:none} .donut .in{position:absolute;inset:16px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px} .legend{flex:1;min-width:0} .legend .minirow{margin:5px 0} /* due & recent list */ .feed{list-style:none} .feed li{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed #eef0f5;align-items:flex-start} .feed li:last-child{border-bottom:0} .feed .b{width:30px;height:30px;border-radius:8px;color:#fff;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700} /* 首页清单（即将到期 / 最近更新 / 记录弹窗）里那枚小方块：与左导航同一枚图标， 菜单管理里换了图标或底色，这里跟着变。配了图片就贴图片（同 .ico 一样留一圈边距， 不顶着四条边）；勾掉「不配置底色」时不铺底，改用所在行的文字颜色 —— 白字在白底上会看不见。 */ .feed .b img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit;padding:14%;pointer-events:none} .feed .b.nobg{background:transparent;color:inherit} .feed .b.nobg img{padding:0} .feed .tx{flex:1;min-width:0} .feed .tx .nm{font-weight:600;font-size:13px;color:#1e2733;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .feed .tx .dt{font-size:11.5px;color:var(--mut);margin-top:2px} .feed .due-ov{color:var(--bad)} .feed .due-ok{color:var(--warn)} /* ---------- table view ---------- */ .pagehead{display:flex;align-items:flex-end;gap:12px;margin-bottom:10px;flex-wrap:wrap} .pagehead .tt{font-size:20px;font-weight:800} .pagehead .tt small{font-size:12.5px;color:var(--mut);font-weight:500;margin-left:10px} .pagehead .meta{font-size:12px;color:var(--mut);margin-top:3px} .pagehead .sp{flex:1} .btn{border:1px solid #d9deea;background:#fff;color:#344054;padding:6px 12px;border-radius:9px;font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:.15s;font-weight:500;white-space:nowrap} .btn:hover{border-color:#aab4cc;background:#f8fafd} .btn.primary{background:linear-gradient(135deg,#4f46e5,#6d5cf0);border:none;color:#fff;box-shadow:0 4px 10px rgba(79,70,229,.25)} .btn.primary:hover{filter:brightness(1.06)} .btn.danger{color:#d92d20;border-color:#f2b8b5;background:#fff7f7} .btn.danger:hover{background:#fee9e8} .btn.sm{padding:3px 8px;font-size:12px;border-radius:7px} .btn.ghost{border-color:transparent;background:transparent;color:#475467} .btn.ghost:hover{background:#f2f4f8} .toolbar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .toolbar .right{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .toolbar>.btn,.toolbar .drop>.btn{height:34px} .searchbox{position:relative;display:inline-flex;align-items:center} .searchbox input{padding:0 0 0 22px;border:none;background:transparent;outline:none;font-size:13px;color:#344054;height:24px;width:170px} .searchbox input::placeholder{color:#98a2b3} /* 放大镜是纯装饰，不能吃点击（否则点图标那一下落不到输入框上，感觉「点了没反应」） */ .searchbox svg{position:absolute;left:0;top:5px;opacity:.45;width:14px;height:14px;pointer-events:none} .drop{position:relative;display:inline-block} .drop .drop-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);display:none;min-width:150px;z-index:50;padding:6px;flex-direction:column;gap:2px} .drop.open .drop-menu{display:flex} .drop-menu .btn{width:100%;justify-content:flex-start;border:none;background:transparent;padding:7px 12px} .drop-menu .btn:hover{background:#f6f7ff} /* 下拉项上的图标（与查询框同一枚放大镜 SVG）：.btn 已是 inline-flex + gap:6px，天然对齐。 只锁住不被压扁，并压淡一档 —— 下拉里其它图标都是 ☰ ▦ ↻ 这类文字字形，线条比它们黑会显得跳。 */ .drop-menu .btn svg{flex:none;opacity:.75} .qfilters{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap} .qfilters .qf{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #dde2ec;border-radius:9px;padding:0 10px;font-size:13px;color:#475467;height:34px} .qfilters .qf label{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:#64748b;margin:0} .qfilters .qf>span{color:#64748b;font-size:12px;white-space:nowrap} .qfilters .qf input[type=date], .qfilters .qf input[type=text], .qfilters .qf input[type=number], .qfilters .qf select{padding:0;border:none;font-size:13px;color:#344054;background:transparent;outline:none;height:24px;box-sizing:border-box;width:auto} .qfilters .qf input[type=text]{width:110px} .qfilters .qf input:focus, .qfilters .qf select:focus{border:none;box-shadow:none} .qfilters .qf option{color:#344054} /* 查询条里的下拉角标：和表单（.fitem select）用的是同一枚自绘箭头。 以前统一角标时漏了工具栏这一层，查询条件里的 展开后都走 util.js 那块自绘面板（.ddpanel），全站一个观感。 */ /* 弹窗里三块的摆法（与 ccRender 一一对应）：顶上一条预览通栏， 下面「卡片外观」「显示字段」左右并排 —— 预览画的是「列表上那张卡」（同一个渲染器）， 通栏后一行 8 格的格子约 100px，字段名与值能并排站住，看得清真实排版。 宽度要给足：这两块里一行都塞着好几枚控件（「状态」那一行是 字段 + 放哪 + 样式 三枚）， 1160px 时每块只剩 530px，塞不下的行就折成两行，末尾那几枚小按钮被 margin-left:auto 推到第二行最右边 —— 一行折成两行、还折得歪歪扭扭，就是又挤又丑的来源。 1680px 是量着最挤的那两处定的： · 「显示字段」那条工具带（选中 / 上卡 / 插入 / 一键排版 四组十一枚按钮，约 670px） 必须一行排得下，否则最后一组会孤零零掉到第二行； · 「卡片外观」那几行控件更多，左栏还要再宽一点（见下面 .cc-app 的 flex-grow）。 */ .ov.ccfgwide>.box{width:min(1680px,96vw);max-width:96vw} /* 内容区不整体上下滚：改成竖排 flex，剩下的高度平分给下面两块，各滚各的 （选择器带上 .box .bb 才压得住「.box .bb{overflow:auto}」那条通用规则） */ .box .bb.ccfg-bb{overflow:hidden;display:flex;flex-direction:column} .ccfg-wrap{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0} /* ① 预览：通栏、定高（卡片高矮不定，超了在框里滚，不会把下面两块顶下去） */ .ccfg-prev{flex:none;margin-bottom:0} .ccfg-prev>.cc-set-b{padding:10px 12px 12px} /* ② 下半边：两块并排，一样高、各自在框里滚。宽窄按内容分：「卡片外观」一行里控件多 （一条状态就是「字段 + 放哪 + 样式」三枚），比右边略宽一点点就好； 右边那条工具带（约 670px）是全场最宽的硬需求，宁可让给右边 —— 它一折行， 最后一组按钮就会孤零零掉到第二行，比左栏紧一点更难看。 */ .ccfg-mods{flex:1;min-height:0;display:flex;gap:12px;align-items:stretch} .ccfg-mods>.cc-set{flex:1 1 0;min-width:0;min-height:0;margin-bottom:0; display:flex;flex-direction:column} .ccfg-mods>.cc-app{flex-grow:1.08} .ccfg-mods>.cc-set>.cc-set-b{flex:1;min-height:0;overflow:auto} /* 「显示字段」那块：工具带与批量条钉在上头，只有清单自己滚 */ .ccfg-list>.cc-set-b{display:flex;flex-direction:column;overflow:hidden;padding:10px 12px 12px} .ccfg-list .cc-list{flex:1;min-height:140px;max-height:none} /* 窗口窄就上下排：三块变成一条竖列，整页自己上下滚，两块各给一个高度上限、在里头滚。 门槛放在 1240px（＝并排时每块只剩 600px 以下）：再窄下去，一行里的控件就塞不下要折行了。 这里一律改成 display:block —— 竖排时留空的 flex:1 会把下面那块压成 0 高（内容溢出去， 外层又 overflow:hidden，整块就"显示不全"了）；选择器也都带上 .box .bb / .ccfg-mods 才压得住上面那几条更具体的规则。 */ @media(max-width:1240px){ .box .bb.ccfg-bb{display:block;overflow:auto} .ccfg-wrap{display:block;min-height:0} .ccfg-prev{margin-bottom:12px} .ccfg-mods{display:block;min-height:0} .ccfg-mods>.cc-set{display:block;margin-bottom:0} .ccfg-mods>.cc-set+.cc-set{margin-top:12px} .ccfg-mods>.cc-set>.cc-set-b{min-height:0;max-height:52vh;overflow:auto} } /* 预览框：占满这一栏。早先会按「一行几张卡」把自己缩到 35% / 52% 宽， 缩完卡片内容挤成一团根本看不清；现在宽度这个事交给底下的说明文字。 垫一层很浅的底：卡片是白的，白底上再摆白卡只能靠那条 1px 边框认边界， 浅底一垫，卡片（自带阴影）就浮起来了 —— 一眼看出"这是一张卡"。 */ .cc-prev{border:1px solid var(--line);border-radius:12px;background:#f8fafd;padding:15px;width:100%; height:clamp(210px,30vh,320px);overflow:auto;box-shadow:inset 0 1px 2px rgba(16,24,40,.03)} .cc-prev-note{margin-top:8px;font-size:11.5px;color:#98a2b3;line-height:1.6} .cc-nodata{padding:30px 12px;text-align:center;font-size:12px;color:#98a2b3;line-height:1.8} /* ---------- ② 显示字段：一行一项 ---------- */ /* 工具带：同一类事挨在一起，中间一条竖线隔开，不再是一长串按钮挤成一堆 */ .cc-bar{display:flex;align-items:center;gap:5px 10px;flex-wrap:wrap;margin-bottom:8px} .cc-grp{display:inline-flex;align-items:center;gap:5px;padding-right:10px;border-right:1px solid #eef1f6} .cc-grp:last-child{border-right:0;padding-right:0} .cc-grp .t{color:#98a2b3;font-size:11.5px} /* 窗口不够宽时（并排两块、右边那块不到 ~700px）先把这四枚组名小字收掉： 按钮自己「全选 / 全部上卡 / 分组标题 / 单列」就把事说明白了，竖线分隔还在， 分组照样看得出来 —— 总比最后那一组被挤到第二行、孤零零挂在那儿强。 1560px 这个门槛是量出来的：再宽一点，带上组名也排得下（见上面弹窗宽度那段）。 */ @media(max-width:1560px){ .cc-bar .cc-grp>.t{display:none} } .cc-list{border:1px solid #eef1f6;border-radius:10px;overflow-y:auto;background:#fff; max-height:calc(100vh - 470px);min-height:150px} /* 一行：拖动把 · 序号 · 多选框 · 字段名 …… 宽 / 高 / 对齐 · ⋯ · ↑↓✕ */ .cc-row{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:12.5px; border-top:1px solid #f4f6fb;background:#fff;min-height:40px} .cc-row:first-child{border-top:0} .cc-row:hover{background:#f8faff} .cc-row.grp{background:#fbfbfe} .cc-row .hdl{flex:none;color:#c2c9d8;cursor:grab;user-select:none;padding:0 2px;font-size:13px;letter-spacing:-1px} .cc-row .hdl:hover{color:#6366f1} .cc-row .ord{flex:none;min-width:20px;text-align:center;color:#a9b1c0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px} .cc-row .cl{display:inline-flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap;color:#475467} .cc-row .cl input{margin:0;cursor:pointer} .cc-row .cl i{font-style:normal;color:#98a2b3;font-size:11.5px} .cc-row .nm{color:#344054;font-weight:500;min-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cc-row:not(.on) .nm,.cc-row:not(.on) .sel,.cc-row:not(.on) .num,.cc-row:not(.on) .cc-col, .cc-row:not(.on) input.gname{opacity:.55} .cc-row .sp{flex:1} /* 「宽 3」「高 0」「对齐 居中」：小灰字标签 + 控件，每行的标签都对齐在同一列上 */ .cc-row .fs,.cc-l2 .fs,.cc-bat .fs{display:inline-flex;align-items:center;gap:4px;flex:none} /* 这一列小标签（宽 / 高 / 对齐 / 内列）一律占 26px：单字的「宽」也留出两个字的位置， 于是同一行的「宽 / 高 / 对齐」在行与行之间落在同一条竖线上。 早先按内容自然宽，容器行那个三字标签把整排控件往左推十来像素，一行一个样。 （「格」那种跟在框后面的后缀标签不在此列 —— 它不需要参与这列对齐） */ .cc-row .fs .lb,.cc-l2 .fs .lb,.cc-bat .fs .lb{color:#98a2b3;font-size:11.5px;white-space:nowrap;min-width:26px} .cc-set-r .lb{color:#98a2b3;font-size:11.5px;white-space:nowrap} /* 尾部三枚（↑ ↓ ✕）：平时淡着，鼠标移到这一行才亮 —— 一行里一眼要看的就只剩字段名与宽/高/对齐 */ .cc-row .acts{display:inline-flex;align-items:center;gap:1px;flex:none;opacity:0;transition:opacity .12s} .cc-row:hover .acts,.cc-row.sel .acts,.cc-row:focus-within .acts{opacity:1} @media(hover:none){ .cc-row .acts{opacity:1} } /* 触屏没有 hover，就一直亮着 */ .cc-row .mini{border:0;background:transparent;color:#98a2b3;cursor:pointer;font-size:13px;line-height:1;padding:0 3px} .cc-row .mini:hover{color:var(--brand)} .cc-row .mini.x:hover{color:#dc2626} .cc-row .mini.exp{flex:none;height:28px;min-width:30px;padding:0 6px;border:1px solid #e4e8f0;border-radius:8px; background:#fff;font-size:12px;color:#667085} .cc-row .mini.exp:hover{border-color:#c7d2fe;color:var(--brand)} .cc-row .mini.fold{flex:none;width:14px;padding:0 2px;font-size:11px;color:#667085} /* 拖动排序：整块抬起来一点，别让用户以为没抓住（容器＝连里面那张列表一起抬） */ .cc-row.dragging,.cc-wrap.dragging{background:#eef1ff;border-radius:8px;position:relative;z-index:2; box-shadow:0 6px 16px rgba(16,24,40,.14)} .cc-row .hdl{touch-action:none;-webkit-user-select:none;user-select:none} body.cc-drag{cursor:grabbing;user-select:none} body.cc-drag .cc-row .hdl{cursor:grabbing} /* 行里、批量条里、外观卡里的控件全是一个长相：28px 高、8px 圆角、同一个边色 —— 看着才齐 */ .cc-row select,.cc-row input.num,.cc-row input.gname,.cc-l2 select,.cc-l2 input.num, .cc-l2 input.hex,.cc-bat select,.cc-bat input.num,.cc-bat input.hex,.cc-set input.hex, .cc-set select,.cc-set input.num,.cc-bar input.num{height:28px;border:1px solid #e4e8f0;border-radius:8px; background:#fff;color:#344054;font-size:12.5px;outline:none;padding:0 7px} /* 能敲个数的小框（占几格 / 占几行 / 值行数 / 容器里一行几格 / 排版列数）： 点一下或聚焦就展开全站那块自绘面板（util.js 的 .ddpanel），候选是固定那几张； 框里照样能直接敲，敲过的值不留痕。右边那枚小角标＝「这儿有现成的数可挑」， 与旁边 的浏览器原生箭头、 ③「可自由输入」的 input[list] 自带的原生下拉指示，三种高度/位置/颜色都不一样。 现在把浏览器自带的都藏掉，统一用同一枚 svg。 */ .fitem select, .fitem input[list]{color:var(--ink);appearance:none;-webkit-appearance:none;-moz-appearance:none; background-image:var(--dd-arrow); background-repeat:no-repeat;background-position:right 10px center;background-size:12px 12px;padding-right:30px} /* 可输入下拉（input[list]）：Chrome / Edge 的原生下拉指示就是这个伪元素，一并藏掉 */ .fitem input[list]::-webkit-calendar-picker-indicator{display:none;opacity:0} /* 带「清空 ×」的字段下拉（清单表）：角标仍是同一枚，只是文字要多让开一点 */ .fitem .fsel select{width:100%;box-sizing:border-box;padding-right:54px} .fitem .fsel select:required:invalid{color:#9aa3b2} .fitem .fsel option{color:#1e2733;background:#fff} .fitem .fsel .selclear{position:absolute;right:28px;top:50%;transform:translateY(-50%);border:none;background:transparent;padding:0;width:19px;height:19px;border-radius:50%;color:#98a2b3;font-size:13px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center} .fitem .fsel.has .selclear{display:flex} .fitem .fsel .selclear:hover{color:#344054;background:#e8ecf4} .fitem input:disabled{background:#f4f6fa;color:#98a2b3} .fitem textarea{resize:vertical;line-height:1.55} .fhint{font-size:11px;color:#98a2b3} .ff .reqstar{color:#e5484d} /* ================= 12 栅格通用表单弹窗（formmodal.js） ================= */ /* 弹窗体内部说明 */ .fmhint{font-size:12.5px;color:#64748b;margin:0 0 12px;line-height:1.6} /* 12 列栅格：每行 12 等分，每个字段宽度 = span 份 */ .fgrid12{display:grid;grid-template-columns:repeat(12,1fr);gap:10px 16px;align-items:start} .fgrid12>.ff,.fgrid12>.fv{grid-column:span 12} /* 默认 span（移动端 / 窄屏下让每个字段都占满，避免挤压看不清） */ @media (max-width:760px){ .fgrid12{grid-template-columns:1fr} .fgrid12>.ff,.fgrid12>.fv{grid-column:span 1 !important} } /* 单个字段框：与原 .fitem 视觉一致 */ .ff{display:flex;flex-direction:column;gap:4px;min-width:0;position:relative} .ff>label{font-size:12px;font-weight:600;color:#475467} /* 输入框底色统一用 background-color（不能用 background 简写，否则会把下面的下拉角标图一起抹掉） */ .ff>input[type=text],.ff>input[type=date],.ff>input[type=number],.ff>input[type=color],.ff>textarea,.ff .fsel>select{ border:1px solid #d9deea;border-radius:9px;padding:8px 10px;outline:none;transition:.15s;background-color:#fff;width:100%;box-sizing:border-box;font:inherit;color:inherit} .ff>input[type=color]{padding:2px;height:34px;cursor:pointer} .ff>input:focus,.ff>select:focus,.ff>textarea:focus,.ff .fsel>select:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12)} .ff>input:disabled{background-color:#f4f6fa;color:#98a2b3} .ff>textarea{resize:vertical;line-height:1.55;font-family:inherit} /* 下拉框：之前只给 .ff>select 写了样式，但 select 实际套在 .ff>.fsel 里， 选择器根本没命中 —— 结果这套弹窗里的下拉一直是浏览器原生样式（原生灰边框 + 原生箭头）， 和 .fitem 里的字段长得不一样。这里补上：统一自绘角标 + 圆角边框。 */ .ff select,.ff input[list]{appearance:none;-webkit-appearance:none;-moz-appearance:none; background-image:var(--dd-arrow);background-repeat:no-repeat;background-position:right 10px center;background-size:12px 12px; padding-right:30px;cursor:pointer} .ff select option{color:#1e2733;background:#fff} .ff input[list]::-webkit-calendar-picker-indicator{display:none;opacity:0} /* 带「清空 ×」的字段下拉：角标仍是同一枚，只是文字多让开一点，× 压在角标左边 */ .ff .fsel{position:relative;display:block} .ff .fsel>select{width:100%;box-sizing:border-box;padding-right:54px} .ff .fsel>select:required:invalid{color:#9aa3b2} .ff .fsel>.selclear{position:absolute;right:28px;top:50%;transform:translateY(-50%);border:none;background:transparent;padding:0;width:19px;height:19px;border-radius:50%;color:#98a2b3;font-size:13px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:3} .ff .fsel.has>.selclear{display:flex} .ff .fsel>.selclear:hover{color:#344054;background:#e8ecf4} /* 多选下拉（清单表上的「团队」）：样子照抄上面那排单选下拉 —— 同一枚角标、同一套圆角边框、 右边同样留出一枚「清空 ×」，点开才是一张带勾选框的浮层（团队一多，铺一排格子会把表单撑得老高）。 浮层 .msel-pop 是点开时临时建在 body 上的（见 formmodal.js 的 fmMultiOpen）， 所以这里的定位只看视口：fixed + 高 z-index，压在弹窗（z-index 100/120）之上。 */ /* 两处表单容器都用：.fitem（机构 / 团队 / 用户等手写弹窗）和 .ff（清单表的记录表单） */ .fsel.msel{display:block;min-width:0} .msel-btn{width:100%;box-sizing:border-box;border:1px solid #d9deea;border-radius:9px;padding:8px 54px 8px 10px; background-color:#fff;background-image:var(--dd-arrow);background-repeat:no-repeat;background-position:right 10px center;background-size:12px 12px; text-align:left;font:inherit;color:inherit;cursor:pointer;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.15s} .msel-btn:hover{border-color:#c7cee0} .msel.open>.msel-btn{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12)} /* 一个都没勾：灰字占位，和必填单选的「未选择」一个观感 */ .msel-btn .ph{color:#9aa3b2} .msel-pop{position:fixed;z-index:400;max-height:264px;overflow:auto;box-sizing:border-box; background:#fff;border:1px solid #d9deea;border-radius:10px;box-shadow:0 14px 32px rgba(16,24,40,.18);padding:5px} .msel-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:12.5px;color:#344054} .msel-opt:hover{background:#eef2ff} .msel-opt input{margin:0;cursor:pointer;flex:none} .msel-opt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ================= 编辑布局模式 ================= 两套表单容器都要能进编辑态： .fgrid12 > .ff —— 清单表的记录表单（formmodal.js 渲染） .fgrid12 > .fv —— 清单表的记录详情（同一套引擎，但样式独立，见上面 .fv 一组） .fgrid > .fitem —— 机构 / 团队 / 角色 / 用户 / 资料 / 字典 / 菜单等手写弹窗 三边共用同一套把手与工具条，所以下面统一用 .fgrid12.editing, .fgrid.editing 并列选择器。 */ /* 编辑模式下整个栅格背景染一层淡色，提示「现在是布局模式」 */ .fgrid12.editing,.fgrid.editing{background:repeating-linear-gradient(45deg,#f6f7ff,#f6f7ff 6px,#eef0ff 6px,#eef0ff 12px);padding:12px;border-radius:10px} .ff.ff-edit,.fitem.ff-edit,.fv.ff-edit{outline:1.5px dashed #6366f1;outline-offset:3px;background:#fff} /* 拖拽把手 */ .fm-handle{position:absolute;background:rgba(99,102,241,.55);border-radius:3px;z-index:5;transition:.12s} .fm-handle-r{right:-6px;top:0;bottom:0;width:10px;cursor:col-resize} .fm-handle-b{left:0;right:0;bottom:-6px;height:10px;cursor:row-resize} /* 排序把手：左上角那枚 ⠿，按住可把整个字段拖到别的位置 */ .fm-handle-g{left:-7px;top:-7px;width:20px;height:20px;background:#6366f1;color:#fff;font-size:12px;line-height:20px;text-align:center;border-radius:6px;cursor:grab;user-select:none;font-weight:700} .fm-handle-g:hover{background:#4f46e5} /* 拖动排序时：跟随指针的浮动替身 + 目标位置的空占位框 */ .fm-ghost{position:fixed;z-index:300;pointer-events:none;opacity:.92;background:#fff;border-radius:10px;padding:8px;box-sizing:border-box;box-shadow:0 14px 34px rgba(15,23,42,.28)} .fm-sort-ph{border:1.5px dashed #6366f1;border-radius:10px;background:#eef0ff;min-height:46px;box-sizing:border-box} body.fm-sorting,body.fm-sorting *{cursor:grabbing !important;user-select:none !important;-webkit-user-select:none !important} /* label 可改名提示 */ .ff-edit>label{cursor:text;border-bottom:1px dashed transparent;padding-bottom:1px} .ff-edit>label:hover{border-bottom-color:#6366f1} /* 编辑态顶部提示条（面板里是右侧工作台的说明） */ .fm-editbar{display:flex;align-items:center;gap:10px;background:#eef0ff;border:1px solid #c5cdf7;border-radius:9px;padding:8px 12px;margin-bottom:10px} .fm-edithint{flex:1;font-size:12.5px;color:#475467;line-height:1.5} .fm-edithint b{color:#4f46e5} /* 拖拽进行中：禁用文本选中 */ body.fm-dragging,body.fm-dragging *{user-select:none !important;-webkit-user-select:none !important} /* 布局模式下输入框置灰并锁住交互（只调布局，别误改数据）。 把手必须重新开启 pointer-events，否则布局模式下拖不了把手。 注意用 background-color，别把下拉角标图抹掉。 */ .fgrid12.editing .ff input,.fgrid12.editing .ff select,.fgrid12.editing .ff textarea, .fgrid.editing .fitem input,.fgrid.editing .fitem select,.fgrid.editing .fitem textarea{ pointer-events:none;background-color:#f4f6fa;color:#98a2b3} /* 表单里的按钮（清空 ×、自定义字段的加/删、附件删除…）一律点不动，避免「调布局时误触」 */ .fgrid12.editing .ff button,.fgrid.editing .fitem button{pointer-events:none} .fgrid12.editing .ff .fm-handle,.fgrid.editing .fitem .fm-handle{pointer-events:auto} /* ================= 弹窗布局工作台（更多操作 → 弹窗布局设置） ================= 左边＝弹窗清单（当前页面的排最前），右边＝该弹窗的真实预览，可直接拖拽调整。 预览是把弹窗真正渲染一遍再"截"过来，所以所见即所得；不用先关掉面板再开目标弹窗。 */ .ov.fmwide>.box{width:1010px} .fmwork{display:flex;gap:14px;align-items:flex-start} .fmwnav{width:198px;flex:none;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;max-height:calc(100vh - 210px);overflow:auto;padding-right:2px} .fmwnav-h{font-size:11px;font-weight:700;color:#98a2b3;padding:9px 8px 3px;letter-spacing:.6px} .fmwnav-g{font-size:11.5px;color:#b4bccb;padding:6px 8px 2px} .fmwnav-i{display:flex;align-items:center;gap:6px;text-align:left;border:1px solid transparent;background:#f6f7fb;border-radius:8px;padding:7px 9px;font-size:12.5px;color:#475467;cursor:pointer;transition:.12s;font:inherit;font-size:12.5px;line-height:1.4} .fmwnav-i:hover{background:#eef0ff;color:#4f46e5} .fmwnav-i.on{background:#eef0ff;border-color:#c7d2fe;color:#4f46e5;font-weight:700} .fmwnav-i .fmwnav-d{margin-left:auto;flex:none;width:6px;height:6px;border-radius:50%;background:#22c55e} .fmwmain{flex:1;min-width:0} /* 限制成和真弹窗内容区一样宽（780px 的 box 减去左右各 18px 内边距）， 这样预览里"半宽 / 全宽"看到的比例和真正打开时一致，不会因为工作台更宽而失真 */ .fmwstage{border:1px solid #e5e9f2;border-radius:10px;padding:10px;background:#fff;max-width:744px;box-sizing:border-box} .fmwstage .fm-tid{display:none} .fmwempty{font-size:13px;color:#98a2b3;padding:40px 20px;text-align:center;line-height:1.8} /* ── 记录详情的「字段块」：独立命名空间 .fv，和表单字段（.ff）彻底分家 ── 详情是「看」的、表单是「填」的。早先两者共用 .ff，表单那套「灰底圆角输入框」的样式 就连带把详情页画成一堆假输入框 —— 所以详情块单独用 .fv，改表单永远改不到它。 外观还原成以前那张表（原先由 .kvgrid / .prow / .pcell 画）： 整张表一个圆角外框，标签格灰底 + 右分隔线，行列之间一条细线。 做法：外层 .fvtable 用 1px 的 gap，底色就是线的颜色 —— 缝隙自然成了表格线； 每个 .fv 是白底、标签在左值在右，和 .pcell 的观感一致。 底下仍然是 .fgrid12 栅格、每块带 data-fid，所以「弹窗布局设置」照样能拖顺序 / 调宽度。 */ .fvtable{background:#f1f3f8;gap:1px;border:1px solid #e5e9f0;border-radius:12px;overflow:hidden;align-items:stretch} /* 进编辑态时放开裁切，否则最右边那列的拖拽把手（悬在格子外侧 -6px）会被切掉够不着 */ .fvtable.editing{overflow:visible} .fv{background:#fff;display:flex;align-items:stretch;min-width:0;position:relative; border-bottom:5px solid #fff} /* 容易看花眼的是「标签」：灰底原来从上铺到下，一行接一行连成一条灰带，糊成一片。 标签格 140px：「预处理工时（人/天）」十个字要 114px，110px 装不下会顶到分隔线。 做法：每个字段块（.fv，布局设置里的一「格」）自己带一条 5px 白底边 —— 格子拉多宽白条就多长，和布局设置里的单元等长。标签灰底铺到白条为止就收住。 上下内边距 10px → 8px，正好抵掉这 5px，整行高度没变。 */ .fv>.pl{width:140px;flex:none;padding:8px 12px;border-right:1px solid #f1f3f8; background:#f8fafd; color:#667085;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap} .fv>.pv{flex:1;min-width:0;padding:8px 12px;color:#1e2733;font-size:13px;line-height:1.5; word-break:break-word;white-space:pre-wrap} .fv>.pv:empty::before{content:'—';color:#a8b0bf} .fm-tid{display:none} /* column picker / export */ .colpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:8px} .colpick label{display:flex;align-items:flex-start;gap:7px;border:1px solid #e5e9f2;border-radius:9px;padding:7px 9px;font-size:12.5px;cursor:pointer;transition:.12s} .colpick label:hover{border-color:#b9c4ff;background:#f6f7ff} .colpick label.on{border-color:#6366f1;background:#eef0ff} .colpick input{display:none} .colpick .ck{flex:none;width:15px;text-align:center;line-height:1.45;color:#98a2b3} .colpick label.on .ck{color:#6366f1} .colpick .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .colpick .tx b{font-weight:600;color:#475467;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .colpick .tx i{font-style:normal;font-size:10.5px;color:#98a2b3;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .colpick label.on .tx b{color:#4338ca} /* column manager: reorder + rename */ .colmgr{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto;padding-right:4px} .colmgr .crow{display:flex;align-items:center;gap:8px;border:1px solid #e5e9f2;border-radius:9px;padding:8px 10px;background:#fff;transition:.12s} .colmgr .crow.on{border-color:#6366f1;background:#eef0ff} .colmgr .crow .ord{width:24px;text-align:center;font-size:12px;color:#98a2b3;font-variant-numeric:tabular-nums;flex:none} .colmgr .crow .mv{display:flex;flex-direction:column;gap:1px;flex:none} .colmgr .crow .mv button{width:22px;height:17px;padding:0;border:none;background:#f1f4f8;color:#475467;border-radius:4px;font-size:11px;line-height:1;cursor:pointer} .colmgr .crow .mv button:hover{background:#e0e6f5} .colmgr .crow .mv button:disabled{opacity:.35;cursor:not-allowed} /* 固定列（#序号 / 创建时间 / 操作…）：位置钉死，不给 ↑ ↓，换成一把小锁 */ .colmgr .crow.pin{border-style:dashed} .colmgr .crow .pinfix{width:22px;text-align:center;font-size:11px;flex:none;cursor:help;opacity:.8;line-height:1} .colmgr .crow .chk{width:18px;text-align:center;color:#6366f1;font-size:14px;cursor:pointer;flex:none;user-select:none} .colmgr .crow .name{flex:1;font-size:13px;color:#1e2733;cursor:text;padding:3px 6px;border-radius:5px;border:1px solid transparent;word-break:break-all} .colmgr .crow .name:hover{background:#f6f7ff;border-color:#e5e9f2} .colmgr .crow .name input.edit{width:100%;border:1px solid #6366f1;border-radius:5px;padding:4px 7px;font-size:13px;outline:none;box-shadow:0 0 0 2px rgba(99,102,241,.12);background:#fff} .colmgr .hint{font-size:11.5px;color:#98a2b3;margin-bottom:10px;line-height:1.5} .colmgr .crow{flex-wrap:wrap} .colmgr .crow .name{flex:1;min-width:140px} .lset{display:flex;gap:6px;flex:1;justify-content:flex-end;min-width:180px} .lset select{border:1px solid #e5e9f2;border-radius:6px;padding:3px 6px;font-size:12px;color:#475467;background:#fff;outline:none} .lset select:focus{border-color:#6366f1} /* 标题（表头）对齐：与左侧数据格排版分组，中间加一道竖线，一眼能看出是两份独立配置 */ .thset{display:flex;align-items:center;gap:4px;flex:none;margin-left:2px;padding-left:9px;border-left:1px solid #e5e9f2} .thset em{font-style:normal;font-size:11.5px;color:#98a2b3} .thset select{border:1px solid #e5e9f2;border-radius:6px;padding:3px 6px;font-size:12px;color:#475467;background:#fff;outline:none} .thset select:focus{border-color:#6366f1} /* —— 列宽 —— ① 配置弹窗里的「宽度」输入（长期生效，存 prefs）； ② 列表表头右边界 8px 是拖拽区，拖动＝临时宽度（只存内存，刷新还原）。 命中判定与光标切换都在 JS 里做（th 上的内联 cursor），不影响表头本身的 sticky。 */ .wset{display:flex;align-items:center;gap:4px;flex:none;margin-left:2px;padding-left:9px;border-left:1px solid #e5e9f2} .wset em{font-style:normal;font-size:11.5px;color:#98a2b3} .wset input{width:62px;border:1px solid #e5e9f2;border-radius:6px;padding:3px 6px;font-size:12px;color:#475467;background:#fff;outline:none} .wset input:focus{border-color:#6366f1} .wset i{font-style:normal;font-size:11px;color:#b8c0d0} body.colresize,body.colresize *{cursor:col-resize!important;user-select:none!important} /* —— Excel 导入弹窗：一张工作表一张卡片，左边「表名 + 匹配情况」，右边「导入到哪张清单」 —— */ .xlhint{font-size:11.5px;color:#98a2b3;line-height:1.65;margin:0 0 10px} .xlhint b{color:#475467} .xlrows{display:flex;flex-direction:column;gap:6px} .xlrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid #e5e9f2;border-radius:10px;background:#fff;transition:.12s} .xlrow.on{border-color:#6366f1;background:#f8f9ff} .xlrow.unmatch{border-style:dashed} .xlpick{display:flex;align-items:flex-start;gap:8px;flex:1;min-width:0;cursor:pointer} .xlpick .cb,.xlclear .cb{width:15px;height:15px;margin:2px 0 0;flex:none;cursor:pointer;accent-color:#6366f1} .xltx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .xltx b{font-size:13px;font-weight:600;color:#1e2733;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .xltx i{font-style:normal;font-size:11.5px;color:#98a2b3;line-height:1.5;word-break:break-word} .xlrow.unmatch .xltx i{color:#e0873a} .xlsel{flex:none;max-width:220px;padding:5px 7px;border:1px solid #dfe4ee;border-radius:8px;font-size:12px;color:#475467;background:#fff;outline:none;cursor:pointer} .xlsel:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12)} .xlclear{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 11px;border:1px solid #e5e9f2;border-radius:10px;font-size:12.5px;color:#475467;cursor:pointer} .xlclear .cb{margin:0} .xlwarn{margin:8px 0 0;padding:7px 10px;border:1px solid #fdeccb;border-radius:9px;background:#fffaeb;color:#b54708;font-size:11.5px;line-height:1.6} @media(max-width:560px){.xlrow{flex-wrap:wrap}.xlsel{max-width:100%;width:100%}.xltx b{white-space:normal}} .exportfmt{display:flex;gap:18px;margin:6px 0 12px} .exportfmt label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer} .countnote{font-size:12px;color:var(--mut);background:#f6f7fb;border:1px dashed #d9deea;border-radius:9px;padding:8px 12px;margin-bottom:12px;line-height:1.6} .empty-state{text-align:center;padding:42px 0;color:#98a2b3} .empty-state .big{font-size:34px;margin-bottom:8px} /* ---------- 按页取数：这一页的数据「正在取 / 没取到」时的内容区 ---------- 数据没到位就绝不画页面（见 js/render.js 里 render() 的那道闸）， 所以这一屏要说清楚三件事：在等哪几份文档、取不到是为什么、该怎么办。 */ .pgwait{padding:56px 24px;text-align:center;color:var(--mut)} .pgwait .pgwait-t{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:10px} .pgwait .pgwait-d{font-size:12.5px;line-height:1.8;margin:0 auto 6px;max-width:640px} .pgwait .pgwait-a{margin-top:16px} a.mini{color:#4f46e5;text-decoration:none;cursor:pointer;font-weight:600} a.mini:hover{text-decoration:underline} .tag-line{font-size:11px;color:#98a2b3;line-height:1.7} /* 空列表时回显「当前筛选条件」，避免筛选把数据挡住了却看不出来 */ .empty-cond{margin-top:10px;font-size:12.5px;color:#667085} .opt-tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;color:#fff;font-weight:600;white-space:nowrap} /* dictionary manager (list view) */ .tname{font-size:12px;color:#94a0b8;font-weight:600} .fname{font-weight:700;color:#1e2733;font-size:13px} /* 组内非首行重复出现的表名 / 字段名（.rep）：浅一档 —— 每行字段都补齐，又不跟组首行抢眼。 见 dict.js 的 cells（表名 / 字段两仓都按 _g0 决定加不加这个类）。 */ .tname.rep{font-weight:500;color:#b8c1d1} .fname.rep{font-weight:600;color:#7b8aa3} .fmeta{font-size:11px;color:#98a2b3;margin-top:2px} .empty-cell{color:#c3cad8;font-size:12px} /* 点得动的单元格（进「编辑字段字典项」抽屉）：字段名 / 选项值标签 / 「未设置选项」 */ .de-open{cursor:pointer} .fname.de-open:hover,.empty-cell.de-open:hover{color:var(--brand)} .fname.de-open:hover{text-decoration:underline} .opt-tag.de-open:hover{box-shadow:0 0 0 2px rgba(99,102,241,.25)} /* ================= 编辑字段字典项（抽屉） ================= 一行＝标签预览 / 选项名称 / 底色 / 文字色 / 使用次数 / 操作。 列表里只留「这一项长什么样」，改名字与配色都在这儿（见 dict.js 的 openDictFieldModal）。 */ .de-head,.de-row{display:flex;align-items:center;gap:10px} .de-head{font-size:11.5px;color:#98a2b3;padding:2px 8px 5px;border-bottom:1px solid var(--line);margin-bottom:8px} .de-row{border:1px solid #e5e9f2;border-radius:9px;background:#fff;padding:6px 8px;margin-bottom:6px} .de-row:hover{border-color:#c7d2fe} .de-row.focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12)} .de-row.bad{border-color:#e5484d;background:#fff7f7} .de-c1{width:118px;flex:none;min-width:0;overflow:hidden;text-align:center} .de-c1 .opt-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis} .de-c2{flex:1;min-width:110px} .de-c3{width:42px;flex:none;display:flex;justify-content:center} .de-c4{width:50px;flex:none;text-align:right;font-size:11.5px;color:#98a2b3;font-variant-numeric:tabular-nums} .de-c5{width:58px;flex:none;display:flex;justify-content:flex-end;gap:4px} .de-row .de-name{width:100%;border:1px solid #d9deea;border-radius:8px;padding:6px 9px;font-size:13px;outline:none;background:#fff} .de-row .de-name:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12)} .de-row input[type="color"]{width:30px;height:26px;padding:2px;border:1px solid #e4e8f0;border-radius:7px;background:#fff;cursor:pointer} .de-row input[type="color"]::-webkit-color-swatch-wrapper{padding:1px} .de-row input[type="color"]::-webkit-color-swatch{border:none;border-radius:5px} .de-row input[type="color"]::-moz-color-swatch{border:none;border-radius:5px} .oc-rst{border:1px solid #e4e8f0;background:#fff;color:#98a2b3;font-size:11px;line-height:1; border-radius:6px;padding:4px 6px;cursor:pointer} .oc-rst:hover{border-color:#c7d2fe;color:var(--brand)} .de-del{border:none;background:#fff1f2;color:#e5484d;border-radius:7px;width:26px;height:26px; font-size:12px;line-height:1;cursor:pointer} .de-del:hover{background:#ffe4e6} .de-foot{display:flex;align-items:center;gap:10px;margin-top:12px} .de-foot .sp{flex:1} .de-tip{font-size:11px;color:#98a2b3} /* 使用次数徽章：0 次淡出，不抢视觉 */ .ucnt{display:inline-block;min-width:24px;padding:1px 8px;border-radius:9px;background:#ecfdf5;color:#0f766e;font-size:12px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums} .ucnt.zero{background:#f1f5f9;color:#aab3c4} /* json to excel (built-in) */ .j2e{flex:1;display:flex;flex-direction:column;min-height:0;gap:12px;padding:16px 22px 18px;width:100%;max-width:none;margin:0} .j2e-hd .sp,.j2e-hd2 .sp,.j2e-foot .sp{flex:1} .j2e-main{flex:1;min-height:0;display:flex;gap:14px;overflow:hidden} .j2e-col{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .j2e-src{width:400px;flex:none} .j2e-out{flex:1;min-width:0} .j2e-hd{flex:none;display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fbfcff;border-bottom:1px solid var(--line);font-weight:600;font-size:13px;color:#1e2733} .j2e-hd2{flex:none;display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fbfcff;border-top:1px solid var(--line)} .j2e-src textarea{flex:1;min-height:0;width:100%;border:none;outline:none;resize:none;padding:12px 14px;background:transparent;color:#334155;font-size:12.5px;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;overflow:auto} .j2e-out #j2eCols{flex:none;max-height:186px;overflow:auto;padding:12px 14px;grid-template-columns:repeat(auto-fill,minmax(186px,1fr))} .j2e-out .tblwrap{flex:1;min-height:0;max-height:none;border:none;border-radius:0;box-shadow:none} .j2e-foot{flex:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;background:#fbfcff;border-top:1px solid var(--line)} .j2e-foot .exportfmt{margin:0;gap:16px} #j2eMsg{font-size:12px} @media(max-width:900px){.j2e-main{flex-direction:column}.j2e-src{width:auto;height:250px}} /* 进度条：分片流水线的心跳 */ .j2e-prog{flex:none;height:3px;border-radius:2px;background:#e9edf6;overflow:hidden;opacity:0;transition:opacity .2s} .j2e-prog.on{opacity:1} .j2e-prog i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,#6366f1,#22d3ee);transition:width .18s linear} /* 大文件提示 */ .j2e-note{flex:none;margin:10px 12px 0;padding:8px 11px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;border-radius:9px;font-size:12px;line-height:1.65} .j2e-note b{color:#78350f} /* 表头翻译引擎选择 */ .j2e-sel{height:27px;max-width:158px;padding:0 4px;border:1px solid #dde2ec;border-radius:7px;background:#fff;color:#475467;font-size:12.5px;outline:none;cursor:pointer} .j2e-sel:focus{border-color:#6366f1} /* 这里只改底色，用 background-color 而不是 background 简写 —— 简写会把上面的角标图一起抹掉 */ .j2e-sel.on{border-color:#6366f1;background-color:#eef0ff;color:#4338ca;font-weight:600} /* 弹窗里的功能型下拉（列设置的排版/标题对齐、Excel 导入的目标清单、JSON→Excel 的引擎）： 角标统一换成全站那一枚，让位宽度按各控件自己的右内边距留（它们原来还是浏览器原生角标）。 */ .lset select,.thset select,.xlsel,.j2e-sel{appearance:none;-webkit-appearance:none;-moz-appearance:none; background-image:var(--dd-arrow);background-repeat:no-repeat;background-position:right 6px center;background-size:11px 11px} .lset select,.thset select{padding-right:20px} .xlsel{padding-right:22px} .j2e-sel{padding-right:19px;background-position:right 5px center} .j2e-trf{font-size:11.5px;color:#98a2b3} /* 「数据源」选择：一份 JSON 里有多处数组时，让用户明确转哪一处。 单独占一行贴在输入框上方 —— 下拉展开时盖住的是自己的输入区，不会压到下面的按钮； 宽度跟着面板走，选项里那串「路径（N 行 · M 字段）」也不会被挤掉。 */ .j2e-srcwrap{flex:none;display:flex;align-items:center;gap:8px;padding:8px 14px;background:#fbfcff;border-bottom:1px solid var(--line);font-size:12px;color:#667085;white-space:nowrap} .j2e-srcwrap .j2e-sel{flex:1;min-width:0;max-width:none;height:26px} /* 自绘下拉会把 早就能靠 CSS 美化（角标统一成 --dd-arrow），但点开后的候选列表是 浏览器 / 系统自己画的，CSS 完全够不着。这里用一块自绘面板顶上： 上的透明触发按钮；父容器自己不能定位时，由 .ddw 兜住 */ .ddw{position:relative;display:inline-flex;align-items:center;min-width:0;vertical-align:middle} /* 注意不能限定 .ddw 直接子级：记录表单的 select 挂在 .fsel（它自己就是定位容器，util.js 不再套 .ddw）， 按钮同样是 .fsel 的直接子元素 —— 只写 .ddw>.ddhit 会让表单里那枚按钮掉出绝对定位、露出本体 */ .ddhit{position:absolute;left:0;top:0;width:100%;height:100%;border:none;background:transparent;padding:0;margin:0;cursor:pointer;z-index:2} .ddhit:focus{outline:none} /* 表单里的 退居值容器，输入框接管显示 ================= 原生