node-resource-utils 0.0.0-stage → 1.1.7

package/resources/src/components/inbox/InboxView.tsx

@@ -0,0 +1,409 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import {
+  App,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  Col,
+  Empty,
+  Row,
+  Segmented,
+  Space,
+  Tag,
+  Typography,
+} from 'antd';
+import {
+  ArrowRightOutlined,
+  ClockCircleOutlined,
+  MailOutlined,
+} from '@ant-design/icons';
+import { iconOf } from '@/components/admin/menu-icons';
+import { StatCard } from '@/components/feedback';
+import { startRouteProgress } from '@/components/feedback/RouteProgress';
+import { fmtDateTime } from '@/lib/format';
+import { fs, MILITARY } from '@/lib/theme';
+import type {
+  InboxData,
+  InboxNotification,
+  InboxTodoItem,
+} from '@/lib/inbox-types';
+
+const TYPE_LABEL: Record<string, string> = {
+  system: '系统',
+  feedback: '反馈',
+  approval: '审批',
+  business: '业务',
+};
+
+const LEVEL_META: Record<string, { color: string; label: string }> = {
+  info: { color: 'blue', label: '通知' },
+  success: { color: 'green', label: '完成' },
+  warning: { color: 'orange', label: '提醒' },
+  error: { color: 'red', label: '异常' },
+};
+
+function todoDotColor(level: InboxTodoItem['level']): string {
+  if (level === 'error') return MILITARY.error;
+  if (level === 'warning') return MILITARY.warning;
+  return MILITARY.primary;
+}
+
+/**
+ * 待办与消息中心。
+ *
+ * 两个标签页共用一份从服务端直出的数据：
+ *   - 待办：由 `src/lib/todos` 的注册表聚合，处理完业务后自动消失
+ *   - 消息：站内 Notification，支持单条已读与全部已读
+ *
+ * 页面只负责展示和已读动作，不判断权限、不拼业务查询；
+ * 新模块接入待办只需要注册一个 TodoSource，不需要改这个组件。
+ */
+export default function InboxView({
+  data,
+  initialTab,
+}: {
+  data: InboxData;
+  initialTab: 'todos' | 'messages';
+}) {
+  const { message } = App.useApp();
+  const router = useRouter();
+  const [tab, setTab] = useState<'todos' | 'messages'>(initialTab);
+  const [notifications, setNotifications] = useState<InboxNotification[]>(data.notifications);
+  const [unreadCount, setUnreadCount] = useState(data.summary.unreadCount);
+  const [unreadOnly, setUnreadOnly] = useState(false);
+  const [markingAll, setMarkingAll] = useState(false);
+
+  const todoCount = data.summary.todoCount;
+
+  const visibleNotifications = useMemo(
+    () => (unreadOnly ? notifications.filter((item) => !item.readAt) : notifications),
+    [notifications, unreadOnly]
+  );
+
+  const broadcastChanged = () => {
+    window.dispatchEvent(new Event('inbox:changed'));
+  };
+
+  const markRead = async (id: string): Promise<boolean> => {
+    try {
+      const res = await fetch('/api/inbox/read', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id }),
+      });
+      const json = (await res.json()) as {
+        code?: number;
+        data?: { unread?: number };
+        message?: string;
+      };
+      if (json?.code !== 0) throw new Error(json?.message || '标记已读失败');
+
+      setNotifications((prev) =>
+        prev.map((item) => (item.id === id && !item.readAt ? { ...item, readAt: new Date().toISOString() } : item))
+      );
+      setUnreadCount((prev) =>
+        Number.isFinite(json.data?.unread) ? Number(json.data?.unread) : Math.max(0, prev - 1)
+      );
+      broadcastChanged();
+      return true;
+    } catch (e) {
+      message.error((e as Error).message);
+      return false;
+    }
+  };
+
+  const openNotification = async (item: InboxNotification) => {
+    if (!item.readAt) await markRead(item.id);
+    if (item.link) {
+      startRouteProgress();
+      router.push(item.link);
+    }
+  };
+
+  const markAllRead = async () => {
+    if (markingAll || unreadCount === 0) return;
+    setMarkingAll(true);
+    try {
+      const res = await fetch('/api/inbox/read', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ all: true }),
+      });
+      const json = (await res.json()) as { code?: number; message?: string };
+      if (json?.code !== 0) throw new Error(json?.message || '操作失败');
+
+      const now = new Date().toISOString();
+      setNotifications((prev) => prev.map((item) => (item.readAt ? item : { ...item, readAt: now })));
+      setUnreadCount(0);
+      setUnreadOnly(false);
+      broadcastChanged();
+      message.success('已全部标为已读');
+    } catch (e) {
+      message.error((e as Error).message);
+    } finally {
+      setMarkingAll(false);
+    }
+  };
+
+  return (
+    <div data-testid="inbox-page">
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'space-between',
+          gap: 16,
+          flexWrap: 'wrap',
+          marginBottom: 16,
+        }}
+      >
+        <div>
+          <Typography.Title level={4} style={{ margin: 0 }}>
+            待办与消息
+          </Typography.Title>
+          <Typography.Text type="secondary">
+            跨模块汇总待处理事项和站内消息；业务处理完成后，对应待办会自动消失。
+          </Typography.Text>
+        </div>
+        <Segmented
+          value={tab}
+          onChange={(value) => setTab(value as 'todos' | 'messages')}
+          options={[
+            { value: 'todos', label: `待办 ${todoCount}` },
+            { value: 'messages', label: `消息${unreadCount > 0 ? ` ${unreadCount}` : ''}` },
+          ]}
+        />
+      </div>
+
+      <Row gutter={[16, 16]}>
+        <Col xs={24} md={12}>
+          <StatCard
+            title="待办事项"
+            value={todoCount}
+            icon={<ClockCircleOutlined />}
+            color={MILITARY.warning}
+            onPress={() => setTab('todos')}
+          />
+        </Col>
+        <Col xs={24} md={12}>
+          <StatCard
+            title="未读消息"
+            value={unreadCount}
+            icon={<MailOutlined />}
+            color={MILITARY.primary}
+            onPress={() => setTab('messages')}
+          />
+        </Col>
+      </Row>
+
+      <div style={{ marginTop: 16 }}>
+        {tab === 'todos' ? (
+          data.todoGroups.length === 0 ? (
+            <Card>
+              <Empty description="当前没有待办" />
+            </Card>
+          ) : (
+            <Space orientation="vertical" size={16} style={{ width: '100%' }}>
+              {data.todoGroups.map((group) => (
+                <Card
+                  key={group.key}
+                  title={
+                    <Space size={8}>
+                      <span style={{ color: MILITARY.primary }}>{iconOf(group.icon)}</span>
+                      <span>{group.name}</span>
+                      <Tag color="warning">{group.count}</Tag>
+                    </Space>
+                  }
+                  extra={
+                    group.count > group.items.length ? (
+                      <Typography.Text type="secondary" style={{ fontSize: fs(12) }}>
+                        共 {group.count} 条，显示最近 {group.items.length} 条
+                      </Typography.Text>
+                    ) : null
+                  }
+                >
+                  {group.description && (
+                    <Typography.Paragraph type="secondary" style={{ marginTop: 0 }}>
+                      {group.description}
+                    </Typography.Paragraph>
+                  )}
+                  {group.items.length === 0 ? (
+                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无待办" />
+                  ) : (
+                    <div>
+                      {group.items.map((item, index) => (
+                        <Link
+                          key={item.id}
+                          href={item.link}
+                          onClick={() => startRouteProgress()}
+                          style={{
+                            display: 'flex',
+                            alignItems: 'flex-start',
+                            gap: 12,
+                            padding: '12px 10px',
+                            borderTop: index === 0 ? 'none' : `1px solid ${MILITARY.borderSoft}`,
+                            color: 'inherit',
+                            textDecoration: 'none',
+                          }}
+                        >
+                          <span
+                            style={{
+                              display: 'inline-block',
+                              width: 8,
+                              height: 8,
+                              borderRadius: '50%',
+                              background: todoDotColor(item.level),
+                              marginTop: 7,
+                              flex: '0 0 8px',
+                            }}
+                          />
+                          <span style={{ flex: 1, minWidth: 0 }}>
+                            <span
+                              style={{
+                                display: 'block',
+                                fontSize: fs(13.5),
+                                fontWeight: 600,
+                                color: MILITARY.text,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                              }}
+                            >
+                              {item.title}
+                            </span>
+                            <span
+                              style={{
+                                display: 'block',
+                                marginTop: 3,
+                                fontSize: fs(12.5),
+                                color: MILITARY.textMuted,
+                              }}
+                            >
+                              {item.subtitle}
+                              {item.createdAt ? ` · ${fmtDateTime(item.createdAt)}` : ''}
+                            </span>
+                          </span>
+                          <span
+                            style={{
+                              flex: '0 0 auto',
+                              marginTop: 2,
+                              fontSize: fs(12.5),
+                              color: MILITARY.primary,
+                              whiteSpace: 'nowrap',
+                            }}
+                          >
+                            去处理 <ArrowRightOutlined style={{ fontSize: fs(10) }} />
+                          </span>
+                        </Link>
+                      ))}
+                    </div>
+                  )}
+                </Card>
+              ))}
+            </Space>
+          )
+        ) : (
+          <Card
+            title={
+              <Space size={8}>
+                <MailOutlined style={{ color: MILITARY.primary }} />
+                <span>站内消息</span>
+                <Tag>{notifications.length}</Tag>
+              </Space>
+            }
+            extra={
+              <Space size={12} wrap>
+                <Checkbox
+                  checked={unreadOnly}
+                  onChange={(e) => setUnreadOnly(e.target.checked)}
+                >
+                  只看未读
+                </Checkbox>
+                <Button
+                  size="small"
+                  loading={markingAll}
+                  disabled={unreadCount === 0}
+                  onClick={() => void markAllRead()}
+                >
+                  全部已读
+                </Button>
+              </Space>
+            }
+          >
+            {visibleNotifications.length === 0 ? (
+              <Empty description={unreadOnly ? '没有未读消息' : '还没有站内消息'} />
+            ) : (
+              <div>
+                {visibleNotifications.map((item) => {
+                  const level = LEVEL_META[item.level] ?? LEVEL_META.info;
+                  const type = TYPE_LABEL[item.type] ?? item.type;
+                  return (
+                    <div
+                      key={item.id}
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => void openNotification(item)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          void openNotification(item);
+                        }
+                      }}
+                      style={{
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        gap: 12,
+                        cursor: 'pointer',
+                        background: item.readAt ? MILITARY.card : MILITARY.soft,
+                        border: `1px solid ${item.readAt ? MILITARY.borderSoft : MILITARY.softStrong}`,
+                        borderRadius: 9,
+                        padding: '12px 14px',
+                        marginBottom: 8,
+                      }}
+                    >
+                      <Badge
+                        status={item.readAt ? 'default' : 'processing'}
+                        style={{ marginTop: 4 }}
+                      />
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <Space size={8} wrap>
+                          <span style={{ fontWeight: item.readAt ? 500 : 650, color: MILITARY.text }}>
+                            {item.title}
+                          </span>
+                          <Tag color={level.color}>{level.label}</Tag>
+                          <span style={{ fontSize: fs(11.5), color: MILITARY.textMuted }}>{type}</span>
+                        </Space>
+                        {item.body && (
+                          <div
+                            style={{
+                              whiteSpace: 'pre-wrap',
+                              marginTop: 5,
+                              fontSize: fs(13),
+                              lineHeight: 1.7,
+                              color: MILITARY.textSecondary,
+                            }}
+                          >
+                            {item.body}
+                          </div>
+                        )}
+                        <div style={{ fontSize: fs(12), color: MILITARY.textMuted, marginTop: 6 }}>
+                          {fmtDateTime(item.createdAt)}
+                          {item.link ? ' · 点击查看详情' : ''}
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}

package/resources/src/components/ui/button.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-neutral-900 text-white hover:bg-neutral-800',
+        outline: 'border border-neutral-300 bg-white hover:bg-neutral-100',
+        ghost: 'hover:bg-neutral-100',
+      },
+      size: { default: 'h-9 px-4 py-2', sm: 'h-8 px-3', lg: 'h-10 px-6' },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/resources/src/components/ui/card.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('rounded-xl border border-neutral-200 bg-white shadow-sm', className)} {...props} />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm text-neutral-500', className)} {...props} />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+);
+CardContent.displayName = 'CardContent';
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent };

package/resources/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      ref={ref}
+      className={cn(
+        'flex h-9 w-full rounded-md border border-neutral-300 bg-white px-3 py-1 text-sm shadow-sm placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Input.displayName = 'Input';
+
+export { Input };