1 files changed, 365 insertions, 0 deletions
diff --git a/src/components/connections/ConnectionSettingsModal.module.scss b/src/components/connections/ConnectionSettingsModal.module.scss
new file mode 100644
index 0000000..cfb46b2
--- /dev/null
+++ b/src/components/connections/ConnectionSettingsModal.module.scss
@@ -0,0 +1,365 @@
+// 选择器写两遍是为了压过 Modal.module.scss 的 .content（同为单类选择器，
+// 打包顺序不确定），确保这里的 padding / max-height / overflow 生效
+.modal.modal {
+  display: flex;
+  flex-direction: column;
+  width: 640px;
+  max-width: calc(100vw - 48px);
+  max-height: calc(100vh - 64px);
+  padding: 0;
+  border-radius: 18px;
+  overflow: hidden;
+
+  // Modal 默认用 translate(-50%,-50%) 居中，而带 transform/translate 的祖先会成为
+  // position: fixed 的包含块 —— dnd 拖拽中的元素正是 fixed 定位的，会整体偏移半个
+  // 弹窗。这里换成 inset + auto margin 居中，不引入任何变换。
+  inset: 0;
+  translate: none;
+  margin: auto;
+  height: fit-content;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 16px 22px;
+  border-bottom: 1px solid var(--color-separator);
+}
+
+.headerTitle {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-highlight);
+}
+
+.headerClose {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-badge-bg);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-hover-soft);
+    color: var(--color-text-highlight);
+  }
+}
+
+.body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px 22px 20px;
+}
+
+/* ---------- 单行设置 ---------- */
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--color-separator);
+}
+
+.rowLabel {
+  font-size: 0.85rem;
+  color: var(--color-text);
+  white-space: nowrap;
+}
+
+.rowHint {
+  font-size: 0.72rem;
+  color: var(--color-text-secondary);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rowControl {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.textInput {
+  width: 240px;
+  max-width: 100%;
+  height: 34px;
+  padding: 0 11px;
+  border-radius: 9px;
+  border: 1px solid var(--color-input-border);
+  background: var(--color-input-bg);
+  color: var(--color-text);
+  font: inherit;
+  font-size: 0.8rem;
+  outline: none;
+
+  &:focus {
+    border-color: var(--color-focus-blue);
+  }
+}
+
+/* ---------- 分区 ---------- */
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 18px 0 0;
+}
+
+.sectionTitle {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--color-text-highlight);
+}
+
+.sectionHint {
+  font-size: 0.72rem;
+  color: var(--color-text-secondary);
+  margin-top: -6px;
+}
+
+/* ---------- 列管理 ---------- */
+
+.columnsGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.columnsPane {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.paneHead {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.72rem;
+  color: var(--color-text-secondary);
+}
+
+.paneCount {
+  margin-left: auto;
+  padding: 1px 8px;
+  border-radius: 6px;
+  background: var(--color-badge-bg);
+  color: var(--color-badge-fg);
+  font-variant-numeric: tabular-nums;
+}
+
+.paneBodyFilled,
+.paneBodyOutlined {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  border-radius: 12px;
+  min-height: 120px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.paneBodyFilled {
+  background: var(--color-track);
+}
+
+.paneBodyOutlined {
+  border: 1px solid var(--color-card-border);
+}
+
+.enabledItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 9px;
+  background: var(--color-card);
+  border: 1px solid var(--color-card-border);
+}
+
+.enabledItemDragging {
+  border-color: var(--color-focus-blue);
+  box-shadow: var(--shadow-popover);
+}
+
+.dragHandle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  color: var(--color-text-secondary);
+  cursor: grab;
+
+  &:hover {
+    background: var(--color-hover-soft);
+    color: var(--color-text-highlight);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-focus-blue);
+    outline-offset: 1px;
+  }
+}
+
+.availableItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 10px;
+  border: none;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+
+  &:hover {
+    background: var(--color-hover-soft);
+  }
+}
+
+.itemLabel {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.78rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.addSign {
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+
+.removeBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: var(--color-hover-soft);
+    color: var(--color-text-highlight);
+  }
+
+  &:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+}
+
+.removeBtn:hover {
+  color: var(--color-danger);
+}
+
+.paneEmpty {
+  padding: 34px 0;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  opacity: 0.7;
+}
+
+/* ---------- 客户端标签 ---------- */
+
+.tagList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tagRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .textInput {
+    flex: 1;
+    width: auto;
+    min-width: 0;
+  }
+}
+
+/* ---------- 页脚 ---------- */
+
+.footer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  padding: 14px 22px;
+  border-top: 1px solid var(--color-separator);
+  background: var(--color-track);
+}
+
+.ghostBtn {
+  height: 36px;
+  padding: 0 15px;
+  border-radius: 10px;
+  border: 1px solid var(--color-card-border);
+  background: var(--color-card);
+  color: var(--color-text);
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  align-self: flex-start;
+
+  &:hover {
+    border-color: var(--color-focus-blue);
+    color: var(--color-focus-blue);
+  }
+}
+
+.primaryBtn {
+  height: 36px;
+  margin-left: auto;
+  padding: 0 20px;
+  border-radius: 10px;
+  border: none;
+  background: var(--color-focus-blue);
+  color: #fff;
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(1.08);
+  }
+}