vue3-django 0.1.0

package/src/components/form/Form.vue

@@ -0,0 +1,285 @@
+<script setup>
+import { computed, nextTick, ref, useAttrs, watch } from 'vue'
+import { ElForm, ElFormItem, ElRow, ElCol, ElButton, ElAlert, ElMessage } from 'element-plus'
+import Field from './Field.vue'
+import { normalizeItems, getItemRules } from './Form.js'
+import { joinErrors } from '../../core/http.js'
+import { useDjango } from '../../composables/context.js'
+import Schema from 'async-validator'
+import { Form as VanForm, Field as VanField, Button as VanButton, NoticeBar } from 'vant'
+defineOptions({ inheritAttrs: false })
+const props = defineProps({
+  modelValue: Object,
+  value: Object,
+  items: { type: Array, default: () => [] },
+  groups: { type: Array, default: () => [] },
+  actions: Array,
+  url: String,
+  method: { type: String, default: 'post' },
+  options: { type: Object, default: () => ({}) },
+  submit: Function,
+  submitName: { type: String, default: '提交' },
+  successInfo: String,
+  showSuccess: { type: Boolean, default: true },
+  disabled: Boolean,
+  noLabel: Boolean,
+  oneColumn: Boolean,
+  inline: Boolean,
+  itemOptions: { type: Object, default: () => ({}) },
+  mobile: Boolean,
+})
+const emit = defineEmits(['update:modelValue', 'input', 'beforesubmit', 'form-posted', 'error'])
+const { registry } = useDjango()
+const attrs = useAttrs(),
+  form = ref(),
+  formValue = ref({}),
+  errors = ref({}),
+  loading = ref(false)
+const formItems = computed(() =>
+  normalizeItems(
+    props.items.length ? props.items : props.groups.flatMap((group) => group.items || []),
+  ),
+)
+const rules = computed(() => getItemRules(formItems.value))
+watch(
+  () => props.modelValue ?? props.value,
+  (value) => {
+    formValue.value = { ...value }
+  },
+  { immediate: true, deep: true },
+)
+function publish() {
+  emit('update:modelValue', { ...formValue.value })
+  emit('input', { ...formValue.value })
+}
+function update(name, value) {
+  formValue.value[name] = value
+  delete errors.value[name]
+  publish()
+}
+async function onSubmit() {
+  if (loading.value || props.disabled) return
+  errors.value = {}
+  try {
+    for (const field of formItems.value) {
+      if (typeof field.widget === 'function')
+        formValue.value[field.name] = field.widget(formValue.value)
+    }
+    const Validator = Schema.default || Schema
+    await new Validator(rules.value).validate(formValue.value)
+    await nextTick()
+    if (!props.mobile) {
+      const valid = await form.value.validate()
+      if (!valid) return false
+    }
+  } catch (validation) {
+    if (validation.fields)
+      errors.value = Object.fromEntries(
+        Object.entries(validation.fields).map(([name, messages]) => [
+          name,
+          messages.map((item) => item.message).join('；'),
+        ]),
+      )
+    return false
+  }
+  loading.value = true
+  try {
+    emit('beforesubmit', formValue.value)
+    publish()
+    let data
+    if (props.submit)
+      data = await props.submit({
+        formValue: formValue.value,
+        formItems: formItems.value,
+        errors: errors.value,
+        loading,
+        url: props.url,
+        method: props.method,
+      })
+    else {
+      if (!props.url) throw new Error('表单提交需要 url 或 submit 函数')
+      const response = await registry.http.request({
+        url: props.url,
+        method: props.method,
+        data: formValue.value,
+      })
+      data = response.data
+    }
+    if (data === false) return false
+    if (props.showSuccess) ElMessage.success(props.successInfo || `${props.submitName}成功`)
+    emit('form-posted', data)
+    return data
+  } catch (error) {
+    const status = error.code ?? error.response?.status
+    errors.value =
+      status === 400
+        ? joinErrors(error.msg ?? error.response?.data ?? {})
+        : { non_field_errors: error.message || '请求失败' }
+    emit('error', error)
+  } finally {
+    loading.value = false
+  }
+}
+const context = { onSubmit, formValue, formItems, loading, errors }
+defineExpose({ ...context, submit: onSubmit })
+</script>
+
+<template>
+  <VanForm
+    v-if="mobile"
+    :aria-busy="loading"
+    @submit="onSubmit"
+  >
+    <slot name="header" />
+    <NoticeBar
+      v-if="errors.non_field_errors || errors.detail"
+      :text="errors.non_field_errors || errors.detail"
+    />
+    <template
+      v-for="field in formItems"
+      :key="field.name"
+    >
+      <VanField
+        v-if="!field.hidden && field.widget !== 'hidden'"
+        :label="noLabel || field.noLabel ? '' : field.label"
+        :required="field.required"
+        :error-message="errors[field.name]"
+      >
+        <template #input>
+          <slot
+            :name="`field-${field.name}`"
+            :field="field"
+            :value="formValue[field.name]"
+            :update="(value) => update(field.name, value)"
+          >
+            <span v-if="typeof field.widget === 'function'">{{ field.widget(formValue) }}</span>
+            <Field
+              v-else
+              :field="field"
+              :model-value="formValue[field.name]"
+              mobile
+              @update:model-value="update(field.name, $event)"
+            />
+          </slot>
+        </template>
+      </VanField>
+    </template>
+    <slot
+      v-if="submitName"
+      name="submit"
+      :submit="onSubmit"
+      :loading="loading"
+      :saving="loading"
+    >
+      <template v-if="actions"
+        ><VanButton
+          v-for="action in actions"
+          :key="action.name"
+          :disabled="loading || disabled"
+          @click="action.name === 'submit' ? onSubmit() : action.do?.(context)"
+          >{{ action.label || action.name }}</VanButton
+        ></template
+      >
+      <VanButton
+        v-else
+        block
+        type="primary"
+        native-type="submit"
+        :loading="loading"
+        :disabled="disabled"
+        >{{ submitName }}</VanButton
+      >
+    </slot>
+    <slot name="footer" />
+  </VanForm>
+  <ElForm
+    v-else
+    ref="form"
+    v-bind="{ ...options.elForm, ...attrs }"
+    :model="formValue"
+    :rules="rules"
+    :inline="inline"
+    :label-width="noLabel ? '0px' : attrs.labelWidth || '160px'"
+    :aria-busy="loading"
+    @submit.prevent="onSubmit"
+  >
+    <slot name="header" />
+    <ElAlert
+      v-if="errors.non_field_errors || errors.detail"
+      :title="errors.non_field_errors || errors.detail"
+      type="error"
+      :closable="false"
+    />
+    <ElRow :gutter="20">
+      <template
+        v-for="field in formItems"
+        :key="field.name"
+      >
+        <input
+          v-if="field.widget === 'hidden' && !field.hidden"
+          type="hidden"
+          :value="formValue[field.name]"
+        />
+        <ElCol
+          v-else-if="!field.hidden"
+          v-bind="oneColumn || inline ? { span: 24 } : field.span"
+        >
+          <ElFormItem
+            v-bind="itemOptions"
+            :prop="field.name"
+            :label="noLabel || itemOptions.noLabel || field.noLabel ? '' : field.label"
+            :error="errors[field.name]"
+          >
+            <slot
+              :name="`field-${field.name}`"
+              :field="field"
+              :value="formValue[field.name]"
+              :update="(value) => update(field.name, value)"
+            >
+              <span v-if="typeof field.widget === 'function'">{{ field.widget(formValue) }}</span>
+              <Field
+                v-else
+                :field="field"
+                :model-value="formValue[field.name]"
+                :mobile="mobile"
+                @update:model-value="update(field.name, $event)"
+              />
+            </slot>
+          </ElFormItem>
+        </ElCol>
+      </template>
+      <ElCol
+        v-if="submitName"
+        :span="24"
+        ><ElFormItem>
+          <slot
+            name="submit"
+            :submit="onSubmit"
+            :loading="loading"
+            :saving="loading"
+          >
+            <template v-if="actions"
+              ><ElButton
+                v-for="action in actions"
+                :key="action.name"
+                :type="action.type"
+                :disabled="loading || disabled"
+                @click="action.name === 'submit' ? onSubmit() : action.do?.(context)"
+                >{{ action.label || action.name }}</ElButton
+              ></template
+            >
+            <ElButton
+              v-else
+              type="primary"
+              native-type="submit"
+              :loading="loading"
+              :disabled="disabled"
+              >{{ submitName }}</ElButton
+            >
+          </slot>
+        </ElFormItem></ElCol
+      >
+      <slot name="footer" />
+    </ElRow>
+  </ElForm>
+</template>

