@yuku123/z-frontend-common 0.1.4 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuku123/z-frontend-common",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "private": false,
   "description": "z-opc 共享前端组件库 - AppLayout / StatusTag / LoginPage / ErrorBoundary + 统一 createRequest 工厂",
   "keywords": [

package/src/components/Ctc/uc/UCLogin.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Card, Form, Input, Button, message, Tabs} from 'antd';
+import {UserOutlined, LockOutlined} from '@ant-design/icons';
+
+/**
+ * 账号密码登录 (FEATURE011)
+ */
+const UCLogin = () => {
+    const [form] = Form.useForm();
+    const onFinish = (values: any) => {
+        console.log('UC login:', values);
+        message.info('UC 账号密码登录占位组件 — 实际登录逻辑接 z-ctc-ac');
+    };
+    return (
+        <Card title="账号密码登录" style={{maxWidth: 420, margin: '40px auto'}}>
+            <Form form={form} onFinish={onFinish} layout="vertical">
+                <Form.Item name="username" label="账号" rules={[{required: true}]}>
+                    <Input prefix={<UserOutlined/>} placeholder="请输入账号"/>
+                </Form.Item>
+                <Form.Item name="password" label="密码" rules={[{required: true}]}>
+                    <Input.Password prefix={<LockOutlined/>} placeholder="请输入密码"/>
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" block>登录</Button>
+                </Form.Item>
+            </Form>
+        </Card>
+    );
+};
+
+export default UCLogin;

package/src/components/Ctc/uc/UCPhoneLogin.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {Card, Form, Input, Button, message} from 'antd';
+import {MobileOutlined, SafetyOutlined} from '@ant-design/icons';
+
+/**
+ * 手机验证码登录 (FEATURE011)
+ * 验证码默认 123456（mock 通道，见 z-msg 配置）
+ */
+const UCPhoneLogin = () => {
+    const [form] = Form.useForm();
+    const [sending, setSending] = React.useState(false);
+    const [count, setCount] = React.useState(0);
+
+    const sendCode = async () => {
+        try {
+            const phone = form.getFieldValue('phone');
+            if (!phone || !/^1\d{10}$/.test(phone)) {
+                message.warning('请输入正确的手机号');
+                return;
+            }
+            setSending(true);
+            setCount(60);
+            const t = setInterval(() => setCount(c => (c > 0 ? c - 1 : (clearInterval(t), 0))), 1000);
+            message.success('验证码已发送 (mock 通道: 123456)');
+        } catch (e) {
+            message.error('发送失败');
+        } finally {
+            setSending(false);
+        }
+    };
+
+    const onFinish = (values: any) => {
+        if (values.code !== '123456') {
+            message.error('验证码错误，固定码 123456');
+            return;
+        }
+        message.success('手机登录成功 (占位)');
+    };
+
+    return (
+        <Card title="手机验证码登录" style={{maxWidth: 420, margin: '40px auto'}}>
+            <Form form={form} onFinish={onFinish} layout="vertical">
+                <Form.Item name="phone" label="手机号" rules={[{required: true, pattern: /^1\d{10}$/}]}>
+                    <Input prefix={<MobileOutlined/>} placeholder="11 位手机号" maxLength={11}/>
+                </Form.Item>
+                <Form.Item name="code" label="验证码" rules={[{required: true}]}>
+                    <Input prefix={<SafetyOutlined/>} placeholder="固定码 123456" maxLength={6}
+                           addonAfter={
+                               <Button type="link" disabled={sending || count > 0} onClick={sendCode}>
+                                   {count > 0 ? `${count}s` : '获取验证码'}
+                               </Button>
+                           }/>
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" block>登录</Button>
+                </Form.Item>
+            </Form>
+        </Card>
+    );
+};
+
+export default UCPhoneLogin;

package/src/components/Ctc/uc/UCRegister.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Card, Form, Input, Button, message} from 'antd';
+import {UserOutlined, LockOutlined, SafetyOutlined, MobileOutlined} from '@ant-design/icons';
+
+/**
+ * 用户注册 (FEATURE011)
+ */
+const UCRegister = () => {
+    const [form] = Form.useForm();
+    const onFinish = (values: any) => {
+        console.log('UC register:', values);
+        message.success('注册成功 (占位)');
+    };
+    return (
+        <Card title="新用户注册" style={{maxWidth: 420, margin: '40px auto'}}>
+            <Form form={form} onFinish={onFinish} layout="vertical">
+                <Form.Item name="username" label="账号" rules={[{required: true, min: 3}]}>
+                    <Input prefix={<UserOutlined/>} placeholder="3 位以上"/>
+                </Form.Item>
+                <Form.Item name="phone" label="手机号" rules={[{required: true, pattern: /^1\d{10}$/}]}>
+                    <Input prefix={<MobileOutlined/>} placeholder="11 位手机号" maxLength={11}/>
+                </Form.Item>
+                <Form.Item name="code" label="验证码" rules={[{required: true}]}>
+                    <Input prefix={<SafetyOutlined/>} placeholder="固定码 123456" maxLength={6}/>
+                </Form.Item>
+                <Form.Item name="password" label="密码" rules={[{required: true, min: 6}]}>
+                    <Input.Password prefix={<LockOutlined/>} placeholder="6 位以上"/>
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" block>注册</Button>
+                </Form.Item>
+            </Form>
+        </Card>
+    );
+};
+
+export default UCRegister;

