gridsum-vue3-pc 1.0.0

package/template/base/src/locales/en.json

@@ -0,0 +1,153 @@
+{
+  "common": {
+    "confirm": "Confirm",
+    "cancel": "Cancel",
+    "submit": "Submit",
+    "reset": "Reset",
+    "search": "Search",
+    "add": "Add",
+    "edit": "Edit",
+    "delete": "Delete",
+    "save": "Save",
+    "back": "Back",
+    "loading": "Loading...",
+    "success": "Success",
+    "error": "Error",
+    "warning": "Warning",
+    "info": "Info",
+    "yes": "Yes",
+    "no": "No",
+    "enable": "Enable",
+    "disable": "Disable",
+    "total": "Total",
+    "items": "items",
+    "actions": "Actions",
+    "noData": "No Data",
+    "reload": "Reload",
+    "export": "Export",
+    "batchDelete": "Batch Delete",
+    "selectItems": "Please select items first",
+    "batchDeleteConfirm": "Are you sure to delete selected items?"
+  },
+  "menu": {
+    "home": "Home",
+    "admin": "Admin",
+    "user": "User Management",
+    "role": "Role Management",
+    "login": "Login",
+    "notFound": "Not Found",
+    "system": "System"
+  },
+  "user": {
+    "login": "Login",
+    "logout": "Logout",
+    "username": "Username",
+    "password": "Password",
+    "loginSuccess": "Login Success",
+    "loginFail": "Login Failed",
+    "notLoggedIn": "Not Logged In",
+    "welcome": "Welcome to Login",
+    "usernamePlaceholder": "Please enter username",
+    "passwordPlaceholder": "Please enter password",
+    "loggingIn": "Logging in...",
+    "loginBtn": "Login",
+    "demoHint": "Demo accounts: admin/admin, zhangsan/123456, lisi/123456",
+    "name": "Name",
+    "email": "Email",
+    "phone": "Phone",
+    "role": "Role",
+    "status": "Status",
+    "createTime": "Create Time",
+    "searchPlaceholder": "Search username/name/email",
+    "addUser": "Add User",
+    "editUser": "Edit User",
+    "deleteConfirm": "Are you sure to delete this user?",
+    "deleteSuccess": "Delete Success",
+    "deleteFail": "Delete Failed",
+    "editSuccess": "Edit Success",
+    "editFail": "Edit Failed",
+    "addSuccess": "Add Success",
+    "addFail": "Add Failed",
+    "roleAdmin": "Admin",
+    "roleUser": "User",
+    "roleGuest": "Guest",
+    "requiredUsername": "Please enter username",
+    "requiredName": "Please enter name",
+    "requiredEmail": "Please enter email",
+    "invalidEmail": "Please enter valid email format",
+    "requiredPassword": "Please enter password",
+    "passwordTooShort": "Password must be at least 3 characters",
+    "requiredCaptcha": "Please enter captcha",
+    "captchaError": "Invalid captcha",
+    "captchaPlaceholder": "Enter captcha",
+    "rememberMe": "Remember Me",
+    "retryAfter": "Retry in",
+    "resetForm": "Reset Form"
+  },
+  "role": {
+    "name": "Role Name",
+    "code": "Role Code",
+    "description": "Description",
+    "permissions": "Permissions",
+    "createTime": "Create Time",
+    "searchPlaceholder": "Search role name/code",
+    "addRole": "Add Role",
+    "editRole": "Edit Role",
+    "deleteConfirm": "Are you sure to delete this role?",
+    "deleteSuccess": "Delete Success",
+    "deleteFail": "Delete Failed",
+    "editSuccess": "Edit Success",
+    "editFail": "Edit Failed",
+    "addSuccess": "Add Success",
+    "addFail": "Add Failed",
+    "requiredName": "Please enter role name",
+    "requiredCode": "Please enter role code",
+    "permUserView": "View User",
+    "permUserAdd": "Add User",
+    "permUserEdit": "Edit User",
+    "permUserDelete": "Delete User",
+    "permRoleView": "View Role",
+    "permRoleAdd": "Add Role",
+    "permRoleEdit": "Edit Role",
+    "permRoleDelete": "Delete Role"
+  },
+  "home": {
+    "greeting": "Welcome back, {name}",
+    "welcome": "Welcome to the new generation frontend engineering template!",
+    "trendTitle": "Traffic Trend (This Month)",
+    "quickActions": "Quick Actions",
+    "activeToday": "Active Today"
+  },
+  "admin": {
+    "userTotal": "Total Users",
+    "roleTotal": "Total Roles",
+    "permTotal": "Total Permissions",
+    "activeSessions": "Active Sessions",
+    "distributionTitle": "Role Distribution",
+    "recentActivity": "Recent Activity",
+    "logLogin": "{user} logged in",
+    "logCreateUser": "{user} created user {target}",
+    "logUpdateRole": "{user} updated role {target}",
+    "logDeleteUser": "{user} deleted user {target}"
+  },
+  "language": {
+    "zh": "中文",
+    "en": "English"
+  },
+  "error": {
+    "notFoundTitle": "Page Not Found",
+    "notFoundDesc": "Sorry, the page you are looking for does not exist or has been removed",
+    "forbiddenTitle": "Access Denied",
+    "forbiddenDesc": "Sorry, you do not have permission to access this page",
+    "serverErrorTitle": "Server Error",
+    "serverErrorDesc": "Sorry, the server encountered an error. Please try again later",
+    "backHome": "Back to Home"
+  },
+  "layout": {
+    "darkMode": "Dark Mode",
+    "lightMode": "Light Mode",
+    "fullscreen": "Fullscreen",
+    "exitFullscreen": "Exit Fullscreen",
+    "noNotifications": "No notifications"
+  }
+}

