今天真是破防的一天,Ant design Pro V6做ProList调试的时候直接崩溃

image

<ProList<API.Chart>
          itemLayout="vertical"
          rowKey="id"
          dataSource={chart1}
          // 1. 配置分页
          pagination={{
            current: currentPage,
            pageSize: 1,
            total: total,
            showSizeChanger: false,
            showQuickJumper: false,
            onChange: (page) => {
              setCurrentPage(page);
              fetchData();
            },
          }}
          // 2. 搜索配置 - 内置搜索栏,对应图中的搜索框
          search={{
            filterType: 'query',      // 查询模式
            searchText: '搜索图表',    // 搜索框占位文字
            labelWidth: 'auto',
          }}
          columns={columns}
          renderItem={(item: any, index) => (
            <div
              key={item.id}
              style={{
                background: '#fff',
                borderRadius: 12,
                marginBottom: 16,
                padding: 20,
                boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
              }}
            >
              {/* 桌面端:左右布局 */}
              <div className="chart-card-desktop" style={{ display: 'flex', gap: 24, alignItems: 'flex-start' }}>
                {/* 左侧信息 */}
                <div className="chart-info" style={{ flex: 1 }}>
                  <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 8 }}>
                    {item.name || '未命名图表'}
                  </div>
                  <div style={{ fontSize: 13, color: '#8c8c8c', marginBottom: 12 }}>
                    图表类型:{item.chartType || '未定义'}
                  </div>
                  <div style={{
                    background: '#f6f9ff',
                    padding: '12px 16px',
                    borderRadius: 8,
                  }}>
                    <div style={{ fontSize: 12, color: '#1890ff', marginBottom: 4 }}>
                      分析目标
                    </div>
                    <div style={{ fontSize: 13, color: '#262626' }}>
                      {item.goal || '未设置'}
                    </div>
                  </div>
                </div>

                {/* 右侧图表:占60%宽度 */}
                <div className="chart-wrapper" style={{ flex: '0 0 60%', minWidth: 0 }}>
                  {options ? (
                    <ReactECharts option={options} style={{ height: 300, width: '100%' }} />
                  ) : (
                    <div style={{
                      height: 300,
                      background: '#fafafa',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      borderRadius: 8,
                      color: '#bfbfbf'
                    }}>
                      请先在左侧进行提交
                    </div>
                  )}
                  {chartResult && (
                    <div style={{
                      marginTop: 12,
                      fontSize: 13,
                      color: '#595959',
                      background: '#f9f9f9',
                      padding: '10px 12px',
                      borderRadius: 6
                    }}>
                      <span style={{ color: '#1890ff' }}>总结:</span>
                      {chartResult}
                    </div>
                  )}
                </div>
              </div>

              {/* 手机端:上下布局(默认隐藏,通过媒体查询显示) */}
              <div className="chart-card-mobile" style={{ display: 'none' }}>
                {/* 上方信息 */}
                <div style={{ marginBottom: 16 }}>
                  <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 8 }}>
                    {item.name || '未命名图表'}
                  </div>
                  <div style={{ fontSize: 13, color: '#8c8c8c', marginBottom: 12 }}>
                    图表类型:{item.chartType || '未定义'}
                  </div>
                  <div style={{
                    background: '#f6f9ff',
                    padding: '12px 16px',
                    borderRadius: 8,
                    marginBottom: 16
                  }}>
                    <div style={{ fontSize: 12, color: '#1890ff', marginBottom: 4 }}>
                      分析目标
                    </div>
                    <div style={{ fontSize: 13, color: '#262626' }}>
                      {item.goal || '未设置'}
                    </div>
                  </div>
                </div>

                {/* 下方图表 */}
                <div>
                  {options ? (
                    <ReactECharts option={options} style={{ height: 300, width: '100%' }} />
                  ) : (
                    <div style={{
                      height: 300,
                      background: '#fafafa',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      borderRadius: 8,
                      color: '#bfbfbf'
                    }}>
                      请先在左侧进行提交
                    </div>
                  )}
                  {chartResult && (
                    <div style={{
                      marginTop: 12,
                      fontSize: 13,
                      color: '#595959',
                      background: '#f9f9f9',
                      padding: '10px 12px',
                      borderRadius: 6
                    }}>
                      <span style={{ color: '#1890ff' }}>总结:</span>
                      {chartResult}
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}
        />

我就做了一个简单的看板,分页搜索功能加上,仅此而已。

它居然oom了!!!

解决方案明天想吧,累了。

posted @ 2026-03-30 00:08  曦灰  阅读(16)  评论(0)    收藏  举报