package/src/components/Ctc/uc/UCResetPassword.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {Card, Form, Input, Button, message, Steps} from 'antd';
+import {MobileOutlined, SafetyOutlined, LockOutlined} from '@ant-design/icons';
+
+/**
+ * 找回密码 (FEATURE011) - 3 步流程
+ *  Step 1: 输入手机号
+ *  Step 2: 输入验证码
+ *  Step 3: 重置密码
+ */
+const UCResetPassword = () => {
+    const [step, setStep] = React.useState(0);
+    const [form] = Form.useForm();
+    const onNext = async () => {
+        try {
+            await form.validateFields();
+            if (step < 2) setStep(step + 1);
+            else message.success('密码重置成功 (占位)');
+        } catch (e) {
+            // antd 会显示字段错误
+        }
+    };
+    return (
+        <Card title="找回密码" style={{maxWidth: 480, margin: '40px auto'}}>
+            <Steps current={step} items={[
+                {title: '验证手机号'},
+                {title: '输入验证码'},
+                {title: '重置密码'},
+            ]} style={{marginBottom: 24}}/>
+            <Form form={form} layout="vertical">
+                {step === 0 && (
+                    <Form.Item name="phone" label="手机号" rules={[{required: true, pattern: /^1\d{10}$/}]}>
+                        <Input prefix={<MobileOutlined/>} placeholder="注册时的手机号" maxLength={11}/>
+                    </Form.Item>
+                )}
+                {step === 1 && (
+                    <Form.Item name="code" label="验证码" rules={[{required: true}]}>
+                        <Input prefix={<SafetyOutlined/>} placeholder="固定码 123456" maxLength={6}/>
+                    </Form.Item>
+                )}
+                {step === 2 && (
+                    <>
+                        <Form.Item name="password" label="新密码" rules={[{required: true, min: 6}]}>
+                            <Input.Password prefix={<LockOutlined/>} placeholder="6 位以上"/>
+                        </Form.Item>
+                        <Form.Item name="confirm" label="确认密码"
+                                  rules={[{required: true}, ({getFieldValue}) => ({
+                                      validator(_, value) {
+                                          if (!value || getFieldValue('password') === value) {
+                                              return Promise.resolve()
+                                          }
+                                          return Promise.reject(new Error('两次输入不一致'))
+                                      },
+                                  })]}>
+                            <Input.Password prefix={<LockOutlined/>} placeholder="再输一次"/>
+                        </Form.Item>
+                    </>
+                )}
+                <Form.Item>
+                    <Button type="primary" onClick={onNext} block>
+                        {step < 2 ? '下一步' : '提交'}
+                    </Button>
+                </Form.Item>
+            </Form>
+        </Card>
+    );
+};
+
+export default UCResetPassword;

package/src/components/Ctc/uc/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Outlet} from 'react-router-dom';
+
+/**
+ * User Center 登录 - FEATURE011
+ * - /uc/login-account   账号密码登录 (默认)
+ * - /uc/login-phone     手机验证码登录
+ * - /uc/register        注册
+ * - /uc/reset-password  找回密码
+ */
+const UCLayout = () => {
+    return <Outlet/>;
+};
+
+export default UCLayout;

package/src/index.js

@@ -15,6 +15,13 @@ export {default as AgentTeamIM} from './components/Ctc/agentTeam'
 export {default as UserPanel} from './components/Ctc/userPanel'
 export {default as Webide} from './components/Ctc/webide'
 
+// UC 用户中心 (FEATURE011)
+export {default as UCLayout} from './components/Ctc/uc'
+export {default as UCLogin} from './components/Ctc/uc/UCLogin'
+export {default as UCPhoneLogin} from './components/Ctc/uc/UCPhoneLogin'
+export {default as UCRegister} from './components/Ctc/uc/UCRegister'
+export {default as UCResetPassword} from './components/Ctc/uc/UCResetPassword'
+
 // 低代码建模
 export {default as LowCodePage} from './components/LowCode/LowCodePage'
 export {default as LowCodeRuntime} from './components/LowCode/LowCodeRuntime'