Siirtyminen
Kaksi siirtymää, jotka palvelut tekevät omassa tahdissaan: kuori AppShellistä AppFrameen ja Tailwind 3:sta 4:ään (vaihe E).
AppShell → AppFrame
AppShell pysyy paketissa ennallaan (päätös 0004), joten vaihto on palvelun oma päätös eikä muuta muiden näkymiä.
| AppShell | AppFrame | Huomio |
|---|---|---|
product | product | Palvelun nimi; mobiilivalikon otsikko. |
(palvelun nimi yläpalkissa) | sidebarHeader | Sivupalkin ylälaita: nimi tai palvelun vaihtaja. |
user | sidebarFooter | Käyttäjätili siirtyy sivupalkin alalaitaan. |
nav, navFooter, currentPath, LinkComponent | samat | Navigaation tietomalli ei muutu. |
services | services | Palveluvalikko kapealla näytöllä. |
search | headerEnd | Haku yläpalkin oikeaan reunaan. |
actions | headerEnd | Toiminnot samaan paikkaan haun viereen. |
— | headerStart | Uusi: murupolku pienennyspainikkeen jälkeen. |
— | banner | Uusi: nauha koko leveydellä ylimpänä. |
AppFrame asettaa --shell-top-muuttujan yläpalkin korkeudeksi, joten tahmeat työkalurivit (TableFrame) tarttuvat sen alle ilman omaa laskentaa. Pienennetty tila muistetaan samalla localStorage-avaimella kuin AppShellissä. Katso Kuori.
Tailwind 3 → 4
TP-IAM, TP-VASTAANOTTO ja TP-NOTIFY ovat vielä Tailwind 3:ssa; TP-PERUSTUS, TP-TTK ja TP-MEDIA ovat Tailwind 4:ssä.
- Poista
tailwind.config.ts,autoprefixerjatailwindcss-animate; PostCSS-lisäosaksi@tailwindcss/postcss. - Korvaa
@tailwind-direktiivit riveillä@import "tailwindcss"ja@import "@karkkainen/ui/styles/theme.css". - Aja
npx @tailwindcss/upgradeomalle koodille.rounded-sm/md/lgeivät muutu, koska teema määrittelee ne--radiusista. - Todenna käännetystä CSS:stä, ei oletuksesta:
grep -o 'animate-pulse{[^}]*}' .next/static/css/*.css.
Yksityiskohdat ovat Käyttöönotto-sivun README-luvussa (kohdat 2 ja 3).