cx-chat 0.0.2 → 0.0.4

package/src/views/auth/register.tsx

@@ -1,388 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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