vue3-django 0.1.0

package/src/components/table/Widget.vue

@@ -0,0 +1,195 @@
+<script setup>
+import { computed, toRaw } from 'vue'
+import DOMPurify from 'dompurify'
+import { ElImage, ElAvatar, ElTag } from 'element-plus'
+import ForeignKey from '../widgets/ForeignKey.vue'
+import FormField from '../form/Field.vue'
+import { fieldValue, safeUrl, tableDate, tableDisplay } from '../../core/table.js'
+
+const props = defineProps({
+  value: { type: Object, required: true },
+  field: { type: Object, required: true },
+  context: { type: Object, default: () => ({}) },
+  mobile: Boolean,
+})
+const emit = defineEmits(['change'])
+const raw = computed(() => fieldValue(props.value, props.field.name))
+const display = computed(() => tableDisplay(props.field, props.value))
+const widget = computed(() => toRaw(props.field.cellWidget ?? props.field.widget))
+const kind = computed(() => (typeof widget.value === 'string' ? widget.value.toLowerCase() : ''))
+const context = computed(() => ({ row: props.value, ...props.context }))
+const html = computed(() =>
+  DOMPurify.sanitize(
+    String(
+      typeof widget.value === 'function'
+        ? widget.value(props.value, props.field)
+        : (display.value ?? ''),
+    ),
+  ),
+)
+const date = computed(() => tableDate(raw.value, kind.value === 'timestamp'))
+const images = computed(() =>
+  (Array.isArray(raw.value) ? raw.value : [raw.value])
+    .map((value) =>
+      safeUrl(`${props.field.proxy ?? ''}${props.field.imageRoot ?? ''}${value ?? ''}`),
+    )
+    .filter(Boolean),
+)
+const jsonItems = computed(() =>
+  (props.field.items ?? Object.keys(raw.value ?? {})).map((item) =>
+    typeof item === 'string' ? { name: item } : item,
+  ),
+)
+</script>
+
+<template>
+  <FormField
+    v-if="field.useFormWidget"
+    :field="{ ...field, read_only: false }"
+    :model-value="raw"
+    :mobile="mobile"
+    @update:model-value="emit('change', $event)"
+  />
+  <component
+    :is="widget"
+    v-else-if="widget && typeof widget === 'object'"
+    :value="value"
+    :model-value="value"
+    :field="field"
+    :context="context"
+    @update:model-value="emit('change', $event)"
+  />
+  <span
+    v-else-if="typeof widget === 'function' || kind === 'html'"
+    v-html="html"
+  />
+  <ForeignKey
+    v-else-if="
+      kind === 'foreignkey' || (!widget && !field.formatter && (field.model || field.relateModel))
+    "
+    :value="value"
+    :field="field"
+    :context="context"
+  />
+  <span v-else-if="raw == null || raw === ''">{{ display }}</span>
+  <span
+    v-else-if="kind === 'trueflag' || (!widget && !field.formatter && field.type === 'boolean')"
+    :class="['vd-table-boolean', { 'is-true': raw }]"
+    :aria-label="raw ? '是' : '否'"
+    :title="raw ? '是' : '否'"
+    >{{ raw ? '✓' : '—' }}</span
+  >
+  <span
+    v-else-if="
+      ['date2now', 'timestamp', 'date', 'datetime'].includes(kind) ||
+      (!widget && !field.formatter && ['date', 'datetime'].includes(field.type))
+    "
+    :title="date"
+    >{{ date }}</span
+  >
+  <ElAvatar
+    v-else-if="kind === 'avatar'"
+    :src="images[0]"
+    :size="field.size ?? 40"
+  />
+  <div
+    v-else-if="['picture', 'image', 'picturegallery'].includes(kind)"
+    class="vd-table-images"
+  >
+    <ElImage
+      v-for="url in images"
+      :key="url"
+      :src="url"
+      :preview-src-list="images"
+      preview-teleported
+      fit="contain"
+      :style="{ width: `${field.width ?? 64}px`, height: `${field.height ?? 48}px` }"
+    >
+      <template #error>图片无法加载</template>
+    </ElImage>
+  </div>
+  <video
+    v-else-if="kind === 'video'"
+    :src="safeUrl(raw)"
+    controls
+    preload="none"
+    class="vd-table-video"
+  />
+  <a
+    v-else-if="
+      ['url', 'link', 'mobile', 'email'].includes(kind) ||
+      (!widget && ['url', 'email'].includes(field.type))
+    "
+    :href="
+      safeUrl(
+        kind === 'mobile'
+          ? `tel:${raw}`
+          : kind === 'email' || field.type === 'email'
+            ? `mailto:${raw}`
+            : raw,
+      )
+    "
+    target="_blank"
+    rel="noopener noreferrer"
+    >{{ display }}</a
+  >
+  <dl
+    v-else-if="kind === 'jsondisplay' && typeof raw === 'object'"
+    class="vd-table-json"
+  >
+    <template
+      v-for="item in jsonItems"
+      :key="item.name"
+    >
+      <dt>{{ item.label ?? item.name }}</dt>
+      <dd>
+        <Widget
+          :value="raw"
+          :field="item"
+          :context="context"
+          :mobile="mobile"
+        />
+      </dd>
+    </template>
+  </dl>
+  <ElTag
+    v-else-if="kind === 'colortext'"
+    :style="{ backgroundColor: field.getColor?.(context) ?? field.color }"
+    >{{ display }}</ElTag
+  >
+  <span
+    v-else
+    class="vd-table-text"
+    :title="kind === 'tooltipcell' ? String(display) : undefined"
+    >{{ display }}</span
+  >
+</template>
+
+<style scoped>
+.vd-table-text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.vd-table-boolean.is-true {
+  color: var(--el-color-success, green);
+  font-weight: bold;
+}
+.vd-table-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.vd-table-video {
+  width: 180px;
+  max-width: 100%;
+}
+.vd-table-json {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 12px;
+  margin: 0;
+}
+.vd-table-json dd {
+  margin: 0;
+}
+</style>