package/template/base/src/locales/index.ts

@@ -0,0 +1,32 @@
+import { createI18n } from 'vue-i18n';
+import zh from './zh.json';
+import en from './en.json';
+
+const LOCALE_KEY = 'locale';
+
+function resolveLocale(raw: string): string {
+  return raw.startsWith('zh') ? 'zh' : 'en';
+}
+
+function detectLocale() {
+  const saved = localStorage.getItem(LOCALE_KEY);
+  if (saved) return resolveLocale(saved);
+
+  const envLocale = import.meta.env.VITE_APP_LOCALE;
+  if (envLocale) return resolveLocale(envLocale);
+
+  return navigator.language.toLowerCase().startsWith('zh') ? 'zh' : 'en';
+}
+
+function setLocale(locale: string) {
+  localStorage.setItem(LOCALE_KEY, locale);
+}
+
+const i18n = createI18n({
+  legacy: false,
+  locale: detectLocale(),
+  fallbackLocale: 'en',
+  messages: { zh, en },
+});
+
+export { i18n, setLocale };

package/template/base/src/locales/zh.json

@@ -0,0 +1,153 @@
+{
+  "common": {
+    "confirm": "确认",
+    "cancel": "取消",
+    "submit": "提交",
+    "reset": "重置",
+    "search": "搜索",
+    "add": "新增",
+    "edit": "编辑",
+    "delete": "删除",
+    "save": "保存",
+    "back": "返回",
+    "loading": "加载中...",
+    "success": "操作成功",
+    "error": "操作失败",
+    "warning": "警告",
+    "info": "提示",
+    "yes": "是",
+    "no": "否",
+    "enable": "启用",
+    "disable": "禁用",
+    "total": "共",
+    "items": "条",
+    "actions": "操作",
+    "noData": "暂无数据",
+    "reload": "重新加载",
+    "export": "导出",
+    "batchDelete": "批量删除",
+    "selectItems": "请先选择数据项",
+    "batchDeleteConfirm": "确定要删除选中的数据吗？"
+  },
+  "menu": {
+    "home": "首页",
+    "admin": "管理页",
+    "user": "用户管理",
+    "role": "角色管理",
+    "login": "登录",
+    "notFound": "页面未找到",
+    "system": "系统管理"
+  },
+  "user": {
+    "login": "登录",
+    "logout": "退出登录",
+    "username": "用户名",
+    "password": "密码",
+    "loginSuccess": "登录成功",
+    "loginFail": "登录失败",
+    "notLoggedIn": "未登录",
+    "welcome": "欢迎登录系统",
+    "usernamePlaceholder": "请输入用户名",
+    "passwordPlaceholder": "请输入密码",
+    "loggingIn": "登录中...",
+    "loginBtn": "登 录",
+    "demoHint": "演示账号: admin/admin, zhangsan/123456, lisi/123456",
+    "name": "姓名",
+    "email": "邮箱",
+    "phone": "手机号",
+    "role": "角色",
+    "status": "状态",
+    "createTime": "创建时间",
+    "searchPlaceholder": "搜索用户名/姓名/邮箱",
+    "addUser": "新增用户",
+    "editUser": "编辑用户",
+    "deleteConfirm": "确定要删除该用户吗？",
+    "deleteSuccess": "删除成功",
+    "deleteFail": "删除失败",
+    "editSuccess": "编辑成功",
+    "editFail": "编辑失败",
+    "addSuccess": "新增成功",
+    "addFail": "新增失败",
+    "roleAdmin": "管理员",
+    "roleUser": "普通用户",
+    "roleGuest": "访客",
+    "requiredUsername": "请输入用户名",
+    "requiredName": "请输入姓名",
+    "requiredEmail": "请输入邮箱",
+    "invalidEmail": "请输入正确的邮箱格式",
+    "requiredPassword": "请输入密码",
+    "passwordTooShort": "密码不能少于3位",
+    "requiredCaptcha": "请输入验证码",
+    "captchaError": "验证码错误",
+    "captchaPlaceholder": "请输入验证码",
+    "rememberMe": "记住密码",
+    "retryAfter": "请",
+    "resetForm": "重置表单"
+  },
+  "role": {
+    "name": "角色名称",
+    "code": "角色编码",
+    "description": "描述",
+    "permissions": "权限",
+    "createTime": "创建时间",
+    "searchPlaceholder": "搜索角色名称/编码",
+    "addRole": "新增角色",
+    "editRole": "编辑角色",
+    "deleteConfirm": "确定要删除该角色吗？",
+    "deleteSuccess": "删除成功",
+    "deleteFail": "删除失败",
+    "editSuccess": "编辑成功",
+    "editFail": "编辑失败",
+    "addSuccess": "新增成功",
+    "addFail": "新增失败",
+    "requiredName": "请输入角色名称",
+    "requiredCode": "请输入角色编码",
+    "permUserView": "用户查看",
+    "permUserAdd": "用户新增",
+    "permUserEdit": "用户编辑",
+    "permUserDelete": "用户删除",
+    "permRoleView": "角色查看",
+    "permRoleAdd": "角色新增",
+    "permRoleEdit": "角色编辑",
+    "permRoleDelete": "角色删除"
+  },
+  "home": {
+    "greeting": "欢迎回来，{name}",
+    "welcome": "欢迎使用新一代前端工程化模板！",
+    "trendTitle": "访问趋势（本月）",
+    "quickActions": "快速操作",
+    "activeToday": "今日活跃"
+  },
+  "admin": {
+    "userTotal": "用户总数",
+    "roleTotal": "角色总数",
+    "permTotal": "权限总数",
+    "activeSessions": "活跃会话",
+    "distributionTitle": "角色分布",
+    "recentActivity": "近期活动",
+    "logLogin": "{user} 登录系统",
+    "logCreateUser": "{user} 创建了用户 {target}",
+    "logUpdateRole": "{user} 更新了角色 {target}",
+    "logDeleteUser": "{user} 删除了用户 {target}"
+  },
+  "language": {
+    "zh": "中文",
+    "en": "English"
+  },
+  "error": {
+    "notFoundTitle": "页面未找到",
+    "notFoundDesc": "抱歉，您访问的页面不存在或已被移除",
+    "forbiddenTitle": "无权限访问",
+    "forbiddenDesc": "抱歉，您没有权限访问此页面",
+    "serverErrorTitle": "服务器错误",
+    "serverErrorDesc": "抱歉，服务器出现错误，请稍后重试",
+    "backHome": "返回首页"
+  },
+  "layout": {
+    "darkMode": "暗黑模式",
+    "lightMode": "明亮模式",
+    "fullscreen": "全屏",
+    "exitFullscreen": "退出全屏",
+    "noNotifications": "暂无通知"
+  }
+}

