https://static.segmentfault.com/main_site_next/prod/_next/static/chunks/80773-82c4d2140ee8a148.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[80773],{80773:function(e,a,r){let n,t;var l=r(11527),s=r(7675),o=r.n(s),i=r(50959),d=r(89714),c=r(56306),g=r(2016),m=r(54995),u=r(11526),f=r(51742),h=r(44156),p=r(19803),v=r.n(p),b=r(35737),x=r(3014),w=r(6637);let j=!1,Index=e=>{let{unlimitedTags:a=!1,type:s="",maxTags:o=5,allTags:p=[],noSearch:k=!1,noCreate:N=!1,value:y=[],onChange:I,className:C="mb-3",onlyTags:Z=[],fixedTags:M=[]}=e,[S,T]=(0,i.useState)(!1),[A,R]=(0,i.useState)([]),[_,D]=(0,i.useState)(!1),[E,F]=(0,i.useState)(""),[q,z]=(0,i.useState)({value:"",isInvalid:!1,errorMsg:""}),[O,K]=(0,i.useState)({value:"",isInvalid:!1,errorMsg:""}),[$,L]=(0,i.useState)(0),[H,J]=(0,i.useState)(!1),[U,B]=(0,i.useState)(!1),G=(0,i.useRef)(),P=(0,i.useRef)(),Q=(0,i.useRef)(null),V=(0,w.Oy)();(0,w.t$)(Q,()=>{J(!1)}),(0,i.useEffect)(()=>{r.e(48904).then(r.bind(r,48904)).then(e=>{let{default:a}=e;a.filter=function(){return!0},a("esc",()=>{J(!1)})})},[]),(0,i.useEffect)(()=>{document.querySelectorAll(".tab-header").forEach(e=>{e.removeAttribute("tabindex")})}),(0,i.useEffect)(()=>{!a&&y.length>=o&&J(!1)},[y.length]),(0,i.useEffect)(()=>{H&&G.current.focus()},[H]);let onAddTag=e=>{L(0),clearTimeout(t);let a=y.filter(a=>a.id===e.id);a.length>0?I(y.map(a=>({...a,isRepeat:a.id===e.id}))):(I([...y,e]),_&&(R([]),D(!1),F("")))},onRemoveTag=e=>{I(y.filter(a=>a.id!==e.id))};return Index.handleClickOutside=()=>{J(!1)},(0,l.jsxs)("div",{ref:Q,className:"tag-wrap ".concat(C),onKeyDown:e=>{let a=e.keyCode;38===a&&$>0&&L($-1),40===a&&$<A.length-1&&L($+1),13===a&&$>-1&&$<=A.length-1&&(onAddTag(A[$]),R([]),D(!1),F(""))},children:[(0,l.jsxs)("div",{className:"m-n1",children:[y.map(e=>(0,l.jsxs)(d.Z,{variant:"outline-secondary",size:"sm",className:"tag-input m-1 ".concat(e.isRepeat?"warning":""),onClick:()=>onRemoveTag(e),children:[e.name," \xd7"]},e.id)),(0,l.jsxs)(c.Z,{show:H,className:"d-inline-block ".concat(y.length>=o&&!a?"hidden":""),children:[(0,l.jsx)(c.Z.Toggle,{className:"btn btn-outline-secondary btn-sm m-1",variant:"Secondary",onClick:()=>{J(e=>!e),B(e=>!e)},id:"tags-toggle",children:"+ 添加标签"}),(0,l.jsxs)(c.Z.Menu,{className:v()(a&&"pt-4"),show:U,children:[(0,l.jsxs)("h6",{className:v()("dropdown-header px-4",a&&"hidden"),id:"tagDlgHeader",children:["还可添加",(0,l.jsxs)("span",{className:"tags-left",children:[" ",o-y.length]})," ","个标签",!N&&(0,l.jsxs)("span",{className:"float-end",children:["找不到标签？",(0,l.jsx)("a",{href:"",id:"createTag",onClick:e=>{if(e.preventDefault(),V.user.rank<1500){b.Z.confirm({content:"没有权限创建标签"});return}z({value:E,isInvalid:!1,errorMsg:""}),T(!0)},children:"创建"})]})]}),!k&&(0,l.jsx)("div",{className:"px-4",children:(0,l.jsx)(m.Z,{type:"search",autoComplete:"off",placeholder:"搜索标签",onChange:e=>{let a=e.target.value;P.current=a,F(a),a?(n&&clearTimeout(n),n=setTimeout(()=>{P.current&&(0,x.NJe)({query:"search",q:P.current}).then(e=>{D(!0),(null==e?void 0:e.rows)&&R(e.rows)})},500)):(R([]),D(!1),F(""))},value:E,ref:G,autoFocus:!0})}),(0,l.jsxs)("div",{id:"tagSearchResult",className:"mt-2",children:[A.map((e,a)=>(0,l.jsx)(c.Z.Item,{href:"###",onClick:a=>{var r;a.preventDefault(),onAddTag(e),null==G||null===(r=G.current)||void 0===r||r.focus()},className:"dropdown-item search-item ".concat($===a?"active":""),children:0===e.name.indexOf(P.current)?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("span",{className:"fw-bold",children:P.current}),(0,l.jsx)("span",{children:e.name.substring(E.length)})]}):(0,l.jsx)("span",{children:e.name})},e.id)),_&&0===A.length&&(0,l.jsx)("a",{href:"javascript:;",className:"dropdown-item search-item",children:"找不到相关标签"})]}),"limit"===s?(0,l.jsx)("div",{className:"px-4 m-n1",children:Z.map((e,a)=>(0,l.jsxs)("a",{className:"badge-tag m-1",href:"###",onClick:a=>{a.preventDefault(),onAddTag(e)},children:[e.icon_url&&(0,l.jsx)("img",{src:e.icon_url,alt:e.name}),e.name]},a))}):(0,l.jsx)(h.Z,{defaultActiveKey:"0",className:"my-2 px-4 font-size-14 toggleTag border-0 ".concat(_?"hidden":""),children:Object.keys(p).map((e,a)=>(0,l.jsxs)(f.Z,{eventKey:"".concat(a),title:e,id:"tag-tab-".concat(a),tabClassName:"me-1 rounded border-0 tab-header nav-link2",className:"px-4 m-n1 ".concat(_?"hidden":""),children:[p[e].map((e,a)=>(0,l.jsxs)("a",{className:"badge-tag m-1",href:"###",onClick:a=>{a.preventDefault(),onAddTag(e)},children:[e.icon_url&&(0,l.jsx)("img",{src:e.icon_url,alt:e.name}),e.name]},a)),M.map((e,a)=>(0,l.jsx)("a",{className:"badge-tag m-1",href:"###",onClick:a=>{a.preventDefault(),onAddTag(e)},children:e.name},a))]},e))})]})]})]}),(0,l.jsx)(b.Z,{show:S,title:"创建标签",onCancel:()=>T(!1),onOk:()=>{let e=q.value.replace(/(^\s*)|(\s*$)/g,"").replaceAll(" ","-"),a=O.value.replace(/(^\s*)|(\s*$)/g,"");if(e)z({...q,isInvalid:!1,errorMsg:""});else{z({...q,isInvalid:!0,errorMsg:"标签名称不能为空。"});return}if(a)K({...O,isInvalid:!1,errorMsg:""});else{K({...O,isInvalid:!0,errorMsg:"标签简介不能为空。"});return}if(a.length<10){K({...O,isInvalid:!0,errorMsg:"标签描述的字数过少, 标签描述不得少于 10 字, 请详细填写。"});return}j||(j=!0,(0,x._Ur)({name:e,text:a}).then(a=>{a&&(z({value:"",isInvalid:!1,errorMsg:""}),K({value:"",isInvalid:!1,errorMsg:""}),I([...y,{id:a.id,name:e,text:a.text}]),T(!1))}).catch(e=>{z({...q,isInvalid:!0,errorMsg:e.name})}).finally(()=>{j=!1}))},children:(0,l.jsxs)(g.Z,{validated:!1,children:[(0,l.jsxs)(u.Z,{controlId:"tags.tagName",className:"mb-3",children:[(0,l.jsx)(g.Z.Label,{children:"标签名称"}),(0,l.jsx)(g.Z.Control,{placeholder:"请输入标签名称",value:q.value,onChange:e=>z({...q,isInvalid:!1,value:e.target.value}),required:!0,isInvalid:q.isInvalid}),(0,l.jsx)(g.Z.Control.Feedback,{type:"invalid",children:q.errorMsg}),(0,l.jsxs)("small",{className:"form-text text-muted",children:["空格请用符号“",(0,l.jsx)("code",{children:"-"}