package/src/components/widgets/ForeignKey.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { computed, inject } from 'vue'
+import { RouterLink, routerKey } from 'vue-router'
+import { useDjango } from '../../composables/context.js'
+
+const props = defineProps({
+  value: { type: Object, required: true },
+  field: { type: Object, required: true },
+  context: Object,
+})
+const { registry } = useDjango()
+const router = inject(routerKey, null)
+const modelName = computed(() => props.field.model || props.field.relateModel)
+const primaryKey = computed(() => props.value[props.field.keyField || props.field.name])
+const label = computed(() => {
+  const raw = props.value[`${props.field.name}_name`] ?? props.value[props.field.name]
+  const text = typeof props.field.labelFormat === 'function' ? props.field.labelFormat(raw) : raw
+  if (text == null || text === '') return '—'
+  return Array.isArray(text) ? text.join('、') : String(text)
+})
+const target = computed(() => {
+  if (!router || !registry.configs[modelName.value] || props.field.showLink === false) return null
+  const id = primaryKey.value
+  if (id == null || id === '' || Array.isArray(id) || typeof id === 'object') return null
+  const name = `${modelName.value.replace('.', '-')}-edit`
+  if (router.hasRoute(name)) return { name, params: { id } }
+  const path = `/${modelName.value.replace('.', '/')}/${encodeURIComponent(id)}/`
+  const resolved = router.resolve(path)
+  if (
+    !resolved.matched.length ||
+    resolved.matched.some((record) => record.path.includes(':pathMatch'))
+  )
+    return null
+  return { path }
+})
+</script>
+
+<template>
+  <RouterLink
+    v-if="target"
+    :to="target"
+    title="点击跳转"
+    class="foreignkey-link"
+  >
+    {{ label }}
+  </RouterLink>
+  <span v-else>{{ label }}</span>
+</template>
+
+<style scoped>
+.foreignkey-link {
+  color: var(--el-color-primary, #409eff);
+  text-decoration: none;
+}
+.foreignkey-link:hover {
+  text-decoration: underline;
+}
+</style>

package/src/components/widgets/Icon.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineProps({ icon: [String, Object, Function] })
+</script>
+
+<template>
+  <component
+    v-if="icon && typeof icon !== 'string'"
+    :is="icon"
+    class="model-icon"
+    aria-hidden="true"
+  />
+  <i
+    v-else-if="icon && /^[a-zA-Z][\w -]*$/.test(icon)"
+    :class="icon.includes(' ') ? icon : `fa fa-${icon}`"
+    class="model-icon"
+    aria-hidden="true"
+  />
+  <span
+    v-else-if="icon"
+    class="model-icon"
+    aria-hidden="true"
+    >{{ icon }}</span
+  >
+</template>
+
+<style scoped>
+.model-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25em;
+  height: 1.25em;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+</style>

package/src/composables/context.js

@@ -0,0 +1,16 @@
+import { inject } from 'vue'
+import { Register } from '../core/registry.js'
+export const DjangoKey = Symbol('vue3-django')
+export function useDjango() {
+  return inject(DjangoKey, { registry: Register })
+}
+export function createDjango({ registry, ...options }) {
+  return {
+    install(app) {
+      const context = { registry, ...options }
+      app.provide(DjangoKey, context)
+      app.config.globalProperties.$http = registry.http
+      app.config.globalProperties.$django = context
+    },
+  }
+}

package/src/composables/drawer.js

@@ -0,0 +1,19 @@
+import { inject } from 'vue'
+
+export const DrawerKey = Symbol('vue3-django-drawer')
+
+export function useDrawer() {
+  return inject(DrawerKey, undefined)
+}
+
+// The host supplies an explicit Vite glob; no arbitrary dynamic import paths.
+export function createDrawerViewLoader(modules) {
+  return async (path) => {
+    if (!/^[\w-]+(?:\/[\w-]+)*$/.test(path)) throw new Error('抽屉视图路径无效')
+    const matches = Object.entries(modules).filter(([key]) => key.endsWith(`/views/${path}.vue`))
+    if (matches.length !== 1) throw new Error(`抽屉视图 ${path} 未找到或重复`)
+    const entry = matches[0][1]
+    const module = typeof entry === 'function' ? await entry() : entry
+    return module.default ?? module
+  }
+}

package/src/composables/tab.js

@@ -0,0 +1,7 @@
+import { inject } from 'vue'
+
+export const TabKey = Symbol('vue3-django-tab')
+
+export function useViewTab() {
+  return inject(TabKey, null)
+}

package/src/configs/axios.js

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

package/src/core/auth.js

@@ -0,0 +1,68 @@
+import { reactive } from 'vue'
+
+// Preserve the legacy access_token cookie and auth/user endpoints.
+export function createAuth({ http, endpoints = {}, cookieName = 'access_token' }) {
+  const urls = {
+    login: 'auth/user/login/',
+    current: 'auth/user/current/',
+    logout: 'auth/user/logout/',
+    ...endpoints,
+  }
+  const state = reactive({ user: null, ready: false })
+  let pending
+  function getToken() {
+    if (typeof document === 'undefined') return undefined
+    const value = document.cookie.split('; ').find((v) => v.startsWith(`${cookieName}=`))
+    return value ? decodeURIComponent(value.slice(cookieName.length + 1)) : undefined
+  }
+  function setToken(token) {
+    if (token) http.defaults.headers.common.Authorization = `Bearer ${token}`
+    else delete http.defaults.headers.common.Authorization
+    if (typeof document !== 'undefined')
+      document.cookie = `${cookieName}=${encodeURIComponent(token || '')}; Path=/; SameSite=Lax${token ? '' : '; Max-Age=0'}${location.protocol === 'https:' ? '; Secure' : ''}`
+  }
+  const token = getToken()
+  if (token) http.defaults.headers.common.Authorization = `Bearer ${token}`
+  async function getUserInfo() {
+    if (!pending)
+      pending = http
+        .get(urls.current)
+        .then(({ data }) => {
+          state.user = data
+          state.ready = true
+          return data
+        })
+        .finally(() => {
+          pending = undefined
+        })
+    return pending
+  }
+  async function login(username, password) {
+    const { data } = await http.post(urls.login, { username, password })
+    if (data.token?.access) setToken(data.token.access)
+    try {
+      await getUserInfo()
+    } catch (error) {
+      setToken(null)
+      state.user = null
+      throw error
+    }
+    return data
+  }
+  async function logout() {
+    const { data } = await http.get(urls.logout)
+    setToken(null)
+    state.user = null
+    state.ready = false
+    return data
+  }
+  return {
+    state,
+    getToken,
+    setToken,
+    removeToken: () => setToken(null),
+    getUserInfo,
+    login,
+    logout,
+  }
+}

package/src/core/http.js

@@ -0,0 +1,52 @@
+import axios from 'axios'
+import qs from 'qs'
+
+export function joinErrors(errors = {}) {
+  if (typeof errors === 'string') return { non_field_errors: errors }
+  if (Array.isArray(errors)) return { non_field_errors: errors.join('；') }
+  return Object.fromEntries(
+    Object.entries(errors).map(([name, value]) => [
+      name,
+      Array.isArray(value)
+        ? value.map((v) => (typeof v === 'object' ? JSON.stringify(v) : String(v))).join('；')
+        : typeof value === 'object' && value !== null
+          ? JSON.stringify(value)
+          : String(value),
+    ]),
+  )
+}
+
+export class DrfError extends Error {
+  constructor(error) {
+    const data = error.response?.data ?? error.msg ?? error.message
+    super(typeof data === 'string' ? data : (data?.detail ?? '请求失败'))
+    this.name = 'DrfError'
+    this.code = error.response?.status ?? error.code ?? -1
+    this.msg = data
+    this.fields = this.code === 400 ? joinErrors(data) : {}
+    this.cause = error
+  }
+}
+
+export function createHttp(options = {}) {
+  const http = axios.create({
+    baseURL: '/api/',
+    xsrfCookieName: 'csrftoken',
+    xsrfHeaderName: 'X-CSRFToken',
+    headers: { 'X-Requested-With': 'XMLHttpRequest' },
+    paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'comma', skipNulls: true }),
+    ...options,
+  })
+  http.interceptors.response.use(
+    (response) => response,
+    (error) => Promise.reject(error instanceof DrfError ? error : new DrfError(error)),
+  )
+  http.setBaseURL = (url) => {
+    http.defaults.baseURL = url
+  }
+  http.setAuthToken = (token) => {
+    if (token) http.defaults.headers.common.Authorization = `Token ${token}`
+    else delete http.defaults.headers.common.Authorization
+  }
+  return http
+}

