vue3-django 0.1.0

package/src/core/relations.js

@@ -0,0 +1,74 @@
+import qs from 'qs'
+
+export function relationIds(value) {
+  const ids = typeof value === 'string' ? JSON.parse(value) : (value ?? [])
+  if (!Array.isArray(ids)) throw new Error('多对多关联字段必须是主键数组')
+  return ids
+}
+
+export async function resolveRelation(item, parent, registry) {
+  const definition = typeof item === 'string' ? { name: item } : item
+  if (!definition?.name) throw new Error('关联配置缺少模型 name')
+  const colon = definition.name.indexOf(':')
+  const name = colon < 0 ? definition.name : definition.name.slice(0, colon)
+  const query = colon < 0 ? undefined : definition.name.slice(colon + 1)
+  const model = registry.get(name),
+    parentModel = registry.get(parent.appModel)
+  const [fields, parentFields, options, parentOptions] = await Promise.all([
+    model.fields(),
+    parentModel.fields(),
+    model.loadOptions(),
+    parentModel.loadOptions(),
+  ])
+  const parentId = parent.id ?? parent.data?.[parentModel.config.idField || 'id']
+  if (parentId == null) throw new Error('关联列表需要已保存的父记录')
+  let filters = definition.parentRelationQuery,
+    defaults = {},
+    multipleField
+  if (query !== undefined)
+    filters = Object.fromEntries(
+      Object.entries(qs.parse(query)).map(([key, source]) => {
+        const value = source === '' || source === 'id' ? parentId : parent.data?.[source]
+        if (value == null) throw new Error(`关联查询 ${key} 缺少父字段 ${source || 'id'}`)
+        return [key, value]
+      }),
+    )
+  if (!filters) {
+    multipleField = definition.parentMultipleRelationFieldName
+      ? parentFields[definition.parentMultipleRelationFieldName]
+      : Object.values(parentFields).find((field) => field.model === name && field.multiple)
+    if (multipleField) {
+      if (!multipleField.multiple || multipleField.model !== name)
+        throw new Error('指定的父字段不是此模型的多对多关联')
+      const ids = relationIds(parent.data?.[multipleField.name])
+      filters = { [`${model.config.idField || 'id'}__in`]: ids.length ? ids : [0] }
+    } else {
+      const field = Object.values(fields).find(
+        (field) => field.model === parent.appModel && !field.multiple,
+      )
+      if (field) filters = { [field.name]: parentId }
+      else if (options.generic_foreign_key) {
+        const { ct_field, fk_field } = options.generic_foreign_key
+        if (!fields[fk_field] || parentOptions.content_type_id == null)
+          throw new Error('通用外键缺少 fk_field 或父模型 content_type_id')
+        filters = { [ct_field]: parentOptions.content_type_id, [fk_field]: parentId }
+      } else throw new Error(`无法确定 ${name} 的关联字段，请显式配置 ${name}:字段=id`)
+    }
+  }
+  if (!multipleField)
+    defaults = Object.fromEntries(
+      Object.entries(filters).filter(
+        ([key]) => fields[key] && !fields[key].read_only && !key.includes('__'),
+      ),
+    )
+  return {
+    ...definition,
+    name,
+    model,
+    multipleField,
+    defaults: { ...defaults, ...definition.defaults },
+    label: definition.label || model.config.verbose_name || name,
+    icon: definition.icon || model.config.icon,
+    baseQueries: { ...definition.baseQueries, ...filters },
+  }
+}

package/src/core/table.js

