@allbluecn/admin-app 0.1.0

package/src/components/auth/auth-layout.tsx

@@ -0,0 +1,66 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { ReactNode } from 'react'
+import { AnimatedThemeToggler } from '@/components/magicui/animated-theme-toggler'
+
+interface AuthLayoutProps {
+  children: ReactNode
+}
+
+export function AuthLayout({ children }: AuthLayoutProps) {
+  const left = findChild(children, AuthLayoutLeft)
+  const right = findChild(children, AuthLayoutRight)
+
+  return (
+    <div className="flex min-h-screen">
+      <div className="relative flex flex-1 items-center justify-center p-6">
+        <div className="absolute right-6 top-6">
+          <AnimatedThemeToggler className="flex h-8 w-8 items-center justify-center rounded-full hover:bg-accent" />
+        </div>
+        <div className="w-full max-w-sm space-y-6">
+          {left}
+        </div>
+      </div>
+      {right && (
+        <div className="hidden lg:flex flex-1 bg-gradient-to-br from-primary/10 via-primary/5 to-background items-center justify-center p-12">
+          <div className="w-full max-w-md text-center space-y-8">
+            {right}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function AuthLayoutLeft({ children }: { children: ReactNode }) {
+  return <>{children}</>
+}
+
+export function AuthLayoutRight({ children }: { children: ReactNode }) {
+  return <>{children}</>
+}
+
+function findChild(children: ReactNode, type: any) {
+  const arr = Array.isArray(children) ? children : [children]
+  for (const child of arr) {
+    if ((child as any)?.type === type) {
+      return (child as any).props.children
+    }
+  }
+  return null
+}

package/src/components/auth/auth-providers.tsx

@@ -0,0 +1,34 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { ReactNode } from "react";
+
+export interface AuthProvider {
+  id: string;
+  name: string;
+  icon: ReactNode;
+}
+
+export const googleProvider: AuthProvider = {
+  id: "google",
+  name: "Google",
+  icon: (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M3.06364 7.50914C4.70909 4.24092 8.09084 2 12 2C14.6954 2 16.959 2.99095 18.6909 4.60455L15.8227 7.47274C14.7864 6.48185 13.4681 5.97727 12 5.97727C9.39542 5.97727 7.19084 7.73637 6.40455 10.1C6.2045 10.7 6.09086 11.3409 6.09086 12C6.09086 12.6591 6.2045 13.3 6.40455 13.9C7.19084 16.2636 9.39542 18.0227 12 18.0227C13.3454 18.0227 14.4909 17.6682 15.3864 17.0682C16.4454 16.3591 17.15 15.3 17.3818 14.05H12V10.1818H21.4181C21.5364 10.8363 21.6 11.5182 21.6 12.2273C21.6 15.2727 20.5091 17.8363 18.6181 19.5773C16.9636 21.1046 14.7 22 12 22C8.09084 22 4.70909 19.7591 3.06364 16.4909C2.38638 15.1409 2 13.6136 2 12C2 10.3864 2.38638 8.85911 3.06364 7.50914Z" />
+    </svg>
+  ),
+};

package/src/components/auth/icon-input.tsx

@@ -0,0 +1,46 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import type { LucideIcon } from 'lucide-react'
+
+interface IconInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  icon: LucideIcon
+  label: string
+}
+
+export function IconInput({ icon: Icon, label, id, className, ...props }: IconInputProps) {
+  const inputId = id || label.toLowerCase()
+
+  return (
+    <div>
+      <Label htmlFor={inputId}>{label}</Label>
+      <div className="relative mt-2.5">
+        <Input
+          id={inputId}
+          className={`peer ps-9 ${className || ''}`}
+          {...props}
+        />
+        <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground">
+          <Icon size={16} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/auth/oauth-section.tsx

@@ -0,0 +1,51 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useTranslation } from 'react-i18next'
+
+interface OAuthSectionProps {
+  providers: { name: string; icon: React.ReactNode }[]
+  separatorText?: string
+  actionText?: string
+}
+
+export function OAuthSection({ providers, separatorText, actionText = '登录' }: OAuthSectionProps) {
+  const { t } = useTranslation('common')
+  const resolvedActionText = actionText === '登录' ? t('login.action') : actionText
+  return (
+    <div className="space-y-3">
+      {providers.map((provider, index) => (
+        <div key={provider.name}>
+          <button
+            type="button"
+            className="w-full inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-accent transition-colors"
+          >
+            {provider.icon}
+            {t('login.oauthWith', { provider: provider.name, action: resolvedActionText })}
+          </button>
+          {index < providers.length - 1 && separatorText && (
+            <div className="relative flex items-center justify-center my-3">
+              <span className="bg-background px-2 text-xs text-muted-foreground">
+                {separatorText}
+              </span>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/auth/password-input.tsx

@@ -0,0 +1,67 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Lock } from 'lucide-react'
+
+interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label: string
+}
+
+export function PasswordInput({ label, id, className, ...props }: PasswordInputProps) {
+  const { t } = useTranslation('common')
+  const inputId = id || label.toLowerCase()
+  const [isVisible, setIsVisible] = useState(false)
+
+  return (
+    <div>
+      <Label htmlFor={inputId}>{label}</Label>
+      <div className="relative mt-2.5">
+        <Input
+          id={inputId}
+          className={`ps-9 pe-9 ${className || ''}`}
+          type={isVisible ? 'text' : 'password'}
+          {...props}
+        />
+        <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground">
+          <Lock size={16} />
+        </div>
+        <button
+          type="button"
+          onClick={() => setIsVisible(!isVisible)}
+          className="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground outline-none transition-colors hover:text-foreground focus:z-10 focus:ring-[3px] focus:ring-ring/50"
+          aria-label={isVisible ? t('login.hidePassword') : t('login.showPassword')}
+        >
+          {isVisible ? (
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.72a23 23 0 0 1 3.28 3.28" />
+              <line x1="1" y1="1" x2="23" y2="23" />
+            </svg>
+          ) : (
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/common/page-header.tsx

@@ -0,0 +1,42 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { LucideIcon } from "lucide-react"
+
+type PageHeaderProps = {
+  title: string
+  description?: string
+  icon?: LucideIcon
+}
+
+export function PageHeader({ title, description, icon: Icon }: PageHeaderProps) {
+  return (
+    <div className="flex items-start gap-3">
+      {Icon && (
+        <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted">
+          <Icon className="size-5 text-muted-foreground" />
+        </div>
+      )}
+      <div className="space-y-0.5">
+        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/common/placeholder-page.tsx

@@ -0,0 +1,42 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { LucideIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+type PlaceholderPageProps = {
+  title: string
+  description?: string
+  icon: LucideIcon
+}
+
+export function PlaceholderPage({ title, description, icon: Icon }: PlaceholderPageProps) {
+  const { t } = useTranslation('common')
+  return (
+    <div className="flex h-full min-h-[60vh] items-center justify-center">
+      <div className="flex flex-col items-center gap-4 rounded-xl border bg-card p-12 text-center shadow-sm">
+        <div className="flex size-16 items-center justify-center rounded-full bg-muted">
+          <Icon className="size-8 text-muted-foreground" />
+        </div>
+        <h1 className="text-xl font-semibold">{title}</h1>
+        <p className="text-sm text-muted-foreground">
+          {description ?? t('common.comingSoon')}
+        </p>
+      </div>
+    </div>
+  )
+}