Skip to content

Commit dae59eb

Browse files
dolphin0618dolphin0618
committed
fix: dashboard ui
1 parent 1daf629 commit dae59eb

10 files changed

Lines changed: 54 additions & 39 deletions

File tree

‎src/frontend/platform/src/controllers/API/dashboard.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,8 @@ export async function queryChartData(params: {
212212
}))
213213
});
214214

215+
if (!resData?.value?.length) return null
216+
215217
const isStacked = !!component.data_config.stackDimension?.fieldId;
216218
const { dimensions, series } = isStacked
217219
? transformStackedData(resData)
@@ -221,7 +223,7 @@ export async function queryChartData(params: {
221223

222224
const chartType = params.component.type
223225

224-
// 根据图表类型返回对应的 mock 数据
226+
// 根据图表类型返回对应的 数据
225227
switch (chartType) {
226228
case ChartType.Bar:
227229
case ChartType.StackedBar:

‎src/frontend/platform/src/pages/Dashboard/components/charts/BaseChart.tsx‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -217,19 +217,21 @@ const getCartesianChartOption = (
217217
// Axis
218218
const xAxisTitleStyle = getTextStyle({
219219
fontSize: styleConfig.xAxisFontSize,
220-
color: styleConfig.xAxisColor
220+
color: styleConfig.xAxisColor,
221+
bold: styleConfig.xAxisBold
221222
});
222223
const yAxisTitleStyle = getTextStyle({
223224
fontSize: styleConfig.yAxisFontSize,
224-
color: styleConfig.yAxisColor
225+
color: styleConfig.yAxisColor,
226+
bold: styleConfig.yAxisBold
225227
});
226228

227229
// (Category Axis)
228230
const categoryAxis = {
229231
type: 'category',
230232
data: dimensions,
231-
show: styleConfig.showAxis ?? true,
232233
axisLabel: {
234+
show: styleConfig.showAxis ?? true,
233235
rotate: 0,
234236
interval: 'auto',
235237
formatter: function (value) {
@@ -245,21 +247,21 @@ const getCartesianChartOption = (
245247
// ...axisLabelStyle,
246248
},
247249
name: styleConfig.xAxisTitle || '',
248-
nameLocation: 'center',
250+
nameLocation: styleConfig.xAxisAlign === 'right' ? 'end' : styleConfig.xAxisAlign === 'left' ? 'start' : 'center',
249251
nameTextStyle: xAxisTitleStyle
250252
};
251253

252254
// (Value Axis)
253255
const valueAxis = {
254256
type: 'value',
255-
show: styleConfig.showAxis ?? true,
256257
axisLabel: {
258+
show: styleConfig.showAxis ?? true,
257259
formatter: (val: any) => unitConversion(val, dataConfig).join(''),
258260
color: '#666'
259261
},
260262
splitLine: { show: styleConfig.showGrid ?? true },
261263
name: styleConfig.yAxisTitle || '',
262-
nameLocation: 'center',
264+
nameLocation: styleConfig.yAxisAlign === 'right' ? 'end' : styleConfig.yAxisAlign === 'left' ? 'start' : 'center',
263265
nameRotate: isHorizontal ? 0 : 90,
264266
nameTextStyle: yAxisTitleStyle
265267
};
@@ -297,6 +299,7 @@ const getCartesianChartOption = (
297299
name: s.name,
298300
data: processedData,
299301
type: isLineOrArea ? 'line' : 'bar',
302+
symbol: 'none',
300303
itemStyle: {
301304
borderRadius: (!isLineOrArea && !isStacked)
302305
? (isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0])
@@ -309,7 +312,7 @@ const getCartesianChartOption = (
309312
}
310313
if (isStacked) item.stack = 'total';
311314
if (isArea) item.areaStyle = {};
312-
if (isLineOrArea) item.smooth = true;
315+
// if (isLineOrArea) item.smooth = true;
313316

314317
return item;
315318
});
@@ -362,12 +365,22 @@ const buildLegendOption = (styleConfig: ComponentStyleConfig, seriesNames?: stri
362365
if (styleConfig.showLegend === false) return undefined;
363366

364367
const pos = styleConfig.legendPosition || 'top';
368+
const align = styleConfig.legendAlign || 'auto';
369+
const isVertical = pos === 'left' || pos === 'right';
365370
// computed
366-
const orient = pos === 'left' || pos === 'right' ? 'vertical' : 'horizontal';
367-
const top = pos === 'top' ? 0 : pos === 'bottom' ? 'auto' : 'center';
368-
const bottom = pos === 'bottom' ? 0 : 'auto';
369-
const left = pos === 'left' ? 0 : pos === 'center' ? 'center' : 'auto';
370-
const right = pos === 'right' ? 0 : 'auto';
371+
const orient = isVertical ? 'vertical' : 'horizontal';
372+
const top = !isVertical
373+
? (pos === 'top' ? 0 : 'auto')
374+
: (align === 'left' ? 0 : (align === 'right' ? 'auto' : 'center'));
375+
const bottom = !isVertical
376+
? (pos === 'bottom' ? 0 : 'auto')
377+
: (align === 'right' ? 0 : 'auto');
378+
const left = isVertical
379+
? (pos === 'left' ? 0 : 'auto')
380+
: (align === 'left' ? 0 : (align === 'right' ? 'auto' : 'center'));
381+
const right = isVertical
382+
? (pos === 'right' ? 0 : 'auto')
383+
: (align === 'right' ? 0 : 'auto');
371384

372385
return {
373386
data: seriesNames, // Pie chart doesn't strictly need this, but Cartesian does

‎src/frontend/platform/src/pages/Dashboard/components/config/ChartSelector.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ export default function ChartSelector({
301301
}
302302

303303
return (
304-
<div className="border-r flex flex-col h-full w-[420px] shrink-0 bg-background relative">
304+
<div className="border-r flex flex-col h-full w-[440px] shrink-0 bg-background relative">
305305
{/* 标题区域 */}
306306
<div className="px-4 py-3 border-b flex items-center justify-between bg-muted/20">
307307
<div>

‎src/frontend/platform/src/pages/KnowledgePage/AdjustFilesUpload.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,7 @@ export default function AdjustFilesUpload() {
348348
/>
349349

350350
{/* Step 2 bottom buttons */}
351-
<div className="fixed bottom-2 right-12 flex gap-4 bg-white p-2 rounded-lg shadow-sm z-10">
351+
<div className="fixed bottom-2 right-12 flex gap-4 bg-background p-2 rounded-lg shadow-sm z-10">
352352
<Button
353353
className="h-8"
354354
variant="outline"

‎src/frontend/platform/src/pages/KnowledgePage/components/FileUploadStep2.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ const FileUploadStep2 = forwardRef(({
295295
) : null}
296296
</div >
297297

298-
<div className="fixed bottom-2 right-12 flex gap-4 bg-white p-2 rounded-lg shadow-sm z-10">
298+
<div className="fixed bottom-2 right-12 flex gap-4 bg-background p-2 rounded-lg shadow-sm z-10">
299299
<Button
300300
className="h-8"
301301
variant="outline"

‎src/frontend/platform/src/pages/KnowledgePage/components/MetadataManagementDialog.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,17 @@ interface BuiltInMetadata {
3030

3131
const BUILT_IN_METADATA: BuiltInMetadata[] = [
3232
{ name: "document_id", type: "Number" },
33-
{ name: "document_name", type: "String"},
34-
{ name: "upload_time", type: "Time"},
35-
{ name: "update_time", type: "Time"},
36-
{ name: "uploader", type: "String"},
37-
{ name: "updater", type: "String"},
38-
{ name: "abstract", type: "String"},
39-
{ name: "chunk_index", type: "Number"},
40-
{ name: "bbox", type: "String"},
41-
{ name: "page", type: "Number"},
42-
{ name: "knowledge_id", type: "Number"},
43-
{ name: "user_metadata", type: "String"},
33+
{ name: "document_name", type: "String" },
34+
{ name: "upload_time", type: "Time" },
35+
{ name: "update_time", type: "Time" },
36+
{ name: "uploader", type: "String" },
37+
{ name: "updater", type: "String" },
38+
{ name: "abstract", type: "String" },
39+
{ name: "chunk_index", type: "Number" },
40+
{ name: "bbox", type: "String" },
41+
{ name: "page", type: "Number" },
42+
{ name: "knowledge_id", type: "Number" },
43+
{ name: "user_metadata", type: "String" },
4444
]
4545

4646
const TYPE_ICONS = {
@@ -402,10 +402,10 @@ export function MetadataManagementDialog({
402402
<DialogHeader>
403403
<DialogTitle className={isSmallScreen ? "text-base" : ""}>{t('metaData')}</DialogTitle>
404404
</DialogHeader>
405-
<div className="space-y-6">
405+
<div className="meta-dialog space-y-6">
406406
<button
407407
onClick={handleCreateClick} disabled={!hasManagePermission}
408-
className={cname("w-full flex items-center justify-center gap-2 rounded-lg bg-gray-100 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors", isSmallScreen ? "py-2" : "py-3")}
408+
className={cname("w-full flex items-center justify-center gap-2 rounded-lg bg-muted hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed transition-colors", isSmallScreen ? "py-2" : "py-3")}
409409
>
410410
<Plus size={isSmallScreen ? 16 : 20} />
411411
<span>{t('createMetadata')}</span>
@@ -415,7 +415,7 @@ export function MetadataManagementDialog({
415415
{sortedMetadata.map((metadata) => (
416416
<div
417417
key={metadata.id}
418-
className={cname("flex items-center justify-between bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", isSmallScreen ? "p-2 gap-2" : "p-3 gap-3")}
418+
className={cname("flex items-center justify-between rounded-lg bg-muted hover:bg-accent transition-colors", isSmallScreen ? "p-2 gap-2" : "p-3 gap-3")}
419419
>
420420
<div className="flex items-center gap-2 flex-1">
421421
<span className={isSmallScreen ? "text-base" : "text-lg"}>{TYPE_ICONS[metadata.type]}</span>
@@ -481,10 +481,10 @@ export function MetadataManagementDialog({
481481
</div>
482482
</div>
483483
<div className="space-y-2">
484-
{ BUILT_IN_METADATA.slice(0, 6).map((metadata) => (
484+
{BUILT_IN_METADATA.slice(0, 6).map((metadata) => (
485485
<div
486486
key={metadata.name}
487-
className={cname("flex items-center bg-gray-50 rounded-lg", isSmallScreen ? "p-2 gap-2" : "p-3 gap-3")}
487+
className={cname("flex items-center bg-muted rounded-lg", isSmallScreen ? "p-2 gap-2" : "p-3 gap-3")}
488488
>
489489
<span className={isSmallScreen ? "text-base" : "text-lg"}>{TYPE_ICONS[metadata.type]}</span>
490490
<span className={cname("text-gray-500", isSmallScreen ? "text-xs" : "text-sm")}>{metadata.type}</span>

‎src/frontend/platform/src/pages/KnowledgePage/components/PreviewParagraph.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const MarkdownView = ({ noHead = false, data }) => {
2020
// 新增：使用knowledge命名空间的国际化
2121
const { t } = useTranslation('knowledge');
2222

23-
return <div className="p-4 bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md hover:border-primary transition-shadow w-full">
23+
return <div className="p-4 bg-main rounded-lg shadow-sm border border-gray-200 hover:shadow-md hover:border-primary transition-shadow w-full">
2424
{!noHead && <p className="text-sm text-gray-500 flex gap-2 mb-1">
2525
<span>{t('chunk')}{data.chunkIndex + 1}</span>
2626
<span>-</span>

‎src/frontend/platform/src/pages/KnowledgePage/components/RuleTable.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export default function RuleTable({
133133

134134
{applyEachCell ? (
135135
<div>
136-
<div className="relative after:absolute after:inset-0 after:bg-gray-100/50 after:z-10 after:pointer-events-none">
136+
<div className="relative after:absolute after:inset-0 after:bg-accent/50 after:z-10 after:pointer-events-none">
137137
{/* 当 showPreview 为 true 时使用垂直布局，否则保持原有水平布局 */}
138138
<div className={showPreview ? "flex flex-col p-4 border rounded-lg text-sm" : "flex items-center justify-between p-4 border rounded-lg text-sm"}>
139139
{/* 第一行：始终显示标题 */}
@@ -194,8 +194,8 @@ export default function RuleTable({
194194
</div>
195195
</div>
196196
{/* splice rule */}
197-
<div className="space-y-4 mt-4 p-4 border rounded-lg bg-white shadow-sm">
198-
<h3 className="text-md font-bold text-gray-800 text-left">
197+
<div className="space-y-4 mt-4 p-4 border rounded-lg bg-main shadow-sm">
198+
<h3 className="text-md font-bold text-foreground text-left">
199199
{t('splitMethod')}
200200
</h3>
201201
<div className="relative mt-2 pr-2 overflow-y-auto max-h-[440px]">

‎src/frontend/platform/src/pages/KnowledgePage/filesUpload.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,7 @@ export default function FilesUpload() {
302302
<Button
303303
variant="outline"
304304
size="icon"
305-
className="bg-[#fff] size-8"
305+
className="bg-main size-8"
306306
onClick={() => navigate(-1)}
307307
>
308308
<ChevronLeft />
@@ -383,7 +383,7 @@ export default function FilesUpload() {
383383
/>
384384

385385
{/* Step 3 bottom buttons */}
386-
<div className="fixed bottom-2 right-12 flex gap-4 bg-white p-2 rounded-lg shadow-sm z-10">
386+
<div className="fixed bottom-2 right-12 flex gap-4 bg-background p-2 rounded-lg shadow-sm z-10">
387387
<Button variant="outline" onClick={handleBack}>
388388
{t('previousStep')}
389389
</Button>

‎src/frontend/platform/src/store/dashboardStore.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export const useEditorDashboardStore = create<EditorState>((set, get) => ({
125125
x: 0,
126126
y: maxY,
127127
w: ChartType.Metric === component.type ? 4 : 8,
128-
h: [ChartType.Query, ChartType.Metric].includes(component.type) ? 2 : 8,
128+
h: [ChartType.Query, ChartType.Metric].includes(component.type) ? 3 : 8,
129129
minW: ChartType.Query === component.type ? 7 : 3,
130130
minH: [ChartType.Query, ChartType.Metric].includes(component.type) ? 2 : 5,
131131
maxH: 24,

0 commit comments

Comments
 (0)