cx-chat 0.0.1

package/src/utils/toastBridge.ts

@@ -0,0 +1,26 @@
+import type { ToastType } from '@/contexts/ToastContext'
+
+type ToastHandler = (
+  message: string,
+  type: ToastType,
+  duration?: number,
+) => void
+
+let toastHandler: ToastHandler | null = null
+
+/**
+ * 由 ToastProvider 挂载时注册，供 axios 等非 React 上下文使用（不可用 useToast）
+ */
+export function bindGlobalToast(handler: ToastHandler | null) {
+  toastHandler = handler
+}
+
+export function showGlobalToast(
+  message: string,
+  type: ToastType = 'error',
+  duration?: number,
+) {
+  const text = (message ?? '').trim()
+  if (!text) return
+  toastHandler?.(text, type, duration)
+}

package/src/utils/url.ts

@@ -0,0 +1,38 @@
+/**
+ * Resolve an avatar URL path to a full URL if it's relative.
+ * 将头像 URL 路径解析为完整 URL（如果是相对路径）。
+ * 
+ * @param path The avatar path from the database / 数据库中的头像路径
+ * @returns The resolved URL / 解析后的 URL
+ */
+export const resolveAvatarUrl = (path: string | null | undefined): string | undefined => {
+    if (!path) return undefined;
+
+    // If it's already an absolute URL, return as is (but handle localhost cleanup)
+    if (path.startsWith('http')) {
+        // Compatibility: If it's a legacy 'localhost' URL but we are accessing via IP,
+        // we might want to "force" it to be relative so it gets resolved correctly.
+        if (path.includes('://localhost:8000/static/avatars/')) {
+            const filename = path.split('/').pop();
+            return `/static/avatars/${filename}`; // Will be handled by the next check
+        }
+        return path;
+    }
+
+    // If it's a relative path starting with /static
+    if (path.startsWith('/static')) {
+        // In development/LAN, the backend is usually on port 8000
+        // We can derive the backend location. 
+        // If we are on the same host but different port (e.g. 5173 vs 8000), 
+        // or on a different device in LAN.
+
+        // Use the current window location to find the host IP/domain
+        const host = window.location.hostname;
+
+        // Rule: If we are in dev (vite) or local network, assume backend is on port 8000 
+        // unless overridden.
+        return `${window.location.protocol}//${host}:8000${path}`;
+    }
+
+    return path;
+};

package/src/utils/validation.ts

@@ -0,0 +1,16 @@
+export const validatePhoneNumber = (countryCode: string, phoneNumber: string): boolean => {
+    // Remove any whitespace
+    const cleanNumber = phoneNumber.replace(/\s/g, '');
+
+    if (countryCode === '+86') {
+        // China: 11 digits, starts with 1, second digit 3-9
+        return /^1[3-9]\d{9}$/.test(cleanNumber);
+    } else {
+        // Others: 5-15 digits (E.164 recommendation is max 15, min usually around 5-7)
+        return /^\d{5,15}$/.test(cleanNumber);
+    }
+};
+
+export const validateEmail = (email: string): boolean => {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+};

package/src/views/auth/auth-code/index.less

