lxy/u-desk

Private

Public Access

Fork 0

Files

绝尘 6eaaa56eb6 新增：文档体系重构+CHANGELOG补充+发布产物清理

2026-05-01 22:22:06 +08:00

18 KiB

Raw Blame History

表结构查看功能实现说明

功能概述

表结构查看功能已完成，用户可以查看 MySQL 表、MongoDB 集合、Redis Key 的详细结构和信息。

实现内容

1. 后端实现（Go）

MySQL 表结构查询

文件: go-desk/internal/dbclient/mysql.go

// GetTableStructure 获取表结构
func (c *MySQLClient) GetTableStructure(ctx context.Context, database, tableName string) ([]map[string]interface{}, error) {
	var columns []map[string]interface{}

	query := "DESCRIBE "
	if database != "" {
		query += fmt.Sprintf("`%s`.", database)
	}
	query += fmt.Sprintf("`%s`", tableName)

	err := c.db.Raw(query).Scan(&columns).Error
	if err != nil {
		return nil, fmt.Errorf("获取表结构失败: %v", err)
	}

	// 转换为统一格式
	for _, col := range columns {
		// 确保字段存在
		if _, ok := col["Field"]; !ok {
			col["Field"] = ""
		}
		if _, ok := col["Type"]; !ok {
			col["Type"] = ""
		}
		if _, ok := col["Null"]; !ok {
			col["Null"] = "NO"
		}
		if _, ok := col["Key"]; !ok {
			col["Key"] = ""
		}
		if _, ok := col["Default"]; !ok {
			col["Default"] = nil
		}
		if _, ok := col["Extra"]; !ok {
			col["Extra"] = ""
		}
	}

	return columns, nil
}

// GetIndexes 获取索引列表
func (c *MySQLClient) GetIndexes(ctx context.Context, database, tableName string) ([]map[string]interface{}, error) {
	var indexes []map[string]interface{}

	query := "SHOW INDEX FROM "
	if database != "" {
		query += fmt.Sprintf("`%s`.", database)
	}
	query += fmt.Sprintf("`%s`", tableName)

	err := c.db.Raw(query).Scan(&indexes).Error
	if err != nil {
		return nil, fmt.Errorf("获取索引列表失败: %v", err)
	}

	return indexes, nil
}

字段说明：

Field: 字段名
Type: 字段类型（int, varchar, text, datetime, etc.）
Null: 是否允许 NULL
Key: 是否主键
Default: 默认值
Extra: 额外信息

MongoDB 集合结构查询

文件: go-desk/internal/dbclient/mongo.go

// GetCollectionStructure 获取集合结构
func (c *MongoClient) GetCollectionStructure(ctx context.Context, database, collectionName string) (map[string]interface{}, error) {
	coll := c.client.Database(database).Collection(collectionName)

	result := map[string]interface{}{
		"database":   database,
		"collection": collectionName,
		"sampleDocs": []map[string]interface{}{},
		"fieldStats":  map[string]int{},
	}

	// 获取文档示例（最多 5 个）
	cursor, err := coll.Find(ctx, bson.M{}).Limit(5)
	if err != nil {
		return nil, fmt.Errorf("获取文档示例失败: %v", err)
	}
	defer cursor.Close(ctx)

	var docs []bson.M
	if err = cursor.All(ctx, &docs); err != nil {
		return nil, fmt.Errorf("解析文档失败: %v", err)
	}

	// 转换为 map
	for _, doc := range docs {
		docMap := make(map[string]interface{})
		for k, v := range doc {
			docMap[k] = v
		}
		result["sampleDocs"] = append(result["sampleDocs"].([]map[string]interface{}), docMap)
	}

	// 字段统计
	fieldCount := make(map[string]int)
	for _, doc := range docs {
		for key := range doc {
			fieldCount[key]++
		}
	}
	result["fieldStats"] = fieldCount

	// 文档总数
	count, err := coll.CountDocuments(ctx, bson.M{})
	if err != nil {
		return nil, fmt.Errorf("获取文档数量失败: %v", err)
	}
	result["documentCount"] = count

	// 索引信息
	cursor, err = coll.Indexes().ListSpecifications(ctx)
	if err != nil {
		return nil, fmt.Errorf("获取索引信息失败: %v", err)
	} else {
		var indexes []map[string]interface{}
		for cursor.Next(ctx) {
			spec := cursor.Current
			indexes = append(indexes, map[string]interface{}{
				"name":   spec.Name,
				"unique": spec.Unique,
				"keys":   spec.Keys,
			})
		}
		cursor.Close(ctx)
		result["indexes"] = indexes
	}

	return result, nil
}

