vue3-django 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -2
- package/dist/vue3-django.css +1 -1
- package/dist/vue3-django.js +2605 -2266
- package/package.json +1 -1
- package/src/app/App.vue +35 -0
- package/src/app/Home.vue +26 -0
- package/src/app/Login.vue +59 -0
- package/src/app/Root.vue +42 -0
- package/src/app/index.js +102 -0
- package/src/index.js +5 -0
- package/src/views/model/edit.vue +1 -0
- package/src/views/model/list.vue +1 -0
package/README.md
CHANGED
|
@@ -22,7 +22,7 @@ npm run build:demo
|
|
|
22
22
|
VITE_REAL_API=true npm run dev -- --port 5173
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
真实模式登录入口为 `/#/auth/login
|
|
25
|
+
真实模式登录入口为 `/#/auth/login/`，默认首页为 `/#/home/`，类别列表为 `/#/course/category/`。
|
|
26
26
|
Vite 将 `/api` 代理到 Django，包括用于读取元数据的 OPTIONS 请求。
|
|
27
27
|
如果端口已占用，请以终端输出的地址为准。
|
|
28
28
|
|
|
@@ -31,8 +31,42 @@ demo 的 `examples/demo/apps.js` 独立维护模型注册配置。真实模式
|
|
|
31
31
|
这些配置不代表对应旧业务页面、动作和接口均已迁移或验收；无专用 config.js 的模型使用元数据默认视图。
|
|
32
32
|
demo 加载 Font Awesome 4 样式以显示原配置中的图标名称。
|
|
33
33
|
|
|
34
|
+
## 默认应用入口（推荐）
|
|
35
|
+
|
|
36
|
+
宿主只需 HTML 中的 `<div id="app"></div>`、下面的 main.js，以及 apps/config 业务配置：
|
|
37
|
+
|
|
38
|
+
```js
|
|
39
|
+
import 'element-plus/dist/index.css'
|
|
40
|
+
import 'vant/lib/index.css'
|
|
41
|
+
import 'vue3-django/style.css'
|
|
42
|
+
import { createDjangoApp } from 'vue3-django'
|
|
43
|
+
import apps from './apps.js'
|
|
44
|
+
|
|
45
|
+
const application = createDjangoApp({
|
|
46
|
+
apps,
|
|
47
|
+
title: '业务工作台',
|
|
48
|
+
apiBaseURL: '/api/',
|
|
49
|
+
configModules: import.meta.glob('./views/**/config.js'),
|
|
50
|
+
viewModules: import.meta.glob('./views/**/*.vue'),
|
|
51
|
+
})
|
|
52
|
+
application.mount('#app')
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
默认开启真实 API 认证，沿用 auth/user 登录、当前用户与退出接口；无认证的演示项目显式设置 `auth: false`。
|
|
56
|
+
首页默认进入 `/home/` 显示 Welcome，在默认布局与 tabs 内呈现；兼容 `/welcome/` 地址。可用 `homePath` 指定其他入口，通过 `components.home` 替换首页组件。
|
|
57
|
+
业务视图、关联视图与抽屉视图共享宿主提供的 viewModules，仍优先业务页面、缺失才回退模板。
|
|
58
|
+
|
|
59
|
+
可覆盖 `http`、`registry`、`auth`、`authOptions`、`router`、`history`、`locale`、`loginPath`、`menus`、`layoutProps`，
|
|
60
|
+
通过 `components: { app, layout, login, home }` 替换默认组件，`modelViews` 覆盖模型页面；`routes` 添加布局内业务路由。
|
|
61
|
+
返回的 `app`、`router`、`registry`、`auth` 可继续使用，挂载前可调用 `application.app.use(...)` 安装其他插件。
|
|
62
|
+
`context` 可注入上传服务等已有扩展，不需要放弃底层 createDjango/createRegistry API。
|
|
63
|
+
|
|
64
|
+
默认排版提供 `--vd-body-margin`、`--vd-page-padding`、`--vd-text-color`、`--vd-background` CSS 变量。
|
|
65
|
+
字体图标样式不自动引入：使用旧 Font Awesome 图标名称的宿主需自行安装并加载对应 CSS。
|
|
66
|
+
|
|
34
67
|
## 当前功能
|
|
35
68
|
|
|
69
|
+
- `createDjangoApp`：内置默认入口、中文登录、布局和动态模型页，减少宿主框架代码。
|
|
36
70
|
- `createDjangoRouter`、`genModelRouters` 与 `createAuth`：hash 路由、登录守卫和旧版认证接口。
|
|
37
71
|
- `Layout`、`SideBar`、`ViewTabs`：菜单、独立编辑 path/tab、记录标题与图标。
|
|
38
72
|
- `Form`：通用字段、校验、提交与字段错误；登录表单和 `ModelForm` 复用该组件。
|
|
@@ -92,7 +126,7 @@ import { ModelTable, ModelForm } from 'vue3-django'
|
|
|
92
126
|
|
|
93
127
|
页面层提供 `ModelListView` 与 `ModelEditView`，demo 已使用这两个页面。
|
|
94
128
|
`genModelRouters(apps, { modules: import.meta.glob('./views/**/*.vue') })` 通过 `import_or_use_template` 动态加载页面：优先使用宿主的 `views/<app>/<model>/list.vue`、`edit.vue`，不存在时使用内置模板；新增也复用 edit 模板。已有页面的加载错误不会回退。仍可传 `{ list, create, edit }` 覆盖页面组件。
|
|
95
|
-
|
|
129
|
+
默认 App 只渲染 RouterView，布局由父路由的内置 Root 提供，模型页作为子路由渲染。demo 直接使用内置组件，无需自己的 App.vue、Root.vue、Login.vue；需要定制时通过 components 覆盖。
|
|
96
130
|
列表页读取 `config.list` 并传递 `baseQueries` 等配置，处理编辑跳转及 revisions 刷新。
|
|
97
131
|
`list.mode: 'grid'` 默认使用卡片列表；传 `gridComponent` 可接入专用网格组件（并非旧 ModelGrid 的全部功能）。
|
|
98
132
|
编辑页在 ModelForm 的 `bottom` 插槽挂载 `panels`（兼容旧拼写 `pannels`）折叠面板及 relations；面板的 component 接收 parent 模型上下文。
|
package/dist/vue3-django.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.vd-toolbar{display:flex;align-items:center;gap:8px;margin:0 0 8px}.vd-toolbar h2{flex:1;margin:0;font-size:16px}.vd-toolbar .el-input{max-width:360px}.vd-card,.el-alert{margin-bottom:16px}.vd-upload[data-v-777ec908]{display:flex;flex-wrap:wrap;gap:8px}.vd-upload-item[data-v-777ec908]{display:flex;align-items:center;flex-wrap:wrap;gap:6px;max-width:100%}.vd-upload-item img[data-v-777ec908]{width:72px;height:72px;object-fit:contain}.vd-upload-item a[data-v-777ec908]{overflow-wrap:anywhere}.vd-upload button[data-v-777ec908]{cursor:pointer;border:1px solid #dcdfe6;border-radius:4px;background:#fff;padding:5px 10px;color:#409eff}.vd-cover-placeholder[data-v-52989853]{display:inline-flex;align-items:center;justify-content:center;min-height:32px;color:#909399;font-size:12px}.
|
|
1
|
+
.vd-toolbar{display:flex;align-items:center;gap:8px;margin:0 0 8px}.vd-toolbar h2{flex:1;margin:0;font-size:16px}.vd-toolbar .el-input{max-width:360px}.vd-card,.el-alert{margin-bottom:16px}body:has(.vd-app){margin:var(--vd-body-margin, 0)}.vd-app[v-cloak]{display:none}.vd-app{color:var(--vd-text-color, #253447);background:var(--vd-background, white);font-family:system-ui,-apple-system,sans-serif}.vd-app .vd-model-page{width:100%;box-sizing:border-box;padding:var(--vd-page-padding, 0 4px 12px)}.model-icon[data-v-5a104f44]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25em;height:1.25em;margin-right:8px;vertical-align:middle}.viewtabs[data-v-3064a066]{margin:0 8px}.viewtabs[data-v-3064a066] .el-tabs__header{margin-bottom:10px}.viewtabs[data-v-3064a066] .el-tabs__item{font-size:.8rem;height:36px;padding:0 16px}.tab-icon[data-v-3064a066]{width:1em;height:1em;margin-right:6px}.django-layout[data-v-43dec436]{min-height:100vh;background:#fff;color:#253447}.layout-header[data-v-43dec436]{height:50px;padding:0 16px;display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid #e5eaf0}.layout-brand[data-v-43dec436]{font-size:16px;font-weight:700;color:inherit;text-decoration:none}.layout-account[data-v-43dec436]{margin-left:auto;display:flex;align-items:center;gap:16px}.layout-body[data-v-43dec436]{display:flex;min-height:calc(100vh - 51px)}.layout-sidebar[data-v-43dec436]{width:190px;flex-shrink:0;background:#fff;border-right:1px solid #e5eaf0}.layout-sidebar[data-v-43dec436] .el-menu{border-right:0;--el-menu-item-height: 42px;--el-menu-sub-item-height: 38px}.layout-content[data-v-43dec436]{min-width:0;flex:1;padding-top:0}.menu-toggle[data-v-43dec436],.menu-backdrop[data-v-43dec436]{display:none}.layout-content[data-v-43dec436] .viewtabs{margin:0 8px}@media(max-width:768px){.menu-toggle[data-v-43dec436]{display:inline-flex}.layout-header[data-v-43dec436]{padding:0 12px}.layout-brand[data-v-43dec436]{font-size:16px}.layout-sidebar[data-v-43dec436]{display:none}.layout-sidebar.opened[data-v-43dec436]{display:block;position:fixed;top:51px;bottom:0;left:0;z-index:21;overflow:auto}.menu-backdrop[data-v-43dec436]{display:block;position:fixed;inset:51px 0 0;background:#0006;border:0;z-index:20}.layout-content[data-v-43dec436] .viewtabs{margin:0 8px}}.vd-upload[data-v-777ec908]{display:flex;flex-wrap:wrap;gap:8px}.vd-upload-item[data-v-777ec908]{display:flex;align-items:center;flex-wrap:wrap;gap:6px;max-width:100%}.vd-upload-item img[data-v-777ec908]{width:72px;height:72px;object-fit:contain}.vd-upload-item a[data-v-777ec908]{overflow-wrap:anywhere}.vd-upload button[data-v-777ec908]{cursor:pointer;border:1px solid #dcdfe6;border-radius:4px;background:#fff;padding:5px 10px;color:#409eff}.vd-cover-placeholder[data-v-52989853]{display:inline-flex;align-items:center;justify-content:center;min-height:32px;color:#909399;font-size:12px}.vd-login[data-v-a32e9ae3]{max-width:400px;margin:80px auto;padding:24px}h1[data-v-a32e9ae3]{font-size:24px}.vd-home[data-v-e81cec03]{padding:var(--vd-home-padding, 24px)}h1[data-v-e81cec03]{margin:0 0 12px;font-size:24px;font-weight:500}p[data-v-e81cec03]{margin:0;color:var(--el-text-color-secondary, #909399)}.vd-model-search[data-v-d6cb8ac9]{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px;margin-bottom:4px}.vd-search-field[data-v-d6cb8ac9]{flex:0 1 var(--search-field-width, 8rem);width:var(--search-field-width, 8rem);min-width:0;max-width:100%}.vd-search-field[data-v-d6cb8ac9] .el-input,.vd-search-field[data-v-d6cb8ac9] .el-select,.vd-search-field[data-v-d6cb8ac9] .el-input-number,.vd-search-field[data-v-d6cb8ac9] .el-date-editor{width:100%;min-width:0}.vd-search-range[data-v-d6cb8ac9]{display:flex;align-items:center;gap:4px}.foreignkey-link[data-v-72c5023a]{color:var(--el-color-primary, #409eff);text-decoration:none}.foreignkey-link[data-v-72c5023a]:hover{text-decoration:underline}.vd-table-text[data-v-8faa9aa1]{white-space:pre-wrap;overflow-wrap:anywhere}.vd-table-boolean.is-true[data-v-8faa9aa1]{color:var(--el-color-success, green);font-weight:700}.vd-table-images[data-v-8faa9aa1]{display:flex;flex-wrap:wrap;gap:4px}.vd-table-video[data-v-8faa9aa1]{width:180px;max-width:100%}.vd-table-json[data-v-8faa9aa1]{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}.vd-table-json dd[data-v-8faa9aa1]{margin:0}.vd-table-actions[data-v-f224bc95]{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:8px}.vd-table-pagination[data-v-5eef5cff]{padding:10px 0 6px}.vd-table-pagination[data-v-5eef5cff] .el-pagination{display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:8px}.vd-table-pagination.is-mobile[data-v-5eef5cff]{padding:12px 0}@media(max-width:600px){.vd-table-pagination[data-v-5eef5cff] .el-pagination__jump{margin-left:0}}
|