mirror of
https://github.com/langgenius/dify.git
synced 2026-05-13 08:57:28 +08:00
5c61758ff4
- add the integrations page sidebar with collapsible icon-only navigation and Figma-aligned marketplace card - move custom integration SVGs into the iconify collection and document the Tailwind i-custom workflow - preserve source SVG collection dimensions when flattening generated icon data so existing main nav icons keep their 20x20 viewBox - add an icon dimension guard for layout-sensitive generated icons - update model provider routing, i18n, and focused frontend tests
29 lines
1.6 KiB
Markdown
29 lines
1.6 KiB
Markdown
## Frontend Workflow
|
|
|
|
- Refer to the `./docs/test.md` and `./docs/lint.md` for detailed frontend workflow instructions.
|
|
|
|
## Overlay Components (Mandatory)
|
|
|
|
- `../packages/dify-ui/README.md` is the permanent contract for overlay primitives, portals, root `isolation: isolate`, and the `z-50` / `z-60` layering.
|
|
- `./docs/overlay.md` records the current web overlay best practices.
|
|
- In new or modified code, use only overlay primitives from `@langgenius/dify-ui/*`.
|
|
- Do not introduce overlay imports from `@/app/components/base/*`; when touching existing callers, migrate them.
|
|
|
|
## SVG Icons (Mandatory)
|
|
|
|
- New custom SVG icons must be added under `../packages/iconify-collections/assets/...`.
|
|
- Run `pnpm --filter @dify/iconify-collections generate` and consume generated icons with Tailwind `i-custom-*` classes.
|
|
- Restart the web dev server after regenerating icons because Tailwind loads the custom icon collection at startup.
|
|
- Do not add new generated React icon components or JSON files under `app/components/base/icons/src/...`.
|
|
- See `../packages/iconify-collections/README.md` for the full workflow.
|
|
|
|
## Design Token Mapping
|
|
|
|
- When translating Figma designs to code, read `../packages/dify-ui/AGENTS.md` for the Figma `--radius/*` token to Tailwind `rounded-*` class mapping. The two scales are offset by one step.
|
|
|
|
## Automated Test Generation
|
|
|
|
- Use `./docs/test.md` as the canonical instruction set for generating frontend automated tests.
|
|
- When proposing or saving tests, re-read that document and follow every requirement.
|
|
- All frontend tests MUST also comply with the `frontend-testing` skill. Treat the skill as a mandatory constraint, not optional guidance.
|