rlwj-lab/opsxsql
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(queries): MySQL 实例误调 Redis 接口 500 + 点表生成 SELECT + 光标多行闪烁

Browse Source 
=== 一、/queries 打开 MySQL 实例报 500 ===
现象：GET /api/v1/redis/5/dbs → 500
     后端日志 redis: invalid reply: "J\x00\x00\x00\n"
     （"J\x00\x00\x00" 是 MySQL 握手包，说明用 Redis 协议连了 3306）

根因：SchemaSidebar 是 mysql/redis 共用的组件，其中
        const redisDbs = useRedisDbs(Number(instanceId));
      是无条件调用（React hooks 不能条件调用），而 useRedisDbs 内部
      只看 instanceId 就请求 /redis/{id}/dbs →
      MySQL 实例也发 Redis 请求 → 后端用 Redis 协议连 MySQL → 500。

修复（前后端双保险）：
  1. useRedisDbs 增加 enabled 参数（默认 true），false 时不发请求并复位 [0]/false
  2. SchemaSidebar 传 isRedis：useRedisDbs(Number(instanceId), isRedis)
  3. redis.go getRedisClient 前置校验 DBType != "redis" 直接返回
  4. resp 包新增 UserFacingError / UserFacing()，InternalErr 识别后返回
     400 + 可读原因（不再把所有错误笼统包装成 500 "服务器内部错误"）

