feat:后台用户关系绑定

2026-07-20 15:52:06 +08:00
1 parent 507bea5469
commit f125d8d1bf
@@ -22,6 +22,10 @@
 		"@element-plus/icons-vue": "^2.0.10",
 		"@map-component/vue-tmap": "^1.0.1",
 		"@popperjs/core": "2.11.8",
+		"@vue-flow/background": "^1.3.2",
+		"@vue-flow/controls": "^1.1.3",
+		"@vue-flow/core": "^1.48.2",
+		"@vue-flow/minimap": "^1.5.4",
 		"@vueuse/core": "^10.4.1",
 		"@vxe-ui/plugin-render-element": "^4.0.10",
 		"@wangeditor/editor": "5.1.23",
@@ -121,4 +125,4 @@
 		"type": "git",
 		"url": "https://gitee.com/log4j/pig"
 	}
-}
+}
@@ -22,6 +22,18 @@ importers:
      "@popperjs/core":
        specifier: 2.11.8
        version: 2.11.8
+      "@vue-flow/background":
+        specifier: ^1.3.2
+        version: 1.3.2(@vue-flow/core@1.48.2(vue@3.4.15(typescript@4.9.5)))(vue@3.4.15(typescript@4.9.5))
+      "@vue-flow/controls":
+        specifier: ^1.1.3
+        version: 1.1.3(@vue-flow/core@1.48.2(vue@3.4.15(typescript@4.9.5)))(vue@3.4.15(typescript@4.9.5))
+      "@vue-flow/core":
+        specifier: ^1.48.2
+        version: 1.48.2(vue@3.4.15(typescript@4.9.5))
+      "@vue-flow/minimap":
+        specifier: ^1.5.4
+        version: 1.5.4(@vue-flow/core@1.48.2(vue@3.4.15(typescript@4.9.5)))(vue@3.4.15(typescript@4.9.5))
      "@vueuse/core":
        specifier: ^10.4.1
        version: 10.11.1(vue@3.4.15(typescript@4.9.5))
@@ -1326,6 +1338,41 @@ packages:
      vite: ^4.0.0 || ^5.0.0
      vue: ^3.2.25

+  "@vue-flow/background@1.3.2":
+    resolution:
+      {
+        integrity: sha512-eJPhDcLj1wEo45bBoqTXw1uhl0yK2RaQGnEINqvvBsAFKh/camHJd5NPmOdS1w+M9lggc9igUewxaEd3iCQX2w==,
+      }
+    peerDependencies:
+      "@vue-flow/core": ^1.23.0
+      vue: ^3.3.0
+
+  "@vue-flow/controls@1.1.3":
+    resolution:
+      {
+        integrity: sha512-XCf+G+jCvaWURdFlZmOjifZGw3XMhN5hHlfMGkWh9xot+9nH9gdTZtn+ldIJKtarg3B21iyHU8JjKDhYcB6JMw==,
+      }
+    peerDependencies:
+      "@vue-flow/core": ^1.23.0
+      vue: ^3.3.0
+
+  "@vue-flow/core@1.48.2":
+    resolution:
+      {
+        integrity: sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA==,
+      }
+    peerDependencies:
+      vue: ^3.3.0
+
+  "@vue-flow/minimap@1.5.4":
+    resolution:
+      {
+        integrity: sha512-l4C+XTAXnRxsRpUdN7cAVFBennC1sVRzq4bDSpVK+ag7tdMczAnhFYGgbLkUw3v3sY6gokyWwMl8CDonp8eB2g==,
+      }
+    peerDependencies:
+      "@vue-flow/core": ^1.23.0
+      vue: ^3.3.0
+
  "@vue/compiler-core@3.4.15":
    resolution:
      {
@@ -2076,6 +2123,71 @@ packages:
      }
    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }

+  d3-color@3.1.0:
+    resolution:
+      {
+        integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==,
+      }
+    engines: { node: ">=12" }
+
+  d3-dispatch@3.0.1:
+    resolution:
+      {
+        integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==,
+      }
+    engines: { node: ">=12" }
+
+  d3-drag@3.0.0:
+    resolution:
+      {
+        integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==,
+      }
+    engines: { node: ">=12" }
+
+  d3-ease@3.0.1:
+    resolution:
+      {
+        integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==,
+      }
+    engines: { node: ">=12" }
+
+  d3-interpolate@3.0.1:
+    resolution:
+      {
+        integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==,
+      }
+    engines: { node: ">=12" }
+
+  d3-selection@3.0.0:
+    resolution:
+      {
+        integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==,
+      }
+    engines: { node: ">=12" }
+
+  d3-timer@3.0.1:
+    resolution:
+      {
+        integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==,
+      }
+    engines: { node: ">=12" }
+
+  d3-transition@3.0.1:
+    resolution:
+      {
+        integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==,
+      }
+    engines: { node: ">=12" }
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution:
+      {
+        integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==,
+      }
+    engines: { node: ">=12" }
+
  d@1.0.2:
    resolution:
      {
@@ -5487,6 +5599,34 @@ snapshots:
      vite: 4.5.14(@types/node@18.19.130)(sass@1.58.3)(terser@5.44.0)
      vue: 3.4.15(typescript@4.9.5)

+  "@vue-flow/background@1.3.2(@vue-flow/core@1.48.2(vue@3.4.15(typescript@4.9.5)))(vue@3.4.15(typescript@4.9.5))":
+    dependencies:
+      "@vue-flow/core": 1.48.2(vue@3.4.15(typescript@4.9.5))
+      vue: 3.4.15(typescript@4.9.5)
+
+  "@vue-flow/controls@1.1.3(@vue-flow/core@1.48.2(vue@3.4.15(typescript@4.9.5)))(vue@3.4.15(typescript@4.9.5))":
+    dependencies:
+      "@vue-flow/core": 1.48.2(vue@3.4.15(typescript@4.9.5))
+      vue: 3.4.15(typescript@4.9.5)
+
+  "@vue-flow/core@1.48.2(vue@3.4.15(typescript@4.9.5))":
+    dependencies:
+      "@vueuse/core": 10.11.1(vue@3.4.15(typescript@4.9.5))
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.4.15(typescript@4.9.5)
+    transitivePeerDependencies:
+      - "@vue/composition-api"
+
+  "@vue-flow/minimap@1.5.4(@vue-flow/core@1.48.2(vue@3.4.15(typescript@4.9.5)))(vue@3.4.15(typescript@4.9.5))":
+    dependencies:
+      "@vue-flow/core": 1.48.2(vue@3.4.15(typescript@4.9.5))
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.4.15(typescript@4.9.5)
+
  "@vue/compiler-core@3.4.15":
    dependencies:
      "@babel/parser": 7.28.4
@@ -5961,6 +6101,42 @@ snapshots:

  culori@3.3.0: {}

+  d3-color@3.1.0: {}
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-ease@3.0.1: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-timer@3.0.1: {}
+
+  "d3-transition@3.0.1(d3-selection@3.0.0)":
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
  d@1.0.2:
    dependencies:
      es5-ext: 0.10.64
@@ -0,0 +1,97 @@
+import request from "/@/utils/request"
+
+export interface RelationGraphNode {
+	nodeId: string
+	parentNodeId?: string
+	root: boolean
+	repeated: boolean
+	userId: string
+	username?: string
+	name?: string
+	nickname?: string
+	displayName: string
+	avatar?: string
+	gender?: number
+	userCount?: number
+	relationCount?: number
+	relationId?: string
+	subjectUserId?: string
+	objectUserId?: string
+	relationTypeId?: string
+	relationCode?: string
+	relationName?: string
+	category?: string
+	directedFlag?: string
+	relationDirection?: "subject-to-object" | "object-to-subject"
+	userRoleName?: string
+	parentRoleName?: string
+	relationDescription?: string
+	effectiveTime?: string
+	expireTime?: string
+	remark?: string
+	children?: RelationGraphNode[]
+}
+
+export interface RelationCreateUserForm {
+	subjectUserId?: string
+	objectUserId?: string
+	relationTypeId: string
+	effectiveTime?: string
+	expireTime?: string
+	remark?: string
+	username: string
+	password: string
+	phone?: string
+	name: string
+	nickname?: string
+	email?: string
+	avatar?: string
+	deptId?: string
+	role?: string[]
+	post?: string[]
+	gender?: number
+	staffingType?: string
+	lockFlag?: string
+	identityTypes: string[]
+	studentInfo?: {
+		studentNo: string
+		schoolName: string
+		className: string
+		extJson: string
+	}
+}
+
+export interface RelationCreateForm {
+	subjectUserId: string
+	objectUserId: string
+	relationTypeId: string
+	effectiveTime?: string
+	expireTime?: string
+	remark?: string
+}
+
+// 关系图谱
+export function getRelationGraph(userId?: string) {
+	return request({
+		url: "/admin/sysUserRelation/graph/" + userId,
+		method: "get",
+	})
+}
+
+// 创建用户并建立关系
+export function createRelationUser(data: RelationCreateUserForm) {
+	return request({
+		url: "/admin/sysUserRelation/create-user",
+		method: "post",
+		data,
+	})
+}
+
+// 为两个已有用户建立关系
+export function createRelation(data: RelationCreateForm) {
+	return request({
+		url: "/admin/sysUserRelation/create",
+		method: "post",
+		data,
+	})
+}
@@ -0,0 +1,40 @@
+import request from "/@/utils/request"
+
+export function fetchList(query?: Object) {
+	return request({
+		url: "/admin/sysUserRelationType/page",
+		method: "get",
+		params: query,
+	})
+}
+
+export function addObj(obj?: Object) {
+	return request({
+		url: "/admin/sysUserRelationType",
+		method: "post",
+		data: obj,
+	})
+}
+
+export function getObj(id?: string) {
+	return request({
+		url: "/admin/sysUserRelationType/" + id,
+		method: "get",
+	})
+}
+
+export function delObjs(ids?: Object) {
+	return request({
+		url: "/admin/sysUserRelationType",
+		method: "delete",
+		data: ids,
+	})
+}
+
+export function putObj(obj?: Object) {
+	return request({
+		url: "/admin/sysUserRelationType",
+		method: "put",
+		data: obj,
+	})
+}
@@ -1,8 +1,24 @@
 <template>
-	<el-select style="width: 100%" v-model="state.selectId" :placeholder="props.placeholder" clearable
-		remote-show-suffix filterable remote :remote-method="remoteSearch" :loading="state.loading"
-		@visible-change="(e: boolean) => e && getOptions()" @change="change">
-		<el-option v-for="v in state.options" :key="v.userId" :label="`${v.name}-${v.phone}`" :value="v.userId">
+	<el-select
+		style="width: 100%"
+		v-model="state.selectId"
+		:placeholder="props.placeholder"
+		clearable
+		remote-show-suffix
+		filterable
+		remote
+		:remote-method="remoteSearch"
+		:loading="state.loading"
+		@visible-change="(e: boolean) => e && getOptions()"
+		@change="change"
+	>
+		<el-option
+			v-for="v in state.options"
+			:key="v.userId"
+			:label="`${v.name}-${v.phone}`"
+			:value="v.userId"
+			:disabled="isExcluded(v.userId)"
+		>
 			<div class="flex items-center">
 				<div class="color-primary">{{ v.name }}</div>
 				<div class="pl5 color-success">{{ v.phone }}</div>
@@ -20,9 +36,11 @@ const selectId = defineModel()

 export type Props = {
 	placeholder?: string
+	excludeUserIds?: Array<string | number>
 }
 const props = withDefaults(defineProps<Props>(), {
 	placeholder: "输入姓名、手机号",
+	excludeUserIds: () => [],
 })

 const queryForm = reactive<any>({
@@ -68,13 +86,12 @@ function remoteSearch(params: string) {
 	}
 }

-function clear() {
-	state.selectId = null
-	getOptions()
-}
-
 function change(v: any) {
 	const targetUser = state.options.find((i: any) => i.userId == v)
 	emit("change", targetUser)
 }
+
+function isExcluded(userId: string | number) {
+	return props.excludeUserIds.some((id) => String(id) === String(userId))
+}
 </script>
@@ -57,6 +57,15 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 			isHide: true,
 		},
 	},
