电商平台管理面板

Magalu Dashboard是一个用于管理Magalu Marketplace API所有功能的Web面板,支持产品、订单、客服、问答和聊天等功能的管理。

  • by suissa
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 suissa/magalu-mcp-dashboard

使用说明

Magalu仪表板

Web仪表板,用于管理Magalu Marketplace API的所有功能。

技术

  • ⚡ 维特
  • ⚛️ 反应18
  • 📘 TypeScript
  • 🎨 顺风 CSS
  • 🧩 shadcn/ui
  • 🔄 React查询
  • 🛣️ React路由器

功能

📦 产品

  • 列出所有 SKU
  • 创建新产品
  • 编辑现有产品
  • 管理价格
  • 库存控制
  • 查看优化分数

📋 订单

  • 列出订单
  • 按状态筛选
  • 查看订单详情
  • 管理交付
  • 查看税务报表

🎫 战略空军司令部

  • 列出服务门票
  • 按状态筛选
  • 查看门票详情
  • 更新状态

❓ 问题和答案

  • 列出客户问题
  • 按状态过滤(已回复/未回复)
  • 回答问题
  • 按产品过滤

💬 与客户聊天

  • 列出活动对话
  • 查看信件历史
  • 发送消息
  • 按状态筛选

⚙️ 设置

  • 配置程序API密钥
  • 配置器卖家ID
  • Alternar进入沙箱生产

安装

cd Magalu/dashboard
npm install

配置

创建文件 .env 基于 .env.example:

cp .env.example .env

编辑o .env:

VITE_API_URL=https://sandbox.api.magalu.com

开发

npm run dev

Dashboard可在 http://localhost:5173

构建用于生产

npm run build

优化的文件将会在文件夹中 dist/.

预览da构建

npm run preview

项目结构

dashboard/
├── src/
│   ├── components/
│   │   ├── ui/           # Componentes shadcn/ui
│   │   └── Layout.tsx    # Layout principal
│   ├── pages/
│   │   ├── Products.tsx      # Página de produtos
│   │   ├── Orders.tsx        # Página de pedidos
│   │   ├── Tickets.tsx       # Página de SAC
│   │   ├── Questions.tsx     # Página de perguntas
│   │   ├── Conversations.tsx # Página de chat
│   │   └── Settings.tsx      # Página de configurações
│   ├── lib/
│   │   ├── api.ts        # Cliente HTTP
│   │   └── utils.ts      # Utilitários
│   ├── App.tsx           # Componente principal
│   ├── main.tsx          # Entry point
│   └── index.css         # Estilos globais
├── index.html
├── vite.config.ts
├── tailwind.config.js
└── package.json

使用

  1. 进入设置页面
  2. 设置您的 API 密钥和卖方 ID
  3. 选择环境(Sandbox或Production)
  4. 保存设置
  5. 使用侧边菜单浏览不同的部分

凭据

凭据存储在浏览器的 localStorage 中:

  • magalu_token -API密钥
  • magalu_seller_id -卖家ID
  • magalu_env -Ambiente(沙箱/生产)

API的终点

所有端点都遵循 Magalu API 标准:

  • 产品: /v1/portfolio/skus
  • 订单: /v1/orders
  • 战略空军司令部: /v1/sac/tickets
  • 问题: /v1/questions
  • 聊天: /v1/conversations

自定义

核心

编辑 CSS 变量 src/index.css 个性化主题。

组件

UI 组件在 src/components/ui/ 并且可以根据需要进行定制。

故障排除

CORS错误

在后端中配置 CORS 或在开发过程中使用代理。

无效的凭据

请在设置页面上检查 API 密钥和卖方 ID 是否正确。

错误的环境

确保使用正确的环境(用于测试的沙箱)。

许可证

麻省理工学院