@allbluecn/admin-app 0.3.2 → 0.3.3

package/src/components/permissions/types.ts

@@ -0,0 +1,49 @@
+export type ResourcePermission = Record<string, 'admin' | 'write' | 'read' | 'none'>
+
+export type RoleItem = {
+  id: string
+  name: string
+  permissions: ResourcePermission
+  isSystem: boolean
+  _count: { assignments: number }
+}
+
+export type AssignmentItem = {
+  id: string
+  roleId: string
+  userId: string
+  user: {
+    id: string
+    username: string
+    email: string
+  }
+  createdAt: string | Date
+}
+
+export type SearchUser = {
+  id: string
+  username: string
+  email: string
+}
+
+export const ALL_RESOURCES: { key: string; labelZh: string; labelEn: string }[] = [
+  { key: 'knowledge', labelZh: '知识库', labelEn: 'Knowledge' },
+  { key: 'story', labelZh: '故事', labelEn: 'Story' },
+  { key: 'user', labelZh: '用户', labelEn: 'User' },
+  { key: 'setting', labelZh: '设置', labelEn: 'Setting' },
+  { key: 'billing', labelZh: '计费', labelEn: 'Billing' },
+]
+
+export const ALL_ACTIONS: { key: string; labelZh: string; labelEn: string }[] = [
+  { key: 'read', labelZh: '读', labelEn: 'Read' },
+  { key: 'write', labelZh: '写', labelEn: 'Write' },
+  { key: 'delete', labelZh: '删', labelEn: 'Delete' },
+  { key: 'publish', labelZh: '发布', labelEn: 'Publish' },
+]
+
+export const LEVELS: { value: 'none' | 'read' | 'write' | 'admin'; labelZh: string; labelEn: string }[] = [
+  { value: 'none', labelZh: '无', labelEn: 'None' },
+  { value: 'read', labelZh: '读', labelEn: 'Read' },
+  { value: 'write', labelZh: '写', labelEn: 'Write' },
+  { value: 'admin', labelZh: '管理', labelEn: 'Admin' },
+]

package/src/components/user/columns.tsx

@@ -16,12 +16,12 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Badge } from "@allbluecn/ui/badge";
+import { Button } from "@allbluecn/ui/button";
 import { EyeIcon } from "lucide-react";
-import { UserAvatar } from "@allbluecn/web-app/user-avatar";
+import { UserAvatar } from "@allbluecn/ui/components/user-avatar";
 import type { AvatarConfig } from "@allbluecn/kernel";