+	{
+		path: "/admin/system/user/relation-tree",
+		name: "router.userRelationTree",
+		component: () => import("/@/views/admin/system/user/relation-tree.vue"),
+		meta: {
+			isHide: true,
+			isKeepAlive: false,
+		},
+	},
 ]

 /**
@@ -0,0 +1,179 @@
+<template>
+	<el-dialog v-model="visible" :title="form.relationTypeId ? '编辑' : '新增'" width="720px" :close-on-click-modal="false"
+		draggable>
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="110px" v-loading="loading">
+			<el-row :gutter="24">
+				<el-col :span="12" class="mb20">
+					<el-form-item label="关系类型" prop="relationCode">
+						<dict-select v-model="form.relationCode" dict-code="sys_user_relation_type"
+							placeholder="请选择关系类型" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="关系名称" prop="relationName">
+						<el-input v-model="form.relationName" disabled placeholder="选择关系类型后自动带出" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="主语称呼" prop="subjectRoleName">
+						<el-input v-model="form.subjectRoleName" maxlength="50" placeholder="请输入主语一方称呼" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="对象称呼" prop="objectRoleName">
+						<el-input v-model="form.objectRoleName" maxlength="50" placeholder="请输入对象一方称呼" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="关系分类" prop="category">
+						<dict-select v-model="form.category" dict-code="sys_user_relation_category"
+							placeholder="请选择关系分类" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="是否有方向" prop="directedFlag">
+						<dict-select v-model="form.directedFlag" dict-code="yes_no_type" placeholder="请选择是否有方向" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="排序" prop="sortOrder">
+						<el-input-number v-model="form.sortOrder" :min="0" :max="9999" controls-position="right"
+							style="width: 100%" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="状态" prop="status">
+						<el-radio-group v-model="form.status">
+							<el-radio v-for="item in relationStatusOptions" :key="item.value" :label="item.value"
+								border>
+								{{ item.label }}
+							</el-radio>
+						</el-radio-group>
+					</el-form-item>
+				</el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="备注" prop="remark">
+						<el-input v-model="form.remark" type="textarea" maxlength="200" show-word-limit :rows="3"
+							placeholder="请输入备注" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="visible = false">取消</el-button>
+				<el-button type="primary" :disabled="loading" @click="onSubmit">确认</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="SysUserRelationTypeDialog">
+import { useDict } from "/@/hooks/dict"
+import { useMessage } from "/@/hooks/message"
+import * as sysUserRelationTypeApi from "/@/api/admin/sysUserRelationType"
+import { rule } from "/@/utils/validate"
+
+const emit = defineEmits(["refresh"])
+
+const { sys_user_relation_type } = useDict("sys_user_relation_type")
+
+const relationStatusOptions = [
+	{ label: "正常", value: "0" },
+	{ label: "停用", value: "1" },
+]
+
+const dataFormRef = ref()
+const visible = ref(false)
+const loading = ref(false)
+
+const form = reactive({
+	relationTypeId: "",
+	relationCode: "",
+	relationName: "",
+	subjectRoleName: "",
+	objectRoleName: "",
+	category: "",
+	directedFlag: "0",
+	sortOrder: 0,
+	status: "0",
+	remark: "",
+})
+
+const dataRules = {
+	relationCode: [{ required: true, message: "请选择关系类型", trigger: "change" }],
+	subjectRoleName: [
+		{ validator: rule.overLength, trigger: "blur" },
+		{ required: true, message: "请输入主语一方称呼", trigger: "blur" },
+	],
+	objectRoleName: [
+		{ validator: rule.overLength, trigger: "blur" },
+		{ required: true, message: "请输入对象一方称呼", trigger: "blur" },
+	],
+	category: [{ required: true, message: "请选择关系分类", trigger: "change" }],
+	directedFlag: [{ required: true, message: "请选择是否有方向", trigger: "change" }],
+	sortOrder: [{ required: true, message: "请输入排序", trigger: "change" }],
+	status: [{ required: true, message: "请选择状态", trigger: "change" }],
+	remark: [{ validator: rule.overLength, trigger: "blur" }],
+}
+
+const syncRelationName = () => {
+	const relationType = sys_user_relation_type.value?.find((item: any) => item.value === form.relationCode)
+	if (relationType) form.relationName = relationType.label
+}
+
+watch([() => form.relationCode, sys_user_relation_type], syncRelationName, { deep: true })
+
+const openDialog = (id?: string) => {
+	visible.value = true
+	Object.assign(form, {
+		relationTypeId: "",
+		relationCode: "",
+		relationName: "",
+		subjectRoleName: "",
+		objectRoleName: "",
+		category: "",
+		directedFlag: "0",
+		sortOrder: 0,
+		status: "0",
+		remark: "",
+	})
+
+	nextTick(() => dataFormRef.value?.clearValidate())
+
+	if (id) getSysUserRelationTypeData(id)
+}
+
+const onSubmit = async () => {
+	const valid = await dataFormRef.value?.validate().catch(() => false)
+	if (!valid) return
+
+	syncRelationName()
+	try {
+		loading.value = true
+		form.relationTypeId ? await sysUserRelationTypeApi.putObj(form) : await sysUserRelationTypeApi.addObj(form)
+		useMessage().success(form.relationTypeId ? "修改成功" : "添加成功")
+		visible.value = false
+		emit("refresh")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	} finally {
+		loading.value = false
+	}
+}
+
+const getSysUserRelationTypeData = async (id: string) => {
+	try {
+		loading.value = true
+		const { data } = await sysUserRelationTypeApi.getObj(id)
+		Object.assign(form, data)
+		syncRelationName()
+	} finally {
+		loading.value = false
+	}
+}
+
+defineExpose({
+	openDialog,
+})
+</script>
@@ -0,0 +1,119 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-row>
+				<div class="mb8" style="width: 100%">
+					<el-button class="ml10" icon="folder-add" type="primary" v-auth="'dzc_sysUserRelationType_add'"
+						@click="formDialogRef.openDialog()">
+						新 增
+					</el-button>
+					<el-button plain :disabled="multiple" icon="Delete" type="primary"
+						v-auth="'dzc_sysUserRelationType_del'" @click="handleDelete(selectObjs)">
+						删除
+					</el-button>
+					<right-toolbar class="ml10 mr20" style="float: right" :search="false" @queryTable="getDataList" />
+				</div>
+			</el-row>
+			<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangeHandle"
+				@sort-change="sortChangeHandle">
+				<el-table-column type="selection" width="40" align="center" />
+				<el-table-column type="index" label="#" width="60" />
+				<el-table-column prop="relationCode" label="关系编码" min-width="180" show-overflow-tooltip />
+				<el-table-column prop="relationName" label="关系类型" min-width="120">
+					<template #default="{ row }">
+						<dict-tag :options="sys_user_relation_type" :value="row.relationCode" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="subjectRoleName" label="主语称呼" min-width="120" show-overflow-tooltip />
+				<el-table-column prop="objectRoleName" label="对象称呼" min-width="120" show-overflow-tooltip />
+				<el-table-column prop="category" label="关系分类" min-width="110">
+					<template #default="{ row }">
+						<dict-tag :options="sys_user_relation_category" :value="row.category" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="directedFlag" label="是否有方向" width="110" align="center">
+					<template #default="{ row }">
+						<dict-tag :options="yes_no_type" :value="row.directedFlag" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="sortOrder" label="排序" width="90" align="center" sortable="custom" />
+				<el-table-column prop="status" label="状态" width="90" align="center">
+					<template #default="{ row }">
+						<dict-tag :options="relationStatusOptions" :value="row.status" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
+				<el-table-column prop="createTime" label="创建时间" width="180" />
+				<el-table-column label="操作" fixed="right" width="150">
+					<template #default="{ row }">
+						<el-button icon="edit-pen" text type="primary" v-auth="'dzc_sysUserRelationType_edit'"
+							@click="formDialogRef.openDialog(row.relationTypeId)">
+							编辑
+						</el-button>
+						<el-button icon="delete" text type="primary" v-auth="'dzc_sysUserRelationType_del'"
+							@click="handleDelete([row.relationTypeId])">
+							删除
+						</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
+				v-bind="state.pagination" />
+		</div>
+
+		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+	</div>
+</template>
+
+<script setup lang="ts" name="systemSysUserRelationType">
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import * as sysUserRelationTypeApi from "/@/api/admin/sysUserRelationType"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useDict } from "/@/hooks/dict"
+
+const FormDialog = defineAsyncComponent(() => import("./form.vue"))
+
+const { sys_user_relation_category, sys_user_relation_type, yes_no_type } = useDict(
+	"sys_user_relation_category",
+	"sys_user_relation_type",
+	"yes_no_type",
+)
+
+const relationStatusOptions = [
+	{ label: "正常", value: "0", elTagType: "success" },
+	{ label: "停用", value: "1", elTagType: "danger" },
+]
+
+const formDialogRef = ref()
+const selectObjs = ref<string[]>([])
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+	queryForm: {},
+	pageList: sysUserRelationTypeApi.fetchList,
+})
+
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state)
+
+const selectionChangeHandle = (rows: { relationTypeId: string }[]) => {
+	selectObjs.value = rows.map(({ relationTypeId }) => relationTypeId)
+	multiple.value = !rows.length
+}
+
+const handleDelete = async (ids: string[]) => {
+	try {
+		await useMessageBox().confirm("此操作将永久删除")
+	} catch {
+		return
+	}
+
+	try {
+		await sysUserRelationTypeApi.delObjs(ids)
+		useMessage().success("删除成功")
+		getDataList()
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
+}
+</script>
@@ -0,0 +1,70 @@
+export const DEFAULT_USER_IDENTITY = "DEFAULT"
+export const STUDENT_USER_IDENTITY = "STUDENT"
+
+export interface UserStudentInfo {
+	studentNo: string
+	schoolName: string
+	className: string
+	extJson: string
+}
+
+export interface UserInfoFormModel {
+	userId: string
+	username: string
+	password?: string
+	salt: string
+	wxOpenid: string
+	qqOpenid: string
+	lockFlag: string
+	phone?: string
+	deptId: string
+	roleList: any[]
+	postList: any[]
+	nickname: string
+	name: string
+	email: string
+	avatar?: string
+	gender: number
+	staffingType: string
+	identityTypes: string[]
+	studentInfo: UserStudentInfo
+	post: Array<string | number>
+	role: Array<string | number>
+}
+
+export const createEmptyStudentInfo = (): UserStudentInfo => ({
+	studentNo: "",
+	schoolName: "",
+	className: "",
+	extJson: "",
+})
+
+export const createEmptyUserInfo = (deptId = ""): UserInfoFormModel => ({
+	userId: "",
+	username: "",
+	password: "",
+	salt: "",
+	wxOpenid: "",
+	qqOpenid: "",
+	lockFlag: "0",
+	phone: "",
+	deptId,
+	roleList: [],
+	postList: [],
+	nickname: "",
+	name: "",
+	email: "",
+	avatar: "",
+	gender: 0,
+	staffingType: "2",
+	identityTypes: [DEFAULT_USER_IDENTITY],
+	studentInfo: createEmptyStudentInfo(),
+	post: [],
+	role: [],
+})
+
+export const getUserIdentityPayload = (model: UserInfoFormModel) => ({
+	identityTypes: [...model.identityTypes],
+	phone: model.identityTypes.includes(DEFAULT_USER_IDENTITY) ? model.phone : undefined,
+	studentInfo: model.identityTypes.includes(STUDENT_USER_IDENTITY) ? { ...model.studentInfo } : undefined,
+})
@@ -0,0 +1,312 @@
+<template>
+	<el-form ref="formRef" :model="model" :rules="formRules" label-width="90px" v-loading="loading || optionsLoading">
+		<el-row :gutter="20">
+			<el-col :span="12" class="mb20">
+				<el-form-item :label="$t('sysuser.username')" prop="username">
+					<el-input v-model.trim="model.username" :disabled="isEdit && !auth('user_sysUser_editUsername')"
+						placeholder="请输入用户名" />
+				</el-form-item>
+			</el-col>
+			<el-col :span="12" class="mb20">
+				<el-form-item :label="$t('sysuser.password')" prop="password">
+					<el-input v-model="model.password" clearable show-password placeholder="请输入密码" type="password" />
+				</el-form-item>
+			</el-col>
+			<el-col :span="12" class="mb20">
+				<el-form-item :label="$t('sysuser.name')" prop="name">
+					<el-input v-model="model.name" clearable placeholder="请输入姓名" />
+				</el-form-item>
+			</el-col>
+			<el-col :span="12" class="mb20">
+				<el-form-item label="性别" prop="gender">
+					<el-radio-group v-model="model.gender">
+						<el-radio :label="0">未知</el-radio>
+						<el-radio :label="1">男</el-radio>
+						<el-radio :label="2">女</el-radio>
+					</el-radio-group>
+				</el-form-item>
+			</el-col>
+			<el-col v-if="!isDeptAdmin" :span="12" class="mb20">
+				<el-form-item :label="$t('sysuser.role')" prop="role">
+					<el-select v-model="model.role" clearable multiple placeholder="请选择角色" class="w100">
+						<el-option v-for="item in roleData" :key="item.roleId" :label="item.roleName"
+							:value="item.roleId" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+			<el-col v-if="!isDeptAdmin" :span="12" class="mb20">
+				<el-form-item :label="$t('sysuser.post')" prop="post">
+					<el-select v-model="model.post" clearable multiple placeholder="请选择岗位" class="w100">
+						<el-option v-for="item in postData" :key="item.postId" :label="item.postName"
+							:value="item.postId" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+			<el-col v-if="!isEdit" :span="12" class="mb20">
+				<el-form-item :label="$t('sysuser.dept')" prop="deptId">
+					<el-tree-select v-model="model.deptId" :data="deptData"
+						:props="{ value: 'id', label: 'name', children: 'children', disabled: 'isLock' }" filterable
+						check-strictly class="w100" clearable placeholder="请选择所属部门">
+						<template #default="{ node, data }">
+							<el-tooltip v-if="data.isLock" effect="dark" content="无数据权限" placement="right">
+								<span>
+									{{ node.label }}
+									<SvgIcon name="ele-Lock" />
+								</span>
+							</el-tooltip>
+						</template>
+					</el-tree-select>
+				</el-form-item>
+			</el-col>
+			<el-col :span="12" class="mb20">
+				<el-form-item :label="$t('sysuser.email')" prop="email">
+					<el-input v-model="model.email" clearable placeholder="请输入邮箱" />
+				</el-form-item>
+			</el-col>
+			<el-col :span="12" class="mb20">
+				<el-form-item :label="$t('sysuser.nickname')" prop="nickname">
+					<el-input v-model="model.nickname" clearable placeholder="请输入昵称" />
+				</el-form-item>
+			</el-col>
+			<el-col :span="12" class="mb20">
+				<el-form-item label="编制" prop="staffingType">
+					<dict-select v-model="model.staffingType"
+						:disabled="isEdit && !auth('user_sysUser_editStaffingType')" dict-code="user_staffing_type" />
+				</el-form-item>
+			</el-col>
+			<el-col :span="12" class="mb20">
+				<el-form-item :label="$t('sysuser.lockFlag')" prop="lockFlag">
+					<el-radio-group v-model="model.lockFlag">
+						<el-radio v-for="(item, index) in lock_flag" :key="index" :label="item.value" border>
+							{{ item.label }}
+						</el-radio>
+					</el-radio-group>
+				</el-form-item>
+			</el-col>
+			<el-col :span="24" class="mb20">
+				<el-divider>身份信息</el-divider>
+			</el-col>
+			<el-col :span="24" class="mb20">
+				<div class="identity-block">
+					<div class="identity-block__title">身份选择</div>
+					<el-row :gutter="20">
+						<el-col :span="12" class="mb20">
+							<el-form-item label="用户身份" prop="identityTypes">
+								<dict-select v-model="model.identityTypes" dict-code="user_identity_type" multiple
+									placeholder="请选择用户身份" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</div>
+			</el-col>
+			<el-col v-if="hasDefaultIdentity" :span="24" class="mb20">
+				<div class="identity-block">
+					<div class="identity-block__title">默认身份</div>
+					<el-row :gutter="20">
+						<el-col :span="12" class="mb20">
+							<el-form-item label="手机号" prop="phone" required>
+								<el-input v-model="model.phone" clearable placeholder="请输入手机号" />
+								<div class="identity-field-tip">该手机号与默认身份绑定</div>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</div>
+			</el-col>
+			<template v-if="hasStudentIdentity">
+				<el-col :span="24" class="mb20">
+					<div class="identity-block">
+						<div class="identity-block__title">学生身份</div>
+						<el-row :gutter="20">
+							<el-col :span="12" class="mb20">
+								<el-form-item label="学号" prop="studentInfo.studentNo">
+									<el-input v-model.trim="model.studentInfo.studentNo" clearable
+										placeholder="请输入学号" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="12" class="mb20">
+								<el-form-item label="学校名称" prop="studentInfo.schoolName">
+									<el-input v-model.trim="model.studentInfo.schoolName" clearable
+										placeholder="请输入学校名称" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="12" class="mb20">
+								<el-form-item label="班级名称" prop="studentInfo.className">
+									<el-input v-model.trim="model.studentInfo.className" clearable
+										placeholder="请输入班级名称" />
+								</el-form-item>
+							</el-col>
+						</el-row>
+					</div>
+				</el-col>
+			</template>
+		</el-row>
+	</el-form>
+</template>
+
+<script setup lang="ts" name="UserInfoForm">
+import type { FormInstance, FormRules } from "element-plus"
+import { validatePhone, validateUsername } from "/@/api/admin/user"
+import { deptTree } from "/@/api/admin/dept"
+import { list as roleList } from "/@/api/admin/role"
+import { list as postList } from "/@/api/admin/post"
+import { useDict } from "/@/hooks/dict"
+import { useMessage } from "/@/hooks/message"
+import { useUserInfo } from "/@/stores/userInfo"
+import { auth } from "/@/utils/authFunction"
+import { rule } from "/@/utils/validate"
+import { DEFAULT_USER_IDENTITY, STUDENT_USER_IDENTITY, type UserInfoFormModel } from "./user-info-form"
+
+const props = withDefaults(
+	defineProps<{
+		model: UserInfoFormModel
+		defaultDeptId?: string
+		loading?: boolean
+	}>(),
+	{
+		defaultDeptId: "",
+		loading: false,
+	},
+)
+
+const {
+	userInfos: { roleCodes },
+} = useUserInfo()
+// @ts-ignore
+const { lock_flag } = useDict("lock_flag")
+
+const formRef = ref<FormInstance>()
+const optionsLoading = ref(false)
+const deptData = ref<any[]>([])
+const roleData = ref<any[]>([])
+const postData = ref<any[]>([])
+const model = computed(() => props.model)
+const isEdit = computed(() => Boolean(model.value.userId))
+const isDeptAdmin = computed(() => roleCodes.includes("DEPT_ADMIN"))
+const hasDefaultIdentity = computed(() => model.value.identityTypes.includes(DEFAULT_USER_IDENTITY))
+const hasStudentIdentity = computed(() => model.value.identityTypes.includes(STUDENT_USER_IDENTITY))
+
+const validateIdentityPhone = (_currentRule: any, value: string, callback: (error?: Error) => void) => {
+	if (!hasDefaultIdentity.value) {
+		callback()
+		return
+	}
+	if (!value) {
+		callback(new Error("手机号不能为空"))
+		return
+	}
+	rule.validatePhone(_currentRule, value, callback)
+}
+
+const validatePhoneUnique = (currentRule: any, value: string, callback: (error?: Error) => void) => {
+	if (!hasDefaultIdentity.value || !value) {
+		callback()
+		return
+	}
+	validatePhone(currentRule, value, callback, isEdit.value)
+}
+
+const formRules: FormRules = {
+	username: [
+		{ required: true, message: "用户名不能为空", trigger: "blur" },
+		{ min: 5, max: 60, message: "用户名称长度必须介于5-60个字符之间", trigger: "blur" },
+		{ pattern: /^[^\u4e00-\u9fa5]+$/, message: "用户名称不能包含中文", trigger: "blur" },
+		{
+			validator: (currentRule: any, value: any, callback: any) => {
+				validateUsername(currentRule, value, callback, isEdit.value)
+			},
+			trigger: "blur",
+		},
+	],
+	password: [
+		{ required: true, message: "密码不能为空", trigger: "blur" },
+		{ min: 6, max: 20, message: "用户密码长度必须介于6-20个字符之间", trigger: "blur" },
+	],
+	name: [
+		{ validator: rule.overLength, trigger: "blur" },
+		{ required: true, message: "姓名不能为空", trigger: "blur" },
+		{ validator: rule.validatorPersonName, trigger: "blur" },
+	],
+	deptId: [{ required: true, message: "部门不能为空", trigger: "change" }],
+	role: isDeptAdmin.value ? [] : [{ required: true, message: "角色不能为空", trigger: "change" }],
+	phone: [
+		{ validator: validateIdentityPhone, trigger: "blur" },
+		{ validator: validatePhoneUnique, trigger: "blur" },
+	],
+	email: [{ validator: rule.overLength, trigger: "blur" }],
+	lockFlag: [{ required: true, message: "状态不能为空", trigger: "change" }],
+	identityTypes: [{ required: true, type: "array", min: 1, message: "用户身份不能为空", trigger: "change" }],
+	"studentInfo.studentNo": [
+		{ required: true, message: "学号不能为空", trigger: "blur" },
+		{ validator: rule.overLength, trigger: "blur" },
+	],
+}
+
+watch(
+	() => [...model.value.identityTypes],
+	() => {
+		nextTick(() => {
+			formRef.value?.clearValidate([
+				"phone",
+				"studentInfo.studentNo",
+				"studentInfo.schoolName",
+				"studentInfo.className",
+				"studentInfo.extJson",
+			])
+		})
+	},
+)
+
+const prepare = async () => {
+	optionsLoading.value = true
+	try {
+		const requests: Promise<any>[] = [roleList(), postList()]
+		if (!isEdit.value) requests.push(deptTree())
+		const [roleRes, postRes, deptRes] = await Promise.all(requests)
+		roleData.value = roleRes.data || []
+		postData.value = postRes.data || []
+		if (deptRes) deptData.value = deptRes.data || []
+
+		if (!isEdit.value) {
+			if (!model.value.deptId) model.value.deptId = props.defaultDeptId
+			if (!isDeptAdmin.value && !model.value.role.length && roleData.value.length) {
+				model.value.role = [roleData.value[0].roleId]
+			}
+			if (!isDeptAdmin.value && !model.value.post.length && postData.value.length) {
+				model.value.post = [postData.value[0].postId]
+			}
+		}
+	} catch (error: any) {
+		useMessage().error(error?.msg || "加载用户表单选项失败")
+	} finally {
+		optionsLoading.value = false
+	}
+}
+
+const validate = async () => Boolean(await formRef.value?.validate().catch(() => false))
+const clearValidate = () => formRef.value?.clearValidate()
+
+defineExpose({ prepare, validate, clearValidate })
+</script>
+
+<style scoped lang="scss">
+.identity-block {
+	padding: 14px 16px 0;
+	border: 1px solid var(--el-border-color-lighter);
+	border-radius: 4px;
+	background-color: var(--el-fill-color-lighter);
+}
+
+.identity-block__title {
+	margin-bottom: 14px;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--el-text-color-primary);
+}
+
+.identity-field-tip {
+	margin-top: 4px;
+	font-size: 13px;
+	line-height: 1.4;
+	color: var(--el-text-color-secondary);
+}
+</style>
@@ -1,106 +1,16 @@
 <template>
 	<div class="system-user-dialog-container">
-		<el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
-			draggable v-model="visible">
-			<el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
-				<el-row :gutter="20">
-					<el-col :span="12" class="mb20">
-						<el-form-item :label="$t('sysuser.username')" prop="username">
-							<el-input :disabled="dataForm.userId !== '' && !auth('user_sysUser_editUsername')"
-								placeholder="请输入用户名" v-model.trim="dataForm.username" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" class="mb20">
-						<el-form-item :label="$t('sysuser.password')" prop="password">
-							<el-input clearable placeholder="请输入密码" type="password"
-								v-model="dataForm.password"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" class="mb20">
-						<el-form-item :label="$t('sysuser.name')" prop="name">
-							<el-input clearable placeholder="请输入姓名" v-model="dataForm.name"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" class="mb20">
-						<el-form-item :label="$t('sysuser.phone')" prop="phone">
-							<el-input clearable placeholder="请输入手机号" v-model="dataForm.phone"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" class="mb20">
-						<el-form-item label="性别" prop="gender">
-							<el-radio-group v-model="dataForm.gender">
-								<el-radio :label="0">未知</el-radio>
-								<el-radio :label="1">男</el-radio>
-								<el-radio :label="2">女</el-radio>
-							</el-radio-group>
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" v-if="!roleCodes.includes('DEPT_ADMIN')" class="mb20">
-						<el-form-item :label="$t('sysuser.role')" prop="role">
-							<el-select clearable multiple placeholder="请选择角色" v-model="dataForm.role">
-								<el-option :key="item.roleId" :label="item.roleName" :value="item.roleId"
-									v-for="item in roleData" />
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" v-if="!roleCodes.includes('DEPT_ADMIN')" class="mb20">
-						<el-form-item :label="$t('sysuser.post')" prop="post">
-							<el-select clearable multiple placeholder="请选择岗位" v-model="dataForm.post">
-								<el-option :key="item.postId" :label="item.postName" :value="item.postId"
-									v-for="item in postData" />
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col v-if="!dataForm.userId" :span="12" class="mb20">
-						<el-form-item :label="$t('sysuser.dept')" prop="deptId">
-							<el-tree-select :data="deptData"
-								:props="{ value: 'id', label: 'name', children: 'children', disabled: 'isLock' }"
-								filterable check-strictly class="w100" clearable placeholder="请选择所属部门"
-								v-model="dataForm.deptId">
-								<template #default="{ node, data }">
-									<el-tooltip v-if="data.isLock" effect="dark" content="无数据权限" placement="right">
-										<span>
-											{{ node.label }}
-											<SvgIcon name="ele-Lock" />
-										</span>
-									</el-tooltip>
-								</template>
-							</el-tree-select>
-						</el-form-item>
-					</el-col>
-
-					<el-col :span="12" class="mb20">
-						<el-form-item :label="$t('sysuser.email')" prop="email">
-							<el-input clearable placeholder="请输入邮箱" v-model="dataForm.email"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" class="mb20">
-						<el-form-item :label="$t('sysuser.nickname')" prop="nickname">
-							<el-input clearable placeholder="请输入昵称" v-model="dataForm.nickname"></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" class="mb20">
-						<el-form-item label="编制" prop="staffingType">
-							<dict-select :disabled="!auth('user_sysUser_editStaffingType')"
-								v-model="dataForm.staffingType" dict-code="user_staffing_type" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="12" class="mb20">
-						<el-form-item :label="$t('sysuser.lockFlag')" prop="lockFlag">
-							<el-radio-group v-model="dataForm.lockFlag">
-								<el-radio :key="index" :label="item.value" border v-for="(item, index) in lock_flag">
-									{{ item.label }}
-								</el-radio>
-							</el-radio-group>
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
+		<el-dialog
+			v-model="visible"
+			:close-on-click-modal="false"
+			:title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
+			draggable
+		>
+			<user-info-form ref="userInfoFormRef" :model="dataForm" :default-dept-id="props.deptId" :loading="loading" />
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="visible = false">{{ $t("common.cancelButtonText") }}</el-button>
-					<el-button @click="onSubmit" type="primary" :disabled="loading">{{ $t("common.confirmButtonText")
-					}}</el-button>
+					<el-button type="primary" :disabled="loading" @click="onSubmit">{{ $t("common.confirmButtonText") }}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -108,35 +18,11 @@
 </template>

 <script lang="ts" name="systemUserDialog" setup>
-import { addObj, getObj, putObj, validatePhone, validateUsername } from "/@/api/admin/user"
-import { list as roleList } from "/@/api/admin/role"
-import { list as postList } from "/@/api/admin/post"
-import { deptTree } from "/@/api/admin/dept"
-import { useDict } from "/@/hooks/dict"
-import { useI18n } from "vue-i18n"
+import { addObj, getObj, putObj } from "/@/api/admin/user"
 import { useMessage } from "/@/hooks/message"
-import { rule } from "/@/utils/validate"
-import { useUserInfo } from "/@/stores/userInfo"
-import { auth } from "/@/utils/authFunction"
-
-const { t } = useI18n()
-
-const {
-	userInfos: { roleCodes },
-} = useUserInfo()
-
-// 定义刷新表格emit
-const emit = defineEmits(["refresh"])
-// @ts-ignore
-const { lock_flag } = useDict("lock_flag")
-
-// 定义变量内容
-const dataFormRef = ref()
-const visible = ref(false)
-const deptData = ref<any[]>([])
-const roleData = ref<any[]>([])
-const postData = ref<any[]>([])
-const loading = ref(false)
+import { useI18n } from "vue-i18n"
+import UserInfoForm from "./components/user-info-form.vue"
+import { createEmptyStudentInfo, createEmptyUserInfo, getUserIdentityPayload } from "./components/user-info-form"

 const props = defineProps({
 	deptId: {
@@ -145,193 +31,69 @@ const props = defineProps({
 	},
 })

-const dataForm = reactive({
-	userId: "",
-	username: "",
-	password: "" as String | undefined,
-	salt: "",
-	wxOpenid: "",
-	qqOpenid: "",
-	lockFlag: "0",
-	phone: "" as String | undefined,
-	deptId: "",
-	roleList: [],
-	postList: [],
-	nickname: "",
-	name: "",
-	email: "",
-	/** 0 未知 / 1 男 / 2 女 */
-	gender: 0 as number,
-	staffingType: "2",
-	post: [] as string[],
-	role: [] as string[],
-})
+const emit = defineEmits(["refresh"])
+const { t } = useI18n()
+const userInfoFormRef = ref<InstanceType<typeof UserInfoForm>>()
+const visible = ref(false)
+const loading = ref(false)
+const dataForm = reactive(createEmptyUserInfo())

