# Sistema di progettazione Naive UI ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Naive UI Cerca record, espandi il contesto della revisione, seleziona righe su più pagine e contrassegna come revisionato un gruppo di elementi locale. ## Riferimento di progettazione per il sistema di progettazione sistema di design Naive UI Oggetto common del tema chiaro predefinito di Naive UI 2.45.3, esaminato dal pacchetto installato. Queste proprietà camelCase sono override del tema, non uno schema pubblico di denominazione delle variabili --token CSS. Gli override common personalizzati dell’anteprima sono elencati separatamente. ### Colori common predefiniti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | primaryColor | #18a058 | Colore primario predefinito. | | primaryColorHover | #36ad6a | Variante al passaggio del puntatore. | | primaryColorPressed | #0c7a43 | Variante alla pressione. | | primaryColorSuppl | #36ad6a | Colore primario supplementare. | | infoColor | #2080f0 | Ruolo informativo. | | successColor | #18a058 | Ruolo di successo. | | warningColor | #f0a020 | Ruolo di avviso. | | errorColor | #d03050 | Ruolo di errore. | | textColor1 | rgb(31, 34, 37) | Testo marcato. | | textColor2 | rgb(51, 54, 57) | Testo normale. | | textColor3 | rgb(118, 124, 130) | Testo secondario. | | borderColor | rgb(224, 224, 230) | Bordo predefinito. | | dividerColor | rgb(239, 239, 245) | Separatori discreti. | | tableHeaderColor | rgb(250, 250, 252) | Sfondo dell’intestazione della tabella. | ### Tipografia e geometria dei controlli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | fontFamily | v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | Stack di font preferito per l’interfaccia utente; v-sans non viene scaricato automaticamente. | | fontSize | 14px | Dimensione predefinita del testo: 14px. | | fontSizeMini | 12px | Dimensione del testo mini. | | fontSizeSmall | 14px | Testo dei controlli piccoli. | | fontSizeMedium | 14px | Testo dei controlli medi. | | fontSizeLarge | 15px | Testo dei controlli grandi. | | fontSizeHuge | 16px | Testo dei controlli molto grandi. | | lineHeight | 1.6 | Interlinea predefinita del testo. | | heightTiny | 22px | Altezza dei controlli minuscoli. | | heightSmall | 28px | Altezza ridotta dei controlli. | | heightMedium | 34px | Altezza dei controlli medi. | | heightLarge | 40px | Altezza grande dei controlli. | | heightHuge | 46px | Altezza dei controlli molto grandi. | | borderRadius | 3px | Raggio predefinito di 3px. | | borderRadiusSmall | 2px | Raggio predefinito di 2px per gli elementi piccoli. | ### Override effettivi del tema dell’anteprima | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | common.primaryColor | #176b57 | Colore originale più scuro per l’azione primaria. | | common.primaryColorHover | #238a71 | Valore originale coordinato al passaggio del puntatore. | | common.primaryColorPressed | #115340 | Valore originale coordinato alla pressione. | | common.borderRadius | 6px | Override originale del raggio; il valore predefinito è 3px. | | Layout spacing | 32px outer / 24px section gaps / 16px toolbar gap | Spaziatura originale della pagina, non una scala di spaziatura globale attribuita a Naive. | ## Guida completa al sistema di progettazione sistema di design Naive UI Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di design Naive UI: un oggetto tema JavaScript, non una pipeline Sass ### Un oggetto tema JavaScript, non una pipeline Sass > Naive UI è una libreria di componenti per Vue 3 che consente di personalizzare il tema tramite un oggetto JavaScript. La coda di revisione passa themeOverrides a NConfigProvider. La sezione common sovrascrive primaryColor, primaryColorHover, primaryColorPressed e borderRadius, mentre gli altri valori predefiniti dei componenti restano disponibili tramite il provider. La tabella di riferimento riporta i valori effettivi del tema common chiaro di default della versione 2.45.3. Non inventa nomi di variabili CSS a partire da queste chiavi camelCase. Il colore primario predefinito è #18a058 e il raggio del bordo predefinito è di tre pixel; il verde più scuro e il raggio di sei pixel in questo esempio sono override originali dichiarati esplicitamente. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Naive UI: tipografia e altezze dei controlli per interfacce dense ### Tipografia e altezze dei controlli per interfacce dense Il tema common usa testo da quattordici pixel con interlinea 1.6. Le dimensioni del testo small e medium sono entrambe di quattordici pixel, ma le rispettive altezze dei controlli differiscono. heightSmall è di ventotto pixel e heightMedium di trentaquattro; i nomi delle dimensioni descrivono quindi la geometria dei componenti, non soltanto una progressione delle dimensioni del carattere. Lo stack di font preferito inizia con v-sans, ma la libreria non richiede di scaricare quel font per visualizzare questo esempio. La pagina circostante usa system-ui, un titolo da 34px e titoli di sezione di supporto da 18px. Questi stili della pagina sono originali. Chi adotta la libreria dovrebbe distinguere la scala dei controlli del tema dalla gerarchia editoriale più ampia di una pagina di presentazione. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Naive UI: le definizioni delle colonne includono il comportamento ### Le definizioni delle colonne includono il comportamento NDataTable riceve un array columns e un array records. L’esempio inizia con una colonna di selezione, seguita da una colonna di espansione e poi dalle colonne di dati con nome. La colonna Reference mostra un nome in evidenza e un ID stabile più piccolo. Entries usa un comparatore numerico, mentre la colonna del nome usa il criterio di ordinamento predefinito. Review mostra una NTag nativa in base allo stato del record. Questa configurazione definisce un comportamento effettivo, non una schermata con intestazioni decorative. L’ordinamento della colonna Entries confronta valori numerici, non stringhe formattate. Il contenuto espanso mostra la specifica domanda di revisione di ciascun record. La tabella controlla la visualizzazione delle righe, mentre l’applicazione gestisce il significato dei record. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Naive UI: la selezione deve mantenersi dopo il riordinamento ### La selezione deve mantenersi dopo il riordinamento La funzione row-key restituisce l’ID stabile di ciascun record. checked-row-keys e update:checked-row-keys mantengono la selezione controllata nello stato di Vue. L’ordinamento o la paginazione possono cambiare la posizione di un record senza modificare l’identità usata dall’azione in blocco. Usare invece gli indici dell’array renderebbe fragile questa corrispondenza al variare dell’ordine delle righe. La colonna di selezione disabilita i record Archived. Questi restano visibili come riferimento storico, ma non possono essere aggiunti al gruppo di revisione. Quando applica l’azione, l’applicazione controlla anche lo stato, mantenendo coerente la modifica dei dati con la limitazione visibile. In un sistema reale, il server dovrebbe comunque applicare i controlli di autorizzazione: una casella disabilitata non costituisce un confine di autorizzazione. 1. Seleziona un record revisionabile nella prima pagina. 2. Vai alla pagina successiva e controlla che il conteggio della selezione sia mantenuto. 3. Applica l’azione in blocco e verifica che lo stato del record selezionato cambi senza modificare alcun record archiviato. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Naive UI: filtri e paginazione hanno stati separati ### Filtri e paginazione hanno stati separati La ricerca corrisponde ai nomi dei riferimenti e dei proprietari. Quando il valore cambia, la pagina corrente viene reimpostata su uno, affinché i risultati filtrati non rimangano su una pagina successiva ormai vuota. La paginazione usa una dimensione di pagina pari a quattro e un gestore onChange; i sei record rendono osservabili i passaggi tra le pagine nell’esempio locale. La selezione è intenzionalmente separata dall’array filtrato e può estendersi su più pagine. Il conteggio nella barra degli strumenti ne indica l’ambito. Un’operazione in blocco in produzione dovrebbe mantenere o cancellare le selezioni nascoste in base a una regola deliberata; questo esempio le mantiene. Un filtro non viene mai trattato come una modifica dei record di revisione sottostanti. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Naive UI: espandi le righe prima di decidere in blocco ### Espandi le righe prima di decidere in blocco Ogni riga espandibile include un’attività concreta, ad esempio verificare la navigazione da tastiera nel menu o confrontare i diversi significati degli stati vuoti. In questo modo, il contenuto espanso fornisce elementi utili per decidere come procedere con la revisione, invece di ripetere un’altra descrizione generica. La colonna di espansione usa renderExpand per mostrare contenuti standard sotto il record corrispondente. La tabella mantiene la struttura delle colonne sugli schermi stretti e riceve scroll-x=640. In questo modo, l’area della tabella nativa può scorrere orizzontalmente, mentre la pagina resta all’interno dell’area visibile. Su mobile la barra degli strumenti si dispone in verticale, ma i dati non vengono rimossi di nascosto per rendere più pulita la schermata. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Naive UI: la revisione in blocco è una trasformazione dei dati locale ### La revisione in blocco è una trasformazione dei dati locale Il pulsante Mark selected reviewed è disabilitato quando l’array di chiavi controllato è vuoto. Quando viene attivato, esamina i record e modifica solo quelli selezionati e non archiviati, impostandone lo stato su Reviewed. In seguito la selezione viene cancellata e un avviso di successo nativo descrive esattamente l’operazione locale. Il conteggio dei record revisionati nell’intestazione della scheda deriva dai record, anziché essere incrementato separatamente. Non viene modificato alcun repository, servizio di revisione o documento esterno. Una vera implementazione asincrona richiederebbe la gestione del caricamento, dei rifiuti e degli errori parziali. La selezione non andrebbe cancellata prima di sapere quali aggiornamenti sono riusciti. Questo esempio mantiene l’operazione sincrona ed esplicitamente locale, affinché il messaggio di successo corrisponda al codice. - Il pulsante dell’azione in blocco indica se sono selezionate delle chiavi. - Il conteggio dei record revisionati deriva dagli stessi record mostrati nella tabella. - La notifica del risultato specifica che nessun repository è stato modificato. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Naive UI: un componente Vue senza importazione obbligatoria di CSS ### Un componente Vue senza importazione obbligatoria di CSS Installa naive-ui@2.45.3 in un progetto Vue 3 e importa i componenti usati da App.vue. Naive UI fornisce gli stili dei componenti in fase di esecuzione; a differenza di molte librerie basate su CSS, non richiede l’importazione di un foglio di stile globale del pacchetto per questi componenti. Il file style.css fornito contiene soltanto il layout originale dell’area di lavoro. NConfigProvider riceve le impostazioni locali inglesi per i componenti e le date, oltre alla personalizzazione comune del tema. L’intero SFC può essere compilato con il plugin Vue standard di Vite. L’esempio autonomo include il componente compilato, mantenendo disponibili i componenti nativi e il comportamento dell’applicazione senza richieste di rete. Leggi la specifica di supporto ## Tema e limiti dei dati del sistema di progettazione sistema di design Naive UI restano verificabili ### I confini tra tema e dati restano verificabili Il workbench è una piccola libreria di riferimento, non una dashboard amministrativa generica con metriche inventate. Ogni riga contiene dati di esempio, ogni stato ha un significato esplicito e il testo di espansione fornisce un motivo concreto per esaminarla. La tabella del tema e l’intero SFC rendono riproducibili sia lo stile sia il comportamento. Quando si adotta Naive UI in un sistema più ampio, coordinare le personalizzazioni globali comuni con quelle a livello di componente. Il colore predefinito principale e i colori al passaggio del mouse e alla pressione vanno esaminati insieme. Se il provider offre una superficie del tema supportata, evitare di personalizzare per prima cosa gli elementi interni generati. Leggi la specifica di supporto ## Esempi di componenti del sistema di progettazione sistema di design Naive UI ### Coda di revisione completa Vue Configurazione delle colonne DataTable, chiavi di riga stabili, selezione, espansione e paginazione controllata. ``` ``` Riferimento del codice - La selezione si basa su ID di riferimento stabili. - Le righe archiviate sono disabilitate tramite il predicato della colonna di selezione. - La personalizzazione comune del tema viene fornita tramite NConfigProvider. ### Layout originale del workbench Tipografia della pagina e spaziatura adattiva attorno alla tabella dati nativa. ``` *{box-sizing:border-box}body{margin:0;background:#f5f7f6;color:#1f2225;font-family:system-ui,sans-serif;font-size:14px;line-height:1.6}.review-desk{max-width:1120px;margin:auto;padding:32px}header{max-width:720px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#426258}.toolbar{display:flex;align-items:center;gap:16px}.toolbar .n-input{max-width:360px}.selection-note,.row-id{font-size:12px;color:#767c82}.row-id{margin-top:4px}.row-note{padding:12px 16px;max-width:65ch;color:#335547}.notice{margin-top:20px}.notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.notes section{border-top:2px solid #c8d7cf;padding:18px 0}.notes h2{font-size:18px;margin:0 0 10px}.notes p{margin:0}footer{font-size:12px;color:#767c82;margin-top:20px}@media(max-width:700px){.review-desk{padding:20px 16px}h1{font-size:28px}.toolbar{align-items:stretch;flex-direction:column}.toolbar .n-input{max-width:none}.notes{grid-template-columns:1fr}.n-card>.n-card__content{padding:16px!important}} ``` Riferimento del codice - Naive UI inserisce gli stili dei componenti; questo foglio di stile contiene solo il layout dell’applicazione. ## Configurazione dell’agente AI per il sistema di progettazione sistema di design Naive UI ### Punto di partenza per l’implementazione Verificato con Vue 3 e Naive UI 2.45.3. Utilizza la compilazione SFC standard. Tutti i record di riferimento sono locali. ``` // Create the project first: // npm create vite@latest naive-ui-specimen -- --template vue // cd naive-ui-specimen && npm install // In a Vite Vue 3 project: // npm install naive-ui@2.45.3 // Save the complete component above as App.vue and layout as style.css. import {createApp} from 'vue'; import App from './App.vue'; import './style.css'; createApp(App).mount('#app'); // index.html contains
. // NConfigProvider, locales, themeOverrides and component imports are in App.vue. // No Naive UI global CSS import is required for these components. // Keep the template index.html and replace its entry with the code above. // npm run dev ``` ### Un prompt per il tuo progetto ``` Usa la coda di revisione di riferimento Naive UI 2.45.3 con NConfigProvider e le colonne native di NDataTable, l’espansione, l’ordinamento, la paginazione e la selezione. Mantieni stabili le chiavi di riferimento durante il filtraggio o il cambio di pagina e fai in modo che l’azione in blocco operi sui record selezionati, non soltanto sulle righe visibili. Collega gli stati vuoti e le azioni disabilitate alla raccolta effettiva. Mantieni themeOverrides come personalizzazioni dell’applicazione, distinte dai valori predefiniti del pacchetto, e conserva il layout originale completo. La coda serve alla revisione locale dei riferimenti, non all’importazione di set di dati. ``` ## Fonti e ambito del sistema di progettazione sistema di design Naive UI Naive UI 2.45.3. I valori predefiniti del tema e le personalizzazioni originali sono identificati separatamente. I record di revisione e le modifiche in blocco restano locali. - Repository ufficiale Vue 3, stili runtime e personalizzazione del tema. - Esempi di DataTable Modelli di tabelle dati native ed esempi di API. - Tema chiaro comune Palette predefinita effettiva e ruoli derivati. - Geometria comune Dimensioni dei caratteri, altezze dei controlli e raggi. - Provider di configurazione Configurazione del tema del provider. ## Risorse correlate al sistema di progettazione sistema di design Naive UI ### Nuxt UI Crea un compositore di brief completo con Nuxt UI 4.11.3, usando componenti Vue reali, riferimenti semantici ai temi, convalida degli input e un comportamento esplicito per le bozze locali. ### Oruga UI Un editor di catalogo nativo Oruga con tag di argomenti ricercabili e rimovibili, limiti lessicali applicati, token effettivi di un tema opzionale e una scheda dal vivo che riflette le etichette selezionate. ### Pico CSS Gli stili di Pico CSS applicano colori semantici tramite HTML, con una scala tipografica responsive basata su rem e variabili tema. Le distribuzioni standard, senza classi e condizionali hanno ambiti d’integrazione diversi; questa guida usa la build standard per un modulo sulle preferenze di lettura, con comportamenti nativi di disclosure e dialogo. - [Riferimento per l’implementazione](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Fonte](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts) - [Fonte](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider) - [Leggi la specifica di supporto](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts) - [Leggi la specifica di supporto](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Leggi la specifica di supporto](https://github.com/tusen-ai/naive-ui) - [Leggi la specifica di supporto](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider) - [Riferimento del codice](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Riferimento del codice](https://github.com/tusen-ai/naive-ui) - [Repository ufficiale Vue 3, stili runtime e personalizzazione del tema.](https://github.com/tusen-ai/naive-ui) - [Esempi di DataTable Modelli di tabelle dati native ed esempi di API.](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS) - [Tema chiaro comune Palette predefinita effettiva e ruoli derivati.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts) - [Geometria comune Dimensioni dei caratteri, altezze dei controlli e raggi.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/_common.ts) - [Provider di configurazione Configurazione del tema del provider.](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)