package/template/base/src/main.ts

@@ -0,0 +1,27 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import 'element-plus/theme-chalk/dark/css-vars.css';
+import App from './App.vue';
+import router from './router';
+import { i18n } from './locales';
+
+import './assets/index.css';
+import './env';
+
+const app = createApp(App);
+const pinia = createPinia();
+
+app.use(pinia);
+app.use(router);
+app.use(ElementPlus);
+app.use(i18n);
+
+app.config.errorHandler = (err, instance, info) => {
+  console.error('[Global Error]', err);
+  console.error('[Component]', instance);
+  console.error('[Info]', info);
+};
+
+app.mount('#app');

package/template/base/src/router/index.ts

@@ -0,0 +1,91 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
+import { useUserStore } from '@/store/modules/user';
+import { i18n } from '@/locales';
+
+const staticRoutes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/Login.vue'),
+    meta: { titleKey: 'menu.login' },
+  },
+  {
+    path: '/403',
+    name: 'Forbidden',
+    component: () => import('@/views/error/Forbidden.vue'),
+    meta: { titleKey: 'error.forbiddenTitle' },
+  },
+  {
+    path: '/500',
+    name: 'ServerError',
+    component: () => import('@/views/error/ServerError.vue'),
+    meta: { titleKey: 'error.serverErrorTitle' },
+  },
+  {
+    path: '/',
+    component: () => import('@/components/basic-layout.vue'),
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        component: () => import('@/views/Home.vue'),
+        meta: { titleKey: 'menu.home', keepAlive: true },
+      },
+      {
+        path: 'user',
+        name: 'User',
+        component: () => import('@/views/User.vue'),
+        meta: { titleKey: 'menu.user', requiresAdmin: true },
+      },
+      {
+        path: 'role',
+        name: 'Role',
+        component: () => import('@/views/Role.vue'),
+        meta: { titleKey: 'menu.role', requiresAdmin: true },
+      },
+      {
+        path: 'admin',
+        name: 'Admin',
+        component: () => import('@/views/Admin.vue'),
+        meta: { titleKey: 'menu.admin', requiresAdmin: true },
+      },
+    ],
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: () => import('@/views/error/NotFound.vue'),
+    meta: { titleKey: 'error.notFoundTitle' },
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: staticRoutes,
+});
+
+router.beforeEach((to) => {
+  const userStore = useUserStore();
+  const user = userStore.userInfo ?? userStore.loadFromStorage();
+
+  const titleKey = to.meta.titleKey as string;
+  if (titleKey) {
+    document.title = `${i18n.global.t(titleKey)} - ${import.meta.env.VITE_APP_TITLE}`;
+  }
+
+  if (to.path === '/login') {
+    return user ? '/' : true;
+  }
+
+  const requiresAuth = to.matched.some(r => r.meta.requiresAuth);
+  if (requiresAuth && !user) {
+    return '/login';
+  }
+
+  if (to.meta.requiresAdmin && !userStore.isAdmin()) {
+    return '/403';
+  }
+});
+
+export default router;

