name: pigxui-skill version: 1.0.0 description: PigX UI Pro 前端開發指南 - Vue 3 + TypeScript + Element Plus。當用戶提到 PigX UI、PigX 前端、lgb-mgui 專案、Vue 3 企業級後臺開發、Element Plus 後臺開發時使用此技能。

PigX UI 前端開發 Skill

PigX UI Pro 企業級前端開發指南 - Vue 3 + TypeScript + Element Plus

專案資訊

本地專案路徑

D:\WorkSpace\my_workspace\lhb\lgb-mgui

官方文件

• 文件入口: https://docs.pig4cloud.com（需要微信掃碼登入）

常用命令

# 安裝依賴
pnpm install

# 啟動開發服務 (預設埠 8888)
pnpm dev

# 生產構建
pnpm build

# Docker 構建
pnpm build:docker

# ESLint 檢查修復
pnpm lint:eslint

# Prettier 格式化
pnpm prettier

專案結構

lgb-mgui/
├── src/
│   ├── api/              # API 請求定義
│   ├── assets/           # 靜態資源
│   ├── components/       # 可複用元件（全域性自動註冊）
│   ├── directive/        # 自定義指令
│   ├── hooks/            # 組合式函式
│   ├── i18n/             # 國際化配置
│   ├── layout/           # 佈局元件
│   ├── router/           # 路由配置（後端控制）
│   ├── stores/           # Pinia 狀態管理
│   ├── theme/            # 主題樣式
│   ├── types/            # TypeScript 型別定義
│   ├── utils/            # 工具函式
│   ├── views/            # 頁面元件
│   ├── App.vue           # 根元件
│   └── main.ts           # 入口檔案
├── public/               # 公共資源
├── vite.config.mts       # Vite 配置
├── tailwind.config.js    # Tailwind 配置
└── tsconfig.json         # TypeScript 配置

核心開發規範

1. API 呼叫規範

所有 API 必須放在 src/api/ 目錄下：

// src/api/admin/audit.ts
import request from '/@/utils/request';

export function fetchList(query?: Object) {
  return request({
    url: '/admin/audit/page',
    method: 'get',
    params: query,
  });
}

使用方式：

const { data } = await fetchList(query);

自動處理的請求頭： - Authorization - Token 自動注入 - TENANT-ID - 租戶 ID 自動注入 - 請求/響應加解密

2. 路由架構

• 後端控制路由：路由由後端 API 返回，前端動態注入
• 兩級巢狀：路由最多支援兩級巢狀（keep-alive 相容）
• 動態載入：使用 import.meta.glob 動態載入元件

3. 狀態管理 (Pinia)

// src/stores/userInfo.ts
import { defineStore } from 'pinia';

export const useUserInfoStore = defineStore('userInfo', {
  state: () => ({
    user: null,
    token: '',
  }),
  actions: {
    async login(credentials) {
      // ...
    },
  },
  persist: true,
});

4. 元件規範

使用 <script setup> 語法，新增 name 屬性以支援 keep-alive：

<script setup lang="ts" name="MyComponent">
// 元件邏輯
</script>

5. 樣式規範

Tailwind CSS：

<div class="flex items-center justify-between p-4 bg-white dark:bg-gray-800">
</div>

暗色模式：

[data-theme='dark'] {
  // 暗色樣式
}

常見開發任務

新增頁面

1. 在 src/views/ 下建立頁面元件
2. 後端配置選單和路由
3. 在 src/api/ 中定義相關 API

新增 API 介面

// src/api/module/example.ts
import request from '/@/utils/request';

export function getList(params: any) {
  return request({
    url: '/module/example/list',
    method: 'get',
    params,
  });
}

新增 Store

// src/stores/myStore.ts
import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', {
  state: () => ({ items: [] }),
  getters: {
    itemCount: (state) => state.items.length,
  },
  actions: {
    async fetchItems() {}
  },
  persist: true,
});

注意事項

1. 路徑別名：/@/ 指向 src/ 目錄
2. 自動匯入：Vue、Vue Router、Pinia API 自動匯入
3. Token 管理：自動注入 Authorization 頭
4. 租戶支援：自動注入 TENANT-ID 頭
5. 請求加密：預設開啟，可通過 Enc-Flag: false 關閉

參考文件

• Vue 3 文件: https://vuejs.org
• Element Plus 文件: https://element-plus.org
• Tailwind CSS 文件: https://tailwindcss.com

參考資料

更多前端文件請參考 references/ 目錄下的文件檔案。

本技能來自小蔥技能站7w4.net。

內容組織清晰，資訊覆蓋面較廣，技術規範說明詳細，整體質量良好。主要優點是專案結構和技術棧介紹完整，開發規範實用；不足之處在於實際程式碼示例較少且部分內容不完整，參考文件中混雜了較多與前端開發關聯不大的內容，對提升開發效率的幫助有限。