fix(icons): render FA glyphs in the SPA picker grid and harden item clicks

The server catalog ships bare glyph names, but the SPA grid preview
composed "fas home" instead of "fas fa-home" — every FA icon rendered
blank (the old curated lists carried the fa- prefix, so the regression
appeared with the catalog switch).

Item clicks move from per-element @click to a delegated panel handler
reading data-icon (immunity to DOM-replacing extensions/userscripts,
matching the PHP picker's pattern), and selecting now closes the
popover so the choice is visible in the field immediately.
This commit is contained in:
kate522 committed 2026-09-06 15:48:52 +08:00
1 parent 27d8a9ea71
commit 39bafb65c4
12 files changed
+33 -20

No files matched your search

@@ -0,0 +1 @@
import{_ as M}from"./FaIcon.NZ6TDkNu.js";import{_ as H}from"./index.js";import{N as c,W as n,X as i,L as V,a5 as T,c as L,o as Z,a1 as k,a4 as v,a3 as p,Y as y,F as b,R as z,a2 as A,f as I,Z as D,r as f}from"./vendor-vue.BxZIRU0_.js";import{a as G}from"./shared-api.DnsQ5cxS.js";function w(e){const o=String(e||"").trim();if(!o)return"";let u;try{u=new DOMParser().parseFromString(o,"image/svg+xml")}catch{return""}if(u.querySelector("parsererror"))return"";const r=u.querySelector("svg");if(!r||r.querySelector("script, foreignObject, animate"))return"";["class","id","style","t","version","p-id"].forEach(l=>r.removeAttribute(l)),Array.from(r.attributes).forEach(l=>{l.name.indexOf("data-")===0&&r.removeAttribute(l.name)});const d=new XMLSerializer().serializeToString(r);return/<path|<use|<g\b|<circle|<rect|<polygon|<ellipse|<line/i.test(d)?d:""}function R(e){return/^fa[\s-]/.test(String(e||"").trim())}function X(e){return String(e||"").trim().startsWith("zibsvg-")}function j(e){return String(e||"").trim().startsWith("customsvg-")}function Y(e){return String(e||"").trim().slice(7).replace(/[^a-zA-Z0-9_-]/g,"")}function F(e){const o=Y(e);return o?`<svg class="icon" aria-hidden="true"><use xlink:href="#icon-${o}"></use></svg>`:""}function B(e,o){return e.type==="fa"?`fa ${e.id} fa-${o}`:e.type==="svg"?`zibsvg-${o}`:String(o||"")}const J=["innerHTML"],Q=["innerHTML"],ee={__name:"IconValue",props:{value:{type:String,default:""}},setup(e){const o=e,u=L(()=>{const r=String(o.value||"").trim();return r.startsWith("fa-")?`fa fas ${r}`:r});return(r,d)=>c(R)(e.value)?(n(),i("i",{key:0,class:V(u.value),"aria-hidden":"true"},null,2)):c(X)(e.value)?(n(),i("span",{key:1,class:"aksrt-icon-value__svg",innerHTML:c(F)(e.value)},null,8,J)):c(j)(e.value)?(n(),i("span",{key:2,class:"aksrt-icon-value__svg",innerHTML:c(w)(e.value.slice(10))},null,8,Q)):T("",!0)}},te=H(ee,[["__scopeId","data-v-127de8f8"]]),ae={class:"aksrt-fa-icon-picker"},se={class:"aksrt-icon-picker__search"},ne={class:"aksrt-icon-picker__tabs"},ie={key:0,class:"aksrt-icon-picker__custom"},oe={class:"aksrt-icon-picker__custom-actions"},re=["innerHTML"],le={key:0,class:"aksrt-icon-picker__grid aksrt-icon-picker__grid--session","data-aksrt-icon-grid":"custom"},ce=["data-icon","innerHTML"],ue={key:1,class:"aksrt-icon-picker__grid","data-aksrt-icon-grid":"catalog"},de=["title","data-icon"],ve=["innerHTML"],pe={key:0,class:"aksrt-icon-picker__empty"},fe={__name:"FaIconPicker",props:{modelValue:{type:String,default:""},placeholder:{type:String,default:"选择图标"}},emits:["update:modelValue"],setup(e,{emit:o}){const u=o,d=f([{id:"fas",title:"Solid",type:"fa",icons:[]},{id:"far",title:"Regular",type:"fa",icons:[]},{id:"fab",title:"Brands",type:"fa",icons:[]},{id:"zibsvg",title:"内置 SVG",type:"svg",icons:[]},{id:"custom",title:"自定义",type:"custom",icons:[]}]),l=f(""),m=f("fas"),_=f(""),h=f([]),C=f(!1),S=L(()=>d.value.find(t=>t.id===m.value)||d.value[0]),$=L(()=>{const t=S.value;if(!t||t.type==="custom")return[];const s=l.value.toLowerCase().replace(/\s+/g,"");return s?t.icons.filter(g=>g.includes(s)):t.icons}),x=L(()=>w(_.value));function N(t){u("update:modelValue",t),C.value=!1}function P(t){const s=t.target.closest("[data-icon]");s&&N(s.dataset.icon)}function q(){const t=w(_.value);t&&(h.value.includes(t)||h.value.push(t),u("update:modelValue",`customsvg-${t}`),_.value="")}return Z(async()=>{try{const t=await G.getIconCatalog();t!=null&&t.success&&Array.isArray(t.groups)&&t.groups.length&&(d.value=t.groups)}catch{}}),(t,s)=>{const g=k("n-input"),U=k("n-radio-button"),W=k("n-radio-group"),E=k("n-button"),K=k("n-popover");return n(),i("div",ae,[v(K,{show:C.value,"onUpdate:show":s[4]||(s[4]=a=>C.value=a),trigger:"click",placement:"bottom-start",width:460,style:{padding:0}},{trigger:p(()=>[v(g,{value:e.modelValue,placeholder:e.placeholder,readonly:"",clearable:"",onClear:s[0]||(s[0]=a=>t.$emit("update:modelValue",""))},{prefix:p(()=>[e.modelValue?(n(),A(te,{key:0,value:e.modelValue},null,8,["value"])):(n(),i(b,{key:1},[],64))]),suffix:p(()=>[v(M,{icon:"fa fas fa-chevron-down",size:12})]),_:1},8,["value","placeholder"])]),default:p(()=>[y("div",{class:"aksrt-icon-picker__panel",onClick:P},[y("div",se,[v(g,{value:l.value,"onUpdate:value":s[1]||(s[1]=a=>l.value=a),placeholder:"搜索图标...",size:"small",clearable:""},{prefix:p(()=>[v(M,{icon:"fa fas fa-search",size:12})]),_:1},8,["value"])]),y("div",ne,[v(W,{value:m.value,"onUpdate:value":s[2]||(s[2]=a=>m.value=a),size:"small"},{default:p(()=>[(n(!0),i(b,null,z(d.value,a=>(n(),A(U,{key:a.id,value:a.id},{default:p(()=>[I(D(a.title),1)]),_:2},1032,["value"]))),128))]),_:1},8,["value"])]),m.value==="custom"?(n(),i("div",ie,[v(g,{value:_.value,"onUpdate:value":s[3]||(s[3]=a=>_.value=a),type:"textarea",placeholder:'<svg viewBox="0 0 1024 1024"><path d="…"></path></svg>',rows:4},null,8,["value"]),y("div",oe,[y("span",{class:"aksrt-icon-picker__custom-preview",innerHTML:x.value},null,8,re),v(E,{size:"small",type:"primary"Line truncated