// CountDocuments 获取文档数量
func (c *MongoClient) CountDocuments(ctx context.Context, database, collectionName string) (int64, error) {
	coll := c.client.Database(database).Collection(collectionName)
	count, err := coll.CountDocuments(ctx, bson.M{})
	return count, err
}

返回数据：

database: 数据库名
collection: 集合名
sampleDocs: 文档示例（最多 5 个）
fieldStats: 字段统计
documentCount: 文档总数
indexes: 索引列表

Redis Key 详细信息

文件: go-desk/internal/dbclient/redis.go

// GetKeyInfo 获取 Key 详细信息
func (c *RedisClient) GetKeyInfo(ctx context.Context, key string) (map[string]interface{}, error) {
	info := map[string]interface{}{
		"key":   key,
		"type":  "",
		"value":  nil,
		"ttl":   0,
		"length": 0,
	}

	// 获取 Key 类型
	keyType, err := c.GetKeyType(ctx, key)
	if err != nil {
		return nil, fmt.Errorf("获取 Key 类型失败: %v", err)
	}
	info["type"] = keyType

	// 获取 TTL
	ttl, err := c.GetTTL(ctx, key)
	if err != nil {
		return nil, fmt.Errorf("获取 TTL 失败: %v", err)
	}
	info["ttl"] = ttl.Seconds()

	// 获取 Key 值（限制大小，避免过大）
	value, err := c.GetKeyValue(ctx, key)
	if err != nil {
		return nil, fmt.Errorf("获取 Key 值失败: %v", err)
	}
	info["value"] = formatValuePreview(value)

	// 获取 Key 长度（使用 STRLEN、HLEN、SCARD、ZCARD）
	var keyLength int64
	switch keyType {
	case "string":
		keyLength, err = c.client.StrLen(ctx, key).Result()
	case "list":
		keyLength, err = c.client.LLen(ctx, key).Result()
	case "set":
		keyLength, err = c.client.SCard(ctx, key).Result()
	case "zset":
		keyLength, err = c.client.ZCard(ctx, key).Result()
	case "hash":
		keyLength, err = c.client.HLen(ctx, key).Result()
	}
	if err == nil {
		info["length"] = keyLength
	}

	return info, nil
}

// formatValuePreview 格式化值预览（限制长度）
func formatValuePreview(value interface{}) string {
	if value == nil {
		return ""
	}

	const maxPreviewLength = 200
	valueStr := fmt.Sprintf("%v", value)
	if len(valueStr) > maxPreviewLength {
		valueStr = valueStr[:maxPreviewLength] + "..."
	}

	return valueStr
}

返回数据：

key: Key 名称
type: 数据类型（string, list, set, zset, hash）
value: 值预览（最多 200 字符）
ttl: 过期时间（秒）
length: 数据长度（string 为字符数，list/set/zset/hash 为元素数）

应用层 API

文件: go-desk/app.go

