# Sistema de diseño de Arco Design ## Vista previa de la interfaz del sistema de diseño de Arco Design Busca, selecciona, incluye o quita secciones del informe y prepara un esquema local independiente. ## Referencia de diseño del sistema de diseño de Arco Design Fuente original de Arco React. Las constantes Less se muestran con @; las variables CSS en tiempo de ejecución usan --. El espaciado de la vista previa y la disposición de los paneles son decisiones originales de la aplicación, basadas en esas escalas. ### Tamaños y espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | @size-mini | 24px | Alias de altura compacta del componente. | | @size-small | 28px | Altura pequeña del componente. | | @size-default | 32px | Altura predeterminada del componente. | | @size-large | 36px | Altura grande del componente. | | @spacing-1 … @spacing-6 | 2, 4, 6, 8, 10, 12px | Incrementos pequeños de espaciado. | | @spacing-7 … @spacing-10 | 16, 20, 24, 32px | Incrementos de agrupación. | | @border-radius-small | 2px | Esquinas pequeñas. | | @border-radius-medium | 4px | Esquinas medianas. | | @border-radius-large | 8px | Esquinas grandes. | ### Tipografía y movimiento | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | @font-size-body | 14px | Tamaño global del texto del cuerpo. | | @line-height-base | 1.5715 | Caja de línea aproximada de 22px a 14px. | | @font-family | Inter, system and CJK fallbacks | Llamarla Inter no la descarga. | | @code-family | Consolas, Menlo | Pila orientada al código. | | @transition-duration-1 / 2 / 3 | 0.1s / 0.2s / 0.3s | Las tres primeras constantes de duración. | | @transition-timing-function-standard | cubic-bezier(.34,.69,.1,1) | Curva estándar publicada. | ### Referencias de la paleta | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | @arcoblue-6 | #165dff | Referencia del azul de Arco. | | @gray-1 | #f7f8fa | Neutro claro. | | @gray-2 | #f2f3f5 | Neutro de relleno secundario. | | @gray-3 | #e5e6eb | Neutro de borde. | | @gray-8 | #4e5969 | Neutro del texto secundario. | | @gray-10 | #1d2129 | Neutro del texto principal. | | @red-6 | #f53f3f | Referencia del rojo; no des por sentado que ofrece contraste suficiente para texto pequeño. | | @green-6 | #00b42a | Referencia del verde. | ### Convenciones de variables en tiempo de ejecución | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --color-text-1 | Primary text role | El prefijo de variable predeterminado no es arco. | | --color-fill-2 | Secondary fill role | Úsalo en lugar de un gris codificado en las áreas que admiten temas. | | --border-radius-medium | Medium corner role | Exportada en tiempo de ejecución. | | body[arco-theme="dark"] | Dark theme selector | Establece o quita el atributo del body. | | --color-bg-2 | Container surface | Se resuelve de forma distinta en el modo oscuro. | ### Estado y eventos de Transfer | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | dataSource | {key:string,value:string,disabled?:boolean}[] | Las claves estables identifican las secciones. | | targetKeys | string[] | Pertenencia a la columna de destino. | | selectedKeys | string[] | Selección de casillas, no pertenencia al destino. | | onChange | (newTargetKeys,direction,moveKeys) | Confirma la nueva matriz de pertenencia. | | onSelectChange | (leftSelectedKeys,rightSelectedKeys) | Combina ambos para controlar selectedKeys. | | filterOption | (inputValue,item) => boolean | La opción original predeterminada distingue entre mayúsculas y minúsculas y busca coincidencias parciales. | | showSearch | Boolean or per-list configuration | El ejemplo habilita la búsqueda en ambas columnas. | | oneWay | Boolean | Úsalo solo si no quieres permitir que se quite contenido del destino. | | simple | Boolean or retainSelectedItems options | Puede transferir al seleccionar; no equivale a acciones de transferencia explícitas. | ## Guía completa del sistema de diseño de Arco Design Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Transfer del sistema de diseño de Arco Design representa la pertenencia, no solo una lista de casillas ### Elige con criterio las secciones del informe > Arco Transfer es útil cuando un operador debe comparar dos conjuntos: las secciones disponibles y las incluidas en un informe. Marcar una fila la selecciona para una operación posterior; no mueve la sección de inmediato, salvo que esté activado el modo simple. El ejemplo mantiene explícita la acción en dos pasos. El usuario selecciona «Canales de adquisición», activa «Incluir» y luego prepara un esquema. Ese esquema es una instantánea independiente, por lo que los cambios posteriores en el editor no modifican silenciosamente la versión preparada. Consulta la especificación complementaria ## Sistema de diseño Arco Design: usa por separado la escala de tamaños y la de espaciado ### Un mismo número puede representar dimensiones distintas Las constantes de tamaño de Arco aumentan en incrementos de cuatro píxeles, mientras que la escala de espaciado empieza con 2, 4, 6, 8, 10 y 12 antes de dar saltos mayores. El tamaño predeterminado del componente corresponde a 32px. Suponer que todos los sufijos de tamaño o espaciado representan la misma cantidad produciría controles inconsistentes. Los dos paneles de transferencia usan esquinas de radio medio y un margen de página de 24px en esta composición original. Las casillas pequeñas y los separadores de filas facilitan la selección de muchos elementos; las áreas más amplias de la página aportan separación sin sustituir el contenido útil por tarjetas demasiado grandes. Consulta la especificación complementaria ## Sistema de diseño Arco Design: conserva los roles semánticos en los estilos de la aplicación ### Las variables CSS tienen su propia convención de nombres El tema predeterminado exporta variables como --color-text-1 y --color-fill-2, sin el prefijo arco. Las compilaciones personalizadas pueden cambiar ese prefijo, así que revisa el tema compilado al integrarlo en una aplicación con espacio de nombres propio. Las variables de la paleta principal contienen canales RGB; para usarlas se necesita rgb(var(--primary-6)), en lugar de tratarlas como si fueran un color hexadecimal completo. La vista previa usa el tono azul de Arco verificado como referencia para la acción principal y las filas seleccionadas. En una sección restringida, se muestra una casilla deshabilitada y un texto explicativo, en vez de un color rojo que podría sugerir que el operador puede corregir un error. Consulta la especificación complementaria ## Sistema de diseño Arco Design: admite etiquetas compactas y nombres de sección largos ### Una escala práctica para el texto del cuerpo El tamaño de texto predeterminado para el cuerpo es de 14px, con un multiplicador de interlineado de 1.5715. La familia tipográfica publicada empieza con Inter e incluye alternativas del sistema y para CJK. Se trata de una pila tipográfica CSS, no de una prueba de que se haya cargado un archivo de fuente Inter. La etiqueta de una sección del informe puede ser más larga que la de ejemplo. La versión sin conexión ajusta el texto de las filas y apila los paneles en una ventana pequeña para que las etiquetas «Incluir» y «Quitar» sigan siendo legibles. No reduce todo el componente de transferencia hasta volver ilegible el texto. Consulta la especificación complementaria ## Sistema de diseño Arco Design: dos matrices controladas evitan comportamientos ambiguos ### La pertenencia y la selección tienen significados distintos targetKeys indica qué elementos están en el informe. selectedKeys indica qué casillas están activas en ese momento en ambas listas. onSelectChange proporciona matrices para la izquierda y la derecha; concaténalas para controlar selectedKeys. onChange proporciona la nueva pertenencia, la dirección y las claves movidas. 1. Mantén estable la clave de cada elemento de origen, aunque cambie su etiqueta visible. 2. Combina las matrices de selección izquierda y derecha en onSelectChange. 3. Sustituye targetKeys por la nueva matriz de onChange. 4. Borra la selección temporal después de mover elementos e informa de su efecto inmediato. Consulta la especificación complementaria ## Sistema de diseño Arco Design: la búsqueda debe acotar la vista sin eliminar elementos ### Especifica claramente la regla de coincidencia El filtro predeterminado de origen compara la consulta con el valor del elemento mediante una búsqueda de subcadena que distingue entre mayúsculas y minúsculas. El ejemplo proporcionado cambia ese comportamiento para que la búsqueda no distinga entre mayúsculas y minúsculas. Buscar una fila seleccionada que esté oculta no debe dar a entender que se ha eliminado de la lista de elementos del informe. En esta lista pequeña, la paginación y la virtualización aportan poco. Arco ofrece esas opciones para conjuntos de datos mayores, pero la aplicación sigue siendo responsable de las claves estables, el conjunto completo de destinos y las reglas de selección en las vistas filtradas. - Las listas de elementos disponibles e incluidos tienen campos de búsqueda con etiquetas distintas. - El mensaje de que no hay coincidencias describe la vista filtrada, no un conjunto de datos vacío. - Para preparar un esquema se usa targetKeys, no solo las filas visibles en ese momento. Consulta la especificación complementaria ## Sistema de diseño Arco Design: el modo oscuro cambia las superficies y el texto ### Configura el selector publicado Arco publica sus estilos para el modo oscuro bajo la etiqueta del tema con arco-theme="dark". En la compilación predeterminada, la etiqueta es body. Al quitar ese atributo se restablecen las reglas normales; añadir una clase no relacionada llamada dark no es lo mismo API. Si añades una vista previa en modo oscuro, ajusta conjuntamente los roles del contenedor y del texto. El ejemplo sin conexión permanece intencionalmente en modo claro, mientras que el ejemplo nativo puede usar el tema CSS ya importado. No inviertas las miniaturas ni las ilustraciones de los informes aplicándoles un filtro general. ``` document.body.setAttribute('arco-theme', 'dark'); // Restore default: document.body.removeAttribute('arco-theme'); ``` Referencia de código Consulta la especificación complementaria ## Sistema de diseño Arco Design: paquete, hoja de estilos y alcance real ### Un esquema de informe no exporta los datos del informe El paquete React es @arco-design/web-react y su entrada completa CSS es dist/css/arco.css. El ejemplo importa Transfer y Button desde la raíz del paquete y usa estado controlado, en lugar de inventar una API de creación de informes API. La vista previa independiente reproduce el comportamiento de selección con casillas y botones nativos para funcionar sin conexión. Permite validar la lógica de interacción y la composición adaptable; no demuestra que el paquete nativo se haya compilado en un proyecto consumidor. Un exportador de producción necesitaría un backend y comprobaciones de permisos que van más allá de una fila de ejemplo deshabilitada. Consulta la especificación complementaria ## Arco Design Ejemplos de componentes del Sistema de diseño ### Muestra interactiva independiente completa Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente HTML del comportamiento de Arco Transfer y de los colores de referencia del tema verificados; el ejemplo nativo React se proporciona por separado. ``` Arco report section transfer
Report studio

