mei/OpenGFW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f7ad3aac951efbb38f6ef4e4aed6d2f0271362a0
OpenGFW/web/dist/assets/DashboardView-BD4i_GCA.js
T
meiandClaude Opus 5 f7ad3aac95 feat(web): visual rule builder with geo, CIDR and wildcard pickers 
The rule editor no longer requires writing expr by hand. Conditions are rows of
field + operator + values joined with AND or OR, each row negatable, and the
generated expression is shown live and validated by the engine before a rule is
accepted. Raw expression and YAML editing are still available.

Fields cover the connection (protocol, source/destination IP and port), domains
(TLS SNI, QUIC SNI, DNS query name), HTTP (host, path, method, User-Agent) and
protocol detection. Operators cover CIDR membership, GeoIP countries, GeoSite
categories, port ranges, wildcards, substrings and regular expressions.
Multiple values in a row are OR-ed, so one row holds a whole domain or country
list.

Wildcards compile to the cheapest expression that matches them: *.x.com
becomes endsWith, x.* startsWith, *ad* contains, and only a star in the
middle falls back to a regular expression. Values are validated as they are
typed, including a hint when a star is used with an operator that would match
it literally.

Country and category pickers are backed by the databases the engine actually
loaded, via a new GET /api/v1/geo endpoint (cached, loaded on demand) built on
new listing methods in the geo package. Country names and flags come from
Intl.DisplayNames, so no name table is shipped. Note that the v2geo format has
no AS numbers; the provider groups it does contain (cloudflare, google,
telegram, ...) are listed alongside the countries.

Opening an existing rule parses its expression back into conditions. Anything
the builder cannot represent opens in the expression editor with a warning
rather than being rewritten. ruleset/expr_test.go pins the canonical
expressions the builder generates and compiles them with the real engine, and
the devserver now uses the real ruleset compiler so the same errors show up
during frontend work.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-27 08:48:56 +08:00

27 lines
15 KiB
JavaScript
Raw Blame History

