Angular 后台管理界面模板，仓库描述为在线商店后台
Angular后台
estore-admin-project — Angular 后台模板
作者 samicheal
基于 Angular 的在线商店后台管理模板，采用 Argon Dashboard 的界面结构与示例页面，适合作为电商后台的界面起点。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
目前有 1 张原始预览，可打开完整图片查看设计细节。
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-10-03查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
包含仪表盘、图标、用户资料、表格、地图、登录、注册等示例页面
按 admin-layout 与 auth-layout 划分管理布局与认证布局
导航由 navbar、sidebar、footer 组件构成，路由文件集中管理
样式使用 SASS 组织，含 core、custom、angular-differences 等目录
图表数据集中在 src/app/variables/charts.ts 中定义
模板详细介绍
该模板是一个 Angular 编写的在线商店后台管理界面模板，仓库描述为「an angular online-store admin template」。从 README 内容看，它实际基于 Creative Tim 的 Argon Dashboard Angular，提供后台仪表盘常见的页面骨架与组件示例。
模板包含仪表盘、图标、用户资料、表格、地图、登录与注册等示例页面，并按 admin-layout 与 auth-layout 划分两套布局，分别承载登录后的管理页面与登录/注册等认证页面。导航结构由 navbar、sidebar、footer 三个组件组成，页面路由集中在 app.routing.ts 与各布局的 routing 文件中。
样式基于 SASS 组织，src/assets/scss 下分为 angular-differences、core、custom 等目录，并带有 argon.scss 入口，可通过修改变量调整配色。图表数据在 src/app/variables/charts.ts 中集中定义。
需要注意的是，仓库中的 README 与预览图来自 Argon Dashboard Angular 项目，模板本身并未在资料中说明针对电商业务（如商品、订单、库存）做过专门改造，因此更适合作为通用后台界面起点，而非开箱即用的电商业务系统。
Angular后台
适合你的项目吗？
适用场景
- 搭建电商后台的仪表盘与数据表格页面原型
- 为管理端准备登录、注册等认证页面布局
- 在 Angular 项目中复用 sidebar、navbar、footer 等后台导航组件
- 作为通用后台界面起点，再按业务补充商品、订单等模块
适合人群
- 使用 Angular 开发后台管理界面的前端项目
- 需要现成仪表盘与表格页面骨架的开发者
- 希望基于 SASS 变量调整后台配色的团队
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
README 的快速开始指向 Argon Dashboard Angular 的下载与克隆地址，模板仓库本身未提供独立安装说明
- 2
仓库 README 与预览图来自 Argon Dashboard Angular，实际内容以仓库代码为准
- 3
演示图片、字体、图标等第三方素材需按各自许可单独核对
- 4
代码采用 MIT 许可，分发时需保留版权声明与许可声明
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供；担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 代码以 MIT 许可发布，可自由使用、修改、分发，但必须保留版权声明与许可声明。
- 使用与分发时须保留 Creative Tim 的版权归属声明。
- README 引导用户前往 Creative Tim 产品页下载，该页面可能包含付费或增值产品，免费范围以 MIT 许可的仓库代码为准。
- Creative Tim 另有付费高级产品，不属于本 MIT 免费模板范围，使用前需自行区分。
- README 中的推广与联盟链接属于外部商业服务，与模板代码许可无关。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-angular/blob/master/LICENSE.md)
README 原文
Copyright 2018 Creative Tim (https://www.creative-tim.com/?ref=ada-github-readme)
README 原文
- [Download from Creative Tim](https://www.creative-tim.com/product/argon-dashboard-angular?ref=ada-github-readme).
README 原文
- [Premium Products](https://www.creative-tim.com/bootstrap-themes/premium?ref=ada-github-readme) from Creative Tim
README 原文
https://github.com/samicheal/estore-admin-project/blob/master/LICENSE.mdhttps://github.com/samicheal/estore-admin-project/blob/master/README.md- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=ada-github-readme) (earn money)
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较少 · 53 / 100
- 技术栈
- Angular
- 网站类型
- 后台
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2022-06-03
- 截图检查日期
- 2026-10-03
目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。
目录记录的主要技术栈是 Angular。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: efd4353b97992886e58ae9150dca1f8e6ca4e7d6fc739d6b49878f91aa48db7d
2026-10-03T06:41:43.084Z
来源文件 / 仓库# [Argon Dashboard Angular](https://demos.creative-tim.com/argon-dashboard-angular/?ref=ada-github-readme) [](https://twitter.com/home?status=Argon%20Dashboard%20is%20a%20Free%20Bootstrap%20and%20Angular%20Dashboard%20made%20using%20angular-cli%20%E2%9D%A4%EF%B8%8F%0Ahttps%3A//demos.creative-tim.com/argon-dashboard-angular%20%23angular%20%23angular-cli%20%23argon%20%23argondesign%20%23angulardashboard%20%23argonangular%20%23angulardesign%20%23bootstrap%20%23design%20%23uikit%20%23freebie%20%20via%20%40CreativeTim)   [](https://github.com/creativetimofficial/argon-dashboard-angular/issues?q=is%3Aopen+is%3Aissue) [](https://github.com/creativetimofficial/argon-dashboard-angular/issues?q=is%3Aissue+is%3Aclosed) [](https://gitter.im/creative-tim-general/Lobby) [](https://discord.gg/E4aHAQy)  **Fully Coded Components** Argon Dashboard Angular is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in color, that you can easily modify using SASS files. You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. This Dashboard is coming with pre-built examples, so the development process is seamless, switching from our pages to the real website is very easy to be done. Every element has multiple states for colors, styles, hover, focus, that you can easily access and use. **Complex Documentation** Each element is well presented in a very complex documentation. You can read more about the idea behind this [dashboard here](https://demos.creative-tim.com/argon-dashboard-angular/documentation/tutorial?ref=ada-github-readme). You can check the [components here](https://demos.creative-tim.com/argon-dashboard-angular/documentation/alerts?ref=ada-github-readme) and the [foundation here](https://demos.creative-tim.com/argon-dashboard-angular/documentation/colors?ref=ada-github-readme). **Example Pages** If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project. ## Table of Contents * [Versions](#versions) * [Demo](#demo) * [Quick Start](#quick-start) * [Documentation](#documentation) * [File Structure](#file-structure) * [Browser Support](#browser-support) * [Resources](#resources) * [Reporting Issues](#reporting-issues) * [Licensing](#licensing) * [Useful Links](#useful-links) ## Versions [<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/html-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/argon-dashboard)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/argon-dashboard-react)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/angular-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/argon-dashboard-angular)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/nodejs-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/argon-dashboard-nodejs)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/laravel_logo.png" width="60" height="60" style="background:white"/>](https://www.creative-tim.com/product/argon-dashboard-laravel)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/sketch-logo.jpg" width="60" height="60" />](https://github.com/creativetimofficial/argon-dashboard/tree/sketch) | HTML | React | Angular | | --- | --- | --- | | [](https://www.creative-tim.com/product/argon-dashboard?ref=ada-github-readme) | [](https://www.creative-tim.com/product/argon-dashboard-react?ref=ada-github-readme) | [](https://www.creative-tim.com/product/argon-dashboard-angular?ref=ada-github-readme) | NodeJS | Laravel | | --- | --- | | [](https://www.creative-tim.com/product/argon-dashboard-nodejs?ref=ada-github-readme) | [](https://www.creative-tim.com/product/argon-dashboard-laravel?ref=ada-github-readme) | ## Demo | Dashboard Page | Icons Page | User Profile Page | Tables Page | Login Page | Register Page | | --- | --- | --- | --- | --- | --- | | [](https://demos.creative-tim.com/argon-dashboard-angular/dashboard?ref=ada-github-readme) | [](https://demos.creative-tim.com/argon-dashboard-angular/icons?ref=ada-github-readme) | [](https://demos.creative-tim.com/argon-dashboard-angular/user?ref=ada-github-readme) | [](https://demos.creative-tim.com/argon-dashboard-angular/tables?ref=ada-github-readme) | [](https://demos.creative-tim.com/argon-dashboard-angular/login?ref=ada-github-readme) | [](https://demos.creative-tim.com/argon-dashboard-angular/register?ref=ada-github-readme) [View More](https://demos.creative-tim.com/argon-dashboard-angular/dashboard) ## Quick start - [Download from Github](https://github.com/creativetimofficial/argon-dashboard-angular/archive/master.zip). - [Download from Creative Tim](https://www.creative-tim.com/product/argon-dashboard-angular?ref=ada-github-readme). - Clone the repo: `git clone https://github.com/creativetimofficial/argon-dashboard-angular.git`. ## Documentation The documentation for the Argon Dashboard Angular is hosted at our [website](https://demos.creative-tim.com/argon-dashboard-angular/documentation/tutorial?ref=ada-github-readme). ## File Structure Within the download you'll find the following directories and files: ``` argon-dashboard-angular ├── CHANGELOG.md ├── README.md ├── angular.json ├── e2e ├── package.json ├── src │ ├── app │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── app.routing.ts │ │ ├── components │ │ │ ├── components.module.spec.ts │ │ │ ├── components.module.ts │ │ │ ├── footer │ │ │ │ ├── footer.component.html │ │ │ │ ├── footer.component.scss │ │ │ │ ├── footer.component.spec.ts │ │ │ │ └── footer.component.ts │ │ │ ├── navbar │ │ │ │ ├── navbar.component.html │ │ │ │ ├── navbar.component.scss │ │ │ │ ├── navbar.component.spec.ts │ │ │ │ └── navbar.component.ts │ │ │ └── sidebar │ │ │ ├── sidebar.component.html │ │ │ ├── sidebar.component.scss │ │ │ ├── sidebar.component.spec.ts │ │ │ └── sidebar.component.ts │ │ ├── layouts │ │ │ ├── admin-layout │ │ │ │ ├── admin-layout.component.html │ │ │ │ ├── admin-layout.component.scss │ │ │ │ ├── admin-layout.component.spec.ts │ │ │ │ ├── admin-layout.component.ts │ │ │ │ ├── admin-layout.module.ts │ │ │ │ └── admin-layout.routing.ts │ │ │ └── auth-layout │ │ │ ├── auth-layout.component.html │ │ │ ├── auth-layout.component.scss │ │ │ ├── auth-layout.component.spec.ts │ │ │ ├── auth-layout.component.ts │ │ │ ├── auth-layout.module.ts │ │ │ └── auth-layout.routing.ts │ │ ├── pages │ │ │ ├── dashboard │ │ │ │ ├── dashboard.component.html │ │ │ │ ├── dashboard.component.scss │ │ │ │ ├── dashboard.component.spec.ts │ │ │ │ └── dashboard.component.ts │ │ │ ├── icons │ │ │ │ ├── icons.component.html │ │ │ │ ├── icons.component.scss │ │ │ │ ├── icons.component.spec.ts │ │ │ │ └── icons.component.ts │ │ │ ├── login │ │ │ │ ├── login.component.html │ │ │ │ ├── login.component.scss │ │ │ │ ├── login.component.spec.ts │ │ │ │ └── login.component.ts │ │ │ ├── maps │ │ │ │ ├── maps.component.html │ │ │ │ ├── maps.component.scss │ │ │ │ ├── maps.component.spec.ts │ │ │ │ └── maps.component.ts │ │ │ ├── register │ │ │ │ ├── register.component.html │ │ │ │ ├── register.component.scss │ │ │ │ ├── register.component.spec.ts │ │ │ │ └── register.component.ts │ │ │ ├── tables │ │ │ │ ├── tables.component.html │ │ │ │ ├── tables.component.scss │ │ │ │ ├── tables.component.spec.ts │ │ │ │ └── tables.component.ts │ │ │ └── user-profile │ │ │ ├── user-profile.component.html │ │ │ ├── user-profile.component.scss │ │ │ ├── user-profile.component.spec.ts │ │ │ └── user-profile.component.ts │ │ └── variables │ │ └── charts.ts │ ├── assets │ │ ├── fonts │ │ ├── img │ │ ├── scss │ │ │ ├── angular-differences │ │ │ ├── argon.scss │ │ │ ├── core │ │ │ └── custom │ │ └── vendor │ ├── browserslist │ ├── environments │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.scss │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── tslint.json ├── tsconfig.json └── tslint.json ``` ## Browser Support At present, we officially aim to support the last two versions of the following browsers: <img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/chrome-logo.png?raw=true" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/firefox-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/edge-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/safari-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/opera-logo.png" width="64" height="64"> ## Resources - Demo: <https://demos.creative-tim.com/argon-dashboard-angular/dashboard?ref=ada-github-readme> - Download Page: <https://www.creative-tim.com/product/argon-dashboard-angular?ref=ada-github-readme> - Documentation: <https://demos.creative-tim.com/argon-dashboard-angular/documentation/tutorial?ref=ada-github-readme> - License Agreement: <https://www.creative-tim.com/license?ref=ada-github-readme> - Support: <https://www.creative-tim.com/contact-us?ref=ada-github-readme> - Issues: [Github Issues Page](https://github.com/creativetimofficial/argon-dashboard-angular/issues?ref=ada-github-readme) ## Reporting Issues We use GitHub Issues as the official bug tracker for the Material Kit. Here are some advices for our users that want to report an issue: 1. Make sure that you are using the latest version of the Material Kit. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/?ref=ada-github-readme). 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. ## Licensing - Copyright 2018 Creative Tim (https://www.creative-tim.com/?ref=ada-github-readme) - Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-angular/blob/master/LICENSE.md) ## Useful Links - [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w?ref=creativetim) - [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=ada-github-readme) (earn money) - [Blog Creative Tim](http://blog.creative-tim.com/?ref=ada-github-readme) - [Free Products](https://www.creative-tim.com/bootstrap-themes/free?ref=ada-github-readme) from Creative Tim - [Premium Products](https://www.creative-tim.com/bootstrap-themes/premium?ref=ada-github-readme) from Creative Tim - [React Products](https://www.creative-tim.com/bootstrap-themes/react-themes?ref=ada-github-readme) from Creative Tim - [Angular Products](https://www.creative-tim.com/bootstrap-themes/angular-themes?ref=ada-github-readme) from Creative Tim - [VueJS Products](https://www.creative-tim.com/bootstrap-themes/vuejs-themes?ref=ada-github-readme) from Creative Tim - [More products](https://www.creative-tim.com/bootstrap-themes?ref=ada-github-readme) from Creative Tim - Check our Bundles [here](https://www.creative-tim.com/bundles?ref=ada-github-readme) ### Social Media Twitter: <https://twitter.com/CreativeTim?ref=creativetim> Facebook: <https://www.facebook.com/CreativeTim?ref=creativetim> Dribbble: <https://dribbble.com/creativetim?ref=creativetim> Instagram: <https://www.instagram.com/CreativeTimOfficial?ref=creativetim>
看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
ngx-admin
Customizable admin dashboard template based on Angular 10+
Angular · 后台
material-angular-dashboard
Material Angular Admin Template
Angular · 后台
ng-devui-admin
Customizable admin dashboard template based on Angular and DevUI
Angular · 后台
angular-material-template
Responsive Angular Material admin application template built on top of Angular, Angular Material and other ope…
Angular · 后台
lightning-admin-angular
A mobile first design of a responsive admin template built with angular and bootstrap
Angular · 后台
StarAdmin-Free-Angular-Admin-Template
StarAdmin Free Angular Admin Template 是一个基于 Angular 7 和 Bootstrap 4 的免费后台管理模板，由 BootstrapDash 团队维护。
Angular · 后台