feat(settings): display different content for desktop and web

emqx · Dec 6, 2024 · 1abc5a4 · 1abc5a4
1 parent cb7246f
commit 1abc5a4
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 29 deletions.
diff --git a/apps/desktop/src/renderer/components.d.ts b/apps/desktop/src/renderer/components.d.ts
@@ -22,6 +22,7 @@ declare module 'vue' {
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
+    ElIconDownload: typeof import('@element-plus/icons-vue')['Download']
     ElIconPrinter: typeof import('@element-plus/icons-vue')['Printer']
     ElIconUpload: typeof import('@element-plus/icons-vue')['Upload']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']

diff --git a/apps/desktop/src/renderer/src/main.ts b/apps/desktop/src/renderer/src/main.ts
@@ -1,17 +1,19 @@
+import type { PlatformType } from 'mqttx'
 import useSettingsService from '@database/services/SettingsService'
-import { i18n } from '@mqttx/ui/i18n'
 
+import { i18n } from '@mqttx/ui/i18n'
 import App from './App.vue'
-import { router } from './router'
 
+import { router } from './router'
 import '@mqttx/ui/styles.scss'
 import './assets/scss/main.scss'
 
 // Create Vue
 const app = createApp(App)
-
 const pinia = createPinia()
 
+app.provide<PlatformType>('platformType', 'desktop')
+
 app.use(router).use(pinia)
 
 const { getSettingsInDB } = useSettingsService()

diff --git a/apps/web/components.d.ts b/apps/web/components.d.ts
@@ -22,6 +22,7 @@ declare module 'vue' {
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
+    ElIconDownload: typeof import('@element-plus/icons-vue')['Download']
     ElIconPrinter: typeof import('@element-plus/icons-vue')['Printer']
     ElIconUpload: typeof import('@element-plus/icons-vue')['Upload']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']

diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
@@ -1,9 +1,10 @@
+import type { PlatformType } from 'mqttx'
 import { i18n } from '@mqttx/ui/i18n'
-import App from './App.vue'
 
+import App from './App.vue'
 import { createDatabase } from './database'
-import useSettingsService from './database/services/SettingsService'
 
+import useSettingsService from './database/services/SettingsService'
 import { router } from './router'
 import '@mqttx/ui/styles.scss'
 import './assets/scss/main.scss'
@@ -12,9 +13,10 @@ const database = createDatabase()
 
 // Create Vue
 const app = createApp(App)
-
 const pinia = createPinia()
 
+app.provide<PlatformType>('platformType', 'web')
+
 app.use(router).use(pinia)
 
 database.then(async (db) => {

diff --git a/packages/types/base.ts b/packages/types/base.ts
@@ -1,3 +1,5 @@
+export type PlatformType = 'desktop' | 'web'
+
 export type MQTTVersion = 3 | 4 | 5
 
 export type Protocol = 'mqtt' | 'mqtts'

diff --git a/packages/ui/components.d.ts b/packages/ui/components.d.ts
@@ -20,6 +20,7 @@ declare module 'vue' {
     ElCol: typeof import('element-plus/es')['ElCol']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
+    ElIconDownload: typeof import('@element-plus/icons-vue')['Download']
     ElIconPrinter: typeof import('@element-plus/icons-vue')['Printer']
     ElIconUpload: typeof import('@element-plus/icons-vue')['Upload']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']

diff --git a/packages/ui/src/components/SettingsView.vue b/packages/ui/src/components/SettingsView.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { AutocompleteFetchSuggestionsCallback } from 'element-plus'
-import type { Settings } from 'mqttx'
+import type { PlatformType, Settings } from 'mqttx'
 
 const settings = defineModel<Settings>({ required: true })
 
+const platformType = inject<PlatformType>('platformType', 'web')
+
 const { t } = useI18n()
 const langOptions = [
   { label: '简体中文', value: 'zh' },
@@ -97,19 +99,21 @@ const AImodelsOptions = [
 
         <ElDivider />
 
-        <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16">
-            <label>{{ $t('settings.automatically') }}</label>
-          </ElCol>
-          <ElCol :span="8">
-            <ElSwitch v-model="settings.autoCheck" />
-          </ElCol>
-        </ElRow>
+        <template v-if="platformType === 'desktop'">
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16">
+              <label>{{ $t('settings.automatically') }}</label>
+            </ElCol>
+            <ElCol :span="8">
+              <ElSwitch v-model="settings.autoCheck" />
+            </ElCol>
+          </ElRow>
 
-        <ElDivider />
+          <ElDivider />
+        </template>
 
         <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16" class="flex gap-1">
+          <ElCol :span="16" class="!flex gap-1">
             <label>{{ $t('settings.autoResub') }}</label>
             <ElTooltip
               placement="top"
@@ -129,7 +133,7 @@ const AImodelsOptions = [
         <ElDivider />
 
         <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16" class="flex gap-1">
+          <ElCol :span="16" class="!flex gap-1">
             <label>{{ $t('settings.multiTopics') }}</label>
             <ElTooltip
               placement="top"
@@ -172,7 +176,7 @@ const AImodelsOptions = [
         <ElDivider />
 
         <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16" class="flex gap-1">
+          <ElCol :span="16" class="!flex gap-1">
             <label>{{ $t('settings.syncOsTheme') }}</label>
             <ElTooltip
               placement="top"
@@ -213,7 +217,7 @@ const AImodelsOptions = [
         <ElDivider />
 
         <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16" class="flex gap-1">
+          <ElCol :span="16" class="!flex gap-1">
             <label>{{ $t('settings.jsonHighlight') }}</label>
             <ElTooltip
               placement="top"
@@ -235,34 +239,71 @@ const AImodelsOptions = [
         <ElDivider />
       </section>
 
-      <section class="settings-section">
+      <section v-if="platformType === 'desktop'" class="settings-section">
         <div class="section-title">
-          {{ $t('settings.advanced') }}
+          {{ $t('settings.extends') }}
         </div>
 
         <ElDivider />
 
         <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16" class="flex gap-1">
-            <label>{{ $t('log.logLevel') }}</label>
+          <ElCol :span="16" class="!flex gap-1">
+            <label>MQTTX CLI</label>
             <ElTooltip
               placement="top"
               :open-delay="500"
-              :content="$t('log.logLevelDesc')"
+              :content="$t('settings.installCLITips')"
             >
               <div class="label-icon">
                 <ElIconWarning />
               </div>
             </ElTooltip>
           </ElCol>
           <ElCol :span="8">
-            <ElSelect v-model="settings.logLevel">
-              <ElOption v-for="{ label, value } in logLevelOptions" :key="value" :label="label" :value="value" />
-            </ElSelect>
+            <ElButton
+              class="w-20"
+              type="primary"
+            >
+              <div class="text-main-white w-4 h-4">
+                <ElIconDownload />
+              </div>
+            </ElButton>
           </ElCol>
         </ElRow>
 
         <ElDivider />
+      </section>
+
+      <section class="settings-section">
+        <div class="section-title">
+          {{ $t('settings.advanced') }}
+        </div>
+
+        <ElDivider />
+
+        <template v-if="platformType === 'desktop'">
+          <ElRow type="flex" justify="space-between" align="middle">
+            <ElCol :span="16" class="!flex gap-1">
+              <label>{{ $t('log.logLevel') }}</label>
+              <ElTooltip
+                placement="top"
+                :open-delay="500"
+                :content="$t('log.logLevelDesc')"
+              >
+                <div class="label-icon">
+                  <ElIconWarning />
+                </div>
+              </ElTooltip>
+            </ElCol>
+            <ElCol :span="8">
+              <ElSelect v-model="settings.logLevel">
+                <ElOption v-for="{ label, value } in logLevelOptions" :key="value" :label="label" :value="value" />
+              </ElSelect>
+            </ElCol>
+          </ElRow>
+
+          <ElDivider />
+        </template>
 
         <ElRow type="flex" justify="space-between" align="middle">
           <ElCol :span="16">
@@ -319,7 +360,7 @@ const AImodelsOptions = [
         <ElDivider />
 
         <ElRow type="flex" justify="space-between" align="middle">
-          <ElCol :span="16" class="flex gap-1">
+          <ElCol :span="16" class="!flex gap-1">
             <label>{{ $t('settings.ignoreQoS0Message') }}</label>
             <ElTooltip
               placement="top"