Prekrasna i moćna nadzorna ploča: Ant Design Pro 2.0 izdao je i predstavio Umi

Nakon izlaska 1.0, Ant Design Pro dobio je veliku pažnju i prihvaćanje u industriji. Broj zvijezda na GitHub-u se povećao sve do 11.686, a stotine srednjih i stražnjih aplikacija koje pokreće Ant Design Pro također su ušle u Ant Financial.

Razvoj 2.0 je u tijeku posljednjih 8 mjeseci. Uz pomoć 38 sjajnih suradnika, zajedno smo prikupili 600 prinova, puno novih značajki i sveukupnu nadogradnju arhitekture. Sada smo s ponosom najavili Ant Design Pro 2.0. Konkretno, donijeli smo četiri nove stranice, više izgleda kako bismo obogatili scenarije uporabe. Nadogradili smo skele sa cestovne kućice na umi2 i dodali svjež ladicu za postavljanje. Dođite i pogledajte naš projekt ovdje:

  • Početna stranica: http://pro.ant.design/
  • Pregled nadzorne ploče: http://preview.pro.ant.design/
  • GitHub: http://github.com/ant-design/ant-design-pro

Nove stranice

Kao najutjecajnija specifikacija web dizajna za XiHu District, elegantna, lijepa i dobro dizajnirana stranica uvijek je bila naša najveća prednost. U V2 smo donijeli i niz ažuriranja stranica i optimizacije, uključujući:

  • Korak po korak Modal
  • Modal za unos podataka
  • Osobni centar
  • Osobne postavke

Novi izgled i tema

U V2-u imamo ugrađene različite izglede. Možete kombinirati različite stranice da biste udovoljili Vašim potrebama jednostavnom konfiguracijom. Uvijek će biti jedan koji vam se sviđa. Da bismo svima lakše vidjeli rezultate brže, razvili smo cool ladicu za postavljanje za prebacivanje tema s samo nekoliko preklopki. Nakon potvrđivanja željenim stilovima, možete kopirati kôd postavki i postaviti ih kao zadane. Promjena teme nikada nije bila tako lagana! Što je još važnije, cijeli je postupak na mreži i nikad ne trebate ponovno pokrenuti postupak skela. Opustite se i uživajte u laganom i neposrednom prebacivanju tema!

Skele pomoću umivanja

umiranje se temelji na usmjeravanju, podržava uobičajeno usmjeravanje nalik na next.js i razne napredne funkcije usmjeravanja, poput učitavanja na razini usmjeravanja na zahtjev. Zatim, uz kompletan sustav dodataka, koji pokriva svaki životni ciklus od izvornog koda do izrade proizvoda, umi je u mogućnosti podržati različita funkcionalna proširenja i poslovne potrebe, a trenutno umiju imati gotovo 50+ dodataka u zajednici i unutar tvrtke.

umi je osnovni prednji okvir tvrtke Ant Financial, a služio je na stotine ili tisuće aplikacija izravno ili neizravno, uključujući javu, čvor, mobilnu aplikaciju, hibridnu aplikaciju, čistu aplikaciju za front-end imovinu, CMS aplikaciju i još mnogo toga. umi je služio našim internim korisnicima vrlo dobro i nada se da može dobro služiti i vanjskim korisnicima.

Ima sljedeće značajke:

  • Izvan okvira , ugrađeni reakcija 、 reaktor-usmjerivač, itd
  • Next.js poput i potpuno istaknute konvencije usmjeravanja također podržavaju konfigurirano usmjeravanje
  • Kompletan sustav dodataka, koji pokriva svaki životni ciklus od izvornog koda do proizvodnje
  • Visoke performanse, podrška PWA, dijeljenje koda na razini rute itd. Putem dodatka
  • Podržati statički izvoz, prilagoditi se različitim okruženjima, poput konzole, mobilne aplikacije, jaja, Alipay novčanika itd.
  • Brzo pokretanje dev-a, podrška omogućuje dll i hard-source-webpack-dodatak s config
  • Kompatibilni IE9, zasnovan na umi-plugin-polyfills
  • Podrška TypeScript, uključujući d.ts definiciju i umi test
  • Dubina integracija s dva, mapa patke za podršku, automatsko učitavanje modela, dijeljenje koda itd

Support Podrška za učitavanje na zahtjev

Učitavanje na zahtjev postaje vrlo jednostavno u V2. Samo napravite sljedeću konfiguraciju u babel-plugin-import:

{
    libraryName: 'ant-design-pro',
    libraryDirectory: 'lib',
    stil: istina,
    camel2DashComponentName: lažno,
  }

Možete koristiti Ant Design Pro komponente poput antd, a mi vam toplo preporučujemo da koristite ovu metodu za značajno smanjenje veličine vašeg paketa.

import {Result} iz 'ant-design-pro';
ReactDOM.render (, mountNode);

Best Najbolje prakse internacionalizacije

V2 pruža najbolje prakse internacionalizacije na temelju lokalnog umi-plugina. Trebate samo staviti odgovarajuću js datoteku (poput en-US.js / zh-CN.js) u src / locales, a mogućnosti povezane s internacionalizacijom bit će dostupne u kodu!

import {
  formatMessage,
  setLocale,
  getLocale,
  FormattedMessage,
} iz 'umi / locale';
izvoz zadani () => {
  povratak 
}

Što slijedi

U budućnosti ćemo obratiti više pozornosti na performanse i jednostavnost korištenja Ant Design Pro. Pomoću umiranja pokušati ćemo malo istražiti u materijalizaciji komponenata. Nadalje, nastavit ćemo poboljšavati dokumentaciju kako bismo smanjili troškove korištenja. Bolji izgled i jednostavna upotreba bila je i uvijek će biti naš smjer, a mi ćemo se i dalje boriti za to.

Posebna hvala

Hvala svim suradnicima koji su poslali bugove, otvorili PR-ove, odgovarali na pitanja, pisali dokumentaciju i još mnogo toga! Posebna zahvala sljedećim partnerima iz zajednice @ yoyo837 @xiaohuoni @zhangxiuling @kaoding, i definitivno svih 38 suradnika koji su otvorili PR-ove za V2. Vaše je sudjelovanje pretvorilo pro V2 u stvarnost.

Ako naiđete na bilo kakve probleme pri korištenju Ant Design Pro V2, slobodno pošaljite novi broj na GitHub.

Hvala na Vašem vremenu. Zgrabite i instalirajte, pokušajte!

Napokon

Još jedna stvar koju valja spomenuti, naš tim radi na nazivu proizvoda za suradnju na znanju 『mean 雀』 (što znači da ptica lark može govoriti), također objavljujemo ovaj članak i kinesku verziju o kojoj možete proći. Proizvod je još uvijek u beta verziji i nije dobar za engleske korisnike na kojem naporno radimo na poboljšanju.