-import type { AdminColumnDef } from "@/components/data-table/data-table";
+import type { AdminColumnDef } from "@allbluecn/ui/data-table";
 
 export type UserRow = {
   id: string;
@@ -36,7 +36,7 @@ export type UserRow = {
   updatedAt: Date;
   lastLoginAt: Date | null;
   _count: {
-    prds: number;
+    designs: number;
     anyhubMarketApps: number;
     reviews: number;
   };
@@ -112,7 +112,7 @@ export function getUserColumns(onView: (user: UserRow) => void): AdminColumnDef<
     {
       id: "prdCount",
       header: "PRD",
-      cell: ({ row }: any) => <span className="text-muted-foreground">{row.original._count.prds}</span>,
+      cell: ({ row }: any) => <span className="text-muted-foreground">{row.original._count.designs}</span>,
     },
     {
       id: "pluginCount",

package/src/components/user/settings-activity-log.tsx

@@ -26,28 +26,28 @@ import {
 import { useState } from "react";
 import { m } from '@/paraglide/messages.js'
 import { cn } from "@/lib/utils";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Badge } from "@allbluecn/ui/badge";
+import { Button } from "@allbluecn/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { FieldLabel } from "@/components/ui/field";
+} from "@allbluecn/ui/card";
+import { FieldLabel } from "@allbluecn/ui/field";
 import {
   InputGroup,
   InputGroupInput,
-} from "@/components/ui/input-group";
+} from "@allbluecn/ui/input-group";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
+} from "@allbluecn/ui/select";
+import { Separator } from "@allbluecn/ui/separator";
 
 export interface ActivityLogEntry {
   id: string;

package/src/components/user/settings-profile/avatar-uploader.tsx

@@ -0,0 +1,118 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { Camera, Loader2, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { FieldLabel } from "@allbluecn/ui/field";
+import { Button } from "@allbluecn/ui/button";
+
+/**
+ * 头像上传区（纯展示）：预览/拖拽/进度态由父组件持有——errors 是父级
+ * 共享对象（各处理器整体替换），状态上收避免拆分改变清空语义。
+ * readOnly 且无预览时返回 null（与拆分前的条件渲染一致）。
+ */
+export function AvatarUploader({
+  readOnly,
+  avatarPreview,
+  isUploadingAvatar,
+  error,
+  onAvatarClick,
+  onRemove,
+  onDragOver,
+  onDrop,
+  onFileInputChange,
+  fileInputRef,
+}: {
+  readOnly: boolean;
+  avatarPreview: string | null;
+  isUploadingAvatar: boolean;
+  error: string | undefined;
+  onAvatarClick: () => void;
+  onRemove: () => void;
+  onDragOver: (e: React.DragEvent) => void;
+  onDrop: (e: React.DragEvent) => void;
+  onFileInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+}) {
+  if (readOnly && !avatarPreview) return null;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <FieldLabel>头像</FieldLabel>
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        <div
+          className={cn(
+            "relative flex size-24 shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-dashed transition-colors",
+            readOnly && "cursor-default border-muted bg-muted/30",
+            !readOnly && (isUploadingAvatar
+              ? "border-primary bg-primary/5"
+              : "border-muted bg-muted/30 hover:border-primary/50"),
+            !readOnly && "cursor-pointer"
+          )}
+          {...(readOnly
+            ? {}
+            : {
+                onClick: onAvatarClick,
+                onDragOver: onDragOver,
+                onDrop: onDrop,
+              })}
+        >
+          {avatarPreview ? (
+            <>
+              <img
+                alt="头像"
+                className="size-full object-cover"
+                src={avatarPreview}
+              />
+              {!readOnly && isUploadingAvatar && (
+                <div className="absolute inset-0 flex items-center justify-center bg-background/80">
+                  <Loader2 className="size-6 animate-spin text-primary" />
+                </div>
+              )}
+            </>
+          ) : (
+            <Camera className="size-8 text-muted-foreground" />
+          )}
+        </div>
+        {!readOnly && (
+          <div className="flex flex-1 flex-col gap-2">
+            <div className="flex flex-col gap-2 sm:flex-row">
+              <Button
+                onClick={onAvatarClick}
+                type="button"
+                variant="outline"
+              >
+                <Camera className="size-4" />
+                {avatarPreview ? "更换头像" : "上传头像"}
+              </Button>
+              {avatarPreview && (
+                <Button
+                  onClick={onRemove}
+                  type="button"
+                  variant="outline"
+                >
+                  <X className="size-4" />
+                  移除
+                </Button>
+              )}
+            </div>
+            <p className="text-muted-foreground text-xs">
+              拖拽图片到此，或点击选择。最大 5MB。
+            </p>
+            {error && (
+              <p className="text-destructive text-xs">{error}</p>
+            )}
+          </div>
+        )}
+        {!readOnly && (
+          <input
+            accept="image/*"
+            className="hidden"
+            onChange={onFileInputChange}
+            ref={fileInputRef}
+            type="file"
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/user/settings-profile/social-links.tsx

@@ -0,0 +1,63 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import {
+  Field,
+  FieldContent,
+  FieldLabel,
+} from "@allbluecn/ui/field";
+import {
+  InputGroup,
+  InputGroupInput,
+} from "@allbluecn/ui/input-group";
+import {
+  defaultSocialPlatforms,
+  socialPlatformLabels,
+} from "./constants";
+
+/**
+ * 社交链接区（纯展示）：平台清单来自 constants，值读写经父组件
+ * formData.socialLinks / updateSocialLink。readOnly 时仅显示已填平台。
+ */
+export function SocialLinks({
+  readOnly,
+  getSocialLink,
+  onUpdate,
+}: {
+  readOnly: boolean;
+  getSocialLink: (platform: string) => string;
+  onUpdate: (platform: string, url: string) => void;
+}) {
+  const visiblePlatforms = defaultSocialPlatforms.filter(
+    (platform) => !readOnly || getSocialLink(platform.id).trim()
+  );
+  if (visiblePlatforms.length === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <FieldLabel>社交链接</FieldLabel>
+      <div className="flex flex-col gap-3">
+        {visiblePlatforms.map((platform) => (
+          <Field key={platform.id}>
+            <FieldLabel htmlFor={`social-${platform.id}`}>
+              {socialPlatformLabels[platform.id] || platform.label}
+            </FieldLabel>
+            <FieldContent>
+              <InputGroup>
+                 <InputGroupInput
+                   id={`social-${platform.id}`}
+                   onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                     onUpdate(platform.id, e.target.value)
+                   }
+                  placeholder={platform.placeholder}
+                  readOnly={readOnly}
+                  type="url"
+                  value={getSocialLink(platform.id)}
+                />
+              </InputGroup>
+            </FieldContent>
+          </Field>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/user/settings-profile.tsx

@@ -15,34 +15,32 @@
 // 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 { Camera, Loader2, Save, X } from "lucide-react";
+import { Loader2, Save } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
+import { Button } from "@allbluecn/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
+} from "@allbluecn/ui/card";
 import {
   Field,
   FieldContent,
   FieldDescription,
   FieldError,
   FieldLabel,
-} from "@/components/ui/field";
+} from "@allbluecn/ui/field";
 import {
   InputGroup,
   InputGroupInput,
-} from "@/components/ui/input-group";
-import { Separator } from "@/components/ui/separator";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  defaultSocialPlatforms,
-  socialPlatformLabels,
-} from "./settings-profile/constants";
+} from "@allbluecn/ui/input-group";
+import { Separator } from "@allbluecn/ui/separator";
+import { Textarea } from "@allbluecn/ui/textarea";
+import { AvatarUploader } from "./settings-profile/avatar-uploader";
+import { SocialLinks } from "./settings-profile/social-links";
 import type {
   ProfileData,
   SettingsProfileProps,
@@ -334,84 +332,18 @@ export default function SettingsProfile({
 
           {/* Avatar Upload */}
           {!(readOnly && !avatarPreview) && (
-            <div className="flex flex-col gap-4">
-              <FieldLabel>头像</FieldLabel>
-              <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
-                <div
-                  className={cn(
-                    "relative flex size-24 shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-dashed transition-colors",
-                    readOnly && "cursor-default border-muted bg-muted/30",
-                    !readOnly && (isUploadingAvatar
-                      ? "border-primary bg-primary/5"
-                      : "border-muted bg-muted/30 hover:border-primary/50"),
-                    !readOnly && "cursor-pointer"
-                  )}
-                  {...(readOnly
-                    ? {}
-                    : {
-                        onClick: handleAvatarClick,
-                        onDragOver: handleDragOver,
-                        onDrop: handleDrop,
-                      })}
-                >
-                  {avatarPreview ? (
-                    <>
-                      <img
-                        alt="头像"
-                        className="size-full object-cover"
-                        src={avatarPreview}
-                      />
-                      {!readOnly && isUploadingAvatar && (
-                        <div className="absolute inset-0 flex items-center justify-center bg-background/80">
-                          <Loader2 className="size-6 animate-spin text-primary" />
-                        </div>
-                      )}
-                    </>
-                  ) : (
-                    <Camera className="size-8 text-muted-foreground" />
-                  )}
-                </div>
-                {!readOnly && (
-                  <div className="flex flex-1 flex-col gap-2">
-                    <div className="flex flex-col gap-2 sm:flex-row">
-                      <Button
-                        onClick={handleAvatarClick}
-                        type="button"
-                        variant="outline"
-                      >
-                        <Camera className="size-4" />
-                        {avatarPreview ? "更换头像" : "上传头像"}
-                      </Button>
-                      {avatarPreview && (
-                        <Button
-                          onClick={handleAvatarRemove}
-                          type="button"
-                          variant="outline"
-                        >
-                          <X className="size-4" />
-                          移除
-                        </Button>
-                      )}
-                    </div>
-                    <p className="text-muted-foreground text-xs">
-                      拖拽图片到此，或点击选择。最大 5MB。
-                    </p>
-                    {errors.avatar && (
-                      <p className="text-destructive text-xs">{errors.avatar}</p>
-                    )}
-                  </div>
-                )}
-                {!readOnly && (
-                  <input
-                    accept="image/*"
-                    className="hidden"
-                    onChange={handleFileInputChange}
-                    ref={fileInputRef}
-                    type="file"
-                  />
-                )}
-              </div>
-            </div>
+            <AvatarUploader
+              readOnly={readOnly}
+              avatarPreview={avatarPreview}
+              isUploadingAvatar={isUploadingAvatar}
+              error={errors.avatar}
+              onAvatarClick={handleAvatarClick}
+              onRemove={handleAvatarRemove}
+              onDragOver={handleDragOver}
+              onDrop={handleDrop}
+              onFileInputChange={handleFileInputChange}
+              fileInputRef={fileInputRef}
+            />
           )}
 
           <Separator />
@@ -621,42 +553,11 @@ export default function SettingsProfile({
           <Separator />
 
           {/* Social Links */}
-          {defaultSocialPlatforms
-            .filter(
-              (platform) => !readOnly || getSocialLink(platform.id).trim()
-            )
-            .length > 0 && (
-            <div className="flex flex-col gap-4">
-              <FieldLabel>社交链接</FieldLabel>
-              <div className="flex flex-col gap-3">
-                {defaultSocialPlatforms
-                  .filter(
-                    (platform) => !readOnly || getSocialLink(platform.id).trim()
-                  )
-                  .map((platform) => (
-                    <Field key={platform.id}>
-                      <FieldLabel htmlFor={`social-${platform.id}`}>
-                        {socialPlatformLabels[platform.id] || platform.label}
-                      </FieldLabel>
-                      <FieldContent>
-                        <InputGroup>
-                           <InputGroupInput
-                             id={`social-${platform.id}`}
-                             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                               updateSocialLink(platform.id, e.target.value)
-                             }
-                            placeholder={platform.placeholder}
-                            readOnly={readOnly}
-                            type="url"
-                            value={getSocialLink(platform.id)}
-                          />
-                        </InputGroup>
-                      </FieldContent>
-                    </Field>
-                  ))}
-              </div>
-            </div>
-          )}
+          <SocialLinks
+            readOnly={readOnly}
+            getSocialLink={getSocialLink}
+            onUpdate={updateSocialLink}
+          />
         </div>
       </CardContent>
     </Card>

package/src/components/user/user-create-dialog.tsx

@@ -23,19 +23,19 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+} from "@allbluecn/ui/dialog";
+import { Button } from "@allbluecn/ui/button";
+import { Input } from "@allbluecn/ui/input";
+import { Label } from "@allbluecn/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@allbluecn/ui/select";
 import { createUserFn } from "@/server/serverFns/user/create";
-import { toast } from '@/components/ui/toast';
+import { toast } from '@allbluecn/ui/toast';
 
 interface UserCreateDialogProps {
   open: boolean;

package/src/components/user/user-detail/error-boundary.tsx

@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { m } from '@/paraglide/messages.js'
+import { AlertCircle } from 'lucide-react'
+import { Button } from '@allbluecn/ui/button'
+
+export function AdminUserErrorBoundary({ error, reset }: { error: unknown; reset: () => void }) {
+  return <AdminUserErrorBoundaryInner error={error instanceof Error ? error : new Error(String(error))} reset={reset} />
+}
+
+function AdminUserErrorBoundaryInner({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center h-64 gap-3">
+      <AlertCircle className="size-8 text-destructive" />
+      <p className="text-sm text-muted-foreground">{m['admin-users_detail_errorLoading']()}: {error.message}</p>
+      <Button variant="outline" size="sm" onClick={reset}>{m['admin-users_detail_retry']()}</Button>
+    </div>
+  )
+}