+
+
+
- {mode === 'tabs' && queryOptions.length !== 0 && (
-
-
+
+ {/* 显示当前笔记本名称 */}
+ {activeNotebook && (
+
+ {activeNotebook.name}
+
+ )}
+
+ {/* 返回欢迎页按钮 */}
+
+ }
+ onClick={closeNotebook}
+ style={{ marginLeft: 'auto' }}
+ >
+
+
+
- )}
-
+
+ {mode === 'tabs' && (
+ queryOptions.length !== 0 ? (
+
+
+
+ }
+ size="small"
+ shape="circle"
+ onClick={addNewCell}
+ className="tab-add-button"
+ style={{
+ flexShrink: 0,
+ boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+ marginLeft: '4px',
+ transition: 'all 0.3s ease',
+ transform: 'scale(1)',
+ }}
+ />
+
+
+ ) : (
+ null
+ )
+ )}
+
- {isEmpty &&
}
-
- {statements.map(item => {
- const { id, script, timestamp, language } = item;
- return (
-
: null}
+
+ {mode === 'flow' ? (
+
+ item.id)}
+ strategy={verticalListSortingStrategy}
+ >
+ {statements.map((item, index) => {
+ const { id, script, timestamp, language, graphId: cellGraphId } = item;
+ const isLastCell = index === statements.length - 1;
+ return (
+
+ handleFullscreen(id, isFullscreen)}
+ isFullscreen={fullscreenId === id}
+ graphs={availableGraphs}
+ onGraphChange={handleCellGraphChange}
+ style={{
+ display: fullscreenId === null || fullscreenId === id ? undefined : 'none',
+ }}
+ />
+
+ );
+ })}
+
+
+ ) : (
+ // tabs 模式下使用普通的 QueryCell 组件
+ statements.map(item => {
+ const { id, script, timestamp, language, graphId: cellGraphId } = item;
+ const index = statements.findIndex(s => s.id === id);
+ const isLastCell = index === statements.length - 1;
+ return (
+
+
+ handleFullscreen(id, isFullscreen)}
+ isFullscreen={fullscreenId === id}
+ graphs={availableGraphs}
+ onGraphChange={handleCellGraphChange}
+ onMoveUp={handleMoveUp}
+ onMoveDown={isLastCell ? undefined : handleMoveDown}
+ index={index} // 添加索引以供禁用第一个/最后一个单元格的上移/下移
+ style={{
+ display: fullscreenId === null || fullscreenId === id ? undefined : 'none',
+ }}
+ />
+
+
+ );
+ })
+ )}
+
+ {/* 添加新单元格按钮 - 仅当有活动的 notebook 时显示，并且在flow模式下或在tabs模式但没有标签时才显示 */}
+ {!isEmpty && (mode === 'flow' || (mode === 'tabs' && statements.length === 0)) && (
+
+ }
+ onClick={addNewCell}
+ type="dashed"
style={{
- ...statementStyles,
- visibility: id === activeId || mode === 'flow' ? 'visible' : 'hidden',
- flex: 1,
+ width: '100%',
+ height: '48px',
+ borderRadius: '8px',
+ fontSize: '14px',
+ color: token.colorTextSecondary,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
+ borderColor: token.colorBorder,
+ borderStyle: 'dashed',
+ borderWidth: '1px',
+ transition: 'all 0.3s ease',
}}
+ className="add-cell-button" // 添加类名以便于样式自定义
>
-
-
-
-
- );
- })}
+
+
+
+
+