From 3ce186f9770813d37a7d0f01bfbc3e3bbfd0bfc3 Mon Sep 17 00:00:00 2001 From: yuxuanhui Date: Mon, 10 Aug 2026 16:58:16 +0800 Subject: [PATCH] =?UTF-8?q?style(web):=20=E7=BB=9F=E4=B8=80=E7=94=9F?= =?UTF-8?q?=E4=BA=A7=E7=95=8C=E9=9D=A2=E5=9C=86=E8=A7=92=E4=B8=BA6px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../spec/frontend/component-guidelines.md | 6 ++ zhixing-web/DESIGN.md | 58 +++++++++---------- zhixing-web/src/app/layout/app-layout.tsx | 2 +- .../pages/components-preview-page.tsx | 6 +- .../home/components/failed-stocks-dialog.tsx | 2 +- .../components/market-data-overview-card.tsx | 4 +- .../components/execution-status-drawer.tsx | 4 +- .../incomplete-evaluation-table.tsx | 2 +- .../selection-results-workbench.tsx | 2 +- .../components/signal-detail-panel.tsx | 4 +- .../system/pages/system-status-page.tsx | 2 +- zhixing-web/src/shared/ui/avatar.tsx | 10 ++-- zhixing-web/src/shared/ui/badge.tsx | 2 +- zhixing-web/src/shared/ui/button.tsx | 11 ++-- zhixing-web/src/shared/ui/calendar.tsx | 21 +++---- zhixing-web/src/shared/ui/card.tsx | 2 +- zhixing-web/src/shared/ui/dialog.tsx | 4 +- zhixing-web/src/shared/ui/input.tsx | 2 +- zhixing-web/src/shared/ui/popover.tsx | 2 +- zhixing-web/src/shared/ui/progress.tsx | 2 +- zhixing-web/src/shared/ui/scroll-area.tsx | 4 +- zhixing-web/src/shared/ui/select.tsx | 4 +- zhixing-web/src/styles/globals.css | 8 +-- 23 files changed, 83 insertions(+), 81 deletions(-) diff --git a/.trellis/spec/frontend/component-guidelines.md b/.trellis/spec/frontend/component-guidelines.md index 3e36299..4e5abed 100644 --- a/.trellis/spec/frontend/component-guidelines.md +++ b/.trellis/spec/frontend/component-guidelines.md @@ -32,6 +32,12 @@ export function Button({ - 复杂页面用 `Card`、`CardHeader`、`CardContent` 等 composition primitive，而不是复制一套容器样式。 - 新建 shared primitive 前先搜索是否已有 `Button`、`Badge`、`Card` 或 `cn`。 +### 统一圆角 + +- 生产前端所有有圆角的页面布局和组件统一使用 6px；`src/styles/globals.css` 中的 `--radius`、`--radius-sm`、`--radius-md`、`--radius-lg` 和 `--radius-xl` 必须最终解析为 6px。 +- 组件 class 优先使用 `rounded-md` 及其方向变体；只有结构性边缘可以使用 `rounded-none`。不要新增 `rounded-full`、不同 named radius 或 arbitrary radius，以免组件之间重新出现圆角漂移。 +- 该约定同样适用于 Badge、Avatar、Progress 和滚动条等 shared primitive，不因原有胶囊或圆形语义保留例外。 + ## 页面状态 页面应把加载、错误、成功状态转成用户可见的语义文本。`SystemStatusPage` 根据 query 状态显示“正在连接”“连接异常”“运行正常”，没有数据时使用安全的默认服务名。 diff --git a/zhixing-web/DESIGN.md b/zhixing-web/DESIGN.md index dd01090..469f514 100644 --- a/zhixing-web/DESIGN.md +++ b/zhixing-web/DESIGN.md @@ -1,7 +1,7 @@ --- version: alpha name: Intercom-design-analysis -description: "An editorial customer-service marketing canvas built around a soft cream-white ground, charcoal type set in Saans (Intercom's proprietary geometric sans), and a single confident Fin Orange (#ff5600) reserved for the Fin AI brand. Cards live as floating white tiles with thin hairline borders and minimal radii (8–16px). Display headlines run Saans at weight 500 with measured negative tracking. The system reads as a careful, product-led publication: product screenshots dominate, ornament is rare, and the only place chromatic energy enters is the Fin Orange CTA." +description: "An editorial customer-service marketing canvas built around a soft cream-white ground, charcoal type set in Saans (Intercom's proprietary geometric sans), and a single confident Fin Orange (#ff5600) reserved for the Fin AI brand. Cards live as floating white tiles with thin hairline borders and a unified 6px radius. Display headlines run Saans at weight 500 with measured negative tracking. The system reads as a careful, product-led publication: product screenshots dominate, ornament is rare, and the only place chromatic energy enters is the Fin Orange CTA." colors: primary: "#111111" @@ -111,14 +111,14 @@ typography: letterSpacing: 0 rounded: - xs: 4px + xs: 6px sm: 6px - md: 8px - lg: 12px - xl: 16px - xxl: 24px - pill: 9999px - full: 9999px + md: 6px + lg: 6px + xl: 6px + xxl: 6px + pill: 6px + full: 6px spacing: xxs: 4px @@ -212,13 +212,13 @@ components: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.button}" - rounded: "{rounded.pill}" + rounded: "{rounded.md}" padding: 8px 16px pricing-tab-selected: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" - rounded: "{rounded.pill}" + rounded: "{rounded.md}" padding: 8px 16px faq-row: backgroundColor: "{colors.canvas}" @@ -260,7 +260,7 @@ Display type is **Saans** — Intercom's proprietary geometric sans — set at w The single chromatic accent is **Fin Orange** (`{colors.fin-orange}` #ff5600) — Intercom's AI-product brand color. It surfaces on the Fin product CTA, the Fin badge in pricing, and a few inline emphasis moments. It is NOT a system primary; the system primary is charcoal `{colors.ink}`. Intercom also maintains a small **report palette** (`{colors.report-blue}`, `{colors.report-green}`, `{colors.report-pink}`, `{colors.report-lime}`) used inside in-product analytics surfaces shown in mockups. -The page rhythm is heavy on **product mockups**: every section's payload is a high-fidelity screenshot of Intercom's product UI, framed in white cards with `{rounded.xl}` 16px corners. The marketing chrome is intentionally quiet so the product can be the protagonist. +The page rhythm is heavy on **product mockups**: every section's payload is a high-fidelity screenshot of Intercom's product UI, framed in white cards with a consistent 6px corner radius. The marketing chrome is intentionally quiet so the product can be the protagonist. **Key Characteristics:** - **Cream canvas** (`{colors.canvas}` #f5f1ec) is the brand's defining surface — neither white nor gray, deliberately warm. @@ -269,14 +269,14 @@ The page rhythm is heavy on **product mockups**: every section's payload is a hi - **Charcoal** `{colors.ink}` (#111111) is the system primary — buttons, headlines, body type all sit on charcoal. - **Fin Orange** (`{colors.fin-orange}` #ff5600) is the AI product color — used on the Fin CTA and Fin badge, never decoratively. - Display tracking pulls aggressively negative (-2.0px on 72px); body stays at 0. -- Card corners stay modest at `{rounded.lg}` 12px and `{rounded.xl}` 16px — never pill-rounded; never square. +- All component corners use the same 6px radius — never pill-rounded and never intentionally square unless a structural edge requires `rounded-none`. ## Colors > Source pages: intercom.com (home), /pricing, /helpdesk, /customers, /helpdesk/inbox. ### Brand & Accent -- **Charcoal** ({colors.ink}): The system primary surface. Headlines, body type, primary CTA pill background — all charcoal. +- **Charcoal** ({colors.ink}): The system primary surface. Headlines, body type, and primary CTA background — all charcoal. - **White** ({colors.on-primary}): Text on charcoal CTAs; canvas of floating cards. - **Fin Orange** ({colors.fin-orange}): The AI-product accent. Used on the Fin CTA, Fin badge, and a small set of inline emphasis moments. - **Report Orange** ({colors.report-orange}): A slightly different orange used inside the report / analytics palette for in-product mockups. @@ -332,7 +332,7 @@ The same family carries the entire hierarchy. Hierarchy is carried by size + wei | `{typography.body}` | 16px | 400 | 1.50 | 0 | Default body | | `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Card body, footer | | `{typography.caption}` | 12px | 400 | 1.40 | 0 | Captions, meta | -| `{typography.button}` | 15px | 500 | 1.20 | 0 | Pill / square button labels | +| `{typography.button}` | 15px | 500 | 1.20 | 0 | Button labels | | `{typography.eyebrow}` | 14px | 500 | 1.30 | 0 | Section eyebrow (sentence case) | | `{typography.mono}` | 13px | 400 | 1.50 | 0 | SaansMono for code in mockups | @@ -355,7 +355,7 @@ If implementing without Saans, suitable substitutes include **Söhne** (paid), * - **Base unit**: 8px. - **Tokens (front matter)**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px. - Card interior padding: `{spacing.lg}` 24px on pricing/feature cards; `{spacing.xl}` 32px on testimonial/discount cards; `{spacing.xxl}` 48px on CTA banners. -- Pill button padding: 10px vertical · 18px horizontal. +- Button padding: 10px vertical · 18px horizontal. ### Grid & Container @@ -390,20 +390,20 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa | Token | Value | Use | |---|---|---| -| `{rounded.xs}` | 4px | Small chips, badges | +| `{rounded.xs}` | 6px | Small chips, badges | | `{rounded.sm}` | 6px | Inline tags | -| `{rounded.md}` | 8px | All buttons, form inputs | -| `{rounded.lg}` | 12px | Pricing cards, feature cards, FAQ rows | -| `{rounded.xl}` | 16px | Product mockup cards | -| `{rounded.xxl}` | 24px | Oversized CTA banners | -| `{rounded.pill}` | 9999px | Tab toggles | -| `{rounded.full}` | 9999px | Avatar circles | +| `{rounded.md}` | 6px | All buttons, form inputs | +| `{rounded.lg}` | 6px | Pricing cards, feature cards, FAQ rows | +| `{rounded.xl}` | 6px | Product mockup cards | +| `{rounded.xxl}` | 6px | Oversized CTA banners | +| `{rounded.pill}` | 6px | Tab toggles (legacy alias) | +| `{rounded.full}` | 6px | Avatar containers (legacy alias) | ### Photography & Illustration Geometry -- Product UI screenshots dominate the marketing surface; they sit in `{rounded.xl}` 16px tiles. +- Product UI screenshots dominate the marketing surface; they sit in 6px-radius tiles. - Customer logo tiles render at small sizes (~24–32px logo height) on `{colors.canvas}` cream with no border. -- Avatar circles in testimonial cards use `{rounded.full}` at 40–48px sizes. +- Avatar containers in testimonial cards use the same 6px radius at 40–48px sizes. ## Components @@ -424,8 +424,8 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa ### Pricing Tabs -**`pricing-tab-default`** + **`pricing-tab-selected`** — Pill-toggle on `/pricing`. -- Default: `{colors.canvas}` background, `{colors.ink-muted}` text, rounded `{rounded.pill}`. +**`pricing-tab-default`** + **`pricing-tab-selected`** — Compact tab toggle on `/pricing`. +- Default: `{colors.canvas}` background, `{colors.ink-muted}` text, rounded `{rounded.md}` (6px). - Selected: `{colors.surface-1}` white background, `{colors.ink}` text — selected = lift onto white. ### Cards & Containers @@ -483,7 +483,7 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa - Use **`button-fin`** Fin Orange ONLY on Fin AI product CTAs and Fin badges. - Pair Saans display at weight 500 with body at 400. - Use product UI screenshots as the protagonist of every section. -- Use `{rounded.lg}` 12px for cards and `{rounded.xl}` 16px for product mockup tiles. +- Use the unified 6px radius for cards, controls, tags, avatars, and product mockup tiles. - Apply negative tracking proportionally to display sizes. ### Don't @@ -492,7 +492,7 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa - Don't use Fin Orange as a section background or as a generic primary CTA. - Don't add drop shadows to floating cards. - Don't introduce a second display family. -- Don't pill-round CTAs. +- Don't introduce radius values other than the unified 6px token (except structural `rounded-none`). - Don't write all-caps tracked eyebrows. - Don't promote the report palette colors to brand-level surfaces. - Don't combine charcoal CTAs and Fin Orange CTAs in the same viewport. @@ -512,7 +512,7 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa ### Touch Targets - CTAs hold ≥40px tap height across viewports. -- Pricing tab pills hold ≥40px tap height. +- Pricing tabs hold ≥40px tap height. - Form inputs hold ≥44px tap target on touch. ### Collapsing Strategy diff --git a/zhixing-web/src/app/layout/app-layout.tsx b/zhixing-web/src/app/layout/app-layout.tsx index a2b88fe..a4bf0c8 100644 --- a/zhixing-web/src/app/layout/app-layout.tsx +++ b/zhixing-web/src/app/layout/app-layout.tsx @@ -91,7 +91,7 @@ function DesktopSidebar({ activePath }: { activePath: string }) { function Brand() { return (
- +
diff --git a/zhixing-web/src/features/components/pages/components-preview-page.tsx b/zhixing-web/src/features/components/pages/components-preview-page.tsx index 2a943e4..6fd6413 100644 --- a/zhixing-web/src/features/components/pages/components-preview-page.tsx +++ b/zhixing-web/src/features/components/pages/components-preview-page.tsx @@ -191,12 +191,12 @@ export function ComponentsPreviewPage() {
-
+
交互提示：打开日期弹层后，可以使用方向键移动、Enter 选择、Escape 关闭；月份切换按钮与日期按钮都保留可见焦点。
-
+
-
+
数据同步状态 正常
diff --git a/zhixing-web/src/features/home/components/failed-stocks-dialog.tsx b/zhixing-web/src/features/home/components/failed-stocks-dialog.tsx index 87f933d..1314e01 100644 --- a/zhixing-web/src/features/home/components/failed-stocks-dialog.tsx +++ b/zhixing-web/src/features/home/components/failed-stocks-dialog.tsx @@ -39,7 +39,7 @@ export function FailedStocksDialog({ {failures.map((failure) => (
diff --git a/zhixing-web/src/features/home/components/market-data-overview-card.tsx b/zhixing-web/src/features/home/components/market-data-overview-card.tsx index 3f346b4..0c64458 100644 --- a/zhixing-web/src/features/home/components/market-data-overview-card.tsx +++ b/zhixing-web/src/features/home/components/market-data-overview-card.tsx @@ -99,7 +99,7 @@ export function MarketDataOverviewCard({
-
+
@@ -132,7 +132,7 @@ export function MarketDataOverviewCard({
{update.batch_errors.length > 0 ? ( -
+

批次级错误

    {update.batch_errors.map((error) => ( diff --git a/zhixing-web/src/features/selection/components/execution-status-drawer.tsx b/zhixing-web/src/features/selection/components/execution-status-drawer.tsx index 7ea0a6c..4875582 100644 --- a/zhixing-web/src/features/selection/components/execution-status-drawer.tsx +++ b/zhixing-web/src/features/selection/components/execution-status-drawer.tsx @@ -38,7 +38,7 @@ export function ExecutionStatusDrawer({

    执行摘要

    diff --git a/zhixing-web/src/features/selection/components/incomplete-evaluation-table.tsx b/zhixing-web/src/features/selection/components/incomplete-evaluation-table.tsx index 0260b25..6ccb337 100644 --- a/zhixing-web/src/features/selection/components/incomplete-evaluation-table.tsx +++ b/zhixing-web/src/features/selection/components/incomplete-evaluation-table.tsx @@ -14,7 +14,7 @@ export function IncompleteEvaluationTable({ failures, }: IncompleteEvaluationTableProps) { return ( -
    +
    diff --git a/zhixing-web/src/features/selection/components/selection-results-workbench.tsx b/zhixing-web/src/features/selection/components/selection-results-workbench.tsx index 6947d31..e7ad1ea 100644 --- a/zhixing-web/src/features/selection/components/selection-results-workbench.tsx +++ b/zhixing-web/src/features/selection/components/selection-results-workbench.tsx @@ -105,7 +105,7 @@ export function SelectionResultsWorkbench({ return (
    -
    +

    Selected signal diff --git a/zhixing-web/src/features/system/pages/system-status-page.tsx b/zhixing-web/src/features/system/pages/system-status-page.tsx index 48d0943..1807387 100644 --- a/zhixing-web/src/features/system/pages/system-status-page.tsx +++ b/zhixing-web/src/features/system/pages/system-status-page.tsx @@ -50,7 +50,7 @@ export function SystemStatusPage() { -

    +

    后端服务

    diff --git a/zhixing-web/src/shared/ui/avatar.tsx b/zhixing-web/src/shared/ui/avatar.tsx index 398a846..7bfacd2 100644 --- a/zhixing-web/src/shared/ui/avatar.tsx +++ b/zhixing-web/src/shared/ui/avatar.tsx @@ -15,7 +15,7 @@ function Avatar({ data-slot="avatar" data-size={size} className={cn( - "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", + "group/avatar relative flex size-8 shrink-0 rounded-md select-none after:absolute after:inset-0 after:rounded-md after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className, )} {...props} @@ -28,7 +28,7 @@ function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) { ) { svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", @@ -89,7 +89,7 @@ function AvatarGroupCount({

    svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", + "relative flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className, )} {...props} diff --git a/zhixing-web/src/shared/ui/badge.tsx b/zhixing-web/src/shared/ui/badge.tsx index b5ccd65..4125095 100644 --- a/zhixing-web/src/shared/ui/badge.tsx +++ b/zhixing-web/src/shared/ui/badge.tsx @@ -4,7 +4,7 @@ import type { HTMLAttributes } from "react" import { cn } from "@/shared/ui/utils" const badgeVariants = cva( - "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors", + "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors", { variants: { variant: { diff --git a/zhixing-web/src/shared/ui/button.tsx b/zhixing-web/src/shared/ui/button.tsx index 66b19d3..4fc9d95 100644 --- a/zhixing-web/src/shared/ui/button.tsx +++ b/zhixing-web/src/shared/ui/button.tsx @@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/shared/ui/utils" const buttonVariants = cva( - "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { @@ -22,14 +22,13 @@ const buttonVariants = cva( size: { default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", - xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", - sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5", + xs: "h-6 gap-1 rounded-md px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", + sm: "h-7 gap-1 rounded-md px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5", lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", icon: "size-8", "icon-xs": - "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3", - "icon-sm": - "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg", + "size-6 rounded-md in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3", + "icon-sm": "size-7 rounded-md in-data-[slot=button-group]:rounded-md", "icon-lg": "size-9", }, }, diff --git a/zhixing-web/src/shared/ui/calendar.tsx b/zhixing-web/src/shared/ui/calendar.tsx index 2f2b907..27128ea 100644 --- a/zhixing-web/src/shared/ui/calendar.tsx +++ b/zhixing-web/src/shared/ui/calendar.tsx @@ -22,7 +22,7 @@ function Calendar({ return ( span]:text-xs [&>span]:opacity-70", + "relative z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-start=true]:rounded-md data-[range-middle=true]:rounded-none data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day_button, ), range_start: cn( - "day-range-start rounded-(--cell-radius) bg-muted", + "day-range-start rounded-md bg-muted", defaultClassNames.range_start, ), range_middle: cn( @@ -85,15 +85,12 @@ function Calendar({ defaultClassNames.range_middle, ), range_end: cn( - "day-range-end rounded-(--cell-radius) bg-muted", + "day-range-end rounded-md bg-muted", defaultClassNames.range_end, ), - selected: cn( - "rounded-(--cell-radius) bg-muted", - defaultClassNames.selected, - ), + selected: cn("rounded-md bg-muted", defaultClassNames.selected), today: cn( - "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", + "rounded-md bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today, ), outside: cn( @@ -165,7 +162,7 @@ function CalendarDayButton({ data-range-end={modifiers.range_end} data-range-middle={modifiers.range_middle} className={cn( - "relative z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-(--cell-radius) data-[range-middle=true]:rounded-none data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", + "relative z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-start=true]:rounded-md data-[range-middle=true]:rounded-none data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day_button, className, )} diff --git a/zhixing-web/src/shared/ui/card.tsx b/zhixing-web/src/shared/ui/card.tsx index a365509..74557f0 100644 --- a/zhixing-web/src/shared/ui/card.tsx +++ b/zhixing-web/src/shared/ui/card.tsx @@ -6,7 +6,7 @@ export function Card({ className, ...props }: HTMLAttributes) { return (
    ) { type={type} data-slot="input" className={cn( - "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", + "h-8 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className, )} {...props} diff --git a/zhixing-web/src/shared/ui/popover.tsx b/zhixing-web/src/shared/ui/popover.tsx index 36d37d4..264c5c1 100644 --- a/zhixing-web/src/shared/ui/popover.tsx +++ b/zhixing-web/src/shared/ui/popover.tsx @@ -37,7 +37,7 @@ function PopoverContent({ {children} @@ -43,7 +43,7 @@ function ScrollBar({ > ) diff --git a/zhixing-web/src/shared/ui/select.tsx b/zhixing-web/src/shared/ui/select.tsx index f83b9d5..26a3819 100644 --- a/zhixing-web/src/shared/ui/select.tsx +++ b/zhixing-web/src/shared/ui/select.tsx @@ -48,7 +48,7 @@ function SelectTrigger({ data-slot="select-trigger" data-size={size} className={cn( - "flex w-full items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 text-sm whitespace-nowrap outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 [&>span]:line-clamp-1 [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0", + "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-2.5 text-sm whitespace-nowrap outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 [&>span]:line-clamp-1 [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0", className, )} {...props} @@ -105,7 +105,7 @@ function SelectContent({ data-slot="select-content" data-align-trigger={alignItemWithTrigger} className={cn( - "relative z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-card text-card-foreground shadow-lg ring-1 ring-foreground/10 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[align-trigger=true]:animate-none", + "relative z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-card text-card-foreground shadow-lg ring-1 ring-foreground/10 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[align-trigger=true]:animate-none", className, )} {...props} diff --git a/zhixing-web/src/styles/globals.css b/zhixing-web/src/styles/globals.css index 8bb5442..b09d33e 100644 --- a/zhixing-web/src/styles/globals.css +++ b/zhixing-web/src/styles/globals.css @@ -23,10 +23,10 @@ --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); + --radius-sm: var(--radius); + --radius-md: var(--radius); --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); + --radius-xl: var(--radius); } :root { @@ -50,7 +50,7 @@ --border: #d3cec6; --input: #d3cec6; --ring: #111111; - --radius: 0.75rem; + --radius: 6px; } .dark {
    未完成评估明细