package/src/core/menus.js

@@ -0,0 +1,39 @@
+const hidden = (value) => value === true || value === 'true'
+
+// Keep the original app selection, model.menu grouping and permission-key convention.
+export function genMenusFromApps(apps, menus, modelPermissions) {
+  const selected = Array.isArray(menus) ? menus : menus ? Object.keys(menus) : Object.keys(apps)
+  const groups = {}
+  for (const key of selected) {
+    const app = apps[key]
+    if (!app || hidden(app.hidden)) continue
+    const selection = !Array.isArray(menus) && menus?.[key]
+    const names =
+      typeof selection === 'string'
+        ? selection.split(',').map((s) => s.trim())
+        : selection || Object.keys(app.models ?? {})
+    const groupName = app.verbose_name || key
+    const items = []
+    if (app.home_page && !hidden(app.home_page.hidden))
+      items.push({ url: `/${key}/index/`, ...app.home_page })
+    for (const name of names) {
+      const model = app.models?.[name]
+      if (!model) continue
+      const isHidden =
+        model.hidden !== undefined
+          ? hidden(model.hidden)
+          : modelPermissions != null && !Object.hasOwn(modelPermissions, `${key}.${name}`)
+      if (isHidden) continue
+      const item = { name: model.verbose_name || name, icon: model.icon, url: `/${key}/${name}/` }
+      if (model.menu) {
+        groups[model.menu] ??= { name: model.menu, items: [] }
+        groups[model.menu].items.push(item)
+      } else items.push(item)
+    }
+    if (items.length) {
+      groups[groupName] ??= { name: groupName, icon: app.icon, items: [] }
+      groups[groupName].items.push(...items)
+    }
+  }
+  return groups
+}