package/template/base/src/services/http.ts

@@ -0,0 +1,64 @@
+import axios from 'axios';
+import { ElMessage } from 'element-plus';
+import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+
+export interface ResponseData<T = any> {
+  code: number;
+  data: T;
+  message: string;
+}
+
+const ERROR_MESSAGES: Record<string, string> = {
+  zh: '请求失败',
+  en: 'Request failed',
+};
+
+const UNAUTHORIZED: Record<string, string> = {
+  zh: '登录已过期，请重新登录',
+  en: 'Session expired, please login again',
+};
+
+function getLang(): string {
+  const saved = localStorage.getItem('locale');
+  if (saved) return saved.startsWith('zh') ? 'zh' : 'en';
+  return navigator.language.startsWith('zh') ? 'zh' : 'en';
+}
+
+const service = axios.create({
+  baseURL: '/api',
+  timeout: 10000,
+});
+
+service.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  error => Promise.reject(error),
+);
+
+service.interceptors.response.use(
+  (response: AxiosResponse<ResponseData>) => {
+    const res = response.data;
+    if (res.code !== 0 && res.code !== 200) {
+      const msg = res.message || ERROR_MESSAGES[getLang()];
+      return Promise.reject(new Error(msg));
+    }
+    return res;
+  },
+  error => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem('user');
+      localStorage.removeItem('token');
+      ElMessage.error(UNAUTHORIZED[getLang()]);
+      window.location.href = '/login';
+      return Promise.reject(error);
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default service;

package/template/base/src/services/user.ts

@@ -0,0 +1,23 @@
+import http from './http';
+import type { ResponseData } from './http';
+
+export interface UserInfo {
+  id: string;
+  username: string;
+  displayName?: string;
+  role: 'admin' | 'user' | 'guest';
+  permissions: string[];
+  email?: string;
+  avatar?: string;
+}
+
+export interface PaginatedData<T> {
+  list: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
+export function login(username: string, password: string): Promise<ResponseData<UserInfo>> {
+  return http.post('/auth/login', { username, password });
+}

package/template/base/src/store/modules/user.ts

@@ -0,0 +1,45 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import type { UserInfo } from '@/services/user';
+
+const STORAGE_KEY = 'user';
+
+export const useUserStore = defineStore('user', () => {
+  const userInfo = ref<UserInfo | null>(null);
+
+  function setUserInfo(info: UserInfo) {
+    userInfo.value = info;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(info));
+  }
+
+  function loadFromStorage(): UserInfo | null {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    try {
+      const data = JSON.parse(raw) as UserInfo;
+      userInfo.value = data;
+      return data;
+    } catch {
+      localStorage.removeItem(STORAGE_KEY);
+      return null;
+    }
+  }
+
+  function isAdmin(): boolean {
+    return userInfo.value?.role === 'admin';
+  }
+
+  function logout() {
+    userInfo.value = null;
+    localStorage.removeItem(STORAGE_KEY);
+    window.location.href = '/login';
+  }
+
+  return {
+    userInfo,
+    setUserInfo,
+    loadFromStorage,
+    isAdmin,
+    logout,
+  };
+});