feat(material): 新增材质系统和着色器编辑器
This commit is contained in:
yhh
193
packages/material-editor/src/styles/MaterialEditorPanel.css
Normal file
193
packages/material-editor/src/styles/MaterialEditorPanel.css
Normal file
@@ -0,0 +1,193 @@
|
||||
/**
|
||||
* Material Editor Panel Styles
|
||||
* 材质编辑器面板样式
|
||||
*/
|
||||
|
||||
.material-editor-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--bg-primary, #1e1e1e);
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.material-editor-panel.loading,
|
||||
.material-editor-panel.empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
color: var(--text-secondary, #888);
|
||||
}
|
||||
|
||||
.material-editor-panel.loading .spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.material-editor-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border-color, #333);
|
||||
background: var(--bg-secondary, #252526);
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.material-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dirty-indicator {
|
||||
color: var(--accent-color, #0078d4);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: var(--button-bg, #333);
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.toolbar-button:hover:not(:disabled) {
|
||||
background: var(--button-hover-bg, #444);
|
||||
}
|
||||
|
||||
.toolbar-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.material-editor-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* Property Section */
|
||||
.property-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-weight: 500;
|
||||
padding: 6px 0;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border-color, #333);
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
}
|
||||
|
||||
.property-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.property-row label {
|
||||
flex: 0 0 100px;
|
||||
color: var(--text-secondary, #888);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.property-row input,
|
||||
.property-row select {
|
||||
flex: 1;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color, #333);
|
||||
border-radius: 4px;
|
||||
background: var(--input-bg, #333);
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.property-row input:focus,
|
||||
.property-row select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color, #0078d4);
|
||||
}
|
||||
|
||||
.property-row.file-path span {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--text-secondary, #888);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.uniform-type {
|
||||
color: var(--text-tertiary, #666);
|
||||
font-size: 11px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.empty-uniforms {
|
||||
color: var(--text-secondary, #888);
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* Shader Selector */
|
||||
.shader-selector {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.shader-selector select {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* File Input Row */
|
||||
.file-input-row {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.file-input-row input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.browse-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color, #333);
|
||||
border-radius: 4px;
|
||||
background: var(--button-bg, #333);
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.browse-button:hover {
|
||||
background: var(--button-hover-bg, #444);
|
||||
}
|
||||
263
packages/material-editor/src/styles/MaterialInspector.css
Normal file
263
packages/material-editor/src/styles/MaterialInspector.css
Normal file
@@ -0,0 +1,263 @@
|
||||
/* MaterialInspector Styles */
|
||||
|
||||
.material-inspector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.material-dirty-indicator {
|
||||
color: #f59e0b;
|
||||
font-weight: bold;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.material-toolbar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border-color, #333);
|
||||
background: var(--panel-bg, #1e1e1e);
|
||||
}
|
||||
|
||||
.material-toolbar-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color, #444);
|
||||
border-radius: 4px;
|
||||
background: var(--button-bg, #2d2d2d);
|
||||
color: var(--text-color, #ccc);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.material-toolbar-btn:hover:not(:disabled) {
|
||||
background: var(--button-hover-bg, #3d3d3d);
|
||||
border-color: var(--accent-color, #0078d4);
|
||||
}
|
||||
|
||||
.material-toolbar-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.material-input {
|
||||
width: 100%;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color, #444);
|
||||
border-radius: 4px;
|
||||
background: var(--input-bg, #252525);
|
||||
color: var(--text-color, #ccc);
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.material-input:focus {
|
||||
border-color: var(--accent-color, #0078d4);
|
||||
}
|
||||
|
||||
.material-input::-webkit-inner-spin-button,
|
||||
.material-input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.material-select {
|
||||
width: 100%;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color, #444);
|
||||
border-radius: 4px;
|
||||
background: var(--input-bg, #252525);
|
||||
color: var(--text-color, #ccc);
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.material-select:focus {
|
||||
border-color: var(--accent-color, #0078d4);
|
||||
}
|
||||
|
||||
/* Uniforms section */
|
||||
.section-title-collapsible {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.section-title-collapsible:hover {
|
||||
color: var(--accent-color, #0078d4);
|
||||
}
|
||||
|
||||
.material-uniform-count {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.material-uniforms-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.material-uniform-item {
|
||||
padding: 8px;
|
||||
border: 1px solid var(--border-color, #333);
|
||||
border-radius: 4px;
|
||||
background: var(--item-bg, #1a1a1a);
|
||||
}
|
||||
|
||||
.material-uniform-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.material-uniform-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-color, #ccc);
|
||||
}
|
||||
|
||||
.material-type-select {
|
||||
width: auto;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.material-uniform-value {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Vector editor */
|
||||
.material-vec-editor {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.material-vec-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.material-vec-label {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
width: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.material-vec-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Color editor */
|
||||
.material-color-editor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.material-color-picker {
|
||||
width: 40px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border-color, #444);
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.material-color-picker::-webkit-color-swatch-wrapper {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.material-color-picker::-webkit-color-swatch {
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.material-alpha-input {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
/* Icon buttons */
|
||||
.material-icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--text-color, #888);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.material-icon-btn:hover:not(:disabled) {
|
||||
background: var(--button-hover-bg, #333);
|
||||
color: var(--text-color, #ccc);
|
||||
}
|
||||
|
||||
.material-icon-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.material-delete-btn:hover:not(:disabled) {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.material-add-btn:hover:not(:disabled) {
|
||||
color: #22c55e;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
}
|
||||
|
||||
/* Add uniform row */
|
||||
.material-add-uniform {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed var(--border-color, #333);
|
||||
}
|
||||
|
||||
.material-add-uniform .material-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Error and loading states */
|
||||
.material-error {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #ef4444;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.material-loading {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.material-value-text {
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
Reference in New Issue
Block a user