Choose report sections

Build an outline from the sections available to this workspace.

Available sections

Included in report

Select a section, then choose Include or Remove.

Prepared outline

No outline prepared yet.

HTML interpretation of Arco Transfer · Original sample sections · Local outline only, no analytics data exported

``` Referencia de código - La sección restringida del informe no se puede mover. Las filas seleccionadas y las secciones incluidas son estados distintos, de acuerdo con la diferencia explicada para Transfer nativo. ### Transferencia controlada de secciones del informe Transfer gestiona la pertenencia a los conjuntos de origen y destino, mientras que el estado de la aplicación almacena un esquema preparado por separado. Una fila restringida demuestra una opción deshabilitada sin pretender aplicar la autorización del servidor. ``` // npm install @arco-design/web-react react react-dom import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {Transfer,Button} from '@arco-design/web-react'; import '@arco-design/web-react/dist/css/arco.css'; const data = [ {key:'overview',value:'Executive overview'}, {key:'traffic',value:'Acquisition channels'}, {key:'retention',value:'Retention cohorts'}, {key:'revenue',value:'Revenue breakdown'}, {key:'raw',value:'Raw event export (restricted)',disabled:true} ]; function ReportBuilder(){ const [target,setTarget]=useState(['overview']); const [selected,setSelected]=useState([]); const [snapshot,setSnapshot]=useState([]); const [status,setStatus]=useState('Choose sections for a local report.'); return

