@steedos-labs/content-compliance 0.8.7 → 0.8.9

package/public/content-review/amis.css

@@ -152,11 +152,60 @@
     overflow: auto;
 }
 
+/* 「违规画面」缩略图的边长。图片、无图卡片的灰色占位框、放大热区、正文左内边距
+   都取这个值，调整尺寸只改这一处。 */
+.pepsico_ai_review-card{
+    --pepsico-ai-thumb-size: 9rem;
+}
+
+.pepsico_ai_review-card .antd-Card-multiMedia--left .antd-Card-multiMedia-img{
+    width: var(--pepsico-ai-thumb-size);
+    height: var(--pepsico-ai-thumb-size);
+}
+
+/* 「采纳」与意见内容同排、垂直居中，不再单独占一行。
+   有图卡片的正文/操作区在 .antd-Card-multiMedia-flex 这一列里，
+   无图卡片则直接挂在 .antd-Card 这一列上，两种都要改成行排列。 */
+.pepsico_ai_review-card .antd-Card,
+.pepsico_ai_review-card .antd-Card-multiMedia--left .antd-Card-multiMedia-flex{
+    flex-direction: row;
+    align-items: center;
+}
+
+.pepsico_ai_review-card .antd-Card-body{
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+/* 卡片高度由缩略图或占位框决定时，让较短的正文在可用高度内垂直居中，
+   保持上、下留白一致。 */
 .pepsico_ai_review-card-body{
-    padding-bottom: 0px !important; 
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
-.pepsico_ai_review-card .antd-Card-multiMedia--left .antd-Card-footer-wrapper .antd-Card-actions-wrapper .pepsico-adopt{
+.pepsico_ai_review-card .antd-Card-footer-wrapper{
+    flex: 0 0 auto;
+}
+
+/* 没有「违规画面」的 AI 意见不会生成 .antd-Card-multiMedia--left 容器，
+   amis 只在有多媒体的卡片上重置操作区，无图卡片会退回默认样式：
+   整行铺满、顶部带分隔线、文字居中的纯文本链接。
+   这里把 amis 给有图卡片的那几条重置补给所有 AI 意见卡片，
+   保证有图/无图卡片的「采纳」按钮一致。 */
+.pepsico_ai_review-card .antd-Card-footer-wrapper .antd-Card-actions-wrapper .antd-Card-actions{
+    margin-left: unset;
+    border: none;
+    width: unset;
+}
+
+.pepsico_ai_review-card .antd-Card-footer-wrapper .antd-Card-actions-wrapper .antd-Card-actions > a{
+    border: none;
+    flex-grow: 0;
+}
+
+.pepsico_ai_review-card .antd-Card-footer-wrapper .antd-Card-actions-wrapper .pepsico-adopt{
     border-width: 1px;
     border-style: solid;
     font-size: var(--button-size-default-fontSize);
@@ -164,7 +213,6 @@
     border-radius: var(--button-size-default-top-left-border-radius) var(--button-size-default-top-right-border-radius) var(--button-size-default-bottom-right-border-radius) var(--button-size-default-bottom-left-border-radius);
     padding: var(--button-size-default-paddingTop) var(--button-size-default-paddingRight) var(--button-size-default-paddingBottom) var(--button-size-default-paddingLeft);
     margin: var(--button-size-default-marginTop) var(--button-size-default-marginRight) var(--button-size-default-marginBottom) var(--button-size-default-marginLeft);
-    margin-bottom: 0.25rem;
     margin-right: 1rem;
     color: #fff;
     background: var(--button-default-default-bg-color);
@@ -177,21 +225,92 @@
 
 
 .pepsico_ai_review-card .antd-Card-fieldValue .antd-Image-thumb{
-    width: 9rem !important;
-    height: 9rem !important;
+    width: var(--pepsico-ai-thumb-size) !important;
+    height: var(--pepsico-ai-thumb-size) !important;
 }
 
 .pepsico_ai_review-card .antd-Card-fieldValue .antd-Image-thumb img{
     display: none !important;
 }
 
+/* 正文里的第一个字段是「违规画面」的一份副本：图片本身被上面的规则隐藏，
+   留下的空盒子盖在真实图片上，只为提供 amis 的「查看大图」蒙层热区。
+   无图卡片上 amis 渲染的是占位图、不会生成蒙层，这份副本没有用处，
+   还会盖住文字挡住 tooltip，直接隐藏。 */
 .pepsico_ai_review-card-body .antd-Card-field:first-of-type{
+    display: none;
+}
+
+/* position: 给下面的热区做定位参照。
+   flex: .antd-Card 改成行排列后，多媒体容器成了 flex item，默认按内容宽度收缩，
+   会把「采纳」拽到文字右边而不是卡片最右侧，这里让它撑满整张卡片。 */
+.pepsico_ai_review-card .antd-Card-multiMedia--left{
+    position: relative;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+/* 有图卡片才需要热区。原来用 left:10px + 静态 top 定位，与图片实际的
+   margin(--gap-md) 和 .antd-Card-multiMedia--left 的垂直居中都对不上，
+   hover 时的黑色蒙层会错位。改为相对多媒体容器定位，与图片同边距、同轴居中。 */
+.pepsico_ai_review-card .antd-Card-multiMedia--left .pepsico_ai_review-card-body .antd-Card-field:first-of-type{
+    display: block;
+    position: absolute;
+    left: var(--gap-md);
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+/* 无「违规画面」时 amis 不会渲染 .antd-Card-multiMedia--left，正文直接挂在
+   .antd-Card 下 —— 用这个结构差异认出无图卡片，给它补一个同尺寸同位置的灰色
+   占位框，让有图/无图卡片的正文起点和卡片高度保持一致。
+   占位框用 ::before 绝对定位，不占文档流，所以正文要留出等宽的左内边距、
+   卡片要保证最小高度。 */
+.pepsico_ai_review-card .antd-Card > .pepsico_ai_review-card-body{
+    padding-left: calc(var(--pepsico-ai-thumb-size) + var(--gap-md) * 2);
+    min-height: calc(var(--pepsico-ai-thumb-size) + var(--gap-md) * 2);
+}
+
+.pepsico_ai_review-card .antd-Card > .pepsico_ai_review-card-body::before{
+    content: "";
     position: absolute;
-    left: 10px;
+    left: var(--gap-md);
+    top: 50%;
+    transform: translateY(-50%);
+    width: var(--pepsico-ai-thumb-size);
+    height: var(--pepsico-ai-thumb-size);
+    box-sizing: border-box;
+    border: var(--Card-borderWidth) solid var(--Card-borderColor);
+    border-radius: var(--Card-borderRadius);
+}
+
+/* amis 默认给缩略图外层留了 4px 内边距、且是 inline-block（底部还有基线间隙），
+   热区盒子会比图片大一圈、往上偏。去掉后热区与缩略图严丝合缝。 */
+.pepsico_ai_review-card-body .antd-Card-field:first-of-type .antd-ImageField,
+.pepsico_ai_review-card-body .antd-Card-field:first-of-type .antd-Image{
+    display: block;
+    padding: 0;
 }
 
-.antd-Drawer .pepsico_ai_review-card-body .antd-TplField>span{
-    white-space: nowrap !important;
+/* tpl 渲染的是内联的 <span class="TplField"><span>…</span></span>，
+   两层都置为块级：外层让字段间距(mb-1)生效，内层承载下面的挂起缩进。 */
+.pepsico_ai_review-card-body .antd-TplField{
+    display: block;
+}
+
+/* 提醒原因等长文本完整显示、不截断（配合字段改用 tpl 去掉了 hover tooltip）。
+   原来这里是 white-space:nowrap，配合 .antd-Card-fieldValue 的
+   overflow:hidden + text-overflow:ellipsis，长文案只能显示一行。 */
+.pepsico_ai_review-card-body .antd-TplField > span{
+    display: block;
+    white-space: normal;
+    word-break: break-word;
+    /* 挂起缩进：负 text-indent 只作用于首行，把首行拉回块起点，
+       padding-left 把整块右推，于是折行后的各行与首行正文左对齐、
+       不会顶到「提醒原因: 」标签下面。
+       三个标签都是 4 个汉字 + ": "，实测等宽 4.612em，故取同一个值。 */
+    padding-left: 4.612em;
+    text-indent: -4.612em;
 }
 
 .steedos-object-table.steedos-crud-mode-cards .antd-Crud .antd-Cards .antd-Cards-body .antd-Card .antd-Card-body .antd-Card-field .antd-Card-fieldValue .antd-TplField{
@@ -236,6 +355,12 @@
     margin-right: 0px !important;
 }
 
+/* 卡片网格会占满固定高度的列表区域。记录较少时，flex 默认的 align-content: stretch
+   会把剩余高度分摊给每一行；从顶部紧凑排列，把剩余空间留在列表底部。 */
+.steedos-record-related-list .pepsico_ai_review-card .antd-Cards .antd-Cards-body.antd-Grid{
+    align-content: flex-start;
+}
+
 
 .steedos-record-related-list .pepsico_ai_review-card .antd-Cards .antd-Cards-body .antd-Grid-col--sm12{
     padding: 0px;
@@ -306,3 +431,208 @@ tbody .color-priority-danger *{
 tbody .color-priority-postponed *{
     color: #999 !important;
 }
+
+/* PLS 意见按关联文件分组，卡片布局与 AI 审核意见保持一致。 */
+.pepsico-pls-review-group {
+    border: 1px solid #d8e2ea;
+    border-radius: 6px;
+    overflow: hidden;
+    background: #fff;
+}
+
+.pepsico-pls-review-group-header {
+    min-height: 3rem;
+    padding: 0.625rem 1rem;
+    background: #f3f7fa;
+    color: #123f5a;
+    font-weight: 600;
+    border-bottom: 1px solid #d8e2ea;
+}
+
+.pepsico-pls-review-group-header > .antd-Container-body {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    width: 100%;
+}
+
+.pepsico-pls-review-file-button {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: auto !important;
+    justify-content: flex-start;
+    padding: 0.125rem 0;
+    color: #1f2933;
+    font-size: inherit;
+    font-weight: 600;
+    white-space: normal;
+    text-align: left;
+    text-decoration: none;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+}
+
+.pepsico-pls-review-file-button > span {
+    display: -webkit-box;
+    overflow: hidden;
+    line-height: 1.5;
+    text-overflow: ellipsis;
+    white-space: normal;
+    width: 100%;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.pepsico-pls-review-group-header > .antd-Container-body > .antd-Button:not(.pepsico-pls-review-file-button) {
+    flex: 0 0 auto;
+}
+
+.pepsico-pls-review-file-button:hover {
+    color: var(--private) !important;
+    text-decoration: none !important;
+}
+
+.pepsico-pls-review-cards {
+    margin: 1rem;
+}
+
+.pepsico-pls-review-dialog .antd-Modal-content {
+    padding: 0;
+    overflow: hidden;
+}
+
+.pepsico-pls-review-dialog .antd-Modal-header {
+    position: absolute;
+    top: 0.75rem;
+    right: 1rem;
+    z-index: 2;
+    padding: 0;
+    border: 0;
+}
+
+.pepsico-pls-review-dialog .antd-Modal-title {
+    display: none;
+}
+
+.pepsico-pls-review-dialog .antd-Modal-body {
+    margin: 0;
+    padding: 3.25rem 1.5rem 1.5rem;
+}
+
+.pepsico-pls-review-dialog .pepsico-pls-review-wizard {
+    margin: 0;
+    overflow: hidden;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.pepsico-pls-review-wizard .antd-Wizard-steps {
+    padding: 1rem 1.25rem;
+    background: #f8fafc;
+    border-bottom: 1px solid #e5ebf0;
+}
+
+.pepsico-pls-review-wizard [role="wizard-body"] {
+    padding: 1.5rem 1.25rem;
+}
+
+.pepsico-pls-source-summary {
+    display: block;
+    margin-bottom: 1rem;
+    line-height: 1.6;
+}
+
+.pepsico-pls-review-wizard [role="wizard-footer"] {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+    border-top: 1px solid #e5ebf0;
+}
+
+.pepsico-pls-source-mode {
+    margin-bottom: 1.25rem;
+}
+
+.pepsico-pls-source-mode .antd-ButtonGroup {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    width: 100%;
+}
+
+.pepsico-pls-source-mode .antd-Button {
+    justify-content: center;
+    width: 100%;
+}
+
+.pepsico-pls-source-field {
+    display: grid;
+    grid-template-columns: 10rem minmax(0, 1fr);
+    align-items: center;
+    column-gap: 1rem;
+}
+
+.pepsico-pls-source-field .antd-Form-label,
+.pepsico-pls-source-field .antd-Form-control {
+    margin: 0;
+    width: auto;
+}
+
+@media (max-width: 768px) {
+    .pepsico-pls-source-field {
+        grid-template-columns: minmax(0, 1fr);
+        row-gap: 0.5rem;
+    }
+
+    .pepsico-pls-review-group-header > .antd-Container-body {
+        align-items: flex-start;
+    }
+
+    .pepsico-pls-review-dialog .antd-Modal-body {
+        padding: 3rem 0.75rem 0.75rem;
+    }
+
+    .pepsico-pls-review-dialog .pepsico-pls-review-wizard {
+        margin-top: 0;
+    }
+
+    .pepsico-pls-review-wizard .antd-Wizard-steps,
+    .pepsico-pls-review-wizard [role="wizard-body"],
+    .pepsico-pls-review-wizard [role="wizard-footer"] {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+    }
+}
+
+/* Display each selected PLS lookup record on its own separated row. */
+.pepsico-pls-files-field .steedos-field-lookup-each {
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    align-items: stretch;
+    gap: 0 !important;
+    width: 100%;
+}
+
+.pepsico-pls-files-field .steedos-field-lookup-each > .antd-Form-item {
+    width: 100%;
+    padding: 6px 0;
+    border-bottom: 0;
+}
+
+.pepsico-pls-files-field .steedos-field-lookup-each > .antd-Form-item:first-child {
+    padding-top: 0;
+}
+
+/* 底部分隔线由字段外层容器的 border-b 提供(见字段 yml 的 className),
+   这样线能横跨标签列与值列、与其它字段对齐; 若画在最后一条记录上, 只有值列那么宽。 */
+.pepsico-pls-files-field .steedos-field-lookup-each > .antd-Form-item:last-child {
+    padding-bottom: 0;
+}
+
+/* 框架只在只读页给字段追加 border-b, 编辑态没有。本字段的 border-b 写死在 className 里
+   会两处都显示, 故在编辑弹框内取消, 保持与同表单其它字段一致。 */
+.antd-Modal .pepsico-pls-files-field {
+    border-bottom: 0 !important;
+}