zant-admin 1.0.0

package/src/utils/regionUtils.js

@@ -0,0 +1,169 @@
+import { ref } from 'vue'
+import region from '@/api/methods/region'
+
+// 存储原始省市区数据，用于前端查询
+const provinceData = ref([])
+const cityData = ref([])
+const areaData = ref([])
+const allCity = ref([])
+const allAreas = ref([])
+
+/**
+ * 一次性获取所有省市区数据
+ * @returns {Promise} 返回获取数据的Promise
+ */
+const fetchAllAddressData = async () => {
+  try {
+    // 并行获取所有省市区数据
+    const [provinceRes, cityRes, areaRes] = await Promise.all([
+      region.getAllProvince(),
+      region.getAllCity(),
+      region.getAllAreas()
+    ])
+
+    // 存储原始数据
+    provinceData.value = provinceRes.data
+    cityData.value = cityRes.data
+    areaData.value = areaRes.data
+
+    // 设置所有城市数据
+    allCity.value = cityData.value.map(item => ({
+      label: item.name,
+      value: item.adcode,
+    }))
+
+    // 设置所有区域数据
+    allAreas.value = areaData.value.map(item => ({
+      label: item.name,
+      value: item.adcode,
+    }))
+
+    return {
+      provinces: provinceData.value.map(item => ({
+        label: item.name,
+        value: item.adcode,
+      })),
+      cities: allCity.value,
+      areas: allAreas.value
+    }
+  } catch (error) {
+    console.error('获取省市区数据失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 根据省份代码查询城市数据
+ * @param {string} provinceCode - 省份代码(adcode)
+ * @returns {Array} 城市数据数组
+ */
+const getCitiesByProvinceCode = (provinceCode) => {
+  if (!provinceCode || !cityData.value.length) return []
+  return cityData.value.filter(city => city.parentAdcode === provinceCode).map(city => ({
+    label: city.name,
+    value: city.adcode,
+  }))
+}
+
+/**
+ * 根据城市代码查询区域数据
+ * @param {string} cityCode - 城市代码(adcode)
+ * @returns {Array} 区域数据数组
+ */
+const getAreasByCityCode = (cityCode) => {
+  if (!cityCode || !areaData.value.length) return []
+  return areaData.value.filter(area => area.parentAdcode === cityCode).map(area => ({
+    label: area.name,
+    value: area.adcode,
+  }))
+}
+
+/**
+ * 获取所有省份数据
+ * @returns {Array} 省份数据数组
+ */
+const getAllProvinces = () => {
+  return provinceData.value.map(item => ({
+    label: item.name,
+    value: item.adcode,
+  }))
+}
+
+/**
+ * 获取所有城市数据
+ * @returns {Array} 城市数据数组
+ */
+const getAllCities = () => {
+  return allCity.value
+}
+
+/**
+ * 获取所有区域数据
+ * @returns {Array} 区域数据数组
+ */
+const getAllAreas = () => {
+  return allAreas.value
+}
+
+/**
+ * 根据adcode获取省份信息
+ * @param {string} adcode - 省份adcode
+ * @returns {Object} 省份信息对象
+ */
+const getProvinceByAdcode = (adcode) => {
+  if (!adcode || !provinceData.value.length) return null
+  return provinceData.value.find(province => province.adcode === adcode)
+}
+
+/**
+ * 根据adcode获取城市信息
+ * @param {string} adcode - 城市adcode
+ * @returns {Object} 城市信息对象
+ */
+const getCityByAdcode = (adcode) => {
+  if (!adcode || !cityData.value.length) return null
+  return cityData.value.find(city => city.adcode === adcode)
+}
+
+/**
+ * 根据adcode获取区域信息
+ * @param {string} adcode - 区域adcode
+ * @returns {Object} 区域信息对象
+ */
+const getAreaByAdcode = (adcode) => {
+  if (!adcode || !areaData.value.length) return null
+  return areaData.value.find(area => area.adcode === adcode)
+}
+
+/**
+ * 获取完整的省市区名称
+ * @param {string} provinceAdcode - 省份adcode
+ * @param {string} cityAdcode - 城市adcode
+ * @param {string} areaAdcode - 区域adcode
+ * @returns {string} 完整的省市区名称
+ */
+const getFullAddressName = (provinceAdcode, cityAdcode, areaAdcode) => {
+  const province = getProvinceByAdcode(provinceAdcode)
+  const city = getCityByAdcode(cityAdcode)
+  const area = getAreaByAdcode(areaAdcode)
+
+  const parts = []
+  if (province) parts.push(province.name)
+  if (city) parts.push(city.name)
+  if (area) parts.push(area.name)
+
+  return parts.join('')
+}
+
+export default {
+  fetchAllAddressData,
+  getCitiesByProvinceCode,
+  getAreasByCityCode,
+  getAllProvinces,
+  getAllCities,
+  getAllAreas,
+  getProvinceByAdcode,
+  getCityByAdcode,
+  getAreaByAdcode,
+  getFullAddressName
+}

package/src/utils/useFormCRUD.js

@@ -0,0 +1,60 @@
+import { ref } from 'vue'
+import { message } from 'ant-design-vue'
+
+/**
+ * 通用表单 CRUD Hook
+ * @param {Object} api - API对象，例如 sysRole
+ * @param {Object} [options] - 配置
+ * @param {string} [options.addMethod='add'] - 新增方法名
+ * @param {string} [options.updateMethod='update'] - 修改方法名
+ * @param {boolean} [options.autoMessage=true] - 是否自动提示
+ */
+export default function useFormCRUD(api, {
+  addMethod = 'add',
+  updateMethod = 'update',
+  autoMessage = true
+} = {}) {
+  const loading = ref(false)
+
+  /**
+   * 保存表单
+   * @param {Object} formRef - 表单 ref
+   * @param {Object} formData - 表单数据
+   * @param {Function} [onSuccess] - 成功回调
+   * @param {Function} [onError] - 错误回调
+   */
+  const save = async (formRef, formData, { onSuccess, onError } = {}) => {
+    try {
+      // 校验表单
+      await formRef?.validate()
+      loading.value = true
+
+      const method = (formData.id) ? updateMethod : addMethod
+      const result = await api[method](formData)
+    // 先显示提示，再执行回调
+    if (autoMessage) {
+      message.success(formData.id ? '修改成功' : '新增成功', 1, () => {
+        onSuccess?.(result)
+      })
+    } else {
+      onSuccess?.(result)
+    }
+
+      return result
+    } catch (err) {
+      if (err?.errorFields) {
+        message.warning('请完善表单信息')
+      } else {
+        onError?.(err)
+        if (autoMessage && onError) {
+          message.error('操作失败，请重试')
+        }
+      }
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { loading, save }
+}

package/src/views/baiscstatis/center.vue

@@ -0,0 +1,463 @@
+<template>
+  <div class="user-center">
+    <a-card title="个人中心" :bordered="false" class="user-center-card">
+      <a-row :gutter="32">
+        <!-- 左侧用户信息 -->
+        <a-col :span="6">
+          <div class="user-info">
+            <div class="avatar-section">
+              <a-avatar :size="80" :src="userInfo.avatar" class="user-avatar">
+                {{ userInfo.username?.charAt(0) || 'U' }}
+              </a-avatar>
+              <div class="user-basic-info">
+                <h3>{{ userInfo.username || '用户' }}</h3>
+                <p class="user-role">{{ userInfo.roleName || '普通用户' }}</p>
+              </div>
+            </div>
+          </div>
+        </a-col>
+
+        <!-- 右侧功能区域 -->
+        <a-col :span="18">
+          <a-tabs v-model:activeKey="activeTab" type="card">
+            <!-- 基本信息 -->
+            <a-tab-pane key="basic" tab="基本信息">
+              <div class="basic-info-container">
+                <a-descriptions title="用户信息" bordered :column="2">
+                  <a-descriptions-item label="账号名称">
+                    {{ userInfo.username || '未设置' }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="手机号">
+                    {{ userInfo.phone || '未设置' }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="邮箱">
+                    {{ userInfo.email || '未设置' }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="角色">
+                    {{ userInfo.roleName || '普通用户' }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="最后登录时间" :span="2">
+                    {{ userInfo.lastLoginTime ? formatDate(userInfo.lastLoginTime) : '从未登录' }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="注册时间" :span="2">
+                    {{ userInfo.createTime ? formatDate(userInfo.createTime) : '未知' }}
+                  </a-descriptions-item>
+                </a-descriptions>
+              </div>
+            </a-tab-pane>
+
+            <!-- 修改密码 -->
+            <a-tab-pane key="password" tab="修改密码">
+              <div class="password-form-container">
+                <a-form
+                  :model="passwordForm"
+                  :label-col="{ span: 8 }"
+                  :wrapper-col="{ span: 12 }"
+                  layout="horizontal"
+                  :rules="passwordRules"
+                  ref="formRef"
+                >
+                  <a-form-item label="原密码" name="oldPassword">
+                    <a-input-password v-model:value="passwordForm.oldPassword" placeholder="请输入原密码" />
+                  </a-form-item>
+                  <a-form-item label="新密码" name="newPassword">
+                    <a-input-password v-model:value="passwordForm.newPassword" placeholder="请输入新密码" />
+                  </a-form-item>
+                  <a-form-item label="确认密码" name="confirmPassword">
+                    <a-input-password v-model:value="passwordForm.confirmPassword" placeholder="请再次输入新密码" />
+                  </a-form-item>
+                  <a-form-item :wrapper-col="{ offset: 8, span: 12 }">
+                    <a-button type="primary" @click="changePassword">修改密码</a-button>
+                    <a-button style="margin-left: 10px" @click="resetPasswordForm">重置</a-button>
+                  </a-form-item>
+                </a-form>
+              </div>
+            </a-tab-pane>
+
+            <!-- 安全设置 -->
+            <!-- <a-tab-pane key="security" tab="安全设置">
+              <a-list item-layout="horizontal">
+                <a-list-item>
+                  <a-list-item-meta
+                    title="登录提醒"
+                    description="开启后，当有新设备登录时会发送提醒"
+                  />
+                  <template #actions>
+                    <a-switch v-model:checked="securitySettings.loginAlert" />
+                  </template>
+                </a-list-item>
+                <a-list-item>
+                  <a-list-item-meta
+                    title="双重验证"
+                    description="开启双重验证，提高账户安全性"
+                  />
+                  <template #actions>
+                    <a-switch v-model:checked="securitySettings.twoFactorAuth" />
+                  </template>
+                </a-list-item>
+                <a-list-item>
+                  <a-list-item-meta
+                    title="会话管理"
+                    description="查看和管理当前登录的设备"
+                  />
+                  <template #actions>
+                    <a-button type="link" @click="showSessionManager">管理</a-button>
+                  </template>
+                </a-list-item>
+              </a-list>
+              <div style="margin-top: 20px; text-align: center;">
+                <a-button type="primary" @click="saveSecuritySettings">保存设置</a-button>
+              </div>
+            </a-tab-pane> -->
+          </a-tabs>
+        </a-col>
+      </a-row>
+    </a-card>
+
+    <!-- 会话管理模态框 -->
+    <a-modal
+      v-model:visible="sessionModalVisible"
+      title="会话管理"
+      width="600px"
+      :footer="null"
+    >
+      <a-list
+        item-layout="horizontal"
+        :data-source="sessions"
+      >
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <a-list-item-meta
+              :title="item.device"
+              :description="`最后活动: ${formatDate(item.lastActivity)}`"
+            />
+            <template #actions>
+              <a-button type="link" danger @click="logoutSession(item.id)">强制下线</a-button>
+            </template>
+          </a-list-item>
+        </template>
+      </a-list>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { useUserStore } from '@/stores/user'
+import sysAccount from '@/api/methods/sysAccount'
+
+// 用户存储
+const userStore = useUserStore()
+
+// 响应式数据
+const activeTab = ref('basic')
+const sessionModalVisible = ref(false)
+const formRef = ref(null)
+// 用户信息
+const userInfo = reactive({
+  username: '',
+  email: '',
+  phone: '',
+  position: '',
+  roleName: '',
+  avatar: '',
+  lastLoginTime: null,
+  createTime: null
+})
+
+// 密码表单
+const passwordForm = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+})
+
+// 安全设置
+const securitySettings = reactive({
+  loginAlert: false,
+  twoFactorAuth: false
+})
+
+// 会话列表
+const sessions = ref([])
+
+// 密码验证规则
+const passwordRules = {
+  oldPassword: [
+    { required: true, message: '请输入原密码', trigger: 'blur' }
+  ],
+  newPassword: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    // { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, message: '请确认新密码', trigger: 'blur' },
+    {
+      validator: (rule, value) => {
+        if (value !== passwordForm.newPassword) {
+          return Promise.reject('两次输入的密码不一致')
+        }
+        return Promise.resolve()
+      },
+      trigger: 'blur'
+    }
+  ]
+}
+
+// 生命周期
+onMounted(() => {
+  loadUserInfo()
+})
+
+// 加载用户信息
+const loadUserInfo = async () => {
+  try {
+    // 从用户存储获取基本信息
+    const currentUser = userStore.userInfo
+    if (currentUser) {
+      Object.assign(userInfo, {
+        username: currentUser.name || '',
+        email: currentUser.email || '',
+        phone: currentUser.mobile || '',
+        position: currentUser.position || '',
+        roleName: currentUser.roleId === 1 ? '管理员' : '普通用户',
+        avatar: currentUser.profilePicture || '',
+        lastLoginTime: currentUser.lastLoginTime || null,
+        createTime: currentUser.createTime || null
+      })
+    }
+
+    // 这里可以添加API调用获取更详细的用户信息
+    // const response = await getUserDetail()
+    // if (response.success) {
+    //   Object.assign(userInfo, response.data)
+    // }
+  } catch (error) {
+    console.error('加载用户信息失败:', error)
+    message.error('加载用户信息失败')
+  }
+}
+
+
+
+// 修改密码
+const changePassword = async () => {
+  try {
+    // 验证表单
+    await formRef.value.validate()
+
+    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+      message.error('两次输入的密码不一致')
+      return
+    }
+
+    // 调用修改密码接口
+    const res = await sysAccount.updatePwd({
+      id: userStore.userInfo.id,
+      oldPwd: passwordForm.oldPassword,
+      newPwd: passwordForm.newPassword
+    })
+
+      message.success('密码修改成功')
+      resetPasswordForm()
+
+
+  } catch (error) {
+    console.error('修改密码失败:', error)
+    // message.error('修改密码失败')
+  }
+}
+
+// 重置密码表单
+const resetPasswordForm = () => {
+  Object.assign(passwordForm, {
+    oldPassword: '',
+    newPassword: '',
+    confirmPassword: ''
+  })
+}
+
+// 保存安全设置
+const saveSecuritySettings = async () => {
+  try {
+    // 这里添加保存安全设置的API调用
+    // await updateSecuritySettings(securitySettings)
+    message.success('安全设置保存成功')
+  } catch (error) {
+    console.error('保存安全设置失败:', error)
+    message.error('保存安全设置失败')
+  }
+}
+
+// 显示会话管理
+const showSessionManager = () => {
+  sessionModalVisible.value = true
+  loadSessions()
+}
+
+// 加载会话列表
+const loadSessions = async () => {
+  try {
+    // 这里添加获取会话列表的API调用
+    // const response = await getUserSessions()
+    // sessions.value = response.data || []
+
+    // 模拟数据
+    sessions.value = [
+      {
+        id: 1,
+        device: 'Windows Chrome',
+        lastActivity: new Date(),
+        location: '中国 北京'
+      },
+      {
+        id: 2,
+        device: 'Mac Safari',
+        lastActivity: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2小时前
+        location: '中国 上海'
+      }
+    ]
+  } catch (error) {
+    console.error('加载会话列表失败:', error)
+  }
+}
+
+// 强制下线会话
+const logoutSession = async (sessionId) => {
+  try {
+    // 这里添加强制下线会话的API调用
+    // await forceLogoutSession(sessionId)
+    message.success('会话已强制下线')
+    loadSessions()
+  } catch (error) {
+    console.error('强制下线失败:', error)
+    message.error('强制下线失败')
+  }
+}
+
+// 格式化日期
+const formatDate = (date) => {
+  if (!date) return '未知'
+  const d = new Date(date)
+  return d.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+</script>
+
+<style scoped>
+.user-center {
+  padding: 10px;
+}
+
+.user-center-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.user-info {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  min-height: 400px;
+}
+
+.avatar-section {
+  margin-bottom: 24px;
+}
+
+.user-avatar {
+  margin-bottom: 16px;
+  border: 3px solid #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background-color: #1677ff !important;
+  font-size: 38px !important;
+  font-weight: 600 !important;
+
+}
+.user-basic-info h3 {
+  margin: 0 0 8px 0;
+  font-size: 20px;
+  color: #262626;
+}
+
+.user-role {
+  margin: 0 0 4px 0;
+  color: #8c8c8c;
+  font-size: 14px;
+}
+
+
+
+.user-stats {
+  margin-top: 24px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 6px;
+}
+
+.stat-item {
+  text-align: center;
+}
+
+.stat-number {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab) {
+  border-radius: 6px 6px 0 0;
+}
+
+:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active) {
+  background: #fff;
+}
+
+.basic-info-container {
+  padding: 20px;
+}
+
+:deep(.ant-descriptions) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+:deep(.ant-descriptions-title) {
+  font-size: 18px;
+  font-weight: 600;
+  color: #262626;
+  margin-bottom: 16px;
+}
+
+:deep(.ant-descriptions-item-label) {
+  font-weight: 500;
+  background: #f8f9fa;
+}
+
+.password-form-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+  padding: 20px;
+}
+
+:deep(.password-form-container .ant-form) {
+  width: 100%;
+  max-width: 400px;
+}
+</style>