package/src/components/layout/Actions.vue

@@ -0,0 +1,132 @@
+<script setup>
+import { computed, reactive } from 'vue'
+import {
+  ElButton,
+  ElButtonGroup,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+  ElMessageBox,
+} from 'element-plus'
+import Icon from '../widgets/Icon.vue'
+import { useDrawer } from '../../composables/drawer.js'
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  context: { type: [Object, Function], default: () => ({}) },
+  map: { type: Object, default: () => ({}) },
+  permissionFunction: Function,
+  size: { type: String, default: 'small' },
+  trigger: { type: String, default: 'hover' },
+})
+const emit = defineEmits(['done', 'error', 'command'])
+const drawer = useDrawer()
+const loadingMap = reactive({})
+const context = computed(() =>
+  typeof props.context === 'function' ? props.context() : props.context,
+)
+function normalize(item) {
+  if (Array.isArray(item)) return item.flatMap((entry) => normalize(entry))
+  const name = typeof item === 'string' ? item : item.name
+  const action = { ...props.map[name], ...(typeof item === 'string' ? {} : item), name }
+  action.label = action.label ?? action.title ?? name
+  return action
+}
+function allowed(action) {
+  return (
+    (!action.permission ||
+      !props.permissionFunction ||
+      props.permissionFunction(action.permission)) &&
+    (!action.show || action.show(context.value))
+  )
+}
+const buttons = computed(() =>
+  props.items
+    .filter((item) => !Array.isArray(item))
+    .map(normalize)
+    .filter(allowed),
+)
+const dropdown = computed(() =>
+  props.items.filter(Array.isArray).flatMap(normalize).filter(allowed),
+)
+
+async function handleCommand(action) {
+  if (loadingMap[action.name] || action.disabled || !allowed(action)) return
+  loadingMap[action.name] = true
+  try {
+    const actionContext = context.value
+    if (typeof action.confirm === 'function') {
+      if ((await action.confirm(action, actionContext)) === false) return
+    } else if (action.confirm) {
+      await ElMessageBox.confirm(action.notice ?? `确定执行“${action.label}”吗？`, '操作确认', {
+        type: 'warning',
+      })
+    }
+    emit('command', action, actionContext)
+    if (typeof action.do === 'function') {
+      const result = await action.do(actionContext)
+      emit('done', result, action)
+    } else {
+      if (!drawer) throw new Error('Actions 的抽屉操作需要放在 Layout 内')
+      await drawer.open({
+        component: action.do ?? action.component,
+        label: action.label,
+        context: { ...action.drawer, ...actionContext },
+        onDone: async (result) => {
+          await action.onDone?.(result)
+          emit('done', result, action)
+        },
+      })
+    }
+  } catch (error) {
+    if (error !== 'cancel' && error !== 'close') emit('error', error, action)
+  } finally {
+    loadingMap[action.name] = false
+  }
+}
+defineExpose({ handleCommand, loadingMap })
+</script>
+
+<template>
+  <ElButtonGroup
+    v-if="buttons.length || dropdown.length"
+    class="vd-actions"
+  >
+    <ElButton
+      v-for="action in buttons"
+      :key="action.name"
+      :size="action.size ?? size"
+      :type="action.type"
+      :plain="action.plain"
+      :disabled="action.disabled"
+      :loading="loadingMap[action.name]"
+      @click="handleCommand(action)"
+      ><Icon :icon="action.icon" />{{ action.label }}</ElButton
+    >
+    <ElDropdown
+      v-if="dropdown.length"
+      :size="size"
+      :trigger="trigger"
+      @command="handleCommand"
+    >
+      <ElButton
+        :size="size"
+        aria-label="更多操作"
+        >更多 ▾</ElButton
+      >
+      <template #dropdown>
+        <ElDropdownMenu>
+          <ElDropdownItem
+            v-for="action in dropdown"
+            :key="action.name"
+            :command="action"
+            :disabled="action.disabled || loadingMap[action.name]"
+            :divided="action.divided"
+          >
+            <Icon :icon="action.icon" />{{ action.label }}
+          </ElDropdownItem>
+        </ElDropdownMenu>
+      </template>
+    </ElDropdown>
+  </ElButtonGroup>
+</template>

