Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fef886de87 | ||
|
|
16d8c6b9ed |
@@ -20,7 +20,7 @@ shrimp-admin 是**源码 ship**(.ts + .vue 直接发),不带构建产物,由消
|
||||
"type": "module",
|
||||
"scripts": { "dev": "vite", "build": "vite build" },
|
||||
"dependencies": {
|
||||
"shrimp-admin": "git+http://git.zeromvc.com/wc24/shrimp-admin.git#v0.8.4",
|
||||
"shrimp-admin": "git+http://git.zeromvc.com/wc24/shrimp-admin.git#v0.9.0",
|
||||
|
||||
// ⚠️ 不能删 —— 下面 7 个是 shrimp-admin 的 peerDependencies,
|
||||
// 必须由消费侧显式装进自己的 dependencies,不能指望 npm 提升碰巧能 import 到
|
||||
@@ -135,6 +135,7 @@ import { ShrimpTable } from 'shrimp-admin'
|
||||
| `resolveVue: components/layout.vue not found in sources`,整页白屏 | shrimp-admin 被 vite 预打包了 | vite.config `optimizeDeps.exclude: ['shrimp-admin']` |
|
||||
| `Failed to resolve import "xlsx"`,vite 起不来 | 少装 peerDependency `xlsx` | `npm i xlsx`,模板第 1 节 |
|
||||
| 页面出来了但没样式,**图标巨大** | 没引 element-plus 基础样式 | main.ts 加两行 css,模板第 3 节 |
|
||||
| 编辑器报 `找不到 'shrimp-admin/style' 的副作用导入的模块或类型声明` | 本包低于 v0.8.6:`./style` 导出没有 types 条件,开了 `noUncheckedSideEffectImports` 的项目解不出类型 | 升到 `v0.8.6` |
|
||||
| 能登录、菜单也有,但**所有列表都 404** | 服务端装的是 Express 4 | 服务端升到 `express@^5` |
|
||||
| `does not provide an export named 'default'`(dayjs),整页白屏 | element-plus 从没被预打包过,它的 CJS 依赖被原样送进浏览器 | vite.config `optimizeDeps.include`,模板第 2 节 |
|
||||
| `does not provide an export named 'default'`(其他包) | 依赖被装了两份 | vite.config `resolve.dedupe`,模板第 2 节 |
|
||||
@@ -177,6 +178,8 @@ Vite dev 默认用 **esbuild** 把 node_modules 里的裸导入预打包成 `nod
|
||||
|
||||
`ShrimpTable` 的导入/导出按钮是**静态** `import * as XLSX from 'xlsx'`,不是按需加载 —— 就算你的后台从不点那两个按钮,模块解析也绕不过去。它是 peerDependency 而不是 dependency,理由和 element-plus 一样:版本该由消费侧定。
|
||||
|
||||
工作簿的形状由**后端**决定(v0.9.0 起):`export` 返回 `{ sheet 名: 行数组 }`,前端按 key 逐张建 sheet;导入则把工作簿里**所有** sheet 原样发回后端(旧版只发第一张),哪张怎么用由模块的 `import` 决定。前端在这条链上只做两件脏活:对象/数组列 `JSON.stringify`,以及把 sheet 名按 Excel 限制(≤31 字符、不含 `[]:*?/\`)截断替换。
|
||||
|
||||
# 唯一约定: `sources` 路径后缀覆盖
|
||||
|
||||
消费侧把所有要交给框架的 .vue 通过单个 `sources` 入口注入(`import.meta.glob` 必须由消费侧自己调用,vite 静态扫描相对调用文件)。框架按**文件路径后缀**匹配,同后缀消费侧优先,内置兜底。
|
||||
|
||||
+5
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "shrimp-admin",
|
||||
"version": "0.8.5",
|
||||
"version": "0.9.0",
|
||||
"private": true,
|
||||
"description": "Shrimp 框架前端 — 消费 ShrimpServer + ShrimpTable 契约的经典 Vue3 + Element Plus 实现",
|
||||
"main": "src/index.ts",
|
||||
@@ -10,7 +10,10 @@
|
||||
"types": "./src/index.ts",
|
||||
"default": "./src/index.ts"
|
||||
},
|
||||
"./style": "./src/style/style.scss",
|
||||
"./style": {
|
||||
"types": "./src/style/style.d.ts",
|
||||
"default": "./src/style/style.scss"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"files": [
|
||||
|
||||
+11
-2
@@ -125,11 +125,20 @@ export interface ITableProto<T> {
|
||||
delete(id: string): Promise<boolean>
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入导出的负载形态:sheet 名 -> 行数组,对应 xlsx 的一个工作簿。
|
||||
*
|
||||
* 普通模块就是一个 sheet(默认以 moduleKey 命名);模块重写 export/import
|
||||
* 就能自定义多 sheet(如「商品/商店/销售规则」各一张),前端按 key 建/读 sheet。
|
||||
* 兼容:老版本的裸数组负载等价于「单 sheet」,两端都会归一。
|
||||
*/
|
||||
export type IShrimpSheets = Record<string, any[]>
|
||||
|
||||
/** 完整 Table 协议(后端可用,含管理操作) */
|
||||
export interface ITableCrudProto<T> extends ITableProto<T> {
|
||||
clear(query?: IPageQuery & any): Promise<boolean>
|
||||
export(query?: IPageQuery & any): Promise<T[]>
|
||||
import(data?: T[], ownerId?: string): Promise<void>
|
||||
export(query?: IPageQuery & any): Promise<IShrimpSheets>
|
||||
import(data?: IShrimpSheets | T[], ownerId?: string): Promise<void>
|
||||
}
|
||||
|
||||
// ============== 预制数据模型 ==============
|
||||
|
||||
@@ -449,6 +449,27 @@ function buildFilter(): Record<string, any> | undefined {
|
||||
return Object.keys(filter).length > 0 ? filter : undefined
|
||||
}
|
||||
|
||||
/** 归一成 sheet 表:老后端(或手写 json)发裸数组时,当作以 moduleKey 命名的单张表 */
|
||||
function toSheets(data: any): Record<string, any[]> {
|
||||
if (Array.isArray(data)) return { [props.moduleKey]: data }
|
||||
return data || {}
|
||||
}
|
||||
|
||||
/** xlsx 单元格放不下对象/数组(会变 [object Object]),通用地 JSON 序列化(覆盖 tab 等结构化字段)。
|
||||
* import 时这些字符串由后端各类型 reqFilter 还原。 */
|
||||
function stringifyRow(row: Record<string, any>): Record<string, any> {
|
||||
const out: Record<string, any> = {}
|
||||
for (const [k, v] of Object.entries(row)) {
|
||||
out[k] = (v !== null && typeof v === 'object') ? JSON.stringify(v) : v
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
/** Excel 的硬限制:sheet 名不得超 31 字符、不得含 []:*?/\ ,越界 book_append_sheet 直接抛 */
|
||||
function sheetName(key: string): string {
|
||||
return key.replace(/[[\]:*?/\\]/g, '_').slice(0, 31) || 'Sheet1'
|
||||
}
|
||||
|
||||
async function handleExport() {
|
||||
emit('export')
|
||||
try {
|
||||
@@ -461,19 +482,12 @@ async function handleExport() {
|
||||
query.sortOrder = currentSortOrder.value
|
||||
}
|
||||
if (ownerId.value) query.ownerId = ownerId.value
|
||||
const list = await api.export(query)
|
||||
// 后端只发原始对象;xlsx 单元格放不下对象/数组(会变 [object Object]),这里通用地 JSON 序列化
|
||||
// (覆盖 tab 等结构化字段)。import 时这些字符串由后端各类型 reqFilter 还原。
|
||||
const rows = list.map((row: Record<string, any>) => {
|
||||
const out: Record<string, any> = {}
|
||||
for (const [k, v] of Object.entries(row)) {
|
||||
out[k] = (v !== null && typeof v === 'object') ? JSON.stringify(v) : v
|
||||
}
|
||||
return out
|
||||
})
|
||||
const ws = XLSX.utils.json_to_sheet(rows)
|
||||
const sheets = toSheets(await api.export(query))
|
||||
const wb = XLSX.utils.book_new()
|
||||
XLSX.utils.book_append_sheet(wb, ws, props.moduleKey)
|
||||
for (const [name, rows] of Object.entries(sheets)) {
|
||||
const ws = XLSX.utils.json_to_sheet((rows || []).map(stringifyRow))
|
||||
XLSX.utils.book_append_sheet(wb, ws, sheetName(name))
|
||||
}
|
||||
XLSX.writeFile(wb, `${props.moduleKey}_export_${Date.now()}.xlsx`)
|
||||
ElMessage.success(t('base.success'))
|
||||
} catch (e: any) {
|
||||
@@ -495,17 +509,19 @@ async function handleFileChange(e: Event) {
|
||||
const file = target.files?.[0]
|
||||
if (!file) return
|
||||
try {
|
||||
let data: any[]
|
||||
let sheets: Record<string, any[]>
|
||||
if (file.name.endsWith('.json')) {
|
||||
const text = await file.text()
|
||||
data = JSON.parse(text)
|
||||
sheets = toSheets(JSON.parse(await file.text()))
|
||||
} else {
|
||||
// 整本工作簿原样交给后端:哪张 sheet 怎么用,由模块的 import 决定(默认取同名/第一张)
|
||||
const buf = await file.arrayBuffer()
|
||||
const wb = XLSX.read(buf, { type: 'array' })
|
||||
const ws = wb.Sheets[wb.SheetNames[0]]
|
||||
data = XLSX.utils.sheet_to_json(ws)
|
||||
sheets = {}
|
||||
for (const name of wb.SheetNames) {
|
||||
sheets[name] = XLSX.utils.sheet_to_json(wb.Sheets[name])
|
||||
}
|
||||
}
|
||||
await api.import(data, ownerId.value)
|
||||
await api.import(sheets, ownerId.value)
|
||||
ElMessage.success(t('base.success'))
|
||||
await refresh()
|
||||
} catch (e: any) {
|
||||
|
||||
@@ -20,6 +20,7 @@ export type {
|
||||
IMenuItem,
|
||||
ITableProto,
|
||||
ITableCrudProto,
|
||||
IShrimpSheets,
|
||||
IUser,
|
||||
IRole,
|
||||
IOperationLog,
|
||||
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
// `shrimp-admin/style` 的类型出口。样式表本身没有类型可言,这里要回答的只是
|
||||
// 「这个说明符解析得到东西」——消费侧开了 noUncheckedSideEffectImports 时,
|
||||
// import 'shrimp-admin/style' 落到 .scss 上会报 TS2307,因为 TS 不认识 .scss。
|
||||
// package.json 的 exports 里用 types 条件指向本文件,bundler 照旧拿 default 那条 .scss。
|
||||
export {}
|
||||
Reference in New Issue
Block a user