RTX-Dashboard-Template — HTML 后台模板

SHA-256: 859c68155777060b7147286e034c56fd02e2cd531786614ac3a9ea2f3d0a0020

2026-10-15T12:43:23.331Z

# RTX Dashboard Template

A dependency-free starter repository for RTX-branded operational dashboards.
It preserves the light, dense Microsoft-admin-center visual language developed
for Windows Store App Health while separating the presentation shell from any
one product's backend, data, or remediation logic.

![RTX Dashboard Template shown as the Windows Store App Health operations console](docs/images/windows-store-app-health-example.png)

_Windows Store App Health implementation example. The reusable template ships
with representative sample data and no environment-specific backend._

## What is included

- RTX logo in the global header and the Windows four-square icon in the left rail.
- Persistent System, Light, and Dark appearance settings.
- Responsive layout designed and tested for 125% browser zoom.
- Summary metrics, service-health stages, grouped issues, managed assets,
  activity history, details drawer, search, and CSV export.
- A versioned JSON data contract with representative sample data.
- No npm packages, CDN calls, build step, credentials, or environment values.

## Start locally

Use any static web server. Do not open `index.html` directly because browsers
block JSON `fetch` calls from `file://` pages.

```powershell
python -m http.server 8765 --bind 127.0.0.1
```

Then open `http://127.0.0.1:8765/`.

## Create a dashboard from the template

1. Use this repository as a GitHub template, or copy it to a new repository.
2. Update `data/dashboard.json` with the product title, environment, metrics,
   pipeline stages, issues, assets, and bounded activity summaries.
3. Replace the sample JSON adapter in `loadData()` only when a live API is
   required. Keep the rendering contract stable.
4. Replace the sample drawer action with authenticated, allowlisted,
   evidence-gated backend operations.
5. Run the validation workflow and test Light, Dark, and System modes at 125%.

See [docs/CUSTOMIZATION.md](docs/CUSTOMIZATION.md) for the data contract,
component map, security boundary, and release checklist.

## Recommended GitHub location

GitHub repositories cannot be nested in folders. Publish this repository as:

```text
MECMwithShawn/RTX-Dashboard-Template
```

Use repository topics to create the RTX family online:

```text
rtx, dashboard-template, operations-dashboard, fluent-ui, html, powershell
```

After publishing, enable **Settings → General → Template repository**. New RTX
dashboards can then be created with **Use this template** without carrying the
Store App Health product history or backend.

The owner-level `.github` repository supplies shared community-health files to
repositories that do not override them. This template intentionally contains
only its product-specific validation workflow and license.

## Repository layout

```text
assets/rtx-dashboard.css   Design tokens, components, responsive and dark themes
assets/rtx_logo.svg        RTX brand asset
data/dashboard.json        Sample implementation of the stable data contract
docs/CUSTOMIZATION.md      Extension and safety guidance
docs/images/               Reference screenshots of completed implementations
dashboard.js               Rendering, navigation, search, export, and theme logic
index.html                 Accessible application shell
.github/workflows/         Dependency-free validation
```

## License

MIT. See [LICENSE](LICENSE).