package/src/core/metadata.js

@@ -0,0 +1,50 @@
+export function normalizeItems(items = 'all', templates = {}, normalize = (value) => value) {
+  const names = items === 'all' ? Object.keys(templates) : items
+  return names.map((item) => {
+    const name = typeof item === 'string' ? item : item.name
+    return normalize({ ...templates[name], ...(typeof item === 'string' ? {} : item), name })
+  })
+}
+export function fieldsFromOptions(options = {}, method = 'POST') {
+  const actions = options.actions ?? {}
+  return Object.fromEntries(
+    Object.entries({ ...actions.LIST, ...(actions[method] ?? actions.POST) }).map(
+      ([name, field]) => [name, { ...field, name }],
+    ),
+  )
+}
+export function emptyData(fields, defaults = {}) {
+  return Object.fromEntries(
+    Object.entries(fields)
+      .filter(([, f]) => !f.read_only)
+      .map(([name, f]) => {
+        const value = Object.hasOwn(defaults, name)
+          ? defaults[name]
+          : f.default !== undefined
+            ? f.default
+            : f.multiple
+              ? []
+              : f.type === 'boolean'
+                ? true
+                : f.type === 'string'
+                  ? ''
+                  : f.type === 'nested object'
+                    ? {}
+                    : null
+        return [name, structuredClone(value)]
+      }),
+  )
+}
+export function writableData(data, fields) {
+  return Object.fromEntries(
+    Object.entries(data).filter(([name]) => fields[name] && !fields[name].read_only),
+  )
+}
+export function displayValue(field, value) {
+  const one = (value) => field.choices?.find((c) => c.value === value)?.display_name ?? value
+  if (Array.isArray(value)) return value.map(one).join('、')
+  if (value == null) return '—'
+  if (field.choices) return one(value)
+  if (typeof value === 'boolean') return value ? '是' : '否'
+  return typeof value === 'object' ? JSON.stringify(value) : value
+}

