YLSG新框架

// 路由配置结构
const routes = [
  {
    path: '/login',
    component: () => import('@/page/login/login.vue'),
    meta: { title: '登录', hidden: true }
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/page/wel/index.vue'),
        meta: { title: '首页', icon: 'dashboard' }
      }
    ]
  },
  {
    path: '/user',
    component: Layout,
    meta: { title: '用户管理', icon: 'user' },
    children: [
      {
        path: 'list',
        component: () => import('@/page/user/user.vue'),
        meta: { title: '用户列表', permission: 'user:list' }
      }
    ]
  }
]

// 主要配置项包括：
// - 系统基本信息（标题、描述、关键词）
// - 接口配置（加密开关、超时时间、基础URL）
// - 上传配置（文件大小限制、上传接口）
// - 认证配置（Token过期时间、认证头字段）
// - 菜单配置（图标、路径、权限字段）
// - 系统设置（侧边栏模式、主题、调试模式）
// - 登录配置（多种登录方式开关）
// - 国际化配置（多语言支持）
export default {
  // 系统标题
  title: 'YLSG后台管理系统',
  // 系统描述
  description: 'YLSG后台管理系统',
  // 系统关键词
  keywords: 'YLSG后台管理系统',
  // 是否启用网络异步路由
  asyncRoutes: true,
  // 接口配置
  api: {
    // 是否开启接口数据加密
    enableEncryption: false,
    // 加密密钥
    encryptionKey: 'HSTebjXJRNpnKGh7',
    // 接口超时时间(ms)
    timeout: 10000,
    // 开发环境接口地址
    devBaseUrl: 'https://avue3base.xxxyin.cn',
    // 是否开启mock数据
    enableMock: false,

  },

  // 上传配置
  upload: {
    // 图片上传接口
    imageUrl: '/base/upload_img',
    // 文件上传接口
    fileUrl: '/base/upload_file',
    // 上传大小限制(MB)
    maxSize: 10
  },


  // 系统Logo
  logo: "A",

  // 系统标识
  storeKey: 'key',

  // token配置
  tokenTime: 60,
  Authorization: 'Key',

  // http错误码白名单
  statusWhiteList: {
    '401': '认证失败，无法访问系统资源',
    '403': '当前操作没有权限',
    '404': '访问资源不存在',
    '500': '系统错误',
    '601': '操作失败',
    'default': '系统未知错误,请反馈给管理员'
  },

  // 首页配置
  fistPage: {
    name: "首页",
    path: "/"
  },

  // 菜单配置
  menu: {
    iconDefault: 'icon-caidan', // 默认菜单图标
    label: 'label',             // 菜单标题字段名
    path: 'path',              // 菜单路由路径字段名
    icon: 'icon',              // 菜单图标字段名
    children: 'children',      // 子菜单字段名
    query: 'query',            // 路由参数字段名
    href: 'href',              // 外链字段名
    meta: 'meta',              // 路由元信息字段名
    showIcon: true,            // 是否显示菜单图标
  },

  // 系统设置
  setting: {
    sidebar: 'vertical',      // 侧边栏模式,可选 vertical/horizontal/category
    tag: true,               // 是否显示标签页
    debug: false,             // 是否启用调试模式
    collapse: true,          // 是否允许折叠侧边栏
    search: true,            // 是否显示搜索框
    lock: true,              // 是否显示锁屏按钮
    color: true,             // 是否显示主题色设置
    screenshot: true,        // 是否显示截图按钮
    fullscren: true,         // 是否显示全屏按钮
    theme: true,             // 是否显示主题设置
    menu: true               // 是否显示菜单设置
  },

  // 登录配置
  login: {
    // 是否开启账号密码登录
    enableUserLogin: true,
    // 是否开启手机验证码登录
    enablePhoneLogin: false,
    // 是否开启人脸识别登录
    enableFaceLogin: false,
    // 是否开启第三方登录
    enableThirdLogin: false,
    // 是否开启图形验证码
    enableCaptcha: true
  },




  // 国际化配置
  i18n: {
    // 是否开启多语言
    enable: true,
    // 默认语言
    defaultLanguage: 'zh-CN',
    // 支持的语言列表
    languages: ['zh-CN', 'en-US']
  },
  
} 

