forked from KNEMC/KLALB
Merge branch 'master' of https://git.code.cq.cn/KNEMC/KLALB
# Conflicts: # .classpath # src/org/kne/cloud/network/klalb/KLALBControllerConfigItem.java
This commit is contained in:
@@ -0,0 +1,277 @@
|
||||
---
|
||||
name: shadcn
|
||||
description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
|
||||
user-invocable: false
|
||||
allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
|
||||
---
|
||||
|
||||
# shadcn/ui
|
||||
|
||||
A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
|
||||
|
||||
> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
|
||||
|
||||
## Current Project Context
|
||||
|
||||
```json
|
||||
!`npx shadcn@latest info --json`
|
||||
```
|
||||
|
||||
The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.
|
||||
|
||||
## Principles
|
||||
|
||||
1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
|
||||
2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
|
||||
3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc.
|
||||
4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.
|
||||
|
||||
## Critical Rules
|
||||
|
||||
These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.
|
||||
|
||||
### Styling & Tailwind → [styling.md](./rules/styling.md)
|
||||
|
||||
- **`className` for layout, not styling.** Never override component colors or typography.
|
||||
- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`.
|
||||
- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`.
|
||||
- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`.
|
||||
- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`).
|
||||
- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries.
|
||||
- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking.
|
||||
|
||||
### Forms & Inputs → [forms.md](./rules/forms.md)
|
||||
|
||||
- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.
|
||||
- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`.
|
||||
- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.**
|
||||
- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state.
|
||||
- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading.
|
||||
- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control.
|
||||
|
||||
### Component Structure → [composition.md](./rules/composition.md)
|
||||
|
||||
- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`.
|
||||
- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md)
|
||||
- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden.
|
||||
- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`.
|
||||
- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`.
|
||||
- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`.
|
||||
- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load.
|
||||
|
||||
### Use Components, Not Custom Markup → [composition.md](./rules/composition.md)
|
||||
|
||||
- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`.
|
||||
- **Callouts use `Alert`.** Don't build custom styled divs.
|
||||
- **Empty states use `Empty`.** Don't build custom empty state markup.
|
||||
- **Toast follows the project base.** Use `toast` from the `toast` component for
|
||||
Base UI projects. Use `toast()` from `sonner` for Radix and React Aria
|
||||
projects.
|
||||
- **Use `Separator`** instead of `<hr>` or `<div className="border-t">`.
|
||||
- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs.
|
||||
- **Use `Badge`** instead of custom styled spans.
|
||||
|
||||
### Icons → [icons.md](./rules/icons.md)
|
||||
|
||||
- **Icons in `Button` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon.
|
||||
- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`.
|
||||
- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup.
|
||||
|
||||
### Chat & Messaging → [chat.md](./rules/chat.md)
|
||||
|
||||
- **Chat UI composes the chat primitives.** Conversations use `MessageScroller`, rows use `Message`, surfaces use `Bubble`. Never hand-rolled bubble `div`s or a raw scroll container.
|
||||
- **`MessageScroller` owns scroll behavior.** Streaming follow, anchoring, and jump-to-latest (`MessageScrollerButton`) are built in. Don't write a `useStickToBottom`/`ResizeObserver` hook.
|
||||
- **Attachments use `Attachment`; system notes and dividers use `Marker`.** Not `Item` cards or `Separator` + a label.
|
||||
|
||||
### CLI
|
||||
|
||||
- **Never decode preset codes or build preset URLs manually.** Use `npx shadcn@latest preset decode <code>`, `preset url <code>`, or `preset open <code>`. For project-aware preset detection, use `npx shadcn@latest preset resolve`.
|
||||
- **Apply preset codes directly with the CLI.** Use `npx shadcn@latest apply <code>` for existing projects, or `npx shadcn@latest init --preset <code>` when initializing.
|
||||
|
||||
## Key Patterns
|
||||
|
||||
These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above.
|
||||
|
||||
```tsx
|
||||
// Form layout: FieldGroup + Field, not div + Label.
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input id="email" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
// Validation: data-invalid on Field, aria-invalid on the control.
|
||||
<Field data-invalid>
|
||||
<FieldLabel>Email</FieldLabel>
|
||||
<Input aria-invalid />
|
||||
<FieldDescription>Invalid email.</FieldDescription>
|
||||
</Field>
|
||||
|
||||
// Icons in buttons: data-icon, no sizing classes.
|
||||
<Button>
|
||||
<SearchIcon data-icon="inline-start" />
|
||||
Search
|
||||
</Button>
|
||||
|
||||
// Spacing: gap-*, not space-y-*.
|
||||
<div className="flex flex-col gap-4"> // correct
|
||||
<div className="space-y-4"> // wrong
|
||||
|
||||
// Equal dimensions: size-*, not w-* h-*.
|
||||
<Avatar className="size-10"> // correct
|
||||
<Avatar className="w-10 h-10"> // wrong
|
||||
|
||||
// Status colors: Badge variants or semantic tokens, not raw colors.
|
||||
<Badge variant="secondary">+20.1%</Badge> // correct
|
||||
<span className="text-emerald-600">+20.1%</span> // wrong
|
||||
```
|
||||
|
||||
## Component Selection
|
||||
|
||||
| Need | Use |
|
||||
| -------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| Button/action | `Button` with appropriate variant |
|
||||
| Form inputs | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` |
|
||||
| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem` |
|
||||
| Data display | `Table`, `Card`, `Badge`, `Avatar` |
|
||||
| Navigation | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination` |
|
||||
| Overlays | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation) |
|
||||
| Feedback | `toast` (Base UI), `sonner` (Radix/Aria), `Alert`, `Progress`, `Skeleton`, `Spinner` |
|
||||
| Command palette | `Command` inside `Dialog` |
|
||||
| Charts | `Chart` (wraps Recharts) |
|
||||
| Layout | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible` |
|
||||
| Empty states | `Empty` |
|
||||
| Menus | `DropdownMenu`, `ContextMenu`, `Menubar` |
|
||||
| Tooltips/info | `Tooltip`, `HoverCard`, `Popover` |
|
||||
| Chat / conversation UI | `MessageScroller`, `Message`, `Bubble`, `Attachment`, `Marker` |
|
||||
|
||||
## Key Fields
|
||||
|
||||
The injected project context contains these key fields:
|
||||
|
||||
- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode.
|
||||
- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive.
|
||||
- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`.
|
||||
- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.
|
||||
- **`style`** → component visual treatment (e.g. `nova`, `vega`).
|
||||
- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props.
|
||||
- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`.
|
||||
- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc.
|
||||
- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA).
|
||||
- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`).
|
||||
- **`preset`** → resolved preset code and values for the current project. Use `npx shadcn@latest preset resolve --json` when you only need preset information.
|
||||
|
||||
See [cli.md — `info` command](./cli.md) for the full field reference.
|
||||
|
||||
## Component Docs, Examples, and Usage
|
||||
|
||||
Run `npx shadcn@latest docs <component>` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.
|
||||
|
||||
```bash
|
||||
npx shadcn@latest docs button dialog select
|
||||
```
|
||||
|
||||
**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing.
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh.
|
||||
2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed.
|
||||
3. **Find components** — `npx shadcn@latest search`.
|
||||
4. **Get docs and examples** — run `npx shadcn@latest docs <component>` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`.
|
||||
5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below).
|
||||
6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.
|
||||
7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on.
|
||||
8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, `owner/repo`, etc.), ask which registry to use. Never default to a registry on behalf of the user.
|
||||
9. **Switching presets** — Ask the user first: **overwrite**, **partial**, **merge**, or **skip**?
|
||||
- **Inspect current preset**: `npx shadcn@latest preset resolve`. Use `--json` when you need structured values.
|
||||
- **Inspect incoming preset**: `npx shadcn@latest preset decode <code>`. Use `preset url <code>` or `preset open <code>` to share or open the preset builder.
|
||||
- **Overwrite**: `npx shadcn@latest apply <code>`. Overwrites detected components, fonts, and CSS variables.
|
||||
- **Partial**: `npx shadcn@latest apply <code> --only theme,font`. Updates only the selected preset parts without reinstalling UI components. Supported values are `theme` and `font`; comma-separated combinations are allowed. `icon` is intentionally not supported, because icon changes may require full component reinstall and transforms.
|
||||
- **Merge**: `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually.
|
||||
- **Skip**: `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS, leaves components as-is.
|
||||
- **Important**: Always run preset commands inside the user's project directory. `apply` only works in an existing project with a `components.json` file. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch/temp directory (e.g. for `--dry-run` comparisons), pass `--base <current-base>` explicitly — preset codes do not encode the base.
|
||||
|
||||
## Updating Components
|
||||
|
||||
When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.**
|
||||
|
||||
1. Run `npx shadcn@latest add <component> --dry-run` to see all files that would be affected.
|
||||
2. For each file, run `npx shadcn@latest add <component> --diff <file>` to see what changed upstream vs local.
|
||||
3. Decide per file based on the diff:
|
||||
- No local changes → safe to overwrite.
|
||||
- Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.
|
||||
- User says "just update everything" → use `--overwrite`, but confirm first.
|
||||
4. **Never use `--overwrite` without the user's explicit approval.**
|
||||
|
||||
## Quick Reference
|
||||
|
||||
```bash
|
||||
# Create a new project.
|
||||
npx shadcn@latest init --name my-app --preset base-nova
|
||||
npx shadcn@latest init --name my-app --preset a2r6bw --template vite
|
||||
|
||||
# Create a monorepo project.
|
||||
npx shadcn@latest init --name my-app --preset base-nova --monorepo
|
||||
npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo
|
||||
|
||||
# Initialize existing project.
|
||||
npx shadcn@latest init --preset base-nova
|
||||
npx shadcn@latest init --defaults # shortcut: --template=next --preset=nova (base style implied)
|
||||
|
||||
# Apply a preset to an existing project.
|
||||
npx shadcn@latest apply a2r6bw
|
||||
npx shadcn@latest apply a2r6bw --only theme
|
||||
npx shadcn@latest apply a2r6bw --only font
|
||||
npx shadcn@latest apply a2r6bw --only theme,font
|
||||
|
||||
# Inspect preset codes and project preset state.
|
||||
npx shadcn@latest preset decode a2r6bw
|
||||
npx shadcn@latest preset url a2r6bw
|
||||
npx shadcn@latest preset open a2r6bw
|
||||
npx shadcn@latest preset resolve
|
||||
npx shadcn@latest preset resolve --json
|
||||
|
||||
# Add components.
|
||||
npx shadcn@latest add button card dialog
|
||||
npx shadcn@latest add @magicui/shimmer-button
|
||||
npx shadcn@latest add owner/repo/item
|
||||
npx shadcn@latest add --all
|
||||
|
||||
# Preview changes before adding/updating.
|
||||
npx shadcn@latest add button --dry-run
|
||||
npx shadcn@latest add button --diff button.tsx
|
||||
npx shadcn@latest add @acme/form --view button.tsx
|
||||
npx shadcn@latest add owner/repo/item --dry-run
|
||||
|
||||
# Search registries.
|
||||
npx shadcn@latest search @shadcn -q "sidebar"
|
||||
npx shadcn@latest search @tailark -q "stats"
|
||||
npx shadcn@latest search owner/repo -q "login"
|
||||
npx shadcn@latest search # all configured registries
|
||||
npx shadcn@latest search @shadcn -q "menu" -t ui # filter by item type
|
||||
|
||||
# Get component docs and example URLs.
|
||||
npx shadcn@latest docs button dialog select
|
||||
|
||||
# View registry item details (for items not yet installed).
|
||||
npx shadcn@latest view @shadcn/button
|
||||
npx shadcn@latest view owner/repo/item
|
||||
```
|
||||
|
||||
**Named presets:** `nova`, `vega`, `maia`, `lyra`, `mira`, `luma`
|
||||
**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo)
|
||||
**Preset codes:** Version-prefixed base62 strings (e.g. `a2r6bw` or `b0`), from [ui.shadcn.com](https://ui.shadcn.com).
|
||||
|
||||
## Detailed References
|
||||
|
||||
- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states
|
||||
- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading
|
||||
- [rules/chat.md](./rules/chat.md) — MessageScroller, Message, Bubble, Attachment, Marker; streaming, anchoring, jump-to-latest
|
||||
- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects
|
||||
- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index
|
||||
- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion
|
||||
- [cli.md](./cli.md) — Commands, flags, presets, templates
|
||||
- [registry.md](./registry.md) — Authoring source registries, `include`, item definitions, dependencies, GitHub registry rules
|
||||
- [customization.md](./customization.md) — Theming, CSS variables, extending components
|
||||
@@ -0,0 +1,5 @@
|
||||
interface:
|
||||
display_name: "shadcn/ui"
|
||||
short_description: "Manages shadcn/ui components — adding, searching, fixing, debugging, styling, and composing UI."
|
||||
icon_small: "./assets/shadcn-small.png"
|
||||
icon_large: "./assets/shadcn.png"
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1,290 @@
|
||||
# shadcn CLI Reference
|
||||
|
||||
Configuration is read from `components.json`.
|
||||
|
||||
> **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
|
||||
|
||||
> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag.
|
||||
|
||||
## Contents
|
||||
|
||||
- Commands: init, apply, add (dry-run, smart merge), search, view, docs, info, build
|
||||
- Templates: next, vite, start, react-router, astro
|
||||
- Presets: named, code, URL formats and fields
|
||||
- Switching presets
|
||||
|
||||
---
|
||||
|
||||
## Commands
|
||||
|
||||
### `init` — Initialize or create a project
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init [components...] [options]
|
||||
```
|
||||
|
||||
Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step.
|
||||
|
||||
| Flag | Short | Description | Default |
|
||||
| ----------------------- | ----- | --------------------------------------------------------- | ------- |
|
||||
| `--template <template>` | `-t` | Template (next, start, vite, next-monorepo, react-router) | — |
|
||||
| `--preset [name]` | `-p` | Preset configuration (named, code, or URL) | — |
|
||||
| `--yes` | `-y` | Skip confirmation prompt | `true` |
|
||||
| `--defaults` | `-d` | Use defaults (`--template=next --preset=base-nova`) | `false` |
|
||||
| `--force` | `-f` | Force overwrite existing configuration | `false` |
|
||||
| `--cwd <cwd>` | `-c` | Working directory | current |
|
||||
| `--name <name>` | `-n` | Name for new project | — |
|
||||
| `--silent` | `-s` | Mute output | `false` |
|
||||
| `--rtl` | | Enable RTL support | — |
|
||||
| `--reinstall` | | Re-install existing UI components | `false` |
|
||||
| `--monorepo` | | Scaffold a monorepo project | — |
|
||||
| `--no-monorepo` | | Skip the monorepo prompt | — |
|
||||
|
||||
`npx shadcn@latest create` is an alias for `npx shadcn@latest init`.
|
||||
|
||||
### `apply` — Apply a preset to an existing project
|
||||
|
||||
```bash
|
||||
npx shadcn@latest apply [preset] [options]
|
||||
```
|
||||
|
||||
Applies a preset to an existing project, overwriting preset-driven config, fonts, CSS variables, and detected UI components.
|
||||
|
||||
| Flag | Short | Description | Default |
|
||||
| ------------------- | ----- | ------------------------------------------ | ------- |
|
||||
| `--preset <preset>` | — | Preset configuration (named, code, or URL) | — |
|
||||
| `--yes` | `-y` | Skip confirmation prompt | `false` |
|
||||
| `--cwd <cwd>` | `-c` | Working directory | current |
|
||||
| `--silent` | `-s` | Mute output | `false` |
|
||||
|
||||
`[preset]` is a shorthand for `--preset <preset>`. If both are provided, they must match.
|
||||
If no preset is provided, the CLI offers to open the custom preset builder on `ui.shadcn.com/create`.
|
||||
|
||||
### `add` — Add components
|
||||
|
||||
> **IMPORTANT:** To compare local components against upstream or to preview changes, ALWAYS use `npx shadcn@latest add <component> --dry-run`, `--diff`, or `--view`. NEVER fetch raw files from GitHub or other sources manually. The CLI handles registry resolution, file paths, and CSS diffing automatically.
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add [components...] [options]
|
||||
```
|
||||
|
||||
Accepts component names, registry-prefixed names (`@magicui/shimmer-button`),
|
||||
GitHub item addresses (`owner/repo/item`), URLs, or local paths.
|
||||
|
||||
| Flag | Short | Description | Default |
|
||||
| --------------- | ----- | -------------------------------------------------------------------------------------------------------------------- | ------- |
|
||||
| `--yes` | `-y` | Skip confirmation prompt | `false` |
|
||||
| `--overwrite` | `-o` | Overwrite existing files | `false` |
|
||||
| `--cwd <cwd>` | `-c` | Working directory | current |
|
||||
| `--all` | `-a` | Add all available components | `false` |
|
||||
| `--path <path>` | `-p` | Target path for the component | — |
|
||||
| `--silent` | `-s` | Mute output | `false` |
|
||||
| `--dry-run` | | Preview all changes without writing files | `false` |
|
||||
| `--diff [path]` | | Show diffs. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`) | — |
|
||||
| `--view [path]` | | Show file contents. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`) | — |
|
||||
|
||||
#### Dry-Run Mode
|
||||
|
||||
Use `--dry-run` to preview what `add` would do without writing any files. `--diff` and `--view` both imply `--dry-run`.
|
||||
|
||||
```bash
|
||||
# Preview all changes.
|
||||
npx shadcn@latest add button --dry-run
|
||||
|
||||
# Show diffs for all files (top 5).
|
||||
npx shadcn@latest add button --diff
|
||||
|
||||
# Show the diff for a specific file.
|
||||
npx shadcn@latest add button --diff button.tsx
|
||||
|
||||
# Show contents for all files (top 5).
|
||||
npx shadcn@latest add button --view
|
||||
|
||||
# Show the full content of a specific file.
|
||||
npx shadcn@latest add button --view button.tsx
|
||||
|
||||
# Works with URLs too.
|
||||
npx shadcn@latest add https://api.npoint.io/abc123 --dry-run
|
||||
|
||||
# Works with public GitHub registries too.
|
||||
npx shadcn@latest add owner/repo/item --dry-run
|
||||
|
||||
# CSS diffs.
|
||||
npx shadcn@latest add button --diff globals.css
|
||||
```
|
||||
|
||||
**When to use dry-run:**
|
||||
|
||||
- When the user asks "what files will this add?" or "what will this change?" — use `--dry-run`.
|
||||
- Before overwriting existing components — use `--diff` to preview the changes first.
|
||||
- When the user wants to inspect component source code without installing — use `--view`.
|
||||
- When checking what CSS changes would be made to `globals.css` — use `--diff globals.css`.
|
||||
- When the user asks to review or audit third-party registry code before installing — use `--view` to inspect the source.
|
||||
|
||||
> **`npx shadcn@latest add --dry-run` vs `npx shadcn@latest view`:** Prefer `npx shadcn@latest add --dry-run/--diff/--view` over `npx shadcn@latest view` when the user wants to preview changes to their project. `npx shadcn@latest view` only shows raw registry metadata. `npx shadcn@latest add --dry-run` shows exactly what would happen in the user's project: resolved file paths, diffs against existing files, and CSS updates. Use `npx shadcn@latest view` only when the user wants to browse registry info without a project context.
|
||||
|
||||
#### Smart Merge from Upstream
|
||||
|
||||
See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full workflow.
|
||||
|
||||
### `search` — Search registries
|
||||
|
||||
```bash
|
||||
npx shadcn@latest search [registries...] [options]
|
||||
```
|
||||
|
||||
Fuzzy search across registries. Also aliased as `npx shadcn@latest list`.
|
||||
Supports namespaces (`@acme`), public GitHub registry sources (`owner/repo`),
|
||||
and registry catalog URLs. Without `-q`, lists all items. When no registries are
|
||||
passed, searches every registry configured in `components.json`.
|
||||
|
||||
| Flag | Short | Description | Default |
|
||||
| ------------------- | ----- | ------------------------------------------------- | ------- |
|
||||
| `--query <query>` | `-q` | Search query | — |
|
||||
| `--type <type>` | `-t` | Filter by item type (e.g. `ui`, `block`, `hook`); comma-separated | — |
|
||||
| `--limit <number>` | `-l` | Max items to display | `100` |
|
||||
| `--offset <number>` | `-o` | Items to skip | `0` |
|
||||
| `--json` | | Output as JSON | `false` |
|
||||
| `--cwd <cwd>` | `-c` | Working directory | current |
|
||||
|
||||
### `view` — View item details
|
||||
|
||||
```bash
|
||||
npx shadcn@latest view <items...> [options]
|
||||
```
|
||||
|
||||
Displays item info including file contents. Examples:
|
||||
`npx shadcn@latest view @shadcn/button`,
|
||||
`npx shadcn@latest view owner/repo/item`.
|
||||
|
||||
### `docs` — Get component documentation URLs
|
||||
|
||||
```bash
|
||||
npx shadcn@latest docs <components...> [options]
|
||||
```
|
||||
|
||||
Outputs resolved URLs for component documentation, examples, and API references. Accepts one or more component names. Fetch the URLs to get the actual content.
|
||||
|
||||
Example output for `npx shadcn@latest docs input button`:
|
||||
|
||||
```
|
||||
base radix
|
||||
|
||||
input
|
||||
docs https://ui.shadcn.com/docs/components/radix/input
|
||||
examples https://raw.githubusercontent.com/.../examples/input-example.tsx
|
||||
|
||||
button
|
||||
docs https://ui.shadcn.com/docs/components/radix/button
|
||||
examples https://raw.githubusercontent.com/.../examples/button-example.tsx
|
||||
```
|
||||
|
||||
Some components include an `api` link to the underlying library (e.g. `cmdk` for the command component).
|
||||
|
||||
### `diff` — Check for updates
|
||||
|
||||
Do not use this command. Use `npx shadcn@latest add --diff` instead.
|
||||
|
||||
### `info` — Project information
|
||||
|
||||
```bash
|
||||
npx shadcn@latest info [options]
|
||||
```
|
||||
|
||||
Displays project info and `components.json` configuration. Run this first to discover the project's framework, aliases, Tailwind version, and resolved paths.
|
||||
|
||||
| Flag | Short | Description | Default |
|
||||
| ------------- | ----- | ----------------- | ------- |
|
||||
| `--cwd <cwd>` | `-c` | Working directory | current |
|
||||
|
||||
**Project Info fields:**
|
||||
|
||||
| Field | Type | Meaning |
|
||||
| -------------------- | --------- | ------------------------------------------------------------------ |
|
||||
| `framework` | `string` | Detected framework (`next`, `vite`, `react-router`, `start`, etc.) |
|
||||
| `frameworkVersion` | `string` | Framework version (e.g. `15.2.4`) |
|
||||
| `isSrcDir` | `boolean` | Whether the project uses a `src/` directory |
|
||||
| `isRSC` | `boolean` | Whether React Server Components are enabled |
|
||||
| `isTsx` | `boolean` | Whether the project uses TypeScript |
|
||||
| `tailwindVersion` | `string` | `"v3"` or `"v4"` |
|
||||
| `tailwindConfigFile` | `string` | Path to the Tailwind config file |
|
||||
| `tailwindCssFile` | `string` | Path to the global CSS file |
|
||||
| `aliasPrefix` | `string` | Import alias prefix (e.g. `@`, `~`, `@/`) |
|
||||
| `packageManager` | `string` | Detected package manager (`npm`, `pnpm`, `yarn`, `bun`) |
|
||||
|
||||
**Components.json fields:**
|
||||
|
||||
| Field | Type | Meaning |
|
||||
| -------------------- | --------- | ------------------------------------------------------------------------------------------ |
|
||||
| `base` | `string` | Primitive library (`radix` or `base`) — determines component APIs and available props |
|
||||
| `style` | `string` | Visual style (e.g. `nova`, `vega`) |
|
||||
| `rsc` | `boolean` | RSC flag from config |
|
||||
| `tsx` | `boolean` | TypeScript flag |
|
||||
| `tailwind.config` | `string` | Tailwind config path |
|
||||
| `tailwind.css` | `string` | Global CSS path — this is where custom CSS variables go |
|
||||
| `iconLibrary` | `string` | Icon library — determines icon import package (e.g. `lucide-react`, `@tabler/icons-react`) |
|
||||
| `aliases.components` | `string` | Component import alias (e.g. `@/components`) |
|
||||
| `aliases.utils` | `string` | Utils import alias (e.g. `@/lib/utils`) |
|
||||
| `aliases.ui` | `string` | UI component alias (e.g. `@/components/ui`) |
|
||||
| `aliases.lib` | `string` | Lib alias (e.g. `@/lib`) |
|
||||
| `aliases.hooks` | `string` | Hooks alias (e.g. `@/hooks`) |
|
||||
| `resolvedPaths` | `object` | Absolute file-system paths for each alias |
|
||||
| `registries` | `object` | Configured custom registries |
|
||||
|
||||
**Links fields:**
|
||||
|
||||
The `info` output includes a **Links** section with templated URLs for component docs, source, and examples. For resolved URLs, use `npx shadcn@latest docs <component>` instead.
|
||||
|
||||
### `build` — Build a custom registry
|
||||
|
||||
```bash
|
||||
npx shadcn@latest build [registry] [options]
|
||||
```
|
||||
|
||||
Builds `registry.json` into individual JSON files for distribution. Default input: `./registry.json`, default output: `./public/r`.
|
||||
|
||||
For authoring rules, `include`, item definitions, `registryDependencies`, and
|
||||
GitHub registry behavior, see [registry.md](./registry.md).
|
||||
|
||||
| Flag | Short | Description | Default |
|
||||
| ----------------- | ----- | ----------------- | ------------ |
|
||||
| `--output <path>` | `-o` | Output directory | `./public/r` |
|
||||
| `--cwd <cwd>` | `-c` | Working directory | current |
|
||||
|
||||
---
|
||||
|
||||
## Templates
|
||||
|
||||
| Value | Framework | Monorepo support |
|
||||
| -------------- | -------------- | ---------------- |
|
||||
| `next` | Next.js | Yes |
|
||||
| `vite` | Vite | Yes |
|
||||
| `start` | TanStack Start | Yes |
|
||||
| `react-router` | React Router | Yes |
|
||||
| `astro` | Astro | Yes |
|
||||
| `laravel` | Laravel | No |
|
||||
|
||||
All templates support monorepo scaffolding via the `--monorepo` flag. When passed, the CLI uses a monorepo-specific template directory (e.g. `next-monorepo`, `vite-monorepo`). When neither `--monorepo` nor `--no-monorepo` is passed, the CLI prompts interactively. Laravel does not support monorepo scaffolding.
|
||||
|
||||
---
|
||||
|
||||
## Presets
|
||||
|
||||
Three ways to specify a preset via `--preset`:
|
||||
|
||||
1. **Named:** `--preset nova` or `--preset lyra`
|
||||
2. **Code:** `--preset a2r6bw` (version-prefixed base62 string, e.g. `a2r6bw` or `b0`)
|
||||
3. **URL:** `--preset "https://ui.shadcn.com/init?base=radix&style=nova&..."`
|
||||
|
||||
> **IMPORTANT:** Never try to decode, fetch, or resolve preset codes manually. Preset codes are opaque — pass them directly to `npx shadcn@latest init --preset <code>` and let the CLI handle resolution.
|
||||
> Use `npx shadcn@latest apply --preset <code>` when overwriting an existing project's preset.
|
||||
|
||||
## Switching Presets
|
||||
|
||||
Ask the user first: **overwrite**, **merge**, or **skip** existing components?
|
||||
|
||||
- **Overwrite / Re-install** → `npx shadcn@latest apply --preset <code>`. Overwrites all detected component files with the new preset styles. Use when the user hasn't customized components.
|
||||
- **Merge** → `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to get the list of installed components and use the [smart merge workflow](./SKILL.md#updating-components) to update them one by one, preserving local changes. Use when the user has customized components.
|
||||
- **Skip** → `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS variables, leaves existing components as-is.
|
||||
|
||||
Always run preset commands inside the user's project directory. `apply` only works in an existing project with a `components.json` file. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch/temp directory (e.g. for `--dry-run` comparisons), pass `--base <current-base>` explicitly — preset codes do not encode the base.
|
||||
@@ -0,0 +1,209 @@
|
||||
# Customization & Theming
|
||||
|
||||
Components reference semantic CSS variable tokens. Change the variables to change every component.
|
||||
|
||||
## Contents
|
||||
|
||||
- How it works (CSS variables → Tailwind utilities → components)
|
||||
- Color variables and OKLCH format
|
||||
- Dark mode setup
|
||||
- Changing the theme (presets, CSS variables)
|
||||
- Adding custom colors (Tailwind v3 and v4)
|
||||
- Border radius
|
||||
- Customizing components (variants, className, wrappers)
|
||||
- Checking for updates
|
||||
|
||||
---
|
||||
|
||||
## How It Works
|
||||
|
||||
1. CSS variables defined in `:root` (light) and `.dark` (dark mode).
|
||||
2. Tailwind maps them to utilities: `bg-primary`, `text-muted-foreground`, etc.
|
||||
3. Components use these utilities — changing a variable changes all components that reference it.
|
||||
|
||||
---
|
||||
|
||||
## Color Variables
|
||||
|
||||
Every color follows the `name` / `name-foreground` convention. The base variable is for backgrounds, `-foreground` is for text/icons on that background.
|
||||
|
||||
| Variable | Purpose |
|
||||
| -------------------------------------------- | -------------------------------- |
|
||||
| `--background` / `--foreground` | Page background and default text |
|
||||
| `--card` / `--card-foreground` | Card surfaces |
|
||||
| `--primary` / `--primary-foreground` | Primary buttons and actions |
|
||||
| `--secondary` / `--secondary-foreground` | Secondary actions |
|
||||
| `--muted` / `--muted-foreground` | Muted/disabled states |
|
||||
| `--accent` / `--accent-foreground` | Hover and accent states |
|
||||
| `--destructive` / `--destructive-foreground` | Error and destructive actions |
|
||||
| `--border` | Default border color |
|
||||
| `--input` | Form input borders |
|
||||
| `--ring` | Focus ring color |
|
||||
| `--chart-1` through `--chart-5` | Chart/data visualization |
|
||||
| `--sidebar-*` | Sidebar-specific colors |
|
||||
| `--surface` / `--surface-foreground` | Secondary surface |
|
||||
|
||||
Colors use OKLCH: `--primary: oklch(0.205 0 0)` where values are lightness (0–1), chroma (0 = gray), and hue (0–360).
|
||||
|
||||
---
|
||||
|
||||
## Dark Mode
|
||||
|
||||
Class-based toggle via `.dark` on the root element. In Next.js, use `next-themes`:
|
||||
|
||||
```tsx
|
||||
import { ThemeProvider } from "next-themes"
|
||||
|
||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Changing the Theme
|
||||
|
||||
```bash
|
||||
# Apply a preset code from ui.shadcn.com.
|
||||
npx shadcn@latest apply --preset a2r6bw
|
||||
|
||||
# Positional shorthand also works.
|
||||
npx shadcn@latest apply a2r6bw
|
||||
|
||||
# Switch to a named preset and overwrite existing components.
|
||||
npx shadcn@latest apply --preset nova
|
||||
|
||||
# Preserve existing components instead.
|
||||
npx shadcn@latest init --preset nova --force --no-reinstall
|
||||
|
||||
# Use a custom theme URL.
|
||||
npx shadcn@latest apply --preset "https://ui.shadcn.com/init?base=radix&style=nova&theme=blue&..."
|
||||
```
|
||||
|
||||
Or edit CSS variables directly in `globals.css`.
|
||||
|
||||
---
|
||||
|
||||
## Adding Custom Colors
|
||||
|
||||
Add variables to the file at `tailwindCssFile` from `npx shadcn@latest info` (typically `globals.css`). Never create a new CSS file for this.
|
||||
|
||||
```css
|
||||
/* 1. Define in the global CSS file. */
|
||||
:root {
|
||||
--warning: oklch(0.84 0.16 84);
|
||||
--warning-foreground: oklch(0.28 0.07 46);
|
||||
}
|
||||
.dark {
|
||||
--warning: oklch(0.41 0.11 46);
|
||||
--warning-foreground: oklch(0.99 0.02 95);
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
/* 2a. Register with Tailwind v4 (@theme inline). */
|
||||
@theme inline {
|
||||
--color-warning: var(--warning);
|
||||
--color-warning-foreground: var(--warning-foreground);
|
||||
}
|
||||
```
|
||||
|
||||
When `tailwindVersion` is `"v3"` (check via `npx shadcn@latest info`), register in `tailwind.config.js` instead:
|
||||
|
||||
```js
|
||||
// 2b. Register with Tailwind v3 (tailwind.config.js).
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
warning: "oklch(var(--warning) / <alpha-value>)",
|
||||
"warning-foreground":
|
||||
"oklch(var(--warning-foreground) / <alpha-value>)",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
```tsx
|
||||
// 3. Use in components.
|
||||
<div className="bg-warning text-warning-foreground">Warning</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Border Radius
|
||||
|
||||
`--radius` controls border radius globally. Components derive values from it (`rounded-lg` = `var(--radius)`, `rounded-md` = `calc(var(--radius) - 2px)`).
|
||||
|
||||
---
|
||||
|
||||
## Customizing Components
|
||||
|
||||
See also: [rules/styling.md](./rules/styling.md) for Incorrect/Correct examples.
|
||||
|
||||
Prefer these approaches in order:
|
||||
|
||||
### 1. Built-in variants
|
||||
|
||||
```tsx
|
||||
<Button variant="outline" size="sm">
|
||||
Click
|
||||
</Button>
|
||||
```
|
||||
|
||||
### 2. Tailwind classes via `className`
|
||||
|
||||
```tsx
|
||||
<Card className="mx-auto max-w-md">...</Card>
|
||||
```
|
||||
|
||||
### 3. Add a new variant
|
||||
|
||||
Edit the component source to add a variant via `cva`:
|
||||
|
||||
```tsx
|
||||
// components/ui/button.tsx
|
||||
warning: "bg-warning text-warning-foreground hover:bg-warning/90",
|
||||
```
|
||||
|
||||
### 4. Wrapper components
|
||||
|
||||
Compose shadcn/ui primitives into higher-level components:
|
||||
|
||||
```tsx
|
||||
export function ConfirmDialog({ title, description, onConfirm, children }) {
|
||||
return (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{title}</AlertDialogTitle>
|
||||
<AlertDialogDescription>{description}</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={onConfirm}>Confirm</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Checking for Updates
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add button --diff
|
||||
```
|
||||
|
||||
To preview exactly what would change before updating, use `--dry-run` and `--diff`:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add button --dry-run # see all affected files
|
||||
npx shadcn@latest add button --diff button.tsx # see the diff for a specific file
|
||||
```
|
||||
|
||||
See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full smart merge workflow.
|
||||
@@ -0,0 +1,77 @@
|
||||
{
|
||||
"skill_name": "shadcn",
|
||||
"evals": [
|
||||
{
|
||||
"id": 1,
|
||||
"prompt": "I'm building a Next.js app with shadcn/ui (base-nova preset, lucide icons). Create a settings form component with fields for: full name, email address, and notification preferences (email, SMS, push notifications as toggle options). Add validation states for required fields.",
|
||||
"expected_output": "A React component using FieldGroup, Field, ToggleGroup, data-invalid/aria-invalid validation, gap-* spacing, and semantic colors.",
|
||||
"files": [],
|
||||
"expectations": [
|
||||
"Uses FieldGroup and Field components for form layout instead of raw div with space-y",
|
||||
"Uses Switch for independent on/off notification toggles (not looping Button with manual active state)",
|
||||
"Uses data-invalid on Field and aria-invalid on the input control for validation states",
|
||||
"Uses gap-* (e.g. gap-4, gap-6) instead of space-y-* or space-x-* for spacing",
|
||||
"Uses semantic color tokens (e.g. bg-background, text-muted-foreground, text-destructive) instead of raw colors like bg-red-500",
|
||||
"No manual dark: color overrides"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"prompt": "Create a dialog component for editing a user profile. It should have the user's avatar at the top, input fields for name and bio, and Save/Cancel buttons with appropriate icons. Using shadcn/ui with radix-nova preset and tabler icons.",
|
||||
"expected_output": "A React component with DialogTitle, Avatar+AvatarFallback, data-icon on icon buttons, no icon sizing classes, tabler icon imports.",
|
||||
"files": [],
|
||||
"expectations": [
|
||||
"Includes DialogTitle for accessibility (visible or with sr-only class)",
|
||||
"Avatar component includes AvatarFallback",
|
||||
"Icons on buttons use the data-icon attribute (data-icon=\"inline-start\" or data-icon=\"inline-end\")",
|
||||
"No sizing classes on icons inside components (no size-4, w-4, h-4, etc.)",
|
||||
"Uses tabler icons (@tabler/icons-react) instead of lucide-react",
|
||||
"Uses asChild for custom triggers (radix preset)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"prompt": "Create a dashboard component that shows 4 stat cards in a grid. Each card has a title, large number, percentage change badge, and a loading skeleton state. Using shadcn/ui with base-nova preset and lucide icons.",
|
||||
"expected_output": "A React component with full Card composition, Skeleton for loading, Badge for changes, semantic colors, gap-* spacing.",
|
||||
"files": [],
|
||||
"expectations": [
|
||||
"Uses full Card composition with CardHeader, CardTitle, CardContent (not dumping everything into CardContent)",
|
||||
"Uses Skeleton component for loading placeholders instead of custom animate-pulse divs",
|
||||
"Uses Badge component for percentage change instead of custom styled spans",
|
||||
"Uses semantic color tokens instead of raw color values like bg-green-500 or text-red-600",
|
||||
"Uses gap-* instead of space-y-* or space-x-* for spacing",
|
||||
"Uses size-* when width and height are equal instead of separate w-* h-*"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"prompt": "I'm building a Next.js app with shadcn/ui (base-nova preset, lucide icons). Build a chat conversation view: a scrollable thread of messages from two different people, each with an avatar, sender name, timestamp, and message bubble. A couple of messages include an image attachment and a PDF file attachment, and there's a 'Today' divider separating the days.",
|
||||
"expected_output": "A React component composing MessageScroller, Message, Bubble, Attachment, and Marker from the registry instead of hand-rolled bubble/divider/attachment markup.",
|
||||
"files": [],
|
||||
"expectations": [
|
||||
"Uses MessageScroller (MessageScrollerProvider, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem) for the scrollable thread instead of a raw overflow-y-auto div or ScrollArea",
|
||||
"Wraps each row in MessageScrollerItem inside MessageScrollerContent",
|
||||
"Uses Message with MessageAvatar/MessageContent/MessageHeader for row layout instead of custom flex divs",
|
||||
"Uses Bubble + BubbleContent for the message surface instead of a styled div with bg-muted/bg-primary",
|
||||
"Uses Attachment (AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription) for the file and image attachments instead of Item or a custom card",
|
||||
"Uses Marker (variant=\"separator\") for the 'Today' divider instead of Separator plus a centered label",
|
||||
"Uses semantic color tokens and gap-* spacing; no raw colors like bg-emerald-500 and no space-y-*",
|
||||
"Includes \"use client\" when the component uses state or event handlers (isRSC)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"prompt": "Using shadcn/ui (base-nova preset, lucide icons), build a streaming AI chat UI. The assistant's reply streams in while it generates, the view auto-scrolls to follow the latest content but stops following if the user scrolls up to read earlier messages, a 'jump to latest' button appears when the user has scrolled away from the bottom, and a subtle 'thinking…' shimmer shows while the model is generating.",
|
||||
"expected_output": "A React component that delegates scroll/anchor behavior to MessageScroller and uses MessageScrollerButton for jump-to-latest and the shimmer utility for the thinking indicator — no hand-rolled scroll logic or custom shimmer keyframes.",
|
||||
"files": [],
|
||||
"expectations": [
|
||||
"Uses MessageScroller with MessageScrollerProvider (autoScroll) and scrollAnchor on message items for the stick-to-bottom/follow behavior instead of a custom useStickToBottom hook or ResizeObserver/scrollTop wiring",
|
||||
"Uses MessageScrollerButton for the jump-to-latest control instead of a hand-built conditional button driven by manual scroll-position state",
|
||||
"Uses the shimmer utility class for the 'thinking…' indicator instead of a custom @keyframes or bg-clip-text gradient animation",
|
||||
"Wraps each message row in MessageScrollerItem inside MessageScrollerContent",
|
||||
"Uses Message + Bubble + BubbleContent for the conversation rows instead of hand-rolled bubble divs",
|
||||
"Uses semantic color tokens and gap-* spacing; includes \"use client\" (isRSC)"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
# shadcn MCP Server
|
||||
|
||||
The CLI includes an MCP server that lets AI assistants search, browse, view, and install items from registries.
|
||||
|
||||
---
|
||||
|
||||
## Setup
|
||||
|
||||
```bash
|
||||
shadcn mcp # start the MCP server (stdio)
|
||||
shadcn mcp init # write config for your editor
|
||||
```
|
||||
|
||||
Editor config files:
|
||||
|
||||
| Editor | Config file |
|
||||
| ----------- | ------------------------------- |
|
||||
| Claude Code | `.mcp.json` |
|
||||
| Cursor | `.cursor/mcp.json` |
|
||||
| VS Code | `.vscode/mcp.json` |
|
||||
| OpenCode | `opencode.json` |
|
||||
| Codex | `~/.codex/config.toml` (manual) |
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
|
||||
> **Tip:** MCP tools handle registry operations (search, view, install). For project configuration (aliases, framework, Tailwind version), use `npx shadcn@latest info` — there is no MCP equivalent.
|
||||
|
||||
### `shadcn:get_project_registries`
|
||||
|
||||
Returns registry names from `components.json`. Errors if no `components.json` exists.
|
||||
|
||||
**Input:** none
|
||||
|
||||
### `shadcn:list_items_in_registries`
|
||||
|
||||
Lists all items from one or more registries. Registries can be configured
|
||||
namespaces such as `@acme`, public GitHub sources such as `owner/repo`, or
|
||||
registry catalog URLs. Omit `registries` to list from every registry configured
|
||||
in `components.json`.
|
||||
|
||||
**Input:** `registries` (string[], optional — omit for all configured), `types` (string[], optional — e.g. `["ui", "block"]`), `limit` (number, optional, defaults to 100), `offset` (number, optional)
|
||||
|
||||
### `shadcn:search_items_in_registries`
|
||||
|
||||
Fuzzy search across registries. Registries can be configured namespaces, public
|
||||
GitHub sources, or registry catalog URLs. Omit `registries` to search every
|
||||
registry configured in `components.json` — e.g. "find me a hero" across all
|
||||
configured registries.
|
||||
|
||||
**Input:** `registries` (string[], optional — omit for all configured), `query` (string), `types` (string[], optional — e.g. `["ui", "block"]`), `limit` (number, optional, defaults to 100), `offset` (number, optional)
|
||||
|
||||
### `shadcn:view_items_in_registries`
|
||||
|
||||
View item details including full file contents.
|
||||
|
||||
**Input:** `items` (string[]) — e.g.
|
||||
`["@shadcn/button", "@shadcn/card", "owner/repo/item"]`
|
||||
|
||||
### `shadcn:get_item_examples_from_registries`
|
||||
|
||||
Find usage examples and demos with source code. Omit `registries` to search
|
||||
every registry configured in `components.json`.
|
||||
|
||||
**Input:** `registries` (string[], optional — omit for all configured), `query` (string) — e.g. `"accordion-demo"`, `"button example"`
|
||||
|
||||
### `shadcn:get_add_command_for_items`
|
||||
|
||||
Returns the CLI install command.
|
||||
|
||||
**Input:** `items` (string[]) — e.g. `["@shadcn/button"]`
|
||||
|
||||
### `shadcn:get_audit_checklist`
|
||||
|
||||
Returns a checklist for verifying components (imports, deps, lint, TypeScript).
|
||||
|
||||
**Input:** none
|
||||
|
||||
---
|
||||
|
||||
## Configuring Registries
|
||||
|
||||
Namespaced and authenticated registries are set in `components.json`. The
|
||||
`@shadcn` registry is always built-in. Public GitHub registries can also be used
|
||||
directly as `owner/repo` registry sources when the repository has a root
|
||||
`registry.json`; they do not need `components.json` configuration.
|
||||
|
||||
```json
|
||||
{
|
||||
"registries": {
|
||||
"@acme": "https://acme.com/r/{name}.json",
|
||||
"@private": {
|
||||
"url": "https://private.com/r/{name}.json",
|
||||
"headers": { "Authorization": "Bearer ${MY_TOKEN}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- Names must start with `@`.
|
||||
- URLs must contain `{name}`.
|
||||
- `${VAR}` references are resolved from environment variables.
|
||||
|
||||
Community registry index: `https://ui.shadcn.com/r/registries.json`
|
||||
@@ -0,0 +1,277 @@
|
||||
# Registry Authoring and Addresses
|
||||
|
||||
Use this reference when the user wants to create, fix, publish, or reason about
|
||||
a shadcn registry.
|
||||
|
||||
## Mental Model
|
||||
|
||||
A registry has two forms:
|
||||
|
||||
- **Source registry**: an authored `registry.json` in a project or repository.
|
||||
It may use `include` and file paths that point at source files.
|
||||
- **Built registry**: generated JSON files served to CLI consumers, usually
|
||||
from `public/r`. Use `npx shadcn@latest build` to create this form.
|
||||
|
||||
The CLI installer consumes registry item payloads. A source registry is a way to
|
||||
author those payloads from real files.
|
||||
|
||||
Registry items are not limited to React components. They can distribute
|
||||
components, hooks, utilities, design tokens, pages, config files, docs, rules,
|
||||
workflows, templates, MCP files, and other project files.
|
||||
|
||||
## Root `registry.json`
|
||||
|
||||
The root registry file should define registry metadata and either `items` or
|
||||
`include`.
|
||||
|
||||
```json
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry.json",
|
||||
"name": "acme",
|
||||
"homepage": "https://acme.com",
|
||||
"items": [
|
||||
{
|
||||
"name": "absolute-url",
|
||||
"type": "registry:lib",
|
||||
"title": "Absolute URL",
|
||||
"description": "A utility to turn any path into an absolute URL.",
|
||||
"files": [
|
||||
{
|
||||
"path": "lib/absolute-url.ts",
|
||||
"type": "registry:lib"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Root registry rules:
|
||||
|
||||
- Root `registry.json` must include `name` and `homepage`.
|
||||
- `items` is an array of registry item definitions.
|
||||
- `include` may be used to split the source registry into multiple files.
|
||||
- Included registry files may omit `name` and `homepage`.
|
||||
|
||||
## Include
|
||||
|
||||
Use `include` to keep large registries modular.
|
||||
|
||||
```json
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry.json",
|
||||
"name": "acme",
|
||||
"homepage": "https://acme.com",
|
||||
"include": ["registry/ui/registry.json", "registry/blocks/registry.json"]
|
||||
}
|
||||
```
|
||||
|
||||
Include rules:
|
||||
|
||||
- Include paths are relative to the `registry.json` that declares them.
|
||||
- Include paths must explicitly point to a `registry.json` file.
|
||||
- Do not use remote URLs, absolute paths, or parent traversal (`..`).
|
||||
- Item file paths are relative to the registry file that declares the item.
|
||||
- Duplicate item names fail across the resolved registry.
|
||||
|
||||
Example included file:
|
||||
|
||||
```json
|
||||
{
|
||||
"items": [
|
||||
{
|
||||
"name": "button",
|
||||
"type": "registry:ui",
|
||||
"files": [
|
||||
{
|
||||
"path": "button.tsx",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
If this file is at `registry/ui/registry.json`, then `button.tsx` is read from
|
||||
`registry/ui/button.tsx`, and the built item path is emitted relative to the
|
||||
root registry.
|
||||
|
||||
## Item Definitions
|
||||
|
||||
Common item fields:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "login-form",
|
||||
"type": "registry:block",
|
||||
"title": "Login Form",
|
||||
"description": "A login form with email and password fields.",
|
||||
"dependencies": ["zod"],
|
||||
"registryDependencies": ["button", "input", "label"],
|
||||
"files": [
|
||||
{
|
||||
"path": "blocks/login-form.tsx",
|
||||
"type": "registry:block"
|
||||
}
|
||||
],
|
||||
"cssVars": {
|
||||
"light": {
|
||||
"brand": "oklch(0.62 0.18 250)"
|
||||
},
|
||||
"dark": {
|
||||
"brand": "oklch(0.72 0.16 250)"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Important fields:
|
||||
|
||||
- `name`: the installable item name. It is not necessarily a file path.
|
||||
- `type`: one of the registry item types, such as `registry:ui`,
|
||||
`registry:block`, `registry:lib`, `registry:hook`, `registry:file`,
|
||||
`registry:page`, `registry:theme`, `registry:style`, `registry:font`, or
|
||||
`registry:item`.
|
||||
- `files`: source files copied or generated by the item.
|
||||
- `dependencies`: npm runtime dependencies.
|
||||
- `devDependencies`: npm development dependencies.
|
||||
- `registryDependencies`: other registry items required by this item.
|
||||
- `cssVars`, `css`, `tailwind`, `envVars`, and `docs`: optional install-time
|
||||
additions.
|
||||
|
||||
File rules:
|
||||
|
||||
- File paths are relative to the declaring `registry.json`.
|
||||
- `registry:file` and `registry:page` files require a `target`.
|
||||
- Do not use remote file URLs in source registry file paths.
|
||||
- Keep source files copy-pasteable: no hidden app-only imports.
|
||||
|
||||
## Registry Dependencies
|
||||
|
||||
`registryDependencies` entries are item addresses, not file paths.
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "login-form",
|
||||
"type": "registry:block",
|
||||
"registryDependencies": ["button", "@acme/input", "acme/ui/card#v1.2.0"],
|
||||
"files": [
|
||||
{
|
||||
"path": "blocks/login-form.tsx",
|
||||
"type": "registry:block"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Dependency rules:
|
||||
|
||||
- Bare names such as `"button"` mean official shadcn items.
|
||||
- Bare names never mean same-registry or same-repository items.
|
||||
- Namespaced dependencies use `@namespace/item-name`.
|
||||
- GitHub dependencies use `owner/repo/item-name`.
|
||||
- Pin GitHub dependencies with `owner/repo/item-name#ref` when needed.
|
||||
- Refs are not inherited. If `owner/repo/foo#v2` depends on `bar` from the same
|
||||
repo at `v2`, write `owner/repo/bar#v2`.
|
||||
- Do not use relative dependencies such as `"./bar"`.
|
||||
|
||||
## Address Schemes
|
||||
|
||||
When reasoning about a registry item string, classify it first.
|
||||
|
||||
| Address | Scheme | Meaning |
|
||||
| ----------------------------------- | --------- | ------------------------------------------------------------ |
|
||||
| `button` | shadcn | Official shadcn item named `button`. |
|
||||
| `@acme/button` | namespace | Item `button` from configured registry `@acme`. |
|
||||
| `@acme/ui/button` | namespace | Item `ui/button` from configured registry `@acme`. |
|
||||
| `https://example.com/r/button.json` | url | Built registry item JSON at that URL. |
|
||||
| `./button.json` | file | Built registry item JSON on disk. |
|
||||
| `acme/ui/button` | github | Item `button` from GitHub repo `acme/ui`. |
|
||||
| `acme/ui/forms/login#main` | github | Item `forms/login` from GitHub repo `acme/ui` at ref `main`. |
|
||||
|
||||
For namespace and GitHub addresses, slashful item names are allowed and are item
|
||||
names, not file paths. Addresses ending in `.json` keep file-address
|
||||
precedence, so `acme/ui/data/schema.json` is treated as a file path, not a
|
||||
GitHub item address.
|
||||
|
||||
## GitHub Registries
|
||||
|
||||
A public GitHub repository can act as a source registry when it has a root
|
||||
`registry.json`.
|
||||
|
||||
```txt
|
||||
owner/repo/item-name[#ref]
|
||||
```
|
||||
|
||||
Rules:
|
||||
|
||||
- The first two path segments are GitHub owner and repo.
|
||||
- All remaining path segments are the registry item name.
|
||||
- The source entrypoint is always root `registry.json`.
|
||||
- GitHub registries are source registries consumed directly by the CLI. They do
|
||||
not require `shadcn build` or generated item JSON files.
|
||||
- `include` follows the same source-registry rules as local registries.
|
||||
- Currently, GitHub addresses support public `github.com` repositories only.
|
||||
- Private repos and GitHub Enterprise require explicit product decisions.
|
||||
|
||||
When implementing GitHub registry fetching, resolve refs to a commit SHA before
|
||||
reading source files. Do not read moving refs directly from
|
||||
`raw.githubusercontent.com`, because branch-like refs can be cached for several
|
||||
minutes.
|
||||
|
||||
Preferred flow:
|
||||
|
||||
```txt
|
||||
owner/repo[#ref]
|
||||
-> resolve ref with git ls-remote
|
||||
-> commit SHA
|
||||
-> read https://raw.githubusercontent.com/{owner}/{repo}/{sha}/registry.json
|
||||
-> read includes and item files from the same SHA
|
||||
```
|
||||
|
||||
This keeps a command on one consistent repository snapshot.
|
||||
|
||||
Full 40-character commit SHAs are already stable and can be used directly.
|
||||
Branches, tags, and short refs require Git so the CLI can resolve them to a
|
||||
commit SHA first.
|
||||
|
||||
## Build and Verify
|
||||
|
||||
Use the CLI to build source registries:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest build
|
||||
npx shadcn@latest build registry.json --output public/r
|
||||
```
|
||||
|
||||
Use CLI commands to inspect the result:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest list @acme
|
||||
npx shadcn@latest search @acme -q "login"
|
||||
npx shadcn@latest view @acme/login-form
|
||||
npx shadcn@latest add @acme/login-form --dry-run
|
||||
npx shadcn@latest registry validate ./registry.json
|
||||
```
|
||||
|
||||
Use GitHub addresses directly for public GitHub registries:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest list owner/repo
|
||||
npx shadcn@latest search owner/repo -q "login"
|
||||
npx shadcn@latest view owner/repo/item
|
||||
npx shadcn@latest add owner/repo/item --dry-run
|
||||
npx shadcn@latest registry validate owner/repo
|
||||
```
|
||||
|
||||
When working on registry implementation in the shadcn/ui codebase:
|
||||
|
||||
- Keep address parsing pure and testable.
|
||||
- Do not add side effects to validators.
|
||||
- Preserve existing behavior for official shadcn, namespace, URL, and file
|
||||
schemes.
|
||||
- Add tests for address parsing, source loading, dependency resolution, list,
|
||||
search, view, and add paths.
|
||||
- Prefer small source-reader abstractions over a plugin system until there are
|
||||
multiple real providers.
|
||||
@@ -0,0 +1,306 @@
|
||||
# Base vs Radix
|
||||
|
||||
API differences between `base` and `radix`. Check the `base` field from `npx shadcn@latest info`.
|
||||
|
||||
## Contents
|
||||
|
||||
- Composition: asChild vs render
|
||||
- Button / trigger as non-button element
|
||||
- Select (items prop, placeholder, positioning, multiple, object values)
|
||||
- ToggleGroup (type vs multiple)
|
||||
- Slider (scalar vs array)
|
||||
- Accordion (type and defaultValue)
|
||||
|
||||
---
|
||||
|
||||
## Composition: asChild (radix) vs render (base)
|
||||
|
||||
Radix uses `asChild` to replace the default element. Base uses `render`. Don't wrap triggers in extra elements.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<DialogTrigger>
|
||||
<div>
|
||||
<Button>Open</Button>
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
```
|
||||
|
||||
**Correct (radix):**
|
||||
|
||||
```tsx
|
||||
<DialogTrigger asChild>
|
||||
<Button>Open</Button>
|
||||
</DialogTrigger>
|
||||
```
|
||||
|
||||
**Correct (base):**
|
||||
|
||||
```tsx
|
||||
<DialogTrigger render={<Button />}>Open</DialogTrigger>
|
||||
```
|
||||
|
||||
This applies to all trigger and close components: `DialogTrigger`, `SheetTrigger`, `AlertDialogTrigger`, `DropdownMenuTrigger`, `PopoverTrigger`, `TooltipTrigger`, `CollapsibleTrigger`, `DialogClose`, `SheetClose`, `NavigationMenuLink`, `BreadcrumbLink`, `SidebarMenuButton`, `Badge`, `Item`.
|
||||
|
||||
---
|
||||
|
||||
## Button / trigger as non-button element (base only)
|
||||
|
||||
When `render` changes an element to a non-button (`<a>`, `<span>`), add `nativeButton={false}`.
|
||||
|
||||
**Incorrect (base):** missing `nativeButton={false}`.
|
||||
|
||||
```tsx
|
||||
<Button render={<a href="/docs" />}>Read the docs</Button>
|
||||
```
|
||||
|
||||
**Correct (base):**
|
||||
|
||||
```tsx
|
||||
<Button render={<a href="/docs" />} nativeButton={false}>
|
||||
Read the docs
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Correct (radix):**
|
||||
|
||||
```tsx
|
||||
<Button asChild>
|
||||
<a href="/docs">Read the docs</a>
|
||||
</Button>
|
||||
```
|
||||
|
||||
Same for triggers whose `render` is not a `Button`:
|
||||
|
||||
```tsx
|
||||
// base.
|
||||
<PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>
|
||||
Pick date
|
||||
</PopoverTrigger>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Select
|
||||
|
||||
**items prop (base only).** Base requires an `items` prop on the root. Radix uses inline JSX only.
|
||||
|
||||
**Incorrect (base):**
|
||||
|
||||
```tsx
|
||||
<Select>
|
||||
<SelectTrigger><SelectValue placeholder="Select a fruit" /></SelectTrigger>
|
||||
</Select>
|
||||
```
|
||||
|
||||
**Correct (base):**
|
||||
|
||||
```tsx
|
||||
const items = [
|
||||
{ label: "Select a fruit", value: null },
|
||||
{ label: "Apple", value: "apple" },
|
||||
{ label: "Banana", value: "banana" },
|
||||
]
|
||||
|
||||
<Select items={items}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{items.map((item) => (
|
||||
<SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
**Correct (radix):**
|
||||
|
||||
```tsx
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
**Placeholder.** Base uses a `{ value: null }` item in the items array. Radix uses `<SelectValue placeholder="...">`.
|
||||
|
||||
**Content positioning.** Base uses `alignItemWithTrigger`. Radix uses `position`.
|
||||
|
||||
```tsx
|
||||
// base.
|
||||
<SelectContent alignItemWithTrigger={false} side="bottom">
|
||||
|
||||
// radix.
|
||||
<SelectContent position="popper">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Select — multiple selection and object values (base only)
|
||||
|
||||
Base supports `multiple`, render-function children on `SelectValue`, and object values with `itemToStringValue`. Radix is single-select with string values only.
|
||||
|
||||
**Correct (base — multiple selection):**
|
||||
|
||||
```tsx
|
||||
<Select items={items} multiple defaultValue={[]}>
|
||||
<SelectTrigger>
|
||||
<SelectValue>
|
||||
{(value: string[]) => value.length === 0 ? "Select fruits" : `${value.length} selected`}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
...
|
||||
</Select>
|
||||
```
|
||||
|
||||
**Correct (base — object values):**
|
||||
|
||||
```tsx
|
||||
<Select defaultValue={plans[0]} itemToStringValue={(plan) => plan.name}>
|
||||
<SelectTrigger>
|
||||
<SelectValue>{(value) => value.name}</SelectValue>
|
||||
</SelectTrigger>
|
||||
...
|
||||
</Select>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ToggleGroup
|
||||
|
||||
Base uses a `multiple` boolean prop. Radix uses `type="single"` or `type="multiple"`.
|
||||
|
||||
**Incorrect (base):**
|
||||
|
||||
```tsx
|
||||
<ToggleGroup type="single" defaultValue="daily">
|
||||
<ToggleGroupItem value="daily">Daily</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
```
|
||||
|
||||
**Correct (base):**
|
||||
|
||||
```tsx
|
||||
// Single (no prop needed), defaultValue is always an array.
|
||||
<ToggleGroup defaultValue={["daily"]} spacing={2}>
|
||||
<ToggleGroupItem value="daily">Daily</ToggleGroupItem>
|
||||
<ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
|
||||
// Multi-selection.
|
||||
<ToggleGroup multiple>
|
||||
<ToggleGroupItem value="bold">Bold</ToggleGroupItem>
|
||||
<ToggleGroupItem value="italic">Italic</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
```
|
||||
|
||||
**Correct (radix):**
|
||||
|
||||
```tsx
|
||||
// Single, defaultValue is a string.
|
||||
<ToggleGroup type="single" defaultValue="daily" spacing={2}>
|
||||
<ToggleGroupItem value="daily">Daily</ToggleGroupItem>
|
||||
<ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
|
||||
// Multi-selection.
|
||||
<ToggleGroup type="multiple">
|
||||
<ToggleGroupItem value="bold">Bold</ToggleGroupItem>
|
||||
<ToggleGroupItem value="italic">Italic</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
```
|
||||
|
||||
**Controlled single value:**
|
||||
|
||||
```tsx
|
||||
// base — wrap/unwrap arrays.
|
||||
const [value, setValue] = React.useState("normal")
|
||||
<ToggleGroup value={[value]} onValueChange={(v) => setValue(v[0])}>
|
||||
|
||||
// radix — plain string.
|
||||
const [value, setValue] = React.useState("normal")
|
||||
<ToggleGroup type="single" value={value} onValueChange={setValue}>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Slider
|
||||
|
||||
Base accepts a plain number for a single thumb. Radix always requires an array.
|
||||
|
||||
**Incorrect (base):**
|
||||
|
||||
```tsx
|
||||
<Slider defaultValue={[50]} max={100} step={1} />
|
||||
```
|
||||
|
||||
**Correct (base):**
|
||||
|
||||
```tsx
|
||||
<Slider defaultValue={50} max={100} step={1} />
|
||||
```
|
||||
|
||||
**Correct (radix):**
|
||||
|
||||
```tsx
|
||||
<Slider defaultValue={[50]} max={100} step={1} />
|
||||
```
|
||||
|
||||
Both use arrays for range sliders. Controlled `onValueChange` in base may need a cast:
|
||||
|
||||
```tsx
|
||||
// base.
|
||||
const [value, setValue] = React.useState([0.3, 0.7])
|
||||
<Slider value={value} onValueChange={(v) => setValue(v as number[])} />
|
||||
|
||||
// radix.
|
||||
const [value, setValue] = React.useState([0.3, 0.7])
|
||||
<Slider value={value} onValueChange={setValue} />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accordion
|
||||
|
||||
Radix requires `type="single"` or `type="multiple"` and supports `collapsible`. `defaultValue` is a string. Base uses no `type` prop, uses `multiple` boolean, and `defaultValue` is always an array.
|
||||
|
||||
**Incorrect (base):**
|
||||
|
||||
```tsx
|
||||
<Accordion type="single" collapsible defaultValue="item-1">
|
||||
<AccordionItem value="item-1">...</AccordionItem>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
**Correct (base):**
|
||||
|
||||
```tsx
|
||||
<Accordion defaultValue={["item-1"]}>
|
||||
<AccordionItem value="item-1">...</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
// Multi-select.
|
||||
<Accordion multiple defaultValue={["item-1", "item-2"]}>
|
||||
<AccordionItem value="item-1">...</AccordionItem>
|
||||
<AccordionItem value="item-2">...</AccordionItem>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
**Correct (radix):**
|
||||
|
||||
```tsx
|
||||
<Accordion type="single" collapsible defaultValue="item-1">
|
||||
<AccordionItem value="item-1">...</AccordionItem>
|
||||
</Accordion>
|
||||
```
|
||||
@@ -0,0 +1,224 @@
|
||||
# Chat & Messaging
|
||||
|
||||
Components for conversation and chat UI. Compose these instead of hand-rolling
|
||||
bubbles, scroll containers, dividers, or attachment cards.
|
||||
|
||||
Install: `npx shadcn@latest add message-scroller message bubble attachment marker`
|
||||
|
||||
The same component names and props ship for both `base` and `radix`; only
|
||||
composition differs (`render` vs `asChild`). See [base-vs-radix.md](./base-vs-radix.md).
|
||||
|
||||
## Contents
|
||||
|
||||
- Scrollable threads use MessageScroller
|
||||
- Message rows use Message
|
||||
- Message surfaces use Bubble
|
||||
- Attachments use Attachment
|
||||
- System notes and dividers use Marker
|
||||
- Streaming, anchoring, and jump-to-latest are built in
|
||||
- Escape hatch: the scroller hooks
|
||||
|
||||
---
|
||||
|
||||
## Scrollable threads use MessageScroller
|
||||
|
||||
A conversation that scrolls, follows new messages, restores position, or jumps
|
||||
to a message uses `MessageScroller`. Don't build a raw overflow container with
|
||||
manual scroll wiring, and don't reach for `ScrollArea`.
|
||||
|
||||
The parts nest in a fixed order. Every direct child of the content is wrapped in
|
||||
a `MessageScrollerItem` so the scroller can measure, anchor, preserve position,
|
||||
track visibility, and jump to it. `MessageScrollerButton` sits inside
|
||||
`MessageScroller`, after the viewport.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
// Hand-rolled scroll container with manual stick-to-bottom logic.
|
||||
<div ref={scrollRef} onScroll={handleScroll} className="flex-1 overflow-y-auto">
|
||||
<div className="flex flex-col gap-6 p-4">
|
||||
{messages.map((m) => (
|
||||
<ChatMessage key={m.id} message={m} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<MessageScrollerProvider autoScroll>
|
||||
<MessageScroller>
|
||||
<MessageScrollerViewport>
|
||||
<MessageScrollerContent>
|
||||
{messages.map((message) => (
|
||||
<MessageScrollerItem
|
||||
key={message.id}
|
||||
messageId={message.id}
|
||||
scrollAnchor={message.role === "user"}
|
||||
>
|
||||
<Message align={message.role === "user" ? "end" : "start"}>
|
||||
{/* ...message content... */}
|
||||
</Message>
|
||||
</MessageScrollerItem>
|
||||
))}
|
||||
</MessageScrollerContent>
|
||||
</MessageScrollerViewport>
|
||||
<MessageScrollerButton />
|
||||
</MessageScroller>
|
||||
</MessageScrollerProvider>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Message rows use Message
|
||||
|
||||
`Message` lays out a single row: avatar, header, content, footer, with
|
||||
alignment. Group consecutive rows from one sender with `MessageGroup`. Don't
|
||||
rebuild the row from flex divs.
|
||||
|
||||
`align="end"` is the current user's side; `align="start"` is everyone else.
|
||||
|
||||
```tsx
|
||||
<Message align="start">
|
||||
<MessageAvatar>
|
||||
<Avatar>
|
||||
<AvatarImage src={sender.avatar} alt={sender.name} />
|
||||
<AvatarFallback>{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
</MessageAvatar>
|
||||
<MessageContent>
|
||||
<MessageHeader>{sender.name}</MessageHeader>
|
||||
<Bubble>
|
||||
<BubbleContent>{text}</BubbleContent>
|
||||
</Bubble>
|
||||
<MessageFooter>{time}</MessageFooter>
|
||||
</MessageContent>
|
||||
</Message>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Message surfaces use Bubble
|
||||
|
||||
The colored message surface is `Bubble` + `BubbleContent`, never a styled `div`
|
||||
with `bg-muted` / `bg-primary` and hand-managed corners.
|
||||
|
||||
- `variant`: `default`, `secondary`, `muted`, `tinted`, `outline`, `ghost`, `destructive`.
|
||||
- `align`: `start` or `end` (matches the `Message` side).
|
||||
|
||||
`BubbleReactions` renders the reaction cluster. `side` (`top` | `bottom`) and
|
||||
`align` (`start` | `end`) position it against the bubble. Don't lay reactions out
|
||||
with absolutely-positioned `Badge`s.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<div className="w-fit rounded-2xl bg-primary px-3 py-2 text-primary-foreground">
|
||||
{text}
|
||||
</div>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<Bubble variant="default" align="end">
|
||||
<BubbleContent>{text}</BubbleContent>
|
||||
<BubbleReactions side="bottom" align="end">
|
||||
<Badge variant="secondary">👍 2</Badge>
|
||||
</BubbleReactions>
|
||||
</Bubble>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Attachments use Attachment
|
||||
|
||||
File and image attachments use `Attachment`, not `Item` or a custom card. It
|
||||
carries upload state, so wire `state` to the real status rather than rendering a
|
||||
separate spinner.
|
||||
|
||||
- `state`: `idle`, `uploading`, `processing`, `error`, `done`. `uploading` and
|
||||
`processing` apply the `shimmer` animation to the title automatically.
|
||||
- `size`: `default`, `sm`, `xs`. `orientation`: `horizontal`, `vertical`.
|
||||
- Use `AttachmentGroup` to lay out several attachments in a scrolling row.
|
||||
|
||||
```tsx
|
||||
<Attachment state="done">
|
||||
<AttachmentMedia variant="icon">
|
||||
<FileTextIcon />
|
||||
</AttachmentMedia>
|
||||
<AttachmentContent>
|
||||
<AttachmentTitle>homepage-feedback.pdf</AttachmentTitle>
|
||||
<AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
|
||||
</AttachmentContent>
|
||||
<AttachmentActions>
|
||||
<AttachmentAction>
|
||||
<DownloadIcon />
|
||||
</AttachmentAction>
|
||||
</AttachmentActions>
|
||||
</Attachment>
|
||||
```
|
||||
|
||||
For an image, use `<AttachmentMedia variant="image">` with an `img` child.
|
||||
|
||||
---
|
||||
|
||||
## System notes and dividers use Marker
|
||||
|
||||
Status lines ("Sarah joined the conversation"), date dividers ("Today"), and
|
||||
labeled separators are `Marker`, not a `Separator` plus a centered span.
|
||||
|
||||
- `variant`: `default` (plain row), `separator` (centered label with rules on
|
||||
each side), `border` (bottom-bordered row).
|
||||
- `MarkerIcon` holds a leading icon; `MarkerContent` holds the label.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<div className="flex items-center gap-3 py-2">
|
||||
<Separator className="flex-1" />
|
||||
<span className="text-xs text-muted-foreground">Today</span>
|
||||
<Separator className="flex-1" />
|
||||
</div>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<Marker variant="separator">
|
||||
<MarkerContent>Today</MarkerContent>
|
||||
</Marker>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Streaming, anchoring, and jump-to-latest are built in
|
||||
|
||||
`MessageScroller` handles the behavior that chat UIs usually reinvent. Don't
|
||||
write a `useStickToBottom` hook, a `ResizeObserver`, or manual `scrollTop` math.
|
||||
|
||||
- **Follow the live edge while streaming.** `MessageScrollerProvider` with
|
||||
`autoScroll` keeps the view pinned to new content and yields the moment the
|
||||
user scrolls up. Streaming token updates that grow the last message are
|
||||
followed automatically.
|
||||
- **Anchor a turn.** `scrollAnchor` on a `MessageScrollerItem` marks the row to
|
||||
hold in view (typically the user's message that started the turn).
|
||||
- **Jump to latest.** `MessageScrollerButton` appears when the user scrolls away
|
||||
and scrolls back on click. `direction="end"` (default) or `direction="start"`.
|
||||
It is a self-managing control, so don't gate it behind your own scroll-position
|
||||
state.
|
||||
|
||||
For a "thinking…" indicator while the model generates, apply the `shimmer`
|
||||
utility to text. Don't author a custom keyframe animation. See
|
||||
[styling.md](./styling.md).
|
||||
|
||||
---
|
||||
|
||||
## Escape hatch: the scroller hooks
|
||||
|
||||
For behavior the parts don't expose, read state from the hooks rather than
|
||||
re-implementing the scroller: `useMessageScroller`,
|
||||
`useMessageScrollerVisibility`, and `useMessageScrollerScrollable`. They come
|
||||
from the auto-installed `@shadcn/react` dependency, so there's nothing extra to
|
||||
install. Reach for them only when composition can't express what you need.
|
||||
@@ -0,0 +1,213 @@
|
||||
# Component Composition
|
||||
|
||||
## Contents
|
||||
|
||||
- Items always inside their Group component
|
||||
- Callouts use Alert
|
||||
- Empty states use Empty component
|
||||
- Toast notifications follow the project base
|
||||
- Choosing between overlay components
|
||||
- Dialog, Sheet, and Drawer always need a Title
|
||||
- Card structure
|
||||
- Button has no isPending or isLoading prop
|
||||
- TabsTrigger must be inside TabsList
|
||||
- Avatar always needs AvatarFallback
|
||||
- Use Separator instead of raw hr or border divs
|
||||
- Use Skeleton for loading placeholders
|
||||
- Use Badge instead of custom styled spans
|
||||
|
||||
---
|
||||
|
||||
## Items always inside their Group component
|
||||
|
||||
Never render items directly inside the content container.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<SelectContent>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
</SelectContent>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
```
|
||||
|
||||
This applies to all group-based components:
|
||||
|
||||
| Item | Group |
|
||||
|------|-------|
|
||||
| `SelectItem`, `SelectLabel` | `SelectGroup` |
|
||||
| `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSub` | `DropdownMenuGroup` |
|
||||
| `MenubarItem` | `MenubarGroup` |
|
||||
| `ContextMenuItem` | `ContextMenuGroup` |
|
||||
| `CommandItem` | `CommandGroup` |
|
||||
| `MessageScrollerItem` | `MessageScrollerContent` |
|
||||
| `Message` (consecutive, same sender) | `MessageGroup` |
|
||||
| `Bubble` (stacked) | `BubbleGroup` |
|
||||
| `Attachment` (in a row) | `AttachmentGroup` |
|
||||
|
||||
Chat components nest in a fixed order (`MessageScrollerProvider` → `MessageScroller` → `MessageScrollerViewport` → `MessageScrollerContent` → `MessageScrollerItem`). See [chat.md](./chat.md).
|
||||
|
||||
---
|
||||
|
||||
## Callouts use Alert
|
||||
|
||||
```tsx
|
||||
<Alert>
|
||||
<AlertTitle>Warning</AlertTitle>
|
||||
<AlertDescription>Something needs attention.</AlertDescription>
|
||||
</Alert>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Empty states use Empty component
|
||||
|
||||
```tsx
|
||||
<Empty>
|
||||
<EmptyHeader>
|
||||
<EmptyMedia variant="icon"><FolderIcon /></EmptyMedia>
|
||||
<EmptyTitle>No projects yet</EmptyTitle>
|
||||
<EmptyDescription>Get started by creating a new project.</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
<EmptyContent>
|
||||
<Button>Create Project</Button>
|
||||
</EmptyContent>
|
||||
</Empty>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Toast notifications follow the project base
|
||||
|
||||
For Base UI projects, use the `toast` component:
|
||||
|
||||
```tsx
|
||||
import { toast } from "@/components/ui/toast"
|
||||
|
||||
toast.add({
|
||||
title: "Changes saved.",
|
||||
})
|
||||
```
|
||||
|
||||
For Radix and React Aria projects, use Sonner:
|
||||
|
||||
```tsx
|
||||
import { toast } from "sonner"
|
||||
|
||||
toast.success("Changes saved.")
|
||||
toast.error("Something went wrong.")
|
||||
toast("File deleted.", {
|
||||
action: { label: "Undo", onClick: () => undoDelete() },
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Choosing between overlay components
|
||||
|
||||
| Use case | Component |
|
||||
|----------|-----------|
|
||||
| Focused task that requires input | `Dialog` |
|
||||
| Destructive action confirmation | `AlertDialog` |
|
||||
| Side panel with details or filters | `Sheet` |
|
||||
| Mobile-first bottom panel | `Drawer` |
|
||||
| Quick info on hover | `HoverCard` |
|
||||
| Small contextual content on click | `Popover` |
|
||||
|
||||
---
|
||||
|
||||
## Dialog, Sheet, and Drawer always need a Title
|
||||
|
||||
`DialogTitle`, `SheetTitle`, `DrawerTitle` are required for accessibility. Use `className="sr-only"` if visually hidden.
|
||||
|
||||
```tsx
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Profile</DialogTitle>
|
||||
<DialogDescription>Update your profile.</DialogDescription>
|
||||
</DialogHeader>
|
||||
...
|
||||
</DialogContent>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Card structure
|
||||
|
||||
Use full composition — don't dump everything into `CardContent`:
|
||||
|
||||
```tsx
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Team Members</CardTitle>
|
||||
<CardDescription>Manage your team.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>...</CardContent>
|
||||
<CardFooter>
|
||||
<Button>Invite</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Button has no isPending or isLoading prop
|
||||
|
||||
Compose with `Spinner` + `data-icon` + `disabled`:
|
||||
|
||||
```tsx
|
||||
<Button disabled>
|
||||
<Spinner data-icon="inline-start" />
|
||||
Saving...
|
||||
</Button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## TabsTrigger must be inside TabsList
|
||||
|
||||
Never render `TabsTrigger` directly inside `Tabs` — always wrap in `TabsList`:
|
||||
|
||||
```tsx
|
||||
<Tabs defaultValue="account">
|
||||
<TabsList>
|
||||
<TabsTrigger value="account">Account</TabsTrigger>
|
||||
<TabsTrigger value="password">Password</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="account">...</TabsContent>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Avatar always needs AvatarFallback
|
||||
|
||||
Always include `AvatarFallback` for when the image fails to load:
|
||||
|
||||
```tsx
|
||||
<Avatar>
|
||||
<AvatarImage src="/avatar.png" alt="User" />
|
||||
<AvatarFallback>JD</AvatarFallback>
|
||||
</Avatar>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Use existing components instead of custom markup
|
||||
|
||||
| Instead of | Use |
|
||||
|---|---|
|
||||
| `<hr>` or `<div className="border-t">` | `<Separator />` |
|
||||
| `<div className="animate-pulse">` with styled divs | `<Skeleton className="h-4 w-3/4" />` |
|
||||
| `<span className="rounded-full bg-green-100 ...">` | `<Badge variant="secondary">` |
|
||||
@@ -0,0 +1,192 @@
|
||||
# Forms & Inputs
|
||||
|
||||
## Contents
|
||||
|
||||
- Forms use FieldGroup + Field
|
||||
- InputGroup requires InputGroupInput/InputGroupTextarea
|
||||
- Buttons inside inputs use InputGroup + InputGroupAddon
|
||||
- Option sets (2–7 choices) use ToggleGroup
|
||||
- FieldSet + FieldLegend for grouping related fields
|
||||
- Field validation and disabled states
|
||||
|
||||
---
|
||||
|
||||
## Forms use FieldGroup + Field
|
||||
|
||||
Always use `FieldGroup` + `Field` — never raw `div` with `space-y-*`:
|
||||
|
||||
```tsx
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input id="email" type="email" />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="password">Password</FieldLabel>
|
||||
<Input id="password" type="password" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
```
|
||||
|
||||
Use `Field orientation="horizontal"` for settings pages. Use `FieldLabel className="sr-only"` for visually hidden labels.
|
||||
|
||||
**Choosing form controls:**
|
||||
|
||||
- Simple text input → `Input`
|
||||
- Dropdown with predefined options → `Select`
|
||||
- Searchable dropdown → `Combobox`
|
||||
- Native HTML select (no JS) → `native-select`
|
||||
- Boolean toggle → `Switch` (for settings) or `Checkbox` (for forms)
|
||||
- Single choice from few options → `RadioGroup`
|
||||
- Toggle between 2–5 options → `ToggleGroup` + `ToggleGroupItem`
|
||||
- OTP/verification code → `InputOTP`
|
||||
- Multi-line text → `Textarea`
|
||||
|
||||
---
|
||||
|
||||
## InputGroup requires InputGroupInput/InputGroupTextarea
|
||||
|
||||
Never use raw `Input` or `Textarea` inside an `InputGroup`.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<InputGroup>
|
||||
<Input placeholder="Search..." />
|
||||
</InputGroup>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
import { InputGroup, InputGroupInput } from "@/components/ui/input-group"
|
||||
|
||||
<InputGroup>
|
||||
<InputGroupInput placeholder="Search..." />
|
||||
</InputGroup>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Buttons inside inputs use InputGroup + InputGroupAddon
|
||||
|
||||
Never place a `Button` directly inside or adjacent to an `Input` with custom positioning.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<div className="relative">
|
||||
<Input placeholder="Search..." className="pr-10" />
|
||||
<Button className="absolute right-0 top-0" size="icon">
|
||||
<SearchIcon />
|
||||
</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"
|
||||
|
||||
<InputGroup>
|
||||
<InputGroupInput placeholder="Search..." />
|
||||
<InputGroupAddon>
|
||||
<Button size="icon">
|
||||
<SearchIcon data-icon="inline-start" />
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Option sets (2–7 choices) use ToggleGroup
|
||||
|
||||
Don't manually loop `Button` components with active state.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
const [selected, setSelected] = useState("daily")
|
||||
|
||||
<div className="flex gap-2">
|
||||
{["daily", "weekly", "monthly"].map((option) => (
|
||||
<Button
|
||||
key={option}
|
||||
variant={selected === option ? "default" : "outline"}
|
||||
onClick={() => setSelected(option)}
|
||||
>
|
||||
{option}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
|
||||
|
||||
<ToggleGroup spacing={2}>
|
||||
<ToggleGroupItem value="daily">Daily</ToggleGroupItem>
|
||||
<ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
|
||||
<ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
```
|
||||
|
||||
Combine with `Field` for labelled toggle groups:
|
||||
|
||||
```tsx
|
||||
<Field orientation="horizontal">
|
||||
<FieldTitle id="theme-label">Theme</FieldTitle>
|
||||
<ToggleGroup aria-labelledby="theme-label" spacing={2}>
|
||||
<ToggleGroupItem value="light">Light</ToggleGroupItem>
|
||||
<ToggleGroupItem value="dark">Dark</ToggleGroupItem>
|
||||
<ToggleGroupItem value="system">System</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</Field>
|
||||
```
|
||||
|
||||
> **Note:** `defaultValue` and `type`/`multiple` props differ between base and radix. See [base-vs-radix.md](./base-vs-radix.md#togglegroup).
|
||||
|
||||
---
|
||||
|
||||
## FieldSet + FieldLegend for grouping related fields
|
||||
|
||||
Use `FieldSet` + `FieldLegend` for related checkboxes, radios, or switches — not `div` with a heading:
|
||||
|
||||
```tsx
|
||||
<FieldSet>
|
||||
<FieldLegend variant="label">Preferences</FieldLegend>
|
||||
<FieldDescription>Select all that apply.</FieldDescription>
|
||||
<FieldGroup className="gap-3">
|
||||
<Field orientation="horizontal">
|
||||
<Checkbox id="dark" />
|
||||
<FieldLabel htmlFor="dark" className="font-normal">Dark mode</FieldLabel>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</FieldSet>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Field validation and disabled states
|
||||
|
||||
Both attributes are needed — `data-invalid`/`data-disabled` styles the field (label, description), while `aria-invalid`/`disabled` styles the control.
|
||||
|
||||
```tsx
|
||||
// Invalid.
|
||||
<Field data-invalid>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input id="email" aria-invalid />
|
||||
<FieldDescription>Invalid email address.</FieldDescription>
|
||||
</Field>
|
||||
|
||||
// Disabled.
|
||||
<Field data-disabled>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input id="email" disabled />
|
||||
</Field>
|
||||
```
|
||||
|
||||
Works for all controls: `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroupItem`, `Switch`, `Slider`, `NativeSelect`, `InputOTP`.
|
||||
@@ -0,0 +1,101 @@
|
||||
# Icons
|
||||
|
||||
**Always use the project's configured `iconLibrary` for imports.** Check the `iconLibrary` field from project context: `lucide` → `lucide-react`, `tabler` → `@tabler/icons-react`, etc. Never assume `lucide-react`.
|
||||
|
||||
---
|
||||
|
||||
## Icons in Button use data-icon attribute
|
||||
|
||||
Add `data-icon="inline-start"` (prefix) or `data-icon="inline-end"` (suffix) to the icon. No sizing classes on the icon.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<Button>
|
||||
<SearchIcon className="mr-2 size-4" />
|
||||
Search
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<Button>
|
||||
<SearchIcon data-icon="inline-start"/>
|
||||
Search
|
||||
</Button>
|
||||
|
||||
<Button>
|
||||
Next
|
||||
<ArrowRightIcon data-icon="inline-end"/>
|
||||
</Button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## No sizing classes on icons inside components
|
||||
|
||||
Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other sizing classes to icons inside `Button`, `DropdownMenuItem`, `Alert`, `Sidebar*`, or other shadcn components. Unless the user explicitly asks for custom icon sizes.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<Button>
|
||||
<SearchIcon className="size-4" data-icon="inline-start" />
|
||||
Search
|
||||
</Button>
|
||||
|
||||
<DropdownMenuItem>
|
||||
<SettingsIcon className="mr-2 size-4" />
|
||||
Settings
|
||||
</DropdownMenuItem>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<Button>
|
||||
<SearchIcon data-icon="inline-start" />
|
||||
Search
|
||||
</Button>
|
||||
|
||||
<DropdownMenuItem>
|
||||
<SettingsIcon />
|
||||
Settings
|
||||
</DropdownMenuItem>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Pass icons as component objects, not string keys
|
||||
|
||||
Use `icon={CheckIcon}`, not a string key to a lookup map.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
const iconMap = {
|
||||
check: CheckIcon,
|
||||
alert: AlertIcon,
|
||||
}
|
||||
|
||||
function StatusBadge({ icon }: { icon: string }) {
|
||||
const Icon = iconMap[icon]
|
||||
return <Icon />
|
||||
}
|
||||
|
||||
<StatusBadge icon="check" />
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
// Import from the project's configured iconLibrary (e.g. lucide-react, @tabler/icons-react).
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) {
|
||||
return <Icon />
|
||||
}
|
||||
|
||||
<StatusBadge icon={CheckIcon} />
|
||||
```
|
||||
@@ -0,0 +1,185 @@
|
||||
# Styling & Customization
|
||||
|
||||
See [customization.md](../customization.md) for theming, CSS variables, and adding custom colors.
|
||||
|
||||
## Contents
|
||||
|
||||
- Semantic colors
|
||||
- Built-in variants first
|
||||
- className for layout only
|
||||
- No space-x-* / space-y-*
|
||||
- Prefer size-* over w-* h-* when equal
|
||||
- Prefer truncate shorthand
|
||||
- No manual dark: color overrides
|
||||
- Use cn() for conditional classes
|
||||
- No manual z-index on overlay components
|
||||
- Use shimmer / scroll-fade utilities, not custom animations
|
||||
|
||||
---
|
||||
|
||||
## Semantic colors
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<div className="bg-blue-500 text-white">
|
||||
<p className="text-gray-600">Secondary text</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<div className="bg-primary text-primary-foreground">
|
||||
<p className="text-muted-foreground">Secondary text</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## No raw color values for status/state indicators
|
||||
|
||||
For positive, negative, or status indicators, use Badge variants, semantic tokens like `text-destructive`, or define custom CSS variables — don't reach for raw Tailwind colors.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<span className="text-emerald-600">+20.1%</span>
|
||||
<span className="text-green-500">Active</span>
|
||||
<span className="text-red-600">-3.2%</span>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<Badge variant="secondary">+20.1%</Badge>
|
||||
<Badge>Active</Badge>
|
||||
<span className="text-destructive">-3.2%</span>
|
||||
```
|
||||
|
||||
If you need a success/positive color that doesn't exist as a semantic token, use a Badge variant or ask the user about adding a custom CSS variable to the theme (see [customization.md](../customization.md)).
|
||||
|
||||
---
|
||||
|
||||
## Built-in variants first
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<Button className="border border-input bg-transparent hover:bg-accent">
|
||||
Click me
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<Button variant="outline">Click me</Button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## className for layout only
|
||||
|
||||
Use `className` for layout (e.g. `max-w-md`, `mx-auto`, `mt-4`), **not** for overriding component colors or typography. To change colors, use semantic tokens, built-in variants, or CSS variables.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<Card className="bg-blue-100 text-blue-900 font-bold">
|
||||
<CardContent>Dashboard</CardContent>
|
||||
</Card>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<Card className="max-w-md mx-auto">
|
||||
<CardContent>Dashboard</CardContent>
|
||||
</Card>
|
||||
```
|
||||
|
||||
To customize a component's appearance, prefer these approaches in order:
|
||||
1. **Built-in variants** — `variant="outline"`, `variant="destructive"`, etc.
|
||||
2. **Semantic color tokens** — `bg-primary`, `text-muted-foreground`.
|
||||
3. **CSS variables** — define custom colors in the global CSS file (see [customization.md](../customization.md)).
|
||||
|
||||
---
|
||||
|
||||
## No space-x-* / space-y-*
|
||||
|
||||
Use `gap-*` instead. `space-y-4` → `flex flex-col gap-4`. `space-x-2` → `flex gap-2`.
|
||||
|
||||
```tsx
|
||||
<div className="flex flex-col gap-4">
|
||||
<Input />
|
||||
<Input />
|
||||
<Button>Submit</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Prefer size-* over w-* h-* when equal
|
||||
|
||||
`size-10` not `w-10 h-10`. Applies to icons, avatars, skeletons, etc.
|
||||
|
||||
---
|
||||
|
||||
## Prefer truncate shorthand
|
||||
|
||||
`truncate` not `overflow-hidden text-ellipsis whitespace-nowrap`.
|
||||
|
||||
---
|
||||
|
||||
## No manual dark: color overrides
|
||||
|
||||
Use semantic tokens — they handle light/dark via CSS variables. `bg-background text-foreground` not `bg-white dark:bg-gray-950`.
|
||||
|
||||
---
|
||||
|
||||
## Use cn() for conditional classes
|
||||
|
||||
Use the `cn()` utility from the project for conditional or merged class names. Don't write manual ternaries in className strings.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<div className={`flex items-center ${isActive ? "bg-primary text-primary-foreground" : "bg-muted"}`}>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
<div className={cn("flex items-center", isActive ? "bg-primary text-primary-foreground" : "bg-muted")}>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## No manual z-index on overlay components
|
||||
|
||||
`Dialog`, `Sheet`, `Drawer`, `AlertDialog`, `DropdownMenu`, `Popover`, `Tooltip`, `HoverCard` handle their own stacking. Never add `z-50` or `z-[999]`.
|
||||
|
||||
---
|
||||
|
||||
## Use shimmer / scroll-fade utilities, not custom animations
|
||||
|
||||
For a live "thinking…" or loading-text shimmer, apply the `shimmer` utility. Don't author a custom `@keyframes` or a `bg-clip-text` gradient sweep.
|
||||
|
||||
For scroll-aware edge fading on a scroll container, use `scroll-fade` (and the axis variants `scroll-fade-x` / `scroll-fade-b`). Don't hand-roll mask gradients. The chat components already apply these internally: `Attachment` shimmers its title during upload, and `MessageScrollerViewport` fades its edges.
|
||||
|
||||
**Incorrect:**
|
||||
|
||||
```tsx
|
||||
<span className="animate-pulse bg-gradient-to-r from-muted-foreground/40 via-foreground/70 to-muted-foreground/40 bg-clip-text text-transparent [animation:shimmer_1.6s_infinite]">
|
||||
Thinking…
|
||||
</span>
|
||||
```
|
||||
|
||||
**Correct:**
|
||||
|
||||
```tsx
|
||||
<span className="shimmer">Thinking…</span>
|
||||
```
|
||||
+24
-17
@@ -1,26 +1,33 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<classpath>
|
||||
<classpathentry kind="src" path="src"/>
|
||||
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/jdk-26.0.1">
|
||||
<classpathentry kind="lib" path="lib/gson-2.1.jar"/>
|
||||
<classpathentry kind="lib" path="lib/javassist.jar" sourcepath="C:/Users/ADMINI~1/AppData/Local/Temp/1/.org.sf.feeling.decompiler1686963856070/source/javassist-3.29.2-GA-sources.jar"/>
|
||||
<classpathentry kind="lib" path="lib/ini4j.jar"/>
|
||||
<classpathentry kind="lib" path="lib/JFreeChart1.5.2.jar"/>
|
||||
<classpathentry kind="lib" path="lib/toml4j-0.7.1.jar"/>
|
||||
<classpathentry kind="lib" path="lib/pcap4j-core-1.8.2.jar" sourcepath="C:/Users/ADMINI~1/AppData/Local/Temp/1/.org.sf.feeling.decompiler1725520274095/source/pcap4j-core-1.8.2-sources.jar"/>
|
||||
<classpathentry kind="lib" path="lib/pcap4j-packetfactory-propertiesbased-1.8.2.jar"/>
|
||||
<classpathentry kind="lib" path="lib/pcap4j-packetfactory-static-1.8.2.jar"/>
|
||||
<classpathentry kind="lib" path="lib/pcap4j-sample-1.8.2.jar"/>
|
||||
<classpathentry kind="lib" path="lib/slf4j-api-2.0.9.jar"/>
|
||||
<classpathentry kind="lib" path="lib/slf4j-api-2.0.9-javadoc.jar"/>
|
||||
<classpathentry kind="lib" path="lib/slf4j-api-2.0.9-sources.jar"/>
|
||||
<classpathentry kind="lib" path="lib/slf4j-api-2.0.9-tests.jar"/>
|
||||
<classpathentry kind="lib" path="lib/disruptor-4.0.0.jar" sourcepath="lib/disruptor-4.0.0-sources.jar"/>
|
||||
<classpathentry kind="lib" path="lib/disruptor-4.0.0-javadoc.jar"/>
|
||||
<classpathentry kind="lib" path="lib/disruptor-4.0.0-sources.jar"/>
|
||||
<classpathentry kind="lib" path="lib/KNElib1.0.jar"/>
|
||||
<classpathentry kind="lib" path="lib/KNEOptimize.jar"/>
|
||||
<classpathentry kind="lib" path="lib/JavaTUN0.3.jar"/>
|
||||
<classpathentry kind="lib" path="lib/uuid-creator-6.1.1.jar"/>
|
||||
<classpathentry kind="lib" path="lib/jctools-core-4.0.6.jar"/>
|
||||
<classpathentry kind="lib" path="lib/jctools-core-4.0.6-javadoc.jar"/>
|
||||
<classpathentry kind="lib" path="lib/jctools-core-4.0.6-sources.jar"/>
|
||||
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-25">
|
||||
<attributes>
|
||||
<attribute name="module" value="true"/>
|
||||
</attributes>
|
||||
</classpathentry>
|
||||
<classpathentry kind="lib" path="lib/disruptor-4.0.0.jar"/>
|
||||
<classpathentry kind="lib" path="lib/gson-2.1.jar"/>
|
||||
<classpathentry kind="lib" path="lib/ini4j.jar"/>
|
||||
<classpathentry kind="lib" path="lib/javassist.jar"/>
|
||||
<classpathentry kind="lib" path="lib/JavaTUN0.3.jar"/>
|
||||
<classpathentry kind="lib" path="lib/jctools-core-4.0.6.jar"/>
|
||||
<classpathentry kind="lib" path="lib/jfreechart-1.5.3.jar"/>
|
||||
<classpathentry kind="lib" path="lib/KNElib1.0.jar"/>
|
||||
<classpathentry kind="lib" path="lib/KNEOptimize.jar"/>
|
||||
<classpathentry kind="lib" path="lib/pcap4j-core-1.8.2.jar"/>
|
||||
<classpathentry kind="lib" path="lib/pcap4j-distribution-1.8.2-src.zip"/>
|
||||
<classpathentry kind="lib" path="lib/pcap4j-packetfactory-propertiesbased-1.8.2.jar"/>
|
||||
<classpathentry kind="lib" path="lib/pcap4j-packetfactory-static-1.8.2.jar"/>
|
||||
<classpathentry kind="lib" path="lib/slf4j-api-2.0.9.jar"/>
|
||||
<classpathentry kind="lib" path="lib/toml4j-0.7.1.jar"/>
|
||||
<classpathentry kind="lib" path="lib/uuid-creator-6.1.1.jar"/>
|
||||
<classpathentry kind="output" path="bin"/>
|
||||
</classpath>
|
||||
|
||||
+13
@@ -3,3 +3,16 @@
|
||||
/klalbs4.json
|
||||
/klalbs.json
|
||||
/klalbs2.json
|
||||
|
||||
# Dashboard / Frontend
|
||||
dashboard/node_modules/
|
||||
dashboard/dist/
|
||||
dashboard/.pnpm-store/
|
||||
.pnpm-debug.log*
|
||||
dashboard/.env.local
|
||||
dashboard/.env.*.local
|
||||
|
||||
/klalb-config.json
|
||||
/klalbconfig-old.json
|
||||
|
||||
/.slim/
|
||||
@@ -0,0 +1,3 @@
|
||||
[submodule "dashboard"]
|
||||
path = dashboard
|
||||
url = https://git.code.cq.cn/SerinaNya/KLALB-dashboard.git
|
||||
@@ -14,4 +14,15 @@
|
||||
<natures>
|
||||
<nature>org.eclipse.jdt.core.javanature</nature>
|
||||
</natures>
|
||||
<filteredResources>
|
||||
<filter>
|
||||
<id>1787317094049</id>
|
||||
<name></name>
|
||||
<type>30</type>
|
||||
<matcher>
|
||||
<id>org.eclipse.core.resources.regexFilterMatcher</id>
|
||||
<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
|
||||
</matcher>
|
||||
</filter>
|
||||
</filteredResources>
|
||||
</projectDescription>
|
||||
|
||||
Vendored
+27
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "java",
|
||||
"name": "KLALBMain (VS Code 自动构建)",
|
||||
"request": "launch",
|
||||
"mainClass": "org.kne.cloud.network.klalb.KLALBMain",
|
||||
"projectName": "KLALB",
|
||||
"cwd": "${workspaceFolder}",
|
||||
"vmArgs": "--enable-native-access=ALL-UNNAMED --add-opens=java.base/jdk.internal.misc=ALL-UNNAMED"
|
||||
},
|
||||
{
|
||||
"type": "java",
|
||||
"name": "KLALBMain (直接用 bin 目录)",
|
||||
"request": "launch",
|
||||
"mainClass": "org.kne.cloud.network.klalb.KLALBMain",
|
||||
"cwd": "${workspaceFolder}",
|
||||
"classPaths": [
|
||||
"${workspaceFolder}/bin",
|
||||
"${workspaceFolder}/src",
|
||||
"${workspaceFolder}/lib/*"
|
||||
],
|
||||
"vmArgs": "--enable-native-access=ALL-UNNAMED --add-opens=java.base/jdk.internal.misc=ALL-UNNAMED"
|
||||
}
|
||||
]
|
||||
}
|
||||
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"java.configuration.runtimes": [
|
||||
{
|
||||
"name": "JavaSE-25",
|
||||
"path": "C:\\Program Files\\Zulu\\zulu-25",
|
||||
"default": true
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
# AGENTS.md
|
||||
|
||||
KLALB ("KLALB Decentralized SRv6 Network") — Java load-balancing/tunnel system that merges multiple WAN links into one virtual IPv6/SRv6 network. Version constant lives in `src/org/kne/cloud/network/klalb/CONST.java`. Protocol specs and manuals are the Chinese `.docx` files in the repo root.
|
||||
|
||||
## Build & run
|
||||
|
||||
No Maven/Gradle. Plain Eclipse/IntelliJ project: dependencies are vendored jars in `lib/`, output goes to `bin/` (gitignored). When adding a jar, update **both** `.classpath` and `KLALB.iml`.
|
||||
|
||||
Compile (`javac` is NOT on PATH — use the full JDK path; `-encoding UTF-8` is mandatory because sources contain Chinese text):
|
||||
|
||||
```powershell
|
||||
& "C:\Program Files\Zulu\zulu-25\bin\javac.exe" -encoding UTF-8 -cp "lib/*" -d bin (Get-ChildItem -Recurse src -Filter *.java | ForEach-Object FullName)
|
||||
```
|
||||
|
||||
Warnings about `ThreadTool` varargs / deprecated `finalize` are pre-existing and expected — success = exit code 0. After recompiling, restart the running app (IDE-debugged JVMs keep old classes).
|
||||
|
||||
Run from the repo root — CWD matters:
|
||||
- reads `klalb-config.json` from CWD
|
||||
- loads native libs from CWD: `tuntap4j.dll/.so/.dylib`, `wintun.dll`, `fastcopy.dll` (TUN device support)
|
||||
- classpath must include `src` as well as `bin`: i18n bundles (`/klalb_*.properties`) and images (`/assets/*`) are classpath resources that Eclipse copies to `bin` but manual `javac` does not
|
||||
|
||||
```powershell
|
||||
java --enable-native-access=ALL-UNNAMED "--add-opens=java.base/jdk.internal.misc=ALL-UNNAMED" -cp "bin;src;lib/*" org.kne.cloud.network.klalb.KLALBMain
|
||||
```
|
||||
|
||||
IDE metadata targets JDK 26 (`jdk-26.0.1`); the tree also compiles cleanly on JDK 25. `.classpath` now references the standard container `JavaSE-25` — an execution-environment spec that any JDK ≥25 satisfies, so it works unchanged on JDK 26 machines too (the original named `jdk-26.0.1` VM broke VS Code import on machines without it). `.vscode/settings.json` maps `JavaSE-25` to the locally installed Adoptium JDK; register every installed JDK there when adding another one. Keep compiler compliance ≤25 (`.settings` pins 19) so both JDKs stay usable.
|
||||
|
||||
Runtime gotchas (all verified):
|
||||
- On JDK 25, `KNEOptimize.jar`'s `FastLib` reflects into `jdk.internal.misc.Unsafe`; without the two JVM flags above it throws `InaccessibleObjectException` at startup (app still runs).
|
||||
- Creating the SRv6 TUN adapter (`WintunCreateAdapter`) requires an elevated shell; without admin rights it logs "创建虚拟网卡失败" and continues with only the `inLoopBack` interface — links/bridges still work.
|
||||
- To disable TUN creation completely (e.g. for non-admin UI/routing testing), set `"enableTUN": false` in `klalb-config.json` or toggle off "启用 TUN 虚拟网卡" in GUI/Web settings.
|
||||
- Routing broadcast (`RouterInfo`) transmits `deviceName`, which topology and node overview panels display. `deviceDescription` is NOT broadcast — it only leaves the node in full node-info query responses (see srv6 API below); `ExtraRoutes` remain local controller configs.
|
||||
|
||||
## Verification
|
||||
|
||||
No test suite, no CI. Classes named `*Test*` (`nathole/`, `ntp/`) are manual `main()` harnesses requiring real network peers. Practical check = compile succeeds + app launches.
|
||||
|
||||
## Architecture
|
||||
|
||||
- Entrypoint `org.kne.cloud.network.klalb.KLALBMain`: load config → build `KLALBProxySystem` → open Swing GUI (`KLALBStateGUI3`) unless `"nogui": true` → start `KLALBWebServer` (if `"webUI": true` or web server enabled, default port `4665`) → interactive console (`help`, `links-state`, `route`, `kperf`, ...).
|
||||
- `org.kne.cloud.network.klalb.web.KLALBWebServer` — built-in HTTP/SSE server (JDK `HttpServer`):
|
||||
- API endpoints: `/api/status`, `/api/events` (SSE stream, 200ms intervals), `/api/links`, `/api/links/action`, `/api/links/reconnect`, `/api/routing-table`, `/api/nodes` (topology graph), `/api/node-info?address=<ipv6>` (on-demand full node info), `/api/config`.
|
||||
- Static file hosting / SPA fallback: serves `dashboard/dist/` assets directly.
|
||||
- `org.kne.cloud.network` — generic socket framework: `VirtualSocket*` hierarchy, `SocketBridge` port-forwarding proxies, `ProtocolDetector` (multi-protocol mux on one port), `MultiProtocolSocketAddress` = URI-style addresses (`tcp://`, `udp://`, `kltp://`, `ntp://`) dispatched through the `SocketType` registry.
|
||||
- `...network.klalb` — app core: `KLALBController` (the virtual SRv6 network), `KLALBRemoteLink` (WAN lines), `*Packet` wire-format classes, virtual socket implementations.
|
||||
- `...network.congestion` — pluggable congestion control (BBR, Vegas2, DCTCP...), chosen via `"congestionAlgorithm"` in config.
|
||||
- `...network.kltp` — custom reliable transport protocol (packets/streams).
|
||||
- `...network.ipv6`, `...network.srv6` — packet codecs, route table, Dijkstra path computation.
|
||||
- **Node-info query API** (`...network.srv6`, JSON datagrams on `KLALBRoutingProtocol.DEFAULT_PORT=1001`): `KLALBRoutingProtocolAPIServer/Client` speak two request types —
|
||||
- `nodeinfotinyreq/resp` → device name ONLY; never gated by any flag (name is public via broadcast anyway).
|
||||
- `nodeinfofullreq/resp` → externalEndpoints + deviceName + deviceDescription. `denyExternalEndpointQuery=true` hides ONLY the endpoint list (`data=null`); name/description still answer.
|
||||
- GUI rule: opening `NodeInformationPanel` = Full query; use `requestNodeInfoTiny` for lightweight/background lookups. Legacy `openlines*` message types were removed — mixed-version meshes get silence, so upgrade the whole network together.
|
||||
- `JsonDataPacket` stores its UTF-8 payload length in a 2-byte header field: keep every JSON message under 64 KiB.
|
||||
- `...network.frpc` — frp client integration.
|
||||
- `...klalb.ui` — all Swing UI code.
|
||||
|
||||
## Frontend (Dashboard)
|
||||
|
||||
Located in `dashboard/`:
|
||||
- **Git layout**: `dashboard/` is a separate git repo wired in as a submodule (own origin on `git.code.cq.cn`). Commit frontend changes inside `dashboard/` first, then bump the submodule pointer in the parent repo — parent-repo commits alone do not capture them.
|
||||
- **Stack**: Vite + React 19 + TypeScript + Tailwind CSS v4 + `@base-ui/react` (style: `base-nova`, icons: `lucide-react`, toasts: `@base-ui/react/toast`).
|
||||
- **Routing**: Hash-based routing (`#/overview`, `#/connections`, `#/routing-table`, `#/topology`, `#/settings`) for seamless SPA hosting under Java `KLALBWebServer`.
|
||||
- **Package Manager**: `pnpm` (run all commands from `dashboard/` directory).
|
||||
- **Component installation**: **Must** use CLI via `pnpm dlx shadcn@latest add <component>` (e.g. `pnpm dlx shadcn@latest add alert card badge toast`). Never create or fake shadcn components manually. Non-shadcn libs (`@xyflow/react`, `d3-force`) are installed via plain `pnpm add`.
|
||||
- **Commands**:
|
||||
- `pnpm dev` — Start Vite dev server (proxies `/api` to backend `http://127.0.0.1:4665`).
|
||||
- `pnpm build` — Typecheck and build SPA to `dashboard/dist` (which Java `KLALBWebServer` serves directly).
|
||||
- `pnpm lint` / `pnpm typecheck` — Verification.
|
||||
- **Pages & data flow**:
|
||||
- Overview / Connections read the SSE stream (`use-klalb-sse.ts`, 200ms pushes of status + links).
|
||||
- Settings loads/saves `/api/config` (`use-klalb-config.ts`); save payload must keep legacy field aliases alongside new names for compatibility.
|
||||
- Routing table polls `/api/routing-table` every 1s (`use-routing-table.ts`); `cost` is delay-derived and displayed in milliseconds.
|
||||
- Topology polls `/api/nodes` every 1s (`use-topology.ts`) — SSE does NOT carry topology.
|
||||
- Selecting a topology node queries `/api/node-info`; remote node descriptions require a full SRv6 node-info request and can time out after 3s.
|
||||
- Topology layout: `d3-force` headless simulation (recomputed only when node/edge structure changes) rendered by `@xyflow/react` with custom `device-node` / `link-edge` components in `src/components/topology/`.
|
||||
- React hooks lint rule forbids `setState` synchronously inside effects — initialize form state via component `key` remount + lazy `useState(() => ...)` initializers (see `SettingsForm` pattern).
|
||||
|
||||
## Config
|
||||
|
||||
`klalb-config.json` is an array of items discriminated by their `"Type"` field. Adding a new item type requires a `KLALBConfigItem` subclass **plus** new cases in both `KLALBConfigItem.getDefaultJsonDeserializer()` and `getDefaultJsonSerializer()`; unknown types are preserved as `UnknownKLALBConfigItem`. Any Gson instance handling config must register these adapters via `registerToGsonBuilder` (see `KLALBProxySystem`).
|
||||
|
||||
Key controller config fields:
|
||||
- `externalEndpoints` / `autoConnections`: published vs auto-connect endpoint lists (renamed from `openConnections`, which itself replaced legacy `LineTable`; the old name was a developer naming mistake — these addresses are this node's externally published endpoints, not "connections").
|
||||
- `ntpServers`: time server list (replaces `ntpServerTable`).
|
||||
- `denyExternalEndpointQuery` / `denyExternalEndpointBroadcast`: safety flags — the query flag hides ONLY the external-endpoint list in full node-info responses (device name/description still answer; Tiny queries are never gated), the broadcast flag disables LAN multicast discovery (renamed from `denyConnectionQuery` / `denyConnectionBroadcast`, which replaced `denyLineTableQuery` / `denyLineTableBroadcast`).
|
||||
- `enableTUN`: boolean flag for TUN interface creation (`"TUNName"` configures device name).
|
||||
- `webListen`: Web API listen address, normally `http://0.0.0.0:4665`; legacy `webPort` is accepted on load/API input.
|
||||
|
||||
Legacy JSON keys are still accepted on load: `KLALBConfigItem.getDefaultJsonDeserializer()` normalizes old key names (`openConnections`/`LineTable`, `denyConnectionQuery`, `denyLineTable*`, ...) before reflective deserialization (manual rewrite because gson-2.1 has no `@SerializedName(alternate=...)`), and `handleConfig` in the web server accepts them too. New saves always write canonical names.
|
||||
|
||||
Gson quirks:
|
||||
- **gson-2.1 (vendored) is ancient**: its `JSON_ELEMENT` adapter factory only matches exact `JsonElement.class`, NOT subclasses. Calling `gson.toJson(Object)` with a runtime `JsonObject`/`JsonArray` reflectively serializes the internal field as `{"members": {...}}`. `KLALBWebServer.sendJsonResponse` guards against this by using `JsonElement.toString()` for JsonElement instances — keep that guard when adding new response paths. SSE avoids the issue entirely via `JsonObject.toString()`.
|
||||
- `/api/config` GET/POST is parsed field-by-field in `KLALBWebServer.handleConfig` (NOT whole-object Gson reflection) because polymorphic fields (`List<InetAddress>`, `List<MultiProtocolSocketAddress>`) break reflective mapping. Keep new config fields in sync there, accepting both legacy and new JSON key names.
|
||||
- `InetAddress`, `MultiProtocolSocketAddress`, and `KLALBConfigItem` custom adapters are registered on the shared Gson in `KLALBProxySystem`; the web server reuses that instance via `proxySystem.getGson()`.
|
||||
- Saving via web API persists through `KLALBProxySystem.saveConfigToFile()` (GUI save consumer takes precedence when present).
|
||||
|
||||
## Conventions
|
||||
|
||||
- Sources are UTF-8; comments, log/UI strings, and commit messages are largely Chinese.
|
||||
- UI strings go through `UIEnv.getRsb().getString(...)`; add keys to **both** `src/klalb_zh_CN.properties` and `src/klalb_en_US.properties`.
|
||||
- `client.cfg`, `server.cfg`, `linetable.txt` at the root are example line-table/port-rule files loaded via the GUI file picker — not hardwired paths.
|
||||
Submodule
+1
Submodule dashboard added at 89474b9e91
@@ -1,104 +0,0 @@
|
||||
[
|
||||
{
|
||||
"language": "ZH_CN",
|
||||
"nogui": false,
|
||||
"VirtualAddress": "2486:1:0:0:0:0:0:8889",
|
||||
"VirtualASN": 2142606939373348329,
|
||||
"DNS": [
|
||||
"2486:1:0:0:0:0:0:8888"
|
||||
],
|
||||
"TCPListen": "tcp://0.0.0.0:4565",
|
||||
"UDPListen": "udp://0.0.0.0:4572",
|
||||
"VirtualSocketName": "kltp",
|
||||
"LineTable": [
|
||||
"tcp://kne03.yoyo250.fun:4565",
|
||||
"tcp://kne04.yoyo250.fun:4565"
|
||||
],
|
||||
"ConnectLineTable": [
|
||||
"tcp://07f4acdef99b.ofalias.net:4565",
|
||||
"tcp://kne01.yoyo250.fun:4565",
|
||||
"tcp://kne02.yoyo250.fun:4565"
|
||||
],
|
||||
"ntpServerTable": [
|
||||
"ntp://ntp1.aliyun.com",
|
||||
"ntp://ntp2.aliyun.com",
|
||||
"ntp://ntp3.aliyun.com",
|
||||
"ntp://ntp4.aliyun.com",
|
||||
"ntp://ntp5.aliyun.com",
|
||||
"ntp://ntp6.aliyun.com",
|
||||
"ntp://ntp7.aliyun.com",
|
||||
"ntp://ntp1.tencent.com",
|
||||
"ntp://ntp2.tencent.com",
|
||||
"ntp://ntp4.tencent.com",
|
||||
"ntp://ntp5.tencent.com",
|
||||
"ntp://time.google.com",
|
||||
"ntp://time.apple.com",
|
||||
"ntp://pool.ntp.org",
|
||||
"ntp://ntp.ntsc.ac.cn",
|
||||
"ntp://us.ntp.org.cn"
|
||||
],
|
||||
"denyLineTableQuery": false,
|
||||
"denyLineTableBroadcast": false,
|
||||
"congestionAlgorithm": "BBR",
|
||||
"burstLimit": 2.0,
|
||||
"delayUpperBound": 1.2,
|
||||
"delayLowerBound": 1.1,
|
||||
"nagleDelayTime": 1000000,
|
||||
"linkNagleDelayTime": 0,
|
||||
"linkConnectionsCount": 1,
|
||||
"TUNName": "KLALB_SRv6",
|
||||
"performanceStrategy": "multiscatter",
|
||||
"NetworkInterfaceExcepts": [],
|
||||
"Type": "KLALBController"
|
||||
},
|
||||
{
|
||||
"Listen": "kltp://[::0]:5201",
|
||||
"Bridge": {
|
||||
"DEFAULT": "SocketBridge"
|
||||
},
|
||||
"Connect": {
|
||||
"DEFAULT": "tcp://127.0.0.1:5201"
|
||||
},
|
||||
"Type": "SocketBridge"
|
||||
},
|
||||
{
|
||||
"Listen": "tcp://[::1]:5202",
|
||||
"Bridge": {
|
||||
"DEFAULT": "SocketBridge"
|
||||
},
|
||||
"Connect": {
|
||||
"DEFAULT": "kltp://[2486:5acd:e339:4837:a6d9:3aed:4de2:30fd]:5201"
|
||||
},
|
||||
"Type": "SocketBridge"
|
||||
},
|
||||
{
|
||||
"Listen": "tcp://127.0.0.1:35000",
|
||||
"Bridge": {
|
||||
"DEFAULT": "SocketBridge"
|
||||
},
|
||||
"Connect": {
|
||||
"DEFAULT": "kltp://[2486:1::8888]:23333"
|
||||
},
|
||||
"Type": "SocketBridge"
|
||||
},
|
||||
{
|
||||
"Listen": "kltp://[::0]:25565",
|
||||
"Bridge": {
|
||||
"DEFAULT": "SocketBridge"
|
||||
},
|
||||
"Connect": {
|
||||
"DEFAULT": "tcp://127.0.0.1:25566"
|
||||
},
|
||||
"Type": "SocketBridge"
|
||||
},
|
||||
{
|
||||
"Listen": "tcp://127.0.0.1:35565",
|
||||
"Bridge": {
|
||||
"DEFAULT": "SocketBridge"
|
||||
},
|
||||
"Connect": {
|
||||
"DEFAULT": "kltp://[2486:1::8888]:25565"
|
||||
},
|
||||
"Type": "SocketBridge"
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": 1,
|
||||
"skills": {
|
||||
"shadcn": {
|
||||
"source": "shadcn/ui",
|
||||
"sourceType": "github",
|
||||
"skillPath": "skills/shadcn/SKILL.md",
|
||||
"computedHash": "c1a68ee06a668aced9ab2b5fbdea5f989864123794eb2e056b339a072dbb7f10"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,10 @@ networkgraph=Network graph
|
||||
language=Language
|
||||
basicsettings=Basic settings
|
||||
ipv6addr=IPv6 address
|
||||
devicename=Device name
|
||||
devicedescription=Device description
|
||||
dnsserver=DNS server
|
||||
extraroutes=Extra routes
|
||||
asnumber=AS number
|
||||
tcplistening=TCP listening
|
||||
udplistening=UDP listening
|
||||
@@ -34,6 +37,7 @@ saveconfigsuccess=Save config success
|
||||
warning=Warning
|
||||
invaildipv6addr=IPv6 address:Invaild Input
|
||||
invailddnsserver=DNS server:Invaild Input
|
||||
invaildextraroutes=Extra routes:Invaild Input
|
||||
invaildasnumber=AS number:Invaild Input
|
||||
invaildtcplisten=TCP listen:Invaild Input
|
||||
invaildudplisten=UDP listen:Invaild Input
|
||||
@@ -107,4 +111,9 @@ performancesettings=Performance settings
|
||||
performancestrategy=Performance strategy
|
||||
singlecore=Single-Core - Cache Affinity First (Best energy/performance ratio, for low-power & cloud)
|
||||
multifill=Multi-Core - Fill Cores Sequentially (Recommended for general-purpose physical servers)
|
||||
multiscatter=Multi-Core - Spread Load Evenly (Optimized for multi-socket NUMA architectures)
|
||||
multiscatter=Multi-Core - Spread Load Evenly (Optimized for multi-socket NUMA architectures)
|
||||
webapisettings=Web API settings
|
||||
enablewebapi=Enable Web API
|
||||
weblistenaddr=Web API listen address
|
||||
invaildweblistenaddr=Invalid Web API listen address
|
||||
enabletun=Enable TUN adapter
|
||||
|
||||
@@ -3,7 +3,10 @@ networkgraph=网络拓扑图
|
||||
language=语言
|
||||
basicsettings=基本设置
|
||||
ipv6addr=IPv6地址
|
||||
devicename=设备名称
|
||||
devicedescription=设备描述
|
||||
dnsserver=DNS服务器
|
||||
extraroutes=额外路由
|
||||
asnumber=AS号码
|
||||
tcplistening=TCP监听端口
|
||||
udplistening=UDP监听端口
|
||||
@@ -34,6 +37,7 @@ saveconfigsuccess=保存配置成功
|
||||
warning=警告
|
||||
invaildipv6addr=IPv6地址:非法输入
|
||||
invailddnsserver=DNS服务器:非法输入
|
||||
invaildextraroutes=额外路由:非法输入
|
||||
invaildasnumber=AS号码:非法输入
|
||||
invaildtcplisten=TCP监听端口:非法输入
|
||||
invaildudplisten=UDP监听端口:非法输入
|
||||
@@ -107,4 +111,9 @@ performancesettings=性能设置
|
||||
performancestrategy=性能策略
|
||||
singlecore=单核-缓存命中率优先（高能耗比，适合低功耗设备、云机）
|
||||
multifill=多核-负载按顺序填充（适合大多数物理服务器、电脑）
|
||||
multiscatter=多核-负载均匀打散分配（适合特殊的多路NUMA服务器）
|
||||
multiscatter=多核-负载均匀打散分配（适合特殊的多路NUMA服务器）
|
||||
webapisettings=Web API 设置
|
||||
enablewebapi=启用 Web API
|
||||
weblistenaddr=Web API 监听地址:端口
|
||||
invaildweblistenaddr=无效的 Web API 监听地址:端口
|
||||
enabletun=启用TUN虚拟网卡
|
||||
@@ -7,8 +7,9 @@ import com.google.gson.GsonBuilder;
|
||||
import com.google.gson.JsonDeserializationContext;
|
||||
import com.google.gson.JsonDeserializer;
|
||||
import com.google.gson.JsonElement;
|
||||
import com.google.gson.JsonObject;
|
||||
import com.google.gson.JsonParseException;
|
||||
import com.google.gson.JsonObject;
|
||||
import com.google.gson.JsonParseException;
|
||||
import com.google.gson.JsonPrimitive;
|
||||
import com.google.gson.JsonSerializationContext;
|
||||
import com.google.gson.JsonSerializer;
|
||||
import com.google.gson.reflect.TypeToken;
|
||||
@@ -61,6 +62,7 @@ public class KLALBConfigItem {
|
||||
String s=jobj.get("Type").getAsString();
|
||||
switch(s) {
|
||||
case "KLALBController":
|
||||
normalizeLegacyControllerKeys(jobj);
|
||||
return arg2.deserialize(arg0, new TypeToken<KLALBControllerConfigItem>() {}.getType());
|
||||
case "SocketBridge":
|
||||
return arg2.deserialize(arg0, new TypeToken<SocketBridgeConfigItem>() {}.getType());
|
||||
@@ -70,6 +72,39 @@ public class KLALBConfigItem {
|
||||
}
|
||||
throw new JsonParseException("not a object:"+arg0);
|
||||
}
|
||||
|
||||
/**
|
||||
* 将历史命名错误的配置键归一化为当前键名（仅在当前键名不存在时生效）：
|
||||
* openConnections/lineTable → externalEndpoints，
|
||||
* denyConnectionQuery/denyLineTableQuery → denyExternalEndpointQuery，
|
||||
* denyConnectionBroadcast/denyLineTableBroadcast → denyExternalEndpointBroadcast。
|
||||
*/
|
||||
private void normalizeLegacyControllerKeys(JsonObject jobj) {
|
||||
renameLegacyKey(jobj,"externalEndpoints","openConnections","OpenConnections","lineTable","LineTable");
|
||||
renameLegacyKey(jobj,"denyExternalEndpointQuery","denyConnectionQuery","denyLineTableQuery");
|
||||
renameLegacyKey(jobj,"denyExternalEndpointBroadcast","denyConnectionBroadcast","denyLineTableBroadcast");
|
||||
if (!jobj.has("webListen") && jobj.has("webPort") && !jobj.get("webPort").isJsonNull()) {
|
||||
int port = jobj.get("webPort").getAsInt();
|
||||
jobj.add("webListen", new JsonPrimitive("http://0.0.0.0:" + port));
|
||||
}
|
||||
jobj.remove("webPort");
|
||||
}
|
||||
|
||||
private void renameLegacyKey(JsonObject jobj, String newKey, String... legacyKeys) {
|
||||
if (jobj.has(newKey)) {
|
||||
for (String legacyKey : legacyKeys) {
|
||||
jobj.remove(legacyKey);
|
||||
}
|
||||
return;
|
||||
}
|
||||
for (String legacyKey : legacyKeys) {
|
||||
if (jobj.has(legacyKey)) {
|
||||
jobj.add(newKey, jobj.get(legacyKey));
|
||||
jobj.remove(legacyKey);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
public static JsonSerializer<KLALBConfigItem>getDefaultJsonSerializer(){
|
||||
|
||||
@@ -76,7 +76,7 @@ public class KLALBController {
|
||||
new HashMapTimestampMonitor<UUID>(HighAccuracyClock.SYSTEM_CLOCK, "up", 100, TIME_WINDOW),
|
||||
new HashMapTimestampMonitor<UUID>(HighAccuracyClock.SYSTEM_CLOCK, "down", 100, TIME_WINDOW));
|
||||
|
||||
private List<MultiProtocolSocketAddress> selflineTable = new ArrayList<>();
|
||||
private List<MultiProtocolSocketAddress> externalEndpoints = new ArrayList<>();
|
||||
|
||||
private List<MultiProtocolSocketAddress> listensSocketAddress = new CopyOnWriteArrayList<>();
|
||||
|
||||
@@ -137,9 +137,9 @@ public class KLALBController {
|
||||
MultiProtocolSocketAddress bind = new MultiProtocolSocketAddress(tcpl.getProtocol(),
|
||||
inetAddress.getHostAddress(), tcpl.getPort());
|
||||
// System.out.println(bind);
|
||||
synchronized (selflineTable) {
|
||||
if (!selflineTable.contains(bind)) {
|
||||
selflineTable.add(bind);
|
||||
synchronized (externalEndpoints) {
|
||||
if (!externalEndpoints.contains(bind)) {
|
||||
externalEndpoints.add(bind);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -210,7 +210,7 @@ public class KLALBController {
|
||||
for (Iterator<IPMulticastDiscovery> iterator = ipmd.iterator(); iterator.hasNext(); ) {
|
||||
IPMulticastDiscovery ipMulticastDiscovery = (IPMulticastDiscovery) iterator.next();
|
||||
if (ipMulticastDiscovery.isClosed() || (!ipMulticastDiscovery.getInterface().isUp())
|
||||
|| (configItem != null && configItem.isDenyLineTableBroadcast())) {
|
||||
|| (configItem != null && configItem.isDenyExternalEndpointBroadcast())) {
|
||||
iterator.remove();
|
||||
try {
|
||||
ipMulticastDiscovery.close();
|
||||
@@ -222,7 +222,7 @@ public class KLALBController {
|
||||
}
|
||||
}
|
||||
|
||||
if (configItem != null && configItem.isDenyLineTableBroadcast()) {
|
||||
if (configItem != null && configItem.isDenyExternalEndpointBroadcast()) {
|
||||
|
||||
} else {
|
||||
List<NetworkInterface> interfaceList = networkInterfaceManager.getAllAvaliableNetworkInterface();
|
||||
@@ -299,7 +299,7 @@ public class KLALBController {
|
||||
private boolean checkIsSelf(MultiProtocolSocketAddress inetAddress) throws UnknownHostException {
|
||||
|
||||
return inetAddress.getInetAddress().isAnyLocalAddress() || inetAddress.getInetAddress().isLoopbackAddress()
|
||||
|| selflineTable.contains(inetAddress);
|
||||
|| externalEndpoints.contains(inetAddress);
|
||||
}
|
||||
|
||||
private boolean checkIsSelfLocator(InetAddress inetAddress) {
|
||||
@@ -339,9 +339,9 @@ public class KLALBController {
|
||||
try {
|
||||
InetSocketAddress iaddr = new InetSocketAddress(neighbor.getAddress().toInet6Address(),
|
||||
KLALBRoutingProtocol.DEFAULT_PORT);
|
||||
apiClient.requestOpenLines(iaddr, (v) -> {
|
||||
apiClient.requestNodeInfoFull(iaddr, (v) -> {
|
||||
ThreadTool.makeVDaemonThreadIfSupport("线路添加任务", () -> {
|
||||
for (MultiProtocolSocketAddress msa : v) {
|
||||
for (MultiProtocolSocketAddress msa : v.getOpenLines()) {
|
||||
// System.out.print(msa);
|
||||
addRemoteLines(msa);
|
||||
}
|
||||
@@ -401,8 +401,8 @@ public class KLALBController {
|
||||
}
|
||||
|
||||
|
||||
public List<MultiProtocolSocketAddress> getSelflineTable() {
|
||||
return selflineTable;
|
||||
public List<MultiProtocolSocketAddress> getExternalEndpoints() {
|
||||
return externalEndpoints;
|
||||
}
|
||||
|
||||
|
||||
@@ -593,18 +593,18 @@ public class KLALBController {
|
||||
lineslock.writeLock().lock();
|
||||
try {
|
||||
krs.startIO();
|
||||
String selflineTable = generateSelfLineTable();
|
||||
if (selflineTable != null && !selflineTable.equals(""))
|
||||
krs.sendPacket(new ADDLINESPacket(selflineTable));
|
||||
String externalEndpointsText = generateExternalEndpointsString();
|
||||
if (externalEndpointsText != null && !externalEndpointsText.equals(""))
|
||||
krs.sendPacket(new ADDLINESPacket(externalEndpointsText));
|
||||
srv6Router.getLinkTabel().add(krs);
|
||||
} finally {
|
||||
lineslock.writeLock().unlock();
|
||||
}
|
||||
}
|
||||
|
||||
private String generateSelfLineTable() {
|
||||
private String generateExternalEndpointsString() {
|
||||
StringBuilder sbd = new StringBuilder();
|
||||
for (Iterator<MultiProtocolSocketAddress> iterator = selflineTable.iterator(); iterator.hasNext();) {
|
||||
for (Iterator<MultiProtocolSocketAddress> iterator = externalEndpoints.iterator(); iterator.hasNext();) {
|
||||
MultiProtocolSocketAddress klalbRemoteLine = (MultiProtocolSocketAddress) iterator.next();
|
||||
sbd.append(klalbRemoteLine.toString());
|
||||
sbd.append('\n');
|
||||
@@ -637,6 +637,7 @@ public class KLALBController {
|
||||
srv6Router = new SRv6Router(selfx, clock);
|
||||
if(configItem!=null) {
|
||||
srv6Router.setPerformanceStrategy(PerformanceStrategy.fromDescription(configItem.getPerformanceStrategy()));
|
||||
srv6Router.setDeviceName(configItem.getDeviceName());
|
||||
}
|
||||
srv6Router.runKLALBRouteProtocol();
|
||||
routingProtocol = srv6Router.getKlalbRouteProtol();
|
||||
@@ -646,11 +647,13 @@ public class KLALBController {
|
||||
rawPortBinder= new PortBinder(this.getSelf().getAddress());
|
||||
System.out.println(" Loaded: SRv6 Stack");
|
||||
|
||||
String name=(configItem!=null)?configItem.getTUNName():CONST.KLALB_S_RV6;
|
||||
if (enableVirtualAdapter&&(name!=null)) {
|
||||
String name = (configItem != null && configItem.getTUNName() != null) ? configItem.getTUNName() : CONST.KLALB_S_RV6;
|
||||
boolean isEnabled = configItem == null || configItem.isEnableTUN();
|
||||
boolean enableTUN = enableVirtualAdapter && isEnabled && (name != null) && !name.trim().isEmpty() && !name.trim().equalsIgnoreCase("null");
|
||||
if (enableTUN) {
|
||||
Thread t=new Thread(()->{
|
||||
try {
|
||||
IPv6TUNLoopbackNetworkLink tunlink = new IPv6TUNLoopbackNetworkLink(name,
|
||||
IPv6TUNLoopbackNetworkLink tunlink = new IPv6TUNLoopbackNetworkLink(name.trim(),
|
||||
new IPv6AddressGroup(srv6Router.getLocator().getAddress(), 32), SRv6Router.MTU, dnsAddresses);
|
||||
tunlink.setMonitor(datatMonitor);
|
||||
// srv6Router.getLinkTabel().add(tunlink);
|
||||
@@ -664,7 +667,7 @@ public class KLALBController {
|
||||
});
|
||||
t.start();
|
||||
}else {
|
||||
System.out.println(" Tun Adapter Disbaled");
|
||||
System.out.println(" Tun Adapter Disabled");
|
||||
|
||||
}
|
||||
udpr=new UDPProtocolRegister(this);
|
||||
@@ -798,18 +801,18 @@ public class KLALBController {
|
||||
getIpv6Router().setASN(vasn);
|
||||
}
|
||||
|
||||
List<MultiProtocolSocketAddress> linele = configItem.getLineTable();
|
||||
List<MultiProtocolSocketAddress> linele = configItem.getExternalEndpoints();
|
||||
if (linele != null) {
|
||||
getSelflineTable().addAll(linele);
|
||||
}
|
||||
List<MultiProtocolSocketAddress> linetoc = configItem.getConnectLineTable();
|
||||
getExternalEndpoints().addAll(linele);
|
||||
}
|
||||
List<MultiProtocolSocketAddress> linetoc = configItem.getAutoConnections();
|
||||
if (linetoc != null) {
|
||||
linetoc.forEach((aline) -> {
|
||||
addRemoteLines(aline);
|
||||
});
|
||||
}
|
||||
|
||||
List<MultiProtocolSocketAddress> ntps = configItem.getNtpServerTable();
|
||||
List<MultiProtocolSocketAddress> ntps = configItem.getNtpServers();
|
||||
if (ntps != null) {
|
||||
getNTPTable().addAll(ntps);
|
||||
}
|
||||
|
||||
@@ -15,12 +15,13 @@ public class KLALBControllerConfigItem extends KLALBConfigItem {
|
||||
private List<InetAddress> DNS;
|
||||
private MultiProtocolSocketAddress TCPListen=new MultiProtocolSocketAddress("0.0.0.0",4565);
|
||||
private MultiProtocolSocketAddress UDPListen=new MultiProtocolSocketAddress("udp","0.0.0.0",4565);
|
||||
private String VirtualSocketName=CONST.KLTP_VIRTUAL_SOCKET_NAME;
|
||||
private List<MultiProtocolSocketAddress>LineTable=new ArrayList<>();
|
||||
private List<MultiProtocolSocketAddress>ConnectLineTable=new ArrayList<>();
|
||||
private List<MultiProtocolSocketAddress>ntpServerTable=new ArrayList<>();
|
||||
private boolean denyLineTableQuery=false;
|
||||
private boolean denyLineTableBroadcast=false;
|
||||
private String VirtualSocketName;
|
||||
private List<MultiProtocolSocketAddress> externalEndpoints = new ArrayList<>();
|
||||
private List<MultiProtocolSocketAddress> autoConnections = new ArrayList<>();
|
||||
private List<MultiProtocolSocketAddress> ntpServers = new ArrayList<>();
|
||||
private List<String> ExtraRoutes = new ArrayList<>();
|
||||
private boolean denyExternalEndpointQuery = false;
|
||||
private boolean denyExternalEndpointBroadcast = false;
|
||||
private String congestionAlgorithm="BBR";
|
||||
private double burstLimit=1.50;
|
||||
private double delayUpperBound=1.20;
|
||||
@@ -28,8 +29,37 @@ public class KLALBControllerConfigItem extends KLALBConfigItem {
|
||||
private long nagleDelayTime=1000000L;
|
||||
private long linkNagleDelayTime=1000000L;
|
||||
private int linkConnectionsCount=1;
|
||||
private boolean enableTUN = true;
|
||||
private String TUNName=CONST.KLALB_S_RV6;
|
||||
private String performanceStrategy="multifill";
|
||||
private String DeviceName;
|
||||
private String DeviceDescription;
|
||||
private boolean webUI = false;
|
||||
private MultiProtocolSocketAddress webListen = new MultiProtocolSocketAddress("http", "0.0.0.0", 4665);
|
||||
|
||||
public boolean isEnableTUN() {
|
||||
return enableTUN;
|
||||
}
|
||||
|
||||
public void setEnableTUN(boolean enableTUN) {
|
||||
this.enableTUN = enableTUN;
|
||||
}
|
||||
|
||||
public boolean isWebUI() {
|
||||
return webUI;
|
||||
}
|
||||
|
||||
public void setWebUI(boolean webUI) {
|
||||
this.webUI = webUI;
|
||||
}
|
||||
|
||||
public MultiProtocolSocketAddress getWebListen() {
|
||||
return webListen;
|
||||
}
|
||||
|
||||
public void setWebListen(MultiProtocolSocketAddress webListen) {
|
||||
this.webListen = webListen;
|
||||
}
|
||||
|
||||
public String getPerformanceStrategy() {
|
||||
return performanceStrategy;
|
||||
@@ -39,6 +69,22 @@ public class KLALBControllerConfigItem extends KLALBConfigItem {
|
||||
this.performanceStrategy = performanceStrategy;
|
||||
}
|
||||
|
||||
public String getDeviceName() {
|
||||
return DeviceName;
|
||||
}
|
||||
|
||||
public void setDeviceName(String deviceName) {
|
||||
DeviceName = deviceName;
|
||||
}
|
||||
|
||||
public String getDeviceDescription() {
|
||||
return DeviceDescription;
|
||||
}
|
||||
|
||||
public void setDeviceDescription(String deviceDescription) {
|
||||
DeviceDescription = deviceDescription;
|
||||
}
|
||||
|
||||
public void setNetworkInterfaceExcepts(List<String> networkInterfaceExcepts) {
|
||||
NetworkInterfaceExcepts = networkInterfaceExcepts;
|
||||
}
|
||||
@@ -158,39 +204,52 @@ public class KLALBControllerConfigItem extends KLALBConfigItem {
|
||||
|
||||
|
||||
|
||||
public List<MultiProtocolSocketAddress> getLineTable() {
|
||||
return LineTable;
|
||||
public List<MultiProtocolSocketAddress> getExternalEndpoints() {
|
||||
return externalEndpoints;
|
||||
}
|
||||
|
||||
|
||||
|
||||
public void setLineTable(List<MultiProtocolSocketAddress> lineTable) {
|
||||
LineTable = lineTable;
|
||||
public void setExternalEndpoints(List<MultiProtocolSocketAddress> externalEndpoints) {
|
||||
this.externalEndpoints = externalEndpoints;
|
||||
}
|
||||
|
||||
public List<MultiProtocolSocketAddress> getAutoConnections() {
|
||||
return autoConnections;
|
||||
}
|
||||
|
||||
public void setAutoConnections(List<MultiProtocolSocketAddress> autoConnections) {
|
||||
this.autoConnections = autoConnections;
|
||||
}
|
||||
|
||||
public List<MultiProtocolSocketAddress> getConnectLineTable() {
|
||||
return ConnectLineTable;
|
||||
return autoConnections;
|
||||
}
|
||||
|
||||
|
||||
|
||||
public void setConnectLineTable(List<MultiProtocolSocketAddress> connectLineTable) {
|
||||
ConnectLineTable = connectLineTable;
|
||||
this.autoConnections = connectLineTable;
|
||||
}
|
||||
|
||||
|
||||
public List<MultiProtocolSocketAddress> getNtpServers() {
|
||||
return ntpServers;
|
||||
}
|
||||
|
||||
public void setNtpServers(List<MultiProtocolSocketAddress> ntpServers) {
|
||||
this.ntpServers = ntpServers;
|
||||
}
|
||||
|
||||
public List<MultiProtocolSocketAddress> getNtpServerTable() {
|
||||
return ntpServerTable;
|
||||
return ntpServers;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
public void setNtpServerTable(List<MultiProtocolSocketAddress> ntpServerTable) {
|
||||
this.ntpServerTable = ntpServerTable;
|
||||
this.ntpServers = ntpServerTable;
|
||||
}
|
||||
|
||||
public List<String> getExtraRoutes() {
|
||||
return ExtraRoutes;
|
||||
}
|
||||
|
||||
public void setExtraRoutes(List<String> extraRoutes) {
|
||||
ExtraRoutes = extraRoutes;
|
||||
}
|
||||
|
||||
|
||||
@@ -253,23 +312,20 @@ public class KLALBControllerConfigItem extends KLALBConfigItem {
|
||||
|
||||
|
||||
|
||||
public boolean isDenyLineTableQuery() {
|
||||
return denyLineTableQuery;
|
||||
public boolean isDenyExternalEndpointQuery() {
|
||||
return denyExternalEndpointQuery;
|
||||
}
|
||||
|
||||
|
||||
public void setDenyLineTableQuery(boolean denyLineTableQuery) {
|
||||
this.denyLineTableQuery = denyLineTableQuery;
|
||||
public void setDenyExternalEndpointQuery(boolean denyExternalEndpointQuery) {
|
||||
this.denyExternalEndpointQuery = denyExternalEndpointQuery;
|
||||
}
|
||||
|
||||
|
||||
public boolean isDenyLineTableBroadcast() {
|
||||
return denyLineTableBroadcast;
|
||||
public boolean isDenyExternalEndpointBroadcast() {
|
||||
return denyExternalEndpointBroadcast;
|
||||
}
|
||||
|
||||
|
||||
public void setDenyLineTableBroadcast(boolean denyLineTableBroadcast) {
|
||||
this.denyLineTableBroadcast = denyLineTableBroadcast;
|
||||
public void setDenyExternalEndpointBroadcast(boolean denyExternalEndpointBroadcast) {
|
||||
this.denyExternalEndpointBroadcast = denyExternalEndpointBroadcast;
|
||||
}
|
||||
|
||||
|
||||
@@ -325,11 +381,12 @@ public class KLALBControllerConfigItem extends KLALBConfigItem {
|
||||
", TCPListen=" + TCPListen +
|
||||
", UDPListen=" + UDPListen +
|
||||
", VirtualSocketName='" + VirtualSocketName + '\'' +
|
||||
", LineTable=" + LineTable +
|
||||
", ConnectLineTable=" + ConnectLineTable +
|
||||
", ntpServerTable=" + ntpServerTable +
|
||||
", denyLineTableQuery=" + denyLineTableQuery +
|
||||
", denyLineTableBroadcast=" + denyLineTableBroadcast +
|
||||
", externalEndpoints=" + externalEndpoints +
|
||||
", autoConnections=" + autoConnections +
|
||||
", ntpServers=" + ntpServers +
|
||||
", ExtraRoutes=" + ExtraRoutes +
|
||||
", denyExternalEndpointQuery=" + denyExternalEndpointQuery +
|
||||
", denyExternalEndpointBroadcast=" + denyExternalEndpointBroadcast +
|
||||
", congestionAlgorithm='" + congestionAlgorithm + '\'' +
|
||||
", burstLimit=" + burstLimit +
|
||||
", delayUpperBound=" + delayUpperBound +
|
||||
@@ -337,10 +394,15 @@ public class KLALBControllerConfigItem extends KLALBConfigItem {
|
||||
", nagleDelayTime=" + nagleDelayTime +
|
||||
", linkNagleDelayTime=" + linkNagleDelayTime +
|
||||
", linkConnectionsCount=" + linkConnectionsCount +
|
||||
", enableTUN=" + enableTUN +
|
||||
", TUNName='" + TUNName + '\'' +
|
||||
", performanceStrategy='" + performanceStrategy + '\'' +
|
||||
", NetworkInterfaceExcepts=" + NetworkInterfaceExcepts +
|
||||
'}';
|
||||
", DeviceName='" + DeviceName + '\'' +
|
||||
", DeviceDescription='" + DeviceDescription + '\'' +
|
||||
", NetworkInterfaceExcepts=" + NetworkInterfaceExcepts +
|
||||
", webUI=" + webUI +
|
||||
", webListen=" + webListen +
|
||||
'}';
|
||||
}
|
||||
|
||||
@Override
|
||||
@@ -348,11 +410,11 @@ public class KLALBControllerConfigItem extends KLALBConfigItem {
|
||||
if (o == null || getClass() != o.getClass()) return false;
|
||||
if (!super.equals(o)) return false;
|
||||
KLALBControllerConfigItem that = (KLALBControllerConfigItem) o;
|
||||
return nogui == that.nogui && denyLineTableQuery == that.denyLineTableQuery && denyLineTableBroadcast == that.denyLineTableBroadcast && Double.compare(burstLimit, that.burstLimit) == 0 && Double.compare(delayUpperBound, that.delayUpperBound) == 0 && Double.compare(delayLowerBound, that.delayLowerBound) == 0 && nagleDelayTime == that.nagleDelayTime && linkNagleDelayTime == that.linkNagleDelayTime && linkConnectionsCount == that.linkConnectionsCount && Objects.equals(language, that.language) && Objects.equals(VirtualAddress, that.VirtualAddress) && Objects.equals(VirtualASN, that.VirtualASN) && Objects.equals(DNS, that.DNS) && Objects.equals(TCPListen, that.TCPListen) && Objects.equals(UDPListen, that.UDPListen) && Objects.equals(VirtualSocketName, that.VirtualSocketName) && Objects.equals(LineTable, that.LineTable) && Objects.equals(ConnectLineTable, that.ConnectLineTable) && Objects.equals(ntpServerTable, that.ntpServerTable) && Objects.equals(congestionAlgorithm, that.congestionAlgorithm) && Objects.equals(TUNName, that.TUNName) && Objects.equals(performanceStrategy, that.performanceStrategy) && Objects.equals(NetworkInterfaceExcepts, that.NetworkInterfaceExcepts);
|
||||
return nogui == that.nogui && enableTUN == that.enableTUN && webUI == that.webUI && denyExternalEndpointQuery == that.denyExternalEndpointQuery && denyExternalEndpointBroadcast == that.denyExternalEndpointBroadcast && Double.compare(burstLimit, that.burstLimit) == 0 && Double.compare(delayUpperBound, that.delayUpperBound) == 0 && Double.compare(delayLowerBound, that.delayLowerBound) == 0 && nagleDelayTime == that.nagleDelayTime && linkNagleDelayTime == that.linkNagleDelayTime && linkConnectionsCount == that.linkConnectionsCount && Objects.equals(webListen, that.webListen) && Objects.equals(language, that.language) && Objects.equals(VirtualAddress, that.VirtualAddress) && Objects.equals(VirtualASN, that.VirtualASN) && Objects.equals(DNS, that.DNS) && Objects.equals(TCPListen, that.TCPListen) && Objects.equals(UDPListen, that.UDPListen) && Objects.equals(VirtualSocketName, that.VirtualSocketName) && Objects.equals(externalEndpoints, that.externalEndpoints) && Objects.equals(autoConnections, that.autoConnections) && Objects.equals(ntpServers, that.ntpServers) && Objects.equals(ExtraRoutes, that.ExtraRoutes) && Objects.equals(congestionAlgorithm, that.congestionAlgorithm) && Objects.equals(TUNName, that.TUNName) && Objects.equals(performanceStrategy, that.performanceStrategy) && Objects.equals(DeviceName, that.DeviceName) && Objects.equals(DeviceDescription, that.DeviceDescription) && Objects.equals(NetworkInterfaceExcepts, that.NetworkInterfaceExcepts);
|
||||
}
|
||||
|
||||
@Override
|
||||
public int hashCode() {
|
||||
return Objects.hash(super.hashCode(), language, nogui, VirtualAddress, VirtualASN, DNS, TCPListen, UDPListen, VirtualSocketName, LineTable, ConnectLineTable, ntpServerTable, denyLineTableQuery, denyLineTableBroadcast, congestionAlgorithm, burstLimit, delayUpperBound, delayLowerBound, nagleDelayTime, linkNagleDelayTime, linkConnectionsCount, TUNName, performanceStrategy, NetworkInterfaceExcepts);
|
||||
return Objects.hash(super.hashCode(), language, nogui, VirtualAddress, VirtualASN, DNS, TCPListen, UDPListen, VirtualSocketName, externalEndpoints, autoConnections, ntpServers, ExtraRoutes, denyExternalEndpointQuery, denyExternalEndpointBroadcast, congestionAlgorithm, burstLimit, delayUpperBound, delayLowerBound, nagleDelayTime, linkNagleDelayTime, linkConnectionsCount, enableTUN, TUNName, performanceStrategy, DeviceName, DeviceDescription, NetworkInterfaceExcepts, webUI, webListen);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -51,13 +51,15 @@ public class KLALBMain {
|
||||
}catch(Throwable e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
try {
|
||||
if(kpcje.getControllerConfig() != null && kpcje.getControllerConfig().isWebUI()) {
|
||||
kpcje.enableWebServer();
|
||||
}
|
||||
} catch(Throwable e) {
|
||||
System.err.println("Failed to start web server: " + e.getMessage());
|
||||
}
|
||||
dtb.putTime("UI");
|
||||
//dtb.print();
|
||||
/*MultipurposeSocketAddress mpa=new MultipurposeSocketAddress("127.9.9.9", 49573);
|
||||
kpcje.enableRemoteManagement(mpa);
|
||||
System.out.println("远程管理端口已在"+mpa+"端口上开启");*/
|
||||
/*if(true)
|
||||
return;*/
|
||||
ServerSocketChannel kpsvr=KLALBVirtualServerSocketChannel.open(kpcje.getKlalbController());
|
||||
kpsvr.bind(new InetSocketAddress("::0", 4564));
|
||||
SocketChannelListener stlr=new SocketChannelListener(kpsvr);
|
||||
@@ -83,6 +85,7 @@ public class KLALBMain {
|
||||
case "help":
|
||||
System.out.println(" help / ?: see help");
|
||||
System.out.println(" monitor: show monitor GUI");
|
||||
System.out.println(" web [start|stop|status <port>]: manage web dashboard");
|
||||
System.out.println(" links-state: query link states");
|
||||
System.out.println(" links-add <addr:port>: add link");
|
||||
System.out.println(" links-remove <addr:port>: remove link");
|
||||
@@ -101,6 +104,42 @@ public class KLALBMain {
|
||||
e.printStackTrace();
|
||||
}
|
||||
break;
|
||||
case "web":
|
||||
if(sc.length >= 2) {
|
||||
String action = sc[1].toLowerCase();
|
||||
if("start".equals(action)) {
|
||||
int p = 4665;
|
||||
if(sc.length >= 3) {
|
||||
try { p = Integer.parseInt(sc[2]); } catch (NumberFormatException ignored) {}
|
||||
} else if(kpcje.getControllerConfig() != null && kpcje.getControllerConfig().getWebListen() != null) {
|
||||
p = kpcje.getControllerConfig().getWebListen().getPort();
|
||||
}
|
||||
try {
|
||||
kpcje.enableWebServer(p);
|
||||
System.out.println("Web dashboard started on http://localhost:" + p);
|
||||
} catch(Exception e) {
|
||||
System.out.println("Failed to start web server: " + e.getMessage());
|
||||
}
|
||||
} else if("stop".equals(action)) {
|
||||
kpcje.disableWebServer();
|
||||
System.out.println("Web dashboard stopped.");
|
||||
} else if("status".equals(action)) {
|
||||
if(kpcje.isWebServerEnabled()) {
|
||||
System.out.println("Web dashboard is running on port " + kpcje.getWebServer().getPort());
|
||||
} else {
|
||||
System.out.println("Web dashboard is stopped.");
|
||||
}
|
||||
} else {
|
||||
System.out.println("Usage: web [start|stop|status <port>]");
|
||||
}
|
||||
} else {
|
||||
if(kpcje.isWebServerEnabled()) {
|
||||
System.out.println("Web dashboard is running on port " + kpcje.getWebServer().getPort());
|
||||
} else {
|
||||
System.out.println("Web dashboard is not running. Use 'web start [port]' to start.");
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "links-state":
|
||||
System.out.println("links state：");
|
||||
//System.out.println("状态\t上传流量\t下载流量\t上传速度\t下载速度\t上传延迟\t下载延迟\t上传抖动\t下载抖动");
|
||||
|
||||
@@ -5,25 +5,34 @@ import java.io.FileReader;
|
||||
import java.io.FileWriter;
|
||||
import java.io.IOException;
|
||||
import java.io.Reader;
|
||||
import java.net.InetSocketAddress;
|
||||
import java.lang.reflect.Type;
|
||||
import java.net.InetAddress;
|
||||
import java.net.InetSocketAddress;
|
||||
import java.util.HashSet;
|
||||
|
||||
import org.kne.cloud.network.*;
|
||||
import org.kne.cloud.network.klalb.ui.KLALBStateGUI3;
|
||||
import org.kne.cloud.network.klalb.ui.Language;
|
||||
import org.kne.cloud.network.klalb.ui.UIEnv;
|
||||
import org.kne.cloud.network.klalb.web.KLALBWebServer;
|
||||
|
||||
import java.util.Set;
|
||||
|
||||
import com.google.gson.Gson;
|
||||
import com.google.gson.GsonBuilder;
|
||||
import com.google.gson.JsonDeserializationContext;
|
||||
import com.google.gson.JsonDeserializer;
|
||||
import com.google.gson.JsonElement;
|
||||
import com.google.gson.JsonParseException;
|
||||
import com.google.gson.JsonPrimitive;
|
||||
import com.google.gson.JsonSerializationContext;
|
||||
import com.google.gson.JsonSerializer;
|
||||
import com.google.gson.JsonParser;
|
||||
|
||||
public class KLALBProxySystem {
|
||||
private Set<Proxy> proxys=new HashSet<>();
|
||||
private KLALBController klalbController;
|
||||
private KLALBRemoteManagement krm;
|
||||
private KLALBWebServer webServer;
|
||||
private KLALBConfig config;
|
||||
private Gson gson;
|
||||
private File jsonFile;
|
||||
@@ -31,8 +40,28 @@ public class KLALBProxySystem {
|
||||
GsonBuilder gb=new GsonBuilder().setPrettyPrinting();
|
||||
MultiProtocolSocketAddress.registerToGsonBuilder(gb);
|
||||
KLALBConfigItem.registerToGsonBuilder(gb);
|
||||
gb.registerTypeAdapter(InetAddress.class, new JsonSerializer<InetAddress>() {
|
||||
@Override
|
||||
public JsonElement serialize(InetAddress src, Type typeOfSrc, JsonSerializationContext context) {
|
||||
return new JsonPrimitive(src.getHostAddress());
|
||||
}
|
||||
});
|
||||
gb.registerTypeAdapter(InetAddress.class, new JsonDeserializer<InetAddress>() {
|
||||
@Override
|
||||
public InetAddress deserialize(JsonElement json, Type typeOfT, JsonDeserializationContext context) throws JsonParseException {
|
||||
try {
|
||||
return InetAddress.getByName(json.getAsString());
|
||||
} catch (Exception e) {
|
||||
throw new JsonParseException(e);
|
||||
}
|
||||
}
|
||||
});
|
||||
gson=gb.create();
|
||||
}
|
||||
public Gson getGson() {
|
||||
return gson;
|
||||
}
|
||||
|
||||
public Set<Proxy> getProxys() {
|
||||
return proxys;
|
||||
}
|
||||
@@ -55,30 +84,38 @@ public class KLALBProxySystem {
|
||||
public KLALBProxySystem() {
|
||||
}
|
||||
|
||||
public void enableRemoteManagement() throws IOException {
|
||||
if(krm==null) {
|
||||
krm=new KLALBRemoteManagement(this);
|
||||
}else {
|
||||
throw new IllegalStateException("Remote Management already enabled!");
|
||||
public void enableWebServer() throws IOException {
|
||||
KLALBControllerConfigItem cci = getControllerConfig();
|
||||
MultiProtocolSocketAddress listen = cci == null || cci.getWebListen() == null
|
||||
? new MultiProtocolSocketAddress("http", "0.0.0.0", 4665) : cci.getWebListen();
|
||||
enableWebServer(listen);
|
||||
}
|
||||
|
||||
public void enableWebServer(int port) throws IOException {
|
||||
enableWebServer(new MultiProtocolSocketAddress("http", "0.0.0.0", port));
|
||||
}
|
||||
|
||||
public void enableWebServer(MultiProtocolSocketAddress listen) throws IOException {
|
||||
if (webServer == null) {
|
||||
webServer = new KLALBWebServer(this, listen);
|
||||
webServer.start();
|
||||
} else {
|
||||
throw new IllegalStateException("Web server already enabled!");
|
||||
}
|
||||
}
|
||||
|
||||
public void enableRemoteManagement(MultiProtocolSocketAddress bind) throws IOException {
|
||||
if(krm==null) {
|
||||
krm=new KLALBRemoteManagement(this,bind);
|
||||
}else {
|
||||
throw new IllegalStateException("Remote Management already enabled!");
|
||||
}
|
||||
|
||||
public boolean isWebServerEnabled() {
|
||||
return webServer != null && webServer.isRunning();
|
||||
}
|
||||
|
||||
public boolean isRemoteManagementEnabled() {
|
||||
return krm!=null;
|
||||
|
||||
public KLALBWebServer getWebServer() {
|
||||
return webServer;
|
||||
}
|
||||
|
||||
public void disableRemoteManagement() {
|
||||
if(krm!=null) {
|
||||
krm.close();
|
||||
krm=null;
|
||||
|
||||
public void disableWebServer() {
|
||||
if (webServer != null) {
|
||||
webServer.stop();
|
||||
webServer = null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -197,30 +234,24 @@ public class KLALBProxySystem {
|
||||
}
|
||||
|
||||
|
||||
public void saveConfigToFile() {
|
||||
if (jsonFile != null && config != null) {
|
||||
String json = gson.toJson(config);
|
||||
try (FileWriter fw = new FileWriter(jsonFile)) {
|
||||
fw.write(json);
|
||||
} catch (IOException e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private KLALBStateGUI3 kgui;
|
||||
public KLALBStateGUI3 getKLALBGUI() {
|
||||
if(kgui==null) {
|
||||
kgui=new KLALBStateGUI3(klalbController);
|
||||
kgui.loadConfig(config);
|
||||
kgui.setSaveComsumer((cfg)->{
|
||||
String json=gson.toJson(cfg);
|
||||
if(jsonFile!=null) {
|
||||
FileWriter fw = null;
|
||||
try {
|
||||
fw=new FileWriter(jsonFile);
|
||||
fw.write(json);
|
||||
}catch(IOException e) {
|
||||
e.printStackTrace();
|
||||
}finally {
|
||||
if(fw!=null)
|
||||
try {
|
||||
fw.close();
|
||||
} catch (IOException e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
saveConfigToFile();
|
||||
});
|
||||
}
|
||||
return kgui;
|
||||
|
||||
@@ -1,174 +0,0 @@
|
||||
package org.kne.cloud.network.klalb;
|
||||
|
||||
import java.io.IOException;
|
||||
import java.net.SocketTimeoutException;
|
||||
import java.nio.charset.Charset;
|
||||
import java.util.Iterator;
|
||||
import java.util.List;
|
||||
|
||||
import org.kne.cloud.network.MultiProtocolSocketAddress;
|
||||
import org.kne.cloud.network.SocketListener;
|
||||
import org.kne.cloud.network.ipv6.IPv6NetworkLink;
|
||||
import org.kne.cloud.network.monitor.LinkStatus;
|
||||
|
||||
import com.google.gson.JsonArray;
|
||||
import com.google.gson.JsonObject;
|
||||
import com.google.gson.JsonParser;
|
||||
import com.google.gson.JsonPrimitive;
|
||||
|
||||
public class KLALBRemoteManagement {
|
||||
SocketListener slr;
|
||||
private KLALBProxySystem klalbProxySystem;
|
||||
public KLALBRemoteManagement(KLALBProxySystem klalbProxySystem) throws IOException {
|
||||
this(klalbProxySystem,new MultiProtocolSocketAddress("127.9.9.9", 49573));
|
||||
}
|
||||
public KLALBRemoteManagement(KLALBProxySystem klalbProxySystem, MultiProtocolSocketAddress listen) throws IOException {
|
||||
this.klalbProxySystem=klalbProxySystem;
|
||||
slr=new SocketListener(listen);
|
||||
slr.setCon((srcv)->{
|
||||
try {
|
||||
srcv.setSoTimeout(10000);
|
||||
byte[]input= srcv.getInputStream().readAllBytes();
|
||||
srcv.shutdownInput();
|
||||
String req=new String(input,Charset.forName("UTF-8"));
|
||||
System.out.println("远程管理请求："+req);
|
||||
String rsp=processSignal(req);
|
||||
System.out.println("远程管理响应："+rsp);
|
||||
srcv.getOutputStream().write(rsp.getBytes(Charset.forName("UTF-8")));
|
||||
srcv.shutdownOutput();
|
||||
} catch (IOException e) {
|
||||
e.printStackTrace();
|
||||
}finally {
|
||||
try {
|
||||
srcv.close();
|
||||
} catch (IOException e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
public KLALBProxySystem getKlalbProxySystem() {
|
||||
return klalbProxySystem;
|
||||
}
|
||||
private String processSignal(String req) {
|
||||
JsonObject jreq= (JsonObject) new JsonParser().parse(req);
|
||||
JsonObject jrsp=new JsonObject();
|
||||
|
||||
|
||||
String reqt=jreq.getAsJsonPrimitive("REQ").getAsString();
|
||||
jrsp.addProperty("RSP", reqt);
|
||||
switch (reqt) {
|
||||
case "GETLINES":
|
||||
JsonArray lines=new JsonArray();
|
||||
List<IPv6NetworkLink>lineslist= klalbProxySystem.getKlalbController().getLines();
|
||||
synchronized (lineslist) {
|
||||
for (Iterator<IPv6NetworkLink> iterator = lineslist.iterator(); iterator.hasNext();) {
|
||||
IPv6NetworkLink link=iterator.next();
|
||||
if(!(link instanceof KLALBRemoteLink)) {
|
||||
continue;
|
||||
}
|
||||
KLALBRemoteLink klalbRemoteLine = (KLALBRemoteLink) link;
|
||||
if(klalbRemoteLine.getSocketAddress()==null)
|
||||
continue;
|
||||
JsonObject jklbrl=new JsonObject();
|
||||
jklbrl.addProperty("ipport", klalbRemoteLine.getSocketAddress().toString());
|
||||
jklbrl.addProperty("state",LinkStatus.stateToString( klalbRemoteLine.getState()));
|
||||
|
||||
jklbrl.addProperty("Vaddr", klalbRemoteLine.getRemoteVaddr().getAddress().toString());
|
||||
|
||||
jklbrl.addProperty("uploadspeed", klalbRemoteLine.getMonitor().getOutSpeed());
|
||||
jklbrl.addProperty("downloadspeed", klalbRemoteLine.getMonitor().getInSpeed());
|
||||
|
||||
jklbrl.addProperty("uploadtraffic", klalbRemoteLine.getMonitor().getOutTraffic());
|
||||
jklbrl.addProperty("downloadtraffic", klalbRemoteLine.getMonitor().getInTraffic());
|
||||
|
||||
jklbrl.addProperty("uploaddelay",klalbRemoteLine.getMonitor().getOutDelay() );
|
||||
jklbrl.addProperty("downloaddelay", klalbRemoteLine.getMonitor().getInDelay());
|
||||
|
||||
jklbrl.addProperty("uploaddelaymin",klalbRemoteLine.getMonitor().getOutDelayMin() );
|
||||
jklbrl.addProperty("downloaddelaymin", klalbRemoteLine.getMonitor().getInDelayMin());
|
||||
lines.add(jklbrl);
|
||||
}
|
||||
}
|
||||
jrsp.add("table", lines);
|
||||
break;
|
||||
case "ADDLINE":
|
||||
String mip=jreq.getAsJsonPrimitive("ipport").getAsString();
|
||||
try {
|
||||
|
||||
jrsp.addProperty ("Vaddr",klalbProxySystem.getKlalbController().getRemoteVaddrBySocketAddress(new MultiProtocolSocketAddress(mip)).getHostAddress());
|
||||
} catch (SocketTimeoutException e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
break;
|
||||
case "GETSELFLINES":
|
||||
JsonArray lines2=new JsonArray();
|
||||
List<MultiProtocolSocketAddress>selflineslist=klalbProxySystem.getKlalbController().getSelflineTable();
|
||||
synchronized (selflineslist) {
|
||||
for (Iterator<MultiProtocolSocketAddress> iterator = selflineslist.iterator(); iterator.hasNext();) {
|
||||
MultiProtocolSocketAddress multiProtocolSocketAddress = (MultiProtocolSocketAddress) iterator.next();
|
||||
lines2.add(new JsonPrimitive(multiProtocolSocketAddress.toString()));
|
||||
}
|
||||
}
|
||||
jrsp.add("table", lines2);
|
||||
|
||||
break;
|
||||
case "ADDSELFLINE":
|
||||
String mips=jreq.getAsJsonPrimitive("ipport").getAsString();
|
||||
List<MultiProtocolSocketAddress>selflineslist2=klalbProxySystem.getKlalbController().getSelflineTable();
|
||||
synchronized (selflineslist2) {
|
||||
selflineslist2.add(new MultiProtocolSocketAddress(mips));
|
||||
}
|
||||
break;
|
||||
case "REMOVESELFLINE":
|
||||
String mipsr=jreq.getAsJsonPrimitive("ipport").getAsString();
|
||||
List<MultiProtocolSocketAddress>selflineslist21=klalbProxySystem.getKlalbController().getSelflineTable();
|
||||
synchronized (selflineslist21) {
|
||||
selflineslist21.add(new MultiProtocolSocketAddress(mipsr));
|
||||
}
|
||||
break;
|
||||
case "GETLINKMONITOR":
|
||||
jrsp.addProperty("uploadspeed", klalbProxySystem.getKlalbController().getLinkMonitor().getOutSpeed());
|
||||
jrsp.addProperty("downloadspeed", klalbProxySystem.getKlalbController().getLinkMonitor().getInSpeed());
|
||||
|
||||
jrsp.addProperty("uploadtraffic", klalbProxySystem.getKlalbController().getLinkMonitor().getOutTraffic());
|
||||
jrsp.addProperty("downloadtraffic", klalbProxySystem.getKlalbController().getLinkMonitor().getInTraffic());
|
||||
|
||||
break;
|
||||
case "OPENMONITORUI":
|
||||
klalbProxySystem.getKLALBGUI().setVisible(true);
|
||||
break;
|
||||
/*case "GETSOCKETBRIDGE":
|
||||
JsonArray bridges=new JsonArray();
|
||||
Set<Proxy> pxy=klalbProxySystem.getProxys();
|
||||
synchronized (pxy) {
|
||||
for (Iterator<Proxy> iterator = pxy.iterator(); iterator.hasNext();) {
|
||||
Proxy proxy = (Proxy) iterator.next();
|
||||
bridges.add(klalbProxySystem.createJsonObjectByProxy(proxy));
|
||||
}
|
||||
}
|
||||
jrsp.add("table", bridges);
|
||||
break;
|
||||
case "ADDSOCKETBRIDGE":
|
||||
JsonObject jpxy= jreq.getAsJsonObject("socketbridge");
|
||||
Set<Proxy> pxy2=klalbProxySystem.getProxys();
|
||||
synchronized (pxy2) {
|
||||
try {
|
||||
pxy2.add(klalbProxySystem.createProxyByJson(jpxy));
|
||||
} catch (IOException e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
break;*/
|
||||
default:
|
||||
System.out.println("未知请求类型："+reqt);
|
||||
break;
|
||||
}
|
||||
|
||||
return jrsp.toString();
|
||||
}
|
||||
public void close() {
|
||||
slr.close();
|
||||
}
|
||||
}
|
||||
@@ -51,6 +51,27 @@ public class KLALBUtils {
|
||||
v[3] = 0x01;
|
||||
return IPv6Address.valueOf(v);
|
||||
}
|
||||
|
||||
public static String parseCidr(String cidr) {
|
||||
int idx = cidr.indexOf('/');
|
||||
if (idx <= 0 || idx == cidr.length() - 1)
|
||||
throw new IllegalArgumentException("not a cidr: " + cidr);
|
||||
int prefix;
|
||||
try {
|
||||
prefix = Integer.parseInt(cidr.substring(idx + 1));
|
||||
} catch (NumberFormatException e) {
|
||||
throw new IllegalArgumentException("bad prefix: " + cidr);
|
||||
}
|
||||
try {
|
||||
InetAddress addr = InetAddress.getByName(cidr.substring(0, idx));
|
||||
int max = (addr instanceof Inet6Address) ? 128 : 32;
|
||||
if (prefix < 0 || prefix > max)
|
||||
throw new IllegalArgumentException("prefix out of range: " + cidr);
|
||||
return addr.getHostAddress() + "/" + prefix;
|
||||
} catch (UnknownHostException e) {
|
||||
throw new IllegalArgumentException("bad address: " + cidr);
|
||||
}
|
||||
}
|
||||
public static void main(String[] args) {
|
||||
System.out.println(uuidToIP(new UUID(-1,-1)));
|
||||
}
|
||||
|
||||
@@ -346,7 +346,16 @@ public class GraphPanel extends JPanel {
|
||||
g.setFont(UIEnv.getFont().deriveFont(10.0f));
|
||||
|
||||
//g.drawString(text, (int)(x+nodesize/2), (int)(y-nodesize/3));
|
||||
g.drawString(text, (int)(x-image.getWidth(null)/2-10), (int)(y+image.getHeight(null)/2+10));
|
||||
int imgw=(image!=null)?image.getWidth(null):(int)nodesize;
|
||||
int imgh=(image!=null)?image.getHeight(null):(int)nodesize;
|
||||
java.awt.FontMetrics fm=g.getFontMetrics();
|
||||
int lineHeight=fm.getHeight()+2;
|
||||
int textx=(int)(x-imgw/2-10);
|
||||
int texty=(int)(y+imgh/2+10)+fm.getAscent();
|
||||
String[] lines=text.split("\n");
|
||||
for (int i = 0; i < lines.length; i++) {
|
||||
g.drawString(lines[i], textx, texty+i*lineHeight);
|
||||
}
|
||||
}
|
||||
|
||||
public Vector2 getPositionVec2() {
|
||||
|
||||
@@ -75,11 +75,17 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
private JTextField addressField; // 地址显示框
|
||||
private JTextField addressFieldSet; // 地址设置框
|
||||
private JTextField asnFieldSet; // ASN设置框
|
||||
private JCheckBox enableTUN; // 虚拟网卡启用禁用
|
||||
private JTextField tunDeviceName; // 虚拟网卡名称设置框
|
||||
private JTextField webListenSet; // Web API 监听地址设置框
|
||||
private NetworkGraphPanel graph; // 网络图面板
|
||||
private JTextField textFieldLocate; // 定位地址输入框
|
||||
private JTextField asnField2; // ASN显示框
|
||||
private JTextArea dnsAreaSet; // DNS服务器设置区域
|
||||
private JTextArea extraRoutesSet; // 额外路由设置区域
|
||||
private JTextField deviceNameSet; // 设备名称设置框
|
||||
private JTextArea deviceDescriptionSet; // 设备描述设置区域
|
||||
private KLALBController kcontroller; // 关联的控制器
|
||||
private JComboBox<PerformanceStrategyItem> comboPerformance; // 性能策略选择框
|
||||
private JComboBox comboCongestion; // 拥塞控制算法选择框
|
||||
private JTextField tcpListeningSet; // TCP监听设置
|
||||
@@ -92,6 +98,7 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
private JTextArea ntpServerSet; // NTP服务器设置区域
|
||||
private JCheckBox denyBroadcast;
|
||||
private JCheckBox denyQuery;
|
||||
private JCheckBox webApiEnabled; // 启用 Web API 开关
|
||||
private ClosableTabbedPane tabbedPane; // 可关闭的标签页面板
|
||||
private JCheckBox nogui;
|
||||
|
||||
@@ -138,6 +145,7 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
* 初始化UI界面
|
||||
*/
|
||||
private void initUI(KLALBController kc, String title) {
|
||||
kcontroller = kc;
|
||||
// 设置窗口基本属性
|
||||
setIconImage(UIEnv.getIcon());
|
||||
setTitleColor(UIEnv.getDefaultTitleColor());
|
||||
@@ -785,18 +793,42 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
addressFieldSet = addr6.getTextField();
|
||||
settings.getView().add(addr6);
|
||||
|
||||
// 设备名称设置
|
||||
TextSettingItem deviceName = new TextSettingItem(UIEnv.getRsb().getString("devicename"),
|
||||
CONST.itemwidth, CONST.settingheight);
|
||||
deviceNameSet = deviceName.getTextField();
|
||||
settings.getView().add(deviceName);
|
||||
|
||||
// 设备描述设置
|
||||
TextAreaSettingItem deviceDescription = new TextAreaSettingItem(UIEnv.getRsb().getString("devicedescription"),
|
||||
CONST.itemwidth, CONST.settingheight * 5);
|
||||
deviceDescriptionSet = deviceDescription.getTextArea();
|
||||
settings.getView().add(deviceDescription);
|
||||
|
||||
// DNS服务器设置
|
||||
TextAreaSettingItem dns = new TextAreaSettingItem(UIEnv.getRsb().getString("dnsserver"),
|
||||
CONST.itemwidth, CONST.settingheight * 5);
|
||||
dnsAreaSet = dns.getTextArea();
|
||||
settings.getView().add(dns);
|
||||
|
||||
// 额外路由设置
|
||||
TextAreaSettingItem extraRoutes = new TextAreaSettingItem(UIEnv.getRsb().getString("extraroutes"),
|
||||
CONST.itemwidth, CONST.settingheight * 5);
|
||||
extraRoutesSet = extraRoutes.getTextArea();
|
||||
settings.getView().add(extraRoutes);
|
||||
|
||||
// ASN设置
|
||||
TextSettingItem asn = new TextSettingItem(UIEnv.getRsb().getString("asnumber"),
|
||||
CONST.itemwidth, CONST.settingheight);
|
||||
asnFieldSet = asn.getTextField();
|
||||
settings.getView().add(asn);
|
||||
|
||||
//虚拟网卡
|
||||
CheckBoxSettingItem enableTUNs = new CheckBoxSettingItem(UIEnv.getRsb().getString("enabletun"),
|
||||
CONST.itemwidth, CONST.settingheight);
|
||||
enableTUN=enableTUNs.getCheckBox();
|
||||
settings.getView().add(enableTUNs);
|
||||
|
||||
TextSettingItem tunName = new TextSettingItem(UIEnv.getRsb().getString("tunname"),
|
||||
CONST.itemwidth, CONST.settingheight);
|
||||
tunDeviceName = tunName.getTextField();
|
||||
@@ -881,7 +913,22 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
CONST.itemwidth, CONST.settingheight);
|
||||
denyBroadcast=denyBroadcastc.getCheckBox();
|
||||
settings.getView().add(denyBroadcastc);
|
||||
|
||||
|
||||
// Web服务设置标题
|
||||
SettingItem wsi = new SettingItem(UIEnv.getRsb().getString("webapisettings"),
|
||||
UIEnv.getFont().deriveFont(20.0f).deriveFont(Font.BOLD), CONST.itemwidth, CONST.settingheight);
|
||||
settings.getView().add(wsi);
|
||||
|
||||
CheckBoxSettingItem webApic = new CheckBoxSettingItem(UIEnv.getRsb().getString("enablewebapi"),
|
||||
CONST.itemwidth, CONST.settingheight);
|
||||
webApiEnabled=webApic.getCheckBox();
|
||||
settings.getView().add(webApic);
|
||||
|
||||
TextSettingItem webListen = new TextSettingItem(UIEnv.getRsb().getString("weblistenaddr"),
|
||||
CONST.itemwidth, CONST.settingheight);
|
||||
webListenSet = webListen.getTextField();
|
||||
settings.getView().add(webListen);
|
||||
|
||||
//性能设置标题
|
||||
|
||||
SettingItem pshi = new SettingItem(UIEnv.getRsb().getString("performancesettings"),
|
||||
@@ -1022,6 +1069,26 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
|
||||
kck.setNogui(nogui.isSelected());
|
||||
|
||||
// 保存设备名称
|
||||
String dnametext = deviceNameSet.getText().trim();
|
||||
if (dnametext.equals("")) {
|
||||
kck.setDeviceName(null);
|
||||
} else {
|
||||
kck.setDeviceName(dnametext);
|
||||
}
|
||||
if (kcontroller != null && kcontroller.getIpv6Router() != null) {
|
||||
kcontroller.getIpv6Router().setDeviceName(kck.getDeviceName());
|
||||
}
|
||||
|
||||
// 保存设备描述
|
||||
String ddesctext = deviceDescriptionSet.getText().trim();
|
||||
if (ddesctext.equals("")) {
|
||||
kck.setDeviceDescription(null);
|
||||
} else {
|
||||
kck.setDeviceDescription(ddesctext);
|
||||
}
|
||||
|
||||
|
||||
// 保存IPv6地址
|
||||
String ttext = addressFieldSet.getText().trim();
|
||||
if (ttext.equals("")) {
|
||||
@@ -1058,6 +1125,24 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
}
|
||||
kck.setDNS(iaddr);
|
||||
|
||||
// 保存额外路由列表
|
||||
String[] spltEr = extraRoutesSet.getText().split("\n");
|
||||
List<String> eroutes = new ArrayList<>();
|
||||
for (String str : spltEr) {
|
||||
str = str.trim();
|
||||
if (!str.isEmpty()) {
|
||||
try {
|
||||
eroutes.add(KLALBUtils.parseCidr(str));
|
||||
} catch (RuntimeException e) {
|
||||
e.printStackTrace();
|
||||
JOptionPane.showMessageDialog(this, UIEnv.getRsb().getString("invaildextraroutes"),
|
||||
UIEnv.getRsb().getString("warning"), JOptionPane.WARNING_MESSAGE);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
kck.setExtraRoutes(eroutes);
|
||||
|
||||
// 保存ASN
|
||||
String asntext = asnFieldSet.getText();
|
||||
if (asntext.equals("")) {
|
||||
@@ -1073,12 +1158,30 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
}
|
||||
}
|
||||
|
||||
String tunNameText=tunDeviceName.getText();
|
||||
if(tunNameText.equals("")) {
|
||||
kck.setEnableTUN( enableTUN.isSelected());
|
||||
|
||||
String tunNameText=tunDeviceName.getText().trim();
|
||||
if(tunNameText.equals("") || tunNameText.equalsIgnoreCase("null")) {
|
||||
kck.setTUNName(null);
|
||||
}else {
|
||||
kck.setTUNName(tunNameText);
|
||||
}
|
||||
|
||||
// 保存Web API设置
|
||||
kck.setWebUI(webApiEnabled.isSelected());
|
||||
String webListenText = webListenSet.getText().trim();
|
||||
if (webListenText.equals("")) {
|
||||
kck.setWebListen(new MultiProtocolSocketAddress("http", "0.0.0.0", 4665));
|
||||
} else {
|
||||
try {
|
||||
kck.setWebListen(new MultiProtocolSocketAddress(webListenText));
|
||||
} catch (RuntimeException e) {
|
||||
e.printStackTrace();
|
||||
JOptionPane.showMessageDialog(this, UIEnv.getRsb().getString("invaildweblistenaddr"),
|
||||
UIEnv.getRsb().getString("warning"), JOptionPane.WARNING_MESSAGE);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 保存TCP监听设置
|
||||
String tcptext = tcpListeningSet.getText();
|
||||
@@ -1129,7 +1232,7 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
}
|
||||
}
|
||||
}
|
||||
kck.setLineTable(iaddr1);
|
||||
kck.setExternalEndpoints(iaddr1);
|
||||
|
||||
// 保存自动连接线路表
|
||||
String[] splt11 = connectLineTabelSet.getText().split("\n");
|
||||
@@ -1182,9 +1285,9 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
|
||||
kck.setLinkConnectionsCount(linkConnectionsCount.getSlider().getValue());
|
||||
|
||||
kck.setDenyLineTableQuery(denyQuery.isSelected());
|
||||
|
||||
kck.setDenyLineTableBroadcast(denyBroadcast.isSelected());
|
||||
kck.setDenyExternalEndpointQuery(denyQuery.isSelected());
|
||||
|
||||
kck.setDenyExternalEndpointBroadcast(denyBroadcast.isSelected());
|
||||
|
||||
PerformanceStrategyItem psi=((PerformanceStrategyItem)comboPerformance.getSelectedItem());
|
||||
if(psi!=null) {
|
||||
@@ -1453,6 +1556,14 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
|
||||
nogui.setSelected( kck.isNogui());
|
||||
|
||||
// 加载设备名称
|
||||
String dname = kck.getDeviceName();
|
||||
deviceNameSet.setText(dname != null ? dname : "");
|
||||
|
||||
// 加载设备描述
|
||||
String ddesc = kck.getDeviceDescription();
|
||||
deviceDescriptionSet.setText(ddesc != null ? ddesc : "");
|
||||
|
||||
// 加载IPv6地址
|
||||
String vaddr = kck.getVirtualAddress();
|
||||
addressFieldSet.setText(vaddr != null ? vaddr : "");
|
||||
@@ -1461,12 +1572,26 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
List<InetAddress> dns = kck.getDNS();
|
||||
dnsAreaSet.setText(listToStr(dns));
|
||||
|
||||
// 加载额外路由
|
||||
List<String> ers = kck.getExtraRoutes();
|
||||
extraRoutesSet.setText(listToStr2(ers));
|
||||
|
||||
// 加载ASN
|
||||
Long vasn = kck.getVirtualASN();
|
||||
asnFieldSet.setText(vasn != null ? vasn.toString() : "");
|
||||
|
||||
enableTUN.setSelected(kck.isEnableTUN());
|
||||
|
||||
|
||||
String tunname=kck.getTUNName();
|
||||
tunDeviceName.setText(tunname!=null?tunname:"");
|
||||
|
||||
|
||||
|
||||
// 加载Web API设置
|
||||
webApiEnabled.setSelected(kck.isWebUI());
|
||||
webListenSet.setText(kck.getWebListen() != null ? kck.getWebListen().toString()
|
||||
: "http://0.0.0.0:4665");
|
||||
|
||||
// 加载TCP监听
|
||||
MultiProtocolSocketAddress mpat = kck.getTCPListen();
|
||||
@@ -1477,7 +1602,7 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
udpListeningSet.setText(mpau != null ? mpau.toString() : "");
|
||||
|
||||
// 加载开放线路表
|
||||
List<MultiProtocolSocketAddress> linet = kck.getLineTable();
|
||||
List<MultiProtocolSocketAddress> linet = kck.getExternalEndpoints();
|
||||
openLineTabelSet.setText(listToStr2(linet));
|
||||
|
||||
// 加载自动连接线路表
|
||||
@@ -1506,9 +1631,9 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
}
|
||||
linkConnectionsCount.getSlider().setValue(conc);
|
||||
|
||||
denyQuery.setSelected( kck.isDenyLineTableQuery());
|
||||
denyQuery.setSelected( kck.isDenyExternalEndpointQuery());
|
||||
|
||||
denyBroadcast.setSelected( kck.isDenyLineTableBroadcast());
|
||||
denyBroadcast.setSelected( kck.isDenyExternalEndpointBroadcast());
|
||||
|
||||
String stategy= kck.getPerformanceStrategy();
|
||||
PerformanceStrategy pfs=PerformanceStrategy.fromDescription(stategy);
|
||||
@@ -1654,4 +1779,4 @@ public class KLALBStateGUI3 extends XFrame {
|
||||
KLALBStateGUI3 kcg = new KLALBStateGUI3(new KLALBController());
|
||||
kcg.setVisible(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,7 +47,7 @@ public class NetworkGraphPanel extends GraphPanel {
|
||||
}
|
||||
|
||||
public InetGraphNode(IPv6Address address, Color color, double x, double y, boolean ismarked) {
|
||||
super(getText(address), color, x, y, ismarked);
|
||||
super(getNodeText(address), color, x, y, ismarked);
|
||||
this.address=address;
|
||||
initign();
|
||||
}
|
||||
@@ -137,18 +137,34 @@ public class NetworkGraphPanel extends GraphPanel {
|
||||
return address2.toCompressedString();
|
||||
}
|
||||
|
||||
public void updateLabel() {
|
||||
setText(getNodeText(address));
|
||||
}
|
||||
|
||||
public IPv6Address getAddress() {
|
||||
return address;
|
||||
}
|
||||
|
||||
public void setAddress(IPv6Address address) {
|
||||
this.address = address;
|
||||
super.setText(getText(address));
|
||||
super.setText(getNodeText(address));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private double nsPerPixel=1000L;
|
||||
/**
|
||||
* 节点标签：显示广播得知的设备名称（若有）+IP地址
|
||||
*/
|
||||
private String getNodeText(IPv6Address address) {
|
||||
StringBuilder sb=new StringBuilder();
|
||||
String dname=controller.getIpv6Router().getKlalbRouteProtol().getDeviceName(address);
|
||||
if(dname!=null)
|
||||
sb.append(dname).append('\n');
|
||||
sb.append(InetGraphNode.getText(address));
|
||||
return sb.toString();
|
||||
}
|
||||
|
||||
private double nsPerPixel=5000L;
|
||||
private class InetGraphEdgeGroup extends GraphEdgeGroup{
|
||||
public InetGraphEdgeGroup(GraphNode nodeA, GraphNode nodeB) {
|
||||
super(nodeA, nodeB);
|
||||
@@ -178,6 +194,8 @@ public class NetworkGraphPanel extends GraphPanel {
|
||||
IPv6Address inet6Address = (IPv6Address) iterator.next();
|
||||
if(!addr.containsKey(inet6Address)) {
|
||||
iterator.remove();
|
||||
}else {
|
||||
((InetGraphNode)getNodes().get(inet6Address)).updateLabel();
|
||||
}
|
||||
}
|
||||
//System.out.println("------------------------------------");
|
||||
|
||||
@@ -10,10 +10,12 @@ import java.util.List;
|
||||
|
||||
import javax.swing.Icon;
|
||||
import javax.swing.ImageIcon;
|
||||
import javax.swing.BorderFactory;
|
||||
import javax.swing.JButton;
|
||||
import javax.swing.JPanel;
|
||||
import javax.swing.JPopupMenu;
|
||||
import javax.swing.JScrollPane;
|
||||
import javax.swing.JTextArea;
|
||||
import javax.swing.ListSelectionModel;
|
||||
import javax.swing.event.ListSelectionEvent;
|
||||
import javax.swing.event.ListSelectionListener;
|
||||
@@ -65,6 +67,23 @@ public class NodeInformationPanel extends JPanel {
|
||||
panel.setLayout(new BorderLayout(0, 0));
|
||||
tabbedPane.addTab(UIEnv.getRsb().getString("overview"), null, panel, null);
|
||||
|
||||
JTextArea overviewArea = new JTextArea();
|
||||
overviewArea.setEditable(false);
|
||||
overviewArea.setLineWrap(true);
|
||||
overviewArea.setWrapStyleWord(true);
|
||||
overviewArea.setFont(UIEnv.getFont().deriveFont(14.0f));
|
||||
overviewArea.setBorder(BorderFactory.createEmptyBorder(8, 8, 8, 8));
|
||||
String dname=controller.getIpv6Router().getKlalbRouteProtol().getDeviceName(address);
|
||||
String ddesc=null;
|
||||
if(address.equals(controller.getIpv6Router().getLocator().getAddress())&&controller.getConfigItem()!=null) {
|
||||
ddesc=controller.getConfigItem().getDeviceDescription();
|
||||
if(ddesc!=null&&ddesc.isEmpty()) {
|
||||
ddesc=null;
|
||||
}
|
||||
}
|
||||
overviewArea.setText(buildOverviewText(dname, ddesc));
|
||||
panel.add(new JScrollPane(overviewArea), BorderLayout.CENTER);
|
||||
|
||||
JPanel panel_1 = new JPanel();
|
||||
panel_1.setLayout(new BorderLayout(0, 0));
|
||||
panel_1.add(scrollPane);
|
||||
@@ -146,16 +165,38 @@ public class NodeInformationPanel extends JPanel {
|
||||
|
||||
client=new KLALBRoutingProtocolAPIClient(controller.getIpv6Router().getKlalbRouteProtol());
|
||||
try {
|
||||
client.requestOpenLines(new InetSocketAddress( address.toInet6Address(), KLALBRoutingProtocol.DEFAULT_PORT), (result)->{
|
||||
client.requestNodeInfoFull(new InetSocketAddress( address.toInet6Address(), KLALBRoutingProtocol.DEFAULT_PORT), (info)->{
|
||||
listModel.clear();
|
||||
for (MultiProtocolSocketAddress multiProtocolSocketAddress : result) {
|
||||
for (MultiProtocolSocketAddress multiProtocolSocketAddress : info.getOpenLines()) {
|
||||
listModel.addElement(multiProtocolSocketAddress);
|
||||
}
|
||||
// 用对端返回的设备名称/描述更新概览（旧版本节点无该字段时保留原显示）
|
||||
String dn=info.getDeviceName();
|
||||
if(dn==null||dn.isEmpty()) {
|
||||
dn=controller.getIpv6Router().getKlalbRouteProtol().getDeviceName(address);
|
||||
}
|
||||
String dd=info.getDeviceDescription();
|
||||
if(dd!=null&&dd.isEmpty()) {
|
||||
dd=null;
|
||||
}
|
||||
overviewArea.setText(buildOverviewText(dn, dd));
|
||||
});
|
||||
} catch (IOException e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
|
||||
private String buildOverviewText(String dname,String ddesc) {
|
||||
StringBuilder sb=new StringBuilder();
|
||||
sb.append(UIEnv.getRsb().getString("ipv6addr")).append(": ").append(address.toCompressedString()).append('\n');
|
||||
if(dname!=null&&!dname.isEmpty()) {
|
||||
sb.append('\n').append(UIEnv.getRsb().getString("devicename")).append(": ").append(dname).append('\n');
|
||||
}
|
||||
if(ddesc!=null&&!ddesc.isEmpty()) {
|
||||
sb.append('\n').append(UIEnv.getRsb().getString("devicedescription")).append(":\n").append(ddesc).append('\n');
|
||||
}
|
||||
return sb.toString();
|
||||
}
|
||||
public Icon getIcon() {
|
||||
return new ImageIcon(image);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,986 @@
|
||||
package org.kne.cloud.network.klalb.web;
|
||||
|
||||
import java.io.*;
|
||||
import java.net.*;
|
||||
import java.nio.charset.StandardCharsets;
|
||||
import java.nio.file.*;
|
||||
import java.util.*;
|
||||
import java.util.concurrent.*;
|
||||
import java.util.concurrent.atomic.AtomicBoolean;
|
||||
|
||||
import com.sun.net.httpserver.*;
|
||||
import com.google.gson.*;
|
||||
|
||||
import org.kne.cloud.clock.HighAccuracyClock;
|
||||
import org.kne.cloud.network.MultiProtocolSocketAddress;
|
||||
import org.kne.cloud.network.ipv6.IPv6Address;
|
||||
import org.kne.cloud.network.ipv6.IPv6AddressGroup;
|
||||
import org.kne.cloud.network.ipv6.IPv6NetworkLink;
|
||||
import org.kne.cloud.network.ipv6.RouteItem;
|
||||
import org.kne.cloud.network.klalb.*;
|
||||
import org.kne.cloud.network.monitor.LinkStatus;
|
||||
import org.kne.cloud.network.srv6.KLALBNodeInformation;
|
||||
import org.kne.cloud.network.srv6.KLALBRoutingProtocol;
|
||||
import org.kne.cloud.network.srv6.KLALBRoutingProtocol.LinkDirection;
|
||||
import org.kne.cloud.network.srv6.KLALBRoutingProtocolAPIClient;
|
||||
import org.kne.cloud.network.srv6.NeighborInfo;
|
||||
import org.kne.cloud.network.srv6.RouterInfo;
|
||||
import org.kne.cloud.network.srv6.SRv6Router;
|
||||
|
||||
/**
|
||||
* KLALB Web Server providing REST API, SSE live event stream,
|
||||
* and static dashboard hosting.
|
||||
*/
|
||||
public class KLALBWebServer {
|
||||
private final KLALBProxySystem proxySystem;
|
||||
private final MultiProtocolSocketAddress listen;
|
||||
private HttpServer server;
|
||||
private final Gson gson;
|
||||
private final ScheduledExecutorService sseExecutor = Executors.newSingleThreadScheduledExecutor(r -> {
|
||||
Thread t = new Thread(r, "KLALB-Web-SSE");
|
||||
t.setDaemon(true);
|
||||
return t;
|
||||
});
|
||||
private final Set<HttpExchange> sseClients = Collections.newSetFromMap(new ConcurrentHashMap<>());
|
||||
private final AtomicBoolean running = new AtomicBoolean(false);
|
||||
|
||||
public KLALBWebServer(KLALBProxySystem proxySystem, int port) {
|
||||
this(proxySystem, new MultiProtocolSocketAddress("http", "0.0.0.0", port));
|
||||
}
|
||||
|
||||
public KLALBWebServer(KLALBProxySystem proxySystem, MultiProtocolSocketAddress listen) {
|
||||
this.proxySystem = proxySystem;
|
||||
this.listen = listen;
|
||||
this.gson = proxySystem.getGson();
|
||||
}
|
||||
|
||||
public synchronized void start() throws IOException {
|
||||
if (running.get()) return;
|
||||
|
||||
InetSocketAddress socketAddress = "0.0.0.0".equals(listen.getHost())
|
||||
? new InetSocketAddress(listen.getPort()) : listen.getSocketAddress();
|
||||
server = HttpServer.create(socketAddress, 0);
|
||||
server.setExecutor(Executors.newVirtualThreadPerTaskExecutor());
|
||||
|
||||
// API Contexts
|
||||
server.createContext("/api/status", this::handleStatus);
|
||||
server.createContext("/api/events", this::handleEvents);
|
||||
server.createContext("/api/links", this::handleLinks);
|
||||
server.createContext("/api/links/action", this::handleLinkAction);
|
||||
server.createContext("/api/links/reconnect", this::handleReconnectAll);
|
||||
server.createContext("/api/routing-table", this::handleRoutingTable);
|
||||
server.createContext("/api/nodes", this::handleNodes);
|
||||
server.createContext("/api/node-info", this::handleNodeInfo);
|
||||
server.createContext("/api/config", this::handleConfig);
|
||||
|
||||
// Static Files / SPA Fallback Handler
|
||||
server.createContext("/", this::handleStatic);
|
||||
|
||||
server.start();
|
||||
running.set(true);
|
||||
startSseBroadcaster();
|
||||
|
||||
System.out.println("KLALB Web Dashboard started at " + listen);
|
||||
}
|
||||
|
||||
public synchronized void stop() {
|
||||
if (!running.get()) return;
|
||||
running.set(false);
|
||||
sseExecutor.shutdownNow();
|
||||
for (HttpExchange client : sseClients) {
|
||||
try {
|
||||
client.close();
|
||||
} catch (Exception ignored) {}
|
||||
}
|
||||
sseClients.clear();
|
||||
if (server != null) {
|
||||
server.stop(1);
|
||||
server = null;
|
||||
}
|
||||
System.out.println("KLALB Web Dashboard stopped.");
|
||||
}
|
||||
|
||||
public boolean isRunning() {
|
||||
return running.get();
|
||||
}
|
||||
|
||||
public int getPort() {
|
||||
return listen.getPort();
|
||||
}
|
||||
|
||||
private void setCorsHeaders(HttpExchange exchange) {
|
||||
Headers headers = exchange.getResponseHeaders();
|
||||
headers.set("Access-Control-Allow-Origin", "*");
|
||||
headers.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
|
||||
headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization, Accept");
|
||||
}
|
||||
|
||||
private boolean handleCorsPreflight(HttpExchange exchange) throws IOException {
|
||||
setCorsHeaders(exchange);
|
||||
if ("OPTIONS".equalsIgnoreCase(exchange.getRequestMethod())) {
|
||||
exchange.sendResponseHeaders(204, -1);
|
||||
exchange.close();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private void sendJsonResponse(HttpExchange exchange, int statusCode, Object data) throws IOException {
|
||||
setCorsHeaders(exchange);
|
||||
String json;
|
||||
if (data instanceof JsonElement) {
|
||||
// gson-2.1 的 toJson(Object) 会按运行时类型 JsonObject 反射序列化出内部的 members 字段，
|
||||
// 必须走 JsonElement 重载（或 toString）直接输出 JSON 树
|
||||
json = ((JsonElement) data).toString();
|
||||
} else {
|
||||
json = gson.toJson(data);
|
||||
}
|
||||
byte[] bytes = json.getBytes(StandardCharsets.UTF_8);
|
||||
exchange.getResponseHeaders().set("Content-Type", "application/json; charset=utf-8");
|
||||
exchange.sendResponseHeaders(statusCode, bytes.length);
|
||||
try (OutputStream os = exchange.getResponseBody()) {
|
||||
os.write(bytes);
|
||||
}
|
||||
}
|
||||
|
||||
private void sendError(HttpExchange exchange, int statusCode, String message) throws IOException {
|
||||
JsonObject error = new JsonObject();
|
||||
error.addProperty("error", message);
|
||||
sendJsonResponse(exchange, statusCode, error);
|
||||
}
|
||||
|
||||
private String readRequestBody(HttpExchange exchange) throws IOException {
|
||||
try (InputStream is = exchange.getRequestBody()) {
|
||||
return new String(is.readAllBytes(), StandardCharsets.UTF_8);
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// API Handlers
|
||||
// -------------------------------------------------------------
|
||||
|
||||
private JsonObject getStatusJson() {
|
||||
JsonObject root = new JsonObject();
|
||||
KLALBController kc = proxySystem.getKlalbController();
|
||||
if (kc == null) {
|
||||
root.addProperty("status", "not_ready");
|
||||
return root;
|
||||
}
|
||||
|
||||
root.addProperty("version", CONST.klalbver);
|
||||
root.addProperty("title", CONST.klalb);
|
||||
|
||||
IPv6AddressGroup self = kc.getSelf();
|
||||
root.addProperty("address", self != null ? self.getAddress().toString() : "");
|
||||
|
||||
SRv6Router router = kc.getIpv6Router();
|
||||
if (router != null && router.getKlalbRouteProtol() != null) {
|
||||
root.addProperty("onlineDevices", router.getKlalbRouteProtol().getDevicesFound());
|
||||
root.addProperty("deviceName", router.getDeviceName() != null ? router.getDeviceName() : "");
|
||||
} else {
|
||||
root.addProperty("onlineDevices", 0);
|
||||
root.addProperty("deviceName", "");
|
||||
}
|
||||
|
||||
KLALBControllerConfigItem configItem = proxySystem.getControllerConfig();
|
||||
if (configItem != null) {
|
||||
root.addProperty("deviceDescription", configItem.getDeviceDescription() != null ? configItem.getDeviceDescription() : "");
|
||||
root.addProperty("enableTUN", configItem.isEnableTUN());
|
||||
root.addProperty("tunName", configItem.isEnableTUN() && configItem.getTUNName() != null ? configItem.getTUNName() : "");
|
||||
root.addProperty("congestionAlgorithm", configItem.getCongestionAlgorithm() != null ? configItem.getCongestionAlgorithm() : "");
|
||||
root.addProperty("performanceStrategy", configItem.getPerformanceStrategy() != null ? configItem.getPerformanceStrategy() : "");
|
||||
}
|
||||
|
||||
// Clock
|
||||
HighAccuracyClock hac = kc.getClock();
|
||||
if (hac != null) {
|
||||
long delta = hac.getFrequency() - 1000000000;
|
||||
double ppm = delta / 1000.0;
|
||||
root.addProperty("timeStr", hac.toString2());
|
||||
root.addProperty("timePpm", ppm);
|
||||
}
|
||||
|
||||
// Metrics
|
||||
JsonObject metrics = new JsonObject();
|
||||
if (kc.getLinkMonitor() != null) {
|
||||
metrics.addProperty("upSpeed", kc.getLinkMonitor().getOutSpeed());
|
||||
metrics.addProperty("downSpeed", kc.getLinkMonitor().getInSpeed());
|
||||
metrics.addProperty("upSpeedMax", kc.getLinkMonitor().getOutSpeedMax());
|
||||
metrics.addProperty("downSpeedMax", kc.getLinkMonitor().getInSpeedMax());
|
||||
metrics.addProperty("upPPS", kc.getLinkMonitor().getOutPPS());
|
||||
metrics.addProperty("downPPS", kc.getLinkMonitor().getInPPS());
|
||||
metrics.addProperty("upPPSMax", kc.getLinkMonitor().getOutPPSMax());
|
||||
metrics.addProperty("downPPSMax", kc.getLinkMonitor().getInPPSMax());
|
||||
metrics.addProperty("upTraffic", kc.getLinkMonitor().getOutTraffic());
|
||||
metrics.addProperty("downTraffic", kc.getLinkMonitor().getInTraffic());
|
||||
}
|
||||
|
||||
if (kc.getDatatMonitor() != null) {
|
||||
metrics.addProperty("dataUpSpeed", kc.getDatatMonitor().getOutSpeed());
|
||||
metrics.addProperty("dataDownSpeed", kc.getDatatMonitor().getInSpeed());
|
||||
metrics.addProperty("dataUpPPS", kc.getDatatMonitor().getOutPPS());
|
||||
metrics.addProperty("dataDownPPS", kc.getDatatMonitor().getInPPS());
|
||||
metrics.addProperty("dataUpTraffic", kc.getDatatMonitor().getOutTraffic());
|
||||
metrics.addProperty("dataDownTraffic", kc.getDatatMonitor().getInTraffic());
|
||||
}
|
||||
|
||||
if (router != null) {
|
||||
metrics.addProperty("backplaneDelay", router.getBackplaneTime());
|
||||
metrics.addProperty("backplanePPS", router.getBackplanePPS());
|
||||
metrics.addProperty("backplanePPSMax", router.getBackplanePPSMax());
|
||||
metrics.addProperty("backplaneECNRate", router.getECNRate());
|
||||
metrics.addProperty("backplaneLossRate", router.getLossRate());
|
||||
}
|
||||
root.add("metrics", metrics);
|
||||
|
||||
return root;
|
||||
}
|
||||
|
||||
private void handleStatus(HttpExchange exchange) throws IOException {
|
||||
if (handleCorsPreflight(exchange)) return;
|
||||
if (!"GET".equalsIgnoreCase(exchange.getRequestMethod())) {
|
||||
sendError(exchange, 405, "Method not allowed");
|
||||
return;
|
||||
}
|
||||
sendJsonResponse(exchange, 200, getStatusJson());
|
||||
}
|
||||
|
||||
private JsonArray getLinksJson() {
|
||||
JsonArray array = new JsonArray();
|
||||
KLALBController kc = proxySystem.getKlalbController();
|
||||
if (kc == null) return array;
|
||||
|
||||
List<IPv6NetworkLink> linesList = kc.getLines();
|
||||
synchronized (linesList) {
|
||||
for (IPv6NetworkLink link : linesList) {
|
||||
if (!(link instanceof KLALBRemoteLink)) continue;
|
||||
KLALBRemoteLink remoteLink = (KLALBRemoteLink) link;
|
||||
|
||||
JsonObject obj = new JsonObject();
|
||||
obj.addProperty("name", remoteLink.getName());
|
||||
obj.addProperty("state", LinkStatus.stateToString(remoteLink.getState()));
|
||||
obj.addProperty("stateCode", remoteLink.getState());
|
||||
|
||||
MultiProtocolSocketAddress mpsa = remoteLink.getSocketAddress();
|
||||
obj.addProperty("socketAddress", mpsa != null ? mpsa.toString() : "");
|
||||
|
||||
IPv6AddressGroup vaddr = remoteLink.getRemoteVaddr();
|
||||
obj.addProperty("vaddr", vaddr != null ? vaddr.getAddress().toString() : "");
|
||||
|
||||
if (remoteLink.getMonitor() != null) {
|
||||
obj.addProperty("upSpeed", remoteLink.getMonitor().getOutSpeed());
|
||||
obj.addProperty("downSpeed", remoteLink.getMonitor().getInSpeed());
|
||||
obj.addProperty("upPPS", remoteLink.getMonitor().getOutPPS());
|
||||
obj.addProperty("downPPS", remoteLink.getMonitor().getInPPS());
|
||||
obj.addProperty("upTraffic", remoteLink.getMonitor().getOutTraffic());
|
||||
obj.addProperty("downTraffic", remoteLink.getMonitor().getInTraffic());
|
||||
obj.addProperty("upDelay", remoteLink.getMonitor().getOutDelay());
|
||||
obj.addProperty("downDelay", remoteLink.getMonitor().getInDelay());
|
||||
obj.addProperty("upDelayMin", remoteLink.getMonitor().getOutDelayMin());
|
||||
obj.addProperty("downDelayMin", remoteLink.getMonitor().getInDelayMin());
|
||||
obj.addProperty("upJitter", remoteLink.getMonitor().getOutJitter());
|
||||
obj.addProperty("downJitter", remoteLink.getMonitor().getInJitter());
|
||||
}
|
||||
array.add(obj);
|
||||
}
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
private void handleLinks(HttpExchange exchange) throws IOException {
|
||||
if (handleCorsPreflight(exchange)) return;
|
||||
String method = exchange.getRequestMethod();
|
||||
KLALBController kc = proxySystem.getKlalbController();
|
||||
|
||||
if ("GET".equalsIgnoreCase(method)) {
|
||||
sendJsonResponse(exchange, 200, getLinksJson());
|
||||
} else if ("POST".equalsIgnoreCase(method)) {
|
||||
String body = readRequestBody(exchange);
|
||||
try {
|
||||
JsonObject req = new JsonParser().parse(body).getAsJsonObject();
|
||||
String address = req.get("address").getAsString().trim();
|
||||
if (address.isEmpty()) {
|
||||
sendError(exchange, 400, "Address is required");
|
||||
return;
|
||||
}
|
||||
MultiProtocolSocketAddress mpsa = new MultiProtocolSocketAddress(address);
|
||||
List<KLALBRemoteLink> added = kc.addRemoteLines(mpsa);
|
||||
JsonObject resp = new JsonObject();
|
||||
resp.addProperty("success", !added.isEmpty());
|
||||
resp.addProperty("count", added.size());
|
||||
sendJsonResponse(exchange, 200, resp);
|
||||
} catch (Exception e) {
|
||||
sendError(exchange, 400, "Failed to add link: " + e.getMessage());
|
||||
}
|
||||
} else if ("DELETE".equalsIgnoreCase(method)) {
|
||||
String query = exchange.getRequestURI().getQuery();
|
||||
String address = null;
|
||||
if (query != null && query.startsWith("address=")) {
|
||||
address = URLDecoder.decode(query.substring(8), StandardCharsets.UTF_8);
|
||||
} else {
|
||||
String body = readRequestBody(exchange);
|
||||
if (!body.isEmpty()) {
|
||||
try {
|
||||
JsonObject req = new JsonParser().parse(body).getAsJsonObject();
|
||||
if (req.has("address")) {
|
||||
address = req.get("address").getAsString();
|
||||
}
|
||||
} catch (Exception ignored) {}
|
||||
}
|
||||
}
|
||||
|
||||
if (address == null || address.trim().isEmpty()) {
|
||||
sendError(exchange, 400, "Address parameter required");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
MultiProtocolSocketAddress mpsa = new MultiProtocolSocketAddress(address.trim());
|
||||
List<KLALBRemoteLink> removed = kc.removeRemoteLines(mpsa);
|
||||
JsonObject resp = new JsonObject();
|
||||
resp.addProperty("success", !removed.isEmpty());
|
||||
resp.addProperty("count", removed.size());
|
||||
sendJsonResponse(exchange, 200, resp);
|
||||
} catch (Exception e) {
|
||||
sendError(exchange, 400, "Failed to remove link: " + e.getMessage());
|
||||
}
|
||||
} else {
|
||||
sendError(exchange, 405, "Method not allowed");
|
||||
}
|
||||
}
|
||||
|
||||
private void handleLinkAction(HttpExchange exchange) throws IOException {
|
||||
if (handleCorsPreflight(exchange)) return;
|
||||
if (!"POST".equalsIgnoreCase(exchange.getRequestMethod())) {
|
||||
sendError(exchange, 405, "Method not allowed");
|
||||
return;
|
||||
}
|
||||
|
||||
String body = readRequestBody(exchange);
|
||||
try {
|
||||
JsonObject req = new JsonParser().parse(body).getAsJsonObject();
|
||||
String action = req.get("action").getAsString();
|
||||
String address = req.has("address") ? req.get("address").getAsString() : null;
|
||||
|
||||
KLALBController kc = proxySystem.getKlalbController();
|
||||
KLALBRemoteLink target = null;
|
||||
if (address != null) {
|
||||
for (IPv6NetworkLink link : kc.getLines()) {
|
||||
if (link instanceof KLALBRemoteLink rl) {
|
||||
if (rl.getName().equalsIgnoreCase(address) ||
|
||||
(rl.getSocketAddress() != null && rl.getSocketAddress().toString().equalsIgnoreCase(address))) {
|
||||
target = rl;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
JsonObject resp = new JsonObject();
|
||||
if (target != null) {
|
||||
switch (action) {
|
||||
case "reconnect" -> {
|
||||
target.reconnectImmediately();
|
||||
resp.addProperty("success", true);
|
||||
}
|
||||
case "disconnect" -> {
|
||||
target.dislink();
|
||||
resp.addProperty("success", true);
|
||||
}
|
||||
case "remove" -> {
|
||||
MultiProtocolSocketAddress mtar = target.getSocketAddress();
|
||||
if (mtar != null) {
|
||||
kc.removeRemoteLines(mtar);
|
||||
} else {
|
||||
target.close();
|
||||
}
|
||||
resp.addProperty("success", true);
|
||||
}
|
||||
default -> {
|
||||
sendError(exchange, 400, "Unknown action: " + action);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
sendError(exchange, 404, "Target link not found: " + address);
|
||||
return;
|
||||
}
|
||||
sendJsonResponse(exchange, 200, resp);
|
||||
} catch (Exception e) {
|
||||
sendError(exchange, 400, "Failed to execute link action: " + e.getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
private void handleReconnectAll(HttpExchange exchange) throws IOException {
|
||||
if (handleCorsPreflight(exchange)) return;
|
||||
if (!"POST".equalsIgnoreCase(exchange.getRequestMethod())) {
|
||||
sendError(exchange, 405, "Method not allowed");
|
||||
return;
|
||||
}
|
||||
KLALBController kc = proxySystem.getKlalbController();
|
||||
if (kc != null) {
|
||||
kc.reconnectImmediately();
|
||||
JsonObject resp = new JsonObject();
|
||||
resp.addProperty("success", true);
|
||||
sendJsonResponse(exchange, 200, resp);
|
||||
} else {
|
||||
sendError(exchange, 500, "Controller not ready");
|
||||
}
|
||||
}
|
||||
|
||||
private void handleRoutingTable(HttpExchange exchange) throws IOException {
|
||||
if (handleCorsPreflight(exchange)) return;
|
||||
if (!"GET".equalsIgnoreCase(exchange.getRequestMethod())) {
|
||||
sendError(exchange, 405, "Method not allowed");
|
||||
return;
|
||||
}
|
||||
|
||||
KLALBController kc = proxySystem.getKlalbController();
|
||||
JsonArray routesArray = new JsonArray();
|
||||
if (kc != null && kc.getIpv6Router() != null) {
|
||||
List<RouteItem> list = new ArrayList<>(kc.getIpv6Router().getCurrentRouteTabel());
|
||||
Collections.sort(list);
|
||||
for (RouteItem item : list) {
|
||||
JsonObject obj = new JsonObject();
|
||||
obj.addProperty("destination", item.getDestination() != null ? item.getDestination().toString() : "");
|
||||
obj.addProperty("protocol", item.getProto());
|
||||
obj.addProperty("preference", item.getPre());
|
||||
obj.addProperty("cost", item.getCost());
|
||||
obj.addProperty("flag", item.getFlag());
|
||||
obj.addProperty("nexthop", item.getNexthop() != null ? item.getNexthop().toString() : "");
|
||||
obj.addProperty("interface", item.getDestlink() != null ? item.getDestlink().getName() : "");
|
||||
routesArray.add(obj);
|
||||
}
|
||||
}
|
||||
sendJsonResponse(exchange, 200, routesArray);
|
||||
}
|
||||
|
||||
private KLALBRoutingProtocolAPIClient nodeInfoClient;
|
||||
|
||||
private synchronized KLALBRoutingProtocolAPIClient getNodeInfoClient(KLALBController kc) {
|
||||
if (nodeInfoClient == null) {
|
||||
nodeInfoClient = new KLALBRoutingProtocolAPIClient(kc.getIpv6Router().getKlalbRouteProtol());
|
||||
}
|
||||
return nodeInfoClient;
|
||||
}
|
||||
|
||||
private void handleNodeInfo(HttpExchange exchange) throws IOException {
|
||||
if (handleCorsPreflight(exchange)) return;
|
||||
if (!"GET".equalsIgnoreCase(exchange.getRequestMethod())) {
|
||||
sendError(exchange, 405, "Method not allowed");
|
||||
return;
|
||||
}
|
||||
|
||||
Map<String, String> params = parseQuery(exchange.getRequestURI().getRawQuery());
|
||||
String addressStr = params.get("address");
|
||||
if (addressStr == null || addressStr.trim().isEmpty()) {
|
||||
sendError(exchange, 400, "address parameter is required");
|
||||
return;
|
||||
}
|
||||
|
||||
KLALBController kc = proxySystem.getKlalbController();
|
||||
if (kc == null || kc.getIpv6Router() == null || kc.getIpv6Router().getKlalbRouteProtol() == null) {
|
||||
sendError(exchange, 503, "Controller not ready");
|
||||
return;
|
||||
}
|
||||
|
||||
IPv6Address target;
|
||||
try {
|
||||
target = new IPv6Address((Inet6Address) InetAddress.getByName(addressStr.trim()));
|
||||
} catch (Exception e) {
|
||||
sendError(exchange, 400, "Invalid IPv6 address: " + addressStr);
|
||||
return;
|
||||
}
|
||||
|
||||
SRv6Router router = kc.getIpv6Router();
|
||||
boolean isSelf = router.getLocator().getAddress().equals(target);
|
||||
|
||||
JsonObject resp = new JsonObject();
|
||||
resp.addProperty("address", target.toString());
|
||||
|
||||
if (isSelf) {
|
||||
// 本机：描述直接取本地控制器配置
|
||||
KLALBControllerConfigItem cfg = proxySystem.getControllerConfig();
|
||||
resp.addProperty("isSelf", true);
|
||||
String dname = router.getDeviceName() != null ? router.getDeviceName()
|
||||
: (cfg != null && cfg.getDeviceName() != null ? cfg.getDeviceName() : "");
|
||||
resp.addProperty("deviceName", dname);
|
||||
resp.addProperty("deviceDescription",
|
||||
cfg != null && cfg.getDeviceDescription() != null ? cfg.getDeviceDescription() : "");
|
||||
JsonArray lines = new JsonArray();
|
||||
for (MultiProtocolSocketAddress mpsa : kc.getExternalEndpoints()) {
|
||||
lines.add(new JsonPrimitive(mpsa.toString()));
|
||||
}
|
||||
resp.add("openLines", lines);
|
||||
sendJsonResponse(exchange, 200, resp);
|
||||
return;
|
||||
}
|
||||
|
||||
// 远端节点：经 SRv6 虚拟网络发送完整节点信息查询（异步回调，限时等待）
|
||||
resp.addProperty("isSelf", false);
|
||||
CompletableFuture<KLALBNodeInformation> future = new CompletableFuture<>();
|
||||
try {
|
||||
getNodeInfoClient(kc).requestNodeInfoFull(
|
||||
new InetSocketAddress(target.toInet6Address(), KLALBRoutingProtocol.DEFAULT_PORT),
|
||||
info -> future.complete(info));
|
||||
|
||||
KLALBNodeInformation info;
|
||||
try {
|
||||
info = future.get(3, TimeUnit.SECONDS);
|
||||
} catch (TimeoutException te) {
|
||||
info = null;
|
||||
}
|
||||
|
||||
String dname = info != null && info.getDeviceName() != null && !info.getDeviceName().isEmpty()
|
||||
? info.getDeviceName()
|
||||
: router.getKlalbRouteProtol().getDeviceName(target);
|
||||
resp.addProperty("deviceName", dname != null ? dname : "");
|
||||
resp.addProperty("deviceDescription",
|
||||
info != null && info.getDeviceDescription() != null ? info.getDeviceDescription() : "");
|
||||
resp.addProperty("reachable", info != null);
|
||||
JsonArray lines = new JsonArray();
|
||||
if (info != null && info.getOpenLines() != null) {
|
||||
for (MultiProtocolSocketAddress mpsa : info.getOpenLines()) {
|
||||
lines.add(new JsonPrimitive(mpsa.toString()));
|
||||
}
|
||||
}
|
||||
resp.add("openLines", lines);
|
||||
} catch (Exception e) {
|
||||
resp.addProperty("deviceName", "");
|
||||
resp.addProperty("deviceDescription", "");
|
||||
resp.addProperty("reachable", false);
|
||||
resp.add("openLines", new JsonArray());
|
||||
}
|
||||
sendJsonResponse(exchange, 200, resp);
|
||||
}
|
||||
|
||||
private Map<String, String> parseQuery(String rawQuery) {
|
||||
Map<String, String> params = new HashMap<>();
|
||||
if (rawQuery == null || rawQuery.isEmpty()) return params;
|
||||
for (String pair : rawQuery.split("&")) {
|
||||
int idx = pair.indexOf('=');
|
||||
if (idx <= 0) continue;
|
||||
try {
|
||||
params.put(URLDecoder.decode(pair.substring(0, idx), StandardCharsets.UTF_8),
|
||||
URLDecoder.decode(pair.substring(idx + 1), StandardCharsets.UTF_8));
|
||||
} catch (Exception ignored) {}
|
||||
}
|
||||
return params;
|
||||
}
|
||||
|
||||
private void handleNodes(HttpExchange exchange) throws IOException {
|
||||
if (handleCorsPreflight(exchange)) return;
|
||||
if (!"GET".equalsIgnoreCase(exchange.getRequestMethod())) {
|
||||
sendError(exchange, 405, "Method not allowed");
|
||||
return;
|
||||
}
|
||||
|
||||
KLALBController kc = proxySystem.getKlalbController();
|
||||
JsonObject result = new JsonObject();
|
||||
JsonArray nodesArray = new JsonArray();
|
||||
JsonArray edgesArray = new JsonArray();
|
||||
|
||||
if (kc != null && kc.getIpv6Router() != null && kc.getIpv6Router().getKlalbRouteProtol() != null) {
|
||||
KLALBRoutingProtocol rproto = kc.getIpv6Router().getKlalbRouteProtol();
|
||||
Map<IPv6Address, Long> addrs = rproto.getAddresses();
|
||||
IPv6Address selfAddr = kc.getIpv6Router().getLocator().getAddress();
|
||||
|
||||
if (addrs != null) {
|
||||
for (IPv6Address addr : addrs.keySet()) {
|
||||
JsonObject nodeObj = new JsonObject();
|
||||
nodeObj.addProperty("id", addr.toString());
|
||||
nodeObj.addProperty("address", addr.toString());
|
||||
nodeObj.addProperty("compressedAddress", addr.toCompressedString());
|
||||
nodeObj.addProperty("isSelf", addr.equals(selfAddr));
|
||||
String dname = rproto.getDeviceName(addr);
|
||||
nodeObj.addProperty("deviceName", dname != null ? dname : "");
|
||||
nodesArray.add(nodeObj);
|
||||
}
|
||||
}
|
||||
|
||||
Map<IPv6Address, RouterInfo> netmap = rproto.getNetmap();
|
||||
if (netmap != null) {
|
||||
Set<String> seenEdges = new HashSet<>();
|
||||
for (Map.Entry<IPv6Address, RouterInfo> entry : netmap.entrySet()) {
|
||||
IPv6Address from = entry.getKey();
|
||||
RouterInfo info = entry.getValue();
|
||||
if (info != null && info.getNeighborAddresses() != null) {
|
||||
for (NeighborInfo nb : info.getNeighborAddresses()) {
|
||||
if (nb != null && nb.getLocator() != null) {
|
||||
String to = nb.getLocator().getAddress().toString();
|
||||
String edgeKey = from.toString().compareTo(to) < 0
|
||||
? from.toString() + "->" + to
|
||||
: to + "->" + from.toString();
|
||||
if (!seenEdges.contains(edgeKey)) {
|
||||
seenEdges.add(edgeKey);
|
||||
JsonObject edgeObj = new JsonObject();
|
||||
edgeObj.addProperty("source", from.toString());
|
||||
edgeObj.addProperty("target", to);
|
||||
edgeObj.addProperty("delay", nb.getUploadDelay());
|
||||
edgeObj.addProperty("cost", nb.getUploadDelayMin());
|
||||
edgesArray.add(edgeObj);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
result.add("nodes", nodesArray);
|
||||
result.add("edges", edgesArray);
|
||||
sendJsonResponse(exchange, 200, result);
|
||||
}
|
||||
|
||||
private void handleConfig(HttpExchange exchange) throws IOException {
|
||||
if (handleCorsPreflight(exchange)) return;
|
||||
String method = exchange.getRequestMethod();
|
||||
|
||||
if ("GET".equalsIgnoreCase(method)) {
|
||||
KLALBControllerConfigItem config = proxySystem.getControllerConfig();
|
||||
if (config != null) {
|
||||
sendJsonResponse(exchange, 200, config);
|
||||
} else {
|
||||
sendError(exchange, 404, "Configuration not found");
|
||||
}
|
||||
} else if ("POST".equalsIgnoreCase(method) || "PUT".equalsIgnoreCase(method)) {
|
||||
String body = readRequestBody(exchange);
|
||||
try {
|
||||
JsonObject json = new JsonParser().parse(body).getAsJsonObject();
|
||||
KLALBControllerConfigItem current = proxySystem.getControllerConfig();
|
||||
if (current != null) {
|
||||
if (json.has("deviceName") && !json.get("deviceName").isJsonNull()) {
|
||||
current.setDeviceName(json.get("deviceName").getAsString());
|
||||
} else if (json.has("DeviceName") && !json.get("DeviceName").isJsonNull()) {
|
||||
current.setDeviceName(json.get("DeviceName").getAsString());
|
||||
}
|
||||
|
||||
if (json.has("deviceDescription") && !json.get("deviceDescription").isJsonNull()) {
|
||||
current.setDeviceDescription(json.get("deviceDescription").getAsString());
|
||||
} else if (json.has("DeviceDescription") && !json.get("DeviceDescription").isJsonNull()) {
|
||||
current.setDeviceDescription(json.get("DeviceDescription").getAsString());
|
||||
}
|
||||
|
||||
if (json.has("language") && !json.get("language").isJsonNull()) {
|
||||
current.setLanguage(json.get("language").getAsString());
|
||||
}
|
||||
|
||||
if (json.has("virtualAddress") && !json.get("virtualAddress").isJsonNull()) {
|
||||
current.setVirtualAddress(json.get("virtualAddress").getAsString());
|
||||
} else if (json.has("VirtualAddress") && !json.get("VirtualAddress").isJsonNull()) {
|
||||
current.setVirtualAddress(json.get("VirtualAddress").getAsString());
|
||||
}
|
||||
|
||||
if (json.has("virtualASN") && !json.get("virtualASN").isJsonNull()) {
|
||||
current.setVirtualASN(json.get("virtualASN").getAsLong());
|
||||
} else if (json.has("VirtualASN") && !json.get("VirtualASN").isJsonNull()) {
|
||||
current.setVirtualASN(json.get("VirtualASN").getAsLong());
|
||||
}
|
||||
|
||||
if (json.has("virtualSocketName") && !json.get("virtualSocketName").isJsonNull()) {
|
||||
current.setVirtualSocketName(json.get("virtualSocketName").getAsString());
|
||||
} else if (json.has("VirtualSocketName") && !json.get("VirtualSocketName").isJsonNull()) {
|
||||
current.setVirtualSocketName(json.get("VirtualSocketName").getAsString());
|
||||
}
|
||||
|
||||
if (json.has("enableTUN")) {
|
||||
current.setEnableTUN(json.get("enableTUN").getAsBoolean());
|
||||
} else if (json.has("EnableTUN")) {
|
||||
current.setEnableTUN(json.get("EnableTUN").getAsBoolean());
|
||||
}
|
||||
|
||||
if (json.has("tunName") && !json.get("tunName").isJsonNull()) {
|
||||
current.setTUNName(json.get("tunName").getAsString());
|
||||
} else if (json.has("TUNName") && !json.get("TUNName").isJsonNull()) {
|
||||
current.setTUNName(json.get("TUNName").getAsString());
|
||||
}
|
||||
|
||||
if (json.has("webUI")) {
|
||||
current.setWebUI(json.get("webUI").getAsBoolean());
|
||||
}
|
||||
|
||||
if (json.has("webListen") && !json.get("webListen").isJsonNull()) {
|
||||
current.setWebListen(new MultiProtocolSocketAddress(json.get("webListen").getAsString()));
|
||||
} else if (json.has("webPort")) {
|
||||
current.setWebListen(new MultiProtocolSocketAddress("http", "0.0.0.0", json.get("webPort").getAsInt()));
|
||||
}
|
||||
|
||||
if (json.has("nogui")) {
|
||||
current.setNogui(json.get("nogui").getAsBoolean());
|
||||
}
|
||||
|
||||
if (json.has("tcpListen") && !json.get("tcpListen").isJsonNull()) {
|
||||
current.setTCPListen(new MultiProtocolSocketAddress(json.get("tcpListen").getAsString()));
|
||||
} else if (json.has("TCPListen") && !json.get("TCPListen").isJsonNull()) {
|
||||
current.setTCPListen(new MultiProtocolSocketAddress(json.get("TCPListen").getAsString()));
|
||||
}
|
||||
|
||||
if (json.has("udpListen") && !json.get("udpListen").isJsonNull()) {
|
||||
current.setUDPListen(new MultiProtocolSocketAddress(json.get("udpListen").getAsString()));
|
||||
} else if (json.has("UDPListen") && !json.get("UDPListen").isJsonNull()) {
|
||||
current.setUDPListen(new MultiProtocolSocketAddress(json.get("UDPListen").getAsString()));
|
||||
}
|
||||
|
||||
if (json.has("externalEndpoints") || json.has("ExternalEndpoints") || json.has("openConnections") || json.has("OpenConnections") || json.has("lineTable") || json.has("LineTable")) {
|
||||
JsonArray arr = json.has("externalEndpoints") ? json.getAsJsonArray("externalEndpoints")
|
||||
: json.has("ExternalEndpoints") ? json.getAsJsonArray("ExternalEndpoints")
|
||||
: json.has("openConnections") ? json.getAsJsonArray("openConnections")
|
||||
: json.has("OpenConnections") ? json.getAsJsonArray("OpenConnections")
|
||||
: json.has("lineTable") ? json.getAsJsonArray("lineTable") : json.getAsJsonArray("LineTable");
|
||||
List<MultiProtocolSocketAddress> list = new ArrayList<>();
|
||||
for (JsonElement el : arr) {
|
||||
if (el.isJsonPrimitive()) {
|
||||
list.add(new MultiProtocolSocketAddress(el.getAsString()));
|
||||
}
|
||||
}
|
||||
current.setExternalEndpoints(list);
|
||||
}
|
||||
|
||||
if (json.has("autoConnections") || json.has("AutoConnections") || json.has("connectLineTable") || json.has("ConnectLineTable")) {
|
||||
JsonArray arr = json.has("autoConnections") ? json.getAsJsonArray("autoConnections")
|
||||
: json.has("AutoConnections") ? json.getAsJsonArray("AutoConnections")
|
||||
: json.has("connectLineTable") ? json.getAsJsonArray("connectLineTable") : json.getAsJsonArray("ConnectLineTable");
|
||||
List<MultiProtocolSocketAddress> list = new ArrayList<>();
|
||||
for (JsonElement el : arr) {
|
||||
if (el.isJsonPrimitive()) {
|
||||
list.add(new MultiProtocolSocketAddress(el.getAsString()));
|
||||
}
|
||||
}
|
||||
current.setAutoConnections(list);
|
||||
}
|
||||
|
||||
if (json.has("ntpServers") || json.has("NtpServers") || json.has("ntpServerTable")) {
|
||||
JsonArray arr = json.has("ntpServers") ? json.getAsJsonArray("ntpServers")
|
||||
: json.has("NtpServers") ? json.getAsJsonArray("NtpServers")
|
||||
: json.getAsJsonArray("ntpServerTable");
|
||||
List<MultiProtocolSocketAddress> list = new ArrayList<>();
|
||||
for (JsonElement el : arr) {
|
||||
if (el.isJsonPrimitive()) {
|
||||
list.add(new MultiProtocolSocketAddress(el.getAsString()));
|
||||
}
|
||||
}
|
||||
current.setNtpServers(list);
|
||||
}
|
||||
|
||||
if (json.has("dns") || json.has("DNS")) {
|
||||
JsonArray arr = json.has("dns") ? json.getAsJsonArray("dns") : json.getAsJsonArray("DNS");
|
||||
List<InetAddress> list = new ArrayList<>();
|
||||
for (JsonElement el : arr) {
|
||||
if (el.isJsonPrimitive()) {
|
||||
try {
|
||||
list.add(InetAddress.getByName(el.getAsString()));
|
||||
} catch (Exception ignored) {}
|
||||
}
|
||||
}
|
||||
current.setDNS(list);
|
||||
}
|
||||
|
||||
if (json.has("extraRoutes") || json.has("ExtraRoutes")) {
|
||||
JsonArray arr = json.has("extraRoutes") ? json.getAsJsonArray("extraRoutes") : json.getAsJsonArray("ExtraRoutes");
|
||||
List<String> list = new ArrayList<>();
|
||||
for (JsonElement el : arr) {
|
||||
if (el.isJsonPrimitive()) {
|
||||
list.add(el.getAsString());
|
||||
}
|
||||
}
|
||||
current.setExtraRoutes(list);
|
||||
}
|
||||
|
||||
if (json.has("networkInterfaceExcepts") || json.has("NetworkInterfaceExcepts")) {
|
||||
JsonArray arr = json.has("networkInterfaceExcepts") ? json.getAsJsonArray("networkInterfaceExcepts") : json.getAsJsonArray("NetworkInterfaceExcepts");
|
||||
List<String> list = new ArrayList<>();
|
||||
for (JsonElement el : arr) {
|
||||
if (el.isJsonPrimitive()) {
|
||||
list.add(el.getAsString());
|
||||
}
|
||||
}
|
||||
current.setNetworkInterfaceExcepts(list);
|
||||
}
|
||||
|
||||
if (json.has("congestionAlgorithm") && !json.get("congestionAlgorithm").isJsonNull()) {
|
||||
current.setCongestionAlgorithm(json.get("congestionAlgorithm").getAsString());
|
||||
}
|
||||
|
||||
if (json.has("performanceStrategy") && !json.get("performanceStrategy").isJsonNull()) {
|
||||
current.setPerformanceStrategy(json.get("performanceStrategy").getAsString());
|
||||
}
|
||||
|
||||
if (json.has("linkConnectionsCount")) {
|
||||
current.setLinkConnectionsCount(json.get("linkConnectionsCount").getAsInt());
|
||||
}
|
||||
|
||||
if (json.has("burstLimit")) {
|
||||
current.setBurstLimit(json.get("burstLimit").getAsDouble());
|
||||
}
|
||||
|
||||
if (json.has("delayUpperBound")) {
|
||||
current.setDelayUpperBound(json.get("delayUpperBound").getAsDouble());
|
||||
}
|
||||
|
||||
if (json.has("delayLowerBound")) {
|
||||
current.setDelayLowerBound(json.get("delayLowerBound").getAsDouble());
|
||||
}
|
||||
|
||||
if (json.has("nagleDelayTime")) {
|
||||
current.setNagleDelayTime(json.get("nagleDelayTime").getAsLong());
|
||||
}
|
||||
|
||||
if (json.has("linkNagleDelayTime")) {
|
||||
current.setLinkNagleDelayTime(json.get("linkNagleDelayTime").getAsLong());
|
||||
}
|
||||
|
||||
if (json.has("denyExternalEndpointQuery")) {
|
||||
current.setDenyExternalEndpointQuery(json.get("denyExternalEndpointQuery").getAsBoolean());
|
||||
} else if (json.has("denyConnectionQuery")) {
|
||||
current.setDenyExternalEndpointQuery(json.get("denyConnectionQuery").getAsBoolean());
|
||||
} else if (json.has("denyLineTableQuery")) {
|
||||
current.setDenyExternalEndpointQuery(json.get("denyLineTableQuery").getAsBoolean());
|
||||
}
|
||||
|
||||
if (json.has("denyExternalEndpointBroadcast")) {
|
||||
current.setDenyExternalEndpointBroadcast(json.get("denyExternalEndpointBroadcast").getAsBoolean());
|
||||
} else if (json.has("denyConnectionBroadcast")) {
|
||||
current.setDenyExternalEndpointBroadcast(json.get("denyConnectionBroadcast").getAsBoolean());
|
||||
} else if (json.has("denyLineTableBroadcast")) {
|
||||
current.setDenyExternalEndpointBroadcast(json.get("denyLineTableBroadcast").getAsBoolean());
|
||||
}
|
||||
|
||||
// Trigger GUI save consumer or save directly
|
||||
if (proxySystem.getKLALBGUI() != null && proxySystem.getKLALBGUI().getSaveComsumer() != null) {
|
||||
proxySystem.getKLALBGUI().getSaveComsumer().accept(proxySystem.getConfig());
|
||||
} else {
|
||||
proxySystem.saveConfigToFile();
|
||||
}
|
||||
|
||||
JsonObject resp = new JsonObject();
|
||||
resp.addProperty("success", true);
|
||||
resp.addProperty("message", "Configuration updated successfully");
|
||||
sendJsonResponse(exchange, 200, resp);
|
||||
} else {
|
||||
sendError(exchange, 500, "Current configuration is null");
|
||||
}
|
||||
} catch (Exception e) {
|
||||
sendError(exchange, 400, "Failed to update configuration: " + e.getMessage());
|
||||
}
|
||||
} else {
|
||||
sendError(exchange, 405, "Method not allowed");
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// SSE Handler & Broadcaster
|
||||
// -------------------------------------------------------------
|
||||
|
||||
private void handleEvents(HttpExchange exchange) throws IOException {
|
||||
if (handleCorsPreflight(exchange)) return;
|
||||
if (!"GET".equalsIgnoreCase(exchange.getRequestMethod())) {
|
||||
sendError(exchange, 405, "Method not allowed");
|
||||
return;
|
||||
}
|
||||
|
||||
Headers headers = exchange.getResponseHeaders();
|
||||
headers.set("Content-Type", "text/event-stream; charset=utf-8");
|
||||
headers.set("Cache-Control", "no-cache, no-transform");
|
||||
headers.set("Connection", "keep-alive");
|
||||
headers.set("Access-Control-Allow-Origin", "*");
|
||||
|
||||
exchange.sendResponseHeaders(200, 0);
|
||||
sseClients.add(exchange);
|
||||
}
|
||||
|
||||
private void startSseBroadcaster() {
|
||||
sseExecutor.scheduleAtFixedRate(() -> {
|
||||
if (sseClients.isEmpty()) return;
|
||||
|
||||
JsonObject eventData = new JsonObject();
|
||||
eventData.add("status", getStatusJson());
|
||||
eventData.add("links", getLinksJson());
|
||||
String eventStr = "data: " + eventData.toString() + "\n\n";
|
||||
byte[] bytes = eventStr.getBytes(StandardCharsets.UTF_8);
|
||||
|
||||
Iterator<HttpExchange> it = sseClients.iterator();
|
||||
while (it.hasNext()) {
|
||||
HttpExchange ex = it.next();
|
||||
try {
|
||||
OutputStream os = ex.getResponseBody();
|
||||
os.write(bytes);
|
||||
os.flush();
|
||||
} catch (Exception e) {
|
||||
try {
|
||||
ex.close();
|
||||
} catch (Exception ignored) {}
|
||||
it.remove();
|
||||
}
|
||||
}
|
||||
}, 200, 200, TimeUnit.MILLISECONDS);
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// Static Resource / SPA Handler
|
||||
// -------------------------------------------------------------
|
||||
|
||||
private void handleStatic(HttpExchange exchange) throws IOException {
|
||||
if (handleCorsPreflight(exchange)) return;
|
||||
|
||||
String path = exchange.getRequestURI().getPath();
|
||||
if (path.startsWith("/api/")) {
|
||||
sendError(exchange, 404, "API endpoint not found");
|
||||
return;
|
||||
}
|
||||
|
||||
// Look for dashboard/dist
|
||||
File distDir = new File("dashboard/dist");
|
||||
File targetFile = null;
|
||||
|
||||
if (distDir.exists() && distDir.isDirectory()) {
|
||||
String relPath = path.equals("/") ? "index.html" : path.substring(1);
|
||||
targetFile = new File(distDir, relPath);
|
||||
if (!targetFile.exists() || targetFile.isDirectory()) {
|
||||
targetFile = new File(distDir, "index.html");
|
||||
}
|
||||
}
|
||||
|
||||
if (targetFile != null && targetFile.exists() && targetFile.isFile()) {
|
||||
String mime = getMimeType(targetFile.getName());
|
||||
byte[] content = Files.readAllBytes(targetFile.toPath());
|
||||
setCorsHeaders(exchange);
|
||||
exchange.getResponseHeaders().set("Content-Type", mime);
|
||||
exchange.sendResponseHeaders(200, content.length);
|
||||
try (OutputStream os = exchange.getResponseBody()) {
|
||||
os.write(content);
|
||||
}
|
||||
} else {
|
||||
// Fallback welcome message if frontend not built yet
|
||||
String html = "<!DOCTYPE html><html><head><meta charset='utf-8'><title>KLALB Web Dashboard</title>" +
|
||||
"<style>body{font-family:system-ui,sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;background:#09090b;color:#fafafa}" +
|
||||
".card{background:#18181b;padding:2rem;border-radius:0.75rem;border:1px solid #27272a;max-width:480px;text-align:center}" +
|
||||
"h1{margin:0 0 0.5rem;font-size:1.5rem}p{color:#a1a1aa;margin:0 0 1rem;font-size:0.875rem}code{background:#27272a;padding:0.2rem 0.4rem;border-radius:0.25rem}</style></head>" +
|
||||
"<body><div class='card'><h1>KLALB Web Dashboard API Active</h1>" +
|
||||
"<p>The backend API is ready. Start the frontend dev server or build the dashboard: <br><code>cd dashboard && pnpm build</code></p>" +
|
||||
"<p><a href='/api/status' style='color:#38bdf8'>View /api/status</a></p></div></body></html>";
|
||||
byte[] bytes = html.getBytes(StandardCharsets.UTF_8);
|
||||
setCorsHeaders(exchange);
|
||||
exchange.getResponseHeaders().set("Content-Type", "text/html; charset=utf-8");
|
||||
exchange.sendResponseHeaders(200, bytes.length);
|
||||
try (OutputStream os = exchange.getResponseBody()) {
|
||||
os.write(bytes);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private String getMimeType(String filename) {
|
||||
String lower = filename.toLowerCase();
|
||||
if (lower.endsWith(".html")) return "text/html; charset=utf-8";
|
||||
if (lower.endsWith(".js") || lower.endsWith(".mjs")) return "application/javascript; charset=utf-8";
|
||||
if (lower.endsWith(".css")) return "text/css; charset=utf-8";
|
||||
if (lower.endsWith(".json")) return "application/json; charset=utf-8";
|
||||
if (lower.endsWith(".svg")) return "image/svg+xml";
|
||||
if (lower.endsWith(".png")) return "image/png";
|
||||
if (lower.endsWith(".jpg") || lower.endsWith(".jpeg")) return "image/jpeg";
|
||||
if (lower.endsWith(".ico")) return "image/x-icon";
|
||||
if (lower.endsWith(".woff2")) return "font/woff2";
|
||||
if (lower.endsWith(".woff")) return "font/woff";
|
||||
if (lower.endsWith(".ttf")) return "font/ttf";
|
||||
return "application/octet-stream";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
package org.kne.cloud.network.srv6;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
import org.kne.cloud.network.MultiProtocolSocketAddress;
|
||||
|
||||
/**
|
||||
* 节点信息（开放线路 + 设备名称 + 设备描述），由路由协议 JSON API 查询获得。
|
||||
*/
|
||||
public class KLALBNodeInformation {
|
||||
private List<MultiProtocolSocketAddress> openLines;
|
||||
private String deviceName;
|
||||
private String deviceDescription;
|
||||
|
||||
public KLALBNodeInformation(List<MultiProtocolSocketAddress> openLines, String deviceName,
|
||||
String deviceDescription) {
|
||||
super();
|
||||
this.openLines = openLines;
|
||||
this.deviceName = deviceName;
|
||||
this.deviceDescription = deviceDescription;
|
||||
}
|
||||
|
||||
public List<MultiProtocolSocketAddress> getOpenLines() {
|
||||
return openLines;
|
||||
}
|
||||
|
||||
public void setOpenLines(List<MultiProtocolSocketAddress> openLines) {
|
||||
this.openLines = openLines;
|
||||
}
|
||||
|
||||
public String getDeviceName() {
|
||||
return deviceName;
|
||||
}
|
||||
|
||||
public void setDeviceName(String deviceName) {
|
||||
this.deviceName = deviceName;
|
||||
}
|
||||
|
||||
public String getDeviceDescription() {
|
||||
return deviceDescription;
|
||||
}
|
||||
|
||||
public void setDeviceDescription(String deviceDescription) {
|
||||
this.deviceDescription = deviceDescription;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String toString() {
|
||||
return "KLALBNodeInformation [openLines=" + openLines + ", deviceName=" + deviceName
|
||||
+ ", deviceDescription=" + deviceDescription + "]";
|
||||
}
|
||||
}
|
||||
@@ -43,6 +43,10 @@ public class KLALBRoutingProtocol extends Thread{
|
||||
|
||||
private RouterInfo selfRouterInfo;
|
||||
private Map<IPv6Address, RouterInfo> netmap=new ConcurrentHashMap<>();
|
||||
|
||||
public Map<IPv6Address, RouterInfo> getNetmap() {
|
||||
return netmap;
|
||||
}
|
||||
|
||||
|
||||
private volatile Map<IPv6Address,Long>addresses;
|
||||
@@ -545,6 +549,7 @@ public class KLALBRoutingProtocol extends Thread{
|
||||
List<IPv6NetworkLink>links=router.getLinkTabel();
|
||||
Object[] nls=links.toArray();
|
||||
RouterInfo ri=new RouterInfo(System.currentTimeMillis(),router.getLocator(),router.getASN());
|
||||
ri.setDeviceName(router.getDeviceName());
|
||||
for(int i=0;i<nls.length;i++) {
|
||||
IPv6NetworkLink nl=(IPv6NetworkLink) nls[i];
|
||||
if((!nl.isLoopBack())&&nl.isUp()) {
|
||||
@@ -595,6 +600,19 @@ public class KLALBRoutingProtocol extends Thread{
|
||||
public Map<IPv6Address, Long> getAddresses() {
|
||||
return addresses;
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询某地址广播的设备名称（未知返回null）
|
||||
*/
|
||||
public String getDeviceName(IPv6Address address) {
|
||||
RouterInfo ri=netmap.get(address);
|
||||
if(ri!=null) {
|
||||
String dn=ri.getDeviceName();
|
||||
if(dn!=null&&!dn.isEmpty())
|
||||
return dn;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
public Map<IPv6Address, List<LinkDirection>> getPaths() {
|
||||
return paths;
|
||||
}
|
||||
|
||||
@@ -29,20 +29,27 @@ public class KLALBRoutingProtocolAPIClient {
|
||||
JsonDataPacket relate = null;
|
||||
//System.out.println(ruid + " " + window.getSendmap());
|
||||
switch (dataobj.getType()) {
|
||||
case KLALBRoutingProtocolJsonData.OPEN_LINES_RESP:
|
||||
case KLALBRoutingProtocolJsonData.NODE_INFO_FULL_RESP:
|
||||
case KLALBRoutingProtocolJsonData.NODE_INFO_TINY_RESP:
|
||||
|
||||
if ((relate = window.ack(ruid)) != null) {
|
||||
List<?> connects = (List<?>) dataobj.getData();
|
||||
List<MultiProtocolSocketAddress> connectsm = new ArrayList<MultiProtocolSocketAddress>(connects.size());
|
||||
for (Object open : connects) {
|
||||
if (open instanceof MultiProtocolSocketAddress) {
|
||||
connectsm.add((MultiProtocolSocketAddress) open);
|
||||
} else {
|
||||
connectsm.add(new MultiProtocolSocketAddress((String) open));
|
||||
List<MultiProtocolSocketAddress> connectsm = new ArrayList<MultiProtocolSocketAddress>(
|
||||
connects == null ? 0 : connects.size());
|
||||
if (connects != null) {
|
||||
for (Object open : connects) {
|
||||
if (open instanceof MultiProtocolSocketAddress) {
|
||||
connectsm.add((MultiProtocolSocketAddress) open);
|
||||
} else {
|
||||
connectsm.add(new MultiProtocolSocketAddress((String) open));
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
((Consumer<List<MultiProtocolSocketAddress>>) relate.getUserCallback()).accept(connectsm);
|
||||
// 组装节点信息（线路 + 设备名称 + 设备描述，精简模式下线路与描述为 null）
|
||||
KLALBNodeInformation info = new KLALBNodeInformation(connectsm, dataobj.getDeviceName(),
|
||||
dataobj.getDeviceDescription());
|
||||
((Consumer<KLALBNodeInformation>) relate.getUserCallback()).accept(info);
|
||||
}
|
||||
break;
|
||||
}
|
||||
@@ -56,11 +63,26 @@ public class KLALBRoutingProtocolAPIClient {
|
||||
clr.register(this, releaser);
|
||||
}
|
||||
|
||||
public void requestOpenLines(SocketAddress addr, Consumer<List<MultiProtocolSocketAddress>> callback)
|
||||
/**
|
||||
* 精简查询：仅获取对端设备名称（开销最小，适用于未查看节点详情的场景）。
|
||||
*/
|
||||
public void requestNodeInfoTiny(SocketAddress addr, Consumer<KLALBNodeInformation> callback)
|
||||
throws IOException {
|
||||
sendNodeInfoRequest(KLALBRoutingProtocolJsonData.NODE_INFO_TINY_REQ, addr, callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* 完整查询：获取对端开放线路 + 设备名称 + 设备描述（查看节点信息时使用）。
|
||||
*/
|
||||
public void requestNodeInfoFull(SocketAddress addr, Consumer<KLALBNodeInformation> callback)
|
||||
throws IOException {
|
||||
sendNodeInfoRequest(KLALBRoutingProtocolJsonData.NODE_INFO_FULL_REQ, addr, callback);
|
||||
}
|
||||
|
||||
private void sendNodeInfoRequest(String type, SocketAddress addr, Consumer<KLALBNodeInformation> callback)
|
||||
throws IOException {
|
||||
UUID suid = UUID.randomUUID();
|
||||
KLALBRoutingProtocolJsonData json = new KLALBRoutingProtocolJsonData(
|
||||
KLALBRoutingProtocolJsonData.OPEN_LINES_REQ, suid, null);
|
||||
KLALBRoutingProtocolJsonData json = new KLALBRoutingProtocolJsonData(type, suid, null);
|
||||
JsonDataPacket packet = new JsonDataPacket(json);
|
||||
packet.setUserCallback(callback);
|
||||
window.put(suid, packet);
|
||||
|
||||
@@ -21,11 +21,21 @@ public class KLALBRoutingProtocolAPIServer {
|
||||
KLALBRoutingProtocolJsonData dataobj= data.getDecodedData();
|
||||
InetSocketAddress addrs=(InetSocketAddress) addr;
|
||||
switch(dataobj.getType()){
|
||||
case KLALBRoutingProtocolJsonData.OPEN_LINES_REQ:
|
||||
if(controller.getConfigItem()==null||(!controller.getConfigItem().isDenyLineTableQuery())) {
|
||||
KLALBRoutingProtocolJsonData json=new KLALBRoutingProtocolJsonData(KLALBRoutingProtocolJsonData.OPEN_LINES_RESP,dataobj.getUuid(),controller.getSelflineTable());
|
||||
routingProtocol.sendJsonPacketToAddress(new JsonDataPacket(json),addr);
|
||||
case KLALBRoutingProtocolJsonData.NODE_INFO_TINY_REQ:
|
||||
// 精简查询：仅返回设备名称（设备名称随路由信息广播公开，不受 denyExternalEndpointQuery 限制）
|
||||
KLALBRoutingProtocolJsonData tinyjson=new KLALBRoutingProtocolJsonData(KLALBRoutingProtocolJsonData.NODE_INFO_TINY_RESP,dataobj.getUuid(),null);
|
||||
tinyjson.setDeviceName(controller.getIpv6Router().getDeviceName());
|
||||
routingProtocol.sendJsonPacketToAddress(new JsonDataPacket(tinyjson),addr);
|
||||
break;
|
||||
case KLALBRoutingProtocolJsonData.NODE_INFO_FULL_REQ:
|
||||
// 完整查询：设备名称与描述总是正常响应；denyExternalEndpointQuery 仅隐藏外部端点列表
|
||||
boolean denyEndpoints=controller.getConfigItem()!=null&&controller.getConfigItem().isDenyExternalEndpointQuery();
|
||||
KLALBRoutingProtocolJsonData json=new KLALBRoutingProtocolJsonData(KLALBRoutingProtocolJsonData.NODE_INFO_FULL_RESP,dataobj.getUuid(),denyEndpoints?null:controller.getExternalEndpoints());
|
||||
json.setDeviceName(controller.getIpv6Router().getDeviceName());// 附带本机设备名称
|
||||
if(controller.getConfigItem()!=null) {
|
||||
json.setDeviceDescription(controller.getConfigItem().getDeviceDescription());// 附带本机设备描述
|
||||
}
|
||||
routingProtocol.sendJsonPacketToAddress(new JsonDataPacket(json),addr);
|
||||
break;
|
||||
}
|
||||
} catch (IOException e) {
|
||||
|
||||
@@ -3,11 +3,27 @@ package org.kne.cloud.network.srv6;
|
||||
import java.util.UUID;
|
||||
|
||||
public class KLALBRoutingProtocolJsonData {
|
||||
public static final String OPEN_LINES_REQ="openlinesreq";
|
||||
public static final String OPEN_LINES_RESP="openlinesresp";
|
||||
public static final String NODE_INFO_TINY_REQ="nodeinfotinyreq";// 精简查询：仅设备名称
|
||||
public static final String NODE_INFO_TINY_RESP="nodeinfotinyresp";
|
||||
public static final String NODE_INFO_FULL_REQ="nodeinfofullreq";// 完整查询：开放线路+设备名称+设备描述
|
||||
public static final String NODE_INFO_FULL_RESP="nodeinfofullresp";
|
||||
private String type;
|
||||
private UUID uuid;
|
||||
private Object data;
|
||||
private String deviceName;// 对端设备名称
|
||||
private String deviceDescription;// 对端设备描述
|
||||
public String getDeviceName() {
|
||||
return deviceName;
|
||||
}
|
||||
public void setDeviceName(String deviceName) {
|
||||
this.deviceName = deviceName;
|
||||
}
|
||||
public String getDeviceDescription() {
|
||||
return deviceDescription;
|
||||
}
|
||||
public void setDeviceDescription(String deviceDescription) {
|
||||
this.deviceDescription = deviceDescription;
|
||||
}
|
||||
public String getType() {
|
||||
return type;
|
||||
}
|
||||
@@ -24,6 +40,8 @@ public class KLALBRoutingProtocolJsonData {
|
||||
result = prime * result + ((data == null) ? 0 : data.hashCode());
|
||||
result = prime * result + ((type == null) ? 0 : type.hashCode());
|
||||
result = prime * result + ((uuid == null) ? 0 : uuid.hashCode());
|
||||
result = prime * result + ((deviceName == null) ? 0 : deviceName.hashCode());
|
||||
result = prime * result + ((deviceDescription == null) ? 0 : deviceDescription.hashCode());
|
||||
return result;
|
||||
}
|
||||
@Override
|
||||
@@ -50,6 +68,16 @@ public class KLALBRoutingProtocolJsonData {
|
||||
return false;
|
||||
} else if (!uuid.equals(other.uuid))
|
||||
return false;
|
||||
if (deviceName == null) {
|
||||
if (other.deviceName != null)
|
||||
return false;
|
||||
} else if (!deviceName.equals(other.deviceName))
|
||||
return false;
|
||||
if (deviceDescription == null) {
|
||||
if (other.deviceDescription != null)
|
||||
return false;
|
||||
} else if (!deviceDescription.equals(other.deviceDescription))
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
public KLALBRoutingProtocolJsonData(String type, UUID uuid, Object data) {
|
||||
@@ -60,7 +88,8 @@ public class KLALBRoutingProtocolJsonData {
|
||||
}
|
||||
@Override
|
||||
public String toString() {
|
||||
return "KLALBRoutingProtocolJsonData [type=" + type + ", uuid=" + uuid + ", data=" + data + "]";
|
||||
return "KLALBRoutingProtocolJsonData [type=" + type + ", uuid=" + uuid + ", data=" + data + ", deviceName="
|
||||
+ deviceName + ", deviceDescription=" + deviceDescription + "]";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -60,6 +60,7 @@ public class RouterInfo implements Serializable{
|
||||
return Objects.equals(locator, other.locator) && Objects.equals(neighborAddresses, other.neighborAddresses);
|
||||
}
|
||||
private List<NeighborInfo> neighborAddresses=new ArrayList<>();
|
||||
private String deviceName=""; // 设备名称（广播时携带，描述不广播）
|
||||
private long createTime;
|
||||
|
||||
|
||||
@@ -90,6 +91,14 @@ public class RouterInfo implements Serializable{
|
||||
return neighborAddresses;
|
||||
}
|
||||
|
||||
public String getDeviceName() {
|
||||
return deviceName;
|
||||
}
|
||||
|
||||
public void setDeviceName(String deviceName) {
|
||||
this.deviceName = deviceName;
|
||||
}
|
||||
|
||||
public RouterInfo( long createTime,IPv6AddressGroup locator,long asn) {
|
||||
this.createTime = createTime;
|
||||
this.locator=locator;
|
||||
@@ -106,6 +115,7 @@ public class RouterInfo implements Serializable{
|
||||
for( NeighborInfo neighborInfo :neighborAddresses) {
|
||||
neighborInfo.writeToStream(out);
|
||||
}
|
||||
out.writeUTF(deviceName==null?"":deviceName);
|
||||
}
|
||||
|
||||
protected void writeToChannel(WritableByteChannel dto) throws IOException {
|
||||
@@ -126,6 +136,7 @@ public class RouterInfo implements Serializable{
|
||||
neighborAddresses.add(nif);
|
||||
|
||||
}
|
||||
deviceName=in.readUTF();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -294,6 +294,15 @@ public class SRv6Router {
|
||||
|
||||
private IPv6AddressGroup locator; // SRv6定位器
|
||||
private long asn = new SecureRandom().nextLong(1, Long.MAX_VALUE); // 自治系统号
|
||||
private volatile String deviceName; // 设备名称（随路由信息广播）
|
||||
|
||||
public String getDeviceName() {
|
||||
return deviceName;
|
||||
}
|
||||
|
||||
public void setDeviceName(String deviceName) {
|
||||
this.deviceName = deviceName;
|
||||
}
|
||||
|
||||
public IPv6AddressGroup getLocator() {
|
||||
return locator;
|
||||
|
||||
Reference in New Issue
Block a user