vue3-admin-gpt 1.0.0

package/src/plugins/index.js

@@ -0,0 +1,44 @@
+/* 公共引入,勿随意修改,修改时需经过确认 */
+import "./support";
+import "@/styles/vab.scss";
+import "@/config/permission";
+// 不再导入vab-icon
+import Vab from "@/utils/vab";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import { faToElIcon } from "@/utils/vab";
+import { h } from "vue";
+
+// 创建全局VabIcon组件，用于替换之前的vab-icon
+const VabIcon = {
+  name: "VabIcon",
+  props: {
+    icon: {
+      type: [String, Array],
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => {
+      const iconName = faToElIcon(props.icon);
+      return h("el-icon", {}, [h(iconName)]);
+    };
+  },
+};
+
+export default (app) => {
+  // 注册Element Plus
+  app.use(ElementPlus);
+
+  // 注册所有Element Plus图标
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component);
+  }
+
+  // 注册VabIcon组件，替代之前的vab-icon
+  app.component("VabIcon", VabIcon);
+
+  // 注册自定义插件
+  app.use(Vab);
+};

package/src/plugins/support.js

@@ -0,0 +1,16 @@
+import { ElMessageBox } from 'element-plus'
+
+if (!!window.ActiveXObject || 'ActiveXObject' in window) {
+  ElMessageBox({
+    title: '温馨提示',
+    message:
+      '自2015年3月起，微软已宣布弃用IE，且不再对IE提供任何更新维护，请<a target="_blank" style="color:blue" href="https://www.microsoft.com/zh-cn/edge/">点击此处</a>访问微软官网更新浏览器，如果您使用的是双核浏览器,请您切换浏览器内核为极速模式',
+    type: 'warning',
+    showClose: false,
+    showConfirmButton: false,
+    closeOnClickModal: false,
+    closeOnPressEscape: false,
+    closeOnHashChange: false,
+    dangerouslyUseHTMLString: true,
+  })
+}

package/src/router/index.js

