cx-chat 0.0.1

package/src/views/auth/register.tsx

@@ -0,0 +1,388 @@
+import {
+    registerAPI,
+    sendEmailVerifyCodeAPI,
+} from '@/api/common/auth';
+import LanguageSwitcher from '@/components/common/language-switcher';
+import { SystemLogoMark } from '@/components/common/system-logo-mark';
+import { useSystemConfig } from '@/config/system';
+import { DICT_KEY, getDictOptions, publicDictsReady } from '@/meta';
+import { antdTheme } from '@/styles/antd-theme';
+import { CxInput, CxSelect } from '@cx-ui';
+import { ConfigProvider, theme as antdThemePreset, type ThemeConfig } from 'antd';
+import { ArrowRight, Loader2, Lock, Mail, Phone, User } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate } from 'react-router-dom';
+import { countryCodes } from '../../constants/countryCodes';
+import { useToast } from '../../contexts/ToastContext';
+import { validateEmail, validatePhoneNumber } from '../../utils/validation';
+import AuthCode from './auth-code';
+/** 注册落地页固定暗黑控件，与后台是否 `html.dark` 无关 */
+const registerPageAntdTheme: ThemeConfig = {
+    ...antdTheme,
+    algorithm: antdThemePreset.darkAlgorithm,
+    components: {
+        Input: {
+            colorBgContainer: 'rgba(19, 19, 20, 0.55)',
+            colorBorder: '#3f3f46',
+            hoverBorderColor: '#52525b',
+            activeBorderColor: '#52525b',
+            activeShadow: 'none',
+        },
+        Select: {
+            selectorBg: 'rgba(19, 19, 20, 0.55)',
+            colorBorder: '#3f3f46',
+            hoverBorderColor: '#52525b',
+            activeBorderColor: '#52525b',
+            activeOutlineColor: 'transparent',
+        },
+    },
+};
+
+const RegisterPage: React.FC = () => {
+    const EMAIL_CODE_COOLDOWN_KEY = 'register_email_code_cooldown_until';
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [displayName, setDisplayName] = useState('');
+    const [countryCode, setCountryCode] = useState('+86');
+    const [phoneNumber, setPhoneNumber] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSendingCode, setIsSendingCode] = useState(false);
+    const [isCooldownLoading, setIsCooldownLoading] = useState(true);
+    const [cooldownSeconds, setCooldownSeconds] = useState(0);
+    const [emailCode, setEmailCode] = useState('');
+    const [phoneDialOptions, setPhoneDialOptions] = useState(() =>
+        countryCodes.map((c) => ({ value: c.dial_code, label: c.dial_code })),
+    );
+    const [isAuthCodeVisible, setIsAuthCodeVisible] = useState(false);
+    const { showToast, clearToasts } = useToast();
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+    const { systemName } = useSystemConfig()
+
+    useEffect(() => {
+        const cooldownUntil = Number(localStorage.getItem(EMAIL_CODE_COOLDOWN_KEY) || 0);
+        const left = Math.ceil((cooldownUntil - Date.now()) / 1000);
+        setCooldownSeconds(left > 0 ? left : 0);
+        setIsCooldownLoading(false);
+    }, []);
+
+    useEffect(() => {
+        void publicDictsReady.then(() => {
+            const fromDict = getDictOptions(DICT_KEY.phoneArea);
+            if (fromDict.length > 0) {
+                const next = fromDict.map((o) => ({
+                    value: String(o.value),
+                    label: o.name,
+                }));
+                setPhoneDialOptions(next);
+                setCountryCode((prev) =>
+                    next.some((r) => r.value === prev) ? prev : next[0]?.value ?? prev,
+                );
+            }
+        });
+    }, []);
+
+    useEffect(() => {
+        if (cooldownSeconds <= 0) return;
+        const timer = window.setInterval(() => {
+            setCooldownSeconds((prev) => {
+                const next = prev - 1;
+                if (next <= 0) {
+                    localStorage.removeItem(EMAIL_CODE_COOLDOWN_KEY);
+                    return 0;
+                }
+                return next;
+            });
+        }, 1000);
+
+        return () => window.clearInterval(timer);
+    }, [cooldownSeconds]);
+
+    /** 校验邮箱是否可用（保持现有逻辑不变） */
+    /** 提交注册 */
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        if (!validateEmail(email)) {
+            showToast(t('auth.register.invalid_email'), 'error');
+            return;
+        }
+
+        if (!validatePhoneNumber(countryCode, phoneNumber)) {
+            showToast(t('auth.register.invalid_phone_number'), 'error');
+            return;
+        }
+
+        if (!emailCode.trim()) {
+            showToast(t('auth.register.email_code_required'), 'error');
+            return;
+        }
+
+        setIsLoading(true);
+
+        try {
+            await registerAPI({
+                name: displayName,
+                phone: phoneNumber,
+                areaCode: countryCode,
+                password,
+                email,
+                sex: 1,
+                emailCode: emailCode.trim(),
+            });
+            clearToasts();
+            navigate('/login');
+            showToast(t('auth.register.success', 'Registration successful! Please log in.'), 'success');
+        } catch (err: any) {
+            let message = t('auth.register.failed');
+            const detail = err.response?.data?.detail;
+
+            if (typeof detail === 'string') {
+                message = detail;
+            } else if (Array.isArray(detail)) {
+                // Handle FastAPI validation errors (422)
+                message = detail.map((d: any) => d.msg || JSON.stringify(d)).join(', ');
+            }
+
+            console.log(message);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const resetEmailCode = () => {
+        setEmailCode('');
+    };
+
+    /** 打开发送邮箱验证码前的滑动验证码 */
+    const handleOpenCaptchaModal = async () => {
+        if (isSendingCode || isCooldownLoading || cooldownSeconds > 0) return;
+
+        if (!validateEmail(email)) {
+            showToast(t('auth.register.invalid_email'), 'error');
+            return;
+        }
+
+        setIsAuthCodeVisible(true);
+    };
+
+    /** 发送邮箱验证码（需先通过滑动验证码） */
+    const handleConfirmSendEmailCode = async (data: any, callback?: any) => {
+        setIsAuthCodeVisible(false);
+        try {
+            setIsSendingCode(true);
+            const resp: any = await sendEmailVerifyCodeAPI({
+                email,
+                captchaId: data?.uuid,
+                imageCaptchaTrack: data?.trackData,
+            });
+            const leftSeconds = resp?.data ?? resp?.data?.data;
+            const nextSeconds = typeof leftSeconds === 'number' ? leftSeconds : 120;
+            const cooldownUntil = Date.now() + nextSeconds * 1000;
+            localStorage.setItem(EMAIL_CODE_COOLDOWN_KEY, `${cooldownUntil}`);
+            setCooldownSeconds(nextSeconds);
+            resetEmailCode();
+            showToast(t('auth.register.email_code_sent_success'), 'success');
+        } catch (err: any) {
+            console.error('Send register email code failed', err);
+            showToast(t('auth.register.email_code_sent_failed'), 'error');
+            callback?.();
+        } finally {
+            setIsSendingCode(false);
+        }
+    };
+
+    const stars = React.useMemo(() => {
+        return Array.from({ length: 30 }).map((_, i) => ({
+            id: i,
+            top: `${Math.random() * 40}%`, // Top 40%
+            left: `${Math.random() * 40}%`, // Left 40%
+            size: Math.random() * 2 + 1, // 1-3px
+            opacity: Math.random() * 0.7 + 0.3, // 0.3-1.0
+            delay: Math.random() * 5,
+            isBlue: Math.random() > 0.7 // 30% chance of blue tint
+        }));
+    }, []);
+
+    return (
+        <ConfigProvider theme={registerPageAntdTheme}>
+        <div className="auth-dark-cx min-h-screen w-full flex items-center justify-center bg-[#131314] relative overflow-hidden">
+            {/* Starry Background (Top Left) */}
+            <div className="absolute top-0 left-0 w-full h-full pointer-events-none z-0">
+                {stars.map((star) => (
+                    <div
+                        key={star.id}
+                        className={`absolute rounded-full ${star.isBlue ? 'bg-blue-200' : 'bg-white'} animate-pulse`}
+                        style={{
+                            top: star.top,
+                            left: star.left,
+                            width: `${star.size}px`,
+                            height: `${star.size}px`,
+                            opacity: star.opacity,
+                            animationDuration: `${3 + star.delay}s`,
+                            boxShadow: star.isBlue ? `0 0 ${star.size * 2}px rgba(147, 197, 253, 0.6)` : `0 0 ${star.size}px rgba(255, 255, 255, 0.4)`
+                        }}
+                    />
+                ))}
+            </div>
+
+            {/* Background Gradients */}
+            <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-blue-600/20 rounded-full blur-[120px] pointer-events-none" />
+            <div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] bg-purple-600/20 rounded-full blur-[120px] pointer-events-none" />
+
+            {/* Language Switcher */}
+            <div className="absolute top-6 right-6 z-20">
+                <LanguageSwitcher direction="down" />
+            </div>
+
+            <div className="w-full max-w-md p-8 relative z-10 animate-fade-in-up">
+                {/* Logo / Header */}
+                <div className="text-center mb-10">
+                    <div className="flex items-center justify-center gap-4 mb-6">
+                        <SystemLogoMark className="w-12 h-12" fallbackShape="square" />
+                        <h1 className="text-3xl font-extrabold text-white tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
+                            {systemName}
+                        </h1>
+                    </div>
+                    <h2 className="text-lg text-gray-400 mb-3 font-medium">
+                        {t('auth.register.title')}
+                    </h2>
+                    <p className="text-gray-500 text-sm">
+                        {t('auth.register.has_account')}{' '}
+                        <Link
+                            to="/login"
+                            onClick={() => clearToasts()}
+                            className="text-blue-400 hover:text-blue-300 font-medium transition-colors hover:underline"
+                        >
+                            {t('auth.register.sign_in')}
+                        </Link>
+                    </p>
+                </div>
+
+                {/* Card */}
+                <div className="bg-[#1e1f20]/60 backdrop-blur-xl border border-gray-800 rounded-3xl p-8 shadow-2xl">
+                    <form className="space-y-5" onSubmit={handleSubmit} autoComplete="new-password">
+                        {/* Display Name */}
+                        <CxInput
+                            className="w-full"
+                            required
+                            autoComplete="off"
+                            prefix={<User className="h-5 w-5 shrink-0 text-gray-500" aria-hidden />}
+                            placeholder={t('auth.register.display_name_placeholder')}
+                            value={displayName}
+                            onChange={(e) => setDisplayName(e.target.value)}
+                        />
+
+                        {/* Phone Number */}
+                        <div className="flex gap-2">
+                            <CxSelect
+                                className="w-28 shrink-0"
+                                value={countryCode}
+                                onChange={(v) => setCountryCode(`${v}`)}
+                                options={phoneDialOptions.map((row) => ({
+                                    label: row.label,
+                                    value: row.value,
+                                }))}
+                                popupMatchSelectWidth={false}
+                            />
+                            <CxInput
+                                className="min-w-0 flex-1"
+                                type="tel"
+                                required
+                                autoComplete="off"
+                                prefix={<Phone className="h-5 w-5 shrink-0 text-gray-500" aria-hidden />}
+                                placeholder={t('auth.register.phone_placeholder')}
+                                value={phoneNumber}
+                                onChange={(e) => {
+                                    setPhoneNumber(e.target.value);
+                                }}
+                            />
+                        </div>
+
+                        {/* Email  */}
+                        <div>
+                            <CxInput
+                                className="w-full"
+                                type="email"
+                                required
+                                autoComplete="off"
+                                prefix={<Mail className="h-5 w-5 shrink-0 text-gray-500" aria-hidden />}
+                                placeholder={t('auth.register.email_placeholder')}
+                                value={email}
+                                onChange={(e) => {
+                                    setEmail(e.target.value);
+                                    resetEmailCode();
+                                }}
+                            />
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                            <button
+                                type="button"
+                                disabled={isSendingCode || isCooldownLoading || cooldownSeconds > 0}
+                                onClick={handleOpenCaptchaModal}
+                                className="shrink-0 px-4 py-2.5 border border-blue-500/60 text-blue-300 hover:text-white hover:bg-blue-500/20 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                                {isCooldownLoading || isSendingCode ? (
+                                    <span className="flex items-center gap-2">
+                                        <Loader2 className="animate-spin h-4 w-4" />
+                                        {t('common.loading')}
+                                    </span>
+                                ) : cooldownSeconds > 0 ? (
+                                    t('auth.register.send_code_countdown', { count: cooldownSeconds })
+                                ) : (
+                                    t('auth.register.send_code')
+                                )}
+                            </button>
+                            <CxInput
+                                className="min-w-0 flex-1"
+                                autoComplete="off"
+                                placeholder={t('auth.register.email_code_placeholder')}
+                                value={emailCode}
+                                onChange={(e) => setEmailCode(e.target.value)}
+                            />
+                        </div>
+
+                        {/* Password */}
+                        <CxInput
+                            className="w-full"
+                            type="password"
+                            required
+                            autoComplete="new-password"
+                            prefix={<Lock className="h-5 w-5 shrink-0 text-gray-500" aria-hidden />}
+                            placeholder={t('auth.register.password_placeholder')}
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                        />
+
+                        <button
+                            type="submit"
+                            disabled={isLoading || !emailCode.trim()}
+                            className="w-full relative flex items-center justify-center py-3.5 px-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-semibold rounded-xl transition-all duration-200 shadow-lg shadow-blue-500/25 dark:shadow-none hover:shadow-blue-500/40 transform hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none mt-4"
+                        >
+                            {isLoading ? (
+                                <Loader2 className="animate-spin h-5 w-5" />
+                            ) : (
+                                <span className="flex items-center gap-2">
+                                    {t('auth.register.submit')} <ArrowRight size={18} />
+                                </span>
+                            )}
+                        </button>
+                    </form>
+                </div>
+            </div>
+
+            {isAuthCodeVisible ? (
+                <AuthCode
+                    validImg={handleConfirmSendEmailCode}
+                    close={() => setIsAuthCodeVisible(false)}
+                    onReset={() => {}}
+                />
+            ) : null}
+        </div>
+        </ConfigProvider>
+    );
+};
+
+export default RegisterPage;

