Sistema de componentes empresariales · Nuevo recurso
Sistema de diseño de Element Plus.
Usa el modelo Transfer real de Element Plus, sus filtros y sus opciones deshabilitadas para crear un espacio de trabajo de selección de módulos, con colores, tamaños tipográficos y dimensiones de controles verificados.
Referencia de diseño del sistema de diseño Element Plus
Element Plus 2.14.7 CSS compilado predeterminado. Las variables son valores verificados del paquete, incluidos los alias semánticos. La composición adaptable de la lista de transferencia sigue las reglas originales de diseño y está separada de los fundamentos del sistema.
Sistema de diseño Element Plus: una lista de transferencia tiene dos tipos de selección
Una lista de transferencia tiene dos tipos de selección
Element Plus Transfer muestra listas de elementos disponibles y de destino, con controles para mover los elementos marcados. El espacio de trabajo de módulos utiliza el componente Vue real de la versión 2.14.7. Su v-model contiene las claves de destino, inicialmente catalog y tokens. Una casilla dentro de una lista marca un elemento para la siguiente acción de transferencia; no significa que el elemento ya pertenezca al destino.
La lectura del modelo en vivo deja clara esta distinción. Marcar un elemento de origen lo prepara para añadirlo. Al pulsar Añadir, cambia la matriz de claves de destino, se actualiza el resumen de módulos seleccionados y se borra cualquier resultado aplicado anteriormente. Así, quien lo consulta puede ver el contrato del modelo de la biblioteca, en lugar de tener que deducirlo a partir de dos listas estáticas.
Roles predeterminados y dimensiones concretas de los componentes del sistema de diseño Element Plus
Roles predeterminados y dimensiones concretas de los componentes
Element Plus expone --el-color-primary y sus derivados claros y oscuros, roles de estado, colores de texto y variables de superficie. La tabla muestra los valores compilados reales del paquete instalado. El panel de claves que lo rodea usa primary-light-9 y texto normal, mientras que el botón de acción aplica el estilo principal nativo.
La tipografía predeterminada incluye un tamaño base de catorce píxeles y tamaños complementarios de doce, trece, dieciséis, dieciocho y veinte píxeles. Las variables de tamaño de los componentes describen las dimensiones pequeñas, predeterminadas y grandes de los controles. No deben confundirse con una escala de espaciado para el diseño de página. Los espacios de veinticuatro píxeles y el relleno exterior de treinta y dos píxeles del espacio de trabajo son decisiones explícitas de composición original.
Claves estables, etiquetas y opciones deshabilitadas del sistema de diseño Element Plus
Claves estables, etiquetas y opciones deshabilitadas
Cada opción tiene una clave, una etiqueta y una marca de deshabilitada. El arreglo de elementos seleccionados contiene esas claves, lo que permite cambiar las etiquetas sin alterar la identidad. Los módulos de ejemplo incluyen Catálogo de recursos, Inspector de tokens, Cola de revisión, Historial de versiones y Búsqueda entre proyectos. La exportación de auditoría permanece deshabilitada para mostrar una opción visible, pero no disponible.
La disponibilidad de este ejemplo es información de demostración estática. No es una comprobación de derechos ni una promesa de que estos módulos existan como productos instalables. En una aplicación real, el origen de las opciones y las reglas de permisos deben proceder del modelo del producto. No infieras que existe autorización porque se pueda hacer clic en una casilla de Transfer.
Element Plus El sistema de diseño: la búsqueda cambia la visibilidad, no la pertenencia
La búsqueda cambia la visibilidad, no la pertenencia
filterable añade búsquedas independientes a los paneles. El texto de marcador de posición indica una acción concreta: Buscar un módulo. De forma predeterminada, el filtrado busca coincidencias en la etiqueta de la opción. Un elemento seleccionado puede desaparecer de la lista de destino visible al aplicar una búsqueda sin que se elimine del arreglo de claves seleccionadas; el resumen y la lectura de datos siguen mostrando el conjunto completo de elementos de destino.
Los espacios personalizados left-empty y right-empty permiten distinguir entre un panel sin opciones coincidentes y el caso global en que no hay nada seleccionado. La página también deshabilita localmente Aplicar cuando el arreglo de destino está vacío. Son estados distintos: que no haya resultados de búsqueda no significa que no haya módulos seleccionados.
Busca Cola de revisión en el panel de módulos disponibles.
Marca la opción coincidente y pulsa Añadir.
Borra la búsqueda y comprueba que «Cola de revisión» aparezca en la lectura del modelo y en la lista de destino.
Element Plus El sistema de diseño: conserva en móvil la relación entre las dos listas
Conserva en móvil la relación entre las dos listas
En escritorio, los paneles nativos de Transfer se disponen uno junto al otro, con un área dedicada a Añadir y Quitar. En pantallas de hasta setecientos píxeles de ancho, los paneles se apilan y los botones de acción forman una fila horizontal entre ellos. Los títulos siguen identificando los Módulos disponibles y los Módulos del espacio de trabajo, para que la dirección de cada movimiento quede clara.
El entorno de trabajo no reduce todo el control para que quepa en el teléfono. Adapta la composición y mantiene las etiquetas, las casillas, las búsquedas y el contenido de las listas en tamaños nativos y legibles. La lectura de las claves seleccionadas y el resumen textual pasan a una sola columna debajo, conservando la misma información en lugar de ocultarla en un punto de ruptura más pequeño.
Element Plus El sistema de diseño: borrador de pertenencia y copia del estado aplicado
Pertenencia en borrador e instantánea aplicada
Aplicar localmente copia el arreglo de claves seleccionadas. Un cambio posterior en la selección de Transfer borra ese estado aplicado, de modo que la alerta de éxito no permanece después de que el usuario cambie los elementos del borrador. Restaurar conjunto inicial asigna un nuevo arreglo catalog/tokens y también borra el resultado aplicado. Las transiciones de estado se implementan en unas pocas líneas explícitas del código fuente de Vue.
La alerta solo indica que se aplicó la selección de la vista previa local. No afirma que se haya instalado nada, que hayan cambiado los derechos ni que se haya actualizado un sistema externo. En una pantalla de configuración real, la copia del estado aplicado tendría que corresponder a un resultado de persistencia confirmado; un evento del componente por sí solo no confirma nada en el servidor.
Element Plus El sistema de diseño: controles nativos e instrucciones claras
Controles nativos e instrucciones claras
El ejemplo conserva las casillas y los botones de transferencia nativos de Transfer. El texto de los botones es Quitar y Añadir, en lugar de dejar solo iconos direccionales; esto resulta especialmente útil cuando las listas se apilan en vertical. Los títulos de los paneles explican las funciones de origen y destino, y la frase de ayuda describe la secuencia de marcar y luego mover.
La opción deshabilitada permanece en contexto, y los espacios vacíos de los paneles indican que no hay opciones coincidentes. Los usuarios de teclado deben poder acceder a los campos de búsqueda, las casillas y los botones sin manejadores personalizados exclusivos del puntero. El componente gestiona su propio comportamiento interno; la aplicación evita reemplazar esa estructura con filas dibujadas que solo parecen controles de selección.
Los títulos de los paneles indican qué lista es el destino.
Las etiquetas de texto mantienen clara la dirección de la transferencia en la disposición apilada.
La lectura del modelo en tiempo real permite detectar elementos seleccionados que no están visibles.
Element Plus El sistema de diseño: compila el componente de Vue y carga CSS
Compila el componente de Vue y carga CSS
En un proyecto de Vue 3 con Vite, instala [email protected] e importa element-plus/dist/index.css antes del CSS de la estructura original. El archivo App.vue completo usa script setup e importa sus componentes directamente. ElConfigProvider recibe la configuración regional en inglés para que los textos integrados de los paneles y de los estados vacíos coincidan con la página de referencia en inglés.
La configuración de estilo de producción proporcionada importa App.vue mediante el complemento de Vue para Vite. La muestra sin conexión se creó compilando el mismo componente de archivo único y empaquetándolo localmente. No necesita una CDN externa, un servicio de importación automática ni un compilador de plantillas en tiempo de ejecución. Si un proyecto existente usa un complemento de importación automática, mantén los estilos generados en consonancia con la estrategia elegida: importación completa o por componente.
Element Plus El sistema de diseño: las personalizaciones del tema deben conservar las relaciones entre componentes
Las anulaciones del tema deben conservar las relaciones entre componentes
Las propiedades personalizadas de CSS son útiles para cambiar funciones compartidas sin reescribir los selectores de cada componente. El entorno de trabajo utiliza las variables --el reales para el fondo, el texto, los bordes y las esquinas. Solo modifica los selectores de disposición necesarios para adaptar Transfer nativo a esta composición concreta.
Para un tema de marca más amplio, usa el enfoque documentado de Sass o de variables CSS y revisa conjuntamente los estados de pasar el cursor, deshabilitado y foco. Sustituir únicamente el valor hexadecimal principal en una captura de pantalla no contempla sus superficies más claras ni sus interacciones más oscuras. La tabla basada en el código fuente ofrece los valores iniciales; la vista previa nativa completa permite examinar sus efectos en un componente funcional.
Element Plus El sistema de diseño: ejemplos de componentes
Componente Vue completo para seleccionar módulos
Componente de archivo único que utiliza Transfer, Card, Alert, Button y Tag nativos.
vue
<script setup>
import {ref,computed} from 'vue';
import {ElConfigProvider,ElTransfer,ElCard,ElButton,ElTag,ElAlert} from 'element-plus';
import en from 'element-plus/es/locale/lang/en';
const modules=[{key:'catalog',label:'Asset catalog',disabled:false},{key:'tokens',label:'Token inspector',disabled:false},{key:'review',label:'Review queue',disabled:false},{key:'history',label:'Version history',disabled:false},{key:'audit',label:'Audit export · unavailable',disabled:true},{key:'search',label:'Cross-project search',disabled:false}];
const selected=ref(['catalog','tokens']),applied=ref(null);const names=computed(()=>modules.filter(x=>selected.value.includes(x.key)).map(x=>x.label));
const changed=()=>{applied.value=null};
</script>
<template><ElConfigProvider :locale="en"><main class="module-desk"><header><p class="eyebrow">ELEMENT PLUS / WORKSPACE COMPOSITION</p><h1>Choose the tools this team needs.</h1><p>Move modules between lists, then inspect the exact selected keys.</p></header><ElCard shadow="never"><template #header><div class="card-heading"><h2>Module selection</h2><ElTag type="info">{{selected.length}} selected</ElTag></div></template><ElTransfer v-model="selected" :data="modules" filterable filter-placeholder="Find a module" :titles="['Available modules','Workspace modules']" :button-texts="['Remove','Add']" @change="changed"><template #left-empty><p class="empty">No available module matches.</p></template><template #right-empty><p class="empty">No selected module matches.</p></template></ElTransfer><p class="help">Check a module before using Add or Remove. Audit export stays disabled in this sample.</p></ElCard><div class="summary-grid"><section class="summary"><h2>Workspace modules</h2><ul v-if="names.length"><li v-for="name in names" :key="name">{{name}}</li></ul><p v-else>No modules selected. Add at least one before applying.</p><div class="actions"><ElButton type="primary" :disabled="!selected.length" @click="applied=[...selected]">Apply locally</ElButton><ElButton @click="selected=['catalog','tokens'];changed()">Restore starting set</ElButton></div><ElAlert v-if="applied" title="Selection applied to the local preview" type="success" :closable="false" show-icon description="No installation, entitlement change or external update was performed." /></section><section class="key-panel"><p class="eyebrow">V-MODEL VALUE</p><pre>{{JSON.stringify(selected,null,2)}}</pre><p>The model contains keys, not option objects. Search filters visibility without changing this array.</p></section></div><footer>Native Element Plus Transfer, Card, Tag, Button and Alert. Local module names and availability are original examples.</footer></main></ElConfigProvider></template>
El punto de interrupción y la composición circundante son decisiones originales.
04
Configuración del agente del sistema de diseño de Element Plus
Punto de partida para la implementación
Verificado con Vue 3 y Element Plus 2.14.7. App.vue proporciona el ConfigProvider en inglés y las importaciones explícitas de componentes. Todo el estado es local.
javascript
// Create the project first:
// npm create vite@latest element-plus-specimen -- --template vue
// cd element-plus-specimen && npm install
// In a Vite Vue 3 project:
// npm install [email protected]
// Save the complete single-file component above as App.vue.
// main.js
import {createApp} from 'vue';
import 'element-plus/dist/index.css';
import './style.css';
import App from './App.vue';
createApp(App).mount('#app');
// index.html: <div id="app"></div>
// style.css: use the complete responsive composition above.
// Vite's standard Vue template includes @vitejs/plugin-vue for .vue files.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
Una instrucción para tu proyecto
Instrucción para el agente
Amplía el selector de módulos del espacio de trabajo de Element Plus 2.14.7 proporcionado mediante el ElTransfer nativo. Conserva los seis módulos con clave, la entrada Audit deshabilitada, el comportamiento del filtro y el array controlado de claves seleccionadas. Al aplicar, se debe guardar la selección actual de módulos; las ediciones posteriores deben hacer que esa instantánea aparezca visiblemente desactualizada, mientras que restaurar devuelve la selección inicial. Conserva la composición adaptable de dos paneles y la semántica de los elementos deshabilitados, en lugar de reconstruir Transfer como listas independientes. Carga la hoja de estilos nativa antes de la composición original CSS.
05
Fuentes y alcance del sistema de diseño de Element Plus
Referencia nativa de Element Plus 2.14.7. Los nombres de los módulos y los permisos son ejemplos originales; la selección local no instala nada ni modifica las autorizaciones.
