feat: add button tooltip

2025-04-21 04:25:13 +08:00 · 2025-03-12 14:39:03 +08:00 · 2025-03-12 14:39:03 +08:00 · 4cb9897f11
commit 4cb9897f11
parent e99475ba4b
11 changed files with 132 additions and 66 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -43,12 +43,6 @@ onMounted(() => {
    "sidebar content";
 }

-.n-spin-content,
-.n-spin-container {
-  width: 100%;
-  height: 100%;
-}
-
 .n-message {
  user-select: none;
  -webkit-user-select: none;
--- a/src/components/Device.vue
+++ b/src/components/Device.vue
@ -27,9 +27,7 @@ import {
  NDataTable,
  NDropdown,
  NEmpty,
-  NTooltip,
  NFlex,
-  NIcon,
  NSpin,
  DataTableColumns,
  DropdownOption,
@ -45,6 +43,7 @@ import { useI18n } from "vue-i18n";
 import { closeExternalControl, connectExternalControl } from "../websocket";
 import { LogicalSize, getCurrentWindow } from "@tauri-apps/api/window";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import ButtonWithTip from "./common/ButtonWithTip.vue";

 const { t } = useI18n();
 const dialog = useDialog();
@ -359,8 +358,8 @@ function closeWS() {

 <template>
  <div class="container">
-    <div class="device">
-      <NSpin :show="store.showLoadingFlag">
+    <NSpin :show="store.showLoadingFlag">
+      <div class="device">
        <NH4 prefix="bar">{{ $t("pages.Device.localPort") }}</NH4>
        <NInputNumber
          v-model:value="port"
@ -413,21 +412,21 @@ function closeWS() {
              }})
            </div>
            <div class="device-op">
-              <NTooltip trigger="hover">
-                <template #trigger>
-                  <NButton quaternary circle type="info">
-                    <template #icon>
-                      <NIcon><InformationCircle /></NIcon>
-                    </template>
-                  </NButton>
-                </template>
-                scid: {{ store.controledDevice.scid }}
-              </NTooltip>
-              <NButton quaternary circle type="error" @click="shutdownSC()">
-                <template #icon>
-                  <NIcon><CloseCircle /></NIcon>
-                </template>
-              </NButton>
+              <ButtonWithTip
+                quaternary
+                circle
+                type="info"
+                :tip="`scid: ${store.controledDevice.scid}`"
+                :icon="InformationCircle"
+              />
+              <ButtonWithTip
+                quaternary
+                circle
+                type="error"
+                @click="shutdownSC()"
+                :tip="$t('pages.Device.btnShutdown')"
+                :icon="CloseCircle"
+              />
            </div>
          </div>
        </div>
@ -435,17 +434,15 @@ function closeWS() {
          <NH4 style="margin: 20px 0" prefix="bar">{{
            $t("pages.Device.availableDevice")
          }}</NH4>
-          <NButton
+          <ButtonWithTip
            tertiary
            circle
            type="primary"
            @click="refreshDevices"
            style="margin-right: 20px"
-          >
-            <template #icon>
-              <NIcon><Refresh /></NIcon>
-            </template>
-          </NButton>
+            :tip="$t('pages.Device.btnRefresh')"
+            :icon="Refresh"
+          />
        </NFlex>
        <NDataTable
          max-height="120"
@ -465,8 +462,8 @@ function closeWS() {
          :on-clickoutside="onMenuClickoutside"
          @select="onMenuSelect"
        />
-      </NSpin>
-    </div>
+      </div>
+    </NSpin>
  </div>
 </template>

@ -480,13 +477,12 @@ function closeWS() {
 }

 .device {
-  flex-grow: 1;
+  @include common.scrollbar;
+  @include common.flexFullHeight;
  color: var(--light-color);
  background-color: var(--bg-color);
  padding: 0 20px;
-  height: 0;
  overflow-y: auto;
-  @include common.scrollbar;
 }

 .controled-device-list {
--- a/src/components/common/ButtonWithTip.vue
+++ b/src/components/common/ButtonWithTip.vue
@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { NTooltip, NIcon, NButton } from "naive-ui";
+
+const props = defineProps<{
+  tip: string;
+  icon?: Object;
+  circle?: boolean;
+  disabled?: boolean;
+  round?: boolean;
+  size?: "tiny" | "small" | "medium" | "large";
+  secondary?: boolean;
+  tertiary?: boolean;
+  text?: boolean;
+}>();
+
+defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <NTooltip trigger="hover">
+    <template #trigger>
+      <NButton
+        v-bind="$attrs"
+        :circle="props.circle"
+        :disabled="props.disabled"
+        :round="props.round"
+        :size="props.size"
+        :secondary="props.secondary"
+        :tertiary="props.tertiary"
+        :text="props.text"
+      >
+        <template v-if="props.icon" #icon>
+          <NIcon><component :is="props.icon" /></NIcon>
+        </template>
+        <slot></slot>
+      </NButton>
+    </template>
+    {{ props.tip }}
+  </NTooltip>
+</template>
--- a/src/components/setting/Basic.vue
+++ b/src/components/setting/Basic.vue
@ -68,15 +68,17 @@ function changeClipboardSync() {
        $t("pages.Setting.Basic.adbPath.set")
      }}</NButton>
    </NInputGroup>
-    <NH4 prefix="bar">剪切板同步</NH4>
+    <NH4 prefix="bar">{{ $t("pages.Setting.Basic.clipboardSync.title") }}</NH4>
    <NFlex vertical>
      <NCheckbox
        v-model:checked="store.clipboardSync.syncFromDevice"
        @update:checked="changeClipboardSync"
      >
        <NTooltip trigger="hover">
-          <template #trigger>从设备同步</template>
-          设备剪切板发生变化时自动同步更新电脑剪切板
+          <template #trigger>{{
+            $t("pages.Setting.Basic.clipboardSync.syncFromDevice")
+          }}</template>
+          {{ $t("pages.Setting.Basic.clipboardSync.syncFromDeviceTip") }}
        </NTooltip>
      </NCheckbox>
      <NCheckbox
@ -84,8 +86,10 @@ function changeClipboardSync() {
        @update:checked="changeClipboardSync"
      >
        <NTooltip trigger="hover">
-          <template #trigger>粘贴时同步</template>
-          在按键输入模式下，按下 Ctrl + V 可将电脑剪切板内容同步粘贴到设备
+          <template #trigger>{{
+            $t("pages.Setting.Basic.clipboardSync.pasteFromPC")
+          }}</template>
+          {{ $t("pages.Setting.Basic.clipboardSync.pasteFromPCTip") }}
        </NTooltip>
      </NCheckbox>
    </NFlex>
--- a/src/components/setting/Data.vue
+++ b/src/components/setting/Data.vue
@ -11,19 +11,17 @@ import {
  NInput,
  useDialog,
  NCard,
-  NIcon,
 } from "naive-ui";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { LocalStore } from "../../store/localStore";
+import ButtonWithTip from "../common/ButtonWithTip.vue";

 const { t } = useI18n();

 const dialog = useDialog();

-// TODO add tooltip for btn
-
 const localStoreEntries = ref<[string, unknown][]>([]);
 const showDataModal = ref(false);
 const dataModalInputVal = ref("");
@ -80,28 +78,22 @@ function delLocalStore(key?: string) {
    <NFlex justify="space-between">
      <NH4 prefix="bar">{{ $t("pages.Setting.Data.localStore") }}</NH4>
      <NFlex>
-        <NButton
+        <ButtonWithTip
          tertiary
          circle
          type="primary"
          @click="delLocalStore()"
-          style="margin-right: 20px"
-        >
-          <template #icon>
-            <NIcon><TrashBinOutline /></NIcon>
-          </template>
-        </NButton>
-        <NButton
+          :tip="$t('pages.Setting.Data.btnDelAll')"
+          :icon="TrashBinOutline"
+        />
+        <ButtonWithTip
          tertiary
          circle
          type="primary"
          @click="refreshLocalData()"
-          style="margin-right: 20px"
-        >
-          <template #icon>
-            <NIcon><Refresh /></NIcon>
-          </template>
-        </NButton>
+          :tip="$t('pages.Setting.Data.btnRefresh')"
+          :icon="Refresh"
+        />
      </NFlex>
    </NFlex>
    <NP>{{ $t("pages.Setting.Data.delLocalStore.warning") }}</NP>
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@ -48,12 +48,13 @@ const store = useGlobalStore();
  color: var(--light-color);
  overflow-y: auto;
  overflow-x: hidden;
+  // for spin div
  display: flex;
+  flex-direction: column;

  .n-tabs {
    height: 100%;
  }
-
  .n-tab-pane {
    padding: 0;
  }
--- a/src/css/common.scss
+++ b/src/css/common.scss
@ -4,6 +4,14 @@
  height: 100%;
 }

+@mixin flexFullHeight {
+  flex-grow: 1;
+  height: 0;
+  // for child
+  display: flex;
+  flex-direction: column;
+}
+
@mixin scrollbar {
  &::-webkit-scrollbar {
    height: 6px;
--- a/src/css/global.scss
+++ b/src/css/global.scss
@ -1,3 +1,5 @@
+@use "./common.scss";
+
 :root {
  --primary-color: #63e2b7;
  --primary-hover-color: #7fe7c4;
@ -10,8 +12,8 @@
  --gray-color: #6b6e76;
  --red-color: #fc5185;
  --red-pressed-color: #f4336d;
-  --blue-color: #70C0E8;
-  --blue-pressed-color: #66AFD3;
+  --blue-color: #70c0e8;
+  --blue-pressed-color: #66afd3;
 }

 html,
@ -26,3 +28,10 @@ div#app {
  height: 100%;
  box-sizing: border-box;
 }
+
+.n-spin-container {
+  @include common.flexFullHeight;
+  .n-spin-content {
+    @include common.flexFullHeight;
+  }
+}
--- a/src/i18n/en-US.json
+++ b/src/i18n/en-US.json
@ -36,7 +36,9 @@
      "wsConnect": "Control",
      "adbDeviceError": "Unable to get available devices",
      "adbConnectError": "Wireless connection failed",
-      "rotation": "Device rotation {0}°"
+      "rotation": "Device rotation {0}°",
+      "btnShutdown": "Shutdown control",
+      "btnRefresh": "Refresh"
    },
    "Mask": {
      "keyconfigException": "The key mapping config is abnormal, please delete this config",
@ -105,6 +107,13 @@
          "set": "Save",
          "setSuccess": "adb path set successfully",
          "title": "adb path"
+        },
+        "clipboardSync": {
+          "title": "Clipboard Sync",
+          "syncFromDevice": "Sync from device",
+          "syncFromDeviceTip": "Automatically synchronize and update your computer's clipboard when the device clipboard changes.",
+          "pasteFromPC": "Paste from PC",
+          "pasteFromPCTip": "In KeyInpu mode, press Ctrl + V to paste the contents of your computer's clipboard to your device."
        }
      },
      "Data": {
@ -119,7 +128,9 @@
          "warning": "Deleting data may lead to unpredictable consequences, so please operate with caution. \nIf an exception occurs, please try clearing the data and restarting the software."
        },
        "localStore": "Local data",
