Files
work-leave-service/docs/教师时长页面设计预览.html
T
wanghu 25147ec74e
build / build-push (push) Successful in 50s
commit
2026-10-10 15:42:52 +08:00

349 lines
32 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN" data-page-node-id="GiF1pjpTSsFZcToUsJOSy3">
<head data-page-node-id="nOsb0mCEhfByiN5FJCR7C8">
<meta charset="UTF-8" data-page-node-id="gNADgqtE6orZYZd4BDzNbc" />
<meta name="viewport" content="width=device-width, initial-scale=1" data-page-node-id="KVNGXCPSRCxEOcgHtQ1mjy" />
<title>教师时长 · 页面设计预览</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 24px;
background: #f2f4f8;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
color: #17233d;
font-size: 14px;
}
.wrap { max-width: 1440px; margin: 0 auto; }
.crumb { color: #808695; font-size: 13px; margin-bottom: 10px; }
.crumb b { color: #17233d; }
.card { background: #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,21,41,.08); }
/* tabs */
.tabs { display: flex; gap: 34px; padding: 0 20px; border-bottom: 1px solid #eef0f5; background: #fff;
border-radius: 6px 6px 0 0; }
.tab { padding: 12px 2px; color: #515a6e; position: relative; font-size: 14px; }
.tab.on { color: #577afb; font-weight: 600; }
.tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: #577afb; border-radius: 2px; }
.body { padding: 16px 20px 20px; }
/* managed */
.managed {
padding: 14px 16px;
background: linear-gradient(135deg,#f7f9ff 0%,#fbfcff 100%);
border: 1px solid #e4ebff; border-radius: 8px;
}
.managed-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.mhl { display: flex; align-items: flex-start; gap: 10px; }
.mh-icon { color: #577afb; font-size: 19px; line-height: 22px; }
.managed-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 400; line-height: 17px; }
.tag.success { background: #f0f9eb; color: #19be6b; border: 1px solid #e1f3d8; }
.managed-tip { margin-top: 3px; color: #808695; font-size: 12px; line-height: 18px; }
.btn {
display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 15px;
border-radius: 4px; border: 1px solid transparent; font-size: 14px; cursor: pointer; background: #fff;
}
.btn.ghost { color: #577afb; border-color: #b4c4fb; background: #f7f9ff; }
.btn.primary { background: #577afb; color: #fff; }
.btn.plain { border-color: #dcdee2; color: #515a6e; }
.btn.sm { height: 28px; padding: 0 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.managed-types { padding: 10px 12px; background: #fff; border: 1px solid #eef1f7; border-radius: 6px; }
.cbx { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 4px; font-size: 13px;
color: #515a6e; margin-right: 8px; }
.cbx:hover { background: #f0f4ff; }
.box { width: 14px; height: 14px; border: 1px solid #c5c8ce; border-radius: 3px; background: #fff;
display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }
.cbx.on .box { background: #577afb; border-color: #577afb; }
.cbx.on { color: #577afb; font-weight: 600; }
/* stats */
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 14px 0; }
.stat-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
background: #fff; border: 1px solid #eef1f5; border-radius: 8px; transition: .2s; }
.stat-card:hover { border-color: #c9d8ef; box-shadow: 0 4px 14px rgba(87,122,251,.12); transform: translateY(-1px); }
.stat-card.warn { background: #fffbfb; border-color: #ffe0e0; }
.sc-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex;
align-items: center; justify-content: center; font-size: 20px; }
.ic-blue { background:#eef2ff; color:#577afb } .ic-green { background:#f0f9eb; color:#19be6b }
.ic-purple { background:#f5f0ff; color:#7b61ff } .ic-red { background:#fff0f0; color:#ed4014 }
.sc-num { font-size: 21px; font-weight: 700; line-height: 26px; letter-spacing: -.4px; }
.sc-num i { margin-left: 3px; font-size: 12px; font-weight: 400; font-style: normal; color: #a0a6b0; }
.sc-label { font-size: 12px; color: #808695; }
/* layout */
.cols { display: flex; gap: 14px; align-items: flex-start; }
.tree-panel { flex: none; width: 216px; padding: 12px 10px; background: #fff;
border: 1px solid #eef1f5; border-radius: 8px; }
.side-title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 0 6px 8px;
border-bottom: 1px solid #f2f4f8; font-size: 13px; font-weight: 600; }
.side-title i { color:#577afb; font-style: normal; font-size: 15px; }
.side-title em { margin-left: auto; font-size: 11px; font-weight: 400; font-style: normal; color: #c5c8ce; }
.tree { max-height: 470px; overflow: auto; }
.tnode { display: flex; align-items: center; height: 32px; padding: 0 6px 0 22px; border-radius: 4px;
font-size: 13px; color: #3c4b5f; }
.tnode.sub { padding-left: 38px; }
.tnode.sel { background: #eef2ff; }
.tnode.sel .nm { color: #577afb; font-weight: 600; }
.tnode .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnode .cnt { flex: none; margin-left: 6px; min-width: 20px; padding: 0 5px; border-radius: 9px;
background: #f2f4f8; color: #a0a6b0; font-size: 11px; line-height: 16px; text-align: center; }
.tnode.sel .cnt { background:#dfe7ff; color:#577afb; }
.caret { color: #808695; font-size: 10px; width: 14px; }
/* table */
.table-panel { flex: 1; min-width: 0; padding: 12px 14px 0; background: #fff;
border: 1px solid #eef1f5; border-radius: 8px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tt-left { display: flex; align-items: center; gap: 12px; }
.search { display: flex; align-items: center; gap: 6px; width: 230px; height: 32px; padding: 0 10px;
border: 1px solid #dcdee2; border-radius: 4px; color: #c5c8ce; font-size: 13px; }
.search input { flex: 1; border: none; outline: none; font-size: 13px; color: #17233d; background: transparent; }
.tt-count { color: #808695; font-size: 12px; } .tt-count b { color:#577afb; font-size:13px; margin:0 2px; }
.tt-right { display: flex; gap: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { background: #f8f8f9; color: #17233d; font-weight: 600; text-align: left; padding: 10px 12px;
border-bottom: 1px solid #e8eaec; white-space: nowrap; }
tbody td { padding: 9px 12px; border-bottom: 1px solid #e8eaec; vertical-align: middle; }
tbody tr:hover td { background: #f7f9fc; }
tr.edited td { background: #fffaf0; } tr.edited:hover td { background: #fff5e1; }
.c-idx { color:#808695; width:52px; text-align:center }
.c-act { width:70px; text-align:center }
.c-mid { text-align:center }
.u-cell { display: flex; align-items: center; gap: 8px; }
.avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #eef2ff; color: #577afb;
font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.u-name { display: flex; flex-direction: column; line-height: 16px; min-width: 0; }
.u-main { color: #17233d; font-size: 13px; }
.u-rem { color: #a0a6b0; font-size: 11px; }
.h-cell { line-height: 17px; }
.h-num { font-size: 15px; font-weight: 700; } .h-num i { margin-left:3px; font-size:11px; font-weight:400;
font-style: normal; opacity:.75; }
.h-day { font-size: 11px; opacity: .7; }
.ok .h-num { color:#19a465 } .warn .h-num { color:#e6a23c } .danger .h-num { color:#ed4014 }
.edit-cell { display: flex; align-items: center; justify-content: center; gap: 6px; }
.num { width: 108px; height: 30px; border: 1px solid #dfe6fb; border-radius: 4px; background: #f7f9ff;
display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; color:#c5c8ce; font-size:13px; }
.num.filled { color: #577afb; font-weight: 600; justify-content: center; }
.qbtn { width: 26px; height: 24px; border: 1px solid #dcdee2; border-radius: 4px; background: #fff;
color: #515a6e; font-size: 12px; cursor: pointer; }
.qbtn:hover { border-color:#577afb; color:#577afb; background:#f5f8ff }
.qbtn.d:hover { border-color:#ed4014; color:#ed4014; background:#fff5f5 }
.rem-input { width: 100%; min-width: 130px; height: 30px; border: 1px solid #dcdee2; border-radius: 4px;
padding: 0 9px; font-size: 13px; color: #17233d; outline: none; }
.rem-input::placeholder { color:#c5c8ce; }
.pf-cell { display: inline-flex; align-items: baseline; gap: 5px; }
.pf-num { font-size: 14px; font-weight: 700; color: #17233d; }
.pf-delta { padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.pf-delta.up { color:#19a465; background:#f0f9eb } .pf-delta.down { color:#ed4014; background:#fff0f0 }
.pf-empty { color: #dcdee2; }
.lk { color:#808695; font-size:12px; cursor:pointer } .lk:hover { color:#ed4014 }
.footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between;
margin-top: 12px; padding: 12px 4px; border-top: 1px solid #f2f4f8; font-size: 13px; color:#515a6e; }
.footer.active { border-top-color: #ffe0b0; }
.foot-info { display: flex; align-items: center; gap: 10px; }
.foot-info b { margin: 0 3px; font-size: 15px; }
.fi-sep { width:1px; height:12px; background:#e8eaec; }
.hl-blue{color:#577afb} .hl-orange{color:#e6a23c} .hl-green{color:#19a465} .hl-red{color:#ed4014}
.foot-btns { display: flex; gap: 8px; }
.note { margin-top: 18px; padding: 14px 16px; background: #fff; border: 1px solid #eef1f5;
border-radius: 8px; font-size: 13px; color: #515a6e; line-height: 22px; }
.note h4 { margin: 0 0 8px; font-size: 14px; color: #17233d; }
.note li { margin-bottom: 4px; }
</style>
</head>
<body data-page-node-id="Yg8oh4VZpbLXhqPjtBLC0R">
<div class="wrap" data-page-node-id="smRaZ4eOz02yCstEXVKMlM">
<div class="crumb" data-page-node-id="CnDBvTn1W11CUoZ1xvSidl">请假管理 /<b data-page-node-id="HSjP0AD1rcFqOdHVPqmGYl"> 请假设置</b></div>
<div class="card" data-page-node-id="2gwjetzwzWI75VOduiULNa">
<div class="tabs" data-page-node-id="q0DaNpn3b7Z26I7vjLMxIr">
<div class="tab" data-page-node-id="dAZK4ykcWhUQRtp1UVBj83">作息时间</div>
<div class="tab" data-page-node-id="1FCNiSHQ4BnD32U5xi5Wj4">请假类型</div>
<div class="tab on" data-page-node-id="gLQw6QTHCBwJUAd6FS8qHu">教师时长</div>
<div class="tab" data-page-node-id="CIYZqHRXQj8kBJqCoE4yDc">节次</div>
<div class="tab" data-page-node-id="W7TYACclLIpEcwCGFLcBbD">其他设置</div>
</div>
<div class="body" data-page-node-id="kSrP8PXRQtAE8GdhKtCFNo">
<!-- ① 管控类型 -->
<div class="managed" data-page-node-id="GdToG8fhRGmLhrcecVOSbD">
<div class="managed-head" data-page-node-id="kTMy9FhiUGAFGFyOs0nsTP">
<div class="mhl" data-page-node-id="kmFNoziZtumVBG7L7S6mRJ">
<div class="mh-icon" data-page-node-id="FSOtYnPlGC1jj3RFQR7z2e">&#9632;</div>
<div data-page-node-id="SSVHbzQIch3OUHqbZZDoUy">
<div class="managed-title" data-page-node-id="eo1IZdUU3sYf56WJNHG5RR">
需扣减时长的请假类型
<span class="tag success" data-page-node-id="JN2mBcJWvdqV8qNrjzaYLE">已启用 3 项</span>
</div>
<div class="managed-tip" data-page-node-id="qMJDwwURpWaLbN0wEqa1mr">勾选后,该类型请假审批通过将自动扣减教师时长;取消勾选即停止扣减。变更即时保存。</div>
</div>
</div>
<button class="btn ghost" data-page-node-id="TzmAHdZe9hiVokzlevPbdm">&#8681; 批量导入</button>
</div>
<div class="managed-types" data-page-node-id="otTvoH7txoxhG4BnaK7Dki">
<span class="cbx on" data-page-node-id="2raoIDbKt4QirU0pZNetVc"><span class="box" data-page-node-id="fmdhFqBf4LUJnUqm6iH3mZ">&#10003;</span>事假</span>
<span class="cbx on" data-page-node-id="GhyiRhbPZAWU4tfRAUthyl"><span class="box" data-page-node-id="xNicqTyQ6wWWEzCd9DPx9p">&#10003;</span>病假</span>
<span class="cbx on" data-page-node-id="08EAErdsyuJ2dEPxklNdCS"><span class="box" data-page-node-id="ZtPmmPxRRqaIAzemlquHB2">&#10003;</span>调休</span>
<span class="cbx" data-page-node-id="xHnWEGsHdJuRFdcETNzBuC"><span class="box" data-page-node-id="UhN0egzCQGlhV6jWZtTMjp"></span>婚假</span>
<span class="cbx" data-page-node-id="6OIHjmkOOyCvjklqgGHWAL"><span class="box" data-page-node-id="YT4FsGGmD7eM5cveIzyZNp"></span>产假</span>
<span class="cbx" data-page-node-id="piudnGIUpAwSpn4kXAMoEQ"><span class="box" data-page-node-id="2IpxCxG7ppqrBs83CcE1Uh"></span>丧假</span>
</div>
</div>
<!-- ② 统计 -->
<div class="stat-row" data-page-node-id="XnwOMIbSJgXDBGRV89JYIz">
<div class="stat-card" data-page-node-id="vixBBo6pYXDlAiFEWdnJYw">
<div class="sc-icon ic-blue" data-page-node-id="YyfAmgGtRXfPGdcMcyUkqq">&#9734;</div>
<div data-page-node-id="rPBdyyX7uWSXHsIiJgB7qs"><div class="sc-num" data-page-node-id="rSwvKT4l0XyDgg9Qd4IJSU">48<i data-page-node-id="AM5AdwhqzaIzezMDuSRi8H">人</i></div><div class="sc-label" data-page-node-id="8R1jm13gN3NDartp6AOjw7">当前范围教师</div></div>
</div>
<div class="stat-card" data-page-node-id="zMkhLVlrONaWkqfCswlJbR">
<div class="sc-icon ic-green" data-page-node-id="zGTkgLPS0WGabr9ui8CTRv">&#9201;</div>
<div data-page-node-id="Y4ZZvqH2n0g2cTRDgDmrxT"><div class="sc-num" data-page-node-id="JHMkZq2XqblNOV3evbzpKG">612.5<i data-page-node-id="Hz5nJ0aMb0VPiJ8bquOvzq">小时</i></div><div class="sc-label" data-page-node-id="ESdpYrUNT4S05Cs0HRXLLx">剩余时长合计</div></div>
</div>
<div class="stat-card" data-page-node-id="Ro8a8GmcUVwZhtWr8zqjis">
<div class="sc-icon ic-purple" data-page-node-id="5JCiVemLVfCm1YKszehFCm">&#9707;</div>
<div data-page-node-id="Eq263XTX07CWRcK3CjbDyH"><div class="sc-num" data-page-node-id="8BPF17J3CMuC2Ur7RjfpWd">12.76<i data-page-node-id="InITh8jpiZcSKHWTfDNXZ6">小时</i></div><div class="sc-label" data-page-node-id="xJBcC2bqvec0CS6dVhJDur">人均可用时长</div></div>
</div>
<div class="stat-card warn" data-page-node-id="waq2xPo4cCqZlJ6D5GPWY0">
<div class="sc-icon ic-red" data-page-node-id="fe8vdeyGIHlyFvTAGrnEsr">&#9888;</div>
<div data-page-node-id="ajZmbWRBJZ2nA9mVZN1qDa"><div class="sc-num" data-page-node-id="1EVAH1R3Em6orc0VuwpOGC">3<i data-page-node-id="aL0cHGFZtbEpKfiOmgOkPX">人</i></div><div class="sc-label" data-page-node-id="6anrkZFeKH5ouJQFfUQ2Wr">时长已用尽</div></div>
</div>
</div>
<!-- ③ 双栏 -->
<div class="cols" data-page-node-id="IvNnGaSrboYS4EzhPUF5Fj">
<div class="tree-panel" data-page-node-id="pxta51iElsYMpdpXi7PyS2">
<div class="side-title" data-page-node-id="RFu5O3vFrFHXXopyF3oE8i"><i data-page-node-id="MdLYZeIWsJnO12A4iku6J2">&#9707;</i><span data-page-node-id="BQjpGd8byJKPFHLC6N82Bc">教师分组</span><em data-page-node-id="m6M8LvkBoaU4QYw0Vsp0FE">点击筛选</em></div>
<div class="tree" data-page-node-id="Xy0m69vz2FG0HcjUZB366W">
<div class="tnode sel" data-page-node-id="BF9LwKxAYfWOLxzSk1PVMs"><span class="caret" data-page-node-id="Yo0wAiWBPvBIfkpddycDrK">&#9660;</span><span class="nm" data-page-node-id="0AEkXURFJQFlJGgTne4Nw2">全部教师</span><span class="cnt" data-page-node-id="xz3IIVnVa8IxVZLqLl3ePp">48</span></div>
<div class="tnode sub" data-page-node-id="9ht2SH9CUnigy4D303LP5I"><span class="caret" data-page-node-id="Gr0sfv46hUZSuAcEulcFhO">&#9654;</span><span class="nm" data-page-node-id="rVhfXSGFO8OJOYipR4AqHu">语文组</span><span class="cnt" data-page-node-id="uYNYzxjHkHW6rypdKxl4Iz">12</span></div>
<div class="tnode sub" data-page-node-id="2RcW28uJKsRegMBhhv6s2h"><span class="caret" data-page-node-id="RfOWSdKgQhVzMRwvF3aCew">&#9654;</span><span class="nm" data-page-node-id="4Er9Gka2cLzBZf1HZJ1UE9">数学组</span><span class="cnt" data-page-node-id="cAFG5ehEbcdzBmD7R0FBEE">10</span></div>
<div class="tnode sub" data-page-node-id="NLdjFPvGcqTDufVrXXbnNC"><span class="caret" data-page-node-id="JSxvn56HxB8ebsWuYabgDV">&#9654;</span><span class="nm" data-page-node-id="GCPDHD3U9mC9mYgoAfqNHV">英语组</span><span class="cnt" data-page-node-id="XsDnGcyWbgoqdAWAOcC9ho">9</span></div>
<div class="tnode sub" data-page-node-id="E14QvMFEfcM7N1OfMaJS84"><span class="caret" data-page-node-id="637VKqgnnYJ0hVY6EvuTFE">&#9654;</span><span class="nm" data-page-node-id="dXB32dRcQW8XqccdenFImo">综合组</span><span class="cnt" data-page-node-id="tsw9dDb43zGNFFA6A9u8nj">17</span></div>
</div>
</div>
<div class="table-panel" data-page-node-id="YdIfYn3jc4DeSIiBDhmZ5N">
<div class="toolbar" data-page-node-id="KtbNrcNwSdwJ7ppqsP7gw9">
<div class="tt-left" data-page-node-id="YEaanxALXsfHIZFx3tQ72g">
<div class="search" data-page-node-id="jvPnVtWdMpEmCDtqxyFBPF"><span data-page-node-id="O6D1yTafHWwzhoQTFfwprL">&#9906;</span><input placeholder="搜索教师姓名 / 备注" data-page-node-id="xJwEk7zRoaIem4TUhypVq7" /></div>
<span class="tt-count" data-page-node-id="iLCii0Qp2nbEOTm3kLuDCH">共 <b data-page-node-id="SXjN4j1QQwcXq8zFfMmA2B">48</b> 位教师</span>
</div>
<div class="tt-right" data-page-node-id="VDQ9xzeyye0J4F7GRkKM8g">
<button class="btn plain sm" data-page-node-id="h88RDcKeQ9xfQjG4BedCCB">&#8635; 刷新</button>
<button class="btn plain sm" data-page-node-id="dtBsngp8IgMktay3x86YKS">&#8630; 清空改动</button>
</div>
</div>
<table data-page-node-id="gBZy1PsAfjjOsaHklGS5tE">
<thead data-page-node-id="V0L4JqaDgFBMRaCzuwEX79">
<tr data-page-node-id="2GnK0D7NAQgHL2dlZPmsF4">
<th class="c-idx" data-page-node-id="DMrVIj68vWgacpVdkcVOUe">序号</th>
<th style="width:150px" data-page-node-id="A6RoMDtzT9YGgBpczbVCBx">教师</th>
<th style="width:130px" data-page-node-id="NGcTLSLbGC8aAPTfLyGw4s">剩余时长</th>
<th style="width:200px" class="c-mid" data-page-node-id="smUVAd6RjPCGLF2konjIYu">本次新加(小时)</th>
<th style="width:120px" class="c-mid" data-page-node-id="0uk3VBwed4YHphKgiHFHwP">调整后</th>
<th data-page-node-id="UKVXCq64ipyptCmRIYcZ1I">情况备注</th>
<th class="c-act" data-page-node-id="FkRSLNsGdHMIIoHpwXFmC4">操作</th>
</tr>
</thead>
<tbody data-page-node-id="weMZ2dPaaJ6iVZULJub8cQ">
<tr class="edited" data-page-node-id="n4zUHTBKF8V6KKCgEYTEeu">
<td class="c-idx" data-page-node-id="IOYGxau8x3j2I2pueqStNX">1</td>
<td data-page-node-id="yjW3NTQzowbwcxRwVTQhaU"><div class="u-cell" data-page-node-id="MXFp6i2Vy88UkN8OtD7TKU"><span class="avatar" data-page-node-id="HafGklgRUXzjASBTRbEUKO">王</span><span class="u-name" data-page-node-id="7ly9nuQqN9O3DAATZRX6GP"><span class="u-main" data-page-node-id="2TTCywrdRNJGoNFw9RSI8Z">王雅静</span><span class="u-rem" data-page-node-id="Tvy9Bt2NRg1ayNmMexd9lG">语文组 · 教研组长</span></span></div></td>
<td data-page-node-id="agY1GW42c4N4raG4X9XYla"><div class="h-cell lv-ok" data-page-node-id="9E6XJXCCgm2KzQh131aap1"><span class="h-num" data-page-node-id="3tsBwWeXQh8RoyGgGEjR0T">24<i data-page-node-id="svdWIbd34Hg9zGieMzlGo5">小时</i></span><div class="h-day" data-page-node-id="XaoSSy39I5l92FsOSYp63h">≈ 3 天</div></div></td>
<td class="c-mid" data-page-node-id="dDEYRbcHIZW36tv4FA6bde"><div class="edit-cell" data-page-node-id="WaTqQmt9F1o51lf9v6djr1"><div class="num filled" data-page-node-id="6af1HJFan01l0zHEsHbFFI">4</div>
<button class="qbtn" data-page-node-id="9ewCYHMnHxwrXOXdoiEFeD">+1</button><button class="qbtn" data-page-node-id="lNgiYxODTzFdV5EMW3pDZA">+4</button><button class="qbtn d" data-page-node-id="0wr8x8SCF393GBUPeQPhw5">-1</button></div></td>
<td class="c-mid" data-page-node-id="8HTmTRLufxFZoe7BRHC7HQ"><div class="pf-cell" data-page-node-id="XYCeldaBD0j7L7cDMfA1Uk"><span class="pf-num" data-page-node-id="sA1bC0HcGYLH6RDh7EZd38">28</span><span class="pf-delta up" data-page-node-id="eeEKS9fvOtDLCJRHlVv7jd">+4</span></div></td>
<td data-page-node-id="CiOJv3L94HpMfpevyWm9fC"><input class="rem-input" value="周末补课补时" data-page-node-id="4zpswltDOIzhw9J2oGzkJp" /></td>
<td class="c-act" data-page-node-id="W76HNv8oGn1DxCiIiT6GNx"><span class="lk" data-page-node-id="hOF4sRM9ioGcZmRN7oFv13">撤销</span></td>
</tr>
<tr data-page-node-id="lcQaRTXtIIOZAglJwr39De">
<td class="c-idx" data-page-node-id="zeWCHKMSJFqopt6MqZYRhl">2</td>
<td data-page-node-id="240iFFZK23rRBuFieN9pd6"><div class="u-cell" data-page-node-id="YTH0tBLrGBao2xe7B4rwRm"><span class="avatar" data-page-node-id="TSPBFT4eQpf9m9wzQJXVrq">李</span><span class="u-name" data-page-node-id="EmRoDctTCR4teOeNy6vBGO"><span class="u-main" data-page-node-id="n8lAjx6tQnD3njLs69p6xz">李国栋</span><span class="u-rem" data-page-node-id="7L3vYWSlCG5Z5LsDflcBfL">数学组</span></span></div></td>
<td data-page-node-id="smjJuTvFDDKCtzI44Vak21"><div class="h-cell lv-ok" data-page-node-id="0GzBhR2Z8o9Ww1hoxdPJWp"><span class="h-num" data-page-node-id="3sWlYSi5FxuSOVBPtq6BGt">16<i data-page-node-id="cXBoPcjVA49eEcDCSrseg8">小时</i></span><div class="h-day" data-page-node-id="7uhHwhjTrGi62kT6HAOvtJ">≈ 2 天</div></div></td>
<td class="c-mid" data-page-node-id="yEfKPm4fDkvNs82QBNX5v5"><div class="edit-cell" data-page-node-id="kvtIGGfLaha6I4viKvDGmh"><div class="num" data-page-node-id="EtGniqOwFl5Fcmd1N8GhxO">可填负数</div>
<button class="qbtn" data-page-node-id="EAfFeHFCyYAe7x5cj8CBps">+1</button><button class="qbtn" data-page-node-id="U0EJwBzXsv007Vz5pXVDwW">+4</button><button class="qbtn d" data-page-node-id="C7Mb0d3QC47mPpcQ53aMIg">-1</button></div></td>
<td class="c-mid" data-page-node-id="aVwepCNnSIM4Fu2Qm4RPFt"><span class="pf-empty" data-page-node-id="AQi93C376ZPDCKUi6Z7X58">&mdash;</span></td>
<td data-page-node-id="eovnFpWevUcNJTVFbZKOBn"><input class="rem-input" placeholder="如:补课补时" data-page-node-id="T2KYZCfs61ow7KCyGuF8sd" /></td>
<td class="c-act" data-page-node-id="YH0pXgqc5y0gpxXcj7RT9g"><span class="pf-empty" data-page-node-id="HuZWNFpNHuAZGNGLqO1pPZ">&mdash;</span></td>
</tr>
<tr data-page-node-id="8PrKIvk80rV2US4WjyyA3w">
<td class="c-idx" data-page-node-id="sOFf9zYy594uUZzrnJpdn6">3</td>
<td data-page-node-id="NssfV9fjCGuJf7QLEpMEIc"><div class="u-cell" data-page-node-id="73fvXHiwv6i2CeJKsS0skO"><span class="avatar" data-page-node-id="vrHN4L37LafVY3jxyN3b1f">张</span><span class="u-name" data-page-node-id="9doL7oGNSr9LcHJs7QQvVO"><span class="u-main" data-page-node-id="SRDgRi5YkDCGSl1mOfA27h">张明远</span><span class="u-rem" data-page-node-id="7vld9Fc3z4u6jHZWoQLNZK">英语组</span></span></div></td>
<td data-page-node-id="jVJdSx17tXmeCGUVk3AOFX"><div class="h-cell lv-warn" data-page-node-id="fAjevOuMLWJSHwBJdxEAnY"><span class="h-num" data-page-node-id="XR33xGPOlTREGZfBKL66XR">6<i data-page-node-id="Cn690wifz000tKfHoohJ7X">小时</i></span><div class="h-day" data-page-node-id="4qXNRN7z1In4LLqSmvBoLb">≈ 0.75 天</div></div></td>
<td class="c-mid" data-page-node-id="DE1HAH4Dv7Y27ZFMkS0fiY"><div class="edit-cell" data-page-node-id="QsQjUCaGaIAdfB9cpEKlSN"><div class="num filled" data-page-node-id="i8LjkqfljhcQmrZUjTeBvo">-6</div>
<button class="qbtn" data-page-node-id="oy6BYrQwbqACzeXjkwG71z">+1</button><button class="qbtn" data-page-node-id="SHNsIIbaW09Fk7K8wDEH8h">+4</button><button class="qbtn d" data-page-node-id="pKDmO0f4QfUUThho7Vdv1F">-1</button></div></td>
<td class="c-mid" data-page-node-id="0AF1AtzMPcAYcwl7Fgmi9j"><div class="pf-cell" data-page-node-id="SPnL9VsE0FKnItIGunUVgK"><span class="pf-num" data-page-node-id="OaMnfKdifqidVCgLySvGSl">0</span><span class="pf-delta down" data-page-node-id="ZjI016mxLv8Wlzp6WQsArt">-6</span></div></td>
<td data-page-node-id="gSPXFIBGqlNP3PCyiFJmLS"><input class="rem-input" placeholder="如:事假扣减" data-page-node-id="dpEO43c6SDI8fgOhlKLB9q" /></td>
<td class="c-act" data-page-node-id="rH4035FGPQqYP5ibGjCHhp"><span class="lk" data-page-node-id="F2RiqFdT56NHm3omYJcHa7">撤销</span></td>
</tr>
<tr data-page-node-id="lPS6KNy5IAeuqto5v5dcFA">
<td class="c-idx" data-page-node-id="2xrk0GsDTKKZPWGdyZIzMn">4</td>
<td data-page-node-id="9tekiXvEGIYxAxOAdD2I84"><div class="u-cell" data-page-node-id="HqZkK48QG50ZHe0VRsrtNp"><span class="avatar" data-page-node-id="8eMeC3i7kz53mI9DPhPXeu">陈</span><span class="u-name" data-page-node-id="hgdxwDGaAguIrCoEdeaQNd"><span class="u-main" data-page-node-id="oNlPt4b1PRoTfVe8aJaKBD">陈思彤</span><span class="u-rem" data-page-node-id="P0NPwpkHD4xDpqTJ6g4hgd">综合组</span></span></div></td>
<td data-page-node-id="FWfuMCbjzZDUirWPsPhwF9"><div class="h-cell lv-danger" data-page-node-id="v1UZMeYTnvOEBaApaTbvUV"><span class="h-num" data-page-node-id="YGn70DTNEv4O1OETby3vB9">0<i data-page-node-id="dHfbNsUnlYAE9UubqX1z5u">小时</i></span><div class="h-day" data-page-node-id="dLSCdYHQzP48wDj47ErRfO">需及时补充</div></div></td>
<td class="c-mid" data-page-node-id="wdSUThppNFrNH4rA9Q0jW9"><div class="edit-cell" data-page-node-id="wwYqFb78MEdU0khxSitQM0"><div class="num" data-page-node-id="SqVhjUY6rDrfMnv7uLBnkp">可填负数</div>
<button class="qbtn" data-page-node-id="GLPCkhgIEGqcF1HTRsiegm">+1</button><button class="qbtn" data-page-node-id="zS5VrDWPk5WrolJlNI3Grv">+4</button><button class="qbtn d" data-page-node-id="nm9iiCwzGXvbQgt5HTfTy5">-1</button></div></td>
<td class="c-mid" data-page-node-id="RDmjE12Xua8lwabZlKUPIt"><span class="pf-empty" data-page-node-id="tQRcpLE4LGakMF6Wc6JkgL">&mdash;</span></td>
<td data-page-node-id="e4WpknJiXuSjdE6q7CBJNu"><input class="rem-input" placeholder="如:补课补时" data-page-node-id="PpE6F43exgUjCeBWpwXx2w" /></td>
<td class="c-act" data-page-node-id="BGL37oPVVQZcZOQiGwGarZ"><span class="pf-empty" data-page-node-id="i1PK5LWZDi4Gjbv3AEohHw">&mdash;</span></td>
</tr>
<tr data-page-node-id="4uNpYUUqjqA6faCWm5zhit">
<td class="c-idx" data-page-node-id="tqMI0VVviTnRG3mGbY7EAQ">5</td>
<td data-page-node-id="aG3WwudhmJPHEPwG1xpvoQ"><div class="u-cell" data-page-node-id="TYpgIuHpslchHfGJWhzt6B"><span class="avatar" data-page-node-id="hGNKIZhWjz6OHhlC3ujWL1">周</span><span class="u-name" data-page-node-id="jLbQwXBAO2JqBeFQsLIYKb"><span class="u-main" data-page-node-id="3evVB0aAx2MbwARlRz7p1i">周建华</span><span class="u-rem" data-page-node-id="QZJD5y8R22LduL0r0s5IwH">语文组</span></span></div></td>
<td data-page-node-id="3WdZC6sF6Q3OnnKPdIMTz0"><div class="h-cell lv-ok" data-page-node-id="MtrF3rVjbIaQ85OXaYvAaU"><span class="h-num" data-page-node-id="fGArtWAWICS6GtVRtEsMMa">40<i data-page-node-id="2fAQOsbmBr17ZpvgWLLwbM">小时</i></span><div class="h-day" data-page-node-id="suU8zJcxzDlp3Ui115nFp4">≈ 5 天</div></div></td>
<td class="c-mid" data-page-node-id="r03YnFQTFN2ihDesRQHE1W"><div class="edit-cell" data-page-node-id="0kDAzw4ULgyGjSCbG7uXu5"><div class="num" data-page-node-id="Xzcr9CFrW5iAocnoTvtQZL">可填负数</div>
<button class="qbtn" data-page-node-id="e2ECXvyU5T1FgFXQER6gtu">+1</button><button class="qbtn" data-page-node-id="VfwpFExThsm9d8IIDczcxC">+4</button><button class="qbtn d" data-page-node-id="ZyxPi4zqokE6JBO2krMUn1">-1</button></div></td>
<td class="c-mid" data-page-node-id="kRbBOJgb7wFiyLOMlBcSxE"><span class="pf-empty" data-page-node-id="BuXWUKVHI6BFAEJwESEtqd">&mdash;</span></td>
<td data-page-node-id="BF6Lcx42WikoiZAETvewVt"><input class="rem-input" placeholder="如:补课补时" data-page-node-id="27h1h6428GqEihJm5qUNHU" /></td>
<td class="c-act" data-page-node-id="2Vjiqs3tMujdPksBodU8oq"><span class="pf-empty" data-page-node-id="Ut00QTvaziprxKziTnv8i6">&mdash;</span></td>
</tr>
</tbody>
</table>
<div class="footer active" data-page-node-id="auQWEPsZlBcDk90ZPBapAu">
<div class="foot-info" data-page-node-id="fWOscVlC6r3wB9VRAeA74N">
<span data-page-node-id="TzcUOvMKxs6WUXOHzdZ0zr">范围剩余合计<b class="hl-blue" data-page-node-id="MwwoP0w02y8oQFLt8cAQ6V">612.5</b>小时</span>
<span class="fi-sep" data-page-node-id="azQIoyW96y6VANNHPrxqJ9"></span>
<span data-page-node-id="zSOHxsgROLQztbvST7IufM">待提交<b class="hl-orange" data-page-node-id="zkE4HfBMkzY1PVn1fwVDEM">2</b>人,净增减<b class="hl-green" data-page-node-id="6uuXUU1jnYqiUoR3QbsMlq">-2</b>小时</span>
</div>
<div class="foot-btns" data-page-node-id="FV7MtMkxjEOPC97PUFnHt6">
<button class="btn plain" data-page-node-id="3D7nbKIHCY1l7D8I8w3wI8">取消</button>
<button class="btn primary" data-page-node-id="9PSeF3mhggVLnX8TJyWGHG">&#10003; 提交本次调整</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="note" data-page-node-id="DPJWMQB0PixGQW2FqHSWpL">
<h4 data-page-node-id="YBeKgcD9lyzRI7ITc9GbA4">本次设计要点</h4>
<ul data-page-node-id="RFzrvh2UZJ4hOnvZdFkex4">
<li data-page-node-id="W86NOru5YmX64EwwbacgAm"><b data-page-node-id="l4aCUx6e5fz0snTgNpLMcM">顶部概览四卡</b>:教师人数 / 剩余合计 / 人均时长 / 时长用尽人数,随左侧分组与搜索实时联动,异常数据(用尽)自动红底提示。</li>
<li data-page-node-id="zrRdlecBGJXndHc7MZrElr"><b data-page-node-id="OyuwEIBZBQoJfcrSaIKd86">时长水位分级</b>:≥8 小时绿色、&lt;8 小时橙色、≤0 红色,并附「≈ X 天」折算(按 8 小时/天),比单一数字更容易判断余额。</li>
<li data-page-node-id="r7DmnwSDagBf9wX9lRbOBD"><b data-page-node-id="BEb2BG4xwqmmDtLjuJBrYw">快捷加减按钮</b>:每行 +1 / +4 / -1 三个小按钮,免去输入数字;扣减后若会变负会即时拦截提示。</li>
<li data-page-node-id="vdBvpkv6P8NoZGDha472or"><b data-page-node-id="LGATWlAKsYGa8pbpUjziHT">调整后预览列</b>:填写即预览「调整后时长 + 增减徽标」(绿加红减),提交前不必刷新核对。</li>
<li data-page-node-id="BAyJ8l5ZHAqpzj8GDc7B0o"><b data-page-node-id="tj04sVhMxLPbGm2vpTJrER">编辑痕迹可视化</b>:已编辑行淡黄高亮 + 底部粘性条显示「待提交 N 人 / 净增减」,未改动时提交按钮禁用,杜绝误提交。</li>
<li data-page-node-id="MsvP4QweVKqokyRGetyqpN"><b data-page-node-id="6hbH4D1PSBExseDuS0UjpI">教师头像 + 备注</b>:姓名旁以首字头像区分,原备注降级为次要信息,不再被表格覆盖。</li>
<li data-page-node-id="QREACCSASfesiqJdFsxOo9"><b data-page-node-id="nA0pk9cGvdDIT3U9FZPDl3">分组树增强</b>:新增「全部教师」虚拟根节点、每组显示人数徽标,与统计卡片口径一致。</li>
<li data-page-node-id="ZeW3hwy4xFB8jzIcHEXkCH"><b data-page-node-id="5dTH3ouJmocn9XGJGPAslB">撤销 / 清空改动</b>:单行可撤销,顶部可一键清空全部未提交编辑,减少误操作。</li>
<li data-page-node-id="rQwC7Mm3JnZMIvhXeFBzEE"><b data-page-node-id="dgYPaNW2WhsZm4lyPyivKc">导入入口收敛</b>:「批量导入」并入管控类型区标题栏,与 Excel 导入能力语义相关联。</li>
</ul>
</div>
</div>
</body>
</html>