u

code/base-project/base-vue/packages/ao-design/src/popconfirm/index.scss

@@ -0,0 +1,64 @@
+@use '../_styles/_variables.scss' as *;
+@use 'sass:color';
+
+$popconfirm-prefix: '#{$prefix}-popconfirm';
+
+.#{$popconfirm-prefix}-wrapper {
+  padding: 12px 12px;
+}
+
+.#{$popconfirm-prefix} {
+  &-main {
+    display: flex;
+    align-items: flex-start;
+    text-align: left;
+  }
+  &-icon {
+    display: inline-block;
+    margin-right: 8px;
+  }
+
+  &-title-wrapper {
+    display: inline-block;
+    vertical-align: top;
+    max-width: 320px;
+    color: $text-color-base;
+    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    word-break: break-all;
+  }
+
+  &-title {
+    font-weight: 500;
+    font-size: 14px;
+  }
+  &-description {
+    margin-top: 8px;
+    font-size: 12px;
+    color: $text-color-secondary;
+  }
+  &-footer {
+    text-align: right;
+    margin-top: 16px;
+    > * + * {
+      margin-left: 8px;
+    }
+  }
+  &-info {
+    color: $primary-color;
+  }
+  &-success {
+    color: $success-color;
+  }
+  &-warning {
+    color: $warning-color;
+  }
+  &-error {
+    color: $danger-color;
+  }
+  &-question {
+    color: $primary-color;
+  }
+  &-loading {
+    color: $primary-color;
+  }
+}

code/base-project/base-vue/packages/ao-design/src/popconfirm/index.tsx

@@ -0,0 +1,159 @@
+import type { PropType, VNode } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+import Button from '../button/index'
+import Icon from '../icon/index'
+import Popup from '../popup/index'
+
+export default defineComponent({
+  name: 'Popconfirm',
+  props: {
+    type: {
+      type: String as PropType<'info' | 'success' | 'error' | 'warning' | 'question' | 'loading'>,
+      default: 'info',
+    },
+    title: {
+      type: [String, Object, Function] as unknown as () => string | VNode | (() => VNode),
+      required: true,
+    },
+    description: {
+      type: [String, Object, Function] as unknown as () => string | VNode | (() => VNode),
+      required: false,
+    },
+    asyncConfirm: {
+      type: Boolean,
+      default: false, // 默认同步关闭，不显示 loading
+    },
+    confirmBtn: {
+      type: null,
+      default: () => ({ label: '确认', size: 'small', type: 'solid', status: 'primary' }),
+    },
+    cancelBtn: {
+      type: null,
+      default: () => ({ label: '取消', size: 'small', type: 'text', status: 'default' }),
+    },
+    placement: {
+      type: String as PropType<
+        'top' | 'bottom' | 'left' | 'right'
+        | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
+        | 'left-start' | 'left-end' | 'right-start' | 'right-end'
+          >,
+      default: 'top',
+    },
+    showArrow: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ['confirm', 'cancel'],
+  setup(props, { slots, emit }) {
+    const prefixCls = getPrefixCls('popconfirm')
+
+    const popVisible = ref<boolean>(false)
+
+    const confirmLoading = ref<boolean>(false)
+
+    const iconMap: Record<string, string> = {
+      success: 'ix:success-filled',
+      error: 'ix:error-filled',
+      warning: 'ix:warning-filled',
+      info: 'ix:info-filled',
+      question: 'ix:question-filled',
+      loading: 'mingcute:loading-line',
+    }
+
+    const renderNode = (val: any) => {
+      if (typeof val === 'function')
+        return val()
+      return val
+    }
+
+    const handleConfirm = () => {
+      if (props.asyncConfirm) {
+        confirmLoading.value = true
+
+        emit('confirm', () => { // resolve
+          popVisible.value = false
+          confirmLoading.value = false
+        }, () => { // reject
+          confirmLoading.value = false
+        })
+      }
+      else {
+        popVisible.value = false
+        emit('confirm')
+      }
+    }
+
+    const handleCancel = () => {
+      popVisible.value = false
+      emit('cancel')
+    }
+
+    // 渲染内容块
+    const renderContent = () => {
+      return (
+        <div class={`${prefixCls}-wrapper`}>
+          <div class={`${prefixCls}-main`}>
+            {slots.icon
+              ? (
+                  <span class={`${prefixCls}-icon`}>{slots.icon()}</span>
+                )
+              : (
+                  <Icon
+                    icon={iconMap[props.type ?? 'info']}
+                    size={22}
+                    class={`${prefixCls}-icon ${prefixCls}-${props.type ?? 'info'}`}
+                    spin={props.type === 'loading'}
+                  />
+                )}
+            <div class={`${prefixCls}-title-wrapper`}>
+              <span class={`${prefixCls}-title`}>
+                {slots.title ? slots.title() : renderNode(props.title)}
+              </span>
+              <span class={`${prefixCls}-description`}>
+                {slots.description
+                  ? (
+                      <div class={`${prefixCls}-description`}>{slots.description()}</div>
+                    )
+                  : (
+                      props.description && <div class={`${prefixCls}-description`}>{renderNode(props.description)}</div>
+                    )}
+              </span>
+            </div>
+
+          </div>
+          {slots.footer
+            ? (
+                slots.footer()
+              )
+            : (
+                <div class={`${prefixCls}-footer`}>
+                  <Button {...props.cancelBtn} onClick={handleCancel}>
+                    {props.cancelBtn.label}
+                  </Button>
+
+                  <Button loading={confirmLoading.value} {...props.confirmBtn} onClick={handleConfirm}>
+                    {props.confirmBtn.label}
+                  </Button>
+                </div>
+              )}
+        </div>
+      )
+    }
+
+    return () => (
+      <Popup
+        v-model:visible={popVisible.value}
+        placement={props.placement}
+        showArrow={props.showArrow}
+        content={renderContent}
+        trigger="click"
+      >
+        {{
+          default: () => slots.default?.(),
+        }}
+      </Popup>
+    )
+  },
+})