// 主要配置包括：
// - 组件尺寸设置
// - CRUD操作配置（增删改查按钮）
// - 表格样式配置（边框、斑马纹、对齐方式）
// - 表单配置（栅格间距、标签位置）
// - 对话框配置（拖拽、遮罩关闭）
// Avue全局配置对象
export const avueConfig = {
    // 组件默认尺寸，可选值：'medium' | 'small' | 'mini' | 'default'
    size: 'default',

    // axios实例，所有Avue的请求会走这里
    axios,

    // CRUD（增删改查）相关的全局默认配置
    crudOption: {
        // 是否显示编辑按钮
        editBtn: true,
        // 是否显示删除按钮
        delBtn: true,
        // 是否显示新增按钮
        addBtn: true,
        // 是否显示表格边框
        border: true,
        // 是否显示斑马纹
        stripe: true,
        // 是否显示序号列
        index: false,
        // 搜索表单菜单所占栅格数（24栅格制）
        searchMenuSpan: 8,
        // 表格内容对齐方式
        align: 'center',
        // 表头对齐方式
        headerAlign: 'center',
        // 是否显示操作栏
        menu: true,
        // 操作栏按钮类型，可选：'button' | 'text' | 'icon'
        menuType: 'text',
        // 表格高度，'auto'为自适应
        height: 'auto',
        // 表格栅格间距
        gutter: 30,
        // 自动计算表格高度时的偏移量
        calcHeight: 65,
        // 操作栏宽度
        menuWidth: 200,
        // 操作栏标题
        menuTitle: '可操作',
        // 操作栏内容对齐方式
        menuAlign: 'center',
        // 操作栏是否固定在右侧
        menuFixed: 'right',
        // 是否显示打印按钮
        printBtn: true,
        // 是否显示导出Excel按钮
        excelBtn: true,
        // 是否显示列设置按钮
        columnBtn: false,
        // 是否显示复制按钮
        copyBtn: false,
        // 对话框是否可拖拽
        dialogDrag: true,
        // 点击遮罩是否可关闭对话框
        dialogClickModal: true,
        // 搜索表单标签位置，可选：'left' | 'top'
        searchLabelPosition: 'left',
    },

    // 表单相关的全局默认配置
    formOption: {
        // 表单项之间的栅格间距
        gutter: 30,
        // 表单标签位置，可选：'left' | 'right' | 'top'
        labelPosition: 'top',
        // labelWidth: 110, // 可自定义标签宽度（如有需要可取消注释）
    },

    // 弹窗内容是否挂载到body（防止被父容器样式影响）
    appendToBody: true,
    // 模态框内容是否挂载到body
    modalAppendToBody: true,

    // 以下为第三方云存储配置（如需使用请取消注释并填写相关参数,注意，一旦取消注释第三方云存储，原来的图片上传，文件上传就会出错，非常重要）
    /*
    // 腾讯云COS配置
    cos: {
        SecretId: '',
        SecretKey: '',
        Bucket: '',
        Region: ''
    },
    // 七牛云配置
    qiniu: {
        AK: '',
        SK: '',
        scope: '',
        url: '',
        deadline: 1
    },
    // 阿里云OSS配置
    ali: {
        region: '',
        endpoint: '',
        accessKeyId: '',
        accessKeySecret: '',
        bucket: '',
    },
    */

    // 水印画布配置（用于表格/图片等水印功能）
    /*
    canvas: {
        text: 'avuejs.com',           // 水印文字
        fontFamily: 'microsoft yahei',// 字体
        color: "#999",                // 颜色
        fontSize: 16,                 // 字号
        opacity: 100,                 // 透明度
        bottom: 10,                   // 距离底部距离
        right: 10,                    // 距离右侧距离
        ratio: 1                      // 缩放比例
    }
    */
}

