29 changed files with 73 additions and 683 deletions
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@ -1,43 +0,0 @@
-## Tiny RDM Contribute Guide
-
-### Multi-language Contributions {#language}
-
-#### Adding New Language
-
-1. New file: Add a new JSON file in the [frontend/src/langs](../frontend/src/langs/), with the file naming format is "
-   {language}-{region}.json", e.g. English is "en-us.json", simplified Chinese is "zh-cn.json". Highly recommended to duplicate the [en-us.json](../frontend/src/langs/en-us.json) file and rename it.
-2. Fill content: Refer to [en-us.json](../frontend/src/langs/en-us.json), or duplicate the file and modify the language content.
-3. Update codes: Edit[frontend/src/langs/index.js](.../frontend/src/langs/index.js), import the new language data inside.
-    ```javascript
-    import en from './en-us'
-    // import your new localize file 'zh-cn' here
-    import zh from './zh-cn'
-    
-    export const lang = {
-        en,
-        // export new language data 'zh' here
-        zh,
-    }
-   ```
-4. Submit review once there are no issues with the translation context in the application. (learn how to submit)
-
-### Code Submission`(To be completed)` {#pull_request}
-
-#### Pull Request Title
-The format of PR's title like "<type>: <description>"
- type: PR type
- description: PR description
-
-PR type list below:
-
-| type     | description                                        |
-|----------|----------------------------------------------------|
-| revert   | Revert a commit                                    |
-| feat     | New features                                       |
-| perf     | Performance improvements                           |
-| fix      | Fix any bugs                                       |
-| style    | Style updates                                      |
-| docs     | Document updates                                   |
-| refactor | Code refactors                                     |
-| chore    | Some chores                                        |
-| ci       | Automation process configuration or script updates |
--- a/.github/CONTRIBUTING_zh.md
+++ b/.github/CONTRIBUTING_zh.md
@ -1,42 +0,0 @@
-## Tiny RDM 代码贡献指南
-
-### 多国语言贡献 {#language}
-
-#### 增加新的语言
-1. 创建文件：在[frontend/src/langs](../frontend/src/langs/)目录下新增语言配置JSON文件，文件名格式为“{语言}-{地区}.json”，如英文为“en-us.json”，简体中文为“zh-cn.json”，建议直接复制[en-us.json](../frontend/src/langs/en-us.json)文件进行改名。
-2. 填充内容：参考[en-us.json](../frontend/src/langs/en-us.json)，或者直接克隆一份文件，对语言部分内容进行修改。
-3. 代码修改：在[frontend/src/langs/index.js](.../frontend/src/langs/index.js)文件内导入新增的语言数据
-    ```javascript
-    import en from './en-us'
-    // import your new localize file 'zh-cn' here
-    import zh from './zh-cn'
-    
-    export const lang = {
-        en,
-        // export new language data 'zh' here
-        zh,
-    }
-    ```
-4. 检查应用中对应翻译语境无问题后，可提交审核（[查看如何提交](#pull_request)）
-
-### 代码提交`(待完善)` {#pull_request}
-
-#### PR提交规范
-PR提交格式为“<type>: <description>”
- type: 提交类型
- description: 提交内容描述
-
-其中提交类型如下：
-
-| 提交类型     | 类型描述         |
-|----------|--------------|
-| revert   | 回退某个commit提交 |
-| feat     | 新功能/新特性      |
-| perf     | 功能、体验等方面的优化  |
-| fix      | 修复问题         |
-| style    | 样式相关修改       |
-| docs     | 文档更新         |
-| refactor | 代码重构         |
-| chore    | 杂项修改         |
-| ci       | 自动化流程配置或脚本修改 |
-
--- a/.github/ISSUE_TEMPLATE/but_report.md
+++ b/.github/ISSUE_TEMPLATE/but_report.md
@ -1,21 +0,0 @@
---
-name: Bug report
-about: Create a report to help us improve
-title: '[BUG]'
-labels: ''
-assignees: ''
---
-
-**Tiny RDM Version**
-What version of Tiny RDM are you using?
-
-**OS Version**
-Which OS and version you launch? (Mac/Windows/Linux)
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-Steps to Reproduce:
-
-1.
-2.
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -1,5 +0,0 @@
---
-name: Feature request
-about: Suggest an idea for this project
-title: '[FEATURE]'
---
--- a/README.md
+++ b/README.md
@ -13,29 +13,20 @@
 <strong>Tiny RDM is a modern lightweight cross-platform Redis desktop manager available for Mac, Windows, and Linux.</strong>
 </div>

-![](screenshots/dark_en.png)
+![](screenshots/light_en.png)

 ## Feature

-* Super lightweight, built on Webview2, without embedded browsers (Thanks to [Wails](https://github.com/wailsapp/wails)).
-* More elegant UI, frameless, offering light and dark themes (Thanks to [Naive UI](https://github.com/tusen-ai/naive-ui)
+* Built on Webview, no embedded browsers (Thanks to [Wails](https://github.com/wailsapp/wails)).
+* More elegant UI and visualized layout (Thanks to [Naive UI](https://github.com/tusen-ai/naive-ui)
  and [IconPark](https://iconpark.oceanengine.com)).
-* Multi-language support ([Need more languages ? Click here to contribute](.github/CONTRIBUTING.md)).
-* Better connection management: supports SSH Tunnel/SSL/Sentinel Mode/Cluster Mode.
-* Visualize key value operations, CRUD support for Lists, Hashes, Strings, Sets, Sorted Sets, and Streams.
-* Support multiple data viewing format and decode/decompression methods.
-* Operation command execution logs.
-* Provides command-line operations.
-
-## Roadmap
- [ ] Pagination and querying for List/Hash/Set/Sorted Set
- [ ] Decode/decompression display for value of List/Hash/Set/Sorted Set
- [ ] Slow logs
- [ ] Real-time commands monitoring
- [ ] Pub/Sub operations
+* Multi-language support (Click here to contribute and support more languages).
+* Convenient data viewing and editing.
+* More features under continuous development...

 ## Installation

+We publish binaries for Mac, Windows, and Linux.
 Available to download for free from [here](https://github.com/tiny-craft/tiny-rdm/releases).

 > If you can't open it after installation on macOS, exec the following command then reopen:
@ -43,9 +34,9 @@ Available to download for free from [here](https://github.com/tiny-craft/tiny-rd
 >  sudo xattr -d com.apple.quarantine /Applications/Tiny\ RDM.app
 > ```

-## Build Guidelines
+## Build
 ### Prerequisites
-* Go (latest version)
+* Go >= 1.21
 * Node.js >= 16
 * NPM >= 9

--- a/README_zh.md
+++ b/README_zh.md
@ -13,30 +13,20 @@
 <strong>一个现代化轻量级的跨平台Redis桌面客户端，支持Mac、Windows和Linux</strong>
 </div>

-![screenshot](screenshots/dark_zh.png)
+![screenshot](screenshots/light_zh.png)

 ## 功能特性

-* 极度轻量，基于Webview2，无内嵌浏览器（感谢[Wails](https://github.com/wailsapp/wails)）
-* 更精美的界面，无边框窗口，提供浅色/深色主题（感谢[Naive UI](https://github.com/tusen-ai/naive-ui)
+* 基于Webview，无内嵌浏览器（感谢[Wails](https://github.com/wailsapp/wails)）
+* 更精美的界面和直观的结构布局（感谢[Naive UI](https://github.com/tusen-ai/naive-ui)
  和 [IconPark](https://iconpark.oceanengine.com)）
-* 多国语言支持：英文/中文（[需要更多语言支持？点我贡献语言](.github/CONTRIBUTING_zh.md)）
-* 更好用的连接管理：支持SSH隧道/SSL/哨兵模式/集群模式
-* 可视化键值操作，增删查改一应俱全
-* 支持多种数据查看格式以及转码/解压方式
-* 操作命令执行日志展示
-* 提供命令行操作
-
-## 未来版本规划
- [ ] List/Hash/Set/Sorted Set的分页展示和查询
- [ ] List/Hash/Set/Sorted Set值的转码显示
- [ ] 慢日志展示
- [ ] 命令实时监控
- [ ] 发布/订阅支持
+* 多国语言支持（点我贡献和完善多国语言支持）
+* 便捷的数据查看和编辑修改
+* 更多功能持续开发中…

 ## 安装

-提供Mac、Windows和Linux安装包，可[免费下载](https://github.com/tiny-craft/tiny-rdm/releases)。
+提供Mac、Windows和Linux下载安装，可[免费下载](https://github.com/tiny-craft/tiny-rdm/releases)。

 > 如果在macOS上安装后无法打开，报错**不受信任**或者**移到垃圾箱**，执行下面命令后再启动即可：
 > ``` shell
@ -45,7 +35,7 @@

 ## 构建项目
 ### 运行环境要求
-* Go（最新版本）
+* Go >= 1.21
 * Node.js >= 16
 * NPM >= 9

--- a/backend/services/connection_service.go
+++ b/backend/services/connection_service.go
@ -11,7 +11,6 @@ import (
 	"net"
 	"net/url"
 	"os"
-	"sort"
 	"strconv"
 	"strings"
 	"sync"
@ -34,14 +33,6 @@ type cmdHistoryItem struct {
 	Cost      int64  `json:"cost"`
 }

-type slowLogItem struct {
-	Timestamp int64  `json:"timestamp"`
-	Client    string `json:"client"`
-	Addr      string `json:"addr"`
-	Cmd       string `json:"cmd"`
-	Cost      int64  `json:"cost"`
-}
-
 type connectionService struct {
 	ctx        context.Context
 	conns      *ConnectionsStorage
@ -1530,45 +1521,6 @@ func (c *connectionService) DeleteKey(connName string, db int, k any, async bool
 	return
 }

-// FlushDB flush database
-func (c *connectionService) FlushDB(connName string, db int, async bool) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
-	if err != nil {
-		resp.Msg = err.Error()
-		return
-	}
-
-	flush := func(ctx context.Context, cli redis.UniversalClient) {
-		cli.TxPipelined(ctx, func(pipe redis.Pipeliner) error {
-			pipe.Select(ctx, db)
-			if async {
-				pipe.FlushDBAsync(ctx)
-			} else {
-				pipe.FlushDB(ctx)
-			}
-			return nil
-		})
-	}
-
-	client, ctx := item.client, item.ctx
-	if cluster, ok := client.(*redis.ClusterClient); ok {
-		// cluster mode
-		err = cluster.ForEachMaster(ctx, func(ctx context.Context, cli *redis.Client) error {
-			flush(ctx, cli)
-			return nil
-		})
-	} else {
-		flush(ctx, client)
-	}
-
-	if err != nil {
-		resp.Msg = err.Error()
-		return
-	}
-	resp.Success = true
-	return
-}
-
 // RenameKey rename key
 func (c *connectionService) RenameKey(connName string, db int, key, newKey string) (resp types.JSResp) {
 	item, err := c.getRedisClient(connName, db)
@ -1622,59 +1574,6 @@ func (c *connectionService) CleanCmdHistory() (resp types.JSResp) {
 	return
 }

-// GetSlowLogs get slow log list
-func (c *connectionService) GetSlowLogs(connName string, db int, num int64) (resp types.JSResp) {
-	item, err := c.getRedisClient(connName, db)
-	if err != nil {
-		resp.Msg = err.Error()
-		return
-	}
-
-	client, ctx := item.client, item.ctx
-	var logs []redis.SlowLog
-	if cluster, ok := client.(*redis.ClusterClient); ok {
-		// cluster mode
-		var mu sync.Mutex
-		err = cluster.ForEachShard(ctx, func(ctx context.Context, cli *redis.Client) error {
-			if subLogs, _ := client.SlowLogGet(ctx, num).Result(); len(subLogs) > 0 {
-				mu.Lock()
-				logs = append(logs, subLogs...)
-				mu.Unlock()
-			}
-			return nil
-		})
-	} else {
-		logs, err = client.SlowLogGet(ctx, num).Result()
-	}
-	if err != nil {
-		resp.Msg = err.Error()
-		return
-	}
-
-	sort.Slice(logs, func(i, j int) bool {
-		return logs[i].Time.UnixMilli() > logs[j].Time.UnixMilli()
-	})
-	if len(logs) > int(num) {
-		logs = logs[:num]
-	}
-
-	list := sliceutil.Map(logs, func(i int) slowLogItem {
-		return slowLogItem{
-			Timestamp: logs[i].Time.UnixMilli(),
-			Client:    logs[i].ClientName,
-			Addr:      logs[i].ClientAddr,
-			Cmd:       sliceutil.JoinString(logs[i].Args, " "),
-			Cost:      logs[i].Duration.Milliseconds(),
-		}
-	})
-
-	resp.Success = true
-	resp.Data = map[string]any{
-		"list": list,
-	}
-	return
-}
-
 // update or insert key info to database
 //func (c *connectionService) updateDBKey(connName string, db int, keys []string, separator string) {
 //	dbStruct := map[string]any{}
--- a/backend/utils/redis/log_hook.go
+++ b/backend/utils/redis/log_hook.go
@ -99,7 +99,7 @@ func (l *LogHook) ProcessPipelineHook(next redis.ProcessPipelineHook) redis.Proc
 		err := next(ctx, cmds)
 		cost := time.Since(t).Milliseconds()
 		b := make([]byte, 0, 64)
-		for i, cmd := range cmds {
+		for _, cmd := range cmds {
 			log.Println("pipeline: ", cmd)
 			if l.cmdExec != nil {
 				for i, arg := range cmd.Args() {
@ -108,11 +108,9 @@ func (l *LogHook) ProcessPipelineHook(next redis.ProcessPipelineHook) redis.Proc
 					}
 					b = appendArg(b, arg)
 				}
-				if i != len(cmds) {
 				b = append(b, '\n')
 			}
 		}
-		}
 		if l.cmdExec != nil {
 			l.cmdExec(string(b), cost)
 		}
--- a/backend/utils/string/convert.go
+++ b/backend/utils/string/convert.go
@ -117,11 +117,10 @@ func autoDecode(str string) (value, resultDecode string) {
 			return
 		}

-		// FIXME: skip decompress with deflate due to incorrect format checking
-		//if value, ok = decodeDeflate(str); ok {
-		//	resultDecode = types.DECODE_DEFLATE
-		//	return
-		//}
+		if value, ok = decodeDeflate(str); ok {
+			resultDecode = types.DECODE_DEFLATE
+			return
+		}

 		if value, ok = decodeZStd(str); ok {
 			resultDecode = types.DECODE_ZSTD
@ -203,7 +202,6 @@ func autoViewAs(str string) (value, resultFormat string) {
 }

 func decodeJson(str string) (string, bool) {
-	str = strings.TrimSpace(str)
 	if (strings.HasPrefix(str, "{") && strings.HasSuffix(str, "}")) ||
 		(strings.HasPrefix(str, "[") && strings.HasSuffix(str, "]")) {
 		var out bytes.Buffer
@ -352,12 +350,15 @@ func SaveAs(str, viewType, decodeType string) (value string, err error) {

 func encodeJson(str string) (string, bool) {
 	var data any
+	if (strings.HasPrefix(str, "{") && strings.HasSuffix(str, "}")) ||
+		(strings.HasPrefix(str, "[") && strings.HasSuffix(str, "]")) {
 		if err := json.Unmarshal([]byte(str), &data); err == nil {
 			var jsonByte []byte
 			if jsonByte, err = json.Marshal(data); err == nil {
 				return string(jsonByte), true
 			}
 		}
+	}
 	return str, false
 }

--- a/frontend/README.md
+++ b/frontend/README.md
@ -1,3 +1,8 @@
-# Frontend of Tiny RDM
+# Vue 3 + Vite

-Use Vue3 + Vite
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs,
+check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -20,7 +20,6 @@ import KeyFilterDialog from './components/dialogs/KeyFilterDialog.vue'
 import { WindowSetDarkTheme, WindowSetLightTheme } from 'wailsjs/runtime/runtime.js'
 import { darkThemeOverrides, themeOverrides } from '@/utils/theme.js'
 import AboutDialog from '@/components/dialogs/AboutDialog.vue'
-import FlushDbDialog from '@/components/dialogs/FlushDbDialog.vue'

 hljs.registerLanguage('json', json)
 hljs.registerLanguage('plaintext', plaintext)
@ -74,7 +73,6 @@ watch(
            <add-fields-dialog />
            <rename-key-dialog />
            <delete-key-dialog />
-            <flush-db-dialog />
            <set-ttl-dialog />
            <preferences-dialog />
            <about-dialog />
--- a/frontend/src/components/content/ContentLogPane.vue
+++ b/frontend/src/components/content/ContentLogPane.vue
@ -1,9 +1,9 @@
 <script setup>
-import { computed, h, nextTick, reactive, ref } from 'vue'
+import { computed, nextTick, reactive, ref } from 'vue'
 import IconButton from '@/components/common/IconButton.vue'
 import Refresh from '@/components/icons/Refresh.vue'
 import useConnectionStore from 'stores/connections.js'
-import { map, size, split, uniqBy } from 'lodash'
+import { map, uniqBy } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import Delete from '@/components/icons/Delete.vue'
 import dayjs from 'dayjs'
@ -74,7 +74,7 @@ defineExpose({
    <n-card
        :bordered="false"
        :theme-overrides="{ borderRadius: '0px' }"
-        :title="$t('log.title')"
+        :title="$t('log.launch_log')"
        class="content-container flex-box-v"
        content-style="display: flex;flex-direction: column; overflow: hidden; backgroundColor: gray">
        <n-form :disabled="data.loading" class="flex-item" inline>
@ -132,17 +132,6 @@ defineExpose({
                        filter(value, row) {
                            return value === '' || !!~row.cmd.indexOf(value.toString())
                        },
-                        render({ cmd }, index) {
-                            const cmdList = split(cmd, '\n')
-                            if (size(cmdList) > 1) {
-                                return h(
-                                    'div',
-                                    null,
-                                    map(cmdList, (c) => h('div', null, c)),
-                                )
-                            }
-                            return cmd
-                        },
                    },
                    {
                        title: $t('log.cost_time'),
--- a/frontend/src/components/content/ContentPane.vue
+++ b/frontend/src/components/content/ContentPane.vue
@ -13,7 +13,6 @@ import ContentValueWrapper from '@/components/content_value/ContentValueWrapper.
 import ContentCli from '@/components/content_value/ContentCli.vue'
 import Monitor from '@/components/icons/Monitor.vue'
 import Pub from '@/components/icons/Pub.vue'
-import ContentSlog from '@/components/content_value/ContentSlog.vue'

 const themeVars = useThemeVars()

@ -165,7 +164,7 @@ watch(
            </n-tab-pane>

            <!-- slow log pane -->
-            <n-tab-pane :name="BrowserTabType.SlowLog.toString()" display-directive="if">
+            <n-tab-pane :disabled="true" :name="BrowserTabType.SlowLog.toString()">
                <template #tab>
                    <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
                        <n-icon size="16">
@ -177,11 +176,10 @@ watch(
                        <span>{{ $t('interface.sub_tab.slow_log') }}</span>
                    </n-space>
                </template>
-                <content-slog :db="tabContent.db" :server="props.server" />
            </n-tab-pane>

            <!-- command monitor pane -->
-            <n-tab-pane :disabled="true" :name="BrowserTabType.CmdMonitor.toString()" display-directive="if">
+            <n-tab-pane :disabled="true" :name="BrowserTabType.CmdMonitor.toString()">
                <template #tab>
                    <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
                        <n-icon size="16">
--- a/frontend/src/components/content_value/ContentSlog.vue
+++ b/frontend/src/components/content_value/ContentSlog.vue
@ -1,198 +0,0 @@
-<script setup>
-import { h, onMounted, onUnmounted, reactive, ref } from 'vue'
-import Refresh from '@/components/icons/Refresh.vue'
-import useConnectionStore from 'stores/connections.js'
-import { debounce, isEmpty, map, size, split } from 'lodash'
-import { useI18n } from 'vue-i18n'
-import dayjs from 'dayjs'
-import { useThemeVars } from 'naive-ui'
-
-const themeVars = useThemeVars()
-
-const connectionStore = useConnectionStore()
-const i18n = useI18n()
-const props = defineProps({
-    server: {
-        type: String,
-    },
-    db: {
-        type: Number,
-        default: 0,
-    },
-})
-
-const data = reactive({
-    list: [],
-    sortOrder: 'descend',
-    listLimit: 20,
-    loading: false,
-    autoLoading: false,
-    client: '',
-    keyword: '',
-})
-
-const tableRef = ref(null)
-
-const _loadSlowLog = () => {
-    data.loading = true
-    connectionStore
-        .getSlowLog(props.server, props.db, data.listLimit)
-        .then((list) => {
-            data.list = list || []
-        })
-        .finally(() => {
-            data.loading = false
-            tableRef.value?.scrollTo({ top: data.sortOrder === 'ascend' ? 999999 : 0 })
-        })
-}
-const loadSlowLog = debounce(_loadSlowLog, 1000, { leading: true, trailing: true })
-
-let intervalID
-onMounted(() => {
-    loadSlowLog()
-    intervalID = setInterval(() => {
-        if (data.autoLoading === true) {
-            loadSlowLog()
-        }
-    }, 5000)
-})
-
-onUnmounted(() => {
-    clearInterval(intervalID)
-})
-
-const onListLimitChanged = (limit) => {
-    loadSlowLog()
-}
-</script>
-
-<template>
-    <n-card
-        :bordered="false"
-        :theme-overrides="{ borderRadius: '0px' }"
-        :title="$t('slog.title')"
-        class="content-container flex-box-v"
-        content-style="display: flex;flex-direction: column; overflow: hidden; backgroundColor: gray">
-        <n-form :disabled="data.loading" class="flex-item" inline>
-            <n-form-item :label="$t('slog.limit')">
-                <n-input-number
-                    v-model:value="data.listLimit"
-                    :max="9999"
-                    style="width: 120px"
-                    @update:value="onListLimitChanged" />
-            </n-form-item>
-            <n-form-item :label="$t('slog.auto_refresh')">
-                <n-switch v-model:value="data.autoLoading" :loading="data.loading" />
-            </n-form-item>
-            <n-form-item label="&nbsp;">
-                <n-tooltip>
-                    {{ $t('slog.refresh') }}
-                    <template #trigger>
-                        <n-button :loading="data.loading" circle size="small" tertiary @click="_loadSlowLog">
-                            <template #icon>
-                                <n-icon :component="Refresh" />
-                            </template>
-                        </n-button>
-                    </template>
-                </n-tooltip>
-            </n-form-item>
-            <n-form-item :label="$t('slog.filter')">
-                <n-input v-model:value="data.keyword" clearable placeholder="" />
-            </n-form-item>
-        </n-form>
-        <div class="content-value fill-height flex-box-h">
-            <n-data-table
-                ref="tableRef"
-                :columns="[
-                    {
-                        title: $t('slog.exec_time'),
-                        key: 'timestamp',
-                        sortOrder: data.sortOrder,
-                        sorter: 'default',
-                        width: 180,
-                        align: 'center',
-                        titleAlign: 'center',
-                        render({ timestamp }, index) {
-                            return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
-                        },
-                    },
-                    {
-                        title: $t('slog.client'),
-                        key: 'client',
-                        filterOptionValue: data.client,
-                        resizable: true,
-                        filter(value, row) {
-                            return value === '' || row.client === value.toString() || row.addr === value.toString()
-                        },
-                        width: 200,
-                        align: 'center',
-                        titleAlign: 'center',
-                        ellipsis: true,
-                        render({ client, addr }, index) {
-                            let content = ''
-                            if (!isEmpty(client)) {
-                                content += client
-                            }
-                            if (!isEmpty(addr)) {
-                                if (!isEmpty(content)) {
-                                    content += ' - '
-                                }
-                                content += addr
-                            }
-                            return content
-                        },
-                    },
-                    {
-                        title: $t('slog.cmd'),
-                        key: 'cmd',
-                        titleAlign: 'center',
-                        filterOptionValue: data.keyword,
-                        resizable: true,
-                        width: 100,
-                        filter(value, row) {
-                            return value === '' || !!~row.cmd.indexOf(value.toString())
-                        },
-                        render({ cmd }, index) {
-                            const cmdList = split(cmd, '\n')
-                            if (size(cmdList) > 1) {
-                                return h(
-                                    'div',
-                                    null,
-                                    map(cmdList, (c) => h('div', null, c)),
-                                )
-                            }
-                            return cmd
-                        },
-                    },
-                    {
-                        title: $t('slog.cost_time'),
-                        key: 'cost',
-                        width: 100,
-                        align: 'center',
-                        titleAlign: 'center',
-                        render({ cost }, index) {
-                            const ms = dayjs.duration(cost).asMilliseconds()
-                            if (ms < 1000) {
-                                return `${ms} ms`
-                            } else {
-                                return `${Math.floor(ms / 1000)} s`
-                            }
-                        },
-                    },
-                ]"
-                @update:sorter="({ order }) => (data.sortOrder = order)"
-                :data="data.list"
-                class="flex-item-expand"
-                flex-height />
-        </div>
-    </n-card>
-</template>
-
-<style lang="scss" scoped>
-@import '@/styles/content';
-
-.content-container {
-    padding: 5px;
-    box-sizing: border-box;
-}
-</style>
--- a/frontend/src/components/content_value/DropdownSelector.vue
+++ b/frontend/src/components/content_value/DropdownSelector.vue
@ -91,18 +91,4 @@ const onDropdownShow = (show) => {
    </n-dropdown>
 </template>

-<style lang="scss">
-.type-selector-header {
-    height: 30px;
-    line-height: 30px;
-    font-size: 15px;
-    font-weight: bold;
-    text-align: center;
-    padding: 0 10px;
-}
-
-.type-selector-item {
-    min-width: 100px;
-    text-align: center;
-}
-</style>
+<style lang="scss" scoped></style>
--- a/frontend/src/components/dialogs/FlushDbDialog.vue
+++ b/frontend/src/components/dialogs/FlushDbDialog.vue
@ -1,85 +0,0 @@
-<script setup>
-import { reactive, watch } from 'vue'
-import useDialog from 'stores/dialog'
-import { useI18n } from 'vue-i18n'
-import useConnectionStore from 'stores/connections.js'
-
-const flushForm = reactive({
-    server: '',
-    db: 0,
-    key: '',
-    async: false,
-    confirm: false,
-})
-
-const dialogStore = useDialog()
-const connectionStore = useConnectionStore()
-watch(
-    () => dialogStore.flushDBDialogVisible,
-    (visible) => {
-        if (visible) {
-            const { server, db } = dialogStore.flushDBParam
-            flushForm.server = server
-            flushForm.db = db
-            flushForm.async = true
-            flushForm.confirm = false
-        }
-    },
-)
-
-const i18n = useI18n()
-const onConfirmFlush = async () => {
-    try {
-        const { server, db, async } = flushForm
-        const success = await connectionStore.flushDatabase(server, db, async)
-        if (success) {
-            $message.success(i18n.t('dialogue.handle_succ'))
-        }
-    } catch (e) {
-        $message.error(e.message)
-    }
-    dialogStore.closeFlushDBDialog()
-}
-
-const onClose = () => {
-    dialogStore.closeFlushDBDialog()
-}
-</script>
-
-<template>
-    <n-modal
-        v-model:show="dialogStore.flushDBDialogVisible"
-        :closable="false"
-        :close-on-esc="false"
-        :mask-closable="false"
-        :show-icon="false"
-        :title="$t('interface.flush_db')"
-        preset="dialog"
-        transform-origin="center">
-        <n-form :model="flushForm" :show-require-mark="false" label-placement="top">
-            <n-form-item :label="$t('dialogue.key.server')">
-                <n-input :value="flushForm.server" readonly />
-            </n-form-item>
-            <n-form-item :label="$t('dialogue.key.db_index')">
-                <n-input :value="flushForm.db.toString()" readonly />
-            </n-form-item>
-            <n-form-item :label="$t('dialogue.key.async_delete')" required>
-                <n-checkbox v-model:checked="flushForm.async">{{ $t('dialogue.key.async_delete_title') }}</n-checkbox>
-            </n-form-item>
-            <n-form-item :label="$t('common.warning')" required>
-                <n-checkbox v-model:checked="flushForm.confirm">
-                    <span style="color: red; font-weight: bold">{{ $t('dialogue.key.confirm_flush') }}</span>
-                </n-checkbox>
-            </n-form-item>
-        </n-form>
-
-        <template #action>
-            <n-button :focusable="false" @click="onClose">{{ $t('common.cancel') }}</n-button>
-            <n-button :disabled="!!!flushForm.confirm" :focusable="false" type="primary" @click="onConfirmFlush">
-                {{ $t('dialogue.key.confirm_flush_db') }}
-            </n-button>
-        </template>
-    </n-modal>
-</template>
-
-<style lang="scss" scoped></style>
--- a/frontend/src/components/icons/Pub.vue
+++ b/frontend/src/components/icons/Pub.vue
@ -10,7 +10,7 @@ const props = defineProps({
    },
    strokeColor: {
        type: String,
-        default: 'currentColor',
+        default: '#FFF',
    },
 })
 </script>
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@ -117,8 +117,8 @@ const menuOptions = {
                    key: 'd1',
                },
                {
-                    key: 'db_flush',
-                    label: i18n.t('interface.flush_db'),
+                    key: 'key_remove',
+                    label: i18n.t('interface.batch_delete'),
                    icon: renderIcon(Delete),
                },
                {
@ -163,7 +163,7 @@ const menuOptions = {
        },
        {
            key: 'key_remove',
-            label: i18n.t('interface.batch_delete_key'),
+            label: i18n.t('interface.batch_delete'),
            icon: renderIcon(Delete),
        },
    ],
@ -260,7 +260,7 @@ const handleSelectContextMenu = (key) => {
            connectionStore.closeDatabase(props.server, db)
            break
        case 'db_flush':
-            dialogStore.openFlushDBDialog(props.server, db)
+            dialogStore.openDeleteKeyDialog(props.server, db, '*')
            break
        case 'db_newkey':
        case 'key_newkey':
@ -548,7 +548,7 @@ const getDatabaseMenu = (opened, loading, end) => {
                onClick: () => handleSelectContextMenu('db_loadall'),
            }),
            h(IconButton, {
-                tTooltip: 'interface.flush_db',
+                tTooltip: 'interface.batch_delete',
                icon: Delete,
                disabled: loading === true,
                onClick: () => handleSelectContextMenu('db_flush'),
@ -585,7 +585,7 @@ const getLayerMenu = () => {
            onClick: () => handleSelectContextMenu('key_newkey'),
        }),
        h(IconButton, {
-            tTooltip: 'interface.batch_delete_key',
+            tTooltip: 'interface.batch_delete',
            icon: Delete,
            onClick: () => handleSelectContextMenu('key_remove'),
        }),
--- a/frontend/src/langs/en-us.json
+++ b/frontend/src/langs/en-us.json
@ -65,7 +65,6 @@
    "rename_key": "Rename Key",
    "delete_key": "Delete Key",
    "batch_delete_key": "Batch Delete Keys",
-    "flush_db": "Flush Database",
    "copy_value": "Copy Value",
    "edit_value": "Edit Value",
    "save_update": "Save Update",
@ -83,6 +82,7 @@
    "decode_with": "Decode / Decompression",
    "reload": "Reload",
    "open_connection": "Open Connection",
+    "batch_delete": "Batch Delete",
    "copy_path": "Copy Path",
    "copy_key": "Copy Key",
    "binary_key": "Binary Key Name",
@ -214,16 +214,14 @@
      "new": "New Key",
      "new_name": "New Key Name",
      "persist_key": "Persist Key",
-      "server": "Connection",
+      "server": "Belong",
      "db_index": "Database Index",
      "key_expression": "Key Expression",
      "affected_key": "Affected Keys",
      "show_affected_key": "Show Affected Keys",
      "confirm_delete_key": "Confirm Delete {num} Key(s)",
      "async_delete": "Asynchronously Execute",
-      "async_delete_title": "Do not waiting for the operation's result",
-      "confirm_flush": "I know what I'm doing!",
-      "confirm_flush_db": "Confirm Flush Database"
+      "async_delete_title": "Do not waiting for the operation's result"
    },
    "field": {
      "new": "Add New Field",
@ -274,7 +272,7 @@
    "about": "About"
  },
  "log": {
-    "title": "Launch Log",
+    "launch_log": "Launch Log",
    "filter_server": "Filter Server",
    "filter_keyword": "Filter Keyword",
    "clean_log": "Clean Launch Log",
@ -293,16 +291,5 @@
    "all_info": "Information",
    "refresh": "Refresh",
    "auto_refresh": "Auto Refresh"
-  },
-  "slog": {
-    "title": "Slow Log",
-    "limit": "Limit",
-    "filter": "Filter",
-    "exec_time": "Time",
-    "client": "Client",
-    "cmd": "Command",
-    "cost_time": "Cost",
-    "refresh": "Refresh Now",
-    "auto_refresh": "Auto Refresh"
  }
 }
--- a/frontend/src/langs/index.js
+++ b/frontend/src/langs/index.js
@ -1,4 +1,4 @@
-import en from './en-us'
+import en from './en'
 import zh from './zh-cn'

 export const lang = {
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@ -65,7 +65,6 @@
    "rename_key": "重命名键",
    "delete_key": "删除键",
    "batch_delete_key": "批量删除键",
-    "flush_db": "清空数据库",
    "copy_value": "复制值",
    "edit_value": "修改值",
    "save_update": "保存修改",
@ -83,6 +82,7 @@
    "decode_with": "解码/解压方式",
    "reload": "重新载入",
    "open_connection": "打开连接",
+    "batch_delete": "批量删除键",
    "copy_path": "复制路径",
    "copy_key": "复制键名",
    "binary_key": "二进制键名",
@ -220,9 +220,7 @@
      "show_affected_key": "查看受影响的键名",
      "confirm_delete_key": "确认删除{num}个键",
      "async_delete": "异步执行",
-      "async_delete_title": "不等待操作结果",
-      "confirm_flush": "我知道我正在执行的操作！",
-      "confirm_flush_db": "确认清空数据库"
+      "async_delete_title": "不等待操作结果"
    },
    "field": {
      "new": "添加新字段",
@ -273,7 +271,7 @@
    "about": "关于"
  },
  "log": {
-    "title": "运行日志",
+    "launch_log": "运行日志",
    "filter_server": "筛选服务器",
    "filter_keyword": "筛选关键字",
    "clean_log": "清空运行日志",
@ -292,16 +290,5 @@
    "all_info": "全部信息",
    "refresh": "立即刷新",
    "auto_refresh": "自动刷新"
-  },
-  "slog": {
-    "title": "慢日志",
-    "limit": "条数",
-    "filter": "筛选",
-    "exec_time": "执行时间",
-    "client": "客户端",
-    "cmd": "命令",
-    "cost_time": "耗时",
-    "refresh": "立即刷新",
-    "auto_refresh": "自动刷新"
  }
 }
--- a/frontend/src/stores/connections.js
+++ b/frontend/src/stores/connections.js
@ -25,11 +25,9 @@ import {
    DeleteConnection,
    DeleteGroup,
    DeleteKey,
-    FlushDB,
    GetCmdHistory,
    GetConnection,
    GetKeyValue,
-    GetSlowLogs,
    ListConnection,
    LoadAllKeys,
    LoadNextKeys,
@ -1668,30 +1666,6 @@ const useConnectionStore = defineStore('connections', {
            return false
        },

-        /**
-         * flush database
-         * @param connName
-         * @param db
-         * @param async
-         * @return {Promise<boolean>}
-         */
-        async flushDatabase(connName, db, async) {
-            try {
-                const { success = false } = await FlushDB(connName, db, async)
-
-                if (success === true) {
-                    // update tree view data
-                    this._deleteKeyNode(connName, db)
-                    // set tab content empty
-                    const tab = useTabStore()
-                    tab.emptyTab(connName)
-                    return true
-                }
-            } finally {
-            }
-            return true
-        },
-
        /**
         * rename key
         * @param {string} connName
@ -1745,23 +1719,6 @@ const useConnectionStore = defineStore('connections', {
            }
        },

-        /**
-         * get slow log list
-         * @param {string} server
-         * @param {number} db
-         * @param {number} num
-         * @return {Promise<[]>}
-         */
-        async getSlowLog(server, db, num) {
-            try {
-                const { success, data = { list: [] } } = await GetSlowLogs(server, db, num)
-                const { list } = data
-                return list
-            } catch {
-                return []
-            }
-        },
-
        /**
         * get key filter pattern and filter type
         * @param {string} server
--- a/frontend/src/stores/dialog.js
+++ b/frontend/src/stores/dialog.js
@ -63,12 +63,6 @@ const useDialogStore = defineStore('dialog', {
        },
        deleteKeyDialogVisible: false,

-        flushDBParam: {
-            server: '',
-            db: 0,
-        },
-        flushDBDialogVisible: false,
-
        selectTTL: -1,
        ttlDialogVisible: false,

@ -170,15 +164,6 @@ const useDialogStore = defineStore('dialog', {
            this.deleteKeyDialogVisible = false
        },

-        openFlushDBDialog(server, db) {
-            this.flushDBParam.server = server
-            this.flushDBParam.db = db
-            this.flushDBDialogVisible = true
-        },
-        closeFlushDBDialog() {
-            this.flushDBDialogVisible = false
-        },
-
        /**
         *
         * @param {string} prefix
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@ -121,6 +121,19 @@ body {
  padding-right: 10px;
 }

+.type-selector-header {
+  height: 30px;
+  line-height: 30px;
+  font-size: 15px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.type-selector-item {
+  min-width: 100px;
+  text-align: center;
+}
+
 .nav-pane-container {
  overflow: hidden;

--- a/frontend/src/utils/i18n.js
+++ b/frontend/src/utils/i18n.js
@ -2,8 +2,8 @@ import { createI18n } from 'vue-i18n'
 import { lang } from '@/langs/index.js'

 export const i18n = createI18n({
-    locale: 'en-us',
-    fallbackLocale: 'en-us',
+    locale: 'en',
+    fallbackLocale: 'en',
    globalInjection: true,
    legacy: false,
    messages: {
--- a/screenshots/dark_en.png
+++ b/screenshots/dark_en.png
--- a/screenshots/dark_zh.png
+++ b/screenshots/dark_zh.png
--- a/screenshots/light_en.png
+++ b/screenshots/light_en.png
--- a/screenshots/light_zh.png
+++ b/screenshots/light_zh.png