- API 路由统一: 移除 /api/h5/,统一 /api/pms/ 入口 - 二进制改名: api-server -> pms-api(与服务名一致) - nginx: 合并 /api/ + /pms/api/ 为 /api/pms/ - 新增 docs/API.md 接口文档 - 后端: CabinetDetail 增加 rssi/pow_fail/address/soc 等字段 - Redis 管道批量读取仓体实时数据(SOC/电压/电流/功率) - DB: 所有 TIMESTAMP 列改为 DATETIME(修复类型不匹配) - 用户管理: 新增创建时间/修改时间列,状态改用 Switch - 角色管理/用户管理: 操作按钮改为图标 - PC 设备详情: 基本信息补全 RSSI/ICCID/电源/地址 - PC 卡片: 通道统计改用 Lucide 图标,颜色统一 - PC 二维码: canvas 渲染,含编号文字,支持右键下载 - H5: 按 uni-app 规范修正导航(navigateTo 替代 reLaunch) - H5: 详情页加返回导航条 - H5: 扫码支持摄像头(jsQR)+ ?id= 参数 - H5: 底部 tabBar 在所有页面常显 - H5: 首页统计改为 6 项(设备/通道/空闲/充电/充满/故障) - H5: 下拉刷新 / 上拉加载 - 产品首页: 添加业务联系 - 文档: 清理过时文件,补充缺失规范章节
3.0 KiB
3.0 KiB
name, description
| name | description |
|---|---|
| features-glob-import | Vite's import.meta.glob for batch importing modules and dynamic imports |
Glob Import
Basic Usage
Import multiple modules using glob patterns:
const modules = import.meta.glob('./dir/*.js')
// Transformed to:
// {
// './dir/foo.js': () => import('./dir/foo.js'),
// './dir/bar.js': () => import('./dir/bar.js'),
// }
Iterate and load:
for (const path in modules) {
modules[path]().then((mod) => {
console.log(path, mod)
})
}
Eager Loading
Load all modules immediately (no dynamic import):
const modules = import.meta.glob('./dir/*.js', { eager: true })
// Transformed to:
// import * as __glob_0 from './dir/foo.js'
// import * as __glob_1 from './dir/bar.js'
// const modules = {
// './dir/foo.js': __glob_0,
// './dir/bar.js': __glob_1,
// }
Multiple Patterns
const modules = import.meta.glob([
'./dir/*.js',
'./another/*.js'
])
Negative Patterns
Exclude files with ! prefix:
const modules = import.meta.glob([
'./dir/*.js',
'!**/bar.js' // Exclude bar.js
])
Named Imports
Import specific exports for tree-shaking:
const modules = import.meta.glob('./dir/*.js', {
import: 'setup'
})
// './dir/foo.js': () => import('./dir/foo.js').then(m => m.setup)
Import default export:
const modules = import.meta.glob('./dir/*.js', {
import: 'default',
eager: true
})
Custom Queries
Import as raw strings or URLs:
const moduleStrings = import.meta.glob('./dir/*.svg', {
query: '?raw',
import: 'default'
})
const moduleUrls = import.meta.glob('./dir/*.svg', {
query: '?url',
import: 'default'
})
Custom queries for plugins:
const modules = import.meta.glob('./dir/*.js', {
query: { foo: 'bar', bar: true }
})
Base Path
Change the base path for imports:
const modules = import.meta.glob('./**/*.js', {
base: './base'
})
// Keys: './dir/foo.js'
// Imports: './base/dir/foo.js'
Important Caveats
- Vite-only feature - Not a web standard
- Patterns must be literals - Cannot use variables
- Relative or absolute - Must start with
./,/, or use an alias - Glob matching - Uses tinyglobby
Dynamic Import with Variables
Limited dynamic import support:
const module = await import(`./dir/${file}.js`)
Rules:
- Must start with
./or../ - Must end with file extension
- Variable represents only one level (no
foo/bar) - Own directory needs filename pattern:
./prefix-${foo}.jsnot./${foo}.js
Practical Example: Loading Route Components
// Lazy load all page components
const pages = import.meta.glob('./pages/*.vue')
const routes = Object.keys(pages).map((path) => {
const name = path.match(/\.\/pages\/(.*)\.vue$/)[1]
return {
path: `/${name.toLowerCase()}`,
component: pages[path] // Lazy loaded
}
})