import{c as A,d as H,o as c,a as r,F as w,r as M,b as l,n as q,e as C,u as e,f as W,t as n,g as b,h as X,w as u,_ as z,i as ee,j as S,k as v,l as s,m as Q,p as t,T as te,q as le,s as se,v as ae}from"./index-BKPz7Obh.js";import{c as y,t as oe,p as ne,d as ue}from"./format-B6sc_rZ4.js";import{A as ce,_ as de}from"./EventItem.vue_vue_type_script_setup_true_lang-JeqwaMaY.js";import{_ as re}from"./PageHeader.vue_vue_type_script_setup_true_lang-CPDhGTO6.js";import{_ as j,a as P,b as Z,c as T}from"./CardTitle.vue_vue_type_script_setup_true_lang-BHtPbA-o.js";import{_ as ie}from"./Skeleton.vue_vue_type_script_setup_true_lang-DG3HTLWx.js";import{_ as me,a as pe,b as G}from"./TabsTrigger.vue_vue_type_script_setup_true_lang-_qQ6JBVg.js";import"./Badge.vue_vue_type_script_setup_true_lang-i2F91fYk.js";import"./Collection-BaXBMWO5.js";/**
* @license lucide-vue-next v0.469.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/const fe=A("BanIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m4.9 4.9 14.2 14.2",key:"1m5liu"}]]);/**
* @license lucide-vue-next v0.469.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/const _e=A("ClockIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 16 14",key:"68esgv"}]]);/**
* @license lucide-vue-next v0.469.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/const he=A("CpuIcon",[["rect",{width:"16",height:"16",x:"4",y:"4",rx:"2",key:"14l7u7"}],["rect",{width:"6",height:"6",x:"9",y:"9",rx:"1",key:"5aljv4"}],["path",{d:"M15 2v2",key:"13l42r"}],["path",{d:"M15 20v2",key:"15mkzm"}],["path",{d:"M2 15h2",key:"1gxd5l"}],["path",{d:"M2 9h2",key:"1bbxkp"}],["path",{d:"M20 15h2",key:"19e6y8"}],["path",{d:"M20 9h2",key:"19tzq7"}],["path",{d:"M9 2v2",key:"165o2o"}],["path",{d:"M9 20v2",key:"i2bqo8"}]]);/**
* @license lucide-vue-next v0.469.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/const ve=A("ShieldCheckIcon",[["path",{d:"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z",key:"oel41y"}],["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}]]);/**
* @license lucide-vue-next v0.469.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/const J=A("WavesIcon",[["path",{d:"M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1",key:"knzxuh"}],["path",{d:"M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1",key:"2jd2cc"}],["path",{d:"M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1",key:"rd2r6e"}]]),be={key:0,class:"flex flex-col gap-1"},xe={class:"relative truncate font-mono text-xs sm:text-[13px]"},ke={class:"text-muted-foreground relative shrink-0 text-xs tabular-nums"},ye={key:1,class:"text-muted-foreground py-6 text-center text-xs"},N=H({__name:"BarList",props:{items:{},tone:{default:"primary"},empty:{}},setup(B){const f=B,a=b(()=>Math.max(1,...f.items.map(x=>x.count))),h={primary:"bg-primary/15",block:"bg-block/15",allow:"bg-allow/15"};return(x,I)=>f.items.length?(c(),r("div",be,[(c(!0),r(w,null,M(f.items,k=>(c(),r("div",{key:k.name,class:"relative flex items-center justify-between gap-3 overflow-hidden rounded-md px-2 py-1.5"},[l("div",{class:C(e(W)("absolute inset-y-0 left-0 rounded-md",h[f.tone])),style:q({width:`${Math.max(4,k.count/a.value*100)}%`})},null,6),l("span",xe,n(k.name),1),l("span",ke,n(e(y)(k.count)),1)]))),128))])):(c(),r("p",ye,n(f.empty??"—"),1))}}),ge={class:"flex items-start justify-between gap-2"},$e={class:"text-muted-foreground text-xs font-medium sm:text-sm"},we={class:"mt-1.5 flex items-baseline gap-1.5"},Me={key:0,class:"text-muted-foreground truncate text-xs"},V=H({__name:"StatCard",props:{label:{},value:{},hint:{},icon:{},tone:{}},setup(B){const f=B,a={default:"text-muted-foreground",allow:"text-allow",block:"text-block",drop:"text-drop",modify:"text-modify"};return(h,x)=>(c(),X(e(z),{class:"p-3.5 sm:p-4"},{default:u(()=>[l("div",ge,[l("span",$e,n(f.label),1),f.icon?(c(),X(ee(f.icon),{key:0,class:C(e(W)("size-4 shrink-0",a[f.tone??"default"]))},null,8,["class"])):S("",!0)]),l("div",we,[l("span",{class:C(e(W)("text-xl font-semibold tracking-tight tabular-nums sm:text-2xl",f.tone&&f.tone!=="default"?a[f.tone]:""))},n(f.value),3),f.hint?(c(),r("span",Me,n(f.hint),1)):S("",!0)])]),_:1}))}}),Ce=["viewBox"],ze=["y1","y2"],Be=["d"],je=["d"],Pe=["d"],Te=["x1","x2","y2"],Ve={class:"text-muted-foreground pointer-events-none absolute top-0 left-0 text-[10px] tabular-nums"},De={class:"text-muted-foreground mb-0.5"},Le={class:"flex items-center gap-2 tabular-nums"},Se={class:"ml-auto font-medium"},Ae={class:"flex items-center gap-2 tabular-nums"},Ie={class:"ml-auto font-medium"},Fe={class:"flex items-center gap-2 tabular-nums"},Re={class:"ml-auto font-medium"},qe={key:1,class:"text-muted-foreground absolute inset-0 flex items-center justify-center text-xs"},He={class:"mt-3 flex flex-wrap items-center gap-x-4 gap-y-1"},Ne={class:"text-muted-foreground"},Oe={class:"font-medium tabular-nums"},R=600,K=160,O=8,We=16,Xe=H({__name:"TrafficChart",props:{buckets:{}},setup(B){const f=B,a=Q(null),h=b(()=>f.buckets??[]),x=b(()=>Math.max(1,...h.value.map(d=>d.tcp+d.udp))),I=b(()=>h.value.some(d=>d.tcp+d.udp+d.blocked>0));function k(d){const m=h.value.length;return m<=1?0:d/(m-1)*R}function g(d){const m=K-O-We;return O+m-d/x.value*m}function D(d){if(d.length===0)return"";const m=d.map((L,U)=>`${U===0?"M":"L"}${k(U).toFixed(1)},${g(L).toFixed(1)}`),_=`L${R},${g(0)} L0,${g(0)} Z`;return m.join(" ")+" "+_}function F(d){return d.map((m,_)=>`${_===0?"M":"L"}${k(_).toFixed(1)},${g(m).toFixed(1)}`).join(" ")}const i=b(()=>D(h.value.map(d=>d.tcp+d.udp))),p=b(()=>D(h.value.map(d=>d.tcp))),o=b(()=>F(h.value.map(d=>d.blocked))),$=b(()=>a.value===null?null:h.value[a.value]);function E(d){const m=d.currentTarget.getBoundingClientRect(),_=(d.clientX-m.left)/m.width,L=Math.round(_*(h.value.length-1));a.value=Math.min(h.value.length-1,Math.max(0,L))}const Y=b(()=>{const d=m=>h.value.reduce((_,L)=>_+L[m],0);return[{label:s("dashboard.tcp"),color:"bg-tcp",value:d("tcp")},{label:s("dashboard.udp"),color:"bg-udp",value:d("udp")},{label:s("dashboard.blocked"),color:"bg-block",value:d("blocked")}]});return(d,m)=>(c(),r("div",null,[l("div",{class:"relative touch-pan-y",onPointermove:E,onPointerdown:E,onPointerleave:m[0]||(m[0]=_=>a.value=null)},[(c(),r("svg",{viewBox:`0 0 ${R} ${K}`,preserveAspectRatio:"none",class:"h-36 w-full sm:h-44",role:"img"},[(c(),r(w,null,M([0,.5,1],_=>l("line",{key:_,x1:0,x2:R,y1:g(x.value*_),y2:g(x.value*_),class:"stroke-border","stroke-width":"1","vector-effect":"non-scaling-stroke","stroke-dasharray":"3 4"},null,8,ze)),64)),l("path",{d:i.value,class:"fill-udp/25"},null,8,Be),l("path",{d:p.value,class:"fill-tcp/45"},null,8,je),l("path",{d:o.value,class:"stroke-block",fill:"none","stroke-width":"1.75","stroke-linejoin":"round","vector-effect":"non-scaling-stroke"},null,8,Pe),a.value!==null?(c(),r("line",{key:0,x1:k(a.value),x2:k(a.value),y1:O,y2:g(0),class:"stroke-foreground/40","stroke-width":"1","vector-effect":"non-scaling-stroke"},null,8,Te)):S("",!0)],8,Ce)),l("div",Ve,n(e(y)(x.value)),1),$.value?(c(),r("div",{key:0,class:"bg-popover pointer-events-none absolute top-1 z-10 rounded-md border px-2 py-1.5 text-[11px] shadow-md",style:q({left:`${a.value/Math.max(1,h.value.length-1)*100}%`,transform:a.value/Math.max(1,h.value.length-1)>.6?"translateX(-105%)":"translateX(8px)"})},[l("div",De,n(e(oe)($.value.time)),1),l("div",Le,[m[1]||(m[1]=l("span",{class:"bg-tcp size-2 rounded-full"},null,-1)),v(n(e(s)("dashboard.tcp"))+" ",1),l("span",Se,n($.value.tcp),1)]),l("div",Ae,[m[2]||(m[2]=l("span",{class:"bg-udp size-2 rounded-full"},null,-1)),v(n(e(s)("dashboard.udp"))+" ",1),l("span",Ie,n($.value.udp),1)]),l("div",Fe,[m[3]||(m[3]=l("span",{class:"bg-block size-2 rounded-full"},null,-1)),v(n(e(s)("dashboard.blocked"))+" ",1),l("span",Re,n($.value.blocked),1)])],4)):S("",!0),I.value?S("",!0):(c(),r("div",qe,n(e(s)("dashboard.noTraffic")),1))],32),l("div",He,[(c(!0),r(w,null,M(Y.value,_=>(c(),r("div",{key:_.label,class:"flex items-center gap-1.5 text-xs"},[l("span",{class:C(["size-2 rounded-full",_.color])},null,2),l("span",Ne,n(_.label),1),l("span",Oe,n(e(y)(_.value)),1)]))),128))])]))}}),Ee={key:0,class:"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6"},Ue={class:"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6"},Ze={class:"mt-3 grid gap-3 lg:grid-cols-3"},Ge={class:"min-w-0"},Je={class:"bg-muted flex h-2 overflow-hidden rounded-full"},Ke={class:"mt-2.5 flex flex-col gap-1.5"},Qe={class:"text-muted-foreground"},Ye={class:"ml-auto font-medium tabular-nums"},et={class:"text-muted-foreground mb-2 text-xs font-medium"},tt={class:"bg-muted flex h-2 overflow-hidden rounded-full"},lt={class:"mt-2.5 flex flex-col gap-1.5"},st={class:"text-muted-foreground"},at={class:"ml-auto font-medium tabular-nums"},ot={class:"mt-3 grid gap-3 md:grid-cols-2 xl:grid-cols-3"},nt={key:0,class:"flex flex-col"},ut={key:1,class:"text-muted-foreground py-6 text-center text-xs"},vt=H({__name:"DashboardView",setup(B){const f=ae(),{metrics:a,events:h}=le(),x=Q("short"),I=b(()=>{var i,p;return(x.value==="short"?(i=a.value)==null?void 0:i.short:(p=a.value)==null?void 0:p.long)??[]}),k=b(()=>h.value.slice(0,8)),g=b(()=>{var o;const i=(o=a.value)==null?void 0:o.actions;if(!i)return[];const p=i.allow+i.block+i.drop+i.modify||1;return[{key:"allow",label:s("action.allow"),value:i.allow,color:"bg-allow",total:p},{key:"block",label:s("action.block"),value:i.block,color:"bg-block",total:p},{key:"drop",label:s("action.drop"),value:i.drop,color:"bg-drop",total:p},{key:"modify",label:s("action.modify"),value:i.modify,color:"bg-modify",total:p}].filter($=>$.value>0||$.key==="allow"||$.key==="block")}),D=b(()=>{var o;const i=(o=a.value)==null?void 0:o.streams;if(!i)return[];const p=i.total||1;return[{key:"tcp",label:s("dashboard.tcp"),value:i.tcp,color:"bg-tcp",total:p},{key:"udp",label:s("dashboard.udp"),value:i.udp,color:"bg-udp",total:p}]}),F=b(()=>{var p;const i=(p=a.value)==null?void 0:p.actions;return i?i.block+i.drop:0});return(i,p)=>(c(),r("div",null,[t(re,{title:e(s)("dashboard.title"),description:e(s)("dashboard.subtitle")},null,8,["title","description"]),e(a)?(c(),r(w,{key:1},[l("div",Ue,[t(V,{label:e(s)("dashboard.streams"),value:e(y)(e(a).streams.total),hint:`${e(y)(e(a).streams.tcp)} / ${e(y)(e(a).streams.udp)}`,icon:e(J)},null,8,["label","value","hint","icon"]),t(V,{label:e(s)("dashboard.blocked"),value:e(y)(F.value),hint:`${e(ne)(F.value,e(a).streams.total)}%`,icon:e(fe),tone:"block"},null,8,["label","value","hint","icon"]),t(V,{label:e(s)("dashboard.allowed"),value:e(y)(e(a).actions.allow),icon:e(ve),tone:"allow"},null,8,["label","value","icon"]),t(V,{label:e(s)("dashboard.modified"),value:e(y)(e(a).actions.modify),icon:e(J),tone:"modify"},null,8,["label","value","icon"]),t(V,{label:e(s)("dashboard.uptime"),value:e(ue)(e(a).uptimeSeconds),icon:e(_e)},null,8,["label","value","icon"]),t(V,{label:e(a).errors>0?e(s)("dashboard.errors"):e(s)("dashboard.workers"),value:e(a).errors>0?e(y)(e(a).errors):String(e(a).workers),icon:e(a).errors>0?e(te):e(he),tone:e(a).errors>0?"drop":"default"},null,8,["label","value","icon","tone"])]),l("div",Ze,[t(e(z),{class:"lg:col-span-2"},{default:u(()=>[t(e(j),{class:"flex-row items-start justify-between gap-3"},{default:u(()=>[l("div",Ge,[t(e(P),null,{default:u(()=>[v(n(e(s)("dashboard.traffic")),1)]),_:1}),t(e(Z),null,{default:u(()=>[v(n(e(s)("dashboard.trafficDesc")),1)]),_:1})]),t(e(me),{modelValue:x.value,"onUpdate:modelValue":p[0]||(p[0]=o=>x.value=o),class:"shrink-0"},{default:u(()=>[t(e(pe),{class:"h-8"},{default:u(()=>[t(e(G),{value:"short",class:"text-xs"},{default:u(()=>[v(n(e(s)("dashboard.range10m")),1)]),_:1}),t(e(G),{value:"long",class:"text-xs"},{default:u(()=>[v(n(e(s)("dashboard.range1h")),1)]),_:1})]),_:1})]),_:1},8,["modelValue"])]),_:1}),t(e(T),null,{default:u(()=>[t(Xe,{buckets:I.value},null,8,["buckets"])]),_:1})]),_:1}),t(e(z),null,{default:u(()=>[t(e(j),null,{default:u(()=>[t(e(P),null,{default:u(()=>[v(n(e(s)("dashboard.verdicts")),1)]),_:1})]),_:1}),t(e(T),{class:"flex flex-col gap-4"},{default:u(()=>[l("div",null,[l("div",Je,[(c(!0),r(w,null,M(g.value,o=>(c(),r("div",{key:o.key,class:C(o.color),style:q({width:`${o.value/o.total*100}%`})},null,6))),128))]),l("div",Ke,[(c(!0),r(w,null,M(g.value,o=>(c(),r("div",{key:o.key,class:"flex items-center gap-2 text-xs sm:text-[13px]"},[l("span",{class:C(["size-2 rounded-full",o.color])},null,2),l("span",Qe,n(o.label),1),l("span",Ye,n(e(y)(o.value)),1)]))),128))])]),l("div",null,[l("p",et,n(e(s)("dashboard.protocols")),1),l("div",tt,[(c(!0),r(w,null,M(D.value,o=>(c(),r("div",{key:o.key,class:C(o.color),style:q({width:`${o.value/o.total*100}%`})},null,6))),128))]),l("div",lt,[(c(!0),r(w,null,M(D.value,o=>(c(),r("div",{key:o.key,class:"flex items-center gap-2 text-xs sm:text-[13px]"},[l("span",{class:C(["size-2 rounded-full",o.color])},null,2),l("span",st,n(o.label),1),l("span",at,n(e(y)(o.value)),1)]))),128))])])]),_:1})]),_:1})]),l("div",ot,[t(e(z),null,{default:u(()=>[t(e(j),null,{default:u(()=>[t(e(P),null,{default:u(()=>[v(n(e(s)("dashboard.topHosts")),1)]),_:1}),t(e(Z),null,{default:u(()=>[v(n(e(s)("dashboard.topHostsDesc")),1)]),_:1})]),_:1}),t(e(T),null,{default:u(()=>[t(N,{items:e(a).topHosts,empty:e(s)("common.empty")},null,8,["items","empty"])]),_:1})]),_:1}),t(e(z),null,{default:u(()=>[t(e(j),null,{default:u(()=>[t(e(P),null,{default:u(()=>[v(n(e(s)("dashboard.topBlocked")),1)]),_:1})]),_:1}),t(e(T),null,{default:u(()=>[t(N,{items:e(a).topBlockedIPs,tone:"block",empty:e(s)("common.empty")},null,8,["items","empty"])]),_:1})]),_:1}),t(e(z),{class:"md:col-span-2 xl:col-span-1"},{default:u(()=>[t(e(j),null,{default:u(()=>[t(e(P),null,{default:u(()=>[v(n(e(s)("dashboard.topRules")),1)]),_:1})]),_:1}),t(e(T),null,{default:u(()=>[t(N,{items:e(a).topRules,tone:"allow",empty:e(s)("common.empty")},null,8,["items","empty"])]),_:1})]),_:1})]),t(e(z),{class:"mt-3"},{default:u(()=>[t(e(j),{class:"flex-row items-center justify-between"},{default:u(()=>[t(e(P),null,{default:u(()=>[v(n(e(s)("dashboard.recent")),1)]),_:1}),t(e(se),{variant:"ghost",size:"sm",onClick:p[1]||(p[1]=o=>e(f).push("/events"))},{default:u(()=>[v(n(e(s)("dashboard.viewAll"))+" ",1),t(e(ce),{class:"size-3.5"})]),_:1})]),_:1}),t(e(T),{class:"px-1.5 sm:px-2.5"},{default:u(()=>[k.value.length?(c(),r("div",nt,[(c(!0),r(w,null,M(k.value,o=>(c(),X(de,{key:o.seq,event:o,onSelect:p[2]||(p[2]=$=>e(f).push("/events"))},null,8,["event"]))),128))])):(c(),r("p",ut,n(e(s)("events.empty")),1))]),_:1})]),_:1})],64)):(c(),r("div",Ee,[(c(),r(w,null,M(6,o=>t(e(ie),{key:o,class:"h-20"})),64))]))]))}});export{vt as default};
Reference in New Issue View Git Blame Copy Permalink