mall-admin-web

Follow these steps to set up the development environment:

1. Prerequisites:

   • Install Node.js (v20 or higher recommended, e.g., v20 LTS).
   • Ensure you have a backend environment running (refer to the mall backend repository).

2. Configure API URL: Edit the .env.development file to set VITE_BASE_SERVER_URL based on your backend:

   • Local Backend: Use your local backend API address.
   • Online API (No backend setup required): Set VITE_BASE_SERVER_URL to https://admin-api.macrozheng.com.
   • Microservices (mall-swarm): Set VITE_BASE_SERVER_URL to http://localhost:8201/mall-admin (requires gateway access).

3. Execution:

   # Install dependencies
   npm install
   
   # Run the development server
   npm run dev

4. Access: Open http://localhost:5173 in your browser.

The application entrypoint src/main.ts initializes the Vue application by integrating Pinia for state management, Vue Router for navigation, and a custom SVG icon system.

Key initialization steps include:

• State Management: Uses pinia with the pinia-plugin-persistedstate plugin to enable automatic state persistence.
• Routing: Uses vue-router with pre-defined navigation guards imported from @/router/guard.
• Icon System: Uses setupSvgIcon to register SVG icons, which relies on the virtual:svg-icons-register module for icon registration.
• Styling: Loads global SCSS styles and normalize.css for cross-browser consistency.

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import router from './router'
import '@/styles/index.scss'
import 'normalize.css/normalize.css'
import { setupSvgIcon } from './icons'
import 'virtual:svg-icons-register'
import '@/router/guard'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App)
const pinia = createPinia()

// Enable state persistence
pinia.use(piniaPluginPersistedstate)

app.use(pinia)
app.use(router)
setupSvgIcon(app)
app.mount('#app')

The project uses a flat configuration format for ESLint, specifically optimized for Vue and TypeScript via @vue/eslint-config-typescript.

By default, the configuration targets files with the following extensions:

• .ts
• .mts
• .tsx
• .vue

It applies the following rule sets:

1. pluginVue.configs['flat/essential']: Essential Vue linting rules.
2. vueTsConfigs.recommended: Recommended TypeScript rules for Vue.
3. Custom rules: Currently disables 'vue/multi-word-component-names' to allow single-word component names.

import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  // Global ignores
  // pluginVue.configs['flat/essential'],
  // vueTsConfigs.recommended,
  {
    name: 'app/custom-rules',
    rules: {
      'vue/multi-word-component-names': 'off',
    },
  },
)

These types are used for filtering order lists and providing data for specific order actions:

• OrderQueryParam: Used for searching/filtering orders. Extends PageParam and includes orderSn, receiverKeyword, status, orderType, sourceType, and createTime.
• OmsOrderDeliveryParam: Used when shipping an order. Requires orderId and optional deliveryCompany and deliverySn.
• OmsReceiverInfoParam: Used for updating or managing receiver details. Requires orderId and status.
• OmsMoneyInfoParam: Used for managing order financial adjustments. Requires orderId, freightAmount, discountAmount, and status.

export type OrderQueryParam = PageParam & {
  orderSn?: string
  receiverKeyword?: string
  status?: number
  orderType?: number
  sourceType?: number
  createTime?: string
}

export type OmsOrderDeliveryParam = {
  orderId: number
  deliveryCompany?: string
  deliverySn?: string
}

export type OmsReceiverInfoParam = {
  orderId: number
  receiverName?: string
  receiverPhone?: string
  receiverPostCode?: string
  receiverDetailAddress?: string
  receiverProvince?: string
  receiverCity?: string
  receiverRegion?: string
  status: number
}

export type OmsMoneyInfoParam = {
  orderId: number
  freightAmount: number
  discountAmount: number
  status: number
}