// GetTableStructure 获取表结构
func (a *App) GetTableStructure(connectionId uint, database, tableName string) (map[string]interface{}, error) {
	ctx, cancel := context.WithTimeout(a.ctx, 30*time.Second)
	defer cancel()
	pool := dbclient.GetPool()

	// 获取连接配置
	conn, err := storage.GetConnection(connectionId)
	if err != nil {
		return nil, fmt.Errorf("获取连接配置失败: %v", err)
	}

	// 根据数据库类型调用对应客户端
	switch conn.Type {
	case "mysql":
		client, err := pool.GetMySQLClient(conn)
		if err != nil {
			return nil, fmt.Errorf("获取 MySQL 客户端失败: %v", err)
		}
		structure, err := client.GetTableStructure(ctx, database, tableName)
		if err != nil {
			return nil, err
		}
		return map[string]interface{}{
			"type":     "mysql",
			"database": database,
			"table":    tableName,
			"columns":  structure,
		}, nil

	case "mongo":
		client, err := pool.GetMongoClient(conn)
		if err != nil {
			return nil, fmt.Errorf("获取 MongoDB 客户端失败: %v", err)
		}
		structure, err := client.GetCollectionStructure(ctx, database, tableName)
		if err != nil {
			return nil, err
		}
		return map[string]interface{}{
			"type":       "mongo",
			"database":   database,
			"collection": tableName,
			"structure": structure,
		}, nil

	case "redis":
		client, err := pool.GetRedisClient(conn)
		if err != nil {
			return nil, fmt.Errorf("获取 Redis 客户端失败: %v", err)
		}
		info, err := client.GetKeyInfo(ctx, tableName) // tableName 作为 key 名
		if err != nil {
			return nil, err
		}
		return map[string]interface{}{
			"type": "redis",
			"key":  tableName,
			"info": info,
		}, nil

	default:
		return nil, fmt.Errorf("不支持的数据库类型: %s", conn.Type)
	}
}

// GetIndexes 获取索引列表
func (a *App) GetIndexes(connectionId uint, database, tableName string) ([]map[string]interface{}, error) {
	ctx, cancel := context.WithTimeout(a.ctx, 30*time.Second)
	defer cancel()
	pool := dbclient.GetPool()

	// 获取连接配置
	conn, err := storage.GetConnection(connectionId)
	if err != nil {
		return nil, fmt.Errorf("获取连接配置失败: %v", err)
	}

	// 目前只支持 MySQL
	if conn.Type != "mysql" {
		return nil, fmt.Errorf("当前只支持 MySQL 的索引查询")
	}

	client, err := pool.GetMySQLClient(conn)
	if err != nil {
		return nil, fmt.Errorf("获取 MySQL 客户端失败: %v", err)
	}

	indexes, err := client.GetIndexes(ctx, database, tableName)
	if err != nil {
		return nil, err
	}

	return indexes, nil
}

2. 前端实现（Vue）

表结构展示组件

文件: go-desk/frontend/src/views/db-cli/components/TableStructure.vue

