Όμορφο και ισχυρό ταμπλό: Το Ant Design Pro 2.0 κυκλοφόρησε και εισήγαγε το Umi

Μετά την κυκλοφορία του 1.0, η Ant Design Pro έχει λάβει μεγάλη προσοχή και υιοθεσία στη βιομηχανία. Ο αριθμός των αστεριών στο GitHub έχει αυξηθεί σε 11.686 και εκατοντάδες εφαρμογές mid-and end-end που τροφοδοτούνται από το Ant Design Pro έχουν επίσης προσγειωθεί στο Ant Financial.

Η ανάπτυξη του 2.0 έχει ξεπεράσει τους τελευταίους 8 μήνες. Με τη βοήθεια 38 φοβερών συνεισφερόντων, δημιουργήσαμε μαζί 600 δεσμεύσεις, πολλά νέα χαρακτηριστικά και μια γενική αναβάθμιση αρχιτεκτονικής. Τώρα, υπερήφανα ανακοινώσαμε το Ant Design Pro 2.0. Συγκεκριμένα, παρουσιάσαμε τέσσερις νέες σελίδες, πολλαπλές διατάξεις για τον εμπλουτισμό των σεναρίων χρήσης. Αναβαθμίσαμε το ικρίωμα μας από το roadhog στο umi2 και προσθέσαμε ένα δροσερό συρτάρι ρύθμισης. Ελάτε και κλείστε το έργο μας εδώ:

  • Αρχική Σελίδα: http://pro.ant.design/
  • Προεπισκόπιση πίνακα ελέγχου: http://preview.pro.ant.design/
  • GitHub: http://github.com/ant-design/ant-design-pro

Νέες σελίδες

Ως μια από τις πιο σημαντικές προδιαγραφές σχεδιασμού ιστοσελίδας της XiHu District, μια κομψή, όμορφη και καλά σχεδιασμένη σελίδα ήταν πάντα το μεγαλύτερο πλεονέκτημά μας. Στο V2, έφερα επίσης μια σειρά ενημερώσεων και βελτιστοποιήσεων σελίδας, όπως:

  • Βήμα-βήμα Modal
  • Εισαγωγή πληροφοριών Modal
  • Προσωπικό κέντρο
  • Προσωπικές ρυθμίσεις

Νέα διάταξη και θέμα

Στο V2, έχουμε ενσωματωμένη μια ποικιλία διατάξεων. Μπορείτε να συνδυάσετε μια ποικιλία σελίδων για να ικανοποιήσετε τις απαιτήσεις σας με απλή ρύθμιση. Θα υπάρχει πάντα ένας που σας αρέσει. Για να γίνει ευκολότερο για όλους να δουν τα αποτελέσματα γρηγορότερα, αναπτύξαμε ένα δροσερό συρτάρι ρύθμισης για την αλλαγή θέματος με λίγες μόνο μπαρέτες. Αφού επιβεβαιώσετε με τα επιθυμητά στυλ, μπορείτε να αντιγράψετε τον κωδικό ρυθμίσεων και να τα ορίσετε ως προεπιλογή. Η αλλαγή του θέματος δεν ήταν ποτέ τόσο εύκολη! Το πιο σημαντικό είναι ότι η όλη διαδικασία είναι online και δεν χρειάζεται να ξεκινήσετε ξανά τη διαδικασία σκαλωσιάς. Απλά χαλαρώστε και απολαύστε εύκολη και άμεση αλλαγή θέματος!

Σκαλωσιά χρησιμοποιώντας umi

Το umi βασίζεται στη δρομολόγηση, υποστηρίζει την next.js-όπως συμβατική δρομολόγηση και διάφορες προηγμένες λειτουργίες δρομολόγησης, όπως η φόρτωση κατά παραγγελία επίπεδο. Στη συνέχεια, με ένα πλήρες σύστημα plugin, που καλύπτει κάθε κύκλο ζωής από τον πηγαίο κώδικα για να χτίσει το προϊόν, το umi είναι σε θέση να υποστηρίξει διάφορες λειτουργικές επεκτάσεις και επιχειρηματικές ανάγκες, επί του παρόντος έχουν σχεδόν 50+ plugins τόσο στην κοινότητα όσο και στην εταιρεία.

Το umi είναι το βασικό front-end πλαίσιο του Ant Financial και έχει εξυπηρετήσει εκατοντάδες ή χιλιάδες εφαρμογές άμεσα ή έμμεσα, όπως java, κόμβος, εφαρμογή για κινητά, εφαρμογή Hybrid, καθαρή εφαρμογή front-end, εφαρμογή CMS και πολλά άλλα. umi έχει εξυπηρετήσει τους εσωτερικούς χρήστες πολύ καλά και ελπίζει ότι μπορεί επίσης να εξυπηρετήσει τους εξωτερικούς χρήστες καλά.

