@voplus/morpho-csp 11.2.5 → 11.2.7

package/es/modules/self-registration/clda-form/components/CLDAContactList/index.css

@@ -1,97 +1,334 @@
+/**
+ * 人员行（股东 / 董事）样式。
+ *
+ * 设计要点：
+ * 1. 扁平行 —— 全页只有 Section 一层卡片，行与行之间只用 1px 分隔线；
+ * 2. 三级文字层级 —— 组标题（#3d4352/700）→ 值（#3d4352/500）→ 字段标签（#5f6b7d/500）；
+ * 3. 动作区固定在网格最后一列（56px），不随内容宽度漂移；
+ * 4. 用容器查询按“实际可用宽度”切换形态，兼容 DefaultView 宽屏与 PropertiesView 侧栏（约 320-360px）。
+ */
+
 .clda-contact-list {
-	.detail-section {
-		margin-bottom: 10px;
+	/* 注意：容器查询锚点在父级 `.clda-list` 上（容器不能查询自己），见 style/common.css */
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) 120px 156px 56px;
+	align-items: start;
+	gap: 20px;
+	padding: 16px 18px 17px;
+	margin: 0 -18px;
+	border-bottom: 1px solid var(--border-color-split, #f0f0f0);
+	transition: background 0.14s ease;
+	font-variant-numeric: tabular-nums;
 
-		&.wider {
-			margin-bottom: 18px;
-		}
+	&:hover {
+		background: var(--item-hover-bg-color, #f8fafc);
+	}
+
+	/* 董事 / CEO 行没有股数与资本两列 */
+	&.no-nums {
+		grid-template-columns: minmax(0, 1fr) 56px;
 	}
 
-	.required-information {
-		.contact-value {
-			height: 27px;
-			color: var(--purple-primary-color);
-			font-weight: bold;
-			font-size: 20px;
-			line-height: 27px;
+	/* 联系人缺失时的降级态：右侧仍保留动作区，保证该行还能被删除 */
+	&--missing {
+		grid-template-columns: minmax(0, 1fr) auto;
+		border-bottom: 1px dashed var(--border-color, #ebebeb);
+
+		.name {
+			color: var(--default-color, #8b97ad);
+			font-size: 13px;
+			font-weight: 500;
 		}
+	}
+
+	.row-main {
+		min-width: 0;
+	}
+
+	.name-line {
+		display: flex;
+		align-items: baseline;
+		gap: 10px;
+		min-width: 0;
+		flex-wrap: wrap;
+	}
 
-		.contact-label {
-			height: 19px;
-			color: #868686;
+	.name {
+		font-size: 15px;
+		font-weight: 700;
+		color: var(--header-color, #252525);
+		letter-spacing: -0.005em;
+		overflow-wrap: anywhere;
+	}
+
+	.name-meta {
+		font-size: 11.5px;
+		color: #8a90a0;
+	}
+
+	/* ---------- 数值列 ---------- */
+	.nums {
+		display: contents;
+	}
+
+	.num {
+		text-align: right;
+	}
+
+	.num .v {
+		display: block;
+		font-size: 15.5px;
+		font-weight: 700;
+		color: var(--purple-primary-color, #1a4fb3);
+		line-height: 21px;
+		letter-spacing: -0.005em;
+		overflow-wrap: anywhere;
+
+		&.dim {
+			color: #b6bcc8;
 			font-weight: 500;
-			font-size: 14px;
-			line-height: 19px;
 		}
 	}
 
+	.num .k {
+		display: block;
+		margin-top: 2px;
+		font-size: 11px;
+		font-weight: 500;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		color: #5f6b7d;
+	}
+
+	/* ---------- 动作区：固定列，图标本体样式在 theme 的 .action-button 共享类 ---------- */
 	.action-button {
-		min-width: 43px;
-		font-size: 14px;
-		padding-right: 4px;
+		justify-content: flex-end;
+		align-items: flex-start;
+	}
+
+	/* ---------- 编辑态：仅保留行级布局（块/字段样式在 style/clda-form-theme.css） ---------- */
+	&.editing {
+		background: #fbfdff;
 
-		> span {
-			margin-left: 6px;
-			cursor: pointer;
+		.edit-area {
+			grid-column: 1 / -1;
+			margin-top: 2px;
 		}
 
-		.delete-icon {
-			&:hover {
-				color: var(--delete-color);
-			}
+		.edit-bar {
+			grid-column: 1 / -1;
 		}
+	}
 
-		.edit-icon {
-			&:hover {
-				color: var(--primary-color);
-			}
+	/* ---------- 校验提示 ---------- */
+	.non-empty-check-prompt {
+		grid-column: 1 / -1;
+		display: flex;
+		align-items: flex-start;
+		gap: 6px;
+		margin-top: 10px;
+		padding-top: 10px;
+		border-top: 1px solid var(--border-color-split, #f0f0f0);
+		color: #a84141;
+		font-size: 12.5px;
+		font-weight: 600;
+
+		.prompt-mark {
+			color: var(--delete-color, #ee6868);
 		}
 	}
 
-	.phone-email-information {
+	/* ---------- 编辑态输入控件统一 ---------- */
+	.ant-input,
+	.ant-input-number,
+	.ant-picker {
 		height: 32px;
-		display: flex;
-		align-items: center;
+		border-radius: var(--border-radius, 5px);
+		font-size: 13px;
+	}
 
-		.phone-email-label {
-			width: 120px;
-			color: #868686;
-			font-weight: 500;
-			font-size: 14px;
-			line-height: 19px;
+	.ant-input-number {
+		width: 100%;
+	}
+
+	.f .ant-input,
+	.gv .ant-input {
+		width: 100%;
+	}
+}
+
+/* ================= 中窄（DefaultView 窄屏 / 平板）：数值行下移 ================= */
+@container cldacontact (max-width: 679px) {
+	.clda-contact-list {
+		grid-template-columns: minmax(0, 1fr) 56px;
+		grid-template-areas:
+			"main acts"
+			"nums nums";
+		row-gap: 10px;
+
+		&.no-nums {
+			grid-template-areas: "main acts";
 		}
 
-		.phone-email-value {
-			color: #5d5d5d;
-			font-weight: bold;
-			font-size: 14px;
-			line-height: 19px;
+		.row-main {
+			grid-area: main;
+		}
+
+		.nums {
+			grid-area: nums;
+			display: flex;
+			flex-wrap: wrap;
+			gap: 6px 20px;
+			padding-top: 2px;
+		}
+
+		.num {
+			text-align: left;
+		}
+
+		.num .v {
+			display: inline;
+			font-size: 12.5px;
+		}
+
+		.num .k {
+			display: inline;
+			margin-top: 0;
+			margin-right: 6px;
+		}
+
+		.action-button {
+			grid-area: acts;
+		}
+
+		.gv-grid2 {
+			grid-template-columns: minmax(0, 1fr);
+		}
+
+		&.editing .fgrid.c3 {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
 		}
 	}
+}
 
-	.basic-information {
-		.basic-label {
-			width: 120px;
-			margin-bottom: 15px;
-			color: #868686;
-			font-weight: 500;
-			font-size: 14px;
-			line-height: 19px;
+/* ================= 窄（PropertiesView 侧栏）：全堆叠 ================= */
+@container cldacontact (max-width: 459px) {
+	.clda-contact-list {
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-areas:
+			"main"
+			"nums"
+			"acts";
+		row-gap: 10px;
+
+		.nums {
+			display: grid;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			gap: 8px 12px;
 		}
 
-		.basic-value {
-			color: #5d5d5d;
-			font-weight: bold;
+		.num .v {
+			display: block;
 			font-size: 14px;
-			line-height: 19px;
+		}
+
+		.num .k {
+			display: block;
+			margin-top: 3px;
+			margin-right: 0;
+		}
+
+		.action-button {
+			justify-content: flex-start;
+		}
+
+		.grp {
+			grid-template-columns: minmax(0, 1fr);
+			gap: 4px;
+			margin-top: 13px;
+		}
+
+		.grp > .gk {
+			padding-top: 0;
+		}
+
+		.gv-inline {
+			display: block;
+		}
+
+		.gv-inline .f {
+			display: block;
+
+			+ .f {
+				margin-top: 4px;
+			}
+		}
+
+		.internal-form {
+			grid-template-columns: minmax(0, 1fr);
+		}
+
+		&.editing {
+			.fgrid.c2,
+			.fgrid.c3 {
+				grid-template-columns: minmax(0, 1fr);
+			}
+
+			.identity-fields .ant-form {
+				grid-template-columns: minmax(0, 1fr);
+			}
+
+			.edit-bar {
+				justify-content: stretch;
+
+				.ant-btn {
+					flex: 1;
+				}
+			}
 		}
 	}
+}
+
+/* ================= 兜底：不支持容器查询的浏览器按窗口宽度近似 ================= */
+@media (max-width: 720px) {
+	.clda-contact-list {
+		grid-template-columns: minmax(0, 1fr) 56px;
+		grid-template-areas:
+			"main acts"
+			"nums nums";
+		row-gap: 10px;
+
+		&.no-nums {
+			grid-template-areas: "main acts";
+		}
+
+		.nums {
+			grid-area: nums;
+			display: flex;
+			flex-wrap: wrap;
+			gap: 6px 20px;
+		}
 
-	.save-cancel-btn {
-		margin-bottom: 15px;
+		.num {
+			text-align: left;
+		}
+
+		.num .v,
+		.num .k {
+			display: inline;
+			font-size: 12.5px;
+		}
+
+		.action-button {
+			grid-area: acts;
+		}
 	}
+}
 
-	.halvingline {
-		margin-bottom: 40px;
+/* 窄容器：行内边距跟随卡片 14px */
+@container cldacontact (max-width: 459px) {
+	.clda-contact-list {
+		padding: 14px;
+		margin: 0 -14px;
 	}
 }

package/es/modules/self-registration/clda-form/components/CLDAContactList/index.d.ts

@@ -1,15 +1,21 @@
 import React from "react";
 import { IFormPeopleOptions, IShareholderOptions } from "../../../../../data/clda-form";
 import "./index.css";
+/**
+ * 人员行（股东 / 董事 / 首席执行官）：只读态按 Basic / Address / Identity / Internal Use 四组展示，
+ * 编辑态切换为「分组块 + 块标题在字段上方 + 底部动作栏」。
+ * 布局由容器查询按实际可用宽度切换，兼容 DefaultView 宽屏与 PropertiesView 侧栏（约 320-360px）。
+ */
 declare const CLDAContactList: (props: {
     /** CLDAForm id */
     formId: string;
     memberId: string;
-    /** 是否显示 Representative */
+    /** 是否显示 Internal Use Only（仅 defaultView 下的股东会传 true） */
     isOnlyInternalUse?: boolean;
     /** shareholders */
     shareholders?: IShareholderOptions;
-    contacts: IFormPeopleOptions;
+    /** 联系人记录；与 shareholders / officerIds 靠 id 关联，缺失时渲染降级行 */
+    contacts?: IFormPeopleOptions;
     /** members or officers of index */
     memberIndex?: number;
     /** members or officers of length */