@wiajs/ui/dist/jsonView/index.less

wia app ui packages

.json-view-box {
  display: flex;
  .editor-panel,
  .preview-panel {
    flex: 1;
    min-width: 300px;
    background: white;
    border-radius: 10px;
    // padding: 20px;
    // box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
  }

  h2 {
    color: #3498db;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  .btn {
    padding: 10px 15px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .btn:hover {
    background: #2980b9;
  }

  .btn-format {
    background: #2ecc71;
  }

  .btn-format:hover {
    background: #27ae60;
  }

  .btn-minify {
    background: #e67e22;
  }

  .btn-minify:hover {
    background: #d35400;
  }

  .btn-clear {
    background: #e74c3c;
  }

  .btn-clear:hover {
    background: #c0392b;
  }

  .btn-validate {
    background: #9b59b6;
  }

  .btn-validate:hover {
    background: #8e44ad;
  }
  /* 编辑器容器，包含行号和文本区域 */
  .editor-container {
    display: flex;
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    max-height: 400px;
  }
  .line-numbers {
    width: 50px;
    padding: 15px 5px;
    background-color: #f0f0f0;
    border-right: 1px solid #ddd;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    text-align: right;
    overflow: hidden;
    user-select: none;
    color: #888;
  }

  .line-number {
    height: 21px; /* 与行高匹配 */
  }
  .editor {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    max-height: 400px;
  }

  .preview {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    overflow: auto;
    max-height: 400px;
    background: #f9f9f9;
  }

  .error {
    color: #e74c3c;
    font-weight: bold;
    margin-top: 10px;
  }

  .success {
    color: #2ecc71;
    font-weight: bold;
    margin-top: 10px;
  }

  .json-key {
    color: #e74c3c;
  }

  .json-string {
    color: #2ecc71;
  }

  .json-number {
    color: #3498db;
  }

  .json-boolean {
    color: #9b59b6;
  }

  .json-null {
    color: #7f8c8d;
  }

  .status-bar {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 14px;
  }

  .file-input {
    display: none;
  }

  .file-label {
    padding: 10px 15px;
    background: #7f8c8d;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .file-label:hover {
    background: #636e72;
  }

  .theme-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
  }

  .theme-btn {
    padding: 8px 12px;
    background: #ddd;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  .theme-btn.active {
    background: #3498db;
    color: white;
  }

  .tree-view {
    padding-left: 20px;
  }

  .tree-item {
    margin: 5px 0;
  }

  .collapsible {
    cursor: pointer;
  }

  .collapsible:before {
    content: '►';
    font-size: 10px;
    margin-right: 5px;
  }

  .collapsible.expanded:before {
    content: '▼';
  }

  .children {
    padding-left: 20px;
    display: none;
  }

  .expanded + .children {
    display: block;
  }

  @media (max-width: 768px) {
    .content {
      flex-direction: column;
    }

    .controls {
      flex-direction: column;
      align-items: stretch;
    }

    .btn {
      width: 100%;
      justify-content: center;
    }
  }
}