AI 辅助完成复杂任务的亲身体验：使用Qoder 3 天完成 OneCode UI 升级

/* Qoder引用知乎原文的色彩变量，建议直接复用 */
:root {
  --qoder-primary: #1890ff;
  --qoder-primary-light: #40a9ff;
  --qoder-success: #52c41a;
  --qoder-bg-base: #ffffff;
  --qoder-text-primary: #262626;
}

// Qoder生成的XUI Panel组件（中度解耦版）
xui.UI.OneCodePanel = xui.Class(xui.UI.Panel, {
  $Appearances: {
    'panel': {
      'background-color': 'var(--qoder-bg-base)',
      'border-radius': '8px',
      'box-shadow': '0 2px 8px var(--qoder-shadowColor)',
      // 新增悬停动画，对齐现代体验
      'transition': 'all 0.3s ease',
      '&:hover': { 'box-shadow': '0 4px 16px var(--qoder-shadowColor)' }
    },
    'panel-header': {
      'padding': '16px 20px',
      'border-bottom': '1px solid var(--qoder-borderColor)',
      'font-weight': '600'
    }
  },
  $Template: {
    'panel': '<div class="qoder-panel"><div class="qoder-panel__header">{header}</div><div class="qoder-panel__body">{content}</div></div>'
  },
  // 保留原有业务逻辑接口，避免冲突
  $EventHandlers: {
    'onClick': function(e) {
      this.fireEvent('panelClick', e); // 触发外部业务事件
    }
  }
});

// Qoder生成的XUI设计器拖拽逻辑（适配OneCode）
xui.UI.OneCodeDesigner = xui.Class(xui.UI.Designer, {
  onDragStart(e) {
    // 新增拖拽预览（原文的createDragPreview优化）
    this.dragPreview = document.createElement('div');
    this.dragPreview.className = 'qoder-drag-preview';
    this.dragPreview.innerHTML = e.target.querySelector('.xui-component__name').innerText;
    document.body.appendChild(this.dragPreview);
    
    // 初始化对齐辅助线（参考原文的OneCodeAlignmentGuides）
    this.alignmentGuides = new xui.Utils.AlignmentGuides({
      canvas: this.canvas,
      color: 'var(--qoder-primary)', // 用设计系统主色
      thickness: 2
    });
  },
  onDragMove(e) {
    // 实时更新预览位置
    this.dragPreview.style.left = `${e.clientX + 10}px`;
    this.dragPreview.style.top = `${e.clientY + 10}px`;
    
    // 智能对齐（比原文多支持“垂直居中”对齐）
    this.alignmentGuides.update({
      x: e.clientX,
      y: e.clientY,
      componentSize: { width: e.target.offsetWidth, height: e.target.offsetHeight }
    });
  },
  onDragEnd(e) {
    // 复用原文的addComponentToCanvas逻辑
    this.addComponentToCanvas(e);
    // 新增操作历史记录（支持撤销）
    this.pushToHistory('dragComponent', {
      componentId: e.target.dataset.id,
      position: { x: e.clientX, y: e.clientY }
    });
    // 清理预览与辅助线
    this.dragPreview.remove();
    this.alignmentGuides.destroy();
  }
});

// Qoder修复的XUI图表主题适配
xui.UI.OneCodeChart = xui.Class(xui.UI.FusionChartsXT, {
  $Appearances: {
    'chart': {
      'background-color': 'var(--qoder-bg-base)',
      'text-color': 'var(--qoder-text-primary)'
    }
  },
  // 新增主题变更监听（参考原文的themeChanged事件）
  $Init: function() {
    const _this = this;
    xui.on('themeChanged', function(ev) {
      const theme = ev.theme;
      const chart = _this.getFusionChartInstance();
      // 同步更新图表颜色
      chart.setChartAttribute({
        'bgColor': getComputedStyle(document.documentElement).getPropertyValue('--qoder-bg-base'),
        'textColor': getComputedStyle(document.documentElement).getPropertyValue('--qoder-text-primary')
      });
    });
  }
});

/* Qoder生成的XUI设计器响应式样式（对齐原文断点） */
.qoder-designer {
  display: grid;
  grid-template-columns: 240px 1fr 280px;
  grid-template-rows: 60px 1fr;
  grid-template-areas: "toolbar toolbar toolbar" "sidebar canvas properties";
  height: 100vh;
}

/* 平板端（768px~992px）：隐藏properties面板，点击按钮展开 */
@media (max-width: var(--qoder-breakpoint-lg)) and (min-width: var(--qoder-breakpoint-md)) {
  .qoder-designer {
    grid-template-columns: 200px 1fr;
    grid-template-areas: "toolbar toolbar" "sidebar canvas";
  }
  .qoder-properties {
    position: fixed;
    top: 60px;
    right: 0;
    width: 280px;
    height: calc(100vh - 60px);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  .qoder-properties.active { transform: translateX(0); }
}

/* 移动端（<768px）：侧边栏与properties均用抽屉式 */
@media (max-width: var(--qoder-breakpoint-md)) {
  .qoder-designer {
    grid-template-columns: 1fr;
    grid-template-areas: "toolbar" "canvas";
  }
  .qoder-sidebar, .qoder-properties {
    position: fixed;
    top: 60px;
    width: 80%;
    height: calc(100vh - 60px);
    transform: translateX(-100%);
  }
  .qoder-properties {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  /* 触控优化：增大XUI组件的点击区域 */
  .qoder-component {
    min-width: 44px;
    min-height: 44px;
  }
}

// Qoder生成的XUI组件懒加载（参考原文）
const OneCodeComponentLoader = {
  registry: new Map(),
  register: function(name, loader) {
    this.registry.set(name, loader);
  },
  load: function(name) {
    const loader = this.registry.get(name);
    if (!loader) throw new Error(`XUI组件${name}未注册`);
    return loader();
  }
};

// 注册大型组件（如设计器中的代码编辑器）
OneCodeComponentLoader.register('CodeEditor', () => {
  return import('/static/components/xui/CodeEditor.js')
    .then(module => module.default);
});

// 页面中按需加载
document.querySelector('#open-code-editor').addEventListener('click', async () => {
  const CodeEditor = await OneCodeComponentLoader.load('CodeEditor');
  new CodeEditor({ target: '#editor-container' });
});