// 参考文件：src/config/loader.js 第1-20行
// 主要功能：
// - 按需加载组件和配置
// - 性能优化，减少初始加载时间
// - 智能缓存管理，避免重复加载
export function initConfig() {
  // （可选）保存配置到本地存储，可根据需要启用
  // setStore({ name: CONFIG_KEY, content: settings })

  // 如果启用API加密，则将加密/解密方法挂载到window全局对象
  if (settings.api.enableEncryption) {
    window.encryption = (data) => encryption(data)
    window.decryption = (data) => decryption(data)
  }

  // 设置页面标题
  if (settings.title) {
    document.title = settings.title;
  }

  // 设置meta description
  if (settings.description) {
    const metaDesc = document.querySelector('meta[name="description"]');
    if (metaDesc) {
      metaDesc.setAttribute('content', settings.description);
    }
  }

  // 设置meta keywords
  if (settings.keywords) {
    const metaKeywords = document.querySelector('meta[name="keywords"]');
    if (metaKeywords) {
      metaKeywords.setAttribute('content', settings.keywords);
    }
  }

  return settings
}

/**
 * 更新系统配置
 * @param {Object} newConfig - 新的配置对象
 * @returns {Object} 更新后的配置
 */
export function updateConfig(newConfig) {
  // 合并新配置到settings对象
  Object.assign(settings, newConfig)
  // 保存到本地存储
  setStore({ name: CONFIG_KEY, content: settings })
  return settings
}

/**
 * 重置系统配置为初始状态
 * @returns {Object} 重置后的配置
 */
export function resetConfig() {
  // 清空本地存储中的配置
  setStore({ name: CONFIG_KEY, content: null })
  // 重新初始化配置
  return initConfig()
}

  created() {
    const componentName = this.crudOption.name;
    // 动态检测组件所在目录
    const componentPath = this.$options.__file || '';
    // 尝试从组件路径中提取目录信息
    let componentDir = '';
    if (componentPath) {
      const srcIndex = componentPath.indexOf('src/');
      if (srcIndex !== -1) {
        const relativePath = componentPath.substring(srcIndex + 4); // 去掉 'src/'
        const lastSlashIndex = relativePath.lastIndexOf('/');
        if (lastSlashIndex !== -1) {
          componentDir = relativePath.substring(0, lastSlashIndex);
        }
      }
    }
    // 如果无法从路径获取，使用默认的page目录
    if (!componentDir) {
      componentDir = `page/${componentName}`;
    }
    // 构建文件路径 - 修正：确保包含/src前缀
    const optionPath = `src/${componentDir}/${componentName}.js`;
    const apiPath = `src/${componentDir}/api_${componentName}.js`;

    // 动态导入所有JS文件
    const modules = import.meta.glob('/src/**/*.js', { eager: false });
    // 加载配置文件
    const optionModulePath = `/${optionPath}`;

    if (modules[optionModulePath]) {
      modules[optionModulePath]().then((mode) => {
        this.option = mode.default ? mode.default(this) : mode(this);
        this.key = Math.random();
        // 配置加载完成后，如果API也已加载，则获取数据
        if (this.api && Object.keys(this.api).length > 0) {
          this.getList();
        }
      }).catch((error) => {
      });
    } 
    // 加载API文件
    const apiModulePath = `/${apiPath}`;
    if (modules[apiModulePath]) {
      modules[apiModulePath]().then((mode) => {
        this.api = mode;

        // API加载完成后，如果配置也已加载，则获取数据
        if (this.option && Object.keys(this.option).length > 0) {
          this.getList();
        }
      })
    } 
    // 自定义按钮权限钩子
    if (this.createdBefore) {
      this.createdBefore(this.BtnPermission, permission);
    }
    if (debug) console.log(`[页面][${componentName}] 按钮权限设置完成:`, this.BtnPermission);
  }

// 公共方法：会递归过滤对象中所有以$开头的key，支持多级嵌套，
function filterDollarKeys(obj) {
  if (Array.isArray(obj)) {
    return obj.map(item => filterDollarKeys(item));
  } else if (obj && typeof obj === 'object') {
    const result = {};
    Object.keys(obj).forEach(key => {
      if (!key.startsWith('$')) {
        result[key] = filterDollarKeys(obj[key]);
      }
    });
    return result;
  }
  return obj;
}

