doc: update screenshots

.github/workflows/release-linux.yaml

@@ -48,7 +48,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Build frontend assets
         shell: bash

.github/workflows/release-macos.yaml

@@ -54,7 +54,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Build frontend assets
         shell: bash
@@ -80,29 +80,34 @@ jobs:
       #          AC_USERNAME: ${{ secrets.AC_USERNAME }}
       #          AC_PASSWORD: ${{ secrets.AC_PASSWORD }}
 
-      - name: Compress macOS app
-        shell: bash
-        working-directory: ./build/bin
-        run: |
-          mv tinyrdm.app "Tiny RDM.app"
-          zip -r TinyRDM-${{ steps.normalise_platform.outputs.tag }}.zip "Tiny RDM.app"
-
-      - name: Upload release asset (ZIP Package)
-        shell: bash
-        working-directory: ./build/bin/
-        run: |
-          filepath="TinyRDM-${{ steps.normalise_platform.outputs.tag }}.zip"
-          filename="TinyRDM_${{ steps.normalise_version.outputs.version }}_${{ steps.normalise_platform.outputs.tag }}.zip"
-          upload_url="https://uploads.github.com/repos/${GITHUB_REPOSITORY}/releases/${{ github.event.release.id }}/assets"
-          curl -s -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" -H "Content-Type: application/zip" --data-binary @$filepath "$upload_url?name=$filename"
+      - name: Checkout create-image
+        uses: actions/checkout@v2
+        with:
+          repository: create-dmg/create-dmg
+          path: ./build/create-dmg
+          ref: master
 
       - name: Build macOS DMG
         shell: bash
-        working-directory: ./build/bin
+        working-directory: ./build
         run: |
-          rm TinyRDM-${{ steps.normalise_platform.outputs.tag }}.zip
-          ln -s /Applications Applications
-          hdiutil create -volname "Tiny RDM" -srcfolder . -ov -format UDBZ TinyRDM-${{ steps.normalise_platform.outputs.tag }}.dmg
+          mv bin/tinyrdm.app "bin/Tiny RDM.app"
+          ./create-dmg/create-dmg \
+            --no-internet-enable \
+            --volname "Tiny RDM" \
+            --volicon "bin/Tiny RDM.app/Contents/Resources/iconfile.icns" \
+            --background "dmg/background.tiff" \
+            --text-size 12 \
+            --window-pos 400 400 \
+            --window-size 660 450 \
+            --icon-size 80 \
+            --icon "Tiny RDM.app" 180 180 \
+            --hide-extension "Tiny RDM.app" \
+            --app-drop-link 480 180 \
+            --add-file "Repair" "dmg/fix-app" 230 290 \
+            --add-file "损坏修复" "dmg/fix-app_zh" 430 290 \
+            "bin/TinyRDM-${{ steps.normalise_platform.outputs.tag }}.dmg" \
+            "bin"
 
       - name: Upload release asset (DMG Package)
         shell: bash

.github/workflows/release-windows.yaml

@@ -47,7 +47,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Build frontend assets
         shell: bash

README.md

@@ -24,6 +24,12 @@ Linux.</strong>
  <img alt="screenshot" src="screenshots/dark_en.png">
 </picture>
 
