style: Redis查询结果展示优化 — 列宽加大/字体12px/raw区500px
This commit is contained in:
1 parent
c18fc9bd70
commit
471221fc47
1 file changed
+12
-4
@@ -506,7 +506,7 @@ export default function QueriesPage() {
|
|||||||
<div className="text-xs text-[var(--dg-text-muted)] mb-2 font-mono">{result.raw_key}</div>
|
<div className="text-xs text-[var(--dg-text-muted)] mb-2 font-mono">{result.raw_key}</div>
|
||||||
)}
|
)}
|
||||||
<div className="relative group">
|
<div className="relative group">
|
||||||
<pre className={`text-sm leading-relaxed overflow-auto max-h-[450px] p-3 rounded-lg font-mono ${
|
<pre className={`text-sm leading-relaxed overflow-auto max-h-[500px] p-4 rounded-lg font-mono ${
|
||||||
result.raw_value
|
result.raw_value
|
||||||
? 'bg-[var(--dg-bg-primary)] text-blue-300 whitespace-pre-wrap break-all'
|
? 'bg-[var(--dg-bg-primary)] text-blue-300 whitespace-pre-wrap break-all'
|
||||||
: 'bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] whitespace-pre-wrap break-all'
|
: 'bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] whitespace-pre-wrap break-all'
|
||||||
@@ -524,7 +524,9 @@ export default function QueriesPage() {
|
|||||||
<th className="text-left px-3 py-2 font-semibold text-xs text-[var(--dg-text-muted)] w-10">#</th>
|
<th className="text-left px-3 py-2 font-semibold text-xs text-[var(--dg-text-muted)] w-10">#</th>
|
||||||
{result.columns.map(col => (
|
{result.columns.map(col => (
|
||||||
<th key={col} onClick={() => handleSort(col)}
|
<th key={col} onClick={() => handleSort(col)}
|
||||||
className="text-left px-3 py-2 font-semibold text-xs cursor-pointer hover:text-blue-400 transition-colors select-none whitespace-nowrap">
|
className={`text-left px-4 py-2 font-semibold text-xs cursor-pointer hover:text-blue-400 transition-colors select-none ${
|
||||||
|
dbType === 'redis' ? 'min-w-[200px]' : 'whitespace-nowrap'
|
||||||
|
}`}>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
{col} <SortIcon col={col} />
|
{col} <SortIcon col={col} />
|
||||||
{result.masked_columns?.includes(col) && (
|
{result.masked_columns?.includes(col) && (
|
||||||
@@ -547,9 +549,15 @@ export default function QueriesPage() {
|
|||||||
const cellValue = row[col] ?? '';
|
const cellValue = row[col] ?? '';
|
||||||
const { text: displayText, isJson } = formatCellValue(cellValue);
|
const { text: displayText, isJson } = formatCellValue(cellValue);
|
||||||
return (
|
return (
|
||||||
<td key={col} className={`px-3 py-2 text-xs ${isJson ? 'max-w-[500px] whitespace-pre-wrap break-all font-mono text-[11px] leading-relaxed' : 'whitespace-pre-wrap break-words'}`} title={String(cellValue)}>
|
<td key={col} className={`px-4 py-2.5 text-xs ${
|
||||||
|
isJson
|
||||||
|
? 'max-w-[600px] whitespace-pre-wrap break-all font-mono text-[12px] leading-relaxed text-blue-300'
|
||||||
|
: dbType === 'redis'
|
||||||
|
? 'whitespace-pre-wrap break-all font-mono text-[12px]'
|
||||||
|
: 'whitespace-pre-wrap break-words'
|
||||||
|
}`} title={String(cellValue)}>
|
||||||
{isMasked ? <span className="text-yellow-400 italic">{String(cellValue)}</span> :
|
{isMasked ? <span className="text-yellow-400 italic">{String(cellValue)}</span> :
|
||||||
isJson ? <span className="text-blue-300">{displayText}</span> :
|
isJson ? displayText :
|
||||||
String(cellValue)}
|
String(cellValue)}
|
||||||
</td>
|
</td>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in new issue
Block a user