(
38 | url: string,
39 | params?: T,
40 | config?: PureHttpRequestConfig
41 | ): Promise;
42 | get(
43 | url: string,
44 | params?: T,
45 | config?: PureHttpRequestConfig
46 | ): Promise;
47 | }
48 |
--------------------------------------------------------------------------------
/src/utils/message.ts:
--------------------------------------------------------------------------------
1 | import { type VNode } from "vue";
2 | import { isFunction } from "@pureadmin/utils";
3 | import { type MessageHandler, ElMessage } from "element-plus";
4 |
5 | type messageStyle = "el" | "antd";
6 | type messageTypes = "info" | "success" | "warning" | "error";
7 |
8 | interface MessageParams {
9 | /** 消息类型，可选 `info` 、`success` 、`warning` 、`error` ，默认 `info` */
10 | type?: messageTypes;
11 | /** 自定义图标，该属性会覆盖 `type` 的图标 */
12 | icon?: any;
13 | /** 是否将 `message` 属性作为 `HTML` 片段处理，默认 `false` */
14 | dangerouslyUseHTMLString?: boolean;
15 | /** 消息风格，可选 `el` 、`antd` ，默认 `antd` */
16 | customClass?: messageStyle;
17 | /** 显示时间，单位为毫秒。设为 `0` 则不会自动关闭，`element-plus` 默认是 `3000` ，平台改成默认 `2000` */
18 | duration?: number;
19 | /** 是否显示关闭按钮，默认值 `false` */
20 | showClose?: boolean;
21 | /** 文字是否居中，默认值 `false` */
22 | center?: boolean;
23 | /** `Message` 距离窗口顶部的偏移量，默认 `20` */
24 | offset?: number;
25 | /** 设置组件的根元素，默认 `document.body` */
26 | appendTo?: string | HTMLElement;
27 | /** 合并内容相同的消息，不支持 `VNode` 类型的消息，默认值 `false` */
28 | grouping?: boolean;
29 | /** 关闭时的回调函数, 参数为被关闭的 `message` 实例 */
30 | onClose?: Function | null;
31 | }
32 |
33 | /** 用法非常简单，参考 src/views/components/message/index.vue 文件 */
34 |
35 | /**
36 | * `Message` 消息提示函数
37 | */
38 | const message = (
39 | message: string | VNode | (() => VNode),
40 | params?: MessageParams
41 | ): MessageHandler => {
42 | if (!params) {
43 | return ElMessage({
44 | message,
45 | customClass: "pure-message"
46 | });
47 | } else {
48 | const {
49 | icon,
50 | type = "info",
51 | dangerouslyUseHTMLString = false,
52 | customClass = "antd",
53 | duration = 2000,
54 | showClose = false,
55 | center = false,
56 | offset = 20,
57 | appendTo = document.body,
58 | grouping = false,
59 | onClose
60 | } = params;
61 |
62 | return ElMessage({
63 | message,
64 | type,
65 | icon,
66 | dangerouslyUseHTMLString,
67 | duration,
68 | showClose,
69 | center,
70 | offset,
71 | appendTo,
72 | grouping,
73 | // 全局搜 pure-message 即可知道该类的样式位置
74 | customClass: customClass === "antd" ? "pure-message" : "",
75 | onClose: () => (isFunction(onClose) ? onClose() : null)
76 | });
77 | }
78 | };
79 |
80 | /**
81 | * 关闭所有 `Message` 消息提示函数
82 | */
83 | const closeAllMessage = (): void => ElMessage.closeAll();
84 |
85 | export { message, closeAllMessage };
86 |
--------------------------------------------------------------------------------
/src/utils/mitt.ts:
--------------------------------------------------------------------------------
1 | import type { Emitter } from "mitt";
2 | import mitt from "mitt";
3 |
4 | /** 全局公共事件需要在此处添加类型 */
5 | type Events = {
6 | openPanel: string;
7 | tagViewsChange: string;
8 | tagViewsShowModel: string;
9 | logoChange: boolean;
10 | changLayoutRoute: string;
11 | };
12 |
13 | export const emitter: Emitter = mitt();
14 |
--------------------------------------------------------------------------------
/src/utils/progress/index.ts:
--------------------------------------------------------------------------------
1 | import NProgress from "nprogress";
2 | import "nprogress/nprogress.css";
3 |
4 | NProgress.configure({
5 | // 动画方式
6 | easing: "ease",
7 | // 递增进度条的速度
8 | speed: 500,
9 | // 是否显示加载ico
10 | showSpinner: false,
11 | // 自动递增间隔
12 | trickleSpeed: 200,
13 | // 初始化时的最小百分比
14 | minimum: 0.3
15 | });
16 |
17 | export default NProgress;
18 |
--------------------------------------------------------------------------------
/src/utils/propTypes.ts:
--------------------------------------------------------------------------------
1 | import type { CSSProperties, VNodeChild } from "vue";
2 | import {
3 | createTypes,
4 | toValidableType,
5 | VueTypesInterface,
6 | VueTypeValidableDef
7 | } from "vue-types";
8 |
9 | export type VueNode = VNodeChild | JSX.Element;
10 |
11 | type PropTypes = VueTypesInterface & {
12 | readonly style: VueTypeValidableDef;
13 | readonly VNodeChild: VueTypeValidableDef;
14 | };
15 |
16 | const newPropTypes = createTypes({
17 | func: undefined,
18 | bool: undefined,
19 | string: undefined,
20 | number: undefined,
21 | object: undefined,
22 | integer: undefined
23 | }) as PropTypes;
24 |
25 | // 从 vue-types v5.0 开始，extend()方法已经废弃，当前已改为官方推荐的ES6+方法 https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#the-extend-method
26 | export default class propTypes extends newPropTypes {
27 | // a native-like validator that supports the `.validable` method
28 | static get style() {
29 | return toValidableType("style", {
30 | type: [String, Object]
31 | });
32 | }
33 |
34 | static get VNodeChild() {
35 | return toValidableType("VNodeChild", {
36 | type: undefined
37 | });
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/utils/responsive.ts:
--------------------------------------------------------------------------------
1 | // 响应式storage
2 | import { App } from "vue";
3 | import Storage from "responsive-storage";
4 | import { routerArrays } from "@/layout/types";
5 | import { responsiveStorageNameSpace } from "@/config";
6 |
7 | export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
8 | const nameSpace = responsiveStorageNameSpace();
9 | const configObj = Object.assign(
10 | {
11 | // layout模式以及主题
12 | layout: Storage.getData("layout", nameSpace) ?? {
13 | layout: config.Layout ?? "vertical",
14 | theme: config.Theme ?? "default",
15 | darkMode: config.DarkMode ?? false,
16 | sidebarStatus: config.SidebarStatus ?? true,
17 | epThemeColor: config.EpThemeColor ?? "#409EFF"
18 | },
19 | configure: Storage.getData("configure", nameSpace) ?? {
20 | grey: config.Grey ?? false,
21 | weak: config.Weak ?? false,
22 | hideTabs: config.HideTabs ?? false,
23 | showLogo: config.ShowLogo ?? true,
24 | showModel: config.ShowModel ?? "smart",
25 | multiTagsCache: config.MultiTagsCache ?? false
26 | }
27 | },
28 | config.MultiTagsCache
29 | ? {
30 | // 默认显示顶级菜单tag
31 | tags: Storage.getData("tags", nameSpace) ?? routerArrays
32 | }
33 | : {}
34 | );
35 |
36 | app.use(Storage, { nameSpace, memory: configObj });
37 | };
38 |
--------------------------------------------------------------------------------
/src/utils/rootConver.ts:
--------------------------------------------------------------------------------
1 | const { VITE_PUBLIC_PATH } = import.meta.env;
2 |
3 | export const configConver = () => {
4 | if (VITE_PUBLIC_PATH === "./") {
5 | return window.location.origin + "/";
6 | }
7 | return window.location.origin + processPath(VITE_PUBLIC_PATH);
8 | };
9 |
10 | function processPath(str: string): string {
11 | if (str.startsWith("./")) {
12 | str = str.substring(1);
13 | } else if (!str.startsWith("/")) {
14 | str = "/" + str;
15 | }
16 |
17 | if (!str.endsWith("/")) {
18 | str += "/";
19 | }
20 |
21 | return str;
22 | }
23 |
--------------------------------------------------------------------------------
/src/utils/sso.ts:
--------------------------------------------------------------------------------
1 | import { removeToken, setToken, type DataInfo } from "./auth";
2 | import { subBefore, getQueryMap } from "@pureadmin/utils";
3 |
4 | /**
5 | * 简版前端单点登录，根据实际业务自行编写
6 | * 划重点：
7 | * 判断是否为单点登录，不为则直接返回不再进行任何逻辑处理，下面是单点登录后的逻辑处理
8 | * 1.清空本地旧信息；
9 | * 2.获取url中的重要参数信息，然后通过 setToken 保存在本地；
10 | * 3.删除不需要显示在 url 的参数
11 | * 4.使用 window.location.replace 跳转正确页面
12 | */
13 | (function () {
14 | // 获取 url 中的参数
15 | const params = getQueryMap(location.href) as DataInfo;
16 | const must = ["username", "roles", "accessToken"];
17 | const mustLength = must.length;
18 | if (Object.keys(params).length !== mustLength) return;
19 |
20 | // url 参数满足 must 里的全部值，才判定为单点登录，避免非单点登录时刷新页面无限循环
21 | let sso = [];
22 | let start = 0;
23 |
24 | while (start < mustLength) {
25 | if (Object.keys(params).includes(must[start]) && sso.length <= mustLength) {
26 | sso.push(must[start]);
27 | } else {
28 | sso = [];
29 | }
30 | start++;
31 | }
32 |
33 | if (sso.length === mustLength) {
34 | // 判定为单点登录
35 |
36 | // 清空本地旧信息
37 | removeToken();
38 |
39 | // 保存新信息到本地
40 | setToken(params);
41 |
42 | // 删除不需要显示在 url 的参数
43 | delete params["roles"];
44 | delete params["accessToken"];
45 |
46 | const newUrl = `${location.origin}${location.pathname}${subBefore(
47 | location.hash,
48 | "?"
49 | )}?${JSON.stringify(params)
50 | .replace(/["{}]/g, "")
51 | .replace(/:/g, "=")
52 | .replace(/,/g, "&")}`;
53 |
54 | // 替换历史记录项
55 | window.location.replace(newUrl);
56 | } else {
57 | return;
58 | }
59 | })();
60 |
--------------------------------------------------------------------------------
/src/views/error/403.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
13 |
14 |
29 | 403
30 |
31 |
46 | 抱歉，你无权访问该页面
47 |
48 |
63 | 返回首页
64 |
65 |
66 |
68 |
--------------------------------------------------------------------------------
/src/views/error/404.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
31 | 404
32 |
33 |
48 | 抱歉，你访问的页面不存在
49 |
50 |
66 | 返回首页
67 |
68 |
69 |
71 |
--------------------------------------------------------------------------------
/src/views/error/500.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
31 | 500
32 |
33 |
48 | 抱歉，服务器出错了
49 |
50 |
66 | 返回首页
67 |
68 |
69 |
71 |
--------------------------------------------------------------------------------
/src/views/login/components/qrCode.vue:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 |
17 |
18 |
19 | {{ '扫码后点击"确认",即可完成登录' }}
20 |
21 |
22 |
23 |
24 | 返回
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/views/login/utils/enums.ts:
--------------------------------------------------------------------------------
1 | const operates = [
2 | {
3 | title: "手机登录",
4 | page: 1
5 | },
6 | {
7 | title: "二维码登录",
8 | page: 2
9 | },
10 | {
11 | title: "注册",
12 | page: 3
13 | }
14 | ];
15 |
16 | const thirdParty = [
17 | {
18 | title: "微信登录",
19 | icon: "wechat"
20 | },
21 | {
22 | title: "支付宝登录",
23 | icon: "alipay"
24 | },
25 | {
26 | title: "QQ登录",
27 | icon: "qq"
28 | },
29 | {
30 | title: "微博登录",
31 | icon: "weibo"
32 | }
33 | ];
34 |
35 | export { operates, thirdParty };
36 |
--------------------------------------------------------------------------------
/src/views/login/utils/motion.ts:
--------------------------------------------------------------------------------
1 | import { h, defineComponent, withDirectives, resolveDirective } from "vue";
2 |
3 | /** 封装@vueuse/motion动画库中的自定义指令v-motion */
4 | export default defineComponent({
5 | name: "Motion",
6 | props: {
7 | delay: {
8 | type: Number,
9 | default: 50
10 | }
11 | },
12 | render() {
13 | const { delay } = this;
14 | const motion = resolveDirective("motion");
15 | return withDirectives(
16 | h(
17 | "div",
18 | {},
19 | {
20 | default: () => [this.$slots.default()]
21 | }
22 | ),
23 | [
24 | [
25 | motion,
26 | {
27 | initial: { opacity: 0, y: 100 },
28 | enter: {
29 | opacity: 1,
30 | y: 0,
31 | transition: {
32 | delay
33 | }
34 | }
35 | }
36 | ]
37 | ]
38 | );
39 | }
40 | });
41 |
--------------------------------------------------------------------------------
/src/views/login/utils/static.ts:
--------------------------------------------------------------------------------
1 | import bg from "@/assets/login/bg.png";
2 | import avatar from "@/assets/login/avatar.svg?component";
3 | import illustration from "@/assets/login/illustration.svg?component";
4 |
5 | export { bg, avatar, illustration };
6 |
--------------------------------------------------------------------------------
/src/views/login/utils/verifyCode.ts:
--------------------------------------------------------------------------------
1 | import type { FormInstance, FormItemProp } from "element-plus";
2 | import { clone } from "@pureadmin/utils";
3 | import { ref } from "vue";
4 |
5 | const isDisabled = ref(false);
6 | const timer = ref(null);
7 | const text = ref("");
8 |
9 | export const useVerifyCode = () => {
10 | const start = async (
11 | formEl: FormInstance | undefined,
12 | props: FormItemProp,
13 | time = 60
14 | ) => {
15 | if (!formEl) return;
16 | const initTime = clone(time, true);
17 | await formEl.validateField(props, isValid => {
18 | if (isValid) {
19 | clearInterval(timer.value);
20 | isDisabled.value = true;
21 | text.value = `${time}`;
22 | timer.value = setInterval(() => {
23 | if (time > 0) {
24 | time -= 1;
25 | text.value = `${time}`;
26 | } else {
27 | text.value = "";
28 | isDisabled.value = false;
29 | clearInterval(timer.value);
30 | time = initTime;
31 | }
32 | }, 1000);
33 | }
34 | });
35 | };
36 |
37 | const end = () => {
38 | text.value = "";
39 | isDisabled.value = false;
40 | clearInterval(timer.value);
41 | };
42 |
43 | return {
44 | isDisabled,
45 | timer,
46 | text,
47 | start,
48 | end
49 | };
50 | };
51 |
--------------------------------------------------------------------------------
/src/views/permission/button/index.vue:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
20 | 当前拥有的code列表：{{ getAuths() }}
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | 拥有code：'btn_add' 权限可见
29 |
30 |
31 | 拥有code：['btn_edit'] 权限可见
32 |
33 |
34 |
35 | 拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | 拥有code：'btn_add' 权限可见
46 |
47 |
48 | 拥有code：['btn_edit'] 权限可见
49 |
50 |
54 | 拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
55 |
56 |
57 |
58 |
59 |
60 |
63 |
64 |
65 | 拥有code：'btn_add' 权限可见
66 |
67 |
68 | 拥有code：['btn_edit'] 权限可见
69 |
70 |
71 | 拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
72 |
73 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/src/views/permission/page/index.vue:
--------------------------------------------------------------------------------
1 |
44 |
45 |
46 |
47 |
48 | 模拟后台根据不同角色返回对应路由（具体参考完整版pure-admin代码）
49 |
50 |
51 |
52 |
55 |
56 |
57 |
64 |
65 |
66 |
67 |
--------------------------------------------------------------------------------
/src/views/system/config/form.vue:
--------------------------------------------------------------------------------
1 |
27 |
28 |
29 |
35 |
36 |
43 |
44 |
51 |
52 |
53 |
60 |
67 |
73 |
74 |
81 |
88 |
89 |
90 |
97 |
98 |
99 |
--------------------------------------------------------------------------------
/src/views/system/config/utils/rule.ts:
--------------------------------------------------------------------------------
1 | import { reactive } from "vue";
2 | import type { FormRules } from "element-plus";
3 |
4 | /** 自定义表单规则校验 */
5 | export const formRules = reactive({
6 | configValue: [
7 | { required: true, message: "角色名称为必填项", trigger: "blur" }
8 | ]
9 | });
10 |
--------------------------------------------------------------------------------
/src/views/system/dept/utils/rule.ts:
--------------------------------------------------------------------------------
1 | import { reactive } from "vue";
2 | import type { FormRules } from "element-plus";
3 | import { isPhone, isEmail } from "@pureadmin/utils";
4 |
5 | /** 自定义表单规则校验 */
6 | export const formRules = reactive({
7 | name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
8 | phone: [
9 | {
10 | validator: (rule, value, callback) => {
11 | if (value === "") {
12 | callback();
13 | } else if (!isPhone(value)) {
14 | callback(new Error("请输入正确的手机号码格式"));
15 | } else {
16 | callback();
17 | }
18 | },
19 | trigger: "blur"
20 | // trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
21 | }
22 | ],
23 | email: [
24 | {
25 | validator: (rule, value, callback) => {
26 | if (value === "") {
27 | callback();
28 | } else if (!isEmail(value)) {
29 | callback(new Error("请输入正确的邮箱格式"));
30 | } else {
31 | callback();
32 | }
33 | },
34 | trigger: "blur"
35 | }
36 | ]
37 | });
38 |
--------------------------------------------------------------------------------
/src/views/system/hooks.ts:
--------------------------------------------------------------------------------
1 | // 抽离可公用的工具函数等用于系统管理页面逻辑
2 | import { computed } from "vue";
3 | import { useDark } from "@pureadmin/utils";
4 |
5 | export function usePublicHooks() {
6 | const { isDark } = useDark();
7 |
8 | const switchStyle = computed(() => {
9 | return {
10 | "--el-switch-on-color": "#6abe39",
11 | "--el-switch-off-color": "#e84749"
12 | };
13 | });
14 |
15 | const tagStyle = computed(() => {
16 | return (status: number) => {
17 | return status === 1
18 | ? {
19 | "--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
20 | "--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
21 | "--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
22 | }
23 | : {
24 | "--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
25 | "--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
26 | "--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
27 | };
28 | };
29 | });
30 |
31 | return {
32 | /** 当前网页是否为`dark`模式 */
33 | isDark,
34 | /** 表现更鲜明的`el-switch`组件 */
35 | switchStyle,
36 | /** 表现更鲜明的`el-tag`组件 */
37 | tagStyle
38 | };
39 | }
40 |
--------------------------------------------------------------------------------
/src/views/system/log/operationLog/description.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
20 |
21 | {{
22 | props.operationId
23 | }}
24 | {{
25 | props.requestModule
26 | }}
27 | {{
28 | props.businessTypeStr
29 | }}
30 | {{
31 | props.username
32 | }}
33 | {{
34 | props.userId
35 | }}
36 | {{
37 | props.operatorTypeStr
38 | }}
39 | {{
40 | props.deptName
41 | }}
42 | {{
43 | props.operatorIp
44 | }}
45 | {{
46 | props.operatorLocation
47 | }}
48 |
49 | {{
50 | props.requestUrl
51 | }}
52 | {{
53 | props.requestMethod
54 | }}
55 |
56 |
57 |
58 | {{ props.operationParam }}
59 |
60 |
61 |
62 |
63 | {{ props.calledMethod }}
64 |
65 |
66 |
67 |
68 | {{ props.operationResult }}
69 |
70 |
71 |
72 |
73 | {{ props.errorStack }}
74 |
75 |
76 |
81 | {{ operationLogStatusMap[props.status].label }}
82 | {{
85 | props.operationTime
86 | }}
87 |
88 |
89 |
94 |
--------------------------------------------------------------------------------
/src/views/system/menu/utils/menuLogic.ts:
--------------------------------------------------------------------------------
1 | import { isUrl } from "@pureadmin/utils";
2 | import { MenuRequest } from "@/api/system/menu";
3 | import { getNodeByUniqueId } from "@/utils/tree";
4 | import { CommonUtils } from "@/utils/common";
5 |
6 | /**
7 | * 因为动态路由的逻辑基本上完全依赖前端
8 | * 所以需要将菜单的数据转换为标准的路由数据
9 | * @param data
10 | * @param menuTree
11 | */
12 | export function transferToStandardRouterData(data: MenuRequest, menuTree: any) {
13 | // 将菜单名称赋值给meta.title
14 | if (data.menuName && data.meta) {
15 | data.meta.title = data.menuName;
16 | }
17 |
18 | // 如果是页面和目录的话 path如果没有/开头 就自动加上
19 | if (data.menuType == 1 || data.menuType == 2) {
20 | if (data.path && !data.path.startsWith("/")) {
21 | data.path = `/${data.path}`;
22 | }
23 | }
24 |
25 | // 如果当前菜单是父菜单的唯一节点 记得将当前菜单的showParent=true
26 | const parentMenu = getNodeByUniqueId(menuTree, data.parentId);
27 | // 按钮不需要显示父菜单
28 | if (parentMenu && !data.isButton) {
29 | if (!parentMenu.children || parentMenu.children.length === 0) {
30 | data.meta.showParent = true;
31 | }
32 | }
33 |
34 | // 如果是内嵌iframe的话
35 | if (data.menuType == 3) {
36 | //检测meta.frameSrc是否是以Http/Https开头的 如果不是的话自动补全
37 | if (data.menuType == 3 && data.meta && data.meta.frameSrc) {
38 | if (!isUrl(data.meta.frameSrc)) {
39 | // 如果链接是/开头 则认为是内部链接, 打上内部链接标记即可
40 | if (data.meta.frameSrc.startsWith("/")) {
41 | data.meta.isFrameSrcInternal = true;
42 | } else {
43 | data.meta.frameSrc = `http://${data.meta.frameSrc}`;
44 | }
45 | }
46 | }
47 |
48 | const pinyinStr = CommonUtils.toPinyin(data.menuName);
49 | data.path = `/${pinyinStr}IframeLink`;
50 | data.routerName = `${pinyinStr}IframeRouter`;
51 | }
52 |
53 | // 如果是外链跳转的话 需要自动设置他的path 按照外链跳转的规则 必须设置成/external
54 | // 详见https://github.com/pure-admin/vue-pure-admin/issues/664
55 | // 这里我们直接以菜单名转拼音的方式生成
56 | if (data.meta && data.menuType == 4) {
57 | if (!isUrl(data.routerName)) {
58 | data.routerName = `http://${data.routerName}`;
59 | }
60 | data.path = `/external`;
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/views/system/menu/utils/rule.ts:
--------------------------------------------------------------------------------
1 | import { reactive } from "vue";
2 | import type { FormRules } from "element-plus";
3 | import { isPhone, isEmail } from "@pureadmin/utils";
4 |
5 | /** 自定义表单规则校验 */
6 | export const formRules = reactive({
7 | name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
8 | phone: [
9 | {
10 | validator: (rule, value, callback) => {
11 | if (value === "") {
12 | callback();
13 | } else if (!isPhone(value)) {
14 | callback(new Error("请输入正确的手机号码格式"));
15 | } else {
16 | callback();
17 | }
18 | },
19 | trigger: "blur"
20 | // trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
21 | }
22 | ],
23 | email: [
24 | {
25 | validator: (rule, value, callback) => {
26 | if (value === "") {
27 | callback();
28 | } else if (!isEmail(value)) {
29 | callback(new Error("请输入正确的邮箱格式"));
30 | } else {
31 | callback();
32 | }
33 | },
34 | trigger: "blur"
35 | }
36 | ]
37 | });
38 |
--------------------------------------------------------------------------------
/src/views/system/monitor/hooks.ts:
--------------------------------------------------------------------------------
1 | // 抽离可公用的工具函数等用于系统管理页面逻辑
2 | import { computed } from "vue";
3 | import { useDark } from "@pureadmin/utils";
4 |
5 | export function usePublicHooks() {
6 | const { isDark } = useDark();
7 |
8 | const switchStyle = computed(() => {
9 | return {
10 | "--el-switch-on-color": "#6abe39",
11 | "--el-switch-off-color": "#e84749"
12 | };
13 | });
14 |
15 | const tagStyle = computed(() => {
16 | return (status: number) => {
17 | return status === 1
18 | ? {
19 | "--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
20 | "--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
21 | "--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
22 | }
23 | : {
24 | "--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
25 | "--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
26 | "--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
27 | };
28 | };
29 | });
30 |
31 | return {
32 | /** 当前网页是否为`dark`模式 */
33 | isDark,
34 | /** 表现更鲜明的`el-switch`组件 */
35 | switchStyle,
36 | /** 表现更鲜明的`el-tag`组件 */
37 | tagStyle
38 | };
39 | }
40 |
--------------------------------------------------------------------------------
/src/views/system/notice/form.vue:
--------------------------------------------------------------------------------
1 |
27 |
28 |
29 |
35 |
36 |
42 |
43 |
44 |
50 |
59 |
60 |
61 |
67 |
74 |
75 |
76 |
77 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/src/views/system/notice/utils/rule.ts:
--------------------------------------------------------------------------------
1 | import { reactive } from "vue";
2 | import type { FormRules } from "element-plus";
3 |
4 | /** 自定义表单规则校验 */
5 | export const formRules = reactive({
6 | name: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
7 | code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
8 | });
9 |
--------------------------------------------------------------------------------
/src/views/system/notice/utils/types.ts:
--------------------------------------------------------------------------------
1 | interface AddNoticeRequest {
2 | noticeId?: number;
3 | /** 公告标题 */
4 | noticeTitle: string;
5 | /** 角色编号 */
6 | noticeType: string;
7 | /** 备注 */
8 | status: string;
9 | /** 备注 */
10 | noticeContent: string;
11 | }
12 |
13 | interface FormProps {
14 | formInline: AddNoticeRequest;
15 | }
16 |
17 | export type { AddNoticeRequest, FormProps };
18 |
--------------------------------------------------------------------------------
/src/views/system/user/passwordForm.vue:
--------------------------------------------------------------------------------
1 |
28 |
29 |
30 |
36 |
37 |
38 |
39 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/src/views/system/user/profile/resetPwd.vue:
--------------------------------------------------------------------------------
1 |
57 |
58 |
59 |
60 |
61 |
68 |
69 |
76 |
77 |
84 |
85 | 保存
86 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/src/views/system/user/profile/userInfo.vue:
--------------------------------------------------------------------------------
1 |
67 |
68 |
69 |
70 |
71 |
73 |
74 |
76 |
77 |
79 |
80 |
81 | 男
82 | 女
83 |
84 |
85 |
86 | 保存
87 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/src/views/system/user/rule.ts:
--------------------------------------------------------------------------------
1 | import { reactive } from "vue";
2 | import type { FormRules } from "element-plus";
3 | import { isPhone, isEmail } from "@pureadmin/utils";
4 |
5 | /** 自定义表单规则校验 */
6 | export const formRules = reactive({
7 | name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
8 | phone: [
9 | {
10 | validator: (rule, value, callback) => {
11 | if (value === "") {
12 | callback();
13 | } else if (!isPhone(value)) {
14 | callback(new Error("请输入正确的手机号码格式"));
15 | } else {
16 | callback();
17 | }
18 | },
19 | trigger: "blur"
20 | // trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
21 | }
22 | ],
23 | email: [
24 | {
25 | validator: (rule, value, callback) => {
26 | if (value === "") {
27 | callback();
28 | } else if (!isEmail(value)) {
29 | callback(new Error("请输入正确的邮箱格式"));
30 | } else {
31 | callback();
32 | }
33 | },
34 | trigger: "blur"
35 | }
36 | ]
37 | });
38 |
--------------------------------------------------------------------------------
/src/views/system/user/svg/expand.svg:
--------------------------------------------------------------------------------
1 |
56 |
68 | 将文件拖到此处，或点击上传
70 |
71 |
72 | 仅允许导入xls、xlsx格式文件。
73 | 下载模板
80 |
81 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/src/views/welcome/index.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Agileboot前端预览
9 |
10 |
--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | extends: [
4 | "stylelint-config-standard",
5 | "stylelint-config-html/vue",
6 | "stylelint-config-recess-order"
7 | ],
8 | plugins: ["stylelint-order", "stylelint-prettier", "stylelint-scss"],
9 | overrides: [
10 | {
11 | files: ["**/*.(css|html|vue)"],
12 | customSyntax: "postcss-html"
13 | },
14 | {
15 | files: ["*.scss", "**/*.scss"],
16 | customSyntax: "postcss-scss",
17 | extends: [
18 | "stylelint-config-standard-scss",
19 | "stylelint-config-recommended-vue/scss"
20 | ]
21 | }
22 | ],
23 | rules: {
24 | "selector-class-pattern": null,
25 | "no-descending-specificity": null,
26 | "scss/dollar-variable-pattern": null,
27 | "selector-pseudo-class-no-unknown": [
28 | true,
29 | {
30 | ignorePseudoClasses: ["deep", "global"]
31 | }
32 | ],
33 | "selector-pseudo-element-no-unknown": [
34 | true,
35 | {
36 | ignorePseudoElements: ["v-deep", "v-global", "v-slotted"]
37 | }
38 | ],
39 | "at-rule-no-unknown": [
40 | true,
41 | {
42 | ignoreAtRules: [
43 | "tailwind",
44 | "apply",
45 | "variants",
46 | "responsive",
47 | "screen",
48 | "function",
49 | "if",
50 | "each",
51 | "include",
52 | "mixin",
53 | "use"
54 | ]
55 | }
56 | ],
57 | "rule-empty-line-before": [
58 | "always",
59 | {
60 | ignore: ["after-comment", "first-nested"]
61 | }
62 | ],
63 | "unit-no-unknown": [true, { ignoreUnits: ["rpx"] }],
64 | "order/order": [
65 | [
66 | "dollar-variables",
67 | "custom-properties",
68 | "at-rules",
69 | "declarations",
70 | {
71 | type: "at-rule",
72 | name: "supports"
73 | },
74 | {
75 | type: "at-rule",
76 | name: "media"
77 | },
78 | "rules"
79 | ],
80 | { severity: "warning" }
81 | ]
82 | },
83 | ignoreFiles: ["**/*.js", "**/*.ts", "**/*.jsx", "**/*.tsx"]
84 | };
85 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | darkMode: "class",
4 | corePlugins: {
5 | preflight: false
6 | },
7 | content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
8 | theme: {
9 | extend: {
10 | colors: {
11 | bg_color: "var(--el-bg-color)",
12 | primary: "var(--el-color-primary)",
13 | text_color_primary: "var(--el-text-color-primary)",
14 | text_color_regular: "var(--el-text-color-regular)"
15 | }
16 | }
17 | }
18 | };
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "moduleResolution": "Node",
6 | "strict": false,
7 | "jsx": "preserve",
8 | "importHelpers": true,
9 | "experimentalDecorators": true,
10 | "strictFunctionTypes": false,
11 | "skipLibCheck": true,
12 | "esModuleInterop": true,
13 | "isolatedModules": true,
14 | "allowSyntheticDefaultImports": true,
15 | "forceConsistentCasingInFileNames": true,
16 | "sourceMap": true,
17 | "baseUrl": ".",
18 | "allowJs": false,
19 | "resolveJsonModule": true,
20 | "lib": ["dom", "esnext"],
21 | "paths": {
22 | "@/*": ["src/*"],
23 | "@build/*": ["build/*"]
24 | },
25 | "types": [
26 | "node",
27 | "vite/client",
28 | "element-plus/global",
29 | "@pureadmin/table/volar",
30 | "@pureadmin/descriptions/volar"
31 | ]
32 | },
33 | "include": [
34 | "mock/*.ts",
35 | "src/**/*.ts",
36 | "src/**/*.tsx",
37 | "src/**/*.vue",
38 | "types/*.d.ts",
39 | "vite.config.ts"
40 | ],
41 | "exclude": ["dist", "**/*.js", "node_modules"]
42 | }
43 |
--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
1 | // 此文件跟同级目录的 global.d.ts 文件一样也是全局类型声明，只不过这里存放一些零散的全局类型，无需引入直接在 .vue 、.ts 、.tsx 文件使用即可获得类型提示
2 |
3 | type RefType = T | null;
4 |
5 | type EmitType = (event: string, ...args: any[]) => void;
6 |
7 | type TargetContext = "_self" | "_blank";
8 |
9 | type ComponentRef =
10 | ComponentElRef | null;
11 |
12 | type ElRef = Nullable;
13 |
14 | type ForDataType = {
15 | [P in T]?: ForDataType;
16 | };
17 |
18 | type AnyFunction = (...args: any[]) => T;
19 |
20 | type PropType = VuePropType;
21 |
22 | type Writable = {
23 | -readonly [P in keyof T]: T[P];
24 | };
25 |
26 | type Nullable = T | null;
27 |
28 | type NonNullable = T extends null | undefined ? never : T;
29 |
30 | type Recordable = Record;
31 |
32 | type ReadonlyRecordable = {
33 | readonly [key: string]: T;
34 | };
35 |
36 | type Indexable = {
37 | [key: string]: T;
38 | };
39 |
40 | type DeepPartial = {
41 | [P in keyof T]?: DeepPartial;
42 | };
43 |
44 | type Without = { [P in Exclude]?: never };
45 |
46 | type Exclusive = (Without & U) | (Without & T);
47 |
48 | type TimeoutHandle = ReturnType;
49 |
50 | type IntervalHandle = ReturnType;
51 |
52 | type ResponseData = {
53 | code: number;
54 | msg: string;
55 | data: T;
56 | };
57 |
58 | type PageDTO = {
59 | total: number;
60 | rows: Array;
61 | };
62 |
63 | interface BasePageQuery extends BaseQuery {
64 | pageNum?: number;
65 | pageSize?: number;
66 | }
67 |
68 | interface BaseQuery {
69 | beginTime?: string;
70 | endTime?: string;
71 | orderColumn?: string;
72 | orderDirection?: string;
73 | timeRangeColumn?: string;
74 | }
75 |
76 | type Effect = "light" | "dark";
77 |
78 | interface ChangeEvent extends Event {
79 | target: HTMLInputElement;
80 | }
81 |
82 | interface WheelEvent {
83 | path?: EventTarget[];
84 | }
85 |
86 | interface ImportMetaEnv extends ViteEnv {
87 | __: unknown;
88 | }
89 |
90 | interface Fn {
91 | (...arg: T[]): R;
92 | }
93 |
94 | interface PromiseFn {
95 | (...arg: T[]): Promise;
96 | }
97 |
98 | interface ComponentElRef {
99 | $el: T;
100 | }
101 |
102 | function parseInt(s: string | number, radix?: number): number;
103 |
104 | function parseFloat(string: string | number): number;
105 |
--------------------------------------------------------------------------------
/types/shims-tsx.d.ts:
--------------------------------------------------------------------------------
1 | import Vue, { VNode } from "vue";
2 |
3 | declare module "*.tsx" {
4 | import Vue from "compatible-vue";
5 | export default Vue;
6 | }
7 |
8 | declare global {
9 | namespace JSX {
10 | interface Element extends VNode {}
11 | interface ElementClass extends Vue {}
12 | interface ElementAttributesProperty {
13 | $props: any;
14 | }
15 | interface IntrinsicElements {
16 | [elem: string]: any;
17 | }
18 | interface IntrinsicAttributes {
19 | [elem: string]: any;
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/types/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 | import { DefineComponent } from "vue";
3 | const component: DefineComponent<{}, {}, any>;
4 | export default component;
5 | }
6 |
7 | declare module "*.scss" {
8 | const scss: Record;
9 | export default scss;
10 | }
11 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import dayjs from "dayjs";
2 | import { resolve } from "path";
3 | import pkg from "./package.json";
4 | import { wrapperEnv } from "./build";
5 | import { getPluginsList } from "./build/plugins";
6 | import { include, exclude } from "./build/optimize";
7 | import { UserConfigExport, ConfigEnv, loadEnv } from "vite";
8 |
9 | /** 当前执行node命令时文件夹的地址（工作目录） */
10 | const root: string = process.cwd();
11 |
12 | /** 路径查找 */
13 | const pathResolve = (dir: string): string => {
14 | return resolve(__dirname, ".", dir);
15 | };
16 |
17 | /** 设置别名 */
18 | const alias: Record = {
19 | "@": pathResolve("src"),
20 | "@build": pathResolve("build")
21 | };
22 |
23 | const { dependencies, devDependencies, name, version } = pkg;
24 | const __APP_INFO__ = {
25 | pkg: { dependencies, devDependencies, name, version },
26 | lastBuildTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
27 | };
28 |
29 | export default ({ command, mode }: ConfigEnv): UserConfigExport => {
30 | const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } =
31 | wrapperEnv(loadEnv(mode, root));
32 | return {
33 | base: VITE_PUBLIC_PATH,
34 | root,
35 | resolve: {
36 | alias
37 | },
38 | // 服务端渲染
39 | server: {
40 | // 是否开启 https
41 | https: false,
42 | // 端口号
43 | port: VITE_PORT,
44 | host: "0.0.0.0",
45 | // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
46 | proxy: {
47 | "/dev-api": {
48 | target: "http://localhost:8080",
49 | changeOrigin: true,
50 | rewrite: path => path.replace(/^\/dev-api/, "")
51 | }
52 | }
53 | },
54 | plugins: getPluginsList(command, VITE_CDN, VITE_COMPRESSION),
55 | // https://cn.vitejs.dev/config/dep-optimization-options.html#dep-optimization-options
56 | optimizeDeps: {
57 | include,
58 | exclude
59 | },
60 | build: {
61 | sourcemap: false,
62 | // 消除打包大小超过500kb警告
63 | chunkSizeWarningLimit: 4000,
64 | rollupOptions: {
65 | input: {
66 | index: pathResolve("index.html")
67 | },
68 | // 静态资源分类打包
69 | output: {
70 | chunkFileNames: "static/js/[name]-[hash].js",
71 | entryFileNames: "static/js/[name]-[hash].js",
72 | assetFileNames: "static/[ext]/[name]-[hash].[ext]"
73 | }
74 | }
75 | },
76 | define: {
77 | __INTLIFY_PROD_DEVTOOLS__: false,
78 | __APP_INFO__: JSON.stringify(__APP_INFO__)
79 | }
80 | };
81 | };
82 |
--------------------------------------------------------------------------------
41 | {{ title }}
42 |