@rexvane/piweb 0.3.1

package/src/components/ProviderSetupModal.module.css

@@ -0,0 +1,560 @@
+.mask {
+	position: fixed;
+	inset: 0;
+	z-index: 130;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 24px;
+	background: var(--dsw-mask);
+	backdrop-filter: blur(8px);
+}
+
+.dialog {
+	width: min(760px, 100%);
+	max-height: min(820px, calc(100vh - 48px));
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	border: 0.5px solid var(--dsw-border-l2);
+	border-radius: 28px;
+	background: var(--dsw-glass-modal);
+	box-shadow: var(--dsw-elevation-prominent);
+}
+
+.builtinDialog {
+	overflow: visible;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 22px 24px 14px;
+}
+
+.title {
+	font-size: 17px;
+	font-weight: 590;
+	letter-spacing: -0.015em;
+}
+
+.body {
+	min-height: 0;
+	overflow-y: auto;
+	padding: 6px 24px 22px;
+}
+
+.builtinBody {
+	overflow: visible;
+}
+
+.field {
+	display: flex;
+	flex-direction: column;
+	gap: 7px;
+	margin-top: 18px;
+}
+
+.field:first-child {
+	margin-top: 0;
+}
+
+.label {
+	font-size: 13px;
+	font-weight: 580;
+	color: var(--dsw-label-secondary);
+}
+
+.hint {
+	font-size: 12px;
+	line-height: 1.55;
+	color: var(--dsw-label-caption);
+}
+
+.input,
+.select,
+.providerTrigger {
+	width: 100%;
+	min-height: 44px;
+	border: 0.5px solid var(--dsw-border-l2);
+	border-radius: 13px;
+	background: var(--dsw-glass-input);
+	color: var(--dsw-label-primary);
+}
+
+.input {
+	padding: 0 13px;
+	font-size: 13.5px;
+}
+
+.select {
+	padding: 0 38px 0 13px;
+	font-size: 13.5px;
+}
+
+.input:focus,
+.select:focus,
+.providerTrigger[data-open="true"] {
+	border-color: var(--dsw-accent);
+	box-shadow: 0 0 0 2px var(--dsw-accent-soft);
+}
+
+.picker {
+	position: relative;
+	z-index: 4;
+	width: min(440px, 100%);
+}
+
+.providerTrigger {
+	display: flex;
+	align-items: center;
+	gap: 11px;
+	padding: 7px 11px;
+	text-align: left;
+}
+
+.providerText {
+	min-width: 0;
+	flex: 1;
+}
+
+.providerName {
+	display: block;
+	overflow: hidden;
+	font-size: 13.5px;
+	font-weight: 570;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.providerMeta {
+	display: block;
+	overflow: hidden;
+	font-size: 11.5px;
+	line-height: 1.35;
+	color: var(--dsw-label-caption);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.menu {
+	position: absolute;
+	top: calc(100% + 8px);
+	left: 0;
+	z-index: 10;
+	width: min(480px, calc(100vw - 64px));
+	overflow: hidden;
+	border: 0.5px solid var(--dsw-border-l2);
+	border-radius: 18px;
+	background: var(--dsw-glass-popover);
+	box-shadow: var(--dsw-elevation-panel);
+}
+
+.searchWrap {
+	position: relative;
+	padding: 10px;
+	border-bottom: 0.5px solid var(--dsw-border-l1);
+}
+
+.searchIcon {
+	position: absolute;
+	top: 50%;
+	left: 21px;
+	display: inline-flex;
+	color: var(--dsw-label-caption);
+	transform: translateY(-50%);
+}
+
+.search {
+	width: 100%;
+	height: 36px;
+	padding: 0 11px 0 34px;
+	border-radius: 10px;
+	background: var(--dsw-hover);
+	font-size: 12.5px;
+}
+
+.providerList {
+	max-height: min(360px, 46vh);
+	overflow-y: auto;
+	padding: 6px;
+}
+
+.providerRow {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	gap: 11px;
+	padding: 8px 9px;
+	border-radius: 13px;
+	text-align: left;
+}
+
+.providerRow:hover {
+	background: var(--dsw-hover);
+}
+
+.providerRow[data-selected="true"] {
+	background: var(--dsw-accent-soft);
+}
+
+.selectedMark {
+	display: inline-flex;
+	flex: none;
+	color: var(--dsw-accent);
+}
+
+.empty {
+	padding: 28px 14px;
+	font-size: 12.5px;
+	text-align: center;
+	color: var(--dsw-label-caption);
+}
+
+.advanced {
+	margin-top: 20px;
+	border-top: 0.5px solid var(--dsw-border-l2);
+}
+
+.advancedButton {
+	display: flex;
+	width: 100%;
+	height: 48px;
+	align-items: center;
+	gap: 6px;
+	font-size: 13.5px;
+	font-weight: 540;
+	text-align: left;
+}
+
+.advancedButton svg {
+	transition: transform 160ms ease;
+}
+
+.advancedButton[data-open="true"] svg {
+	transform: rotate(180deg);
+}
+
+.catalog {
+	margin-top: 18px;
+	padding-top: 18px;
+	border-top: 0.5px solid var(--dsw-border-l2);
+}
+
+.catalogHeader {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+}
+
+.catalogStatus {
+	font-size: 12px;
+	color: var(--dsw-label-caption);
+}
+
+.discoverButton {
+	flex: none;
+	font-size: 12px;
+	color: var(--dsw-label-tertiary);
+	text-decoration: none;
+}
+
+.discoverButton:not(:disabled):hover {
+	color: var(--dsw-accent);
+	text-decoration: underline;
+}
+
+.discoverButton:disabled {
+	cursor: default;
+	opacity: 0.48;
+}
+
+.modelEmpty {
+	margin-top: 13px;
+	padding: 17px;
+	border: 0.5px dashed var(--dsw-border-l3);
+	border-radius: 13px;
+	font-size: 12px;
+	line-height: 1.55;
+	text-align: center;
+	color: var(--dsw-label-caption);
+}
+
+.modelList {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	margin-top: 13px;
+}
+
+.modelRow {
+	display: grid;
+	/* 折叠箭头 | 模型 ID | 名称 | 删除 */
+	grid-template-columns: 28px minmax(0, 1.2fr) minmax(0, 1fr) 34px;
+	gap: 8px;
+	align-items: center;
+}
+
+.modelRow .input {
+	min-height: 40px;
+}
+
+.removeModel {
+	display: inline-flex;
+	height: 40px;
+	align-items: center;
+	justify-content: center;
+	border: 0.5px solid var(--dsw-border-l2);
+	border-radius: 11px;
+	color: var(--dsw-label-tertiary);
+}
+
+.removeModel:hover {
+	background: rgba(236, 19, 19, 0.1);
+	color: var(--dsw-danger);
+}
+
+.addModel {
+	display: inline-flex;
+	height: 34px;
+	align-items: center;
+	gap: 6px;
+	margin-top: 12px;
+	padding: 0 12px;
+	border: 0.5px solid var(--dsw-border-l3);
+	border-radius: 999px;
+	font-size: 12px;
+}
+
+.error {
+	margin-top: 14px;
+	padding: 9px 11px;
+	border-radius: 10px;
+	background: rgba(236, 19, 19, 0.1);
+	color: var(--dsw-danger);
+	font-size: 12px;
+}
+
+.footer {
+	display: flex;
+	flex: none;
+	justify-content: flex-end;
+	gap: 10px;
+	padding: 14px 24px 20px;
+	border-top: 0.5px solid var(--dsw-border-l1);
+}
+
+.footerButton {
+	min-width: 76px;
+	height: 40px;
+	padding: 0 18px;
+	border: 0.5px solid var(--dsw-border-l3);
+	border-radius: 999px;
+	font-size: 13.5px;
+}
+
+.primary {
+	border-color: transparent;
+	background: var(--dsw-label-primary);
+	color: var(--dsw-bg-base);
+	font-weight: 570;
+}
+
+.footerButton:disabled {
+	cursor: default;
+	opacity: 0.42;
+}
+
+@media (max-width: 640px) {
+	.mask {
+		align-items: flex-end;
+		padding: 8px;
+	}
+
+	.dialog {
+		max-height: calc(100vh - 16px);
+		border-radius: 22px;
+	}
+
+	.header {
+		padding: 18px 16px 10px;
+	}
+
+	.body {
+		padding: 4px 16px 18px;
+	}
+
+	.footer {
+		padding: 12px 16px 16px;
+	}
+
+	.picker {
+		width: 100%;
+	}
+
+	.menu {
+		position: fixed;
+		top: auto;
+		right: 8px;
+		bottom: 8px;
+		left: 8px;
+		width: auto;
+		max-height: 72vh;
+	}
+
+	.providerList {
+		max-height: calc(72vh - 58px);
+	}
+
+	.modelRow {
+		grid-template-columns: minmax(0, 1fr) 34px;
+	}
+
+	.modelRow .input:nth-child(2) {
+		grid-column: 1 / -1;
+		grid-row: 2;
+	}
+}
+
+/* ---- 行式模型目录（dsh 对齐）：折叠行 + 容量字段 ---- */
+.modelEntry {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	padding: 6px;
+	border: 0.5px solid var(--dsw-border-l2);
+	border-radius: 12px;
+}
+.rowToggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 40px;
+	flex: none;
+	color: var(--dsw-label-tertiary);
+}
+.capacityRow {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding-left: 28px;
+	flex-wrap: wrap;
+}
+.capacityField {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 12px;
+	color: var(--dsw-label-tertiary);
+}
+.capacityField span {
+	flex: none;
+}
+.capacityField .input,
+.capacityField input {
+	width: 90px;
+}
+.capacityHint {
+	font-size: 11px;
+	color: var(--dsw-label-caption);
+}
+.rowError {
+	padding-left: 28px;
+	font-size: 11.5px;
+	color: var(--dsw-danger);
+}
+.catalogError {
+	font-size: 12px;
+	color: var(--dsw-danger);
+	padding: 4px 0;
+}
+
+/* ---- 候选选择对话框 ---- */
+.candidateMask {
+	position: fixed;
+	inset: 0;
+	z-index: 130;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--dsw-mask);
+}
+.candidateDialog {
+	display: flex;
+	flex-direction: column;
+	width: 460px;
+	max-width: 92vw;
+	max-height: 70vh;
+	border-radius: 20px;
+	background: var(--dsw-glass-modal);
+	box-shadow: var(--dsw-elevation-prominent);
+	padding: 16px;
+	gap: 10px;
+}
+.candidateHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--dsw-label-primary);
+}
+.candidateList {
+	flex: 1;
+	min-height: 120px;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.candidateRow {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 6px 8px;
+	border-radius: 10px;
+	cursor: pointer;
+	font-size: 13px;
+	color: var(--dsw-label-primary);
+}
+.candidateRow:hover {
+	background: var(--dsw-hover);
+}
+.candidateId {
+	font-family: var(--font-mono);
+	font-size: 12.5px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.candidateName {
+	color: var(--dsw-label-tertiary);
+	font-size: 12px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.candidateActions {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding-top: 8px;
+	border-top: 0.5px solid var(--dsw-border-l2);
+}
+.candidateAll {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 12.5px;
+	color: var(--dsw-label-secondary);
+	cursor: pointer;
+}
+.candidatePicked {
+	flex: 1;
+	font-size: 12px;
+	color: var(--dsw-label-caption);
+}