package/src/components/layout/Drawer.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { ref, shallowRef } from 'vue'
+import { ElDrawer, ElAlert } from 'element-plus'
+
+const props = defineProps({ loadView: Function })
+const emit = defineEmits(['done', 'error', 'closed'])
+const visible = ref(false)
+const current = shallowRef()
+const message = ref('')
+let generation = 0
+
+async function open(options = {}) {
+  const request = ++generation
+  visible.value = false
+  current.value = undefined
+  message.value = ''
+  try {
+    let component = options.component
+    if (typeof component === 'string') {
+      if (!props.loadView) throw new Error('字符串抽屉组件需要配置 loadDrawerView')
+      const module = await props.loadView(component)
+      component = module.default ?? module
+    }
+    if (request !== generation) return
+    if (!component) throw new Error('抽屉缺少 component')
+    const context = Object.fromEntries(
+      Object.entries(options.context ?? {}).filter(([key]) => !key.startsWith('$')),
+    )
+    current.value = {
+      ...options,
+      component,
+      context,
+      title: options.title ?? context.title ?? options.label ?? '',
+      size: options.size ?? context.size ?? '30%',
+    }
+    visible.value = true
+  } catch (error) {
+    if (request !== generation) return
+    emit('error', error)
+    throw error
+  }
+}
+function close() {
+  generation++
+  visible.value = false
+}
+async function done(result) {
+  const callback = current.value?.onDone
+  close()
+  emit('done', result)
+  try {
+    await callback?.(result)
+  } catch (error) {
+    message.value = error.message
+    emit('error', error)
+  }
+}
+function closed() {
+  if (!visible.value) current.value = undefined
+  emit('closed')
+}
+defineExpose({ open, onOpen: open, close })
+</script>
+
+<template>
+  <ElAlert
+    v-if="message"
+    :title="message"
+    type="error"
+  />
+  <ElDrawer
+    v-model="visible"
+    v-bind="$attrs"
+    :title="current?.title"
+    :size="current?.size ?? '30%'"
+    :direction="current?.direction ?? 'rtl'"
+    :before-close="current?.beforeClose"
+    @closed="closed"
+  >
+    <component
+      v-if="current"
+      :is="current.component"
+      v-bind="current.context"
+      @done="done"
+    />
+  </ElDrawer>
+</template>