验证：
  GET /redis/5/dbs（MySQL）→ 400
    {"code":"bad_request","detail":"实例「pre-mysql-只读」的类型是 mysql，
     不是 redis。Redis 接口只适用于 redis 实例；MySQL/PostgreSQL 请使用
     /api/v1/instances/5/databases 等对应接口"}
  GET /instances/5/databases → 200
  GET /redis/4/dbs（Redis 集群）→ 200 {"cluster":true,"dbs":[0]}

=== 二、左侧栏点表不生成 SELECT ===
原交互：单击=展开/折叠，双击=执行 SELECT，Alt+点击=插入表名。
需求：单击表 → 在右侧编辑器生成 SELECT * FROM <db>.<table>

修复：
  1. SchemaSidebar 表节点：箭头图标包 data-chevron 单独触发展开/折叠；
     点表名区域 → onInsert(previewSelectSql(...) + ';\n')
     Alt+点击仍为只插表名；双击仍为直接执行
  2. QueriesPage onInsert：生成的文本以 SELECT 开头时「替换」编辑器内容
     （原来一律追加，会和上一条语句拼成非法 SQL）；表名/字段名仍追加

=== 三、SQL 编辑器光标同时在多行闪烁 ===
根因：.cm-cursor 强制了 height:1.25em !important + marginTop:0.15em，
     而 .cm-line 行高是 1.55em，光标高度溢出到相邻行，视觉上像两行同时闪。
修复：光标样式只保留颜色与 1.5px 宽度，height/marginTop 交回 CodeMirror 自行计算。

镜像：lghost/opsxsql:latest + v0.1
This commit is contained in:
opsx committed 2026-10-27 00:58:22 +00:00
1 parent 0427b87412
commit 36724bba94
6 files changed
+76 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

backend/internal/handler/redis.go
+12
View File
@@ -351,6 +351,18 @@ func writeRedisKeyValue(ctx context.Context, client *redisClientWrapper, key str
}
func getRedisClient(instance *model.Instance, db int) (*redisClientWrapper, error) {
// 防御：非 Redis 实例不能走 Redis 协议。
// 若前端误调 /api/v1/redis/:id/*（如共用组件的 MySQL 实例），
// 用 Redis 协议连 3306 会收到 MySQL 握手包，报
// `redis: invalid reply: "J\x00\x00\x00\n"` 并抛 500。
// 这里提前拦截，给出可读错误。
if instance.DBType != "redis" {
return nil, resp.UserFacing(fmt.Sprintf(
"实例「%s」的类型是 %s，不是 redis。Redis 接口只适用于 redis 实例；"+
"MySQL/PostgreSQL 请使用 /api/v1/instances/%d/databases 等对应接口",
instance.Name, instance.DBType, instance.ID))
}
password := instance.Password
// Decrypt if encrypted
if strings.HasPrefix(password, "enc:") {
backend/internal/handler/resp/resp.go
+19
View File
@@ -7,6 +7,7 @@
package resp
import (
"errors"
"log"
"net/http"
@@ -54,7 +55,25 @@ func Forbidden(c *gin.Context, detail string) { Fail(c, http.StatusForbidden,
func NotFound(c *gin.Context, detail string) { Fail(c, http.StatusNotFound, detail) }
// InternalErr 500：服务端 log 完整错误，客户端只收通用文案（防 DB/内部错误原文泄漏）
// UserFacingError 标记「可以展示给用户」的错误。
//
// 典型场景：调用方用错了接口/参数不满足前置条件（例如拿 MySQL 实例去调
// /api/v1/redis/:id/*），这既不是服务端故障也不该泄漏内部细节，
// 用 400 + 明确原因比 500 + "服务器内部错误" 更有助于定位。
type UserFacingError struct{ Msg string }
func (e *UserFacingError) Error() string { return e.Msg }
// UserFacing 构造一个可展示给用户的错误
func UserFacing(msg string) error { return &UserFacingError{Msg: msg} }
func InternalErr(c *gin.Context, err error) {
var uf *UserFacingError
if errors.As(err, &uf) {
log.Printf("[resp] bad request on %s %s: %v", c.Request.Method, c.Request.URL.Path, err)
c.JSON(http.StatusBadRequest, gin.H{"detail": uf.Msg, "code": "bad_request"})
return
}
log.Printf("[resp] internal error on %s %s: %v", c.Request.Method, c.Request.URL.Path, err)
c.JSON(http.StatusInternalServerError, gin.H{"detail": "服务器内部错误，请稍后重试", "code": "internal"})
}
frontend/src/components/SchemaSidebar.tsx
+20 -9
View File
@@ -93,7 +93,8 @@ export default function SchemaSidebar({
// -- Redis State(浏览逻辑在共享 RedisKeyBrowser,这里只留库选择与详情预览) --
const [redisDb, setRedisDb] = useState(0);
const redisDbs = useRedisDbs(Number(instanceId));
// 仅 Redis 实例才拉库列表，避免 MySQL/Mongo 也打到 /redis/:id/dbs
const redisDbs = useRedisDbs(Number(instanceId), isRedis);
const ctxMenu = useContextMenu();
const dialect: SqlDialect = dbType === 'postgresql' ? 'postgresql' : 'mysql';
@@ -407,22 +408,32 @@ export default function SchemaSidebar({
<div key={t.name}>
<button
onClick={(e) => {
// 点左侧箭头 → 展开/折叠；点表名区域 → 生成 SELECT 填进编辑器
const target = e.target as HTMLElement;
if (target.closest('[data-chevron]')) {
handleExpandTable(dbName, t.name);
return;
}
if (e.altKey) {
// Alt+点击：只插入表名，方便手写 SQL
onInsert(`${dbName}.${t.name}`);
} else {
handleExpandTable(dbName, t.name);
// 单击：生成 SELECT * FROM <db>.<table>; 到右侧查询编辑器
onInsert(`${previewSelectSql(t.name, dialect, dbName)};\n`);
}
}}
onDoubleClick={() => onExecuteSql?.(previewSelectSql(t.name, dialect, dbName))}
onContextMenu={(e) => ctxMenu.open(e, tableMenuItems(dbName, t.name))}
className="flex items-center gap-1.5 w-full px-2 py-1 text-[11px] hover:bg-[var(--dg-bg-hover)] transition-colors group"
title={`单击展开/折叠 · 双击查看数据 · Alt+点击插入表名 · 右键更多`}
>
{isTableExpanded ? (
<ChevronDown className="w-2.5 h-2.5 text-[var(--dg-text-muted)] flex-shrink-0" />
) : (
<ChevronRight className="w-2.5 h-2.5 text-[var(--dg-text-muted)] flex-shrink-0" />
)}
title={`单击生成 SELECT · 点箭头展开字段 · 双击直接查数据 · Alt+点击只插表名 · 右键更多`}
>
<span data-chevron className="flex-shrink-0 cursor-pointer">
{isTableExpanded ? (
<ChevronDown className="w-2.5 h-2.5 text-[var(--dg-text-muted)]" />
) : (
<ChevronRight className="w-2.5 h-2.5 text-[var(--dg-text-muted)]" />
)}
</span>
<Table2 className="w-2.5 h-2.5 text-blue-400 flex-shrink-0" />
<span className="font-mono truncate flex-1 text-left hover:text-blue-400 transition-colors">
{t.name}
frontend/src/components/SqlEditor.tsx
+3 -3
View File
@@ -306,12 +306,12 @@ const appTheme = EditorView.theme({
fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace",
lineHeight: '1.55',
},
// 光标只改颜色/粗细，不要强改 height 与 marginTop：
// CodeMirror 按行高自行计算光标高度，强制 1.25em + marginTop 会溢出到相邻行，
// 视觉上表现为「光标同时在两行闪烁」。
'.cm-cursor': {
borderLeftColor: 'var(--dg-text-primary)',
borderLeftWidth: '1.5px',
height: '1.25em !important',
marginTop: '0.15em',
boxSizing: 'border-box',
},
'.cm-line': {
lineHeight: '1.55',
frontend/src/features/redis/keyBrowser/useRedisKeyBrowser.ts
+17 -4
View File
@@ -151,13 +151,26 @@ export function useRedisKeyBrowser(instanceId: number, db: number): UseRedisKeyB
};
}
/** 库列表(集群恒 [0]);实例变化自动重拉 */
export function useRedisDbs(instanceId: number): { dbs: number[]; cluster: boolean } {
/** 库列表(集群恒 [0]);实例变化自动重拉。
*
* enabled=false 时不发请求 —— React hooks 不能条件调用，而 SchemaSidebar
* 是 mysql/redis 共用的组件，若不加此开关，打开 MySQL 实例也会去请求
* /redis/{id}/dbs，后端拿 Redis 协议连 MySQL 会收到 MySQL 握手包，
* 直接 500（redis: invalid reply）。调用方应传 dbType === 'redis'。
*/
export function useRedisDbs(
instanceId: number,
enabled = true,
): { dbs: number[]; cluster: boolean } {
const [dbs, setDbs] = useState<number[]>([0]);
const [cluster, setCluster] = useState(false);
useEffect(() => {
if (!instanceId) return;
if (!instanceId || !enabled) {
setDbs([0]);
setCluster(false);
return;
}
let cancelled = false;
redisApi
.getDbs(instanceId)
@@ -172,7 +185,7 @@ export function useRedisDbs(instanceId: number): { dbs: number[]; cluster: boole
return () => {
cancelled = true;
};
}, [instanceId]);
}, [instanceId, enabled]);
return { dbs, cluster };
}
frontend/src/pages/QueriesPage.tsx
+5
View File
@@ -456,7 +456,12 @@ export default function QueriesPage() {
onInsert={(text) => {
if (dbType === 'redis') {
setSql(text);
} else if (/^\s*SELECT\b/i.test(text)) {
// 左侧栏点表生成的 SELECT 语句：直接替换编辑器内容，
// 避免和上一条语句拼接成非法 SQL
setSql(text);
} else {
// 插入表名/字段名：追加到现有内容后
setSql((prev) => prev + (prev.trim() ? ' ' : '') + text + ' ');
}
}}