Report sections

item.value.toLowerCase().includes(query.toLowerCase())} onSelectChange={(left,right)=>setSelected([...left,...right])} onChange={(keys,direction,moved)=>{ setTarget(keys);setSelected([]); setStatus(`${moved.length} section(s) moved to ${direction}. Draft only.`); }} />

{status}

Prepared outline

{snapshot.length ?
    {snapshot.map(key=>
  1. {data.find(item=>item.key===key).value}
    2. )}
:

No outline prepared yet.

}
; } createRoot(document.getElementById('root')).render(); ``` Referencia de código - La selección de casillas y la pertenencia al informe son matrices distintas. - El filtro personalizado no distingue entre mayúsculas y minúsculas. - Los datos de ejemplo son originales; no se cargan ni se exportan datos de análisis. La compilación nativa sigue siendo una comprobación de integración independiente. ## Arco Design: configuración del agente para el sistema de diseño ### Punto de partida para la implementación Importa una vez la hoja de estilos completa arco.css y monta el ejemplo de React en un elemento raíz. No mezcles este paquete de React con las importaciones de Arco Vue. ``` npm install @arco-design/web-react react react-dom ``` ### Una instrucción para tu proyecto ``` Usa Arco React Transfer con claves estables en dataSource y controla por separado targetKeys y selectedKeys. Proporciona un filtro que no distinga entre mayúsculas y minúsculas, acciones explícitas de inclusión y eliminación, y una instantánea preparada del esquema. Conserva la sintaxis de variables de Arco CSS y describe con honestidad la interpretación sin conexión. ``` ## Fuentes y alcance del sistema de diseño Arco Design Referencia independiente de OpenDesign. Datos originales del informe y vista previa solo local; las filas deshabilitadas no constituyen un límite de autorización. - Paquete de React Instalación y entrada de la hoja de estilos. - Tokens globales Dimensiones, espaciado y correspondencias semánticas. - Tema predeterminado Tipografía y movimiento. - Paleta Referencias de color verificadas. - Variables de CSS Nombres en tiempo de ejecución y selector oscuro. - Transfer de API Estado controlado y firmas de las funciones de retorno. ## Recursos relacionados con el sistema de diseño Arco Design ### Atlassian sistema de diseño Crea un tablero de planificación de incidencias con tokens semánticos de Atlassian, una escala de espaciado de ocho píxeles, las API reales de Button, Lozenge y Toggle, y la configuración de estilos requerida para Compiled. Consulta una incidencia, filtra el tablero y mueve un elemento de trabajo local sin confundir la selección con el estado. ### AWS Cloudscape Una guía de configuración de Cloudscape con tokens reales de actualización visual, espaciado que se adapta a la densidad, API controladas para formularios y un asistente funcional de dos pasos para crear recursos. ### Backbase sistema de diseño Crea un flujo de revisión bancaria con identidad de marca usando los módulos Angular de Backbase, la exportación de temas semánticos y estados de revisión explícitos. Compara las API web con las dimensiones nativas documentadas por separado. - [Referencia de implementación](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Fuente](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Fuente](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Fuente](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less) - [Fuente](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Fuente](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Referencia de código](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md) - [Referencia de código](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx) - [Paquete de React Instalación y entrada de la hoja de estilos.](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md) - [Tokens globales Dimensiones, espaciado y correspondencias semánticas.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less) - [Tema predeterminado Tipografía y movimiento.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less) - [Paleta Referencias de color verificadas.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less) - [Variables de CSS Nombres en tiempo de ejecución y selector oscuro.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less) - [Transfer de API Estado controlado y firmas de las funciones de retorno.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)