@@ -0,0 +1,169 @@
+.slider-mask-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 50%);
+}
+
+.slider-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 40px;
+  background: #d1e9fe;
+  border: 0 solid #1991fa;
+  border-radius: 2px;
+}
+
+.inner-mv-img,
+.inner-bg-img,
+.slider-title {
+  user-select: none;
+}
+
+.mask {
+  z-index: 998;
+  display: block;
+  width: 310px;
+  height: 280px;
+  margin: 0 auto;
+  background: rgba(0, 0, 0, 0%);
+}
+
+.container {
+  position: absolute;
+  top: -300px;
+  z-index: 999;
+  width: 310px;
+  height: 280px;
+  padding: 17px 15px;
+  margin: auto;
+  background: rgba(255, 255, 255, 100%);
+  border-radius: 6px;
+  box-shadow: 0 0 11px 0 rgba(153, 153, 153, 100%);
+  box-sizing: border-box;
+}
+
+.slider-title {
+  display: flex;
+  font-size: 14px;
+  color: #333;
+  justify-content: space-between;
+}
+
+// .button-group {
+
+// }
+
+// img {
+//   width: 25px;
+//   height: 25px;
+//   cursor: pointer;
+// }
+
+.slide {
+  position: relative;
+  width: 100%;
+  height: 40px;
+  background-color: #f7f9fa;
+  border: 1px solid #e4e7eb;
+  box-sizing: border-box;
+
+  &::before {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    font-size: 12px;
+    color: #999;
+    text-indent: 50px;
+    content: '按住左边按钮移动完成上方拼图';
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.codeimg {
+  position: relative;
+  width: 280px;
+  height: 180px;
+}
+
+img {
+  width: 100%;
+}
+
+.backgroup-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.move-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 52.2px;
+}
+
+.block {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 40px;
+  height: 38px;
+  cursor: pointer;
+  background-color: #fff;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 30%);
+  justify-content: center;
+  align-items: center;
+  background-size: 30px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.block:hover {
+  color: #fff;
+  background-color: #1991fa;
+}
+
+.loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background: rgba(0, 0, 0, 20%);
+  border-radius: 6px;
+  justify-content: center;
+  align-items: center;
+}
+
+.hint-success {
+  position: absolute;
+  z-index: 30;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  color: #67c23a;
+  text-align: center;
+  background-color: #f0f9eb;
+}
+
+.hint-error {
+  position: absolute;
+  z-index: 30;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  color: #f56c6c;
+  text-align: center;
+  background-color: #fef0f0;
+}

package/src/views/auth/auth-code/index.module.less

@@ -0,0 +1,174 @@
+.auth-code-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+}
+
+.slider-mask-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 50%);
+}
+
+.slider {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2001;
+}
+
+.slider-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 40px;
+  background: #d1e9fe;
+  border: 0 solid #1991fa;
+  border-radius: 2px;
+}
+
+.inner-mv-img,
+.inner-bg-img,
+.slider-title {
+  user-select: none;
+}
+
+.mask {
+  z-index: 998;
+  display: block;
+  width: 310px;
+  height: 280px;
+  margin: 0 auto;
+  background: rgba(0, 0, 0, 0%);
+}
+
+.container {
+  position: relative;
+  top: 0;
+  z-index: 999;
+  width: 310px;
+  height: 280px;
+  padding: 17px 15px;
+  margin: auto;
+  background: rgba(255, 255, 255, 100%);
+  border-radius: 6px;
+  box-shadow: 0 0 11px 0 rgba(153, 153, 153, 100%);
+  box-sizing: border-box;
+}
+
+.slider-title {
+  display: flex;
+  font-size: 14px;
+  color: #333;
+  justify-content: space-between;
+}
+
+.slide {
+  position: relative;
+  width: 100%;
+  height: 40px;
+  background-color: #f7f9fa;
+  border: 1px solid #e4e7eb;
+  box-sizing: border-box;
+
+  &::before {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    font-size: 12px;
+    color: #999;
+    text-indent: 50px;
+    content: '按住左边按钮移动完成上方拼图';
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.codeimg {
+  position: relative;
+  width: 280px;
+  height: 180px;
+}
+
+img {
+  width: 100%;
+}
+
+.backgroup-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.move-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 52.2px;
+}
+
+.block {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 40px;
+  height: 38px;
+  cursor: pointer;
+  background-color: #fff;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 30%);
+  justify-content: center;
+  align-items: center;
+  background-size: 30px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.block:hover {
+  color: #fff;
+  background-color: #1991fa;
+}
+
+.loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background: rgba(0, 0, 0, 20%);
+  border-radius: 6px;
+  justify-content: center;
+  align-items: center;
+}
+
+.hint-success {
+  position: absolute;
+  z-index: 30;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  color: #67c23a;
+  text-align: center;
+  background-color: #f0f9eb;
+}
+
+.hint-error {
+  position: absolute;
+  z-index: 30;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  color: #f56c6c;
+  text-align: center;
+  background-color: #fef0f0;
+}

package/src/views/auth/auth-code/index.tsx

@@ -0,0 +1,233 @@
+import {
+  RightOutlined,
+  RedoOutlined,
+  CloseOutlined
+} from '@ant-design/icons';
+import React, { useEffect , useState , useRef} from 'react'
+
+import { notification } from 'antd'
+
+import { getImgSwipeAPI } from '@api/common/auth';
+import styles from './index.module.less'
+
+// 避免 React StrictMode 开发态双挂载导致重复请求验证码图片
+let captchaInitInFlight: Promise<any> | null = null
+
+interface AuthCodeProps {
+  validImg: (data: any, callback?: () => void) => void | Promise<void>;
+  close: () => void;
+  onReset:() => void;
+  ref?: any;
+}
+interface TrackData {
+  bgImageWidth: any;
+  bgImageHeight: any;
+  sliderImageWidth: any;
+  sliderImageHeight: any;
+  startSlidingTime: any;
+  entSlidingTime: any;
+  trackList: any[];
+}
+const AuthCode: React.FC<AuthCodeProps> = (props:any) => {
+  const block: any = useRef(false)
+  /** 滑块背景图片 */
+  const [ backgroupImg, setBackgroupImg ] = useState('')
+  /** 滑块图片 */
+  const [ moveImg, setMoveImg] = useState('')
+  /** 是否已经移动滑块 */
+  // const [ startMove, setStartMove ] = useState(false)
+  const startMove = useRef(false)
+   
+  /** 滑块移动距离 */
+  const [ blcokLeft, setBlcokLeft ] = useState(0)
+
+  /** 开始滑动的x轴 */
+  // const [ startX, setStartX ] = useState(0)
+  const startX= useRef(0)
+  // const [ startY, setStartY ] = useState(0)
+  const startY= useRef(0)
+
+  /** 划过的百分比 */
+  const [ movePercent, setMovePercent ] = useState(0)
+  /** 验证码唯一ID */
+  const [ uuid, setUuid ] = useState('')
+  /** 滑块移动的x轴 */
+  const [ moveX, setMoveX ] = useState(0)
+  const orderNumber = useRef(0)
+  /** 加载遮罩标识 */
+  const [ loading, setLoading ] = useState(true)
+  const trackData = useRef<TrackData>({
+    bgImageWidth: 0,
+    bgImageHeight: 0,
+    sliderImageWidth: 0,
+    sliderImageHeight: 0,
+    startSlidingTime: null,
+    entSlidingTime: null,
+    trackList: []
+  })
+  const [ verificationResult ,setVerificationResult] = useState<any>(null)
+  const [ showAuthCode ,setShowAuthCode] = useState(false)
+  //  重置
+  const reset=() =>{
+    setVerificationResult(null)
+    setMoveX(0)
+    setMovePercent(0)
+    startX.current = 0
+    startY.current = 0
+    // setStartY(0)
+    setBlcokLeft(0)
+    trackData.current = {
+      bgImageWidth: 0,
+      bgImageHeight: 0,
+      sliderImageWidth: 0,
+      sliderImageHeight: 0,
+      startSlidingTime: null,
+      entSlidingTime: null,
+      trackList: []
+    }
+    getImg()
+  }
+  // const add = () => {
+  //   setOrderNumber(orderNumber+1)
+  // }
+  const setShowChild = ()=>{
+    setShowAuthCode(true)
+  }
+  const validImg = () => {
+    orderNumber.current++
+    props.validImg({trackData:trackData.current, uuid:uuid, orderNumber:orderNumber},()=>{
+      reset()
+      if (orderNumber.current >= 3) {
+        notification.open({
+          message: '警告',
+          type: 'warning',
+          description: '验证次数过多，请重新输入账号密码验证',
+        });
+        close();
+        props.onReset()
+      }
+    })
+  }
+  // 按下鼠标
+  const move =  (e:any) => {
+    // console.log('点下拖动改变的值',startMove);
+    if (!startMove.current) return;
+      const moveX = (e.pageX * 2.12 - startX.current) / 2.12;
+      const pageX = e.pageX * 2.12;
+      const pageY = e.pageY * 2.12;
+      trackData.current.trackList.push({
+        x: pageX - startX.current,
+        y: pageY - startY.current,
+        t: (new Date().getTime() - new Date(trackData.current.startSlidingTime).getTime())})
+      const movePercent = moveX / 280;
+      if (moveX <= 0) {
+        setBlcokLeft(0);
+        setMoveX(0);
+        setMovePercent(0);
+      } else if (moveX >= 0 && moveX <= 235) {
+        setBlcokLeft(moveX);
+        setMoveX(moveX);
+        setMovePercent(movePercent);
+      } else if (moveX >= 235) {
+        setBlcokLeft(235);
+        setMoveX(235);
+        setMovePercent(movePercent);
+      }
+  }
+  // 弹起鼠标
+  const up = (e:any) => {
+      // setTrackData((prevState) => ({
+      //   ...prevState,
+      //   entSlidingTime: new Date().getTime()
+      // }));
+      trackData.current.entSlidingTime = new Date().getTime()
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', up);
+
+      if (!startMove.current) return;
+      startMove.current = false
+      if (trackData.current.trackList.length > 0) {
+        trackData.current.trackList[0].x = 0
+        trackData.current.trackList[0].y = 0
+      }
+        validImg();
+  }
+  // 关闭
+  const close = () => {
+    props.close()
+    setLoading(false)
+  }
+  const start = async (e:any) => {
+    startMove.current = true
+    trackData.current.startSlidingTime = new Date().getTime()
+    startX.current = e.pageX * 2.12
+    startY.current = e.pageY * 2.12
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', up);
+  }
+  const getImg = async () => {
+    if (!captchaInitInFlight) {
+      captchaInitInFlight = getImgSwipeAPI().finally(() => {
+        captchaInitInFlight = null
+      })
+    }
+    const res: any = await captchaInitInFlight
+    if (res && res.data && res.data.imageCaptchaInfo) {
+      setBackgroupImg(res.data.imageCaptchaInfo.backgroundImage)
+      setMoveImg(res.data.imageCaptchaInfo.templateImage)
+      setUuid(res.data.captchaId)
+      trackData.current = {...trackData.current, ...res.data.imageCaptchaInfo} 
+      trackData.current.bgImageWidth = res.data.imageCaptchaInfo.backgroundImageWidth
+      trackData.current.bgImageHeight = res.data.imageCaptchaInfo.backgroundImageHeight
+      trackData.current.sliderImageWidth = res.data.imageCaptchaInfo.templateImageHeight
+      trackData.current.sliderImageHeight = res.data.imageCaptchaInfo.templateImageWidth
+    }
+  }
+  useEffect(() => {
+    getImg()
+  }, [])
+
+  return (
+    // style={{'display':showAuthCode?'black':'none'}}
+    <div className={styles['auth-code-overlay']}>
+      <div className={styles['slider-mask-bg']} onClick={close} />
+        <div className={styles["slider"]}>
+          <div className={styles["mask"]}>
+            <div className={styles["container"]}>
+              <div className={styles["slider-title"]}>
+                <div className={styles["text"]}>
+                  <span>请完成下列验证后继续</span>
+                </div>
+                <div className={styles['button-group']}>
+                  <RedoOutlined style={{'fontSize': '24px','cursor': 'pointer'}} onClick={reset}/>
+                  <CloseOutlined style={{'fontSize': '24px','marginLeft': '8px','cursor': 'pointer'}} onClick={close}/>
+                </div>
+              </div>
+              <div className={styles['codeimg']}>
+                <div style={{'display':verificationResult&&verificationResult!==null?'block':'none'}}  className={styles['hint-success']}>验证成功 !</div>
+                <div style={{'display':verificationResult !== null && !verificationResult?'block':'none'}} className= {styles["hint-error"]}>验证失败 !</div>
+                <div className={styles['backgroup-img']}>
+                  <img className="inner-bg-img" src={backgroupImg} />
+                </div>
+                <div className={styles["move-img"]} style={{'left': `${moveX}px`}}>
+                  <img className={styles["inner-mv-img"]} src={moveImg} />
+                </div>
+              </div>
+              <div className={styles["slide"]}>
+                <div className={styles["slider-mask"]} style={{width: `${blcokLeft}px`}}>
+                  <div ref={block} className={styles["block"]} style={{'left': `${blcokLeft}px`}}  onMouseDown={start}>
+                    <RightOutlined  style={{'fontSize': '24px','cursor': 'pointer','color':'#ccc'}}/>  
+                  </div>
+                </div>
+              </div>
+              <div style={{'display':loading?'none':'block'}} className={styles["loading"]}>
+                <span>获取验证图片...</span>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+  )
+}
+
+export default AuthCode