feat(auth): 后台登录、角色权限与会话访问策略

管理员与客服分角色登录，权限由后端判定；前端补齐登录、人员与组织管理页面。

frontend/src/components/common/Modal.vue

@@ -0,0 +1,119 @@
+<!--
+Copyright 2024-2026 ReplyPier
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup lang="ts">
+import { useId } from 'vue'
+
+const titleId = useId()
+const props = withDefaults(defineProps<{
+  title?: string
+  // When true, clicking the backdrop does NOT close the modal — for forms
+  // where an accidental outside-click would discard the user's input.
+  persistent?: boolean
+}>(), { persistent: false })
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const onOverlayClick = () => {
+  if (!props.persistent) emit('close')
+}
+</script>
+
+<template>
+  <div class="modal-overlay" @click="onOverlayClick">
+    <div class="modal-content" role="dialog" aria-modal="true" :aria-labelledby="titleId" @click.stop>
+      <div class="modal-header">
+        <h3 :id="titleId" class="modal-title">
+          <slot name="title"></slot>
+        </h3>
+        <button class="close-button" aria-label="关闭" @click="$emit('close')">&times;</button>
+      </div>
+      <div class="modal-body">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(5, 6, 9, 0.66);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  z-index: 100;
+}
+
+.modal-content {
+  background: var(--surface);
+  border: 1px solid var(--o10);
+  border-radius: 20px;
+  padding: 28px;
+  width: 100%;
+  max-width: 520px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-lg);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 22px;
+}
+
+.modal-title {
+  font-family: var(--font-display);
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text);
+  margin: 0;
+}
+
+.close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--o05);
+  border: 1px solid var(--o12);
+  border-radius: 8px;
+  font-size: 18px;
+  color: var(--muted);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.close-button:hover {
+  background: var(--o10);
+  color: var(--text);
+}
+
+.modal-body {
+  margin-top: 0;
+}
+</style>