-const dataRules = ref({
-	// 用户名校验，不能为空 、长度 5-20、不能和已有数据重复
-	username: [
-		{ required: true, message: "用户名不能为空", trigger: "blur" },
-		{ min: 5, max: 60, message: "用户名称长度必须介于5-20个字符之间", trigger: "blur" },
-		{ pattern: /^[^\u4e00-\u9fa5]+$/, message: "用户名称不能包含中文", trigger: "blur" },
-		{
-			validator: (rule: any, value: any, callback: any) => {
-				validateUsername(rule, value, callback, dataForm.userId !== "")
-			},
-			trigger: "blur",
-		},
-	],
-	password: [
-		{ required: true, message: "密码不能为空", trigger: "blur" },
-		{
-			min: 6,
-			max: 20,
-			message: "用户密码长度必须介于 5 和 20 之间",
-			trigger: "blur",
-		},
-	],
-	// 姓名校验：中文，或英文（单词间可空格）
-	name: [
-		{ validator: rule.overLength, trigger: "blur" },
-		{ required: true, message: "姓名不能为空", trigger: "blur" },
-		{ validator: rule.validatorPersonName, trigger: "blur" },
-	],
-	deptId: [{ required: true, message: "部门不能为空", trigger: "blur" }],
-	role: roleCodes.includes("DEPT_ADMIN") ? [] : [{ required: true, message: "角色不能为空", trigger: "blur" }],
-	// post: [{ required: true, message: '岗位不能为空', trigger: 'blur' }],
-	// 手机号校验，不能为空、新增的时不能重复校验
-	phone: [
-		{ required: true, message: "手机号不能为空", trigger: "blur" },
-		{ validator: rule.validatePhone, trigger: "blur" },
-		{
-			validator: (rule: any, value: any, callback: any) => {
-				validatePhone(rule, value, callback, dataForm.userId !== "")
-			},
-			trigger: "blur",
-		},
-	],
-	email: [{ validator: rule.overLength, trigger: "blur" }],
-	lockFlag: [{ required: true, message: "状态不能为空", trigger: "blur" }],
-})
-
-// 打开弹窗
-const openDialog = async (id: string) => {
+const openDialog = async (id?: string) => {
 	visible.value = true
-	dataForm.userId = ""
+	Object.assign(dataForm, createEmptyUserInfo(props.deptId))

-	// 重置表单数据
-	nextTick(() => {
-		dataFormRef.value?.resetFields()
-		if (!id) {
-			dataForm.gender = 0
-		}
-	})
-
-	// 修改获取用户信息
 	if (id) {
 		dataForm.userId = id
 		await getUserData(id)
 		dataForm.password = "******"
 	}

-	// 新增时加载部门树数据，修改时不加载
-	!id ? getDeptData() : ""
-	getPostData()
-	getRoleData()
+	await nextTick()
+	await userInfoFormRef.value?.prepare()
+	userInfoFormRef.value?.clearValidate()
 }

-// 提交
 const onSubmit = async () => {
-	const valid = await dataFormRef.value.validate().catch(() => { })
-	if (!valid) return false
+	if (!(await userInfoFormRef.value?.validate())) return

 	try {
 		const { userId, phone, password } = dataForm
-
+		const payload = { ...dataForm, ...getUserIdentityPayload(dataForm) }
+		loading.value = true
 		if (userId) {
-			// 清除占位符，避免提交错误的数据
-			if (phone?.includes("*")) dataForm.phone = undefined
-			if (password?.includes("******")) dataForm.password = undefined
-
-			loading.value = true
-			await putObj(dataForm)
+			if (phone?.includes("*")) payload.phone = undefined
+			if (password?.includes("******")) payload.password = undefined
+			await putObj(payload)
 			useMessage().success(t("common.editSuccessText"))
-			visible.value = false // 关闭弹窗
-			emit("refresh")
 		} else {
-			loading.value = true
-			await addObj(dataForm)
+			await addObj(payload)
 			useMessage().success(t("common.addSuccessText"))
-			visible.value = false // 关闭弹窗
-			emit("refresh")
 		}
+		visible.value = false
+		emit("refresh")
 	} catch (error: any) {
-		useMessage().error(error.msg)
+		useMessage().error(error?.msg || "保存失败")
 	} finally {
 		loading.value = false
 	}
 }

-/**
- * 从服务器获取用户数据
- *
- * @async
- * @param {string} id - 用户 ID
- * @return {Promise} - 包含用户数据的 Promise 对象
- */
 const getUserData = async (id: string) => {
 	try {
 		loading.value = true
 		const { data } = await getObj(id)
 		Object.assign(dataForm, data)
+		dataForm.identityTypes = Array.isArray(data.identityTypes) && data.identityTypes.length ? data.identityTypes : ["DEFAULT"]
+		dataForm.studentInfo = { ...createEmptyStudentInfo(), ...(data.studentInfo || {}) }
 		dataForm.gender = data.gender != null && data.gender !== "" ? Number(data.gender) : 0
-		if (data.roleList) {
-			dataForm.role = data.roleList.map((item: any) => item.roleId)
-		}
-		if (data.postList) {
-			dataForm.post = data.postList.map((item: any) => item.postId)
-		}
-	} catch (err: any) {
-		useMessage().error(err.msg)
+		dataForm.role = data.roleList?.map((item: any) => item.roleId) || []
+		dataForm.post = data.postList?.map((item: any) => item.postId) || []
+	} catch (error: any) {
+		useMessage().error(error?.msg || "获取用户信息失败")
 	} finally {
 		loading.value = false
 	}
 }

-// 初始化部门数据
-const getDeptData = () => {
-	// 获取部门数据
-	deptTree().then((res) => {
-		deptData.value = res.data
-		// 默认选择在树中选中的部门
-		if (!dataForm.userId) {
-			dataForm.deptId = props.deptId
-		}
-	})
-}
-
-// 岗位数据
-const getPostData = () => {
-	postList().then((res) => {
-		postData.value = res.data
-		// 默认选择第一个
-		if (!roleCodes.includes("DEPT_ADMIN") && !dataForm.userId) {
-			dataForm.post = [res.data[0].postId]
-		}
-	})
-}
-// 角色数据
-const getRoleData = () => {
-	roleList().then((res) => {
-		roleData.value = res.data
-		// 默认选择第一个
-		if (!roleCodes.includes("DEPT_ADMIN") && !dataForm.userId) {
-			dataForm.role = [res.data[0].roleId]
-		}
-	})
-}
-
-// 暴露变量
-defineExpose({
-	openDialog,
-})
+defineExpose({ openDialog })
 </script>
@@ -127,35 +127,42 @@
 									<popover-input v-if="row.processStatus == '2'" v-model="inputPassword"
 										@confirm="changePassword(row)">
 										<template #default>
-											<el-button style="margin: 0 !important;" v-auth="'sys_user_edit'"
-												icon="RefreshLeft" text type="primary" class="mr-4">密码</el-button>
+											<el-button size="small" style="margin: 0 !important;"
+												v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary"
+												class="mr-4">密码</el-button>
 										</template>
 									</popover-input>
 									<!-- 修改信息 -->
 									<el-button style="margin: 0 !important;" v-if="row.processStatus == '2'"
-										v-auth="'sys_user_edit'" icon="edit-pen" text type="primary"
+										v-auth="'sys_user_edit'" icon="edit-pen" text type="primary" size="small"
 										@click="userDialogRef.openDialog(row.userId)">
 										修改
 									</el-button>
 									<!-- 修改信息 -->
 									<el-button style="margin: 0 !important;" v-if="row.processStatus == '2'"
-										icon="SetUp" text type="primary" @click="tagTableRef.openDialog(row.userId)">
+										icon="SetUp" text type="primary" size="small"
+										@click="tagTableRef.openDialog(row.userId)">
 										用户标签
 									</el-button>
 									<!-- 人脸管理 -->
 									<el-button style="margin: 0 !important;" v-if="row.processStatus == '2'"
-										v-auth="'userFace_sysUserFace_view'" icon="User" text type="primary"
-										@click="faceManageRef.openDialog(row.userId)">
+										v-auth="'userFace_sysUserFace_view'" icon="User" size="small" text
+										type="primary" @click="faceManageRef.openDialog(row.userId)">
 										人脸管理
 									</el-button>
 									<el-button style="margin: 0 !important;" v-if="row.processStatus == 1"
 										type="primary" size="small" link icon="VideoPlay" @click="deal(row)">
 										开始处理
 									</el-button>
+									<el-button style="margin: 0 !important;" type="primary" size="small" link
+										v-if="row.processStatus == '2'" icon="SuitcaseLine"
+										@click="toRelationTree(row)">
+										关系图谱
+									</el-button>
 									<!-- 删除用户 -->
 									<el-tooltip content="admin 不允许被删除" :disabled="row.userId !== '1'" placement="top">
 										<span style="margin-left: 12px">
-											<el-button style="margin: 0 !important;" icon="delete"
+											<el-button style="margin: 0 !important;" icon="delete" size="small"
 												v-auth="'sys_user_del'" :disabled="row.username === 'admin'" text
 												type="primary" @click="handleDelete([row.userId])">
 												删除
@@ -202,6 +209,7 @@ const BatchDeal = defineAsyncComponent(() => import("./batchDeal.vue"))
 const TagTable = defineAsyncComponent(() => import("./tag-table.vue"))

 const { t } = useI18n()
+const { push } = useRouter()

 const userDialogRef = ref()
 const faceManageRef = ref()
@@ -278,6 +286,16 @@ const doBatchDeal = () => {
 	batchDealRef.value.openDialog(processIds)
 }

+// 关系图谱
+const toRelationTree = (row: any) => {
+	push({
+		path: "/admin/system/user/relation-tree",
+		query: {
+			userId: row.userId,
+		},
+	})
+}
+
 // 审批提交事件
 const taskSubmitEvent = () => {
 	getDataList()
@@ -0,0 +1,361 @@
+<template>
+	<el-dialog v-model="visible" title="新增用户关系" width="920px" :close-on-click-modal="false" destroy-on-close>
+		<div class="relation-target">
+			<div class="target-avatar">{{ getInitial(targetUser?.displayName) }}</div>
+			<div>
+				<div class="target-title">当前用户：{{ targetUser?.displayName }}</div>
+				<div class="target-subtitle">可选择当前用户与新建或已有用户之间的关系方向</div>
+			</div>
+		</div>
+
+		<el-form ref="relationFormRef" v-loading="relationOptionsLoading" :model="relationForm" :rules="relationRules"
+			label-width="100px">
+			<el-divider content-position="center">关系信息</el-divider>
+			<el-row :gutter="20">
+				<el-col :span="12" class="mb20">
+					<el-form-item label="关系类型" prop="relationTypeId">
+						<el-select v-model="relationForm.relationTypeId" filterable placeholder="请选择关系类型" class="w100">
+							<el-option v-for="item in relationTypeOptions" :key="item.relationTypeId"
+								:label="formatRelationType(item)" :value="item.relationTypeId" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="关系方向">
+						<el-radio-group v-model="relationDirection" class="direction-radio-group">
+							<el-radio-button label="other-to-target">关联用户 → 当前用户</el-radio-button>
+							<el-radio-button label="target-to-other">当前用户 → 关联用户</el-radio-button>
+						</el-radio-group>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="生效时间" prop="effectiveTime">
+						<el-date-picker v-model="relationForm.effectiveTime" type="datetime"
+							value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择生效时间" class="w100" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="失效时间" prop="expireTime">
+						<el-date-picker v-model="relationForm.expireTime" type="datetime"
+							value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择失效时间" class="w100" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="关系备注" prop="remark">
+						<el-input type="textarea" v-model.trim="relationForm.remark" maxlength="500" show-word-limit
+							placeholder="请输入关系备注" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+			<el-alert type="info" :closable="false" class="direction-alert" show-icon>
+				<template #title>{{ relationDirectionDescription }}</template>
+			</el-alert>
+		</el-form>
+
+		<el-divider content-position="center">用户信息</el-divider>
+		<el-tabs v-model="createMode" class="user-mode-tabs" @tab-change="handleModeChange">
+			<el-tab-pane label="创建用户" name="new">
+				<user-info-form ref="userInfoFormRef" :model="newUserForm" :loading="submitting" />
+			</el-tab-pane>
+			<el-tab-pane label="选择已有用户" name="existing">
+				<el-form ref="existingUserFormRef" :model="existingUserForm" :rules="existingUserRules" label-width="100px">
+					<el-form-item label="关联用户" prop="userId">
+						<select-user v-model="existingUserForm.userId"
+							:exclude-user-ids="targetUser ? [targetUser.userId] : []" placeholder="输入姓名或手机号选择用户"
+							@change="selectedExistingUser = $event" />
+					</el-form-item>
+				</el-form>
+			</el-tab-pane>
+		</el-tabs>
+
+		<template #footer>
+			<el-button @click="visible = false">取消</el-button>
+			<el-button type="primary" :loading="submitting" @click="submit">
+				{{ createMode === "new" ? "新增用户并建立关系" : "建立关系" }}
+			</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="RelationCreateUser">
+import dayjs from "dayjs"
+import type { FormInstance, FormRules } from "element-plus"
+import {
+	createRelation,
+	createRelationUser,
+	type RelationCreateForm,
+	type RelationCreateUserForm,
+	type RelationGraphNode,
+} from "/@/api/admin/sysUserRelation"
+import { fetchList as fetchRelationTypes } from "/@/api/admin/sysUserRelationType"
+import { useMessage } from "/@/hooks/message"
+import UserInfoForm from "./components/user-info-form.vue"
+import { createEmptyUserInfo, getUserIdentityPayload } from "./components/user-info-form"
+
+interface RelationTypeOption {
+	relationTypeId: string
+	relationName: string
+	subjectRoleName?: string
+	objectRoleName?: string
+	status: string
+}
+
+type CreateMode = "new" | "existing"
+type RelationDirection = "other-to-target" | "target-to-other"
+
+const emit = defineEmits<{
+	(e: "success", userId: string): void
+}>()
+
+const visible = ref(false)
+const submitting = ref(false)
+const relationOptionsLoading = ref(false)
+const relationOptionsLoaded = ref(false)
+const relationFormRef = ref<FormInstance>()
+const existingUserFormRef = ref<FormInstance>()
+const userInfoFormRef = ref<InstanceType<typeof UserInfoForm>>()
+const targetUser = ref<RelationGraphNode>()
+const selectedExistingUser = ref<any>()
+const relationTypeOptions = ref<RelationTypeOption[]>([])
+const createMode = ref<CreateMode>("new")
+const relationDirection = ref<RelationDirection>("other-to-target")
+
+const createInitialRelationForm = (): RelationCreateForm => ({
+	subjectUserId: "",
+	objectUserId: "",
+	relationTypeId: "",
+	effectiveTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+	expireTime: "",
+	remark: "",
+})
+
+const relationForm = reactive<RelationCreateForm>(createInitialRelationForm())
+const newUserForm = reactive(createEmptyUserInfo())
+const existingUserForm = reactive({ userId: "" })
+
+const selectedRelationType = computed(() =>
+	relationTypeOptions.value.find((item) => item.relationTypeId === relationForm.relationTypeId)
+)
+
+const associatedUserName = computed(() => {
+	if (createMode.value === "new") return newUserForm.name?.trim() || "新建用户"
+	return selectedExistingUser.value?.name || selectedExistingUser.value?.username || "所选用户"
+})
+
+const relationDirectionDescription = computed(() => {
+	const targetName = targetUser.value?.displayName || "当前用户"
+	const relationType = selectedRelationType.value
+	if (relationDirection.value === "other-to-target") {
+		const roles = formatDirectionRoles(relationType?.subjectRoleName, relationType?.objectRoleName)
+		return `将建立“${associatedUserName.value} → ${targetName}”的关系${roles}`
+	}
+	const roles = formatDirectionRoles(relationType?.subjectRoleName, relationType?.objectRoleName)
+	return `将建立“${targetName} → ${associatedUserName.value}”的关系${roles}`
+})
+
+const validateExpireTime = (_rule: any, value: string, callback: (error?: Error) => void) => {
+	if (value && relationForm.effectiveTime && value < relationForm.effectiveTime) {
+		callback(new Error("失效时间不能早于生效时间"))
+		return
+	}
+	callback()
+}
+
+const relationRules: FormRules = {
+	relationTypeId: [{ required: true, message: "请选择关系类型", trigger: "change" }],
+	expireTime: [{ validator: validateExpireTime, trigger: "change" }],
+}
+
+const existingUserRules: FormRules = {
+	userId: [{ required: true, message: "请选择已有用户", trigger: "change" }],
+}
+
+const loadRelationTypes = async () => {
+	if (relationOptionsLoaded.value) return
+	relationOptionsLoading.value = true
+	try {
+		const relationRes: any = await fetchRelationTypes({ current: 1, size: 1000 })
+		relationTypeOptions.value = (relationRes.data?.records || []).filter((item: RelationTypeOption) => item.status === "0")
+		relationOptionsLoaded.value = true
+	} catch (error: any) {
+		useMessage().error(error?.msg || "加载关系类型失败")
+	} finally {
+		relationOptionsLoading.value = false
+	}
+}
+
+const openDialog = async (target: RelationGraphNode) => {
+	targetUser.value = target
+	createMode.value = "new"
+	relationDirection.value = "other-to-target"
+	selectedExistingUser.value = undefined
+	Object.assign(relationForm, createInitialRelationForm(), { objectUserId: target.userId })
+	Object.assign(newUserForm, createEmptyUserInfo())
+	existingUserForm.userId = ""
+	visible.value = true
+	await nextTick()
+	relationFormRef.value?.clearValidate()
+	await Promise.all([loadRelationTypes(), userInfoFormRef.value?.prepare()])
+	userInfoFormRef.value?.clearValidate()
+	if (!relationForm.relationTypeId && relationTypeOptions.value.length === 1) {
+		relationForm.relationTypeId = relationTypeOptions.value[0].relationTypeId
+	}
+}
+
+const handleModeChange = async (mode: string | number | boolean) => {
+	createMode.value = mode as CreateMode
+	existingUserForm.userId = ""
+	selectedExistingUser.value = undefined
+	await nextTick()
+	existingUserFormRef.value?.clearValidate()
+	if (createMode.value === "new") {
+		await userInfoFormRef.value?.prepare()
+		userInfoFormRef.value?.clearValidate()
+	}
+}
+
+const submit = async () => {
+	const relationValid = await relationFormRef.value?.validate().catch(() => false)
+	if (!relationValid) return
+	if (createMode.value === "new" && !(await userInfoFormRef.value?.validate())) return
+	if (createMode.value === "existing" && !(await existingUserFormRef.value?.validate().catch(() => false))) return
+
+	submitting.value = true
+	try {
+		const targetUserId = String(targetUser.value?.userId || "")
+		let associatedUserId = existingUserForm.userId
+		if (createMode.value === "new") {
+			const identityPayload = getUserIdentityPayload(newUserForm)
+			const payload: RelationCreateUserForm = {
+				relationTypeId: relationForm.relationTypeId,
+				effectiveTime: relationForm.effectiveTime,
+				expireTime: relationForm.expireTime,
+				remark: relationForm.remark,
+				username: newUserForm.username,
+				password: newUserForm.password || "",
+				phone: identityPayload.phone,
+				name: newUserForm.name,
+				nickname: newUserForm.nickname,
+				email: newUserForm.email,
+				avatar: newUserForm.avatar,
+				deptId: newUserForm.deptId,
+				role: newUserForm.role.map(String),
+				post: newUserForm.post.map(String),
+				gender: newUserForm.gender,
+				staffingType: newUserForm.staffingType,
+				lockFlag: newUserForm.lockFlag,
+				identityTypes: identityPayload.identityTypes,
+				studentInfo: identityPayload.studentInfo,
+			}
+			if (relationDirection.value === "other-to-target") {
+				payload.objectUserId = targetUserId
+			} else {
+				payload.subjectUserId = targetUserId
+			}
+			const { data } = await createRelationUser(payload)
+			associatedUserId = String(data)
+			useMessage().success("用户及关系创建成功")
+		} else {
+			const payload: RelationCreateForm = {
+				...relationForm,
+				subjectUserId: relationDirection.value === "other-to-target" ? associatedUserId : targetUserId,
+				objectUserId: relationDirection.value === "other-to-target" ? targetUserId : associatedUserId,
+			}
+			await createRelation(payload)
+			useMessage().success("用户关系创建成功")
+		}
+		visible.value = false
+		emit("success", associatedUserId)
+	} catch (error: any) {
+		useMessage().error(error?.msg || "创建失败")
+	} finally {
+		submitting.value = false
+	}
+}
+
+const formatRelationType = (item: RelationTypeOption) => {
+	const roles = [item.subjectRoleName, item.objectRoleName].filter(Boolean).join(" / ")
+	return roles ? `${item.relationName}（${roles}）` : item.relationName
+}
+
+const formatDirectionRoles = (subjectRoleName?: string, objectRoleName?: string) => {
+	if (!subjectRoleName && !objectRoleName) return ""
+	return `（主语：${subjectRoleName || "-"}，对象：${objectRoleName || "-"}）`
+}
+
+const getInitial = (name?: string) => name?.trim().slice(0, 1) || "用"
+
+defineExpose({ openDialog })
+</script>
+
+<style scoped lang="scss">
+.relation-target {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 14px 16px;
+	margin-bottom: 14px;
+	background: var(--el-color-primary-light-9);
+	border: 1px solid var(--el-color-primary-light-7);
+	border-radius: 10px;
+}
+
+.target-avatar {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 42px;
+	height: 42px;
+	color: #fff;
+	font-size: 18px;
+	font-weight: 600;
+	background: var(--el-color-primary);
+	border-radius: 50%;
+}
+
+.target-title {
+	font-weight: 600;
+	color: var(--el-text-color-primary);
+}
+
+.target-subtitle {
+	margin-top: 4px;
+	font-size: 12px;
+	color: var(--el-text-color-secondary);
+}
+
+:deep(.el-divider__text) {
+	font-weight: 600;
+}
+
+.user-mode-tabs {
+	margin-top: -6px;
+}
+
+.user-mode-tabs :deep(.el-tabs__header) {
+	margin-bottom: 18px;
+}
+
+.user-mode-tabs :deep(.el-tabs__nav-wrap::after) {
+	height: 1px;
+}
+
+.direction-radio-group {
+	display: flex;
+	width: 100%;
+}
+
+.direction-radio-group :deep(.el-radio-button) {
+	flex: 1;
+}
+
+.direction-radio-group :deep(.el-radio-button__inner) {
+	width: 100%;
+	padding-right: 8px;
+	padding-left: 8px;
+}
+
+.direction-alert {
+	margin: -6px 0 16px;
+}
+</style>
@@ -0,0 +1,935 @@
+<template>
+	<div class="layout-padding relation-graph-page">
+		<div class="layout-padding-auto layout-padding-view relation-graph-card">
+			<div class="graph-toolbar">
+				<div class="toolbar-left">
+					<el-button class="back-pill" icon="ArrowLeft" @click="goBack">返回用户列表</el-button>
+					<div class="title-block">
+						<div class="page-title">{{ graphRoot?.displayName || "用户" }}的关系图谱</div>
+						<div class="page-subtitle">节点布局固定，拖动画布或缩放可查看完整关系</div>
+					</div>
+				</div>
+				<div class="toolbar-actions">
+					<el-button icon="Aim" @click="fitGraph">适应画布</el-button>
+					<el-button icon="Refresh" :loading="loading" @click="loadGraph">刷新</el-button>
+					<el-button type="primary" icon="UserFilled" :disabled="!selectedNode" @click="openCreateDialog()"> 新增关系用户 </el-button>
+				</div>
+			</div>
+
+			<div v-if="graphRoot" class="graph-stats">
+				<div class="stat-card stat-user">
+					<div class="stat-icon">
+						<el-icon>
+							<User />
+						</el-icon>
+					</div>
+					<div class="stat-main">
+						<div class="stat-value">{{ graphRoot.userCount || 1 }}</div>
+						<div class="stat-label">图谱用户</div>
+					</div>
+				</div>
+				<div class="stat-card stat-relation">
+					<div class="stat-icon">
+						<el-icon>
+							<Share />
+						</el-icon>
+					</div>
+					<div class="stat-main">
+						<div class="stat-value">{{ graphRoot.relationCount || 0 }}</div>
+						<div class="stat-label">用户关系</div>
+					</div>
+				</div>
+				<div class="stat-card stat-level">
+					<div class="stat-icon">
+						<el-icon>
+							<Connection />
+						</el-icon>
+					</div>
+					<div class="stat-main">
+						<div class="stat-value">{{ graphDepth }}</div>
+						<div class="stat-label">关系层级</div>
+					</div>
+				</div>
+				<div class="stat-card stat-selected">
+					<div class="stat-icon">
+						<el-icon>
+							<Pointer />
+						</el-icon>
+					</div>
+					<div class="stat-main">
+						<div class="stat-value stat-selected-name">{{ selectedNode?.displayName || "-" }}</div>
+						<div class="stat-label">当前选中</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="graph-content">
+				<div v-loading="loading" class="flow-container">
+					<VueFlow
+						v-if="flowNodes.length"
+						:nodes="flowNodes"
+						:edges="flowEdges"
+						:nodes-draggable="false"
+						:nodes-connectable="false"
+						:edges-updatable="false"
+						:elements-selectable="true"
+						:select-nodes-on-drag="false"
+						:pan-on-drag="true"
+						:zoom-on-scroll="true"
+						:zoom-on-pinch="true"
+						:zoom-on-double-click="false"
+						:prevent-scrolling="false"
+						:min-zoom="0.2"
+						:max-zoom="1.8"
+						fit-view-on-init
+						@init="onFlowInit"
+						@node-click="handleNodeClick"
+					>
+						<template #node-relation="{ data }">
+							<div
+								class="relation-node"
+								:class="{
+									'is-root': data.graph.root,
+									'is-repeated': data.graph.repeated,
+									'is-selected': selectedNode?.nodeId === data.graph.nodeId,
+								}"
+							>
+								<Handle type="target" :position="Position.Left" class="relation-handle" />
+								<div v-if="data.graph.root" class="root-badge">核心用户</div>
+								<div v-else-if="data.graph.repeated" class="repeat-badge">重复引用</div>
+								<div class="node-avatar" :class="`gender-${data.graph.gender ?? 0}`">
+									<img v-if="data.avatarUrl" :src="data.avatarUrl" :alt="data.graph.displayName" />
+									<span v-else>{{ getInitial(data.graph.displayName) }}</span>
+								</div>
+								<div class="node-main">
+									<div class="node-name" :title="data.graph.displayName">{{ data.graph.displayName }}</div>
+									<div class="node-username" :title="data.graph.username">@{{ data.graph.username || data.graph.userId }}</div>
+									<div v-if="!data.graph.root" class="node-role">
+										{{ data.graph.userRoleName || data.graph.relationName || "关联用户" }}
+									</div>
+								</div>
+								<el-tooltip content="以此人为关联对象新增用户" placement="top">
+									<button class="node-add" type="button" @click.stop="openCreateDialog(data.graph)">
+										<el-icon>
+											<Plus />
+										</el-icon>
+									</button>
+								</el-tooltip>
+								<Handle type="source" :position="Position.Right" class="relation-handle" />
+							</div>
+						</template>
+
+						<Background pattern-color="#cbd5e1" :gap="22" :size="1.2" />
+						<MiniMap
+							class="graph-minimap"
+							:node-color="getMiniMapNodeColor"
+							:node-stroke-color="getMiniMapNodeStrokeColor"
+							:node-border-radius="8"
+							pannable
+							zoomable
+						/>
+						<Controls :show-interactive="false" />
+					</VueFlow>
+
+					<el-empty v-else-if="!loading" description="暂无关系图谱数据">
+						<el-button type="primary" @click="loadGraph">重新加载</el-button>
+					</el-empty>
+				</div>
+
+				<aside class="detail-panel">
+					<template v-if="selectedNode">
+						<div class="detail-user-header">
+							<div class="detail-avatar" :class="`gender-${selectedNode.gender ?? 0}`">
+								<img
+									v-if="resolveImageUrl(selectedNode.avatar)"
+									:src="resolveImageUrl(selectedNode.avatar)"
+									:alt="selectedNode.displayName"
+								/>
+								<span v-else>{{ getInitial(selectedNode.displayName) }}</span>
+							</div>
+							<div class="detail-user-main">
+								<div class="detail-user-name">{{ selectedNode.displayName }}</div>
+								<div class="detail-user-id">用户ID：{{ selectedNode.userId }}</div>
+							</div>
+							<el-tag v-if="selectedNode.root" type="primary">根节点</el-tag>
+							<el-tag v-else-if="selectedNode.repeated" type="info">重复节点</el-tag>
+						</div>
+
+						<div class="detail-list">
+							<div class="detail-item">
+								<span class="detail-label">用户名</span>
+								<span class="detail-value">{{ selectedNode.username || "-" }}</span>
+							</div>
+							<div class="detail-item">
+								<span class="detail-label">姓名</span>
+								<span class="detail-value">{{ selectedNode.name || "-" }}</span>
+							</div>
+							<div class="detail-item">
+								<span class="detail-label">昵称</span>
+								<span class="detail-value">{{ selectedNode.nickname || "-" }}</span>
+							</div>
+							<div class="detail-item">
+								<span class="detail-label">性别</span>
+								<span class="detail-value">{{ getGenderName(selectedNode.gender) }}</span>
+							</div>
+						</div>
+
+						<template v-if="!selectedNode.root">
+							<div class="detail-section-title">关系信息</div>
+							<div class="relation-description">{{ selectedNode.relationDescription || "暂无关系描述" }}</div>
+							<div class="detail-list relation-detail-list">
+								<div class="detail-item">
+									<span class="detail-label">关系类型</span>
+									<span class="detail-value">{{ selectedNode.relationName || "-" }}</span>
+								</div>
+								<div class="detail-item">
+									<span class="detail-label">当前角色</span>
+									<span class="detail-value">{{ selectedNode.userRoleName || "-" }}</span>
+								</div>
+								<div class="detail-item">
+									<span class="detail-label">父级角色</span>
+									<span class="detail-value">{{ selectedNode.parentRoleName || "-" }}</span>
+								</div>
+								<div class="detail-item">
+									<span class="detail-label">关系方向</span>
+									<span class="detail-value">{{ getDirectionName(selectedNode) }}</span>
+								</div>
+								<div class="detail-item">
+									<span class="detail-label">生效时间</span>
+									<span class="detail-value">{{ selectedNode.effectiveTime || "-" }}</span>
+								</div>
+								<div class="detail-item">
+									<span class="detail-label">失效时间</span>
+									<span class="detail-value">{{ selectedNode.expireTime || "-" }}</span>
+								</div>
+								<div class="detail-item is-multiline">
+									<span class="detail-label">备注</span>
+									<span class="detail-value">{{ selectedNode.remark || "-" }}</span>
+								</div>
+							</div>
+						</template>
+
+						<el-button type="primary" icon="UserFilled" class="detail-add-button" @click="openCreateDialog()">
+							以此人为对象新增关系用户
+						</el-button>
+					</template>
+					<el-empty v-else description="点击图谱节点查看详情" />
+				</aside>
+			</div>
+		</div>
+
+		<relation-create-user ref="createUserRef" @success="handleCreateSuccess" />
+	</div>
+</template>
+
+<script setup lang="ts" name="RelationTree">
+import { Background } from "@vue-flow/background"
+import { Controls } from "@vue-flow/controls"
+import { Handle, MarkerType, Position, VueFlow, type Edge, type Node, type NodeMouseEvent, type VueFlowStore } from "@vue-flow/core"
+import { MiniMap } from "@vue-flow/minimap"
+import { getRelationGraph, type RelationGraphNode } from "/@/api/admin/sysUserRelation"
+import { useMessage } from "/@/hooks/message"
+import RelationCreateUser from "./relation-create-user.vue"
+
+import "@vue-flow/core/dist/style.css"
+import "@vue-flow/core/dist/theme-default.css"
+import "@vue-flow/controls/dist/style.css"
+import "@vue-flow/minimap/dist/style.css"
+
+interface RelationNodeData {
+	graph: RelationGraphNode
+	avatarUrl: string
+}
+
+const route = useRoute()
+const router = useRouter()
+const loading = ref(false)
+const graphRoot = ref<RelationGraphNode>()
+const selectedNode = ref<RelationGraphNode>()
+const flowNodes = ref<Node<RelationNodeData>[]>([])
+const flowEdges = ref<Edge[]>([])
+const graphDepth = ref(0)
+const flowStore = ref<VueFlowStore>()
+const createUserRef = ref<InstanceType<typeof RelationCreateUser>>()
+
+const nodeWidth = 230
+const levelGap = 320
+const rowGap = 126
+
+const userId = computed(() => {
+	const value = route.query.userId
+	return Array.isArray(value) ? value[0] : value
+})
+
+const loadGraph = async () => {
+	if (!userId.value) {
+		useMessage().error("缺少用户ID，无法加载关系图谱")
+		return
+	}
+
+	loading.value = true
+	try {
+		const { data } = await getRelationGraph(String(userId.value))
+		graphRoot.value = data
+		selectedNode.value = data
+		const graph = buildFlowElements(data)
+		flowNodes.value = graph.nodes
+		flowEdges.value = graph.edges
+		graphDepth.value = graph.depth
+		await nextTick()
+		fitGraph()
+	} catch (error: any) {
+		graphRoot.value = undefined
+		selectedNode.value = undefined
+		flowNodes.value = []
+		flowEdges.value = []
+		useMessage().error(error?.msg || "加载关系图谱失败")
+	} finally {
+		loading.value = false
+	}
+}
+
+const buildFlowElements = (root: RelationGraphNode) => {
+	const nodes: Node<RelationNodeData>[] = []
+	const edges: Edge[] = []
+	const levelMap = new Map<number, RelationGraphNode[]>()
+	let maxDepth = 0
+
+	const collectLevels = (node: RelationGraphNode, depth: number) => {
+		const level = levelMap.get(depth) || []
+		level.push(node)
+		levelMap.set(depth, level)
+		maxDepth = Math.max(maxDepth, depth)
+		node.children?.forEach((child) => collectLevels(child, depth + 1))
+	}
+
+	collectLevels(root, 0)
+	const maxLevelSize = Math.max(...Array.from(levelMap.values()).map((level) => level.length), 1)
+	const graphHeight = Math.max(maxLevelSize * rowGap, 380)
+
+	levelMap.forEach((levelNodes, depth) => {
+		const totalHeight = (levelNodes.length - 1) * rowGap
+		const startY = (graphHeight - totalHeight) / 2
+		levelNodes.forEach((graphNode, index) => {
+			nodes.push({
+				id: String(graphNode.nodeId),
+				type: "relation",
+				position: { x: depth * levelGap, y: startY + index * rowGap },
+				sourcePosition: Position.Right,
+				targetPosition: Position.Left,
+				draggable: false,
+				connectable: false,
+				selectable: true,
+				width: nodeWidth,
+				data: {
+					graph: graphNode,
+					avatarUrl: resolveImageUrl(graphNode.avatar),
+				},
+			})
+
+			if (!graphNode.root && graphNode.parentNodeId != null) {
+				const edgeColor = getCategoryColor(graphNode.category)
+				edges.push({
+					id: `edge-${graphNode.relationId || graphNode.nodeId}`,
+					source: String(graphNode.parentNodeId),
+					target: String(graphNode.nodeId),
+					type: "smoothstep",
+					pathOptions: { offset: 24, borderRadius: 0 },
+					label: graphNode.userRoleName || graphNode.relationName || "关系",
+					selectable: false,
+					focusable: false,
+					style: { stroke: edgeColor, strokeWidth: 2 },
+					labelStyle: { fill: "#475569", fontSize: 12, fontWeight: 600 },
+					labelShowBg: true,
+					labelBgStyle: { fill: "#ffffff", fillOpacity: 0.94 },
+					labelBgPadding: [6, 3],
+					labelBgBorderRadius: 5,
+					markerEnd: graphNode.directedFlag === "1" ? { type: MarkerType.ArrowClosed, color: edgeColor, width: 18, height: 18 } : undefined,
+				})
+			}
+		})
+	})
+
+	return { nodes, edges, depth: maxDepth + 1 }
+}
+
+const onFlowInit = (store: VueFlowStore) => {
+	flowStore.value = store
+	nextTick(() => fitGraph())
+}
+
+const fitGraph = () => {
+	nextTick(() => flowStore.value?.fitView({ padding: 0.18, maxZoom: 1, duration: 280 }))
+}
+
+const handleNodeClick = ({ node }: NodeMouseEvent) => {
+	selectedNode.value = (node.data as RelationNodeData).graph
+}
+
+const openCreateDialog = (target = selectedNode.value) => {
+	if (!target) {
+		useMessage().warning("请先选择一个关联对象")
+		return
+	}
+	createUserRef.value?.openDialog(target)
+}
+
+const handleCreateSuccess = async () => {
+	await loadGraph()
+}
+
+const goBack = () => {
+	if (window.history.length > 1) {
+		router.back()
+		return
+	}
+	router.push("/admin/system/user/index")
+}
+
+const getInitial = (name?: string) => name?.trim().slice(0, 1) || "用"
+
+const resolveImageUrl = (url?: string) => {
+	if (!url) return ""
+	return url.includes("http") ? url : `${import.meta.env.VITE_IMAGE_BASE_PATH}${url}`
+}
+
+const getGenderName = (gender?: number) => {
+	if (Number(gender) === 1) return "男"
+	if (Number(gender) === 2) return "女"
+	return "未知"
+}
+
+const getDirectionName = (node: RelationGraphNode) => {
+	if (node.directedFlag !== "1") return "无方向"
+	return node.relationDirection === "subject-to-object" ? "父节点 → 当前节点" : "当前节点 → 父节点"
+}
+
+const getCategoryColor = (category?: string) => {
+	const colors: Record<string, string> = {
+		family: "#f97316",
+		business: "#2563eb",
+		social: "#8b5cf6",
+	}
+	return colors[category || ""] || "#64748b"
+}
+
+const getMiniMapNodeColor = (node: Node) => {
+	const graph = (node.data as RelationNodeData).graph
+	if (graph.root) return "#2563eb"
+	if (graph.repeated) return "#94a3b8"
+	return "#ffffff"
+}
+
+const getMiniMapNodeStrokeColor = (node: Node) => {
+	const graph = (node.data as RelationNodeData).graph
+	return graph.root ? "#1d4ed8" : getCategoryColor(graph.category)
+}
+
+watch(userId, loadGraph, { immediate: true })
+</script>
+
+<style scoped lang="scss">
+.relation-graph-page {
+	height: 100%;
+	box-sizing: border-box;
+}
+
+.relation-graph-card {
+	display: flex;
+	flex-direction: column;
+	min-height: 680px;
+	overflow: hidden;
+}
+
+.graph-toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	padding: 11px 14px;
+	border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.toolbar-left,
+.toolbar-actions {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.back-pill {
+	height: 32px;
+	padding: 0 14px;
+	color: var(--el-color-primary);
+	background: var(--el-color-primary-light-9);
+	border-color: var(--el-color-primary-light-7);
+	border-radius: 999px;
+}
+
+.toolbar-actions :deep(.el-button) {
+	height: 32px;
+	padding: 0 14px;
+	border-radius: 999px;
+}
+
+.title-block {
+	padding-left: 2px;
+}
+
+.page-title {
+	font-size: 17px;
+	font-weight: 700;
+	color: var(--el-text-color-primary);
+}
+
+.page-subtitle {
+	margin-top: 2px;
+	font-size: 12px;
+	color: var(--el-text-color-secondary);
+}
+
+.graph-stats {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	padding: 9px 14px;
+	background: var(--el-fill-color-lighter);
+}
+
+.stat-card {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-height: 36px;
+	padding: 4px 12px 4px 5px;
+	background: var(--el-bg-color);
+	border: 1px solid var(--el-border-color-lighter);
+	border-radius: 999px;
+	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
+}
+
+.stat-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	font-size: 15px;
+	border-radius: 50%;
+}
+
+.stat-user .stat-icon {
+	color: #2563eb;
+	background: #dbeafe;
+}
+
+.stat-relation .stat-icon {
+	color: #8b5cf6;
+	background: #ede9fe;
+}
+
+.stat-level .stat-icon {
+	color: #059669;
+	background: #d1fae5;
+}
+
+.stat-selected .stat-icon {
+	color: #ea580c;
+	background: #ffedd5;
+}
+
+.stat-value {
+	font-size: 15px;
+	font-weight: 700;
+	line-height: 1.15;
+	color: var(--el-text-color-primary);
+}
+
+.stat-selected-name {
+	max-width: 120px;
+	overflow: hidden;
+	font-size: 14px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.stat-label {
+	font-size: 11px;
+	color: var(--el-text-color-secondary);
+}
+
+.stat-main {
+	display: flex;
+	align-items: baseline;
+	gap: 6px;
+}
+
+.graph-content {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) 310px;
+	flex: 1;
+	min-height: 520px;
+}
+
+.flow-container {
+	position: relative;
+	min-width: 0;
+	min-height: 520px;
+	background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
+}
+
+.flow-container :deep(.vue-flow) {
+	width: 100%;
+	height: 100%;
+}
+
+.flow-container :deep(.vue-flow__node) {
+	background: transparent;
+	border: 0;
+	box-shadow: none;
+}
+
+.flow-container :deep(.vue-flow__edge-textbg) {
+	stroke: #e2e8f0;
+	stroke-width: 1;
+}
+
+.relation-handle {
+	width: 2px;
+	height: 2px;
+	pointer-events: none;
+	background: transparent;
+	border: 0;
+	opacity: 0;
+}
+
+.flow-container :deep(.vue-flow__controls) {
+	overflow: hidden;
+	border: 1px solid #dbe3ef;
+	border-radius: 8px;
+	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.relation-node {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	width: 230px;
+	height: 96px;
+	padding: 15px 38px 15px 14px;
+	box-sizing: border-box;
+	background: rgba(255, 255, 255, 0.96);
+	border: 2px solid #cbd5e1;
+	border-radius: 14px;
+	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
+	cursor: pointer;
+	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
+}
+
+.relation-node:hover,
+.relation-node.is-selected {
+	border-color: var(--el-color-primary);
+	box-shadow: 0 12px 30px rgba(37, 99, 235, 0.18);
+}
+
+.relation-node.is-root {
+	color: #fff;
+	background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
+	border-color: #1d4ed8;
+	box-shadow: 0 14px 32px rgba(37, 99, 235, 0.28);
+}
+
+.relation-node.is-repeated {
+	background: #f8fafc;
+	border-style: dashed;
+	opacity: 0.82;
+}
+
+.root-badge,
+.repeat-badge {
+	position: absolute;
+	top: -10px;
+	left: 14px;
+	padding: 3px 9px;
+	font-size: 11px;
+	font-weight: 600;
+	border-radius: 20px;
+}
+
+.root-badge {
+	color: #1d4ed8;
+	background: #dbeafe;
+}
+
+.repeat-badge {
+	color: #475569;
+	background: #e2e8f0;
+}
+
+.node-avatar,
+.detail-avatar {
+	display: flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	color: #475569;
+	font-weight: 700;
+	background: #e2e8f0;
+	border-radius: 50%;
+}
+
+.node-avatar {
+	width: 46px;
+	height: 46px;
+	font-size: 18px;
+}
+
+.node-avatar img,
+.detail-avatar img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.gender-1 {
+	color: #1d4ed8;
+	background: #dbeafe;
+}
+
+.gender-2 {
+	color: #be185d;
+	background: #fce7f3;
+}
+
+.node-main {
+	min-width: 0;
+	flex: 1;
+}
+
+.node-name {
+	overflow: hidden;
+	font-size: 15px;
+	font-weight: 700;
+	color: #0f172a;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.is-root .node-name {
+	color: #fff;
+}
+
+.node-username {
+	margin-top: 4px;
+	overflow: hidden;
+	font-size: 11px;
+	color: #64748b;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.is-root .node-username {
+	color: rgba(255, 255, 255, 0.78);
+}
+
+.node-role {
+	display: inline-flex;
+	max-width: 112px;
+	padding: 2px 7px;
+	margin-top: 6px;
+	overflow: hidden;
+	font-size: 11px;
+	color: #7c3aed;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	background: #f3e8ff;
+	border-radius: 10px;
+}
+
+.node-add {
+	position: absolute;
+	right: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 27px;
+	height: 27px;
+	padding: 0;
+	color: #2563eb;
+	background: #eff6ff;
+	border: 1px solid #bfdbfe;
+	border-radius: 50%;
+	cursor: pointer;
+}
+
+.is-root .node-add {
+	color: #fff;
+	background: rgba(255, 255, 255, 0.16);
+	border-color: rgba(255, 255, 255, 0.4);
+}
+
+.detail-panel {
+	overflow-y: auto;
+	padding: 12px;
+	background: var(--el-fill-color-lighter);
+	border-left: 1px solid var(--el-border-color-lighter);
+}
+
+.detail-user-header {
+	display: flex;
+	align-items: center;
+	gap: 9px;
+	padding: 8px 10px 8px 8px;
+	background: var(--el-bg-color);
+	border: 1px solid var(--el-border-color-lighter);
+	border-radius: 999px;
+	box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
+}
+
+.detail-avatar {
+	width: 40px;
+	height: 40px;
+	font-size: 16px;
+}
+
+.detail-user-main {
+	min-width: 0;
+	flex: 1;
+}
+
+.detail-user-name {
+	overflow: hidden;
+	font-size: 15px;
+	font-weight: 700;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.detail-user-id {
+	margin-top: 2px;
+	font-size: 11px;
+	color: var(--el-text-color-secondary);
+}
+
+.detail-user-header :deep(.el-tag) {
+	flex: none;
+	border-radius: 999px;
+}
+
+.detail-list {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	margin-top: 10px;
+}
+
+.detail-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	min-height: 30px;
+	padding: 3px 11px;
+	background: var(--el-bg-color);
+	border: 1px solid var(--el-border-color-lighter);
+	border-radius: 999px;
+}
+
+.detail-item.is-multiline {
+	align-items: flex-start;
+	border-radius: 15px;
+}
+
+.detail-label {
+	flex: none;
+	font-size: 11px;
+	color: var(--el-text-color-secondary);
+}
+
+.detail-value {
+	min-width: 0;
+	overflow: hidden;
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--el-text-color-primary);
+	text-align: right;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.is-multiline .detail-value {
+	overflow: visible;
+	line-height: 1.5;
+	text-overflow: clip;
+	white-space: normal;
+}
+
+.detail-section-title {
+	margin: 14px 4px 0;
+	font-size: 13px;
+	font-weight: 700;
+	color: var(--el-text-color-primary);
+}
+
+.relation-description {
+	padding: 7px 12px;
+	margin-top: 7px;
+	font-size: 12px;
+	line-height: 1.55;
+	color: #4338ca;
+	background: #eef2ff;
+	border: 1px solid #c7d2fe;
+	border-radius: 16px;
+}
+
+.relation-detail-list {
+	margin-top: 7px;
+}
+
+.detail-add-button {
+	width: 100%;
+	height: 34px;
+	margin-top: 12px;
+	border-radius: 999px;
+}
+
+.graph-minimap {
+	background: rgba(255, 255, 255, 0.9);
+	border: 1px solid #dbe3ef;
+	border-radius: 8px;
+	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+@media (max-width: 1200px) {
+	.graph-content {
+		grid-template-columns: minmax(0, 1fr) 280px;
+	}
+}
+
+@media (max-width: 900px) {
+	.graph-toolbar {
+		align-items: flex-start;
+		flex-direction: column;
+	}
+
+	.toolbar-actions {
+		flex-wrap: wrap;
+	}
+
+	.graph-content {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.flow-container {
+		height: 560px;
+	}
+
+	.detail-panel {
+		border-top: 1px solid var(--el-border-color-lighter);
+		border-left: 0;
+	}
+}
+</style>