tao.chen/model-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: style

Browse Source
This commit is contained in:
tao.chen
2026-08-28 12:00:14 +08:00
parent e2fd7eba63
commit 9badd3597f
34 changed files with 207 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/features/admin/DashboardPage.tsx
+7 -7
View File
@@ -38,7 +38,7 @@ export function DashboardPage({
return (
<section className="h-full overflow-auto bg-bg p-6">
<div className="dashboard-hero-shell flex items-center justify-between rounded-xl px-[34px] py-[34px] text-white shadow-[0_12px_30px_rgb(19_80_137/18%)]">
<div className="dashboard-hero-shell flex items-center justify-between rounded-xl px-[34px] py-[34px] text-white shadow-lg">
<div>
<span className="text-[10px] tracking-[0.12em] opacity-80">
MODEL DEVELOPMENT PLATFORM
@@ -78,7 +78,7 @@ export function DashboardPage({
</span>
<span className="flex flex-col">
<b className="text-[21px] text-[#20364c]">{item.value}</b>
<small className="text-[#8796a6]">{item.label}</small>
<small className="text-ink-subtle">{item.label}</small>
</span>
</article>
))}
@@ -114,7 +114,7 @@ export function DashboardPage({
</div>
<div className="mt-[18px] grid gap-3.5 pb-[25px] max-[1200px]:grid-cols-1 min-[1201px]:grid-cols-[minmax(0,1.6fr)_minmax(310px,0.9fr)]">
<section className="rounded-[10px] border border-[#dfe7ee] bg-white shadow-[0_5px_16px_rgb(33_65_97/5%)]">
<section className="rounded-[10px] border border-[#dfe7ee] bg-white shadow-md">
<header className="flex items-center justify-between border-b border-line-soft px-5 py-[17px]">
<div>
<span className="text-[9px] font-extrabold tracking-[0.09em] text-[#7890a6]">
@@ -136,7 +136,7 @@ export function DashboardPage({
{Math.round(value / 7)}
</span>
<i
className="block min-h-3 w-[min(36px,72%)] rounded-t-[5px] rounded-b-[2px] bg-gradient-to-b from-[#49a0eb] to-[#207bd1] shadow-[0_4px_9px_rgb(32_123_209/18%)]"
className="block min-h-3 w-[min(36px,72%)] rounded-t-[5px] rounded-b-[2px] bg-gradient-to-b from-[#49a0eb] to-[#207bd1] shadow-md"
style={{ height: `${value}%` }}
/>
<small className="text-[9px] text-[#7890a3]">
@@ -157,7 +157,7 @@ export function DashboardPage({
</footer>
</section>
<section className="rounded-[10px] border border-[#dfe7ee] bg-white shadow-[0_5px_16px_rgb(33_65_97/5%)]">
<section className="rounded-[10px] border border-[#dfe7ee] bg-white shadow-md">
<header className="flex items-center justify-between border-b border-line-soft px-5 py-[17px]">
<div>
<span className="text-[9px] font-extrabold tracking-[0.09em] text-[#7890a6]">
@@ -170,7 +170,7 @@ export function DashboardPage({
<div className="dashboard-donut relative grid size-32 shrink-0 place-items-center rounded-full">
<span className="z-[1] flex flex-col items-center">
<b className="text-xl text-[#273d53]">{scriptCount}</b>
<small className="text-[8px] text-[#8a9aaa]">全部脚本</small>
<small className="text-[8px] text-ink-subtle">全部脚本</small>
</span>
</div>
<div className="flex flex-col gap-[15px]">
@@ -206,7 +206,7 @@ export function DashboardPage({
</div>
</section>
<section className="col-span-full rounded-[10px] border border-[#dfe7ee] bg-white shadow-[0_5px_16px_rgb(33_65_97/5%)] max-[1200px]:col-auto">
<section className="col-span-full rounded-[10px] border border-[#dfe7ee] bg-white shadow-md max-[1200px]:col-auto">
<header className="flex items-center justify-between border-b border-line-soft px-5 py-[17px]">
<div>
<span className="text-[9px] font-extrabold tracking-[0.09em] text-[#7890a6]">
frontend/app/features/admin/ImportMemberDialog.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ export function ImportMemberDialog({
>
<div className={modalFormClass}>
<label className={`${formFieldClass} pb-[120px]`}>
<span>选择用户<span className="text-[#e74c3c]">*</span></span>
<span>选择用户<span className="text-danger">*</span></span>
<UserMultiSelect
users={availableUsers}
selectedUserIds={selectedUserIds}
frontend/app/features/admin/ProjectEditDialog.tsx
+5 -5
View File
@@ -13,9 +13,9 @@ import {
} from "../platform/modalUi";
const FORM_INPUT_CLASS =
"h-[39px] w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:shadow-[0_0_0_3px_rgb(38_125_207/8%)] disabled:cursor-not-allowed disabled:opacity-50";
"h-[39px] w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:ring-3 focus:ring-brand/10 disabled:cursor-not-allowed disabled:opacity-50";
const FORM_TEXTAREA_CLASS =
"min-h-[92px] w-full resize-y rounded-md border border-[#d6e0e9] bg-white px-[11px] py-2.5 text-xs leading-[1.55] text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:shadow-[0_0_0_3px_rgb(38_125_207/8%)]";
"min-h-[92px] w-full resize-y rounded-md border border-[#d6e0e9] bg-white px-[11px] py-2.5 text-xs leading-[1.55] text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:ring-3 focus:ring-brand/10";
export function ProjectEditDialog({
open,
@@ -47,7 +47,7 @@ export function ProjectEditDialog({
<form className={modalFormClass} onSubmit={(event) => void onSubmit(event)}>
{!editingProject && (
<label className={formFieldClass}>
<span>项目编码<span className="text-[#e74c3c]">*</span></span>
<span>项目编码<span className="text-danger">*</span></span>
<Input
className={FORM_INPUT_CLASS}
autoFocus
@@ -58,7 +58,7 @@ export function ProjectEditDialog({
</label>
)}
<label className={formFieldClass}>
<span>项目名称<span className="text-[#e74c3c]">*</span></span>
<span>项目名称<span className="text-danger">*</span></span>
<Input
className={FORM_INPUT_CLASS}
value={projectForm.workspace_name}
@@ -86,7 +86,7 @@ export function ProjectEditDialog({
rows={4}
/>
</label>
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white -mx-[22px] px-[22px] py-3.5">
<Button
variant="outline"
size="sm"
frontend/app/features/admin/ProjectManagementPage.tsx
+10 -11
View File
@@ -32,6 +32,8 @@ import {
statusPillClass,
} from "./adminUi";
import { primaryGradientButtonClass } from "~/components/common/buttonClasses";
const EMPTY_PROJECT_FORM = {
workspace_code: "",
workspace_name: "",
@@ -39,9 +41,6 @@ const EMPTY_PROJECT_FORM = {
description: "",
};
const PRIMARY_BUTTON_CLASS =
"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]";
export function ProjectManagementPage({
onNotify,
onConnectionChange,
@@ -272,7 +271,7 @@ export function ProjectManagementPage({
type="button"
disabled={!canManage}
onClick={openCreateProject}
className={PRIMARY_BUTTON_CLASS}
className={primaryGradientButtonClass}
>
<Plus size={15} />
新建项目
@@ -280,15 +279,15 @@ export function ProjectManagementPage({
</div>
{!canManage && <div className={adminReadonlyClass}>当前为开发人员，只能查看项目列表。</div>}
<Table className="rounded-[9px] border border-[#dfe7ef] overflow-hidden text-[11px] text-[#44576a] [--border-color:#dfe7ef] table-fixed bg-white">
<Table className="rounded-[9px] border border-line overflow-hidden text-[11px] text-[#44576a] [--border-color:var(--color-line)] table-fixed bg-white">
<AdminColgroup widths={USER_PROJECT_COL_WIDTHS} />
<TableHeader className="bg-[#f5f8fb] text-[#748598]">
<TableHeader className="bg-[#f5f8fb] text-ink-caption">
<TableRow className="hover:bg-transparent border-b border-[#edf1f5]">
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">项目名称</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">项目编码</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">状态</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">配额</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">操作</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">项目名称</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">项目编码</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">状态</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">配额</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
frontend/app/features/admin/ProjectMembersDrawer.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import { type Workspace, type WorkspaceMember } from "../../services/api";
import { Plus, X } from "lucide-react";
import { primaryGradientButtonClass } from "~/components/common/buttonClasses";
export function ProjectMembersDrawer({
open,
@@ -75,7 +76,7 @@ export function ProjectMembersDrawer({
共 {members.length} 名成员
</span>
<button
className="primary-button"
className={primaryGradientButtonClass}
type="button"
onClick={() => onAddMembers()}
style={{ fontSize: 13, padding: "6px 12px" }}
frontend/app/features/admin/RoleEditDialog.tsx
+3 -3
View File
@@ -167,7 +167,7 @@ export function RoleEditDialog({
</label>
) : (
<label className={formFieldClass}>
<span>角色编码<span className="text-[#e74c3c]">*</span></span>
<span>角色编码<span className="text-danger">*</span></span>
<input
className={formInputClass}
autoFocus
@@ -182,7 +182,7 @@ export function RoleEditDialog({
</label>
)}
<label className={formFieldClass}>
<span>角色名称<span className="text-[#e74c3c]">*</span></span>
<span>角色名称<span className="text-danger">*</span></span>
<input
className={formInputClass}
value={form.role_name}
@@ -214,7 +214,7 @@ export function RoleEditDialog({
/>
</div>
)}
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white -mx-[22px] px-[22px] py-3.5">
<Button
variant="outline"
size="sm"
frontend/app/features/admin/RoleManagementPage.tsx
+9 -11
View File
@@ -37,9 +37,7 @@ import {
rowButtonClass,
rowDangerButtonClass,
} from "./adminUi";
const PRIMARY_BUTTON_CLASS =
"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]";
import { primaryGradientButtonClass } from "~/components/common/buttonClasses";
export function RoleManagementPage({
onNotify,
@@ -208,7 +206,7 @@ export function RoleManagementPage({
type="button"
disabled={!canManage}
onClick={openCreate}
className={PRIMARY_BUTTON_CLASS}
className={primaryGradientButtonClass}
>
<Plus size={15} />
新建角色
@@ -220,15 +218,15 @@ export function RoleManagementPage({
)}
{loadError && <div className={adminReadonlyClass}>{loadError}</div>}
<Table className="rounded-[9px] border border-[#dfe7ef] overflow-hidden text-[11px] text-[#44576a] [--border-color:#dfe7ef] table-fixed bg-white">
<Table className="rounded-[9px] border border-line overflow-hidden text-[11px] text-[#44576a] [--border-color:var(--color-line)] table-fixed bg-white">
<AdminColgroup widths={ROLE_COL_WIDTHS} />
<TableHeader className="bg-[#f5f8fb] text-[#748598]">
<TableHeader className="bg-[#f5f8fb] text-ink-caption">
<TableRow className="hover:bg-transparent border-b border-[#edf1f5]">
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">角色编码</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">角色名称</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">类型</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">权限</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">操作</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">角色编码</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">角色名称</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">类型</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">权限</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
frontend/app/features/admin/UserManagementPage.tsx
+15 -15
View File
@@ -41,6 +41,8 @@ import {
statusPillClass,
} from "./adminUi";
import { primaryGradientButtonClass } from "~/components/common/buttonClasses";
const EMPTY_FORM = {
username: "",
display_name: "",
@@ -50,10 +52,8 @@ const EMPTY_FORM = {
status: "active" as "active" | "disabled" | "locked",
};
const PRIMARY_BUTTON_CLASS =
"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]";
const FORM_INPUT_CLASS =
"h-[39px] w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:shadow-[0_0_0_3px_rgb(38_125_207/8%)] disabled:cursor-not-allowed disabled:opacity-50";
"h-[39px] w-full rounded-md border border-[#d6e0e9] bg-white px-[11px] text-xs text-[#283a4e] outline-none focus:border-[#5b9ddb] focus:ring-3 focus:ring-brand/10 disabled:cursor-not-allowed disabled:opacity-50";
export function UserManagementPage({
onNotify,
onConnectionChange,
@@ -216,7 +216,7 @@ export function UserManagementPage({
type="button"
disabled={!canManage}
onClick={openCreate}
className={PRIMARY_BUTTON_CLASS}
className={primaryGradientButtonClass}
>
<Plus size={15} />
新建用户
@@ -224,15 +224,15 @@ export function UserManagementPage({
</div>
{!canManage && <div className={adminReadonlyClass}>当前为开发人员，只能查看用户列表。</div>}
<Table className="rounded-[9px] border border-[#dfe7ef] overflow-hidden text-[11px] text-[#44576a] [--border-color:#dfe7ef] table-fixed bg-white">
<Table className="rounded-[9px] border border-line overflow-hidden text-[11px] text-[#44576a] [--border-color:var(--color-line)] table-fixed bg-white">
<AdminColgroup widths={USER_PROJECT_COL_WIDTHS} />
<TableHeader className="bg-[#f5f8fb] text-[#748598]">
<TableHeader className="bg-[#f5f8fb] text-ink-caption">
<TableRow className="hover:bg-transparent border-b border-[#edf1f5]">
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">用户</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">账号</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">角色</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">状态</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-[#748598]">操作</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">用户</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">账号</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">角色</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">状态</TableHead>
<TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -301,7 +301,7 @@ export function UserManagementPage({
>
<form className={modalFormClass} onSubmit={(event) => void submit(event)}>
<label className={formFieldClass}>
<span>姓名<span className="text-[#e74c3c]">*</span></span>
<span>姓名<span className="text-danger">*</span></span>
<Input
className={FORM_INPUT_CLASS}
autoFocus={!editing}
@@ -311,7 +311,7 @@ export function UserManagementPage({
/>
</label>
<label className={formFieldClass}>
<span>登录账号<span className="text-[#e74c3c]">*</span></span>
<span>登录账号<span className="text-danger">*</span></span>
<Input
className={FORM_INPUT_CLASS}
disabled={Boolean(editing)}
@@ -323,7 +323,7 @@ export function UserManagementPage({
</label>
{!editing && (
<label className={formFieldClass}>
<span>密码<span className="text-[#e74c3c]">*</span></span>
<span>密码<span className="text-danger">*</span></span>
<Input
className={FORM_INPUT_CLASS}
type="password"
@@ -381,7 +381,7 @@ export function UserManagementPage({
</select>
</label>
)}
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-[#e8edf2] bg-white -mx-[22px] px-[22px] py-3.5">
<div className="mt-[3px] flex shrink-0 justify-end gap-2 border-t border-line bg-white -mx-[22px] px-[22px] py-3.5">
<Button
variant="outline"
size="sm"
frontend/app/features/admin/adminUi.ts
+2 -2
View File
@@ -5,7 +5,7 @@ import { cn } from "~/lib/utils";
export const adminPageClass = "h-full overflow-auto bg-[#f3f6f9] p-6";
export const adminToolbarClass =
"mb-3.5 flex items-center justify-between rounded-lg border border-[#dfe7ef] bg-white px-3.5 py-3";
"mb-3.5 flex items-center justify-between rounded-lg border border-line bg-white px-3.5 py-3";
export const adminToolbarSearchClass =
"flex w-[280px] items-center gap-2 rounded-md border border-[#d9e2eb] bg-[#f8fafb] px-3 py-2 [&_svg]:text-[#8a99a8]";
@@ -16,7 +16,7 @@ export const adminToolbarInputClass =
export const adminReadonlyClass =
"mb-3 rounded-md border border-[#f1d79c] bg-[#fff8e8] px-3.5 py-2.5 text-[11px] text-[#8a6416]";
export const adminEmptyClass = "p-[25px] text-center text-[#8796a6]";
export const adminEmptyClass = "p-[25px] text-center text-ink-subtle";
export const employeeNameClass =
"flex items-center gap-2.5 [&_small]:mt-[3px] [&_small]:text-[#93a0ae] [&_strong]:text-[#23384e] [&>span]:flex [&>span]:min-w-0 [&>span]:flex-col";