+<picture>
+ <source media="(prefers-color-scheme: dark)" srcset="screenshots/dark_en2.png">
+ <source media="(prefers-color-scheme: light)" srcset="screenshots/light_en2.png">
+ <img alt="screenshot" src="screenshots/dark_en2.png">
+</picture>
+
 ## Feature
 
 * Super lightweight, built on Webview2, without embedded browsers (Thanks

README_zh.md

@@ -20,6 +20,12 @@
  <img alt="screenshot" src="screenshots/dark_zh.png">
 </picture>
 
+<picture>
+ <source media="(prefers-color-scheme: dark)" srcset="screenshots/dark_zh2.png">
+ <source media="(prefers-color-scheme: light)" srcset="screenshots/light_zh2.png">
+ <img alt="screenshot" src="screenshots/dark_zh2.png">
+</picture>
+
 ## 功能特性
 
 * 极度轻量，基于Webview2，无内嵌浏览器（感谢[Wails](https://github.com/wailsapp/wails)）

build/dmg/fix-app

@@ -0,0 +1,40 @@
+#!/bin/bash
+clear
+BLACK="\033[0;30m"
+DARK_GRAY="\033[1;30m"
+BLUE="\033[0;34m"
+LIGHT_BLUE="\033[1;34m"
+GREEN="\033[0;32m"
+LIGHT_GREEN="\033[1;32m"
+CYAN="\033[0;36m"
+LIGHT_CYAN="\033[1;36m"
+RED="\033[0;31m"
+LIGHT_RED="\033[1;31m"
+PURPLE="\033[0;35m"
+LIGHT_PURPLE="\033[1;35m"
+BROWN="\033[0;33m"
+YELLOW="\033[0;33m"
+LIGHT_GRAY="\033[0;37m"
+WHITE="\033[1;37m"
+NC="\033[0m"
+
+parentPath=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+cd "$parentPath"
+appPath=$( find "$parentPath" -name '*.app' -maxdepth 1)
+appName=${appPath##*/}
+appBashName=${appName// /\ }
+appDIR="/Applications/${appBashName}"
+echo -e "This tool fix these situations: \"${appBashName}\" is damaged and can't not be opened."
+echo ""
+if [ ! -d "$appDIR" ];then
+  echo ""
+  echo -e "Execution result: ${RED}You haven't installed ${appBashName} yet, please install it first.${NC}"
+  else
+  echo -e "${YELLOW}Please enter your login password, and then press enter. (The password is invisible during input)${NC}"
+  sudo spctl --master-disable
+  sudo xattr -rd com.apple.quarantine /Applications/"$appBashName"
+  sudo xattr -rc /Applications/"$appBashName"
+  sudo codesign --sign - --force --deep /Applications/"$appBashName"
+  echo -e "Execution result: ${GREEN}Already fixed! ${NC} ${appBashName} will work correctly.${NC}"
+fi
+echo -e "You can close this window now"

build/dmg/fix-app_zh

@@ -24,14 +24,14 @@ appPath=$( find "$parentPath" -name '*.app' -maxdepth 1)
 appName=${appPath##*/}
 appBashName=${appName// /\ }
 appDIR="/Applications/${appBashName}"
-echo -e "『${appBashName} 已损坏，无法打开/ 来自身份不明的开发者』等问题修复工具"
+echo -e "『${appBashName} 提示已损坏，无法打开/ 来自身份不明的开发者』等问题修复工具"
 echo ""
-#未安装APP时提醒安装，已安装绕过公证
+# 未安装APP时提醒安装，已安装绕过公证
 if [ ! -d "$appDIR" ];then
   echo ""
   echo -e "执行结果：${RED}您还未安装 ${appBashName} ，请先安装${NC}"
   else
-  #绕过公证
+  # 绕过公证
   echo -e "${YELLOW}请输入开机密码，输入完成后按下回车键（输入过程中密码是看不见的）${NC}"
   sudo spctl --master-disable
   sudo xattr -rd com.apple.quarantine /Applications/"$appBashName"

frontend/src/components/content/ContentPane.vue

@@ -12,12 +12,12 @@ import Detail from '@/components/icons/Detail.vue'
 import ContentValueWrapper from '@/components/content_value/ContentValueWrapper.vue'
 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'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 import ContentMonitor from '@/components/content_value/ContentMonitor.vue'
 import { decodeRedisKey } from '@/utils/key_convert.js'
 import ContentPubsub from '@/components/content_value/ContentPubsub.vue'
+import Subscribe from '@/components/icons/Subscribe.vue'
 
 const themeVars = useThemeVars()
 
@@ -198,7 +198,7 @@ watch(
                 <template #tab>
                     <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
                         <n-icon size="16">
-                            <pub
+                            <subscribe
                                 :inverse="selectedSubTab === BrowserTabType.PubMessage.toString()"
                                 :stroke-color="themeVars.tabColor"
                                 stroke-width="4" />

frontend/src/components/content_value/ContentServerStatus.vue

@@ -1,5 +1,19 @@
 <script setup>
-import { cloneDeep, flatMap, get, isEmpty, map, mapValues, pickBy, slice, split, sum, toArray, toNumber } from 'lodash'
+import {
+    cloneDeep,
+    flatMap,
+    get,
+    isEmpty,
+    map,
+    mapValues,
+    pickBy,
+    random,
+    slice,
+    split,
+    sum,
+    toArray,
+    toNumber,
+} from 'lodash'
 import { computed, onMounted, onUnmounted, reactive, ref, shallowRef, toRaw, watch } from 'vue'
 import IconButton from '@/components/common/IconButton.vue'
 import Filter from '@/components/icons/Filter.vue'
@@ -119,7 +133,59 @@ const _updateChart = (info) => {
         dataset2 = dataset2.concat(output)
         dataset2 = slice(dataset2, Math.max(0, dataset2.length - statusHistory))
         networkRate.value = generateData(networkRate.value, timeLabels, [dataset1, dataset2])
-        // console.log(dataset1, dataset2)
+    }
+}
+
+/**
+ * for mock activity data only
+ * @private
+ */
+const _mockChart = () => {
+    const timeLabels = []
+    for (let i = 0; i < 5; i++) {
+        timeLabels.push(dayjs().add(5, 'seconds').format('hh:mm:ss'))
+    }
+
+    // commands per seconds
+    {
+        const dataset = []
+        for (let i = 0; i < 5; i++) {
+            dataset.push(random(10, 200))
+        }
+        cmdRate.value = generateData(cmdRate.value, timeLabels, [dataset])
+    }
+
+    // connected clients
+    {
+        const dataset = []
+        for (let i = 0; i < 5; i++) {
+            dataset.push(random(10, 20))
+        }
+        connectedClients.value = generateData(connectedClients.value, timeLabels, [dataset])
+    }
+
+    // memory usage
+    {
+        const dataset = []
+        for (let i = 0; i < 5; i++) {
+            dataset.push(random(120 * 1024 * 1024, 200 * 1024 * 1024))
+        }
+        memoryUsage.value = generateData(memoryUsage.value, timeLabels, [dataset])
+    }
+
+    // network input/output rate
+    {
+        const dataset1 = []
+        for (let i = 0; i < 5; i++) {
+            dataset1.push(random(100, 1500))
+        }
+
+        const dataset2 = []
+        for (let i = 0; i < 5; i++) {
+            dataset2.push(random(200, 3000))
+        }
+
+        networkRate.value = generateData(networkRate.value, timeLabels, [dataset1, dataset2])
     }
 }
 
@@ -172,6 +238,7 @@ onMounted(() => {
         onToggleRefresh(true)
     } else {
         setTimeout(refreshInfo, 5000)
+        // setTimeout(_mockChart, 1000)
     }
     refreshInfo()
 })
@@ -357,31 +424,66 @@ const networkRate = shallowRef({
     ],
 })
 
-const chartOption = {
+const chartOption = computed(() => {
+    return {
         responsive: true,
         maintainAspectRatio: false,
         events: [],
         scales: {
+            x: {
+                grid: {
+                    color: themeVars.value.borderColor,
+                },
+                ticks: {
+                    color: themeVars.value.textColor3,
+                },
+            },
             y: {
                 beginAtZero: true,
                 stepSize: 1024,
                 suggestedMin: 0,
+                grid: {
+                    color: themeVars.value.borderColor,
+                },
                 ticks: {
+                    color: themeVars.value.textColor3,
                     precision: 0,
                 },
             },
         },
-}
+        plugins: {
+            legend: {
+                labels: {
+                    color: themeVars.value.textColor2,
+                },
+            },
+        },
+    }
+})
 
-const byteChartOption = {
+const byteChartOption = computed(() => {
+    return {
         responsive: true,
         maintainAspectRatio: false,
         events: [],
         scales: {
+            x: {
+                grid: {
+                    color: themeVars.value.borderColor,
+                },
+                ticks: {
+                    color: themeVars.value.textColor3,
+                },
+            },
             y: {
                 beginAtZero: true,
+                stepSize: 1024,
                 suggestedMin: 0,
+                grid: {
+                    color: themeVars.value.borderColor,
+                },
                 ticks: {
+                    color: themeVars.value.textColor3,
                     precision: 0,
                     // format display y axios tag
                     callback: function (value, index, values) {
@@ -390,7 +492,15 @@ const byteChartOption = {
                 },
             },
         },
-}
+        plugins: {
+            legend: {
+                labels: {
+                    color: themeVars.value.textColor2,
+                },
+            },
+        },
+    }
+})
 </script>
 
 <template>

frontend/src/components/dialogs/PreferencesDialog.vue

@@ -45,7 +45,7 @@ const keyOptions = computed(() => {
 const onSavePreferences = async () => {
     const success = await prefStore.savePreferences()
     if (success) {
-        $message.success(i18n.t('dialogue.handle_succ'))
+        // $message.success(i18n.t('dialogue.handle_succ'))
         dialogStore.closePreferencesDialog()
     }
 }

frontend/src/components/icons/Pub.vue

@@ -1,46 +0,0 @@
-<script setup>
-const props = defineProps({
-    inverse: {
-        type: Boolean,
-        default: false,
-    },
-    strokeWidth: {
-        type: [Number, String],
-        default: 3,
-    },
-    strokeColor: {
-        type: String,
-        default: 'currentColor',
-    },
-})
-</script>
-
-<template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M33 38H22V30H36V22H44V38H39L36 41L33 38Z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :fill="props.inverse ? 'currentColor' : 'none'"
-            :stroke-width="props.strokeWidth"
-            d="M4 6H36V30H17L13 34L9 30H4V6Z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
-            :stroke-width="props.strokeWidth"
-            d="M12 22H18"
-            stroke-linecap="round" />
-        <path
-            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
-            :stroke-width="props.strokeWidth"
-            d="M12 14H24"
-            stroke-linecap="round" />
-    </svg>
-</template>
-
-<style lang="scss" scoped></style>