|
| 1 | +--- |
| 2 | +globs: frontend/app/**,frontend/components/** |
| 3 | +alwaysApply: false |
| 4 | +--- |
| 5 | +# Frontend UI Standards Rules |
| 6 | + |
| 7 | +## Principle |
| 8 | +Use Ant Design as primary UI library with minimal Tailwind CSS. Prioritize mature Ant Design solutions for responsive layouts. Avoid secondary encapsulation unless necessary. |
| 9 | + |
| 10 | +## Technology Usage Guidelines |
| 11 | +- **Ant Design**: Forms, data display, complex interactions (`<Button>`, `<Modal>`, `<Form>`) |
| 12 | +- **Tailwind CSS**: Spacing, layout, simple styling (`className="flex items-center gap-2 text-sm"`) |
| 13 | +- **Inline Styles**: Special cases (`style={{ fontSize: "48px" }}`) |
| 14 | +- **Override AntD**: Use `<style jsx global>` when necessary |
| 15 | + |
| 16 | +## Layout Standards |
| 17 | + |
| 18 | +### Global Layout |
| 19 | +Use Header, Sider, Footer, Content structure. Reference: https://ant.design/components/layout-cn |
| 20 | + |
| 21 | +```tsx |
| 22 | +const { Header, Footer, Sider, Content } = Layout; |
| 23 | + |
| 24 | +<Layout> |
| 25 | + <Header>Header</Header> |
| 26 | + <Layout> |
| 27 | + <Sider width="25%">Sider</Sider> |
| 28 | + <Content>Content</Content> |
| 29 | + </Layout> |
| 30 | + <Footer>Footer</Footer> |
| 31 | +</Layout> |
| 32 | +``` |
| 33 | + |
| 34 | +### Responsive Grid |
| 35 | +Use AntD Grid for responsive layouts. Reference: https://ant.design/components/grid-cn |
| 36 | + |
| 37 | +```tsx |
| 38 | +<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}> |
| 39 | + <Col span={6}>col-6</Col> |
| 40 | + <Col span={6}>col-6</Col> |
| 41 | + <Col span={6}>col-6</Col> |
| 42 | + <Col span={6}>col-6</Col> |
| 43 | +</Row> |
| 44 | +``` |
| 45 | + |
| 46 | +### Flex Layout |
| 47 | +Use AntD Flex for component alignment. Reference: https://ant.design/components/flex-cn |
| 48 | + |
| 49 | +```tsx |
| 50 | +<Flex vertical className="h-full overflow-hidden"> |
| 51 | + <Row><Col>Content 1</Col></Row> |
| 52 | + <Row><Col>Content 2</Col></Row> |
| 53 | + <Row className="flex:1 min-h-0"> |
| 54 | + <Col><Flex className="h-full overflow-hidden">...</Flex></Col> |
| 55 | + </Row> |
| 56 | +</Flex> |
| 57 | +``` |
| 58 | + |
| 59 | +## Component Standards |
| 60 | + |
| 61 | +### Modals |
| 62 | +1. **Complex Modal**: For reusable modals with custom content |
| 63 | +2. **Simple Modal**: Use `useConfirmModal` for one-time confirmations |
| 64 | + |
| 65 | +#### Modal Standards |
| 66 | +- Use `centered` for positioning |
| 67 | +- Confirm buttons: `type="primary" danger={true}` |
| 68 | +- i18n keys: `common.cancel`, `common.confirm` |
| 69 | +- Icon: `<ExclamationCircleFilled />` aligned with title |
| 70 | + |
| 71 | +```tsx |
| 72 | +// Complex modal |
| 73 | +<Modal |
| 74 | + open={isOpen} |
| 75 | + centered |
| 76 | + okButtonProps={{ type: "primary", danger: true }} |
| 77 | + okText={t("common.confirm")} |
| 78 | +> |
| 79 | + <div className="flex items-start gap-4"> |
| 80 | + <ExclamationCircleFilled style={{ color: token.colorWarning, fontSize: '22px' }} /> |
| 81 | + <div> |
| 82 | + <div className="font-medium">{t("title")}</div> |
| 83 | + <div className="text-sm">{t("content")}</div> |
| 84 | + </div> |
| 85 | + </div> |
| 86 | +</Modal> |
| 87 | + |
| 88 | +// Simple modal |
| 89 | +const { confirm } = useConfirmModal(); |
| 90 | +confirm({ |
| 91 | + title: t("delete.confirmTitle"), |
| 92 | + content: t("delete.confirmContent"), |
| 93 | + onOk: () => { /* ... */ } |
| 94 | +}); |
| 95 | +``` |
| 96 | + |
| 97 | +### Icon Library |
| 98 | +- **Primary**: `lucide-react` for consistency |
| 99 | +- **Fallback**: `@ant-design/icons` when lucide-react lacks icons |
| 100 | + |
| 101 | +```tsx |
| 102 | +import { ExternalLink } from "lucide-react"; |
| 103 | +import { PlusOutlined } from '@ant-design/icons'; |
| 104 | + |
| 105 | +<ExternalLink /> |
| 106 | +<PlusOutlined /> |
| 107 | +``` |
| 108 | + |
| 109 | +## i18n Usage |
| 110 | + |
| 111 | +```tsx |
| 112 | +import { useTranslation, Trans } from "react-i18next"; |
| 113 | + |
| 114 | +// Simple text |
| 115 | +t("common.confirm") |
| 116 | + |
| 117 | +// HTML content |
| 118 | +<Trans |
| 119 | + i18nKey="modal.description" |
| 120 | + values={{ title }} |
| 121 | + components={{ strong: <strong /> }} |
| 122 | +/> |
| 123 | +``` |
0 commit comments