created() {
    // ...动态载入配置
     // 自定义按钮权限钩子
    if (this.createdBefore) {
      this.createdBefore(this.BtnPermission, permission);
    }
},
methods: {
  /**
   * 获取数据列表
   */
  getList() {
    const callback = () => {
      // ...数据获取逻辑...
      apiMethod(data).then((res) => {
        // 列表获取后的回调处理
        if (this.listAfter) {
          data = this.listAfter(data);
        } else {
          this.$message.success("获取成功");
        }
        this.data = data;
      });
    };

    // 列表获取前的钩子
    if (this.listBefore) {
      this.listBefore();
    }
    callback();
  },

  /**
   * 保存新行数据
   */
  rowSave(row, done, loading) {
    const callback = () => {
      this.api[this.option.add || "add"](this.form).then((data) => {
        if (this.addAfter) {
          this.addAfter(data);
        } else {
          this.$message.success("新增成功");
        }
      });
    };

    if (this.addBefore) {
      this.addBefore();
    }
    callback();
  },

  /**
   * 更新行数据
   */
  rowUpdate(row, index, done, loading) {
    const callback = () => {
      this.api[this.option.update || "update"](this.form).then((data) => {
        if (this.updateAfter) {
          this.updateAfter(data);
        } else {
          this.$message.success("更新成功");
        }
      });
    };

    if (this.updateBefore) {
      this.updateBefore();
    }
    callback();
  },

  /**
   * 删除行数据
   */
  rowDel(row, index) {
    const callback = () => {
      this.api[this.option.del || "del"]({ id: row.id }).then((data) => {
        if (this.delAfter) {
          this.delAfter(data, row, index);
        } else {
          this.$message.success("删除成功");
        }
      });
    };

    if (this.delBefore) {
      this.delBefore();
      callback();
    }
  },

  /**
   * 搜索条件变化处理
   */
  searchChange(params, done) {
    // 搜索前钩子处理
    if (this.searchBefore) {
      const processedParams = this.searchBefore(params);
      if (processedParams === false) return;
      params = processedParams || params;
    }
    this.getList();
  }
}

// 参考文件：src/page/user/user.vue 第20-40行
// 主要功能：用户管理页面的钩子函数示例
export default {
  mixins: [crud({ name: 'user' })],
  methods: {
    // 新增前：添加默认值
    addBefore() {
      this.form.create_time = this.$dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.form.status = 1 // 默认启用状态
    },
    
    // 更新前：添加更新时间
    updateBefore() {
      this.form.update_time = this.$dayjs().format('YYYY-MM-DD HH:mm:ss')
    },
    
    // 搜索前：预处理搜索参数
    searchBefore(params) {
      if (params.username) {
        params.username = params.username.trim()
      }
      return params
    }
  }
}

 getMemberInfo({ commit }) {
      return new Promise((resolve, reject) => {
        getMemberInfo().then((res) => {
          const data = res;
          //用户信息存储
          commit('SET_USERIFNO', data.userInfo);
          commit('SET_ROLES', data.roles);
          commit('SET_PERMISSION', data.permission)
          resolve(data);
        }).catch(err => {
          reject(err);
        })
      })

// 在组件中使用
export default {
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo
    },
    hasEditPermission() {
      return this.$store.state.user.permission['user_edit']
    }
  },
  
  methods: {
    checkPermission(permission) {
      return this.$store.state.user.permission[permission]
    }
  }
}

// 路由守卫核心逻辑
router.beforeEach((to, from, next) => {
  // 1. 检查Token
  if (getToken()) {
    // 2. 获取用户信息
    if (store.getters.roles.length === 0) {
      store.dispatch('getMemberInfo').then(() => {
        next({ ...to, replace: true })
      })
    } else {
      // 3. 权限验证通过，允许访问
      next()
    }
  } else {
    // 4. 无Token，跳转登录页
    next('/login')
  }
})

// 是否启用网络异步路由
asyncRoutes: true,  // true: 远程菜单，false: 本地菜单

// 先引入
import request from '@/axios';

// 基础使用示例
export const getUsers = (params) => {
  return request({
    url: '/api/users',
    method: 'get',
    params
  })
}

// 创建用户
export const createUser = (data) => {
  return request({
    url: '/api/users',
    method: 'post',
    data
  })
}