Έχει τα ακόλουθα χαρακτηριστικά:

  • Εκτός κιβωτίου, ενσωματωμένη αντίδραση, δρομολογητής αντίδρασης, κλπ
  • Οι Next.js όπως και οι πλήρεις συμβουλές δρομολόγησης, υποστηρίζουν επίσης τη διαμορφωμένη δρομολόγηση
  • Πλήρες σύστημα plugin, καλύπτοντας κάθε κύκλο ζωής από τον πηγαίο κώδικα στην παραγωγή
  • Υψηλή απόδοση, υποστήριξη PWA, διαχωρισμός κώδικα επιπέδου διαδρομής, κλπ μέσω plugin
  • Υποστηρίζει τη στατική εξαγωγή, προσαρμόζεται σε διάφορα περιβάλλοντα, όπως η εφαρμογή κονσόλας, η εφαρμογή για κινητά, το αυγό, το πορτοφόλι Alipay κ.λπ.
  • Γρήγορη εκκίνηση dev, υποστήριξη επιτρέπουν dll και σκληρό-source-webpack-plugin με config
  • Συμβατό IE9, βασισμένο σε umi-plugin-polyfills
  • Υποστήριξη TypeScript, συμπεριλαμβανομένου του ορισμού d.ts και της δοκιμής umi
  • Βαθιά ενσωμάτωση με δύο, υποστήριξη πάπια κατάλογο, αυτόματη φόρτωση του μοντέλου, διαίρεση κώδικα, κλπ

Support Υποστήριξη φόρτωσης κατά παραγγελία

Η φόρτωση κατά παραγγελία γίνεται εξαιρετικά εύκολη στο V2. Απλά κάντε την ακόλουθη ρύθμιση στο babel-plugin-import:

{
    libraryName: 'ant-design-pro',
    libraryDirectory: 'lib',
    style: true,
    camel2DashComponentName: false,
  }}

Μπορείτε να χρησιμοποιήσετε τα στοιχεία Ant Design Pro όπως το antd και σας συνιστούμε να χρησιμοποιήσετε αυτήν τη μέθοδο για να μειώσετε σημαντικά το μέγεθος του πακέτου δέσμης.

εισαγωγή {Αποτέλεσμα} από το 'ant-design-pro'.
ReactDOM.render (<τύπος αποτελεσμάτων = "επιτυχία" />, mountNode);

Best Βέλτιστες πρακτικές διεθνοποίησης

Το V2 παρέχει βέλτιστες πρακτικές διεθνοποίησης που βασίζονται στο umi-plugin-locale. Απλά πρέπει να τοποθετήσετε το αντίστοιχο αρχείο js (όπως en-US.js / zh-CN.js) σε src / locales και οι δυνατότητες που σχετίζονται με τη διεθνοποίηση θα είναι διαθέσιμες στον κώδικα!

εισαγωγή {
  formatMessage,
  setLocale,
  getLocale,
  FormattedMessage,
} από το 'umi / locale'.
προεπιλογή εξαγωγής () => {
  επιστροφή 
}}

Τι είναι έπειτα

Στο μέλλον θα δώσουμε μεγαλύτερη προσοχή στην απόδοση και την ευκολία χρήσης του Ant Design Pro. Και με τη βοήθεια του umi, θα προσπαθήσουμε να κάνουμε κάποια εξερεύνηση στην υλοποίηση των συστατικών στοιχείων. Επιπλέον, θα συνεχίσουμε να βελτιώνουμε την τεκμηρίωση για να μειώσουμε το κόστος χρήσης. Η καλύτερη εμφάνιση και η ευκολία χρήσης υπήρξε και θα είναι πάντα η κατεύθυνση μας και θα συνεχίσουμε να αγωνιζόμαστε για αυτό.

Ειδικές ευχαριστίες

Χάρη σε όλους τους συνεισφέροντες που κατέθεσαν σφάλματα, άνοιξαν PRs, απάντησαν σε θέματα, έγραψαν έγγραφα και πολλά άλλα! Ιδιαίτερες ευχαριστίες στους ακόλουθους κοινοτικούς συνεργάτες @ yoyo837 @ xiaohuoni @zhangxiuling @kaoding και σίγουρα σε όλους τους 38 συνεργάτες που έχουν ανοίξει PRs για το V2. Η συμμετοχή σας έκανε την κυκλοφορία του pro V2 πραγματικότητα.

Αν αντιμετωπίζετε προβλήματα κατά τη χρήση του Ant Design Pro V2, μπορείτε να υποβάλετε ένα νέο ζήτημα στο GitHub.

Ευχαριστώ για τον χρόνο σου. Πιάσε και εγκαταστήστε το, δοκιμάστε το!

Επιτέλους

Ένα άλλο πράγμα που αξίζει να αναφέρουμε, η ομάδα μας εργάζεται σε ένα όνομα προϊόντος συνεργασίας 「語 雀」 (σημασίες πουλί λαγουδάκι μπορεί να μιλήσει), δημοσιεύουμε επίσης αυτό το άρθρο και κινεζική έκδοση εκεί μπορείτε να περάσετε. Το προϊόν εξακολουθεί να είναι σε έκδοση beta και δεν είναι καλό για τους αγγλούς χρήστες, τους οποίους εργαζόμαστε σκληρά για να βελτιώνουμε συνεχώς.