feat: handle upgrade confirm and icon

2026-05-05 09:58:04 +08:00 · 2026-01-29 14:57:49 +08:00
parent 255b7511ae
commit 2973968cc6
8 changed files with 152 additions and 51 deletions
--- a/web/app/components/base/upgrade-modal/index.tsx
+++ b/web/app/components/base/upgrade-modal/index.tsx
@ -0,0 +1,66 @@
+'use client'
+
+import type { ComponentType, FC, ReactNode, SVGProps } from 'react'
+import Modal from '@/app/components/base/modal'
+import styles from './style.module.css'
+
+type Props = {
+  Icon?: ComponentType<SVGProps<SVGSVGElement>>
+  title: string
+  description: string
+  extraInfo?: ReactNode
+  footer?: ReactNode
+  show: boolean
+  onClose: () => void
+}
+
+const UpgradeModalBase: FC<Props> = ({
+  Icon,
+  title,
+  description,
+  extraInfo,
+  footer,
+  show,
+  onClose,
+}) => {
+  return (
+    <Modal
+      isShow={show}
+      onClose={onClose}
+      closable={false}
+      clickOutsideNotClose
+      className={`${styles.surface} w-[580px] rounded-2xl !p-0`}
+    >
+      <div className="relative">
+        <div
+          aria-hidden
+          className={`${styles.heroOverlay} pointer-events-none absolute inset-0`}
+        />
+        <div className="px-8 pt-8">
+          {Icon && (
+            <div className={`${styles.icon} flex size-12 items-center justify-center rounded-xl shadow-lg backdrop-blur-[5px]`}>
+              <Icon className="size-6 text-text-primary-on-surface" />
+            </div>
+          )}
+          <div className="mt-6 space-y-2">
+            <div className={`${styles.highlight} title-3xl-semi-bold`}>
+              {title}
+            </div>
+            <div className="system-md-regular text-text-tertiary">
+              {description}
+            </div>
+          </div>
+          {extraInfo}
+        </div>
+      </div>
+
+      {footer && (
+        <div className="mb-8 mt-10 flex justify-end space-x-2 px-8">
+          {footer}
+        </div>
+      )}
+    </Modal>
+  )
+}
+
+export default UpgradeModalBase
--- a/web/app/components/base/upgrade-modal/style.module.css
+++ b/web/app/components/base/upgrade-modal/style.module.css
@ -0,0 +1,29 @@
+.surface {
+  border: 0.5px solid var(--color-components-panel-border, rgba(16, 24, 40, 0.08));
+  background:
+    linear-gradient(109deg, var(--color-background-section, #f9fafb) 0%, var(--color-background-section-burn, #f2f4f7) 100%),
+    var(--color-components-panel-bg, #fff);
+}
+
+.heroOverlay {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' fill='none'%3E%3Crect x='1' y='1' width='48' height='48' rx='12' stroke='rgba(16, 24, 40, 0.3)' stroke-width='1' opacity='0.08'/%3E%3C/svg%3E");
+  background-size: 54px 54px;
+  background-position: 31px -23px;
+  background-repeat: repeat;
+  mask-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 75%);
+  -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 75%);
+}
+
+.icon {
+  border: 0.5px solid transparent;
+  background:
+    linear-gradient(180deg, var(--color-components-avatar-bg-mask-stop-0, rgba(255, 255, 255, 0.12)) 0%, var(--color-components-avatar-bg-mask-stop-100, rgba(255, 255, 255, 0.08)) 100%),
+    var(--color-util-colors-blue-brand-blue-brand-500, #296dff);
+}
+
+.highlight {
+  background: linear-gradient(97deg, var(--color-components-input-border-active-prompt-1, rgba(11, 165, 236, 0.95)) -4%, var(--color-components-input-border-active-prompt-2, rgba(21, 90, 239, 0.95)) 45%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}