From e393e1d3b91cb91aefeeea786e32d56d24db754c Mon Sep 17 00:00:00 2001 From: Mahdi Date: Sat, 4 Jul 2026 14:28:57 +0330 Subject: [PATCH] edit SMSpanel --- README.md | 286 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 260 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index c49bce2..5b56f06 100644 --- a/README.md +++ b/README.md @@ -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 ` +- **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)