update: style

2026-08-28 12:00:14 +08:00
parent e2fd7eba63
commit 9badd3597f
34 changed files with 207 additions and 237 deletions
@@ -9,13 +9,14 @@ import {
 } from "~/components/ui/dialog"
 import { cn } from "~/lib/utils"

+import { primaryGradientButtonClass } from "./buttonClasses"
+
 /** 与系统管理弹窗 footer 一致的次要按钮样式 */
 export const dialogSecondaryButtonClass =
  "h-[37px] gap-[7px] rounded-md border-[#d8e1e9] bg-white px-[15px] text-xs font-[650] text-[#56687c]"

-/** 与系统管理弹窗 footer 一致的主按钮样式 */
-export const dialogPrimaryButtonClass =
-  "h-[37px] gap-[7px] rounded-md border border-[#126ac3] bg-gradient-to-br from-[#1881e7] to-[#1268c9] px-[15px] text-xs font-[650] text-white shadow-[0_6px_15px_rgb(20_111_202/18%)] enabled:hover:from-[#1175d8] enabled:hover:to-[#0e5bad]"
+/** 与系统管理弹窗 footer 一致的主按钮样式（STYLE_GUIDE §2.2 官方渐变） */
+export const dialogPrimaryButtonClass = primaryGradientButtonClass

 const EYEBROW_CLASS =
  "text-[9px] font-extrabold tracking-[0.12em] text-[#2d82d4]"
@@ -59,13 +60,13 @@ function AppFormDialog({
      <DialogContent
        showCloseButton={showCloseButton}
        className={cn(
-          "flex max-h-[80vh] flex-col gap-0 overflow-hidden rounded-[11px] border-[#dce4eb] bg-white p-0 text-[#1c2d42] shadow-[0_24px_70px_rgb(8_27_48/25%)] ring-0",
+          "flex max-h-[80vh] flex-col gap-0 overflow-hidden rounded-[11px] border-[#dce4eb] bg-white p-0 text-[#1c2d42] shadow-xl ring-0",
          maxWidth,
          contentClassName,
        )}
      >
        {eyebrow || title ? (
-          <DialogHeader className="shrink-0 space-y-0 border-b border-[#e7ecf1] px-[22px] pb-4 pt-5 text-left">
+          <DialogHeader className="shrink-0 space-y-0 border-b border-line px-[22px] pb-4 pt-5 text-left">
            {eyebrow ? <span className={EYEBROW_CLASS}>{eyebrow}</span> : null}
            {title ? (
              <DialogTitle id={titleId} className={TITLE_CLASS}>
@@ -78,7 +79,7 @@ function AppFormDialog({
          {children}
        </div>
        {footer ? (
-          <DialogFooter className="mt-0 shrink-0 flex-row justify-end gap-2 border-t border-[#e8edf2] bg-white px-[22px] py-3.5 sm:justify-end">
+          <DialogFooter className="mt-0 shrink-0 flex-row justify-end gap-2 border-t border-line bg-white px-[22px] py-3.5 sm:justify-end">
            {footer}
          </DialogFooter>
        ) : null}
@@ -14,6 +14,7 @@ import {
  dialogPrimaryButtonClass,
  dialogSecondaryButtonClass,
 } from "./AppFormDialog"
+import { dangerSolidButtonClass } from "./buttonClasses"

 type ConfirmDialogProps = {
  open: boolean
@@ -58,7 +59,7 @@ function ConfirmDialog({
            size="sm"
            className={cn(
              destructive
-                ? "h-[37px] gap-[7px] rounded-md border-0 bg-[#d75b5b] px-[15px] text-xs font-[650] text-white hover:bg-[#a94f4f]"
+                ? dangerSolidButtonClass
                : dialogPrimaryButtonClass,
            )}
            onClick={() => void onConfirm()}
@@ -54,15 +54,15 @@ export function Topbar({
          <span
            className={`size-[7px] rounded-full ${
              apiOnline
-                ? "bg-[#19b878] shadow-[0_0_0_3px_rgb(25_184_120_/_11%)]"
-                : "bg-[#d05151] shadow-[0_0_0_3px_rgb(208_81_81_/_10%)]"
+                ? "bg-[#19b878] ring-3 ring-success/10"
+                : "bg-[#d05151] ring-3 ring-danger/10"
            }`}
          />
          {apiOnline ? "服务已连接" : "服务未连接"}
        </div>
        <div className="relative flex items-center gap-[9px]">
          <button
-            className="flex h-[46px] cursor-pointer items-center gap-[9px] rounded-lg border border-[#e0e7ee] bg-white px-[11px] hover:border-[#b9cce0]"
+            className="flex h-[46px] cursor-pointer items-center gap-[9px] rounded-lg border border-line bg-white px-[11px] hover:border-[#b9cce0]"
            type="button"
            onClick={() => onSetWorkspaceMenuOpen(!workspaceMenuOpen)}
          >
@@ -78,7 +78,7 @@ export function Topbar({
            <ChevronRight size={15} />
          </button>
          {workspaceMenuOpen && (
-            <div className="absolute top-[calc(100%+7px)] right-0 z-50 w-[260px] rounded-lg border border-[#dce5ed] bg-white p-1.5 shadow-[0_14px_38px_rgb(17_43_70_/_18%)]">
+            <div className="absolute top-[calc(100%+7px)] right-0 z-50 w-[260px] rounded-lg border border-line bg-white p-1.5 shadow-lg">
              {workspaces.map((workspace) => {
                const isSelected =
                  workspace.workspace_id === currentWorkspace.workspace_id;
@@ -0,0 +1,12 @@
+/**
+ * STYLE_GUIDE §2.2 官方按钮类。
+ * 收敛自 modalUi.primaryButtonClass / AppFormDialog.dialogPrimaryButtonClass /
+ * admin 三页 PRIMARY_BUTTON_CLASS 的重复定义，色值统一走 @theme token。
+ */
+
+export const primaryGradientButtonClass =
+  "inline-flex min-h-[37px] cursor-pointer items-center justify-center gap-gap-icon rounded-md border border-brand bg-gradient-to-br from-brand to-brand-deep px-button-x text-xs font-medium-plus text-white shadow-md enabled:hover:from-brand-strong enabled:hover:to-brand-deep disabled:cursor-not-allowed disabled:opacity-[0.58]";
+
+/** 危险确认按钮（ConfirmDialog destructive 态），token 化自原 bg-[#d75b5b] 写法 */
+export const dangerSolidButtonClass =
+  "inline-flex min-h-[37px] cursor-pointer items-center justify-center gap-gap-icon rounded-md border-0 bg-danger px-button-x text-xs font-medium-plus text-white enabled:hover:bg-danger-strong disabled:cursor-not-allowed disabled:opacity-[0.58]";