morghulis 4.2.16 → 4.3.0

package/README.md

@@ -1,146 +1,84 @@
-# morghulis
-
-typescript + vue3 + data management
-
-## Requirement
-
-require a developed Valar project (a python django project, see https://pypi.org/project/valar/) to provide data service
-
-### connect with Valar in develop environment
-
-- add a proxy in the vite.config.ts
-- highly recommend using '/api' as the proxy name
-
-```typescript
-export default defineConfig({
-    server: {
-        host: '0.0.0.0',
-        open: false,
-        proxy: {
-            '/api': {
-                target: `<Valar server url>`,
-                changeOrigin: true,
-                ws: true,
-                rewrite: path => path.replace(/^\/api/, '')
-            },
-        },
-    },
-})
-```
+# Morghulis
+
+基于 TypeScript、Vue 3 和 Element Plus 的数据管理组件库。
 
-## Installation
+## 安装
 
-```sh
-npm install morghulis element-plus
+```bash
+npm install morghulis@4.3.0 vue@^3.5.42 vue-router@^5.4.0 element-plus@^2.14.7
 ```
 
-- main.ts
+面向浏览器中的 Vue 3 应用。安装时会通过 SheetJS CDN 下载 `xlsx`，需要能够访问 `cdn.sheetjs.com`。
 
-```typescript
+## 接入
+
+```ts
 import {createApp} from 'vue'
-// install element-plus first
-import 'element-plus/dist/index.css'
 import ElementPlus from 'element-plus'
-// install morghulis
-import 'morghulis/style'
-import createMorghulis, {MApp} from "morghulis";
-import App from "@/App.vue";
-import Content1 from "@/contents/Content1.vue";
-import Content2 from "@/contents/Content2.vue";
-import Content3 from "@/contents/Content3.vue";
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import 'element-plus/dist/index.css'
+
+import {createMorghulis, MApp, type MOptions} from 'morghulis'
+import 'morghulis/style.css'
 
+const options: MOptions = {
+  base_url: '/api',
+  minio_url: '/minio',
+  title: '管理系统',
+  routes: [],
+}
 
 const app = createApp(MApp)
-app.use(ElementPlus)
-app.use(createMorghulis({
-    title: 'Valar Morghulis', //系统名称
-    // accountLabel: '用户名', // 如果使用邮箱作为用户名，这项请置空
-    signInOnly: false, // 是否禁止注册
-    routes: [  // 路由
-        {
-            path: '/',
-            name: '欢迎',
-            component: App
-        },
-        {
-            path: '/content1',
-            name: 'Content1',
-            component: Content1
-        },
-        {
-            path: '/content2',
-            name: 'Content2',
-            component: Content2
-        },
-        {
-            path: '/content3',
-            name: 'Content3',
-            component: Content3
-        },
-    ]
-}))
+app.use(ElementPlus, {locale: zhCn})
+app.use(createMorghulis(options))
 app.mount('#app')
-
-
 ```
 
-## getting start
+`createMorghulis` 会安装 Vue Router，包含内置路由，并合并 `options.routes`；使用这个入口时无需另外创建 Router。Element Plus 需要由使用方安装到应用中。`MApp` 会连接后端服务，数据相关功能需要兼容的接口。
 
-### Data Table
+`morghulis/style` 与 `morghulis/style.css` 指向相同样式文件，保留旧版样式入口。样式包含全局工具类，以及 `html`、`body` 的布局设置。
 
-- when db equals orm, Valar will provide using SQL database (such as SQLLite, MySQL, Postgresql)
-- when db equals mon, Valar will provide using Mongodb
-- entity is the path to the relative data model of Valar server
-- code is the data view name, Valar will automatically create a data view for you. You can edit the data view in the
-  table
+## 全局组件与类型
 
-```vue
-
-<d-table
-    db="orm"
-    entity="valar.Valar"
-    code="special"
-></d-table>
+安装插件后，`morghulis/components/index.ts` 导出的组件都可直接在模板中使用，无需逐个导入：
 
+```vue
+<template>
+  <MButton>按钮</MButton>
+  <DataTable entity="your.Entity" code="default" />
+</template>
 ```
 
-### Data Tree
+组件包括 `MIcon`、`DataWrapper`、`MButton`、`MText`、`MOptionItem`、`MOptionList`、`MOptionContent`、`MCell`、`MCharts`、`MObjectEditor`、`MRichEditor`、`MTransferEditor`、`MDialog`、`MPopover`、`MForm`、`DataTable`、`DataTree`、`MUploader`。
 
-- try to edit the data in Tree, see what will happen in the Table
+包入口会加载 Vue 的全局组件类型声明，提供模板属性与事件提示。组件、公共组合式函数和类型也支持从 `morghulis` 具名导入；纯类型可以从 `morghulis/types` 导入。Excel 单元格类型导出为 `ExcelCell`，组件仍叫 `MCell`。
 
-```vue
+## 本地开发与构建
 
-<el-row>
-    <el-col :span="12">
-        <d-tree
-            db="orm"
-            entity="valar.Vmm"
-            broadcast
-        ></d-tree>
-    </el-col>
-    <el-col :span="12">
-        <d-table
-            db="orm"
-            entity="valar.Vmm"
-            code="tree"
-            broadcast
-        ></d-table>
-    </el-col>
-</el-row>
+```bash
+npm run dev                  # 启动演示应用
+npm run generate:components  # 更新全局组件类型声明
+npm run type-check           # 检查类型
+npm run build                # 构建演示应用到 dist-demo
+npm run build:lib            # 构建库到 dist，包含 ESM、CommonJS、CSS 和类型声明
+npm pack                     # 自动构建并生成 npm 安装包
 ```
 
-### Meta Editor
+新增组件时，在 `morghulis/components/index.ts` 导出，然后运行 `npm run generate:components`。开发启动、构建和类型检查前也会自动更新声明。
 
-- a panel to edit the meta data of Valar server
+## 开发记录
 
-```vue
+### 扩展功能
 
-<meta-editor></meta-editor>
+- model的related_name='+'时候，不加载set
+- navigate 可以二次导航
 
-```
+### 未完成功能
+
+# tree-table
+
+# table-tree
 
-# Admin Account:
+# data-table
 
-- you can register an admin account for morghulis, using 'admin' as the username, and the SECRET_KEY from your valar
-  settings as the password.
-- using the admin account to manager your VM framework
+- 检索匹配高亮