<template>
  <a-modal
    v-model:visible="visible"
    :title="title"
    width="900px"
    :footer="false"
    @cancel="handleClose"
  >
    <a-tabs v-model:active-tab>
      <!-- MySQL 表结构 -->
      <a-tab-pane key="mysql" title="表结构">
        <a-table
          :data="mysqlColumns"
          :columns="mysqlColumnDefs"
          :pagination="false"
          size="small"
          :bordered="{cell:true}"
        >
          <template #columns>
            <a-table-column title="字段名" data-index="Field" width="150"/>
            <a-table-column title="类型" data-index="Type" width="120"/>
            <a-table-column title="是否NULL" data-index="Null" width="80"/>
            <a-table-column title="主键" data-index="Key" width="80"/>
            <a-table-column title="默认值" data-index="Default" width="120"/>
            <a-table-column title="额外信息" data-index="Extra" width="200"/>
          </template>
        </a-table>

        <a-divider>索引信息</a-divider>

        <a-table
          :data="indexes"
          :columns="indexColumnDefs"
          :pagination="false"
          size="small"
          :bordered="{cell:true}"
        >
          <template #columns>
            <a-table-column title="索引名" data-index="name" width="150"/>
            <a-table-column title="唯一" data-index="unique" width="80">
              <template #cell="{ record }">
                {{ record.unique ? '是' : '否' }}
              </template>
            </a-table-column>
            <a-table-column title="字段" data-index="keys" width="200"/>
          </template>
        </a-table>
      </a-tab-pane>

      <!-- MongoDB 集合结构 -->
      <a-tab-pane key="mongo" title="集合结构">
        <a-statistic-group :data="mongoStats" direction="row" style="margin-bottom: 16px;">
          <a-statistic-item title="文档总数" :value="structure.documentCount"/>
          <a-statistic-item title="字段数" :value="Object.keys(structure.fieldStats).length"/>
          <a-statistic-item title="索引数" :value="structure.indexes.length"/>
        </a-statistic-group>

        <a-divider>文档示例</a-divider>

        <a-table
          :data="structure.sampleDocs"
          :columns="mongoColumnDefs"
          :pagination="false"
          size="small"
          :bordered="{cell:true}"
        >
        </a-table>
      </a-tab-pane>

      <!-- Redis Key 信息 -->
      <a-tab-pane key="redis" title="Key 信息">
        <a-descriptions :data="redisInfo" :column="1" size="small">
          <a-descriptions-item label="Key 名" :value="structure.key"/>
          <a-descriptions-item label="数据类型" :value="structure.info.type"/>
          <a-descriptions-item label="数据长度" :value="structure.info.length"/>
          <a-descriptions-item label="TTL（秒）">
            {{ structure.info.ttl }}
            <a-tag v-if="structure.info.ttl > 0" color="red">即将过期</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="值预览">
            <pre style="max-height: 150px; overflow: auto;">{{ structure.info.value }}</pre>
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue'
import {Message} from '@arco-design/web-vue'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  connectionId: {
    type: Number,
    default: null
  },
  database: {
    type: String,
    default: ''
  },
  tableName: {
    type: String,
    default: ''
  }
})

// 状态
const loading = ref(false)
const structure = ref({})
const indexes = ref([])

// 计算属性
const title = computed(() => {
  return `${props.tableName} - 结构`
})

const activeTab = computed(() => {
  if (!props.database) {
    return 'mysql'
  }
  // 根据 database 判断数据库类型（简化处理）
  return 'mysql'
})

// MySQL 列定义
const mysqlColumnDefs = [
  { title: '字段名', dataIndex: 'Field', width: 150 },
  { title: '类型', dataIndex: 'Type', width: 120 },
  { title: '是否NULL', dataIndex: 'Null', width: 80 },
  { title: '主键', dataIndex: 'Key', width: 80 },
  { title: '默认值', dataIndex: 'Default', width: 120 },
  { title: '额外信息', dataIndex: 'Extra', width: 200 }
]

const mysqlColumns = computed(() => {
  return structure.value.columns || []
})

// 索引列定义
const indexColumnDefs = [
  { title: '索引名', dataIndex: 'name', width: 150 },
  { title: '唯一', dataIndex: 'unique', width: 80 },
  { title: '字段', dataIndex: 'keys', width: 200 }
]

// MongoDB 统计数据
const mongoStats = computed(() => {
  return [
    { label: '文档总数', value: structure.value.documentCount || 0 },
    { label: '字段数', value: Object.keys(structure.value.fieldStats || {}).length },
    { label: '索引数', value: structure.value.indexes?.length || 0 }
  ]
})

const mongoColumnDefs = computed(() => {
  const columns = []
  if (structure.value.sampleDocs && structure.value.sampleDocs.length > 0) {
    const firstDoc = structure.value.sampleDocs[0]
    Object.keys(firstDoc).forEach(key => {
      columns.push({ title: key, dataIndex: key, width: 150 })
    })
  }
  return columns
})

const mongoSampleDocs = computed(() => {
  return structure.value.sampleDocs || []
})

// Redis 信息
const redisInfo = computed(() => {
  return structure.value.info || {}
})