// 禁用Token
export const login = (data) => {
  return request({
    url: '/api/login',
    method: 'post',
    data,
    headers: {
      isToken: false
    }
  })
}

// （禁用防重复提交）
export const submitForm = (data) => {
  return request({
    url: '/api/submit',
    method: 'post',
    data,
    headers: {
      repeatSubmit: false
    }
  })
}
// 页面使用示例
// 以获取用户列表为例，页面中可这样调用API方法：
// curd混入默认已经全部引入，直接可以用this.api.方法名调用
import { getUsers, createUser } from '@/views/user/api_user' // 假设API文件路径

export default {
  data() {
    return {
      userList: [],
      loading: false,
      form: {
        name: '',
        age: ''
      }
    }
  },
  methods: {
    // 获取用户列表
    fetchUsers() {
      this.loading = true
      getUsers({ page: 1, size: 10 }).then(res => {
        this.userList = res.data.list
      }).finally(() => {
        this.loading = false
      })
    },
    // 新建用户
    handleCreate() {
      createUser(this.form).then(res => {
        this.$message.success('创建成功')
        this.fetchUsers()
      })
    }
  },
  mounted() {
    this.fetchUsers()
  }
}

{
  "code": 200,
  "datas": {
    "id": 1,
    "username": "admin",
    "nickname": "超级管理员",
    "avatar": "http://avue3base.xxxyin.cn/uploads/base/admin.jpg",
    "state": 1,
    "role_id": 1,
    "type": 1,
    "key": "3705e45463f667ab7f3fbe182779e458",
    "key_time": 1754117618,
    "add_time": 0,
    "update_time": 1649231810,
    "last_login_time": 1754117618,
    "last_login_ip": "183.226.112.242",
    "p_id": 0,
    "client_id": ""
  }
}

{
  "code": 200,
  "datas": {
    "userInfo": {
      "id": 1,
      "username": "admin",
      "password": "cd33c6223e01d512b6462f00c40fdf02",
      "nickname": "超级管理员",
      "avatar": "http://avue3base.xxxyin.cn/uploads/base/admin.jpg",
      "state": 1,
      "role_id": 1,
      "type": 1,
      "key": "3705e45463f667ab7f3fbe182779e458",
      "key_time": "2025-08-02 14:53:38",
      "add_time": "",
      "update_time": "2022-04-06 15:56:50",
      "last_login_time": "2025-08-02 14:53:38",
      "last_login_ip": "183.226.112.242",
      "p_id": 0,
      "client_id": "",
      "role_weight": 1
    },
    "roles": {
      "role_id": 1,
      "role_name": "超级管理员",
      "weight": 1
    },
    "permission": [
      "index_import",
      "index_export",
      "index_del",
      "index_edit",
      "index_add",
      "MenuManagement_import",
      "MenuManagement_export",
      "MenuManagement_del",
      "MenuManagement_edit",
      "MenuManagement_add",
      "role_import",
      "role_export",
      "role_del",
      "role_edit",
      "role_add",
      "admin_user_import",
      "admin_user_export",
      "admin_user_del",
      "admin_user_edit",
      "admin_user_add",
      "applets_page_del",
      "applets_page_detail",
      "applets_page_edit",
      "applets_page_add",
      "share_img_del",
      "share_img_detail",
      "share_img_edit",
      "share_img_add",
      "swiper_del",
      "swiper_detail",
      "swiper_edit",
      "swiper_add"
    ]
  }
}

