feat(ui): 新增支持缩放、拖拽及键盘控制的图片预览组件并优化样式，更新安装程序支持 VC++ 运行库自动安装，多账号支持列表选择。

2026-03-25 07:16:51 +00:00 · 2026-01-16 22:16:55 +08:00
parent b7eb19aad6
commit 6eabd707f8
8 changed files with 456 additions and 44 deletions
--- a/src/pages/SettingsPage.scss
+++ b/src/pages/SettingsPage.scss
@@ -767,3 +767,168 @@
    }
  }
 }
+
+
+// wxid 输入框下拉
+.wxid-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  
+  input {
+    flex: 1;
+    padding-right: 36px;
+  }
+}
+
+.wxid-dropdown-btn {
+  position: absolute;
+  right: 8px;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  
+  &:hover {
+    color: var(--text-primary);
+  }
+  
+  &.open {
+    transform: rotate(180deg);
+  }
+}
+
+.wxid-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.wxid-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+  
+  &:hover {
+    background: var(--bg-tertiary);
+  }
+  
+  &.active {
+    background: var(--primary-light);
+    color: var(--primary);
+  }
+  
+  .wxid-value {
+    font-weight: 500;
+    font-size: 13px;
+  }
+  
+  .wxid-time {
+    font-size: 11px;
+    color: var(--text-tertiary);
+  }
+}
+
+// 多账号选择对话框
+.wxid-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.wxid-dialog {
+  background: var(--bg-primary);
+  border-radius: 16px;
+  width: 400px;
+  max-width: 90vw;
+  max-height: 80vh;
+  overflow: hidden;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.wxid-dialog-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-primary);
+  
+  h3 {
+    margin: 0 0 4px;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+  
+  p {
+    margin: 0;
+    font-size: 13px;
+    color: var(--text-secondary);
+  }
+}
+
+.wxid-dialog-list {
+  padding: 8px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.wxid-dialog-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.15s;
+  
+  &:hover {
+    background: var(--bg-tertiary);
+  }
+  
+  &.active {
+    background: var(--primary-light);
+    
+    .wxid-id {
+      color: var(--primary);
+    }
+  }
+  
+  .wxid-id {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+  
+  .wxid-date {
+    font-size: 12px;
+    color: var(--text-tertiary);
+  }
+}
+
+.wxid-dialog-footer {
+  padding: 16px 24px;
+  border-top: 1px solid var(--border-primary);
+  display: flex;
+  justify-content: flex-end;
+}