cpms_operation_platform/src/pages/login/index.tsx

import { defineComponent, reactive, ref } from 'vue';
import { Button, Card, Form, FormItem, Input, message } from 'ant-design-vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { auth } from '@/hooks/useAuth';
import styles from './index.module.less';

interface LoginForm {
  username: string;
  password: string;
}

/**
 * 登录页
 * auth.login() 内部会自动:保存 token → 拉取菜单+权限 → 动态注册路由 → 跳转首页
 */
export default defineComponent({
  name: 'LoginPage',
  setup() {
    const loading = ref(false);

    const form = reactive<LoginForm>({
      username: 'admin',
      password: '123456',
    });

    const rules = {
      username: [{ required: true, message: '请输入用户名' }],
      password: [{ required: true, message: '请输入密码' }],
    };

    const handleSubmit = async () => {
      if (!form.username || !form.password) {
        message.warning('请输入用户名和密码');
        return;
      }

      loading.value = true;

      try {
        // TODO: 替换为真实登录接口
        // const res = await post<LoginResult>('/auth/login', { username: form.username, password: form.password });
        // await auth.login(res.token);

        // Mock:模拟登录
        await new Promise((r) => setTimeout(r, 600));
        await auth.login('mock_token_' + Date.now());
        message.success('登录成功');
      } catch (err) {
        message.error('登录失败,请重试');
      } finally {
        loading.value = false;
      }
    };

    return () => (
      <div class={styles.container}>
        <Card class={styles.card} title="CPMS 运营平台">
          <Form model={form} rules={rules} layout="vertical" onFinish={handleSubmit}>
            <FormItem name="username">
              <Input
                v-model={[form.username, 'value']}
                placeholder="用户名"
                size="large"
                v-slots={{ prefix: () => <UserOutlined /> }}
              />
            </FormItem>
            <FormItem name="password">
              <Input
                v-model={[form.password, 'value']}
                type="password"
                placeholder="密码"
                size="large"
                v-slots={{ prefix: () => <LockOutlined /> }}
              />
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit" size="large" block loading={loading.value}>
                登录
              </Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    );
  },
});