Files
workdsh/docs/ui/index.html
T

105 lines
56 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html><html lang="zh-CN"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>WorkDSH · 产品界面提案</title><style>
:root{--bg:#141615;--surface:#1e211f;--line:#323733;--text:#ecf0eb;--muted:#a0aaa1;--accent:#c8dfb2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 'PingFang SC','Microsoft YaHei',sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit;background:none;border:0;border-radius:8px;padding:9px 13px}button:hover{background:#303630}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button.active{background:#343c33;color:var(--accent)}.primary{background:var(--accent);color:#203021}.primary:hover{background:#d6e9c4}.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}aside{background:#1b1e1c;border-right:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;gap:24px}.brand{font-size:23px;font-weight:650;letter-spacing:-1px;padding:0 12px}.brand i{font-style:normal;color:var(--accent)}.small{font-size:12px;color:var(--muted)}.label{font-size:11px;letter-spacing:1.5px;color:var(--muted);margin:0 12px 12px}nav{display:grid;gap:6px}nav button{text-align:left;padding:12px 14px}.icon{display:inline-block;width:29px;color:var(--muted)}.recent button{display:block;width:100%;text-align:left;font-size:13px;color:var(--muted)}.account{margin-top:auto;padding:15px 10px;border-top:1px solid var(--line)}header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;gap:20px}.tag{border:1px solid var(--line);border-radius:5px;padding:3px 9px;font-size:11px;color:var(--muted)}.review{color:var(--accent)}main{min-width:0}section{padding:34px 42px;max-width:1400px;margin:auto;animation:appear .2s ease}@keyframes appear{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}h1{font-size:30px;line-height:1.35;margin:10px 0;font-weight:560;letter-spacing:-.7px}h2{font-size:19px;font-weight:550}h3{font-size:16px;margin:0 0 10px}p{color:var(--muted)}.home{max-width:990px;padding-top:88px}.eyebrow{font-size:11px;color:var(--accent);letter-spacing:3px}.home h1{font-size:44px;margin:15px 0}.composer{background:#222723;border:1px solid #455040;border-radius:16px;margin-top:34px;padding:22px}.composer textarea{width:100%;height:85px;resize:vertical;background:none;color:var(--text);border:0;outline:none;font-size:16px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tools button,.tools select{font-size:12px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:7px 10px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}.card{background:var(--surface);border:1px solid var(--line);padding:23px;border-radius:12px}.card p{font-size:13px;min-height:43px}.card .number{font-family:Georgia,serif;font-size:30px;color:var(--accent);margin-bottom:16px}.sectiontitle{margin-top:43px}.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:26px 0}.tabs button{border-radius:0;padding:12px 2px}.tabs button.active{background:none;border-bottom:2px solid var(--accent)}.split{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:30px}.panel{border-left:1px solid var(--line);padding-left:26px}.panel .card{padding:17px;margin-bottom:15px}.panel p{font-size:12px}.avatar{display:inline-grid;place-items:center;width:40px;height:40px;background:#364736;color:var(--accent);border-radius:12px;margin-bottom:17px}.event{padding:24px 0;border-bottom:1px solid var(--line)}.event strong{font-weight:500}.event p{margin-left:33px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:20px}.search{background:var(--surface);border:1px solid var(--line);padding:10px 14px;border-radius:8px;color:var(--text);width:240px}.empty{padding:65px 24px;text-align:center;border:1px dashed var(--line);border-radius:12px;margin-top:24px}.empty h2{margin-top:15px}.message{background:#293029;border-radius:12px;padding:18px 22px;margin:22px 0 35px}.answer{line-height:1.9}.file{width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);padding:18px;border-radius:10px;margin:10px 0}.step{color:var(--muted);padding:10px 0;border-bottom:1px solid var(--line)}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:17px 10px;border-bottom:1px solid var(--line)}th{font-size:12px;color:var(--muted);font-weight:400}dialog{color:var(--text);background:var(--surface);border:1px solid #596551;border-radius:16px;padding:30px;max-width:520px;width:90%}dialog::backdrop{background:#000a}dialog textarea{width:100%;height:140px;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:15px}.footnote{font-size:11px;color:var(--muted);margin-top:17px}a{color:var(--accent)}@media(max-width:1050px){.shell{grid-template-columns:200px 1fr}.split{grid-template-columns:1fr}.panel{border-left:0;padding:0}.cards{grid-template-columns:repeat(2,1fr)}section{padding:25px}.home h1{font-size:35px}}@media(max-width:650px){.shell{grid-template-columns:1fr}aside{padding:15px;gap:12px}.brand{font-size:20px}nav{display:flex;flex-wrap:wrap}.recent,.account,.label{display:none}header{padding:10px 18px;height:auto;flex-wrap:wrap}.cards{grid-template-columns:1fr}.home{padding-top:35px}.row{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){section{animation:none}}
/* v2: reference-aligned neutral workbench */
:root{--bg:#121212;--surface:#202020;--line:#343434;--text:#e7e7e7;--muted:#909090;--accent:#e8e8e8}body{font-size:14px}.shell{grid-template-columns: minmax(230px,17.55vw) 1fr;height:100vh;overflow:hidden}aside{background:#202020;padding:20px 12px;gap:23px;overflow:auto}.brand{font-size:19px;letter-spacing:0;padding:0 9px}.brand i{display:none}.brand:after{content:'发现应用 ⌄';float:right;font-size:12px;font-weight:400;border-radius:20px;background:#363636;padding:3px 10px}.windowtools{display:flex;justify-content:space-between;padding:0 9px;color:#969696}.lights{letter-spacing:6px;color:#b5b5b5}.label{letter-spacing:0;font-size:13px;margin:0 9px 10px}nav{gap:3px}nav button{padding:8px 10px;font-size:15px;border-radius:8px}button.active{background:#3a3a3a;color:#f2f2f2}.icon{width:27px;font-size:18px}.recent button{padding:8px 10px;color:#c4c4c4;font-size:14px}.account{padding:10px 8px;border:0}.account button{font-size:11px;color:#999}.primary{background:#e7e7e7;color:#171717}.primary:hover{background:white}main{display:flex;flex-direction:column;overflow:hidden}header{height:57px;min-height:57px;padding:0 27px;font-size:14px}.review{color:#999}.tag{font-size:10px}#view{overflow:auto;flex:1}section{max-width:none;animation:none}section.project{height:100%;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 20.4vw;grid-template-rows:1fr}.project-main{padding:0 21px 15px;display:flex;flex-direction:column;min-height:0}.project .tabs{margin:0 0 19px;gap:30px;border:0;flex-shrink:0}.tabs button{font-size:16px;color:#a7a7a7}.tabs button.active{color:#eee;border-color:#eee;font-weight:600}.project .tabs button{padding:13px 3px 9px}.project-feed{overflow:auto;flex:1;min-height:0}.project .panel{background:#202020;padding:20px 17px;border-left:1px solid var(--line);overflow:auto}.project .panel h3{font-size:17px;margin:0 0 18px}.project .panel .card{background:none;padding:14px 13px;border-radius:14px;margin-bottom:12px}.project .panel .card p{min-height:0;line-height:1.7;margin:8px 0 0}.project .panel .card strong{font-weight:500}.project .panel .card button{padding:0 3px;font-size:21px}.project .composer{margin:12px 14px 0;padding:15px 15px 12px;border:1px solid #2b2b2b;background:#202020;border-radius:17px}.composer textarea{font-size:15px;height:68px}.project .composer textarea{height:51px}.project .composer .tools select{display:none}.project .composer .tools button{border:0;background:none}.project .composer .tools button:nth-child(2){display:none}.project .composer .primary{border-radius:50%;font-size:0;width:34px;height:34px;background:#707070;color:#202020;padding:0}.project .composer .primary:after{content:'➤';font-size:22px;display:block;transform:rotate(-90deg)}.mode{margin:9px 35px 0;color:#949494;font-size:13px}.feed-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.feed-controls button{background:#282828;border:1px solid #404040;padding:6px 10px}.feed-controls button.selected,.feed-controls>button{background:#e6e6e6;color:#151515}.welcome{display:grid;grid-template-columns:27px 1fr;gap:10px}.bot{background:#13b69d;border-radius:50%;height:26px;display:grid;place-items:center;color:#fff;font-weight:bold}.welcome-body{line-height:1.75;color:#d9d9d9}.welcome-body p{color:#d1d1d1;margin:18px 0}.welcome-body strong{font-weight:550}.welcome-body .author{color:#eee}.end{text-align:center;color:#787878;margin:30px 0 14px;font-size:13px}.badges{display:flex;gap:13px;margin-top:12px}.badge{width:23px;height:23px;display:grid;place-items:center;background:#304733;border-radius:6px;color:#8bbe8d;font-size:12px}.badge:nth-child(2n){background:#39304c;color:#b7a0d8}.badge:nth-child(4){background:#4f4026;color:#d3b359}.face{background:#35434a;color:#c0d1da;border-radius:7px;width:25px;height:25px;display:grid;place-items:center;font-size:12px}.schedule{padding:8px 0;color:#ddd}.schedule small{display:block;color:#808080;margin-left:16px}.home{max-width:1000px;padding-top:115px;text-align:center}.home h1{font-size:36px;margin:15px 0 28px}.home .eyebrow,.home>p,.number,.sectiontitle{display:none}.home .composer{text-align:left;background:#232526;border-color:#2d3031;margin-top:55px}.home .cards{text-align:left}.card{background:#242424}.avatar{background:#353535;color:#ddd}.homecategories{display:inline-flex;background:#252525;border-radius:28px;padding:4px;gap:8px}.homecategories button:first-child{background:#484848;border-radius:24px}.project-config-foot{font-size:11px;color:#777}.home h1{letter-spacing:0}.cards{gap:14px}h1{font-weight:600}button:focus-visible{outline-color:#b4b4b4}
@media(max-width:1050px){section.project{grid-template-columns:minmax(0,1fr) 240px}.shell{grid-template-columns:220px 1fr}.project-main{padding:0 15px 12px}.project .panel{padding:16px 12px}.welcome-body{font-size:13px}}@media(max-width:760px){.shell{display:block;height:auto;overflow:visible}aside{max-height:none}main{overflow:visible}#view{overflow:visible}section.project{display:block}.project-main{min-height:700px}.project .panel{border-left:0}.windowtools,.recent,.account{display:none}.home{padding-top:35px}}
/* v3: optical clarity and consistent SVG icon grid */
.ui-icon{width:21px;height:21px;flex-shrink:0;vertical-align:middle;display:inline-block}.icon{width:29px;display:inline-flex;align-items:center;color:#b9b9b9}.icon .ui-icon{width:22px;height:22px}nav button{display:flex;align-items:center;font-size:15px;font-weight:400;line-height:24px;padding:8px 11px}nav button.active .icon{color:#eee}.windowtools{align-items:center}.window-icons{display:flex;gap:19px}.window-icons .ui-icon{width:18px;height:18px;color:#aaa}.traffic{display:flex;gap:7px}.traffic i{width:11px;height:11px;border-radius:50%;background:#ff6059}.traffic i:nth-child(2){background:#ffbd2e}.traffic i:nth-child(3){background:#28c840}.recent [data-page="project"]{display:flex;align-items:center;gap:10px}.recent .ui-icon{width:19px;height:19px;color:#aaa}.panel .card button{width:30px;height:30px;display:grid;place-items:center}.panel .card button .ui-icon{width:19px;height:19px}.panel .card strong{font-size:15px}.project .panel .card p{font-size:13px;color:#a6a6a6}.small{color:#a5a5a5}.welcome-body{font-size:15px;line-height:1.8}.welcome-body p{color:#d7d7d7}.welcome-body strong{font-weight:600}.recent button{font-size:14px;line-height:23px}.brand{font-weight:600}.composer textarea::placeholder{color:#a0a0a0;opacity:1}.composer textarea{font-size:16px}.composer .tools>button{min-width:32px;min-height:32px}.project .composer .primary:after{content:none}.project .composer .primary .ui-icon{width:25px;height:25px;fill:#343434;stroke:#343434}.input-actions{display:flex;align-items:center;gap:17px;margin-left:auto;color:#bfbfbf}.input-actions span{display:flex;align-items:center;gap:5px}.input-actions span .ui-icon:last-child{width:13px}.input-actions button{padding:4px}.schedule small{color:#a1a1a1}.tag.review{color:#aaa}.home .eyebrow{display:none}.project .composer .tools{flex:1}.welcome .small{font-size:12px}.project-config-foot{color:#999}.project .panel h3{line-height:24px}button:hover{background-color:#383838}.homecategories button{font-size:15px}
.homecategories button{display:flex;align-items:center;gap:8px;padding:7px 15px;font-weight:400}.homecategories .ui-icon{width:20px;height:20px}.face .ui-icon{width:19px;height:19px;stroke-width:1.5}.face{width:28px;height:28px;background:#39424a}.face:nth-child(2){background:#2d4049}.face:nth-child(3){background:#37414e}.face:nth-child(4){background:#504735}.badges{gap:12px}#breadcrumb{display:flex;align-items:center;gap:10px}#breadcrumb .ui-icon{color:#aaa;width:20px;height:20px}.composer textarea{resize:none}.home .composer{border-color:#353535}.homecategories{gap:3px}.card h3{font-weight:500}.window-icons .ui-icon{stroke-width:1.7}header .tools #invite{background:#e5e5e5;color:#161616;min-width:62px}.input-actions button{min-width:30px;min-height:30px}
/* v4 homepage proportions from supplied comparison */
.is-home header{position:absolute;right:0;top:0;border:0;background:none;height:45px;min-height:45px;z-index:1}.is-home #breadcrumb{display:none}.is-home .home{width: min(78%,1100px);max-width:1100px;padding:0;margin:clamp(125px,18vh,200px) auto 45px}.is-home .home h1{font-size:30px;font-weight:550;margin:0 0 24px;line-height:1.4}.homecategories button{font-size:14px;padding:5px 12px}.homecategories .ui-icon{width:18px;height:18px}.quick-actions{display:flex;gap:8px;align-items:center;margin-top:64px;margin-bottom:12px;overflow:auto;white-space:nowrap}.quick-actions button{display:flex;align-items:center;gap:6px;border:1px solid #383838;border-radius:22px;padding:6px 10px;color:#aaa;font-size:13px}.quick-actions .ui-icon{width:18px;height:18px}.is-home .home .composer{margin:0;background:#242729;border:1px solid #303334;border-radius:25px;padding:19px 22px 0;overflow:hidden}.is-home .composer textarea{height:77px;font-size:15px}.is-home .composer>.row{padding:7px 0 13px;gap:15px}.is-home .composer .tools{flex:1}.is-home .composer .tools button{border:0;background:none;padding:4px;min-width:24px}.is-home .round-send{width:33px;height:33px;border-radius:50%;padding:5px;background:#e5e5e5;color:#252727;display:grid;place-items:center}.round-send .ui-icon{width:24px;height:24px;fill:currentColor}.composer-footer{display:flex;gap:14px;text-align:left;margin:0 -22px;padding:8px 18px;background:#222526;border-top:1px solid #2c2e2f}.composer-footer button{display:flex;align-items:center;gap:6px;color:#929697;font-size:13px;padding:3px}.composer-footer .ui-icon{width:17px;height:17px}.composer-footer .ui-icon:last-child{width:12px}.examples-heading{display:flex;justify-content:space-between;align-items:center;margin-top:80px;color:#aaa;text-align:left}.examples-heading button{font-size:12px;color:#999}.example-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.example-item{padding:0;min-width:0;text-align:center;color:#aaa;font-size:13px;overflow:hidden}.example-item>span{display:block;padding:9px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.example-item:hover{background:none;color:#eee}.miniature{height:126px;border-radius:15px;overflow:hidden;text-align:left;position:relative;color:#253b37;background:#d9f0ec;padding:15px}.paper{padding:14px;background:#f8fbf8;font-size:8px;min-height:130px;box-shadow:0 1px 8px #0001}.paper h2{font-size:19px;margin:8px 0}.paper p{font-size:8px;color:#555}.mini-0 .paper{transform:rotate(-12deg);width:90%;margin:0 auto}.mini-1{background:#e8e2d7;padding:0 25px}.mini-1 .paper{background:#eee9df}.mini-2{background:#eff8f4;padding:12px}.mini-2 .paper{font-size:7px}.mini-3{background:linear-gradient(130deg,#342887,#6c24a2);color:white;display:grid;place-items:center;padding:8px}.story{font-size:7px;text-align:center}.story h3{font-size:10px;margin:13px 0}.story span{font-size:7px;background:white;border-radius:2px;color:#584195;padding:4px 7px}.bars{display:flex;align-items:end;gap:6px;height:40px}.bars i{width:12%;height:60%;background:#6fcab4}.bars i:nth-child(2n){height:90%}.bars i:nth-child(3){height:45%}.is-home .home>.footnote{display:none}aside{gap:19px}nav button{font-size:14px;padding:6px 10px;line-height:22px}nav{gap:3px}.recent button{line-height:22px;padding:6px 10px;font-size:13px}.label{font-size:12px}.brand{font-size:17px}.icon .ui-icon{width:20px;height:20px}.brand:after{font-size:11px}.is-home .input-actions{font-size:13px;gap:16px}.is-home .input-actions .ui-icon{width:19px;height:19px}
@media(max-width:1050px){.is-home .home{width:90%;margin-top:110px}.quick-actions{margin-top:45px}.example-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.is-home header{position:static;justify-content:flex-end}.is-home .home{width:90%;margin-top:40px}.homecategories button{font-size:12px;padding:5px 8px}.is-home .home h1{font-size:26px}.examples-heading{margin-top:35px}.quick-actions{margin-top:30px}.composer-footer{gap:5px}.composer-footer button{font-size:11px}}
@media(min-width:1051px){.is-home .home{width:65%;min-width:690px;margin-top:18.5vh}}.brand{margin-bottom:8px}.recent button{position:relative}.homecategories button{font-weight:400}
.is-capability header{height:36px;min-height:36px;border:0;justify-content:flex-end}.is-capability #breadcrumb{display:none}.capability-page{padding:0 23px 30px}.cap-top{margin:0 0 24px;gap:9px;border:0;align-items:center}.cap-top>button{padding:5px 10px;font-size:14px;border:0;border-radius:6px}.cap-top>button.active{background:#363636;border:0}.cap-actions{margin-left:auto;display:flex;gap:9px;align-items:center}.cap-actions input{width:240px;height:33px;font-size:13px}.cap-actions button{background:#272727;border:1px solid #3b3b3b;padding:4px 12px;white-space:nowrap}.featured h2{font-size:20px;margin:23px 0 14px}.scene-strip{display:flex;gap:12px;overflow:auto;padding-bottom:8px}.scene{flex:0 0 235px;border:1px solid #3a3a3a;border-radius:17px;padding:27px 19px 22px;background:#242424;position:relative;overflow:hidden;min-height:210px}.scene:before{content:'';position:absolute;inset:0 0 auto;height:96px;background:linear-gradient(150deg,#37566588,transparent);pointer-events:none}.scene-1:before{background:linear-gradient(140deg,#46655b88,transparent)}.scene-2:before{background:linear-gradient(140deg,#394456aa,transparent)}.scene-3:before{background:linear-gradient(140deg,#72634588,transparent)}.scene h3{position:relative;font-size:18px;margin:12px 0 20px}.scene button{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:14px;padding:6px 0;text-align:left;width:100%}.portrait{width:35px;height:35px;display:inline-grid;place-items:center;border-radius:50%;flex-shrink:0;background:#52737c;color:#eff5f3}.portrait .ui-icon{width:23px;height:23px;stroke-width:1.5}.scene .portrait{width:24px;height:24px}.scene .portrait .ui-icon{width:17px;height:17px}.hue-1{background:#9c735c}.hue-2{background:#607b64}.hue-3{background:#756891}.hue-4{background:#7c7470}.cap-filters{margin-top:20px}.expert-switch{display:flex;gap:15px}.expert-switch button{font-size:20px;padding:2px 0;color:#8b8b8b}.expert-switch button.active{color:#eee;background:none}.sort{display:flex;background:#252525;border-radius:6px;padding:2px}.sort button{font-size:12px;padding:3px 9px}.categories{display:flex;gap:10px;overflow:auto;white-space:nowrap;margin-top:13px}.categories button{font-size:12px;color:#999;padding:5px 10px}.categories button.active{color:#ddd;background:#272727}.capability-page #results{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:15px}.capability-page #results .card{padding:18px 18px 14px;border:0;border-radius:17px;min-width:0;position:relative}.expert-head{display:flex;gap:11px;align-items:center;min-height:42px}.expert-head>div{min-width:0}.expert-head h3{font-size:14px;font-weight:500;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.expert-sub{font-size:11px;color:#aaa}.capability-page .card p{font-size:12px;line-height:1.7;min-height:41px;margin:15px 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.capability-page .card .row{justify-content:flex-start;gap:5px}.capability-page .card .tag{border:0;background:#333;border-radius:4px;padding:2px 7px;color:#aaa;font-size:11px}.capability-page .card .row button{position:absolute;right:12px;top:13px;background:#e5e5e5;color:#222;padding:3px 9px;opacity:0;font-size:12px}.capability-page .card:hover .row button,.capability-page .card:focus-within .row button{opacity:1}@media(max-width:1150px){.capability-page #results{grid-template-columns:repeat(3,minmax(0,1fr))}.cap-actions input{width:170px}.cap-top{flex-wrap:wrap}}@media(max-width:760px){.capability-page #results{grid-template-columns:repeat(2,minmax(0,1fr))}.cap-actions{width:100%;margin:0}.cap-actions input{flex:1;min-width:0}.capability-page{padding:12px}.scene{flex-basis:220px}.capability-page .card .row button{opacity:1;position:static}.capability-page .card .row{flex-wrap:wrap}}@media(max-width:440px){.capability-page #results{grid-template-columns:1fr}}
.cap-top>button .ui-icon{width:17px;height:17px;margin-right:3px}.cap-top>button{display:flex;align-items:center}.cap-actions button{border-radius:7px}
.is-library header{position:absolute;right:0;top:0;z-index:1;border:0;height:36px;min-height:36px}.is-library #breadcrumb{display:none}.library-layout{display:grid;grid-template-columns: minmax(235px,18.5vw) minmax(0,1fr);height:100%}.library-nav{background:#1b1b1b;border-right:1px solid #252525;display:flex;flex-direction:column;padding:13px 12px 12px;min-height:0}.library-nav h2{font-size:20px;margin:0 11px 21px}.library-links{display:grid;gap:2px}.library-links button{display:flex;align-items:center;gap:9px;text-align:left;padding:6px 12px;font-size:14px}.library-links button.active{background:#2d2d2d}.library-links .ui-icon{width:18px;height:18px}.library-group{margin-top:23px}.library-group>.row{padding:0 10px;color:#858585;font-size:12px}.library-group>.row button{padding:0;display:flex}.library-group .ui-icon{width:17px;height:17px}.library-group>button{width:100%;text-align:left;display:flex;gap:10px;align-items:center;font-size:14px;padding:8px 12px}.library-group:nth-child(3)>button{color:#8a8a8a;font-size:12px}.space-icon{border:1px solid #0dbea7;color:#0dbea7;border-radius:4px;font-size:11px;width:16px;height:16px;display:grid;place-items:center}.space-icon.pink{color:#df459c;border-color:#df459c}.library-quota{margin-top:auto;border-top:1px solid #333;padding:12px 4px 0;font-size:11px}.quota-track{height:3px;background:#333;margin-top:7px}.quota-track i{display:block;width:2%;height:100%;background:#aaa}.library-content{padding:18px 45px 40px;overflow:auto;margin:0}.library-collapse{color:#999;margin-bottom:18px}.library-collapse .ui-icon{width:17px;height:17px}.library-content h1{font-size:26px;margin:0 0 31px}.library-toolbar{margin-bottom:16px}.library-filters{display:flex;background:#242424;border-radius:8px;padding:3px}.library-filters button{padding:4px 10px;font-size:14px}.library-filters button.active{background:#3a3a3a}.library-toolbar select{background:none;color:#aaa;border:1px solid #333;padding:7px 10px;border-radius:7px;font-size:12px}.library-toolbar select option{background:#222}.library-table{table-layout:fixed}.library-table th{font-size:12px;color:#8d8d8d;padding:10px 4px}.library-table th:first-child{width:40%}.library-table th:nth-child(2){width:18%}.library-table th:nth-child(3){width:20%}.library-table td{font-size:12px;color:#969696;padding:13px 4px;border-color:#272727;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-table td button{display:flex;gap:10px;align-items:center;padding:0;max-width:100%;font-size:14px;color:#dedede;text-align:left}.library-table td button>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-symbol{display:grid;place-items:center;color:#8fbcff;flex-shrink:0}.file-symbol.green{color:#67c98c}.file-symbol .ui-icon{width:19px;height:19px}.library-guide{margin-top:45px}.library-guide>.row{color:#929292;font-size:12px}.library-guide>.row button{font-size:12px;color:#858585}.library-guide>.row .ui-icon{width:16px;height:16px;margin-right:6px}.guide-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}.guide-cards>button{border:1px solid #333;border-radius:15px;display:flex;align-items:center;gap:15px;text-align:left;padding:30px 20px;min-height:140px}.guide-cards h3{font-size:14px;margin:0}.guide-cards p{font-size:12px;margin:5px 0;color:#969696}.guide-cards .ui-icon{width:48px;height:48px;color:#b9b9b9}.library-search{margin-bottom:12px}@media(max-width:1100px){.library-layout{grid-template-columns:200px minmax(0,1fr)}.library-content{padding:20px}.library-table th:nth-child(4),.library-table td:nth-child(4){display:none}.guide-cards{grid-template-columns:1fr}}@media(max-width:760px){.library-layout{display:block}.library-nav{min-height:0}.library-quota{margin-top:15px}.library-content{padding:18px}.is-library header{position:static}.library-toolbar{align-items:flex-start;gap:8px}.library-filters button{font-size:12px;padding:5px}.library-table th:first-child{width:48%}.library-table td button{font-size:12px}}
/* Project configuration: compact reference-aligned rail. */
section.project{grid-template-columns:minmax(0,1fr) clamp(280px,21.2vw,360px)}
.project .panel{min-width:0;padding:18px 16px;overflow:auto}
.project .panel>.row{height:24px;margin-bottom:16px;gap:8px}
.project .panel h3{font-size:16px;font-weight:500;line-height:24px;margin:0}
.project .panel>.row .ui-icon{width:18px;height:18px}
.project .panel .card{min-width:0;padding:10px 12px 14px;margin-bottom:12px;border-radius:12px;border-color:#393939;box-shadow:none}
.project .panel .card .row{gap:4px;min-height:32px}
.project .panel .card strong{font-size:14px;line-height:20px;font-weight:500;display:flex;align-items:baseline;gap:6px}
.project .panel .card strong .small{font-size:12px;font-weight:400;color:#969696}
.project .panel .card button{width:32px;height:32px;min-width:32px;padding:0;flex-shrink:0}
.project .panel .card button .ui-icon{width:18px;height:18px}
.project .panel .card p{font-size:12px;line-height:19px;color:#969696;margin:4px 0 0;overflow-wrap:anywhere}
.project .panel .badges{gap:10px;margin-top:6px;flex-wrap:wrap}
.project .panel .face{width:24px;height:24px;border-radius:6px}
.project .panel .face .ui-icon{width:17px;height:17px}
.project .panel .badge{width:21px;height:21px;font-size:12px;flex-shrink:0}
.project .panel .schedule{display:grid;grid-template-columns:6px minmax(0,1fr);column-gap:10px;align-items:baseline;padding:10px 6px;font-size:13px;line-height:20px}
.project .panel .schedule:before{content:'';width:6px;height:6px;border-radius:50%;background:#858585}
.project .panel .schedule.is-active:before{background:#20bf78}
.project .panel .schedule small{grid-column:2;margin:0;color:#888;font-size:11px;line-height:18px}
.project .panel .card .schedule-all{display:block;width:100%;height:32px;margin-top:4px;color:#999;font-size:12px;font-weight:400}
@media(max-width:1050px) and (min-width:761px){section.project{grid-template-columns:minmax(0,1fr) 250px}.project .panel{padding:16px 12px}}
@media(max-width:760px){.project .panel .card button{min-width:44px;height:44px}}
</style><link rel="stylesheet" href="components/config-dialog.css"><div class="shell"><aside><div class="windowtools"><span class="lights">●●●</span><span>◫ ⌕ ▽</span></div><div class="brand"><i>W/</i> WorkDSH</div><div><div class="label"></div><nav id="nav"></nav></div><div class="recent"><div class="label">任务 (12) ⌄</div><button data-page="task">客户与报价跟进</button><button data-page="task">爆款内容预检场景</button><button data-page="task">理解微信文章内容</button><button data-page="task">分析微信视频号视频</button><button data-page="task">本周经营情况汇总</button><button data-page="task">牛顿第一定律教学设计</button></div><div class="recent"><div class="label">空间 (2) ⌄</div><button data-page="project">▧ 钣金厂智能运营平台</button><button data-page="task"> 客户与报价跟进</button><button data-page="task"> 经营周汇总</button><button data-page="task"> 核对新询价客户与图纸…</button><button data-page="task"> 运营刷新与数据校验</button><button data-page="project">▧ 课程设计工作室</button></div><div class="account">阅江 <span class="small"> / 个人空间</span><br><button data-page="admin">组织管理 ↗</button></div></aside><main><header><span id="breadcrumb"></span><div class="tools"><span class="tag review">界面提案 · 示例数据</span><button class="primary" id="invite" data-action="dialog" data-title="邀请成员" hidden>邀请</button><button id="emptyToggle">查看空状态</button></div></header><div id="view"></div></main></div><dialog id="dialog"><div class="row"><h2 id="dialogTitle"></h2><button id="close" aria-label="关闭">✕</button></div><div id="dialogBody"></div><p class="footnote">设计演示,不会执行任务、安装插件或提交数据。</p></dialog><script src="icons.js"></script><script src="components/config-dialog.js"></script><script src="project-dialogs.js"></script><script>
const pages={home:'新建任务',project:'项目',capability:'专家 · 技能 · 连接器',library:'资料库',automation:'定时任务'};let page='home',tab='专家',projectTab='动态',empty=false;
const $=s=>document.querySelector(s);const esc=s=>s.replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const button=(name,action='dialog')=>`<button data-action="${action}" data-title="${name}">${name}</button>`;
function composer(){return `<div class="composer"><textarea aria-label="任务描述" placeholder="描述你想完成的工作,或 @ 引用专家、技能和项目资料"></textarea><div class="row"><div class="tools">${button('+ 添加资料')}${button('选择专家')}<select aria-label="工作空间"><option>个人工作空间</option><option ${page==='project'||page==='task'?'selected':''}>钣金厂智能运营平台</option></select></div><button class="primary" data-action="start">开始任务 ↗</button></div></div>`}
function emptyView(title,detail,cta){return `<div class="empty"><span class="avatar">+</span><h2>${title}</h2><p>${detail}</p><button class="primary" data-action="dialog" data-title="${cta}">${cta}</button></div>`}
let librarySection='最近',libraryFilter='最近访问';
function alignLibrary(){
document.body.classList.toggle('is-library',page==='library');if(page!=='library')return;
const data=[['钣金厂内部管理台','阅江','钣金工厂','5 天前','页面'],['客户','阅江','钣金工厂','2026年9月1日 07:37','表格'],['库存事件','阅江','钣金工厂','2026年9月1日 07:37','表格'],['数据异常','阅江','钣金工厂','2026年9月1日 07:37','表格'],['商品资料看板_演示版','示例作者','资料库的100种用法','2026年8月30日 22:33','页面'],['营销计划看板_演示版','示例作者','资料库的100种用法','2026年8月30日 22:33','页面'],['如何用资料库组织团队工作','示例作者','资料库的100种用法','2026年8月30日 22:33','文件夹']];
const root=document.querySelector('#view');root.innerHTML=`<div class="library-layout"><div class="library-nav"><h2>资料库</h2><div class="library-links">${['搜索','最近','本地产物'].map((x,i)=>`<button data-library-section="${x}" class="${librarySection===x?'active':''}">${svgIcon(['search','recent','folder'][i])}${x}</button>`).join('')}</div><div class="library-group"><div class="row"><span>我的资料 ⌄</span><button data-action="dialog" data-title="创建资料" aria-label="创建资料">${svgIcon('plus')}</button></div><button data-action="dialog" data-title="创建第一篇文档">+ 创建第一篇文档</button></div><div class="library-group"><div class="row"><span>团队空间 ⌄</span><button data-action="dialog" data-title="添加团队空间" aria-label="添加团队空间">${svgIcon('plus')}</button></div><button data-library-section="资料库的100种用法"><span class="space-icon">学</span>资料库的100种用法</button><button data-library-section="钣金工厂"><span class="space-icon pink">钣</span>钣金工厂</button></div><div class="library-quota"><div class="row"><span>已使用 5.0 MB / 5.0 GB</span><span>示例</span></div><div class="quota-track"><i></i></div></div></div><section class="library-content"><div class="library-collapse">${svgIcon('panel')}</div><h1>${librarySection}</h1><div class="row library-toolbar"><div class="library-filters">${['最近访问','我分享的','与我共享'].map(x=>`<button data-library-filter="${x}" class="${libraryFilter===x?'active':''}">${x}</button>`).join('')}</div><select id="library-type" aria-label="资料类型"><option>全部类型</option><option>页面</option><option>表格</option><option>文件夹</option></select></div>${librarySection==='搜索'?'<input class="search library-search" aria-label="搜索资料" placeholder="搜索资料名称">':''}${empty||libraryFilter!=='最近访问'||librarySection==='本地产物'?emptyView('暂无资料',librarySection==='本地产物'?'本地产物将在任务生成文件后显示。':'此视图暂无示例资料。','导入资料'):`<div class="library-table-wrap"><table class="library-table"><thead><tr><th>名称</th><th>所有者</th><th>位置</th><th>最近访问</th></tr></thead><tbody>${data.filter(x=>!['钣金工厂','资料库的100种用法'].includes(librarySection)||x[2]===librarySection).map(x=>`<tr data-type="${x[4]}"><td><button data-action="dialog" data-title="${x[0]}"><span class="file-symbol ${x[4]==='表格'?'green':''}">${svgIcon(x[4]==='文件夹'?'folder':x[4]==='表格'?'tablefile':'codefile')}</span><span>${x[0]}</span></button></td><td>${x[1]}</td><td>${x[2]}</td><td>${x[3]}</td></tr>`).join('')}</tbody></table><p id="library-no-results" hidden>没有匹配的资料。</p></div>`}<div class="library-guide"><div class="row"><span>${svgIcon('book')} 了解资料库</span><button data-action="dismiss-guide">我知道了</button></div><div class="guide-cards">${[['一分钟玩转资料库','将资料和任务成果归档,为下一次协作提供参考。','expert'],['WorkDSH 资料库介绍','内容组织、修订审阅和团队共享的统一入口。','book']].map(x=>`<button data-action="dialog" data-title="${x[0]}"><div><h3>${x[0]}</h3><p>${x[1]}</p></div>${svgIcon(x[2])}</button>`).join('')}</div></div></section></div>`;
}
function filterLibrary(){let count=0;document.querySelectorAll('.library-table tbody tr').forEach(row=>{row.hidden=($('#library-type').value!=='全部类型'&&row.dataset.type!==$('#library-type').value)||!row.cells[0].textContent.includes(document.querySelector('.library-search')?.value.trim()||'');if(!row.hidden)count++});if($('#library-no-results'))$('#library-no-results').hidden=count>0}
document.addEventListener('change',e=>{if(e.target.id==='library-type')filterLibrary()});document.addEventListener('input',e=>{if(e.target.matches('.library-search'))filterLibrary()});
function alignCapabilities(){
document.body.classList.toggle('is-capability',page==='capability');
if(page!=='capability')return;
const section=document.querySelector('#view section');section.classList.add('capability-page');
const top=section.firstElementChild;top.remove();
const tabs=section.querySelector('.tabs');tabs.classList.add('cap-top');tabs.querySelectorAll('button').forEach((b,i)=>b.innerHTML=svgIcon(['expert','code','project','panel'][i])+' '+b.textContent);
const search=section.querySelector('.search');const oldrow=search.parentElement;search.remove();oldrow.remove();
const actions=document.createElement('div');actions.className='cap-actions';actions.append(search);const mine=document.createElement('button');mine.dataset.action='dialog';mine.dataset.title='我的'+tab;mine.textContent='我的'+tab;actions.append(mine);tabs.append(actions);
if(tab!=='专家')return;
const featured=document.createElement('div');featured.className='featured';featured.innerHTML='<h2>精选场景</h2><div class="scene-strip">'+[['开学季','校园求职教练','论文写作导师','校园活动策划顾问'],['内容创作','内容创作专家','小红书运营专家','长文档写作专家'],['经营分析','经营总控顾问','报价管理师','数据分析顾问'],['技术工程','高级开发工程师','架构设计顾问','代码审查专家'],['小微企业','销售教练','客户运营专家','创业伙伴']].map((a,i)=>`<article class="scene scene-${i}"><h3>${a[0]}</h3>${a.slice(1).map(n=>`<button data-action="dialog" data-title="${n}"><span class="portrait hue-${i}">${svgIcon('user')}</span>${n}</button>`).join('')}</article>`).join('')+'</div>';
tabs.after(featured);
const filters=document.createElement('div');filters.className='cap-filters';filters.innerHTML='<div class="row"><div class="expert-switch"><button class="active" data-action="expert-kind">专家</button><button data-action="dialog" data-title="专家团 · P2 规划">专家团</button></div><div class="sort"><button class="active" data-action="sort">综合</button><button data-action="sort">最热</button><button data-action="sort">最新</button></div></div><div class="categories">'+['全部','经营分析','销售报价','教育学习','技术工程','内容创作','质量管理'].map((x,i)=>`<button data-category="${x}" class="${i===0?'active':''}">${x}</button>`).join('')+'</div>';featured.after(filters);
const results=section.querySelector('#results');if(!results)return;
const extras=[['高级开发工程师','全栈开发与架构设计,协助拆解工程问题。','技术工程'],['内容创作专家','梳理选题、组织素材与表达,准备内容方案。','内容创作'],['数据分析顾问','核对数据口径,整理指标与分析结论。','经营分析'],['长文档写作专家','将参考材料组织为结构清楚的长文档。','内容创作'],['生产计划师','核对生产约束,准备排产建议。','质量管理'],['客户运营专家','整理客户分层与跟进方法。','销售报价'],['课程活动设计师','组织课堂活动和评价任务。','教育学习'],['技术架构顾问','梳理系统边界、依赖与实施风险。','技术工程']];
extras.forEach(([name,desc,cat])=>{const card=document.createElement('article');card.className='card';card.innerHTML=`<span class="avatar">${name[0]}</span><h3>${name}</h3><p>${desc}</p><div class="row"><span class="tag">${cat}</span><button data-action="dialog" data-title="${name}">查看 ↗</button></div>`;results.append(card)});
results.querySelectorAll('.card').forEach((card,i)=>{const avatar=card.querySelector('.avatar');avatar.className='portrait hue-'+i%5;avatar.innerHTML=svgIcon('user');const title=card.querySelector('h3');const head=document.createElement('div');head.className='expert-head';title.before(head);head.append(avatar);const text=document.createElement('div');head.append(text);text.append(title);const sub=document.createElement('span');sub.className='expert-sub';sub.textContent=['业务顾问','专业助手','方法与实践'][i%3];text.append(sub);card.dataset.category=card.querySelector('.tag').textContent;card.querySelector('.row button').textContent='查看';const extra=document.createElement('span');extra.className='tag';extra.textContent='示例专家';card.querySelector('.row').append(extra)});
}
function alignHome(){
document.body.classList.toggle('is-home',page==='home');
if(page!=='home')return;
const home=document.querySelector('.home');
const composer=home.querySelector('.composer');
const quick=document.createElement('div');quick.className='quick-actions';
quick.innerHTML=['文档处理','金融服务','数据分析及可视化','个人工作台','幻灯片'].map((label,i)=>`<button data-action="fill" data-title="${label}">${svgIcon(['book','wallet','chart','panel','code'][i])}${label}</button>`).join('');
composer.before(quick);
const footer=document.createElement('div');footer.className='composer-footer';
footer.innerHTML=`<button data-action="dialog" data-title="选择工作空间">${svgIcon('folder')}选择工作空间 ${svgIcon('down')}</button><button data-action="dialog" data-title="默认权限">${svgIcon('shield')}默认权限 ${svgIcon('down')}</button>`;composer.append(footer);
const tools=composer.querySelector('.tools');tools.querySelector('select').hidden=true;tools.querySelectorAll('button')[1].hidden=true;
const send=composer.querySelector('.primary');send.innerHTML=svgIcon('arrow');send.classList.add('round-send');
const controls=document.createElement('div');controls.className='input-actions';controls.innerHTML=`<span>${svgIcon('bolt')} 快速 ${svgIcon('down')}</span><button data-action="dialog" data-title="语音输入" aria-label="语音输入">${svgIcon('mic')}</button>`;send.before(controls);
const cards=home.querySelector('.cards');if(cards){cards.outerHTML=`<div class="examples-heading"><span>不知道做什么,试试最佳实践案例</span><button data-action="dialog" data-title="更多案例">换一批 ×</button></div><div class="example-gallery">${['本月经营复盘报告','公众号创刊推文:从选题到…','销售数据分析仪表盘','交互式滚动叙事页'].map((name,i)=>`<button class="example-item" data-action="fill" data-title="${name}"><div class="miniature mini-${i}">${i===0?'<div class="paper"><b>经营复盘</b><h2>246,800</h2><small>本月经营数据概览</small><div class="bars"><i></i><i></i><i></i><i></i><i></i></div></div>':i===1?'<div class="paper"><b>你种的咖啡不好喝,<br>并不是你的错。</b><hr><p>从一次日常观察开始,<br>讲好一个有温度的故事。</p><hr><hr></div>':i===2?'<div class="paper"><b>销售数据分析仪表盘</b><h2>¥7,353</h2><div class="bars"><i></i><i></i><i></i><i></i></div></div>':'<div class="story"><small>IDEAS INTO STORIES</small><h3>让故事,在滚动中展开。</h3><span>探索更多 →</span></div>'}</div><span>${name}</span></button>`).join('')}</div>`}
}
function render(){ $('#nav').innerHTML=Object.entries(pages).map(([id,label],i)=>`<button data-page="${id}" class="${page===id?'active':''}"><span class="icon">${['+','▧','◈','▤','◷'][i]}</span>${label}</button>`).join('');$('#breadcrumb').textContent=({task:'任务 / 客户与报价跟进',admin:'组织管理',...pages})[page];$('#emptyToggle').textContent=empty?'查看示例状态':'查看空状态';let html='';
if(page==='home')html=`<section class="home"><div class="eyebrow">MAKE ROOM FOR WHAT MATTERS</div><h1>WorkDSH,我帮你</h1><div class="homecategories"><button data-action="dialog" data-title="日常办公">♧ 日常办公</button><button data-action="dialog" data-title="代码开发">⌘ 代码开发</button><button data-action="dialog" data-title="设计创意">◉ 设计创意</button></div>${composer()}<div class="row sectiontitle"><h3>从熟悉的场景开始</h3><span class="small">工作方法,随时复用</span></div>${empty?emptyView('你的工作空间已就绪','创建第一个任务,逐步积累专家、技能和成果。','了解任务创建'):`<div class="cards">${[['01','经营复盘','汇总业务数据,找到需要关注的问题。'],['02','客户跟进','整理往来记录,准备下一步行动。'],['03','课程设计','从教学目标到课堂提问,形成完整方案。']].map(x=>`<article class="card"><div class="number">${x[0]}</div><h3>${x[1]}</h3><p>${x[2]}</p><button data-action="fill" data-title="${x[1]}">开始准备 ↗</button></article>`).join('')}</div>`}<p class="footnote">正式产品将使用 Harness 原生任务执行与授权流程。</p></section>`;
if(page==='capability'){const data=tab==='专家'?[['综','经营总控顾问','统筹客户、报价与交付,帮助你判断经营优先级。','经营分析'],['报','报价管理师','核查询价信息,结合成本资料准备报价方案。','销售报价'],['教','教学设计顾问','组织教学目标、课堂活动与问题链。','教育学习'],['质','质量交付经理','梳理检验记录、返工事项与交付风险。','质量管理']]:tab==='技能'?[['客','客户管理','整理客户资料、联系人和跟进事项。','业务技能'],['报','报价计算','根据已确认的材料与工序数据准备计算。','业务技能'],['文','教学方案编写','复用教学设计方法和输出模板。','内容技能']]:[['文','腾讯文档','连接文档与在线表格,使用已授权的账号。','待授权'],['M','自定义 MCP','通过标准连接配置接入外部工具。','未配置']];html=`<section><div class="row"><div><div class="eyebrow">CAPABILITIES</div><h1>把专业能力带进工作</h1></div><button class="primary" data-action="dialog" data-title="创建${tab}">+ 创建${tab}</button></div><div class="tabs">${['专家','技能','连接器','行业应用'].map(t=>`<button data-tab="${t}" class="${tab===t?'active':''}">${t}</button>`).join('')}</div><div class="row"><span class="small">我的能力 / 全部</span><input class="search" aria-label="搜索能力" placeholder="搜索名称或描述"></div>${empty||tab==='行业应用'?emptyView(`还没有${tab}`,`添加后可以在任务和项目中引用这些${tab}。`,`添加${tab}`):`<div class="cards" id="results">${data.map(x=>`<article class="card"><span class="avatar">${x[0]}</span><h3>${x[1]}</h3><p>${x[2]}</p><div class="row"><span class="tag">${x[3]}</span><button data-action="dialog" data-title="${x[1]}">查看 ↗</button></div></article>`).join('')}</div><p id="noResults" hidden>没有匹配的能力,请换一个关键词。</p>`}</section>`}
if(page==='project'){html=`<section class="project"><div class="project-main"><div class="tabs">${['动态','计划','任务','资产'].map(t=>`<button data-project-tab="${t}" class="${projectTab===t?'active':''}">${t}</button>`).join('')}</div><div class="project-feed">${empty?emptyView(`暂无项目${projectTab}`,'项目内的协作记录和成果将在这里逐步积累。','准备第一个项目任务'):projectTab==='动态'?`<div class="feed-controls"><button data-action="dialog" data-title="发布留言">+ 发布留言</button><div><button class="selected" data-action="filter">与我相关</button> <button data-action="filter">成员动态</button></div></div><article class="welcome"><div class="bot">W</div><div class="welcome-body"><div class="author"><strong>WorkDSH 助手</strong> <span class="small">· 8/30 18:54 · 示例</span></div><strong>🎉 欢迎来到 WorkDSH 项目——这里是团队和 AI 共同协作的工作台</strong><p>来带你认识项目空间的核心功能:</p><p>📁 <strong>资产与项目配置</strong>:团队资源,全员共用<br>项目文档、参考资料放进「资产」,团队成员可以在权限范围内查看,AI 也能读取参考。任务产出的文件可以保存到资产中;专家、技能和连接器配置到项目里,供成员发起任务时使用。</p><p>📋 <strong>计划看板</strong>:分配、管理团队工作<br>在「计划」中创建待办、分配负责人,查看谁在做什么。有进展时补充评论,让团队在同一个看板上跟踪工作。</p><p>🤝 <strong>任务协同</strong>:共同推进,或接力交接<br>项目组织任务与当前成果。共享项目配置不等于共享个人会话;协作和转交将按照成员权限与执行身份逐步接入。</p><p>⚙ <strong>定时任务</strong>:让重复工作自动开展<br>周期汇总、数据检查和跟进提醒可以关联项目。此能力按 P2 计划实现,当前页面仅展示配置位置。</p><p>从一项任务开始,逐步积累团队的工作成果 🙂</p></div></article><div class="end">没有更多了</div>`:projectTab==='计划'?`<h3>项目待办</h3><div class="cards">${['待处理','进行中','已完成'].map((t,i)=>`<div class="card"><h3>${t}</h3><p>${['核对询价附件','整理客户清单','建立资料目录'][i]}</p><span class="tag">示例</span></div>`).join('')}</div>`:projectTab==='任务'?`<button class="file" data-page="task">客户与报价跟进 →</button>`:`<button class="file" data-action="dialog" data-title="材料价格参考表">▤ 材料价格参考表 · 引用自资料库</button>`}</div>${composer()}<div class="mode">云端任务 ⌄ <span class="project-config-foot"> 布局演示</span></div></div><div class="panel"><div class="row"><h3>项目配置</h3><span class="small">◫</span></div><div class="card"><div class="row"><strong>指令</strong><button data-action="dialog" data-title="项目指令" aria-label="配置项目指令">+</button></div><p># 钣金厂智能运营平台|项目总指令<br><br>## 一、系统定位…</p></div><div class="card"><div class="row"><strong>连接器 <span class="small">1</span></strong><button data-action="dialog" data-title="连接器">+</button></div><p>个人授权 <span class="badge" style="display:inline-grid;background:#3672d4;color:white">文</span></p></div><div class="card"><div class="row"><strong>专家 <span class="small">4</span></strong><button data-action="dialog" data-title="项目专家">+</button></div><div class="badges">${['质','综','生','报'].map(x=>`<span class="face">${x}</span>`).join('')}</div></div><div class="card"><div class="row"><strong>技能 <span class="small">10</span></strong><button data-action="dialog" data-title="项目技能">+</button></div><div class="badges">${['客','综','质','生','库','报'].map(x=>`<span class="badge">${x}</span>`).join('')}</div></div><div class="card"><div class="row"><strong>定时任务 <span class="small">5</span></strong><button data-action="dialog" data-title="定时任务规划">+</button></div><div class="schedule"><span>经营周汇总</span><small>每周 周五 · 17:00</small></div><div class="schedule is-active" title="示例:启用状态,尚未接入调度"><span>客户与报价跟进</span><small>每周 周一 · 09:00</small></div><button class="schedule-all" data-action="dialog" data-title="定时任务规划">查看全部(5)</button></div></div></section>`;$('#breadcrumb').textContent='▱ 项目 / 钣金厂智能运营平台'}
if(page==='task')html=`<section><div class="row"><h1>客户与报价跟进</h1><span class="tag">示例 · 待确认</span></div><div class="split"><div><div class="message">请整理本周需要跟进的客户,并准备一份报价风险清单。</div><div class="answer"><div class="eyebrow">经营总控顾问</div><h2>先核对资料,再决定下一步。</h2><p>下面展示任务详情的目标布局。正式产品中的进度、工具调用和结果将来自真实执行记录。</p><div class="step">✓ 读取项目指令与已关联资料 <span class="small">(示例)</span></div><div class="step">✓ 整理需要核对的事项 <span class="small">(示例)</span></div><div class="step">○ 等待用户确认后提交 <span class="small">(示例)</span></div><h3 style="margin-top:30px">建议关注</h3><p>客户下一次跟进时间、报价审批状态,以及材料价格是否仍有效。</p><button class="primary" data-action="dialog" data-title="审阅拟提交内容">审阅拟提交内容</button></div>${composer()}</div><div class="panel"><h3>成果与引用</h3><p class="small">正式任务中展示实际生成的成果。</p><button class="file" data-action="preview">▤ 报价风险清单.md<br><span class="small">示例文件 · 点击预览</span></button><h3 style="margin-top:35px">本次使用</h3><p>项目:钣金厂智能运营平台</p><p>专家:经营总控顾问</p><p>技能:客户管理、报价计算</p><span class="tag">连接器等待授权</span></div></div></section>`;
if(page==='library')html=`<section><div class="row"><div><div class="eyebrow">LIBRARY</div><h1>资料与成果,持续积累。</h1></div><button class="primary" data-action="dialog" data-title="导入资料">+ 导入资料</button></div><div class="tabs"><button class="active">最近访问</button></div>${empty?emptyView('资料库还是空的','导入参考资料,或从任务中保存成果。','导入第一份资料'):`<table><thead><tr><th>名称</th><th>所属空间</th><th>类型</th></tr></thead><tbody>${['材料价格参考表','客户跟进记录','报价风险清单'].map(n=>`<tr><td><button data-action="dialog" data-title="${n}">▤ ${n}</button></td><td>钣金工厂</td><td>示例资料</td></tr>`).join('')}</tbody></table>`}</section>`;
if(page==='automation'||page==='admin')html=`<section><div class="eyebrow">${page==='admin'?'ADMINISTRATION':'AUTOMATIONS'}</div><h1>${page==='admin'?'组织管理':'自动化'}</h1>${emptyView(page==='admin'?'管理入口设计占位':'让重复工作按时开展',page==='admin'?'独立管理入口;成员、权限与审计按计划接入。管理员不默认读取成员私有内容。':'P2 计划实现。执行主体、项目与授权配置将在创建时明确。','查看功能规划')}</section>`;
$('#view').innerHTML=html;alignHome();alignCapabilities();alignLibrary();sharpenIcons();$('#invite').hidden=page!=='project';location.hash=page;
}
function show(title,body){$('#dialogTitle').textContent=title;$('#dialogBody').innerHTML=body;$('#dialog').showModal()}
document.addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return;if(b.dataset.librarySection){librarySection=b.dataset.librarySection;render()}if(b.dataset.libraryFilter){libraryFilter=b.dataset.libraryFilter;render()}if(b.dataset.action==='dismiss-guide'){b.closest('.library-guide').hidden=true}if(b.dataset.page){page=b.dataset.page;render()}if(b.dataset.tab){tab=b.dataset.tab;render()}if(b.dataset.projectTab){projectTab=b.dataset.projectTab;render()}if(b.id==='emptyToggle'){empty=!empty;render()}if(b.id==='close')$('#dialog').close();if(b.dataset.category){document.querySelectorAll('[data-category]').forEach(x=>x.classList.toggle('active',x===b));document.querySelectorAll('#results .card').forEach(c=>c.hidden=b.dataset.category!=='全部'&&c.dataset.category!==b.dataset.category)}if(b.dataset.action==='sort'){show('排序演示','<p>当前为示例目录,尚无真实热度和发布时间。正式排序由专家服务提供。</p>')}if(b.dataset.action==='filter'){b.parentElement.querySelectorAll('button').forEach(x=>x.classList.remove('selected'));b.classList.add('selected')}if(b.dataset.action==='fill'){$('textarea').value=`请帮我准备${b.dataset.title},先梳理所需资料和工作步骤。`;$('textarea').focus()}if(b.dataset.action==='start')show('任务入口演示','<p>这份原型仅用于审阅界面。查看任务页可以了解对话、执行进度和成果的布局。</p><button class="primary" id="demoTask">查看任务布局 →</button>');if(b.id==='demoTask'){$('#dialog').close();page='task';render()}if(b.dataset.action==='preview')show('报价风险清单.md','<p>示例预览</p><h3>待核对事项</h3><ul><li>材料价格的有效日期</li><li>客户下一次跟进时间</li><li>报价是否完成审批</li></ul>');if(b.dataset.action==='dialog')show(b.dataset.title,`<p>此处预留「${esc(b.dataset.title)}」的配置与操作流程。实际数据由对应插件提供。</p><p>权限校验、保存及调用将在业务实现阶段接入。</p>`)});
document.addEventListener('input',e=>{if(e.target.matches('.search')){let count=0;document.querySelectorAll('#results .card').forEach(c=>{c.hidden=!c.textContent.includes(e.target.value.trim());if(!c.hidden)count++});if($('#noResults'))$('#noResults').hidden=count>0}});if(Object.keys(pages).concat(['task','admin']).includes(location.hash.slice(1)))page=location.hash.slice(1);render();
</script></html>