Merge pull request #1587 from easyops-cn/zhendong/feat

fix(): close show-dialog增加expectSuffixContent参数 Closes CMDB_INSTANCE-…

Author: tcsuhaibo

bricks/basic/src/data-providers/show-dialog/dialog.module.css

@@ -89,3 +89,7 @@ sl-dialog > eo-button[slot="footer"]:not(:first-of-type) {
     background: none;
   }
 }
+
+.expectSuffix {
+  color: var(--palette-gray-7);
+}

bricks/basic/src/data-providers/show-dialog/show-dialog.spec.tsx

@@ -267,6 +267,9 @@ describe("DialogComponent", () => {
           class="expectInput"
           data-testid="dialog-expect-input"
         />
+        <div
+          class="expectSuffix"
+        />
       </div>
     </div>
     <eo-button
@@ -430,6 +433,9 @@ describe("DialogComponent", () => {
           class="expectInput"
           data-testid="dialog-expect-input"
         />
+        <div
+          class="expectSuffix"
+        />
       </div>
     </div>
     <eo-button
@@ -497,6 +503,9 @@ describe("DialogComponent", () => {
           class="expectInput"
           data-testid="dialog-expect-input"
         />
+        <div
+          class="expectSuffix"
+        />
       </div>
     </div>
     <eo-button
@@ -548,6 +557,9 @@ describe("DialogComponent", () => {
           class="expectInput"
           data-testid="dialog-expect-input"
         />
+        <div
+          class="expectSuffix"
+        />
       </div>
     </div>
     <eo-button

bricks/basic/src/data-providers/show-dialog/show-dialog.tsx

@@ -47,6 +47,7 @@ export interface DialogOptions {
   danger?: boolean;
   contentStyle?: React.CSSProperties;
   themeVariant?: "default" | "elevo";
+  expectSuffixContent?: string;
 }
 
 const parseTemplate = (template: string, context: Record<string, any>) => {
@@ -137,6 +138,7 @@ export function DialogComponent({
   contentStyle,
   zIndex,
   themeVariant: _themeVariant,
+  expectSuffixContent,
   onOk,
   onCancel,
   onHide,
@@ -214,13 +216,16 @@ export function DialogComponent({
           {title && <div className={styles.contentTitle}>{title}</div>}
           <div style={contentStyle}>{parseTemplate(content, { expect })}</div>
           {expect && (
-            <WrappedInput
-              auto-focus={true}
-              themeVariant={themeVariant}
-              className={styles.expectInput}
-              data-testid="dialog-expect-input"
-              onValueChange={(e) => setConfirmDisabled(e.detail !== expect)}
-            />
+            <>
+              <WrappedInput
+                auto-focus={true}
+                themeVariant={themeVariant}
+                className={styles.expectInput}
+                data-testid="dialog-expect-input"
+                onValueChange={(e) => setConfirmDisabled(e.detail !== expect)}
+              />
+              <div className={styles.expectSuffix}>{expectSuffixContent}</div>
+            </>
           )}
         </div>
       </div>