package/src/core/registry.js

@@ -0,0 +1,127 @@
+import { createHttp } from './http.js'
+import { fieldsFromOptions, emptyData, writableData } from './metadata.js'
+
+export function createRegistry({
+  http = createHttp(),
+  apps = {},
+  views = {},
+  loadViewsConfig,
+} = {}) {
+  const configs = Object.create(null)
+  const models = new Map()
+  const registry = {
+    http,
+    configs,
+    register(apps) {
+      for (const [app, definition] of Object.entries(apps)) {
+        for (const [name, model] of Object.entries(definition.models ?? {})) {
+          const fullName = `${app}.${name}`
+          configs[fullName] = { ...model, app, name, fullName }
+          models.delete(fullName)
+        }
+      }
+      return registry
+    },
+    getConfig(name) {
+      if (!configs[name]) throw new Error(`model ${name} not found!`)
+      return configs[name]
+    },
+    get(name) {
+      if (!models.has(name))
+        models.set(name, AppModel(registry.getConfig(name), { http, views, loadViewsConfig }))
+      return models.get(name)
+    },
+  }
+  return registry.register(apps)
+}
+
+export function AppModel(config, { http = createHttp(), views = {}, loadViewsConfig } = {}) {
+  const fullName = config.fullName ?? `${config.app}.${config.name}`
+  // Relative URL preserves deployment prefixes such as /tenant/api/.
+  const listUrl = config.url ?? `${config.app}/${config.name}/`
+  let pendingOptions
+  let pendingViews
+  const model = {
+    config,
+    name: config.name,
+    fullName,
+    appModel: fullName,
+    listUrl,
+    verboseName: config.verbose_name ?? config.name,
+    title_field: config.title_field ?? 'name',
+    getListUrl: () => listUrl,
+    getDetailUrl(id) {
+      if (id == null || id === '') throw new Error('详情请求需要主键')
+      return `${listUrl}${encodeURIComponent(id)}/`
+    },
+    loadOptions() {
+      if (config.rest_options) return Promise.resolve(config.rest_options)
+      if (!pendingOptions)
+        pendingOptions = http
+          .options(listUrl)
+          .then(({ data }) => {
+            if (
+              !data ||
+              typeof data !== 'object' ||
+              Array.isArray(data) ||
+              !Object.keys(data).length
+            ) {
+              throw new Error(
+                `模型 ${fullName} 的 OPTIONS 返回空或无效元数据，请检查 API 代理是否拦截了 OPTIONS 请求`,
+              )
+            }
+            config.rest_options = data
+            return data
+          })
+          .finally(() => {
+            pendingOptions = undefined
+          })
+      return pendingOptions
+    },
+    loadViewsConfig() {
+      if (!pendingViews)
+        pendingViews = Promise.resolve()
+          .then(() => views[fullName] ?? (loadViewsConfig ? loadViewsConfig(fullName) : {}))
+          .catch((error) => {
+            pendingViews = undefined
+            throw error
+          })
+      return pendingViews
+    },
+    async fields(method = 'POST') {
+      return fieldsFromOptions(await model.loadOptions(), method)
+    },
+    loadObject(id) {
+      return http.get(model.getDetailUrl(id)).then((r) => r.data)
+    },
+    query(params = {}, url = listUrl) {
+      return http.get(url, { params }).then((r) => r.data)
+    },
+    async save(data, id, defaults = {}) {
+      const fields = await model.fields(id == null ? 'POST' : 'PATCH')
+      const payload = writableData({ ...defaults, ...data }, fields)
+      const response =
+        id == null
+          ? await http.post(listUrl, payload)
+          : await http.patch(model.getDetailUrl(id), payload)
+      return response.data
+    },
+    destroy(id) {
+      return http.delete(model.getDetailUrl(id)).then((r) => r.data)
+    },
+    doAction(action, data = {}, method = 'post', id) {
+      if (!/^[\w-]+$/.test(action)) throw new Error('动作名只能包含字母、数字、下划线和连字符')
+      const url = `${id == null ? listUrl : model.getDetailUrl(id)}${action}/`
+      return http
+        .request({
+          url,
+          method,
+          ...(['get', 'head'].includes(method.toLowerCase()) ? { params: data } : { data }),
+        })
+        .then((r) => r.data)
+    },
+    genEmptyDataFromRestOptions: emptyData,
+  }
+  return model
+}
+export const Register = createRegistry()