更新记录

1.0.0（2026-06-02） 下载此版本

更新日志

[1.0.0] - 2026-06-02

新增

• 完整的 uni.request 封装，支持请求拦截、响应拦截
• 基于 Pinia 的状态管理，支持本地持久化
• 多语言国际化（i18n）支持，包含中文、英文、日文
• 表格组件类库（RemoteTable、LocalTable）
• 权限控制 Access 组件
• 项目模板 demo 页面

文档

• 新增 README.md
• 新增 PLUGIN.md 插件市场说明
• 新增 PUBLISH.md 发布指南
• 新增 UPLOAD_GUIDE.md 网站上传指南
• 完善 doc/ 目录下的各个模块文档

其他

• 准备插件市场发布文件
• 准备插件图标
• 清理 manifest.json 中的 appid

平台兼容性

uni-app(3.7.8)

uni-app x(3.7.8)

其他

uniapp-tpl

基于 uni-app 的多端开发模板，包含完整的请求封装、状态管理、国际化（i18n）、表格组件与权限控制能力。

特性

• 📦 完整的请求封装（uni.request + 响应拦截）
• 📦 统一的状态管理（Pinia + uni.setStorageSync 持久化）
• 🌍 国际化（i18n）支持（zh-Hans / zh-Hant / en / ja）
• 📊 表格类库（RemoteTable / LocalTable，含事件、筛选、树形数据）
• 🔐 权限控制（权限点验证、Access 组件、checkaccessHook）
• 📱 多端适配（App / H5 / 微信小程序 / 支付宝小程序等）

技术栈

• 框架：uni-app (Vue3 + Composition API)
• 状态管理：Pinia
• 国际化：vue-i18n
• 本地存储：uni.setStorageSync

目录结构

├── components/         # 公共组件
│   └── Access.vue      # 权限控制组件
├── doc/                # 文档
│   ├── request.md      # 请求层文档
│   ├── store.md        # 状态管理文档
│   ├── table.md        # 表格类库文档
│   ├── i18n.md         # 国际化文档
│   └── ...
├── locale/             # 国际化
├── pages/              # 页面
│   └── demo/table/     # 表格+权限演示
├── request/            # 请求层
├── store/              # 状态管理
├── table/              # 表格类库
├── static/             # 静态资源
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

快速开始

安装与运行

1. 使用 HBuilderX 导入项目
2. 点击"运行"→"运行到浏览器"/"运行到小程序模拟器"/"运行到手机模拟器"
3. 也可以使用 CLI 运行（需自行配置）

初始化请求层

在 main.js 中已预置：

import { setupRequest } from './request/index'

const { getApi, request } = setupRequest({
  baseURL: 'https://api.example.com',
  timeout: 30000
})

使用 Store

方式一：兼容旧调用风格（推荐用于工具/请求层）

import { User, App } from '@/store'

console.log(User.token())
console.log(App.locale())

方式二：Vue3 标准 Pinia（推荐用于组件内）

import { useAppStore, useUserStore } from '@/store'

const appStore = useAppStore()
const userStore = useUserStore()

appStore.setLocale('en')

使用 i18n

import { registerLocaleMessages, setI18nLocale } from '@/locale/index'

registerLocaleMessages('en', {
  'common.submit': 'Submit'
})

setI18nLocale('en')

使用表格与权限

<template>
  <view>
    <Access :ctx="tableCtx" point="add">
      <button type="primary">新增</button>
    </Access>

    <view>当前请求：{{ JSON.stringify(tableCtx.request()) }}</view>

    <button @click="tableCtx.search()">查询</button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createTableState, LocalTable, createCheckAccessHook, resourceAccessItems } from '@/table'
import Access from '@/components/Access.vue'

const state = ref(createTableState({ name: 'users', defaultPageSize: 20 }))
const tableCtx = ref(null)

const accessItems = resourceAccessItems('users')
const checkaccessHook = createCheckAccessHook(accessItems)

const mockData = [
  { id: 1, name: '张三', role: '管理员' },
  { id: 2, name: '李四', role: '普通用户' }
]

const controller = new LocalTable({
  name: 'users',
  fetch: () => mockData
}, checkaccessHook)

onMounted(() => {
  const result = controller.load(
    { name: 'users', fetch: () => mockData },
    state.value,
    (next) => Object.assign(state.value, next),
    1
  )
  tableCtx.value = result.ctx
  result.ctx.search()
})
</script>

也可以打开项目中的 /pages/demo/table/table 直接体验完整的权限与表格演示。

主要模块说明

request - 请求层

• 核心文件：request/request.js
• 请求中心：request/index.js
• 功能：
  • 统一 Token / Locale 头注入
  • 响应拦截与错误处理
  • 请求中心可替换、可扩展
  • 接口地址集中管理

更多见：doc/request.md

store - 状态管理

• 核心文件：store/index.js
• 内置 Store：
  • User：用户、token、权限、退出
  • App：语言、主题、全局状态
  • Layout：页签、菜单等布局状态
• 持久化：uni.setStorageSync

更多见：doc/store.md

table - 表格类库

• 核心文件：table/index.js
• 内置能力：
  • RemoteTable：服务端分页
  • LocalTable：本地数据分页、筛选、树形
  • 事件系统：registerEvent / publish
  • 条件筛选：registerConditionHandler
  • 树形转换：buildTreeByPid
  • 权限 Hook：createCheckAccessHook

更多见：doc/table.md

locale - 国际化

• 核心文件：locale/index.js
• 内置语言：
  • en
  • zh-Hans
  • zh-Hant
  • ja
• 扩展能力：
  • registerLocaleMessages 按语言追加
  • mergeLocaleMessages 批量合并
  • defineLocaleMessages 合并多个 json

更多见：doc/i18n.md

Access - 权限组件

• 文件：components/Access.vue
• 支持：
  • ctx 接入表格权限
  • 无 ctx 时回退到全局 User
  • point 传入权限点 key 或路径

<Access :ctx="tableCtx" point="add">
  <button>新增</button>
</Access>

示例页面

项目自带演示页面：

约定与规范

• 语言文件统一使用 { "key": "value" } 结构
• 新模块建议从统一入口导入（request/index.js, store/index.js, table/index.js）
• 页面路径统一在 pages.json 注册
• 新增 i18n 语言时，建议在 locale/ 下新建 {lang}.json

文档索引

• 请求层：doc/request.md
• 状态管理：doc/store.md
• 表格类库：doc/table.md
• 国际化：doc/i18n.md
• 外部 Store：doc/外部store使用文档.md

License

MIT