fix: fix some bugs

- 优化设置界面 UI
- 修复麦克风单双声道设置 UI 显示

Author: ATRIOR-LCL

CHANGELOG.md

@@ -5,12 +5,15 @@ All notable changes to this project will be documented in this file 🌱.
 ## [Unreleased]
 ### Added
 - 新增开机自启动管理功能
+- 新增 microphone 双声道合并
 
 ### Fixed
 - 修复了停止推流时本地视频显示异常问题
+- 修复无登陆状态时的登出异常
 
 ### Change
 - 协议更新
+- UI 优化
 
 ---
 

src/electron/main.ts

@@ -129,6 +129,8 @@ function createSettingsWindow() {
     show: false,
     titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'hidden',
     ...(process.platform === 'win32' && { frame: false }),
+    vibrancy: 'sidebar', // 或 'sidebar'
+    visualEffectState: 'active',
   });
 
   // 窗口关闭时清空引用
@@ -193,8 +195,10 @@ function setupIpcHandlers() {
 
   ipcMainHandle('logout', async () => {
     try {
-      await webSocketService.cancelReady();
-      configManager.clearUserConfig();
+      if (configManager && webSocketService) {
+        await webSocketService.cancelReady();
+        configManager.clearUserConfig();
+      }
       app.quit();
       log.info('登出成功');
       return { success: true };

src/ui/components/config-dialog.vue

@@ -34,15 +34,11 @@ export default class ConfigDialog extends Vue {
   @Inject()
   closeConfigDialog: Function;
 
-  // 强制更新的 key
-  private componentKey = 0;
-
   // 监听对话框打开
   @Watch('configDialogVisible')
   onDialogChange(newVal: boolean) {
     if (newVal) {
       this.deviceManager.updateSimulcastBitrates();
-      this.forceUpdate();
     }
   }
 
@@ -68,7 +64,6 @@ export default class ConfigDialog extends Vue {
    */
   set selectedChannelRid(rid: string) {
     this.deviceManager.selectSimulcastChannel(rid);
-    this.forceUpdate();
   }
 
   /**
@@ -89,27 +84,18 @@ export default class ConfigDialog extends Vue {
   get isSampleRateFixed(): boolean {
     // 立体声模式使用 AudioContext，采样率固定
     // 单声道模式使用原始流，采样率可调整
-    const channelMode = this.deviceManager.currentConfigDevice?.settings?.channelMode;
-    return channelMode === 'stereo';
+    const configForm = this.deviceManager.configForm;
+    return configForm?.channelMode === 'stereo';
   }
 
-  /**
-   * 获取采样率的最小值
-   */
   get sampleRateMin(): number {
     return this.deviceManager.currentConfigDevice?.capabilities?.sampleRate?.min || 8000;
   }
 
-  /**
-   * 获取采样率的最大值
-   */
   get sampleRateMax(): number {
     return this.deviceManager.currentConfigDevice?.capabilities?.sampleRate?.max || 48000;
   }
 
-  /**
-   * 转换 rid 名称
-   */
   private convertRidName(rid: string): string {
     const nameMap: Record<string, string> = {
       original: '原画',
@@ -120,39 +106,24 @@ export default class ConfigDialog extends Vue {
     return nameMap[rid] || rid;
   }
 
-  /**
-   * 格式化 simulcast 配置显示
-   */
   private formatSimulcastConfig(config: any): string {
     const name = this.convertRidName(config.rid);
     const bitrate = Math.round(config.maxBitRate);
     const scale = config.scaleResolutionDownBy;
     return `${name} (${scale}x) @ ${bitrate} Kbps`;
   }
 
-  /**
-   * 处理码率选择变化
-   */
   private onSimulcastChange(rid: string) {
     this.deviceManager.selectSimulcastChannel(rid);
-    this.forceUpdate();
   }
 
-  /**
-   * 处理预设分辨率变化
-   */
   private onPresetChange(presetStr: string) {
     this.deviceManager.applyPreset(presetStr);
     this.deviceManager.updateSimulcastBitrates();
-    this.forceUpdate();
   }
 
-  /**
-   * 处理帧率变化
-   */
   private onFrameRateChange() {
     this.deviceManager.updateSimulcastBitrates();
-    this.forceUpdate();
   }
 
   /**
@@ -161,14 +132,9 @@ export default class ConfigDialog extends Vue {
   private onChannelModeChange(mode: 'mono' | 'stereo') {
     // 根据通道模式自动设置声道数
     this.deviceManager.configForm.channelCount = mode === 'stereo' ? 2 : 1;
-    this.forceUpdate();
-  }
-
-  /**
-   * 强制组件更新
-   */
-  private forceUpdate() {
-    this.componentKey++;
+    if (mode === 'stereo') {
+      this.deviceManager.configForm.sampleRate = this.sampleRateMax;
+    }
   }
 }
 </script>
@@ -220,12 +186,8 @@ export default class ConfigDialog extends Vue {
         <div class="capabilities-info">
           <p v-if="deviceManager.currentConfigDevice?.capabilities?.sampleRate">
             采样率:
-            {{ Math.round(sampleRateMin) }}
-            <span v-if="!isSampleRateFixed"> - {{ Math.round(sampleRateMax) }} </span>
-            Hz
-            <span v-if="isSampleRateFixed" style="color: var(--font-secondary-color)">
-              (固定)
-            </span>
+            <span v-if="isSampleRateFixed">{{ Math.round(sampleRateMax) }} Hz</span>
+            <span v-else>{{ Math.round(sampleRateMin) }} - {{ Math.round(sampleRateMax) }} Hz</span>
           </p>
           <p v-else>待获取设备参数信息</p>
         </div>
@@ -263,12 +225,7 @@ export default class ConfigDialog extends Vue {
       </el-form-item>
 
       <el-form-item label="码率">
-        <el-select
-          :key="componentKey"
-          v-model="selectedChannelRid"
-          placeholder="选择码率"
-          @change="onSimulcastChange"
-        >
+        <el-select v-model="selectedChannelRid" placeholder="选择码率" @change="onSimulcastChange">
           <el-option
             v-for="config in simulcastConfigs"
             :key="config.rid"

src/ui/components/device-card.vue

@@ -110,21 +110,22 @@ export default class DeviceCard extends Vue {
 
         <div class="device-handler-buttons">
           <el-button
-            size="small"
             :disabled="isReady"
             circle
             @click="openConfigDialog(device)"
-            class="ghost-button"
+            type="info"
+            plain
+            size="small"
           >
             <SettingsIcon style="width: 16px" />
-            <!-- <span>修改设备参数</span> -->
           </el-button>
           <el-button
-            size="small"
             :disabled="isReady"
             circle
             @click="removeDevice(device)"
-            class="ghost-button danger-ghost-button"
+            type="danger"
+            plain
+            size="small"
           >
             <Trash style="color: var(--bg-pure-color); width: 14px" />
           </el-button>
@@ -269,9 +270,9 @@ export default class DeviceCard extends Vue {
       height: 60%;
       display: flex;
       // background-color: red;
-      gap: 10px;
+      gap: .2rem;
       flex: 1;
-      justify-content: space-between;
+      justify-content: end;
       align-items: center;
     }
   }
@@ -281,7 +282,6 @@ export default class DeviceCard extends Vue {
   background-color: transparent;
   background: transparent;
   color: var(--font-secondary-color);
-  border: 1px solid var(--font-secondary-color);
   transition: all 0.3s ease;
   display: flex;
   justify-content: center;
@@ -304,8 +304,8 @@ export default class DeviceCard extends Vue {
     &:hover {
       background-color: transparent !important;
       background: transparent !important;
-      color: var(--font-secondary-color) !important;
-      border-color: var(--font-secondary-color) !important;
+      // color: var(--font-secondary-color) !important;
+      // border-color: var(--font-secondary-color) !important;
     }
   }
 }

src/ui/components/settings-nav.vue

@@ -28,7 +28,7 @@ export default class SettingsNav extends Vue {}
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  background-color: var(--bg-secondary-color);
+  background-color: transparent;
   & .settings-button {
     width: 85%;
     height: 40px;
@@ -42,7 +42,7 @@ export default class SettingsNav extends Vue {}
     cursor: pointer;
     transition: all 0.3s ease;
     &:hover {
-      background-color: var(--bg-primary-color);
+      background-color: rgba(194, 194, 194, 0.5);
     }
     color: var(--font-primary-color);
   }

src/ui/modules/home/home.view.vue

@@ -237,7 +237,7 @@ export default class HomeView extends Vue {
   @Provide()
   async updateVideoElement(device: Device) {
     try {
-      if (!device.stream) return;
+      if (!device.stream || device.type === 'microphone') return;
 
       const idx = this.findDeviceCardIndex(device);
       if (idx === -1) {