@@ -0,0 +1,400 @@
+/**
+ * @description router全局配置，如有必要可分文件抽离，其中asyncRoutes只有在intelligence模式下才会用到，vip文档中已提供路由的基础图标与小清新图标的配置方案，请仔细阅读
+ */
+
+import { createRouter, createWebHashHistory } from "vue-router";
+import Layout from "@/layouts/index.vue";
+import EmptyLayout from "@/layouts/EmptyLayout.vue";
+import { publicPath } from "@/config";
+
+export const constantRoutes = [
+  {
+    path: "/login",
+    component: () => import("@/views/login/index.vue"),
+    hidden: true,
+  },
+  {
+    path: "/register",
+    component: () => import("@/views/register/index.vue"),
+    hidden: true,
+  },
+  {
+    path: "/401",
+    name: "401",
+    component: () => import("@/views/401.vue"),
+    hidden: true,
+  },
+  {
+    path: "/404",
+    name: "404",
+    component: () => import("@/views/404.vue"),
+    hidden: true,
+  },
+];
+
+export const asyncRoutes = [
+  {
+    path: "/",
+    component: Layout,
+    redirect: "/index",
+    children: [
+      {
+        path: "index",
+        name: "Index",
+        component: () => import("@/views/index/index.vue"),
+        meta: {
+          title: "首页",
+          icon: "home",
+          affix: true,
+        },
+      },
+    ],
+  },
+
+  /* {
+    path: "/test",
+    component: Layout,
+    redirect: "noRedirect",
+    children: [
+      {
+        path: "test",
+        name: "Test",
+        component: () => import("@/views/test/index"),
+        meta: {
+          title: "test",
+          icon: "marker",
+          permissions: ["admin"],
+        },
+      },
+    ],
+  }, */
+  {
+    path: "/example",
+    component: Layout,
+    redirect: "/example/index",
+    name: "Example",
+    alwaysShow: true,
+    meta: { title: "路由案例", icon: "box-open", defaultOpen: true },
+    children: [
+      {
+        path: "index",
+        name: "ExampleIndex",
+        component: () => import("@/views/demo/index"),
+        meta: {
+          title: "路由创建教程",
+          icon: "document",
+        },
+      },
+    ]
+  },
+  {
+    path: "/vab",
+    component: Layout,
+    redirect: "noRedirect",
+    name: "Vab",
+    alwaysShow: true,
+    meta: { title: "组件", icon: "box-open", defaultOpen: true },
+    children: [
+      {
+        path: "vue3Demo",
+        name: "Vue3Demo",
+        component: () => import("@/views/vab/vue3Demo/index.vue"),
+        meta: {
+          title: "Vue 3 示例",
+          permissions: ["admin"],
+          noKeepAlive: false,
+        },
+      },
+      {
+        path: "table",
+        name: "Table",
+        component: () => import("@/views/vab/table.vue"),
+        meta: {
+          title: "表格",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "tree",
+        name: "Tree",
+        component: () => import("@/views/vab/tree.vue"),
+        meta: {
+          title: "树形控件",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "icon",
+        name: "Icon",
+        component: () => import("@/views/vab/icon.vue"),
+        meta: {
+          title: "图标",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "form",
+        name: "Form",
+        component: () => import("@/views/vab/form.vue"),
+        meta: {
+          title: "表单",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "chart",
+        name: "Chart",
+        component: () => import("@/views/vab/chart.vue"),
+        meta: {
+          title: "图表",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "permissions",
+        name: "Permissions",
+        component: () => import("@/views/vab/permissions.vue"),
+        meta: {
+          title: "权限管理",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "nested",
+        component: () => import("@/views/vab/nested.vue"),
+        name: "Nested",
+        redirect: "/vab/nested/menu1",
+        meta: {
+          title: "嵌套路由",
+          permissions: ["admin"],
+        },
+        children: [
+          {
+            path: "menu1",
+            component: () => import("@/views/vab/nested/menu1.vue"),
+            name: "Menu1",
+            redirect: "/vab/nested/menu1/menu2",
+            meta: { title: "一级菜单" },
+            children: [
+              {
+                path: "menu2",
+                component: () => import("@/views/vab/nested/menu1/menu2.vue"),
+                name: "Menu2",
+                redirect: "/vab/nested/menu1/menu2/menu3",
+                meta: { title: "二级菜单" },
+                children: [
+                  {
+                    path: "menu3",
+                    component: () => import("@/views/vab/nested/menu1/menu2/menu3.vue"),
+                    name: "Menu3",
+                    meta: { title: "三级菜单" },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: "editor",
+        name: "Editor",
+        component: () => import("@/views/vab/editor.vue"),
+        meta: {
+          title: "富文本编辑器",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "upload",
+        name: "Upload",
+        component: () => import("@/views/vab/upload.vue"),
+        meta: {
+          title: "文件上传",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "settings",
+        name: "Settings",
+        component: () => import("@/views/vab/settings.vue"),
+        meta: {
+          title: "系统设置",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "notification",
+        name: "Notification",
+        component: () => import("@/views/vab/notification.vue"),
+        meta: {
+          title: "通知中心",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "calendar",
+        name: "Calendar",
+        component: () => import("@/views/vab/calendar.vue"),
+        meta: {
+          title: "日历",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "task",
+        name: "Task",
+        component: () => import("@/views/vab/task.vue"),
+        meta: {
+          title: "任务管理",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "statistics",
+        name: "Statistics",
+        component: () => import("@/views/vab/statistics.vue"),
+        meta: {
+          title: "数据统计",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "help",
+        name: "Help",
+        component: () => import("@/views/vab/help.vue"),
+        meta: {
+          title: "帮助中心",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "project",
+        name: "Project",
+        component: () => import("@/views/vab/project.vue"),
+        meta: {
+          title: "项目管理",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "team",
+        name: "Team",
+        component: () => import("@/views/vab/team.vue"),
+        meta: {
+          title: "团队管理",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "workflow",
+        name: "Workflow",
+        component: () => import("@/views/vab/workflow.vue"),
+        meta: {
+          title: "工作流",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "knowledge",
+        name: "Knowledge",
+        component: () => import("@/views/vab/knowledge.vue"),
+        meta: {
+          title: "知识库",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "customer",
+        name: "Customer",
+        component: () => import("@/views/vab/customer.vue"),
+        meta: {
+          title: "客户管理",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "product",
+        name: "Product",
+        component: () => import("@/views/vab/product.vue"),
+        meta: {
+          title: "产品管理",
+          permissions: ["admin"],
+        },
+      },
+      {
+        path: "order",
+        name: "Order",
+        component: () => import("@/views/vab/order.vue"),
+        meta: {
+          title: "订单管理",
+          permissions: ["admin"],
+        },
+      },
+      // {
+      //   path: "campaign",
+      //   name: "Campaign",
+      //   component: () => import("@/views/vab/campaign.vue"),
+      //   meta: {
+      //     title: "营销活动",
+      //     permissions: ["admin"],
+      //   },
+      // },
+    ],
+  },
+
+  {
+    path: "/error",
+    component: EmptyLayout,
+    redirect: "noRedirect",
+    name: "Error",
+    meta: { title: "错误页", icon: "bug" },
+    children: [
+      {
+        path: "401",
+        name: "Error401",
+        component: () => import("@/views/401"),
+        meta: { title: "401" },
+      },
+      {
+        path: "404",
+        name: "Error404",
+        component: () => import("@/views/404"),
+        meta: { title: "404" },
+      },
+    ],
+  },
+  {
+    path: "/:pathMatch(.*)*",
+    redirect: "/404",
+    hidden: true,
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(publicPath),
+  routes: constantRoutes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition;
+    } else {
+      return { top: 0 };
+    }
+  },
+});
+
+export function resetRouter() {
+  // 注意：所有动态路由路由必须带有name属性，否则可能会不能完全重置干净
+  try {
+    router.getRoutes().forEach((route) => {
+      const { name } = route;
+      if (name && name !== "Login") {
+        router.hasRoute(name) && router.removeRoute(name);
+      }
+    });
+  } catch (error) {
+    // 强制刷新浏览器，不要用这种方式
+    window.location.reload();
+  }
+}
+
+export default router;

package/src/store/index.js

@@ -0,0 +1,26 @@
+/**
+ * @description 导入所有 vuex 模块，自动加入namespaced:true，用于解决vuex命名冲突，请勿修改。
+ * @description 这是一个兼容层，允许项目逐步从Vuex迁移到Pinia
+ */
+
+import { createStore } from 'vuex'
+
+// 从modules目录导入所有模块
+const files = require.context('./modules', false, /\.js$/)
+const modules = {}
+
+files.keys().forEach((key) => {
+  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+})
+
+// 为所有模块添加namespaced
+Object.keys(modules).forEach((key) => {
+  modules[key]['namespaced'] = true
+})
+
+// 创建store
+const store = createStore({
+  modules,
+})
+
+export default store

package/src/store/modules/errorLog.js

@@ -0,0 +1,27 @@
+/**
+ * @description 异常捕获的状态拦截，请勿修改
+ */
+
+const state = () => ({
+  errorLogs: [],
+})
+const getters = {
+  errorLogs: (state) => state.errorLogs,
+}
+const mutations = {
+  addErrorLog(state, errorLog) {
+    state.errorLogs.push(errorLog)
+  },
+  clearErrorLog: (state) => {
+    state.errorLogs.splice(0)
+  },
+}
+const actions = {
+  addErrorLog({ commit }, errorLog) {
+    commit('addErrorLog', errorLog)
+  },
+  clearErrorLog({ commit }) {
+    commit('clearErrorLog')
+  },
+}
+export default { state, getters, mutations, actions }

package/src/store/modules/routes.js

@@ -0,0 +1,60 @@
+/**
+ * @description 路由拦截状态管理，目前两种模式：all模式与intelligence模式
+ */
+import { asyncRoutes, constantRoutes } from '@/router'
+import { getRouterList } from '@/api/router'
+import { convertRouter, filterAsyncRoutes } from '@/utils/handleRoutes'
+
+const state = () => ({
+  routes: [],
+  partialRoutes: [],
+})
+const getters = {
+  routes: (state) => state.routes,
+  partialRoutes: (state) => state.partialRoutes,
+}
+const mutations = {
+  setRoutes(state, routes) {
+    state.routes = constantRoutes.concat(routes)
+  },
+  setAllRoutes(state, routes) {
+    state.routes = constantRoutes.concat(routes)
+  },
+}
+const actions = {
+  /**
+   * @description intelligence模式设置路由
+   * @param {*} { commit }
+   * @param {*} permissions
+   * @returns
+   */
+  async setRoutes({ commit }, permissions) {
+    //根据permissions做路由筛选
+    let accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
+    commit('setRoutes', accessedRoutes)
+    return accessedRoutes
+  },
+  /**
+   * @description all模式设置路由
+   * @param {*} { commit }
+   * @returns
+   */
+  async setAllRoutes({ commit }) {
+    try {
+      let { data } = await getRouterList()
+      if (!data || !Array.isArray(data)) {
+        console.error('后端返回的路由数据格式不正确', data)
+        data = []
+      }
+
+      const accessedRoutes = convertRouter(data)
+      commit('setAllRoutes', accessedRoutes)
+      return accessedRoutes
+    } catch (error) {
+      console.error('获取路由列表失败', error)
+      commit('setAllRoutes', [])
+      return []
+    }
+  },
+}
+export default { state, getters, mutations, actions }

package/src/store/modules/settings.js

@@ -0,0 +1,73 @@
+/**
+ * @description 所有全局配置的状态管理，如无必要请勿修改
+ */
+
+import defaultSettings from '@/config'
+
+const { tabsBar, logo, layout, header, themeBar } = defaultSettings
+const theme = JSON.parse(localStorage.getItem('vue3-admin-theme')) || ''
+const state = () => ({
+  tabsBar: theme.tabsBar || tabsBar,
+  logo,
+  collapse: false,
+  layout: theme.layout || layout,
+  header: theme.header || header,
+  device: 'desktop',
+  themeBar,
+})
+const getters = {
+  collapse: (state) => state.collapse,
+  device: (state) => state.device,
+  header: (state) => state.header,
+  layout: (state) => state.layout,
+  logo: (state) => state.logo,
+  tabsBar: (state) => state.tabsBar,
+  themeBar: (state) => state.themeBar,
+}
+const mutations = {
+  changeLayout: (state, layout) => {
+    if (layout) state.layout = layout
+  },
+  changeHeader: (state, header) => {
+    if (header) state.header = header
+  },
+  changeTabsBar: (state, tabsBar) => {
+    if (tabsBar) state.tabsBar = tabsBar
+  },
+  changeCollapse: (state) => {
+    state.collapse = !state.collapse
+  },
+  foldSideBar: (state) => {
+    state.collapse = true
+  },
+  openSideBar: (state) => {
+    state.collapse = false
+  },
+  toggleDevice: (state, device) => {
+    state.device = device
+  },
+}
+const actions = {
+  changeLayout({ commit }, layout) {
+    commit('changeLayout', layout)
+  },
+  changeHeader({ commit }, header) {
+    commit('changeHeader', header)
+  },
+  changeTabsBar({ commit }, tabsBar) {
+    commit('changeTabsBar', tabsBar)
+  },
+  changeCollapse({ commit }) {
+    commit('changeCollapse')
+  },
+  foldSideBar({ commit }) {
+    commit('foldSideBar')
+  },
+  openSideBar({ commit }) {
+    commit('openSideBar')
+  },
+  toggleDevice({ commit }, device) {
+    commit('toggleDevice', device)
+  },
+}
+export default { state, getters, mutations, actions }

package/src/store/modules/table.js

@@ -0,0 +1,22 @@
+/**
+ * @description 代码生成机状态管理
+ */
+
+const state = () => ({
+  srcCode: '',
+})
+const getters = {
+  srcTableCode: (state) => state.srcCode,
+}
+
+const mutations = {
+  setTableCode(state, srcCode) {
+    state.srcCode = srcCode
+  },
+}
+const actions = {
+  setTableCode({ commit }, srcCode) {
+    commit('setTableCode', srcCode)
+  },
+}
+export default { state, getters, mutations, actions }