// 加载表结构
const loadStructure = async () => {
  if (!props.connectionId || !props.database || !props.tableName) {
    Message.warning('参数不完整')
    return
  }

  loading.value = true
  try {
    if (!window.go?.main?.App?.GetTableStructure) {
      throw new Error('Go 后端未就绪')
    }

    const result = await window.go.main.App.GetTableStructure(
      props.connectionId,
      props.database,
      props.tableName
    )

    console.log('GetTableStructure 返回结果:', result)

    structure.value = result
  } catch (error) {
    console.error('加载表结构失败:', error)
    Message.error('加载表结构失败: ' + (error.message || error))
  } finally {
    loading.value = false
  }
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}

onMounted(() => {
  if (props.visible) {
    loadStructure()
  }
})
</script>

<style scoped>
.arco-table {
  font-size: 13px;
}

.arco-table :deep(.arco-table-cell) {
  padding: 8px 12px;
}
</style>

集成到主页面

文件: go-desk/frontend/src/views/db-cli/index.vue

<!-- 表结构对话框 -->
<TableStructure
    v-model:visible="showTableStructure"
    :connection-id="currentConnection?.id"
    :database="currentDatabase"
    :table-name="currentTableName"
/>

<!-- 连接树组件更新 -->
<ConnectionTree
    :current-connection-id="currentConnection?.id"
    @connection-select="handleConnectionSelect"
    @connection-edit="handleConnectionEdit"
    @connection-delete="handleConnectionDelete"
    @table-select="handleTableSelect"
    @table-structure="handleTableStructure"
    @show-bookmarks="handleShowBookmarks"
    @show-templates="handleShowTemplates"
    @new-connection="handleNewConnection"
    ref="connectionTreeRef"
/>

数据流程

用户点击表名
    ↓
ConnectionTree 触发 table-select 事件
    ↓
index.vue 记录当前数据库和表名
    ↓
用户点击表结构按钮（新增）
    ↓
index.vue 显示 TableStructure 对话框
    ↓
TableStructure 组件调用 GetTableStructure API
    ↓
后端根据数据库类型调用对应客户端
    ↓
MySQL: GetTableStructure → DESCRIBE 查询
      → 解析列信息
MongoDB: GetCollectionStructure → 文档分析
      → 字段统计
Redis: GetKeyInfo → 命令查询
      → 值预览
    ↓
返回结构数据
    ↓
前端展示对应 Tab 页面

功能特性

MySQL

✅ 表结构展示（字段名、类型、是否NULL、主键、默认值）
✅ 索引列表（索引名、唯一、字段）

MongoDB

✅ 文档示例（最多 5 个）
✅ 字段统计
✅ 文档总数
✅ 索引列表

Redis

✅ Key 类型识别
✅ TTL 显示
✅ 数据长度统计
✅ 值预览（限制 200 字符）

使用示例

MySQL

在连接树中选择表
点击"表结构"按钮
查看表字段信息
查看表索引信息

MongoDB

在连接树中选择集合
点击"表结构"按钮
查看文档示例
查看字段统计
查看索引信息

Redis

在连接树中选择 Key
点击"表结构"按钮
查看 Key 类型
查看 TTL
查看数据长度
查看值预览

技术要点

后端

统一接口: GetTableStructure() 根据 conn.Type 调用不同客户端
数据解析: 自动转换为统一格式
错误处理: 完善的超时和错误处理

前端

Tab 页面: 根据数据库类型显示不同内容
响应式数据: 使用 computed 自动更新
表格组件: 使用 Arco Design 统一展示
统计卡片: MongoDB 数据统计

实现时间: 2026-01-XX 状态: ✅ 已完成 测试状态: ⏳ 待用户测试

18 KiB Raw Blame History Unescape Escape

表结构查看功能实现说明

功能概述

实现内容

1. 后端实现（Go）

MySQL 表结构查询

MongoDB 集合结构查询

Redis Key 详细信息

应用层 API

2. 前端实现（Vue）

表结构展示组件

集成到主页面

数据流程

功能特性

MySQL

MongoDB

Redis

使用示例

MySQL

MongoDB

Redis

技术要点

后端

前端

18 KiB

Raw Blame History