@green-plum-boiling-wine/yt-element-ui

银泰 Vue 3 + Element Plus 私有组件与工具集合，对齐《租务等 ERP 前端抽离》中「列表壳、请求层、权限、上传」等可复用层；不替代现有 Vue2 + Element UI 老项目，供新系统或逐步升级的子应用接入。

定位与版本

| 能力 | 说明 | |------|------| | UI | Form / Table / TableForm / DialogForm / Upload、PageLayout（搜索区 + 内容区，对应老项目 MainContent 思路） | | 请求 | createYtHttpClient：Token、ModuleId 头、业务 code/sub_code、未授权码回调（默认对齐租务常见约定） | | 权限 | v-hasPermi / v-hasRole；configureYtPermission、setYtPermissionRolesAndCodes（可配置本地存储键名） | | 工程 | Vite 分包构建（es/、lib/），TypeScript |

依赖（peer 由业务安装）：vue@^3.2、element-plus@^2.x、axios。

安装

pnpm add @green-plum-boiling-wine/yt-element-ui element-plus vue axios

全局注册

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import YtElementUI from '@green-plum-boiling-wine/yt-element-ui';
import '@green-plum-boiling-wine/yt-element-ui/lib/index/style.css';

const app = createApp(App);
app.use(ElementPlus);
app.use(YtElementUI);

注册后可用：Form、DialogForm、Table、TableForm、Upload、PageLayout，以及指令 v-hasPermi、v-hasRole。

权限数据

登录后写入角色与权限码（默认键名 AD_ROLE / AD_PERMI，可与后端约定后 configureYtPermission 修改）：

import { setYtPermissionRolesAndCodes, configureYtPermission } from '@green-plum-boiling-wine/yt-element-ui';

configureYtPermission({
  storage: 'localStorage',
  keys: { roleStorageKey: 'AD_ROLE', permiStorageKey: 'AD_PERMI' },
});
setYtPermissionRolesAndCodes(['admin'], ['order:view', 'order:edit'], 'localStorage');

模板中：

<el-button v-hasPermi="'order:edit'">编辑</el-button>

兼容旧 API：setPermission 仍可用，等价于 setYtPermissionRolesAndCodes。

HTTP 客户端（与各 ERP 后端约定）

import { createYtHttpClient } from '@green-plum-boiling-wine/yt-element-ui';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

export const http = createYtHttpClient({
  baseURL: import.meta.env.VITE_API_BASE,
  getToken: () => localStorage.getItem('token'),
  getModuleId: () => sessionStorage.getItem('moduleId'),
  onUnauthorized: async () => {
    await router.replace('/login');
  },
  onBusinessError: (msg) => ElMessage.error(msg),
});

可通过 getBusinessCode / successCodes / unauthorizedCodes 覆盖不同子系统的响应体差异。

列表页布局 PageLayout

<template>
  <PageLayout title="销售提报" search>
    <template #search>
      <el-form :inline="true" :model="query">...</el-form>
    </template>
    <template #search-actions>
      <el-button type="primary" @click="fetch">查询</el-button>
    </template>
    <Table v-bind="tableProps" />
  </PageLayout>
</template>

按需路径

构建产物按子包输出，例如：

import { Table } from '@green-plum-boiling-wine/yt-element-ui/es/table/index.es.js';
import '@green-plum-boiling-wine/yt-element-ui/es/table/style.css';

推荐以主入口 import { ... } from '@green-plum-boiling-wine/yt-element-ui' 为准，由业务侧打包工具做 tree-shaking。

文档与开发

• 组件演示与说明：pnpm docs:dev（VitePress，见 docs/）。
• 构建：pnpm run build。

许可证

MIT