{
  "code": 200,
  "datas": [
    {
      "id": 1,
      "p_id": 0,
      "sort": 0,
      "label": "首页",
      "icon": "fa-solid fa-desktop",
      "is_show": 0,
      "is_top": 2,
      "query": "",
      "path": "/wel",
      "href": "",
      "type": 1,
      "meta": {
        "title": "首页",
        "icon": "fa-solid fa-desktop"
      },
      "add_time": 1752054402,
      "update_time": 1753452378,
      "hidden": 0,
      "children": [
        {
          "id": 2,
          "p_id": 1,
          "sort": 0,
          "label": "首页",
          "icon": "fa-solid fa-desktop",
          "is_show": 0,
          "is_top": 2,
          "query": "",
          "path": "index",
          "href": "",
          "type": 2,
          "meta": {
            "title": "首页",
            "icon": "fa-solid fa-desktop"
          },
          "add_time": 1752054402,
          "update_time": 1753452508,
          "hidden": 0,
          "children": [
            {
              "id": 11,
              "p_id": 2,
              "sort": 0,
              "label": "首页导入数据",
              "icon": "",
              "is_show": 0,
              "is_top": 2,
              "query": "",
              "path": "index_import",
              "href": "",
              "type": 3,
              "meta": {
                "title": "首页导入数据",
                "icon": "",
                "i18n": "i18n"
              },
              "add_time": 1752054402,
              "update_time": 1752054402,
              "hidden": 0,
              "children": []
            }
          ]
        }
      ]
    }
  ]
}

{
  "code": 200,
  "datas": "操作成功"
}

{
  "code": 200,
  "datas": "a97dd07246eb37d85ef61f917e3e7ae2"
}

{
  "code": 200,
  "datas": {
    "record_number": "",
    "record_url": "https://beian.miit.gov.cn"
  }
}

{
  "code": 200,
  "datas": [
    {
      "id": 1,
      "p_id": 0,
      "sort": 0,
      "label": "首页",
      "icon": "fa-solid fa-desktop",
      "is_show": 0,
      "is_top": 2,
      "query": "",
      "path": "/wel",
      "href": "",
      "type": 1,
      "meta": {
        "title": "首页",
        "icon": "fa-solid fa-desktop"
      },
      "add_time": "2025-07-09 17:46:42",
      "update_time": "2025-07-25 22:06:18",
      "children": [
        {
          "id": 2,
          "p_id": 1,
          "sort": 0,
          "label": "首页",
          "icon": "fa-solid fa-desktop",
          "is_show": 0,
          "is_top": 2,
          "query": "",
          "path": "index",
          "href": "",
          "type": 2,
          "meta": {
            "title": "首页",
            "icon": "fa-solid fa-desktop"
          },
          "add_time": "2025-07-09 17:46:42",
          "update_time": "2025-07-25 22:08:28",
          "children": [
            {
              "id": 11,
              "p_id": 2,
              "sort": 0,
              "label": "首页导入数据",
              "icon": "",
              "is_show": 0,
              "is_top": 2,
              "query": "",
              "path": "index_import",
              "href": "",
              "type": 3,
              "meta": {
                "title": "首页导入数据",
                "icon": "",
                "i18n": "i18n"
              },
              "add_time": "2025-07-09 17:46:42",
              "update_time": "2025-07-09 17:46:42",
              "children": []
            }
          ]
        }
      ]
    }
  ]
}

{
  "code": 200,
  "datas": "操作成功"
}

{
  "code": 200,
  "datas": {
    "id": 6,
    "p_id": 0,
    "sort": 1,
    "label": "运营管理",
    "icon": "",
    "is_show": 0,
    "is_top": 2,
    "query": "",
    "path": "/operation",
    "href": "",
    "type": 1,
    "meta": {
      "title": "运营管理"
    },
    "add_time": "2025-08-02 15:39:34",
    "update_time": "2025-08-02 15:39:34"
  }
}

{
  "code": 200,
  "datas": "操作成功"
}

{
  "code": 200,
  "datas": "操作成功"
}

{
  "code": 200,
  "datas": "操作成功"
}

{
  "code": 200,
  "datas": "菜单已清空，自增ID已重置"
}

{
  "code": 200,
  "datas": {
    "num": 4,
    "data": [
      {
        "id": 1,
        "role_name": "超级管理员",
        "state": 1,
        "sort": 0,
        "roleval": "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54",
        "cmark": "最高权限管理员",
        "add_time": 1598587433,
        "update_time": 1753869363,
        "weight": 1
      }
    ]
  }
}

{
  "code": 200,
  "datas": [
    {
      "id": 1,
      "role_name": "超级管理员",
      "state": 1,
      "weight": 1
    }
  ]
}

{
  "code": 200,
  "datas": "操作成功"
}

{
  "code": 200,
  "datas": "操作成功"
}

{
  "code": 200,
  "datas": "操作成功"
}