package/src/views/base/memory/index.tsx

@@ -0,0 +1,136 @@
+import { useMemo } from 'react'
+
+import { DetailLink } from '@/components/common/detail-link'
+import { useAuth } from '@/contexts/AuthContext'
+import { ALIGN } from '@/meta'
+import {
+  deleteMemoryAPI,
+  getMemoryPageAPI,
+} from '@api/base/memory'
+import ListPageView, { createListPageConfig } from '@components/table-view'
+import { CxButton } from '@cx-ui'
+
+import DetailModal from './modal/detail-modal'
+import SubmitModal from './modal/submit-modal'
+
+const useListPageConfig = createListPageConfig({
+  deleteAPI: deleteMemoryAPI,
+  deleteConfirm: {
+    cancelText: 'common.cancel',
+    content: 'base.memory.delete_confirm',
+    okText: 'common.delete',
+    title: 'base.memory.delete',
+  },
+  pageInfo: {
+    subTitle: 'base.memory.description',
+    title: 'base.memory.title',
+  },
+  searchFields: [
+    {
+      prop: 'title',
+      label: 'base.memory.search_title',
+      placeholder: 'base.memory.search_title_placeholder',
+    },
+  ],
+  submitAction: {
+    labelKey: 'base.memory.add',
+    permission: 'system:long-memory:add',
+    submitType: 'modal',
+  },
+  detailAction: {
+    detailType: 'modal',
+    labelKey: 'common.view',
+  },
+  /** 关闭横向 scroll.x，列宽在容器内分配，content 列 ellipsis 才能生效 */
+  table: { scrollX: false },
+  tableAPI: getMemoryPageAPI,
+})
+
+function IndexView() {
+  const {hasPermission} = useAuth()
+  const pageConfig = useListPageConfig()
+
+  const columns = useMemo(
+    () => [
+      {
+        key: 'title',
+        title: 'base.memory.column_title',
+        align: ALIGN.LEFT,
+        minWidth: 200,
+        render: (value: string, data: any) => (
+          <DetailLink
+            text={value || '-'}
+            onClick={() =>
+              pageConfig.onDetail?.({
+                type: 'detail',
+                data,
+                config: pageConfig.detailAction,
+              })
+            }
+          />
+        ),
+      },
+      {
+        key: 'content',
+        title: 'base.memory.column_content',
+        align: ALIGN.LEFT,
+        ellipsis: true,
+        minWidth: 300,
+        ellipsisTooltipPlacement: 'right',
+        ellipsisTooltipWidth: 400,  
+      },
+      {
+        key: 'createTime',
+        title: 'base.memory.column_created',
+        align: ALIGN.CENTER,
+      },
+      {
+        key: 'action',
+        title: 'common.actions',
+        align: ALIGN.CENTER,
+        render: (_: unknown, data: any) =>
+          hasPermission('system:long-memory:edit') ? (
+            <div className="flex justify-center gap-2">
+              <CxButton.IconView
+                onClick={() =>
+                  pageConfig.onDetail?.({
+                    type: 'detail',
+                    data,
+                    config: pageConfig.detailAction,
+                  })
+                }
+              />
+              <CxButton.IconEdit
+                onClick={() =>
+                  pageConfig.onEdit?.({
+                    type: 'edit',
+                    data,
+                    config: pageConfig.submitAction,
+                  })
+                }
+              />
+              {hasPermission('system:long-memory:delete') && (
+                <CxButton.IconDelete
+                  onClick={() => pageConfig.onDelete?.(data)}
+                />
+              )}
+            </div>
+          ) : null,
+      },
+    ],
+    [hasPermission, pageConfig],
+  )
+
+  return (
+    <>
+      <ListPageView
+        columns={columns}
+        pageConfig={pageConfig}
+        submitModalComponent={SubmitModal as any}
+        detailModalComponent={DetailModal as any}
+      />
+    </>
+  )
+}
+
+export default IndexView