@@ -0,0 +1,48 @@
+import { displayValue } from './metadata.js'
+
+export function fieldValue(row, name) {
+  return String(name)
+    .split('.')
+    .reduce((value, key) => value?.[key], row)
+}
+
+export function safeUrl(value) {
+  if (typeof value !== 'string' || !value.trim()) return undefined
+  const url = value.trim()
+  if (/^(https?:|mailto:|tel:)/i.test(url) || /^(\/[^/]|\.\.?\/)/.test(url)) return url
+  return undefined
+}
+
+export function tableDisplay(field, row) {
+  const value = fieldValue(row, field.name)
+  if (field.formatter) return field.formatter(row, field.name, value)
+  if (value == null || value === '') return '—'
+  if (field.choices) return displayValue(field, value)
+  if (['integer', 'decimal', 'float', 'number', 'percent'].includes(field.type)) {
+    const number = Number(value)
+    if (!Number.isFinite(number)) return String(value)
+    if (field.type === 'percent') return `${Number((number * 100).toFixed(2))}%`
+    return number.toLocaleString('zh-CN', { maximumFractionDigits: 20 })
+  }
+  if (field.child && Array.isArray(value)) {
+    return value
+      .map((item) => {
+        if (item == null || typeof item !== 'object') return displayValue(field.child, item)
+        return (
+          Object.entries(field.child.children ?? {})
+            .map(([name, child]) => displayValue(child, item[name]))
+            .join('，') || JSON.stringify(item)
+        )
+      })
+      .join('\n')
+  }
+  return displayValue(field, value)
+}
+
+export function tableDate(value, timestamp = false) {
+  if (value == null || value === '') return ''
+  const numeric = timestamp || typeof value === 'number' || /^\d+$/.test(String(value))
+  const time = numeric ? Number(value) * (Number(value) < 1e10 ? 1000 : 1) : value
+  const date = new Date(time)
+  return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString('zh-CN')
+}

package/src/core/views.js

@@ -0,0 +1,23 @@
+// Pass import.meta.glob('./views/**/config.js') from the consuming Vite app.
+export function createViewsConfigLoader(modules) {
+  return async (fullName) => {
+    const suffix = `/views/${fullName.replace('.', '/')}/config.js`
+    const entries = Object.entries(modules).filter(([path]) => path.endsWith(suffix))
+    if (!entries.length) return {}
+    if (entries.length > 1) throw new Error(`模型 ${fullName} 有多个视图配置文件`)
+    const entry = entries[0][1]
+    const module = typeof entry === 'function' ? await entry() : entry
+    return module.default ?? module
+  }
+}
+
+export function createRelationViewLoader(modules) {
+  return async (appModel, view) => {
+    if (!/^[\w-]+(?:\/[\w-]+)*$/.test(view)) throw new Error('关联视图路径无效')
+    const suffix = `/views/${appModel.replace('.', '/')}/${view}.vue`
+    const entries = Object.entries(modules).filter(([path]) => path.endsWith(suffix))
+    if (entries.length !== 1) throw new Error(`关联视图 ${appModel}/${view} 未找到或重复`)
+    const entry = entries[0][1]
+    return typeof entry === 'function' ? entry() : entry
+  }
+}

package/src/index.js

@@ -0,0 +1,31 @@
+import './style.css'
+export { createHttp, DrfError, joinErrors } from './core/http.js'
+export { AppModel, Register, createRegistry } from './core/registry.js'
+export {
+  normalizeItems,
+  fieldsFromOptions,
+  emptyData,
+  writableData,
+  displayValue,
+} from './core/metadata.js'
+export { createDjango, useDjango } from './composables/context.js'
+export { createAuth } from './core/auth.js'
+export { createDjangoRouter, genModelRouters, safeRedirect } from './router/index.js'
+export { default as ModelForm } from './components/model/Form.vue'
+export { default as ModelTable } from './components/model/Table.vue'
+export { default as MobileForm } from './components/mobile/Form.vue'
+export { default as ViewTabs } from './components/layout/ViewTabs.vue'
+export { default as Layout } from './components/layout/Layout.vue'
+export { default as Drawer } from './components/layout/Drawer.vue'
+export { default as Actions } from './components/layout/Actions.vue'
+export { useDrawer, createDrawerViewLoader } from './composables/drawer.js'
+export { default as SideBar } from './components/layout/SideBar.vue'
+export { genMenusFromApps } from './core/menus.js'
+export { createViewsConfigLoader, createRelationViewLoader } from './core/views.js'
+export { default as ModelSearch } from './components/model/Search.vue'
+export { default as ModelRelations } from './components/model/Relations.vue'
+export { default as ModelSelect } from './components/model/Select.vue'
+export { default as ForeignKey } from './components/widgets/ForeignKey.vue'
+export { default as TableWidget } from './components/table/Widget.vue'
+export { useViewTab } from './composables/tab.js'
+export { default as Form } from './components/form/Form.vue'

