edit SMSpanel
This commit is contained in:
@@ -1,46 +1,280 @@
|
||||
# customer
|
||||
# Khanegi — اپ مشتری (User Panel)
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
پنل وب/PWA برای **مشتریان خانگی** پلتفرم معاملات طلا و آبشده. این اپ بخش front-end مشتری در monorepo پروژه Khanegi است.
|
||||
|
||||
## Recommended IDE Setup
|
||||
| مورد | مقدار |
|
||||
|------|--------|
|
||||
| نام پکیج | `customer` |
|
||||
| نسخه | `1.0.8` |
|
||||
| فریم‌ورک | Vue 3 + TypeScript |
|
||||
| بیلد | Vite 4 |
|
||||
| State | Pinia |
|
||||
| UI | Ant Design Vue 3 + Vant 4 (موبایل) |
|
||||
| پورت dev | `3100` |
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
---
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
## نقش در معماری Khanegi
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
||||
```
|
||||
Khanegi/
|
||||
├── userModular/ ← این پروژه (پنل مشتری)
|
||||
├── admin/ ← پنل مدیریت
|
||||
└── server/ ← API اصلی (Laravel)
|
||||
```
|
||||
|
||||
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
|
||||
| اتصال | پروتکل | آدرس |
|
||||
|--------|--------|------|
|
||||
| API اصلی | HTTPS + JWT | `{node_server}/customer/*`, `/auth/*` |
|
||||
| قیمت لحظه‌ای | SSE | `{node_server}/api/price/stream` |
|
||||
| تنظیمات tenant | HTTPS | `/get_user` (قبل از لود اپ) |
|
||||
|
||||
1. Disable the built-in TypeScript Extension
|
||||
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
|
||||
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
||||
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|
||||
---
|
||||
|
||||
## Customize configuration
|
||||
## پیش‌نیازها
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
- Node.js 18+
|
||||
- npm، yarn یا pnpm
|
||||
|
||||
## Project Setup
|
||||
---
|
||||
|
||||
```sh
|
||||
## نصب و اجرا
|
||||
|
||||
```bash
|
||||
cd userModular
|
||||
npm install
|
||||
npm run dev # http://localhost:3100
|
||||
npm run build # vite build
|
||||
npm run preview # پیش‌نمایش production
|
||||
npm run type-check # بررسی TypeScript
|
||||
npm run lint # ESLint
|
||||
npm run format # Prettier
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
---
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
## ساختار پروژه
|
||||
|
||||
```
|
||||
userModular/
|
||||
├── src/
|
||||
│ ├── views/ # صفحات اصلی
|
||||
│ │ ├── login/ # ورود / ثبت‌نام
|
||||
│ │ └── base/ # صفحات اپ (mobile/ + desktop/)
|
||||
│ ├── api/ # لایه REST (18 ماژول)
|
||||
│ ├── router/ # مسیرها + guard
|
||||
│ ├── store/ # Pinia (user, wallet, fund, settings, config)
|
||||
│ ├── config/ # بارگذاری tenant config
|
||||
│ ├── app/ # bootstrap.ts, createApp.ts, setupRouter
|
||||
│ ├── utils/ # priceSocket (SSE), authToken, useAxios
|
||||
│ ├── modules/ # PWA manifest
|
||||
│ ├── models/ # TypeScript types
|
||||
│ ├── layouts/ # Layout موبایل/دسکتاپ
|
||||
│ └── sw.ts # Service Worker (PWA)
|
||||
├── public/
|
||||
├── index.html
|
||||
├── vite.config.ts
|
||||
├── uno.config.ts
|
||||
├── themeConfig.ts
|
||||
└── src/mainConfig.ts
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
---
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
## قابلیت‌های اصلی
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
### احراز هویت
|
||||
- ورود با رمز عبور یا SMS
|
||||
- تأیید OTP (`POST /auth/verify`)
|
||||
- ثبت‌نام (`POST /auth/register`) — کد معرف، احراز Jibit (اختیاری)
|
||||
- Provider: `customer`
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
### صفحه اصلی و معاملات
|
||||
- نمودار قیمت و صفحه home
|
||||
- خرید/فروش طلا (`/gold`)
|
||||
- خرید محصول (`/buyProduct`)
|
||||
- قیمت لحظه‌ای از SSE با fallback polling
|
||||
|
||||
### کیف پول و تراکنش‌ها
|
||||
- مانده ریال و طلا (`/wallet`)
|
||||
- تاریخچه تراکنش‌ها (`/transactions`)
|
||||
- برداشت نقدی و فیزیکی
|
||||
- شارژ از درگاه PayPing
|
||||
|
||||
### صندوق (Fund)
|
||||
- لیست صندوق‌ها (`/fund`)
|
||||
- جزئیات صندوق (`/fund/:id`)
|
||||
- واریز/برداشت صندوق
|
||||
|
||||
### سایر
|
||||
- پروفایل کاربر (`/user`)
|
||||
- آدرس (`/address`)
|
||||
- دریافت فیزیکی طلا (`/physicalReceive`)
|
||||
- هشدار قیمت (`/notifyTrigger`)
|
||||
- کسب درآمد / معرف (`/earnMoney`)
|
||||
- کارت هدیه (`/giftCard`)
|
||||
- قوانین و مجوزها (`/rules`, `/permissions`)
|
||||
- آموزش (`/educate`)
|
||||
- درباره ما (`/aboutUs`)
|
||||
|
||||
### حالت فروشگاهی (`is_store`)
|
||||
- سبد خرید (`/api/cart/*`)
|
||||
- حواله (`/customer/havale`)
|
||||
- checkout (`/customer/cart/checkout`)
|
||||
|
||||
---
|
||||
|
||||
## مسیرها (Routes)
|
||||
|
||||
| مسیر | نام | توضیح |
|
||||
|------|-----|--------|
|
||||
| `/login` | login | ورود |
|
||||
| `/home` | home | صفحه اصلی / نمودار |
|
||||
| `/gold` | gold | معامله طلا |
|
||||
| `/buyProduct` | buyProduct | خرید محصول |
|
||||
| `/wallet` | wallet | کیف پول |
|
||||
| `/transactions` | transactions | تراکنش‌ها |
|
||||
| `/user` | user | پروفایل |
|
||||
| `/notifyTrigger` | notifyTrigger | هشدار قیمت |
|
||||
| `/address` | address | آدرس |
|
||||
| `/physicalReceive` | physicalReceive | دریافت فیزیکی |
|
||||
| `/physicalReceive/new` | new | درخواست جدید |
|
||||
| `/earnMoney` | earnMoney | کسب درآمد / معرف |
|
||||
| `/giftCard` | giftCard | کارت هدیه |
|
||||
| `/fund` | fund | صندوق‌ها |
|
||||
| `/fund/:id` | fund_info | جزئیات صندوق |
|
||||
| `/fund/add` | fund_add | صندوق جدید |
|
||||
| `/rules` | rules | قوانین |
|
||||
| `/permissions` | permissions | مجوزها |
|
||||
| `/educate` | educate | آموزش |
|
||||
| `/aboutUs` | aboutUs | درباره ما |
|
||||
|
||||
**ساختار UI:** هر صفحه معمولاً `mobile/` و `desktop/` دارد.
|
||||
|
||||
**Guard:** بدون token به `/login` هدایت می‌شود.
|
||||
|
||||
---
|
||||
|
||||
## اتصال به Backend
|
||||
|
||||
### Bootstrap
|
||||
|
||||
1. `index.html` — loader
|
||||
2. `bootstrap.ts` → `loadAppConfig()` — fetch config tenant
|
||||
3. `setAppConfig()` + `applyAppConfig()` — نگاشت `node_server`
|
||||
4. `startPwaManifest()` — PWA
|
||||
5. mount Vue؛ اگر token باشد: `getUserInfo()` + `initPriceRealtimeChannel()`
|
||||
|
||||
### REST API
|
||||
|
||||
- **Base URL:** `getConfigApp('node_server')` ← فیلد `node_server` در JSON tenant
|
||||
- **Token:** `customer_session_token` (ثابت) یا `{name}_app_token` (legacy)
|
||||
- **Header:** `Authorization: Bearer <token>`
|
||||
- **Axios:** `src/utils/useAxios.ts` — 401 → logout؛ verify با `/customer/me`
|
||||
|
||||
| پیشوند | کاربرد |
|
||||
|--------|--------|
|
||||
| `/auth/*` | login, verify, register |
|
||||
| `/customer/*` | me, order, wallet, fund, address |
|
||||
| `/api/*` | candle, price/last, city, get_settings |
|
||||
|
||||
### قیمت لحظه‌ای (SSE)
|
||||
|
||||
- **فایل:** `src/utils/priceSocket.ts`
|
||||
- **Endpoint:** `GET /api/price/stream` (EventSource)
|
||||
- **Fallback:** polling هر 10 ثانیه اگر SSE قطع شود
|
||||
- **Reconnection:** exponential backoff (3s → 30s)
|
||||
- در حالت non-store نیاز به JWT customer دارد
|
||||
|
||||
### Multi-tenant Config
|
||||
|
||||
URLهای failover برای `/get_user`:
|
||||
|
||||
- `https://nerkh.gold/get_user`
|
||||
- `https://tablo.talasevin.ir/get_user`
|
||||
- `https://abshode-service.montgit.ir/server/get_user`
|
||||
- `http://212.23.201.173:8381/get_user`
|
||||
- `http://91.212.174.137:4040/server/get_user`
|
||||
|
||||
| فیلد JSON | معادل اپ |
|
||||
|-----------|----------|
|
||||
| `node_server` | API base |
|
||||
| `name`, `name_fa`, `avatar` | برند |
|
||||
| `color`, `background_color` | تم |
|
||||
|
||||
Cache: `localStorage.CONFIG_Success_URL` + cookie `APP_CONFIG_CACHE`
|
||||
|
||||
---
|
||||
|
||||
## Pinia Stores
|
||||
|
||||
| Store | نقش |
|
||||
|-------|-----|
|
||||
| `userStore` | اطلاعات کاربر، auth |
|
||||
| `walletStore` | مانده کیف پول |
|
||||
| `fundStore` | صندوق‌ها |
|
||||
| `settingsStore` | تنظیمات اپ |
|
||||
| `configStore` | config tenant |
|
||||
| `useAuthStore` | وضعیت احراز هویت |
|
||||
|
||||
---
|
||||
|
||||
## API Modules
|
||||
|
||||
| فایل | Endpoints |
|
||||
|------|-----------|
|
||||
| `login.ts` | `/auth/login`, `/auth/verify`, `/auth/register` |
|
||||
| `me.ts` | `/customer/me`, `/customer/me/update` |
|
||||
| `home.ts` | نمودار، قیمت |
|
||||
| `order.ts` | `/customer/order` |
|
||||
| `wallet.ts` | `/customer/wallet/*` |
|
||||
| `fund.ts` | `/customer/fund/*` |
|
||||
| `products.ts` | محصولات |
|
||||
| `address.ts` | `/customer/address` |
|
||||
| `giftCard.ts` | `/customer/giftcard/use` |
|
||||
| `earnMoney.ts` | معرف |
|
||||
| `triggerPrice.ts` | هشدار قیمت |
|
||||
| `physicalreceive.ts` | دریافت فیزیکی |
|
||||
| `configuration.ts` | `/api/get_settings` |
|
||||
|
||||
---
|
||||
|
||||
## PWA
|
||||
|
||||
- `vite-plugin-pwa` با `injectManifest`
|
||||
- Service Worker: `src/sw.ts`
|
||||
- Manifest: نام و آیکون از config tenant
|
||||
- `display: standalone`, `orientation: portrait-primary`
|
||||
|
||||
---
|
||||
|
||||
## فایل‌های Config مهم
|
||||
|
||||
| فایل | نقش |
|
||||
|------|-----|
|
||||
| `vite.config.ts` | Vite، PWA، UnoCSS، port 3100 |
|
||||
| `src/config/load-config.ts` | fetch config ریموت |
|
||||
| `src/config/app-config.ts` | نگاشت tenant |
|
||||
| `src/themeConfig.ts` | token keys، رنگ‌ها |
|
||||
| `src/utils/useAxios.ts` | Axios + auth |
|
||||
| `src/router/index.ts` | routes |
|
||||
| `src/app/bootstrap.ts` | راه‌اندازی اپ |
|
||||
| `src/sw.ts` | Service Worker |
|
||||
|
||||
---
|
||||
|
||||
## نکات توسعه
|
||||
|
||||
1. **دو لایه realtime:** REST روی Laravel؛ قیمت از SSE با fallback polling.
|
||||
2. **Multi-tenant:** یک build برای چند برند؛ رفتار با `settings` و `is_store` تغییر می‌کند.
|
||||
3. **Responsive:** هر view دو نسخه `mobile/` و `desktop/` دارد.
|
||||
4. **Token persistence:** `customer_session_token` برای جلوگیری از گم شدن token هنگام به‌روزرسانی config.
|
||||
5. **انیمیشن:** Lottie (`@lottiefiles/dotlottie-vue`)، Odometer برای اعداد.
|
||||
|
||||
---
|
||||
|
||||
## مستندات مرتبط
|
||||
|
||||
- [README سرور Laravel](../server/README.md)
|
||||
- [README پنل ادمین](../admin/README.md)
|
||||
- [README نمای کلی](../README.md)
|
||||
|
||||
Reference in New Issue
Block a user