-        "delCurData": "Delete current data"
+        "delCurData": "Delete current data",
+        "btnRefresh": "Refresh",
+        "btnDelAll": "Clear local data"
      },
      "About": {
        "introduction": "A Scrcpy client in Rust & Tarui aimed at providing mouse and key mapping to control Android device.",
--- a/src/i18n/zh-CN.json
+++ b/src/i18n/zh-CN.json
@ -36,7 +36,9 @@
      "wsConnect": "控制",
      "adbDeviceError": "无法获取可用设备",
      "adbConnectError": "无线连接失败",
-      "rotation": "设备旋转 {0}°"
+      "rotation": "设备旋转 {0}°",
+      "btnShutdown": "关闭控制",
+      "btnRefresh": "刷新"
    },
    "Mask": {
      "keyconfigException": "按键方案异常，请删除此方案",
@ -105,6 +107,13 @@
          "title": "adb 路径",
          "placeholder": "adb 路径",
          "set": "设置"
+        },
+        "clipboardSync": {
+          "title": "剪切板同步",
+          "syncFromDevice": "从设备同步",
+          "syncFromDeviceTip": "设备剪切板发生变化时自动同步更新电脑剪切板",
+          "pasteFromPC": "从电脑粘贴",
+          "pasteFromPCTip": "在按键输入模式下，按下 Ctrl + V 可将电脑剪切板内容同步粘贴到设备"
        }
      },
      "Data": {
@ -119,7 +128,9 @@
          "warning": "删除数据可能导致无法预料的后果，请慎重操作。若出现异常请尝试清空数据并重启软件。"
        },
        "localStore": "本地数据",
-        "delCurData": "删除当前数据"
+        "delCurData": "删除当前数据",
+        "btnDelAll": "清空本地数据",
+        "btnRefresh": "刷新"
      },
      "About": {
        "about": "关于",
--- a/src/main.ts
+++ b/src/main.ts
@ -1,6 +1,6 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
-import "./styles.css";
+import "./css/global.scss";
 import App from "./App.vue";
 import router from "./router";
 import i18n from "./i18n";