package/src/router/index.js

@@ -0,0 +1,78 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+export function safeRedirect(value, fallback = '/') {
+  return typeof value === 'string' &&
+    value.startsWith('/') &&
+    !value.startsWith('//') &&
+    !value.includes('\\') &&
+    !value.startsWith('/auth/login')
+    ? value
+    : fallback
+}
+
+export function createDjangoRouter({
+  routes = [],
+  auth,
+  history = createWebHashHistory(),
+  loginPath = '/auth/login/',
+}) {
+  const router = createRouter({ history, routes })
+  if (auth)
+    router.beforeEach(async (to) => {
+      if (
+        to.path.replace(/\/$/, '') === loginPath.replace(/\/$/, '') ||
+        to.meta.loginRequired === false
+      )
+        return true
+      if (!auth.state.user) {
+        try {
+          await auth.getUserInfo()
+        } catch (error) {
+          if (![401, 403].includes(error.code ?? error.response?.status)) throw error
+          auth.removeToken()
+          return { path: loginPath, query: { redirect: to.fullPath } }
+        }
+      }
+      return true
+    })
+  return router
+}
+
+export function genModelRouters(apps, components) {
+  const views =
+    typeof components === 'object' && components.list
+      ? components
+      : { list: components, create: components, edit: components }
+  return Object.entries(apps).flatMap(([app, definition]) =>
+    definition.hidden === true || definition.hidden === 'true'
+      ? []
+      : Object.entries(definition.models ?? {}).flatMap(([name, model]) => {
+          const path = `/${app}/${name}/`,
+            appModel = `${app}.${name}`,
+            title = model.verbose_name ?? name
+          return [
+            {
+              path,
+              name: `${app}-${name}-list`,
+              component: views.list,
+              props: { appModel, mode: 'list' },
+              meta: { title: `${title}列表`, model },
+            },
+            {
+              path: `${path}add/`,
+              name: `${app}-${name}-add`,
+              component: views.create ?? views.edit,
+              props: { appModel, mode: 'create' },
+              meta: { title: `新增${title}`, model },
+            },
+            {
+              path: `${path}:id/`,
+              name: `${app}-${name}-edit`,
+              component: views.edit,
+              props: (route) => ({ appModel, mode: 'edit', id: route.params.id }),
+              meta: { title: `编辑${title}`, model },
+            },
+          ]
+        }),
+  )
+}

package/src/style.css

@@ -0,0 +1,23 @@
+.vd-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 16px 0;
+}
+.vd-toolbar h2 {
+  flex: 1;
+  margin: 0;
+  font-size: 20px;
+}
+.vd-toolbar .el-input {
+  max-width: 360px;
+}
+.vd-card {
+  margin-bottom: 16px;
+}
+.el-pagination {
+  margin-top: 20px;
+}
+.el-alert {
+  margin-bottom: 16px;
+}

package/src/utils/app_model.js

@@ -0,0 +1,2 @@
+export { AppModel as default, AppModel, Register, createRegistry } from '../core/registry.js'
+export { joinErrors } from '../core/http.js'

package/src/utils/array_normalize.js

@@ -0,0 +1 @@
+export { normalizeItems as default } from '../core/metadata.js'