WebEdge UI dizaino sistema

204 Vue 3 komponentai ant Tailwind v4 — blokų katalogas ir playground, bendri visoms sąsajoms.

Vue 3TailwindReka UI

WebEdge UI dizaino sistemos ekrano vaizdas

Dev-story

Iššūkis

Tie patys mygtukai, dialogai ir lentelės buvo perrašomi kiekviename projekte, o spalvos, tarpai ir būsenos vis labiau skyrėsi.

Ką darėme

Vue 3 + Tailwind v4 biblioteka: 204 „W*“ komponentai, 93 blokai ir 9 šablonai; Reka UI headless overlay/menu/dialog primityvams ir TanStack Table duomenų tinkleliui, temos per „--we-*“ tokenus. Peršviečiama vitrina rodo kiekvieną komponentą su kopijuojamu kodu.

Rezultatas

Naujos sąsajos remiasi viena biblioteka su vienoda tema ir prieinamumu, o vitrina (webedge-ui.pages.dev) yra ir katalogas, ir kodo šaltinis.

Dev-story straipsnis

Kaip buvo kuriamas projektas: WebEdge UI dizaino sistema

Kiekvienas WebEdge produktas — administravimo skydeliai, rinkodaros svetainės, kalendorius, fitnesas, CMS — iš naujo kūrė tuos pačius mygtukus, lenteles ir formas šiek tiek kitaip, todėl ta pati „kortelė“ trijose programose atrodė ir veikė trimis būdais. Sprendimas — viena biblioteka, iš kurios semiasi visa organizacija, su gyvu katalogu, įrodančiu, kad komponentas veikia dar prieš jį importuojant. Sunkiausia buvo aprėpti viską nuo mažytės vizitinės svetainės iki duomenų prisodrinto administravimo ekrano, neverčiant mažų svetainių tempti didžiųjų svorio.

Skyriai

Moduliai

Stackas

Vue 3 + Tailwind

Kodėl projektas atsirado

Tie patys mygtukai, dialogai ir lentelės buvo perrašomi kiekviename projekte, o spalvos, tarpai ir būsenos vis labiau skyrėsi.

Ką sukūrėme

Vue 3 + Tailwind v4 biblioteka su 204 viešais W priešdėlio komponentais, 93 UI blokais ir 9 puslapių šablonais, valdomais temų žymomis per --we-* CSS kintamuosius ir data-theme sritis. Kartu pristatoma Storybook stiliaus žaidimų aikštelė kaip statinė svetainė: paieškos turintis kategorija → subkategorija → komponentas medis su gyvomis peržiūromis, kopijuojamu kodu, savybių lentelėmis ir giliaisiais saitais kaip ?component=card&tab=props.

Pagrindiniai moduliai ir vartotojo kelias

M01

Sugrupuoti įėjimo taškai (core, forms, overlay, navigation, data-display, charts, admin, calendar, cms, blocks, templates), kad vizitinė svetainė importuotų tik primityvus, o administravimo puslapiai pakartotinai naudotų turtingesnes kompozicijas — mažos svetainės lieka mažos

M02

Sudėtingi valdikliai kurti „headless“ būdu: Reka UI primityvai perdangoms, meniu ir dialogams bei TanStack Table pažangiam lentelių varikliui, ant viršaus uždedant WebEdge vizualą, o ne ranka rašant prieinamumą

M03

Nuo priklausomybių laisvi vidiniai VueUse core ir matematikos kompozicinių funkcijų portai (212 → 229 demonstracijos), kiekvienas su paprastos kalbos antrašte ir gyva įvestis→išvestis demonstracija, kad katalogas aprėptų sritį netraukdamas išorinių paketų

M04

Nuo priklausomybių laisvas EN/LT/RU i18n pačiai žaidimų aikštelės sąsajai (reaktyvi locale + t() su {n} interpoliacija ir ?lang= išsaugojimu), pakeitęs fiktyvius kalbos parinkiklius, kurie nieko nekeitė

M05

Giliais saitais pasiekiamas, Ctrl+K paieška valdomas katalogas, rodantis gyvus kolekcijų skaičius ir CI inventoriaus patikromis sinchronizuotas su įėjimo eksportais bei Storybook susiejimais

Architektūra ir technologiniai sprendimai

Sukurta su Vue 3, Tailwind, Reka UI.

Vue 3 SFC su TypeScript, Tailwind v4 žymomis ir Reka UI / TanStack Table po gaubtu; kiekvienas pakeitimas tikrinamas su vue-tsc, 700+ testų rinkiniu, paketo kompiliavimu ir vizualaus „smoke“ patikra su ~1833 ekrano nuotraukomis, o rezultatas pateikiamas kaip statinė žaidimų aikštelė Cloudflare Pages.

Rezultatas ir pamokos

Naujos sąsajos remiasi viena biblioteka su vienoda tema ir prieinamumu, o vitrina (webedge-ui.pages.dev) yra ir katalogas, ir kodo šaltinis.

Vienas tiesos šaltinis dabar palaiko kiekvieną WebEdge sąsają — 204 komponentai, 93 blokai ir 9 šablonai su paieškos turinčiu katalogu — todėl komponentas patikrinamas vieną kartą ir naudojamas visur, o ne nukrypsta kiekvienoje programoje atskirai.