package/src/views/base/memory/modal/detail-modal.tsx

@@ -0,0 +1,89 @@
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { CxModal, useCxModal } from '@cx-ui'
+
+type OpenPayload = {
+  opeType?: string
+  data?: any
+}
+
+interface DetailModalProps {
+  onCancel?: () => void
+}
+
+const DetailModal = forwardRef<
+  { close: () => void; open: (payload?: OpenPayload) => void },
+  DetailModalProps
+>(function DetailModal(_props, ref) {
+  const { onCancel } = _props
+  const { t } = useTranslation()
+
+  const modal = useCxModal({
+    onOpen: (payload) => {
+      modal.setFormData(payload?.data ?? null)
+    },
+    onClose: () => {
+      onCancel?.()
+    },
+  })
+  
+  const { isOpen, close } = modal
+  const record = modal.formData
+
+  const title = useMemo(() => t('base.memory.detail'), [t])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  if (!record) return null
+
+  return (
+    <CxModal
+      isOpen={isOpen}
+      modalConfig={{ width: 560 }}
+      opeType="detail"
+      submitting={false}
+      title={title}
+      onClose={close}
+      actions={[]}
+    >
+      <div className="space-y-4">
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            {t('base.memory.column_title')}
+          </label>
+          <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100">
+            {record.title || '-'}
+          </div>
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            {t('base.memory.column_content')}
+          </label>
+          <div className="min-h-[100px] whitespace-pre-wrap rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100">
+            {record.content || '-'}
+          </div>
+        </div>
+        {record.createTime && (
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              {t('base.memory.column_created')}
+            </label>
+            <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100">
+              {record.createTime}
+            </div>
+          </div>
+        )}
+      </div>
+    </CxModal>
+  )
+})
+
+export default DetailModal