package/src/components/layout/Layout.vue

@@ -0,0 +1,193 @@
+<script setup>
+import { computed, provide, ref } from 'vue'
+import { useRoute, RouterView, RouterLink } from 'vue-router'
+import { ElButton } from 'element-plus'
+import SideBar from './SideBar.vue'
+import ViewTabs from './ViewTabs.vue'
+import Drawer from './Drawer.vue'
+import Actions from './Actions.vue'
+import { DrawerKey } from '../../composables/drawer.js'
+const props = defineProps({
+  menus: Object,
+  title: { type: String, default: 'vue3-django' },
+  user: Object,
+  actions: Array,
+  actionContext: [Object, Function],
+  actionMap: Object,
+  permissionFunction: Function,
+  loadDrawerView: Function,
+})
+const emit = defineEmits(['logout', 'action-done', 'error'])
+const route = useRoute(),
+  opened = ref(false),
+  tabs = ref()
+const drawer = ref()
+const drawerApi = {
+  open: (options) => drawer.value.open(options),
+  close: () => drawer.value.close(),
+}
+provide(DrawerKey, drawerApi)
+const standalone = computed(() => route.meta.layout === 'main')
+defineExpose({
+  resetTabs: () => tabs.value?.resetTabs(),
+  openDrawer: drawerApi.open,
+  closeDrawer: drawerApi.close,
+})
+</script>
+<template>
+  <RouterView v-if="standalone" />
+  <div
+    v-else
+    class="django-layout"
+  >
+    <header class="layout-header">
+      <ElButton
+        class="menu-toggle"
+        aria-label="切换导航菜单"
+        :aria-expanded="opened"
+        @click="opened = !opened"
+        >菜单</ElButton
+      ><RouterLink
+        to="/"
+        class="layout-brand"
+        >{{ title }}</RouterLink
+      >
+      <div class="layout-account">
+        <slot name="actions">
+          <Actions
+            :items="actions"
+            :context="actionContext"
+            :map="actionMap"
+            :permission-function="permissionFunction"
+            @done="(result, action) => emit('action-done', result, action)"
+            @error="emit('error', $event)"
+          />
+        </slot>
+        <span>{{ user?.name || user?.username }}</span
+        ><ElButton
+          v-if="user"
+          @click="$emit('logout')"
+          >退出登录</ElButton
+        >
+      </div>
+    </header>
+    <div class="layout-body">
+      <button
+        v-if="opened"
+        class="menu-backdrop"
+        aria-label="关闭导航菜单"
+        @click="opened = false"
+      />
+      <aside
+        class="layout-sidebar"
+        :class="{ opened }"
+      >
+        <SideBar
+          :menus="menus"
+          @navigate="opened = false"
+        />
+      </aside>
+      <section
+        class="layout-content"
+        aria-label="工作区"
+      >
+        <ViewTabs ref="tabs" />
+      </section>
+    </div>
+  </div>
+  <Drawer
+    ref="drawer"
+    :load-view="loadDrawerView"
+    @error="emit('error', $event)"
+  />
+</template>
+<style scoped>
+.django-layout {
+  min-height: 100vh;
+  background: #f4f7fa;
+  color: #253447;
+}
+.layout-header {
+  height: 64px;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  background: white;
+  border-bottom: 1px solid #e5eaf0;
+}
+.layout-brand {
+  font-size: 20px;
+  font-weight: 700;
+  color: inherit;
+  text-decoration: none;
+}
+.layout-account {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.layout-body {
+  display: flex;
+  min-height: calc(100vh - 65px);
+}
+.layout-sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  background: white;
+  border-right: 1px solid #e5eaf0;
+}
+.layout-sidebar :deep(.el-menu) {
+  border-right: 0;
+}
+.layout-content {
+  min-width: 0;
+  flex: 1;
+  padding-top: 20px;
+}
+.menu-toggle,
+.menu-backdrop {
+  display: none;
+}
+.layout-content :deep(main) {
+  margin: 24px auto;
+}
+.layout-content :deep(.viewtabs) {
+  margin: 0 20px;
+}
+@media (max-width: 768px) {
+  .menu-toggle {
+    display: inline-flex;
+  }
+  .layout-header {
+    padding: 0 12px;
+  }
+  .layout-brand {
+    font-size: 16px;
+  }
+  .layout-sidebar {
+    display: none;
+  }
+  .layout-sidebar.opened {
+    display: block;
+    position: fixed;
+    top: 65px;
+    bottom: 0;
+    left: 0;
+    z-index: 21;
+    overflow: auto;
+  }
+  .menu-backdrop {
+    display: block;
+    position: fixed;
+    inset: 65px 0 0;
+    background: #0006;
+    border: 0;
+    z-index: 20;
+  }
+  .layout-content :deep(.viewtabs) {
+    margin: 0 8px;
+  }
+}
+</style>