1),"”代替，请创建有意义的标签，标签长期未被使用将自动删除"]})]}),(0,l.jsxs)(u.Z,{controlId:"tags.tagDesc",className:"mb-3",children:[(0,l.jsx)("label",{htmlFor:"create-tag-brief",className:"mb-2",children:"标签简介"}),(0,l.jsx)(g.Z.Control,{as:"textarea",className:"form-control",id:"create-tag-brief",name:"text",placeholder:"请输入标签简介，供他人参考",value:O.value,onChange:e=>K({...O,value:e.target.value}),minLength:10,required:!0,isInvalid:O.isInvalid}),(0,l.jsx)(g.Z.Control.Feedback,{type:"invalid",children:O.errorMsg})]})]})})]})},k=(0,l.jsx)(l.Fragment,{children:(0,l.jsx)(o(),{id:"efeae6417a4d23e0",children:".tag-wrap{display:inline-block}.tag-wrap .nav-tabs.card-header-tabs{margin-right:unset;margin-bottom:unset;margin-left:unset;border-bottom:unset}.tag-wrap .nav-link2{padding:.125rem .375rem}.tag-wrap .dropdown-menu{width:480px}.tag-wrap .dropdown-menu [id^=tag-tab-]{padding:.125rem .375rem;-webkit-border-radius:.1875rem;-moz-border-radius:.1875rem;border-radius:.1875rem}.tag-wrap .dropdown-menu .nav-tabs a{color:#6c757d}.tag-wrap .dropdown-menu .nav-tabs .nav-link.active{background-color:#6c757d;color:#fff}.tag-wrap .dropdown-menu .nav-tabs .nav-link:hover,.tag-wrap .dropdown-menu .nav-tabs .nav-link:focus{border-color:transparent}.tag-wrap .dropdown-toggle::after{display:none}.tag-wrap .dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.tag-wrap .tab-content{margin:.5rem 0!important}.tag-wrap .tag-input.warning{-webkit-animation:tag-input-warning 2s;-moz-animation:tag-input-warning 2s;-o-animation:tag-input-warning 2s;animation:tag-input-warning 2s}.tag-wrap #tagSearchResult .dropdown-item.active{color:#212529;text-decoration:none;background-color:#f8f9fa!important}.tag-wrap #tagSearchResult .dropdown-item:hover{color:#212529;text-decoration:none;background-color:#eff1f3!important}@-webkit-keyframes tag-input-warning{0%{background-color:#ffc107;border-color:#ffc107}to{background-color:#f8f9fa}}@-moz-keyframes tag-input-warning{0%{background-color:#ffc107;border-color:#ffc107}to{background-color:#f8f9fa}}@-o-keyframes tag-input-warning{0%{background-color:#ffc107;border-color:#ffc107}to{background-color:#f8f9fa}}@keyframes tag-input-warning{0%{background-color:#ffc107;border-color:#ffc107}to{background-color:#f8f9fa}}"})});a.Z=i.memo(e=>(0,l.jsxs)(l.Fragment,{children:[k,(0,l.jsx)(Index,{...e})]}))}}]);