+
+## 用法
+
+### 安装依赖
+
+pnpm install
+
+### 安装一个包
+
+pnpm add 包名
+
+### 卸载一个包
+
+pnpm remove 包名
+
+我认为你应该先 `fork` 项目去开发，以便我更新时您可以同步拉取更新！！！
+
+## ⚠️ 注意
+
+- 精简版不接受任何 `issues` 和 `pr`，如果有问题请到完整版 [issues](https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose) 去提，谢谢！！！
+
+## 许可证
+
+原则上不收取任何费用及版权，可以放心使用，不过如需二次开源（比如用此平台二次开发并开源）请联系作者获取许可！
+
+[MIT © xiaoxian521-2020](./LICENSE)
diff --git a/build/cdn.ts b/build/cdn.ts
new file mode 100644
index 0000000..abf71b7
--- /dev/null
+++ b/build/cdn.ts
@@ -0,0 +1,62 @@
+import { Plugin as importToCDN } from "vite-plugin-cdn-import";
+
+/**
+ * @description 打包时采用`cdn`模式，仅限外网使用（默认不采用，如果需要采用cdn模式，请在 .env.production 文件，将 VITE_CDN 设置成true）
+ * 平台采用国内cdn：https://www.bootcdn.cn，当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
+ * 提醒：mockjs不能用cdn模式引入，会报错。正确的方式是，生产环境删除mockjs，使用真实的后端请求
+ * 注意：上面提到的仅限外网使用也不是完全肯定的，如果你们公司内网部署的有相关js、css文件，也可以将下面配置对应改一下，整一套内网版cdn
+ */
+export const cdn = importToCDN({
+ //（prodUrl解释： name: 对应下面modules的name，version: 自动读取本地package.json中dependencies依赖中对应包的版本号，path: 对应下面modules的path）
+ prodUrl: "https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}",
+ modules: [
+ {
+ name: "vue",
+ var: "Vue",
+ path: "vue.global.prod.min.js"
+ },
+ {
+ name: "vue-router",
+ var: "VueRouter",
+ path: "vue-router.global.min.js"
+ },
+ // 项目中没有直接安装vue-demi，但是pinia用到了，所以需要在引入pinia前引入vue-demi（https://github.com/vuejs/pinia/blob/v2/packages/pinia/package.json#L77）
+ {
+ name: "vue-demi",
+ var: "VueDemi",
+ path: "index.iife.min.js"
+ },
+ {
+ name: "pinia",
+ var: "Pinia",
+ path: "pinia.iife.min.js"
+ },
+ {
+ name: "element-plus",
+ var: "ElementPlus",
+ path: "index.full.min.js",
+ css: "index.min.css"
+ },
+ {
+ name: "axios",
+ var: "axios",
+ path: "axios.min.js"
+ },
+ {
+ name: "dayjs",
+ var: "dayjs",
+ path: "dayjs.min.js"
+ },
+ {
+ name: "echarts",
+ var: "echarts",
+ path: "echarts.min.js"
+ },
+ {
+ name: "lodash",
+ var: "lodash",
+ // 可写`完整路径`，会替换`prodUrl`
+ path: "https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"
+ }
+ ]
+});
diff --git a/build/compress.ts b/build/compress.ts
new file mode 100644
index 0000000..6178986
--- /dev/null
+++ b/build/compress.ts
@@ -0,0 +1,63 @@
+import type { Plugin } from "vite";
+import { isArray } from "@pureadmin/utils";
+import compressPlugin from "vite-plugin-compression";
+
+export const configCompressPlugin = (
+ compress: ViteCompression
+): Plugin | Plugin[] => {
+ if (compress === "none") return null;
+
+ const gz = {
+ // 生成的压缩包后缀
+ ext: ".gz",
+ // 体积大于threshold才会被压缩
+ threshold: 0,
+ // 默认压缩.js|mjs|json|css|html后缀文件，设置成true，压缩全部文件
+ filter: () => true,
+ // 压缩后是否删除原始文件
+ deleteOriginFile: false
+ };
+ const br = {
+ ext: ".br",
+ algorithm: "brotliCompress",
+ threshold: 0,
+ filter: () => true,
+ deleteOriginFile: false
+ };
+
+ const codeList = [
+ { k: "gzip", v: gz },
+ { k: "brotli", v: br },
+ { k: "both", v: [gz, br] }
+ ];
+
+ const plugins: Plugin[] = [];
+
+ codeList.forEach(item => {
+ if (compress.includes(item.k)) {
+ if (compress.includes("clear")) {
+ if (isArray(item.v)) {
+ item.v.forEach(vItem => {
+ plugins.push(
+ compressPlugin(Object.assign(vItem, { deleteOriginFile: true }))
+ );
+ });
+ } else {
+ plugins.push(
+ compressPlugin(Object.assign(item.v, { deleteOriginFile: true }))
+ );
+ }
+ } else {
+ if (isArray(item.v)) {
+ item.v.forEach(vItem => {
+ plugins.push(compressPlugin(vItem));
+ });
+ } else {
+ plugins.push(compressPlugin(item.v));
+ }
+ }
+ }
+ });
+
+ return plugins;
+};
diff --git a/build/index.ts b/build/index.ts
new file mode 100644
index 0000000..ed7cdfb
--- /dev/null
+++ b/build/index.ts
@@ -0,0 +1,43 @@
+/** 处理环境变量 */
+const warpperEnv = (envConf: Recordable): ViteEnv => {
+ /** 此处为默认值，无需修改 */
+ const ret: ViteEnv = {
+ VITE_PORT: 8848,
+ VITE_PUBLIC_PATH: "",
+ VITE_PROXY_DOMAIN: "",
+ VITE_PROXY_DOMAIN_REAL: "",
+ VITE_ROUTER_HISTORY: "",
+ VITE_LEGACY: false,
+ VITE_CDN: false,
+ VITE_COMPRESSION: "none"
+ };
+
+ for (const envName of Object.keys(envConf)) {
+ let realName = envConf[envName].replace(/\\n/g, "\n");
+ realName =
+ realName === "true" ? true : realName === "false" ? false : realName;
+
+ if (envName === "VITE_PORT") {
+ realName = Number(realName);
+ }
+ ret[envName] = realName;
+ if (typeof realName === "string") {
+ process.env[envName] = realName;
+ } else if (typeof realName === "object") {
+ process.env[envName] = JSON.stringify(realName);
+ }
+ }
+ return ret;
+};
+
+/** 跨域代理重写 */
+const regExps = (value: string, reg: string): string => {
+ return value.replace(new RegExp(`^${reg}`, "g"), "");
+};
+
+/** 环境变量 */
+const loadEnv = (): ViteEnv => {
+ return import.meta.env;
+};
+
+export { warpperEnv, regExps, loadEnv };
diff --git a/build/info.ts b/build/info.ts
new file mode 100644
index 0000000..42d9bf6
--- /dev/null
+++ b/build/info.ts
@@ -0,0 +1,50 @@
+import type { Plugin } from "vite";
+import dayjs, { Dayjs } from "dayjs";
+import duration from "dayjs/plugin/duration";
+import { green, blue, bold } from "picocolors";
+import { getPackageSize } from "@pureadmin/utils";
+dayjs.extend(duration);
+
+export function viteBuildInfo(): Plugin {
+ let config: { command: string };
+ let startTime: Dayjs;
+ let endTime: Dayjs;
+ return {
+ name: "vite:buildInfo",
+ configResolved(resolvedConfig: { command: string }) {
+ config = resolvedConfig;
+ },
+ buildStart() {
+ console.log(
+ bold(
+ green(
+ `👏欢迎使用${blue(
+ "[vue-pure-admin]"
+ )}，如果您感觉不错，记得点击后面链接给个star哦💖 https://github.com/xiaoxian521/vue-pure-admin`
+ )
+ )
+ );
+ if (config.command === "build") {
+ startTime = dayjs(new Date());
+ }
+ },
+ closeBundle() {
+ if (config.command === "build") {
+ endTime = dayjs(new Date());
+ getPackageSize({
+ callback: (size: string) => {
+ console.log(
+ bold(
+ green(
+ `🎉恭喜打包完成（总用时${dayjs
+ .duration(endTime.diff(startTime))
+ .format("mm分ss秒")}，打包后的大小为${size}）`
+ )
+ )
+ );
+ }
+ });
+ }
+ }
+ };
+}
diff --git a/build/plugins.ts b/build/plugins.ts
new file mode 100644
index 0000000..4253c91
--- /dev/null
+++ b/build/plugins.ts
@@ -0,0 +1,74 @@
+import { cdn } from "./cdn";
+import vue from "@vitejs/plugin-vue";
+import { viteBuildInfo } from "./info";
+import svgLoader from "vite-svg-loader";
+import legacy from "@vitejs/plugin-legacy";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import { viteMockServe } from "vite-plugin-mock";
+import { configCompressPlugin } from "./compress";
+// import ElementPlus from "unplugin-element-plus/vite";
+import { visualizer } from "rollup-plugin-visualizer";
+import removeConsole from "vite-plugin-remove-console";
+import themePreprocessorPlugin from "@pureadmin/theme";
+import DefineOptions from "unplugin-vue-define-options/vite";
+import { genScssMultipleScopeVars } from "../src/layout/theme";
+
+export function getPluginsList(
+ command: string,
+ VITE_LEGACY: boolean,
+ VITE_CDN: boolean,
+ VITE_COMPRESSION: ViteCompression
+) {
+ const prodMock = true;
+ const lifecycle = process.env.npm_lifecycle_event;
+ return [
+ vue(),
+ // jsx、tsx语法支持
+ vueJsx(),
+ VITE_CDN ? cdn : null,
+ configCompressPlugin(VITE_COMPRESSION),
+ DefineOptions(),
+ // 线上环境删除console
+ removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
+ viteBuildInfo(),
+ // 自定义主题
+ themePreprocessorPlugin({
+ scss: {
+ multipleScopeVars: genScssMultipleScopeVars(),
+ // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
+ extract: true,
+ // 会选取defaultScopeName对应的主题css文件在html添加link
+ themeLinkTagId: "head",
+ // "head"||"head-prepend" || "body" ||"body-prepend"
+ themeLinkTagInjectTo: "head",
+ // 是否对抽取的css文件内对应scopeName的权重类名移除
+ removeCssScopeName: false
+ }
+ }),
+ // svg组件化支持
+ svgLoader(),
+ // ElementPlus({}),
+ // mock支持
+ viteMockServe({
+ mockPath: "mock",
+ localEnabled: command === "serve",
+ prodEnabled: command !== "serve" && prodMock,
+ injectCode: `
+ import { setupProdMockServer } from './mockProdServer';
+ setupProdMockServer();
+ `,
+ logger: false
+ }),
+ // 是否为打包后的文件提供传统浏览器兼容性支持
+ VITE_LEGACY
+ ? legacy({
+ targets: ["ie >= 11"],
+ additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
+ })
+ : null,
+ // 打包分析
+ lifecycle === "report"
+ ? visualizer({ open: true, brotliSize: true, filename: "report.html" })
+ : null
+ ];
+}
diff --git a/commitlint.config.js b/commitlint.config.js
new file mode 100644
index 0000000..71bc373
--- /dev/null
+++ b/commitlint.config.js
@@ -0,0 +1,32 @@
+module.exports = {
+ ignores: [commit => commit.includes("init")],
+ extends: ["@commitlint/config-conventional"],
+ rules: {
+ "body-leading-blank": [2, "always"],
+ "footer-leading-blank": [1, "always"],
+ "header-max-length": [2, "always", 108],
+ "subject-empty": [2, "never"],
+ "type-empty": [2, "never"],
+ "type-enum": [
+ 2,
+ "always",
+ [
+ "feat",
+ "fix",
+ "perf",
+ "style",
+ "docs",
+ "test",
+ "refactor",
+ "build",
+ "ci",
+ "chore",
+ "revert",
+ "wip",
+ "workflow",
+ "types",
+ "release"
+ ]
+ ]
+ }
+};
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f8a332e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layout/components/notice/data.ts b/src/layout/components/notice/data.ts
new file mode 100644
index 0000000..14c7560
--- /dev/null
+++ b/src/layout/components/notice/data.ts
@@ -0,0 +1,146 @@
+export interface ListItem {
+ avatar: string;
+ title: string;
+ datetime: string;
+ type: string;
+ description: string;
+ status?: "" | "success" | "warning" | "info" | "danger";
+ extra?: string;
+}
+
+export interface TabItem {
+ key: string;
+ name: string;
+ list: ListItem[];
+}
+
+export const noticesData: TabItem[] = [
+ {
+ key: "1",
+ name: "通知",
+ list: [
+ {
+ avatar:
+ "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
+ title: "你收到了 12 份新周报",
+ datetime: "一年前",
+ description: "",
+ type: "1"
+ },
+ {
+ avatar:
+ "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
+ title: "你推荐的 前端高手 已通过第三轮面试",
+ datetime: "一年前",
+ description: "",
+ type: "1"
+ },
+ {
+ avatar:
+ "https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
+ title: "这种模板可以区分多种通知类型",
+ datetime: "一年前",
+ description: "",
+ type: "1"
+ },
+ {
+ avatar:
+ "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
+ title:
+ "展示标题内容超过一行后的处理方式，如果内容超过1行将自动截断并支持tooltip显示完整标题。",
+ datetime: "一年前",
+ description: "",
+ type: "1"
+ },
+ {
+ avatar:
+ "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
+ title: "左侧图标用于区分不同的类型",
+ datetime: "一年前",
+ description: "",
+ type: "1"
+ },
+ {
+ avatar:
+ "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
+ title: "左侧图标用于区分不同的类型",
+ datetime: "一年前",
+ description: "",
+ type: "1"
+ }
+ ]
+ },
+ {
+ key: "2",
+ name: "消息",
+ list: [
+ {
+ avatar:
+ "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
+ title: "李白 评论了你",
+ description: "长风破浪会有时,直挂云帆济沧海",
+ datetime: "一年前",
+ type: "2"
+ },
+ {
+ avatar:
+ "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
+ title: "李白 回复了你",
+ description: "行路难，行路难，多歧路，今安在。",
+ datetime: "一年前",
+ type: "2"
+ },
+ {
+ avatar:
+ "https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
+ title: "标题",
+ description:
+ "请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容",
+ datetime: "一年前",
+ type: "2"
+ }
+ ]
+ },
+ {
+ key: "3",
+ name: "代办",
+ list: [
+ {
+ avatar: "",
+ title: "任务名称",
+ description: "任务需要在 2022-11-16 20:00 前启动",
+ datetime: "",
+ extra: "未开始",
+ status: "info",
+ type: "3"
+ },
+ {
+ avatar: "",
+ title: "第三方紧急代码变更",
+ description:
+ "一拳提交于 2022-11-16，需在 2022-11-18 前完成代码变更任务",
+ datetime: "",
+ extra: "马上到期",
+ status: "danger",
+ type: "3"
+ },
+ {
+ avatar: "",
+ title: "信息安全考试",
+ description: "指派小仙于 2022-12-12 前完成更新并发布",
+ datetime: "",
+ extra: "已耗时 8 天",
+ status: "warning",
+ type: "3"
+ },
+ {
+ avatar: "",
+ title: "vue-pure-admin 版本发布",
+ description: "vue-pure-admin 版本发布",
+ datetime: "",
+ extra: "进行中",
+ type: "3"
+ }
+ ]
+ }
+];
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
new file mode 100644
index 0000000..fbce59d
--- /dev/null
+++ b/src/layout/components/notice/index.vue
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ {{ username }}
+ + +
+
+
+
+
+
+
+
diff --git a/src/layout/components/notice/noticeList.vue b/src/layout/components/notice/noticeList.vue
new file mode 100644
index 0000000..109cd1a
--- /dev/null
+++ b/src/layout/components/notice/noticeList.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ props.noticeItem?.extra }}
+
+
+
+
+ {{ props.noticeItem.title }}
+
+
+ {{ props.noticeItem.description }}
+
+
+ {{ props.noticeItem.datetime }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layout/components/screenfull/index.vue b/src/layout/components/screenfull/index.vue
new file mode 100644
index 0000000..978ba50
--- /dev/null
+++ b/src/layout/components/screenfull/index.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
diff --git a/src/layout/components/search/components/SearchFooter.vue b/src/layout/components/search/components/SearchFooter.vue
new file mode 100644
index 0000000..051ca5f
--- /dev/null
+++ b/src/layout/components/search/components/SearchFooter.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
diff --git a/src/layout/components/search/components/SearchModal.vue b/src/layout/components/search/components/SearchModal.vue
new file mode 100644
index 0000000..4ff03c3
--- /dev/null
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -0,0 +1,172 @@
+
+
+
+
+
+
+
+
+
+
+ 项目配置
+ +
+
+
+
+
+
+
+
+
diff --git a/src/layout/components/search/components/index.ts b/src/layout/components/search/components/index.ts
new file mode 100644
index 0000000..6e895d9
--- /dev/null
+++ b/src/layout/components/search/components/index.ts
@@ -0,0 +1,3 @@
+import SearchModal from "./SearchModal.vue";
+
+export { SearchModal };
diff --git a/src/layout/components/search/index.vue b/src/layout/components/search/index.vue
new file mode 100644
index 0000000..01f3923
--- /dev/null
+++ b/src/layout/components/search/index.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+ -
+
- + + + +
- + + + +
- + + + +
-
+
-
+
+ ++
+
-
+
-
+ 灰色模式
+
+
+ -
+ 色弱模式
+
+
+ -
+ 隐藏标签页
+
+
+ -
+ 侧边栏Logo
+
+
+ -
+ 标签页持久化
+
+
+
+ -
+ 标签风格
+
+ +卡片 +灵动 +
+
+
+
+
+
+
+
diff --git a/src/layout/components/sidebar/leftCollapse.vue b/src/layout/components/sidebar/leftCollapse.vue
new file mode 100644
index 0000000..aaa73c6
--- /dev/null
+++ b/src/layout/components/sidebar/leftCollapse.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ username }}
+ + +
+
+
+
+
+
+
diff --git a/src/layout/components/sidebar/logo.vue b/src/layout/components/sidebar/logo.vue
new file mode 100644
index 0000000..6f8b475
--- /dev/null
+++ b/src/layout/components/sidebar/logo.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
diff --git a/src/layout/components/sidebar/mixNav.vue b/src/layout/components/sidebar/mixNav.vue
new file mode 100644
index 0000000..6bd9585
--- /dev/null
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -0,0 +1,134 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue
new file mode 100644
index 0000000..afaf86b
--- /dev/null
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -0,0 +1,261 @@
+
+
+
+
+
+
+ {{ route.meta.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ username }}
+ + +
+
+ {{ onlyOneChild.meta.title }}
+
+
+
+
+ {{ onlyOneChild.meta.title }}
+
+
+
+
+
+ {{ onlyOneChild.meta.title }}
+
+
+
+ {{ onlyOneChild.meta.title }}
+
+
+ {{ onlyOneChild.meta.title }}
+
+
+
+
+
+
+ {{ props.item.meta.title }}
+
+
+
+
+
+
+
+
+
diff --git a/src/layout/components/tag/index.scss b/src/layout/components/tag/index.scss
new file mode 100644
index 0000000..76c0043
--- /dev/null
+++ b/src/layout/components/tag/index.scss
@@ -0,0 +1,296 @@
+@keyframes scheduleInWidth {
+ from {
+ width: 0;
+ }
+
+ to {
+ width: 100%;
+ }
+}
+
+@keyframes scheduleOutWidth {
+ from {
+ width: 100%;
+ }
+
+ to {
+ width: 0;
+ }
+}
+
+@keyframes rotate {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes close {
+ from {
+ transform: translate(-50%, -50%);
+ }
+
+ to {
+ transform: translate(0, -50%);
+ }
+}
+
+.tags-view {
+ width: 100%;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ color: var(--el-text-color-primary);
+ background: #fff;
+ position: relative;
+ box-shadow: 0 0 1px #888;
+
+ .scroll-item {
+ border-radius: 3px 3px 0 0;
+ padding: 0 6px;
+ box-shadow: 0 0 1px #888;
+ position: relative;
+ margin-right: 4px;
+ height: 28px;
+ display: inline-block;
+ line-height: 28px;
+ transition: all 0.4s;
+ cursor: pointer;
+
+ .el-icon-close {
+ font-size: 10px;
+ color: var(--el-color-primary);
+ cursor: pointer;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ transition: font-size 0.2s;
+
+ &:hover {
+ border-radius: 50%;
+ color: #fff;
+ background: #b4bccc;
+ font-size: 13px;
+ }
+ }
+
+ &.is-closable:not(:first-child) {
+ &:hover {
+ padding-right: 18px;
+
+ &:not(.is-active) {
+ .el-icon-close {
+ animation: close 200ms ease-in forwards;
+ }
+ }
+ }
+ }
+ }
+
+ a {
+ text-decoration: none;
+ color: var(--el-text-color-primary);
+ padding: 0 4px;
+ }
+
+ .scroll-container {
+ flex: 1;
+ overflow: hidden;
+ padding: 5px 0;
+ white-space: nowrap;
+ position: relative;
+
+ .tab {
+ position: relative;
+ float: left;
+ list-style: none;
+ overflow: visible;
+ white-space: nowrap;
+ transition: transform 0.5s ease-in-out;
+
+ .scroll-item {
+ transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+ &:nth-child(1) {
+ margin-left: 5px;
+ }
+ }
+ }
+ }
+
+ /* 右键菜单 */
+ .contextmenu {
+ margin: 0;
+ background: #fff;
+ position: absolute;
+ list-style-type: none;
+ padding: 5px 0;
+ border-radius: 4px;
+ color: var(--el-text-color-primary);
+ font-weight: normal;
+ font-size: 13px;
+ white-space: nowrap;
+ outline: 0;
+ box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+
+ li {
+ width: 100%;
+ margin: 0;
+ padding: 7px 12px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+
+ &:hover {
+ // background: var(--el-color-primary-light-9);
+ color: var(--el-color-primary);
+ }
+
+ svg {
+ display: block;
+ margin-right: 0.5em;
+ }
+ }
+ }
+}
+
+.el-dropdown-menu {
+ li {
+ width: 100%;
+ margin: 0;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+
+ svg {
+ display: block;
+ margin-right: 0.5em;
+ }
+ }
+}
+
+.el-dropdown-menu__item:not(.is-disabled):hover {
+ color: #606266;
+ background: #f0f0f0;
+}
+
+:deep(.el-dropdown-menu__item) i {
+ margin-right: 10px;
+}
+
+:deep(.el-dropdown-menu__item--divided) {
+ margin: 1px 0;
+}
+.el-dropdown-menu__item--divided::before {
+ margin: 0;
+}
+
+.el-dropdown-menu__item.is-disabled {
+ cursor: not-allowed;
+}
+
+.scroll-item.is-active {
+ // background-color: var(--el-color-primary-light-9);
+ position: relative;
+ color: #fff;
+
+ &:not(:first-child) {
+ padding-right: 18px;
+ }
+
+ .el-icon-close {
+ transform: translate(0, -50%);
+ }
+
+ a {
+ color: var(--el-color-primary) !important;
+ }
+}
+
+.arrow-left,
+.arrow-right,
+.arrow-down {
+ width: 40px;
+ height: 38px;
+ color: var(--el-text-color-primary);
+ position: relative;
+
+ svg {
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, 50%);
+ }
+}
+
+.arrow-left {
+ box-shadow: 5px 0 5px -6px #ccc;
+
+ &:hover {
+ cursor: w-resize;
+ }
+}
+
+.arrow-right {
+ box-shadow: -5px 0 5px -6px #ccc;
+ border-right: 0.5px solid #ccc;
+
+ &:hover {
+ cursor: e-resize;
+ }
+}
+
+/* 卡片模式下鼠标移入显示蓝色边框 */
+.card-in {
+ color: var(--el-color-primary);
+
+ a {
+ color: var(--el-color-primary);
+ }
+}
+
+/* 卡片模式下鼠标移出隐藏蓝色边框 */
+.card-out {
+ border: none;
+ color: #666;
+
+ a {
+ color: #666;
+ }
+}
+
+/* 灵动模式 */
+.schedule-active {
+ width: 100%;
+ height: 2px;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ background: var(--el-color-primary);
+}
+
+/* 灵动模式下鼠标移入显示蓝色进度条 */
+.schedule-in {
+ width: 100%;
+ height: 2px;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ background: var(--el-color-primary);
+ animation: scheduleInWidth 400ms ease-in;
+}
+
+/* 灵动模式下鼠标移出隐藏蓝色进度条 */
+.schedule-out {
+ width: 0;
+ height: 2px;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ background: var(--el-color-primary);
+ animation: scheduleOutWidth 400ms ease-in;
+}
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
new file mode 100644
index 0000000..2380ea7
--- /dev/null
+++ b/src/layout/components/tag/index.vue
@@ -0,0 +1,596 @@
+
+
+
+
+
+
+
diff --git a/src/layout/frameView.vue b/src/layout/frameView.vue
new file mode 100644
index 0000000..5e4f4f4
--- /dev/null
+++ b/src/layout/frameView.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/layout/hooks/useBoolean.ts b/src/layout/hooks/useBoolean.ts
new file mode 100644
index 0000000..1d14031
--- /dev/null
+++ b/src/layout/hooks/useBoolean.ts
@@ -0,0 +1,26 @@
+import { ref } from "vue";
+
+export function useBoolean(initValue = false) {
+ const bool = ref(initValue);
+
+ function setBool(value: boolean) {
+ bool.value = value;
+ }
+ function setTrue() {
+ setBool(true);
+ }
+ function setFalse() {
+ setBool(false);
+ }
+ function toggle() {
+ setBool(!bool.value);
+ }
+
+ return {
+ bool,
+ setBool,
+ setTrue,
+ setFalse,
+ toggle
+ };
+}
diff --git a/src/layout/hooks/useDataThemeChange.ts b/src/layout/hooks/useDataThemeChange.ts
new file mode 100644
index 0000000..10a0ce0
--- /dev/null
+++ b/src/layout/hooks/useDataThemeChange.ts
@@ -0,0 +1,116 @@
+import { ref } from "vue";
+import { getConfig } from "@/config";
+import { find } from "lodash-unified";
+import { useLayout } from "./useLayout";
+import { themeColorsType } from "../types";
+import { TinyColor } from "@ctrl/tinycolor";
+import { useGlobal } from "@pureadmin/utils";
+import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import {
+ darken,
+ lighten,
+ toggleTheme
+} from "@pureadmin/theme/dist/browser-utils";
+
+export function useDataThemeChange() {
+ const { layoutTheme, layout } = useLayout();
+ const themeColors = ref
+
+
+
+
+
diff --git a/src/layout/redirect.vue b/src/layout/redirect.vue
new file mode 100644
index 0000000..6e16339
--- /dev/null
+++ b/src/layout/redirect.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
diff --git a/src/layout/theme/index.ts b/src/layout/theme/index.ts
new file mode 100644
index 0000000..c24bb1b
--- /dev/null
+++ b/src/layout/theme/index.ts
@@ -0,0 +1,159 @@
+/**
+ * @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
+ */
+
+import { EpThemeColor } from "../../../public/serverConfig.json";
+
+type MultipleScopeVarsItem = {
+ scopeName: string;
+ varsContent: string;
+};
+
+/** 将vxe默认主题色和ep默认主题色保持一致 */
+const vxeColor = EpThemeColor;
+/** 预设主题色 */
+const themeColors = {
+ default: {
+ vxeColor,
+ subMenuActiveText: "#fff",
+ menuBg: "#001529",
+ menuHover: "#4091f7",
+ subMenuBg: "#0f0303",
+ subMenuActiveBg: "#4091f7",
+ navTextColor: "#fff",
+ menuText: "rgb(254 254 254 / 65%)",
+ sidebarLogo: "#002140",
+ menuTitleHover: "#fff",
+ menuActiveBefore: "#4091f7"
+ },
+ light: {
+ vxeColor,
+ subMenuActiveText: "#409eff",
+ menuBg: "#fff",
+ menuHover: "#e0ebf6",
+ subMenuBg: "#fff",
+ subMenuActiveBg: "#e0ebf6",
+ navTextColor: "#7a80b4",
+ menuText: "#7a80b4",
+ sidebarLogo: "#fff",
+ menuTitleHover: "#000",
+ menuActiveBefore: "#4091f7"
+ },
+ dusk: {
+ vxeColor: "#f5222d",
+ subMenuActiveText: "#fff",
+ menuBg: "#2a0608",
+ menuHover: "#e13c39",
+ subMenuBg: "#000",
+ subMenuActiveBg: "#e13c39",
+ navTextColor: "#red",
+ menuText: "rgb(254 254 254 / 65.1%)",
+ sidebarLogo: "#42090c",
+ menuTitleHover: "#fff",
+ menuActiveBefore: "#e13c39"
+ },
+ volcano: {
+ vxeColor: "#fa541c",
+ subMenuActiveText: "#fff",
+ menuBg: "#2b0e05",
+ menuHover: "#e85f33",
+ subMenuBg: "#0f0603",
+ subMenuActiveBg: "#e85f33",
+ navTextColor: "#fff",
+ menuText: "rgb(254 254 254 / 65%)",
+ sidebarLogo: "#441708",
+ menuTitleHover: "#fff",
+ menuActiveBefore: "#e85f33"
+ },
+ yellow: {
+ vxeColor: "#fadb14",
+ subMenuActiveText: "#d25f00",
+ menuBg: "#2b2503",
+ menuHover: "#f6da4d",
+ subMenuBg: "#0f0603",
+ subMenuActiveBg: "#f6da4d",
+ navTextColor: "#fff",
+ menuText: "rgb(254 254 254 / 65%)",
+ sidebarLogo: "#443b05",
+ menuTitleHover: "#fff",
+ menuActiveBefore: "#f6da4d"
+ },
+ mingQing: {
+ vxeColor: "#13c2c2",
+ subMenuActiveText: "#fff",
+ menuBg: "#032121",
+ menuHover: "#59bfc1",
+ subMenuBg: "#000",
+ subMenuActiveBg: "#59bfc1",
+ navTextColor: "#7a80b4",
+ menuText: "#7a80b4",
+ sidebarLogo: "#053434",
+ menuTitleHover: "#fff",
+ menuActiveBefore: "#59bfc1"
+ },
+ auroraGreen: {
+ vxeColor: "#52c41a",
+ subMenuActiveText: "#fff",
+ menuBg: "#0b1e15",
+ menuHover: "#60ac80",
+ subMenuBg: "#000",
+ subMenuActiveBg: "#60ac80",
+ navTextColor: "#7a80b4",
+ menuText: "#7a80b4",
+ sidebarLogo: "#112f21",
+ menuTitleHover: "#fff",
+ menuActiveBefore: "#60ac80"
+ },
+ pink: {
+ vxeColor: "#eb2f96",
+ subMenuActiveText: "#fff",
+ menuBg: "#28081a",
+ menuHover: "#d84493",
+ subMenuBg: "#000",
+ subMenuActiveBg: "#d84493",
+ navTextColor: "#7a80b4",
+ menuText: "#7a80b4",
+ sidebarLogo: "#3f0d29",
+ menuTitleHover: "#fff",
+ menuActiveBefore: "#d84493"
+ },
+ saucePurple: {
+ vxeColor: "#722ed1",
+ subMenuActiveText: "#fff",
+ menuBg: "#130824",
+ menuHover: "#693ac9",
+ subMenuBg: "#000",
+ subMenuActiveBg: "#693ac9",
+ navTextColor: "#7a80b4",
+ menuText: "#7a80b4",
+ sidebarLogo: "#1f0c38",
+ menuTitleHover: "#fff",
+ menuActiveBefore: "#693ac9"
+ }
+};
+
+/**
+ * @description 将预设主题色处理成主题插件所需格式
+ */
+export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => {
+ const result = [] as MultipleScopeVarsItem[];
+ Object.keys(themeColors).forEach(key => {
+ result.push({
+ scopeName: `layout-theme-${key}`,
+ varsContent: `
+ $vxe-primary-color: ${themeColors[key].vxeColor} !default;
+ $subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
+ $menuBg: ${themeColors[key].menuBg} !default;
+ $menuHover: ${themeColors[key].menuHover} !default;
+ $subMenuBg: ${themeColors[key].subMenuBg} !default;
+ $subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;
+ $navTextColor: ${themeColors[key].navTextColor} !default;
+ $menuText: ${themeColors[key].menuText} !default;
+ $sidebarLogo: ${themeColors[key].sidebarLogo} !default;
+ $menuTitleHover: ${themeColors[key].menuTitleHover} !default;
+ $menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;
+ `
+ } as MultipleScopeVarsItem);
+ });
+ return result;
+};
diff --git a/src/layout/types.ts b/src/layout/types.ts
new file mode 100644
index 0000000..ff79230
--- /dev/null
+++ b/src/layout/types.ts
@@ -0,0 +1,87 @@
+export const routerArrays: Array
+
+
+
+
+
+
+
+
+ { + return this.request
("post", url, params, config);
+ }
+
+ /** 单独抽离的get工具函数 */
+ public get {
+ return this.request ("get", url, params, config);
+ }
+}
+
+export const http = new PureHttp();
diff --git a/src/utils/http/types.d.ts b/src/utils/http/types.d.ts
new file mode 100644
index 0000000..197b152
--- /dev/null
+++ b/src/utils/http/types.d.ts
@@ -0,0 +1,47 @@
+import Axios, {
+ Method,
+ AxiosError,
+ AxiosResponse,
+ AxiosRequestConfig
+} from "axios";
+
+export type resultType = {
+ accessToken?: string;
+};
+
+export type RequestMethods = Extract<
+ Method,
+ "get" | "post" | "put" | "delete" | "patch" | "option" | "head"
+>;
+
+export interface PureHttpError extends AxiosError {
+ isCancelRequest?: boolean;
+}
+
+export interface PureHttpResponse extends AxiosResponse {
+ config: PureHttpRequestConfig;
+}
+
+export interface PureHttpRequestConfig extends AxiosRequestConfig {
+ beforeRequestCallback?: (request: PureHttpRequestConfig) => void;
+ beforeResponseCallback?: (response: PureHttpResponse) => void;
+}
+
+export default class PureHttp {
+ request ;
+ get ;
+}
diff --git a/src/utils/mitt.ts b/src/utils/mitt.ts
new file mode 100644
index 0000000..0022e8d
--- /dev/null
+++ b/src/utils/mitt.ts
@@ -0,0 +1,21 @@
+import type { Emitter } from "mitt";
+import mitt from "mitt";
+
+type Events = {
+ resize: {
+ detail: {
+ width: number;
+ height: number;
+ };
+ };
+ openPanel: string;
+ tagViewsChange: string;
+ tagViewsShowModel: string;
+ logoChange: boolean;
+ changLayoutRoute: {
+ indexPath: string;
+ parentPath: string;
+ };
+};
+
+export const emitter: Emitter
+ 403
+
+ 抱歉，你无权访问该页面
+
+ 404
+
+ 抱歉，你访问的页面不存在
+
+ 500
+
+ 抱歉，服务器出错了
+
+
+
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
new file mode 100644
index 0000000..1c20ed7
--- /dev/null
+++ b/src/views/error/404.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
diff --git a/src/views/error/500.vue b/src/views/error/500.vue
new file mode 100644
index 0000000..f21944e
--- /dev/null
+++ b/src/views/error/500.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..ca4799e
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,165 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/login/utils/motion.ts b/src/views/login/utils/motion.ts
new file mode 100644
index 0000000..2b1182c
--- /dev/null
+++ b/src/views/login/utils/motion.ts
@@ -0,0 +1,40 @@
+import { h, defineComponent, withDirectives, resolveDirective } from "vue";
+
+/** 封装@vueuse/motion动画库中的自定义指令v-motion */
+export default defineComponent({
+ name: "Motion",
+ props: {
+ delay: {
+ type: Number,
+ default: 50
+ }
+ },
+ render() {
+ const { delay } = this;
+ const motion = resolveDirective("motion");
+ return withDirectives(
+ h(
+ "div",
+ {},
+ {
+ default: () => [this.$slots.default()]
+ }
+ ),
+ [
+ [
+ motion,
+ {
+ initial: { opacity: 0, y: 100 },
+ enter: {
+ opacity: 1,
+ y: 0,
+ transition: {
+ delay
+ }
+ }
+ }
+ ]
+ ]
+ );
+ }
+});
diff --git a/src/views/login/utils/rule.ts b/src/views/login/utils/rule.ts
new file mode 100644
index 0000000..6b73d5a
--- /dev/null
+++ b/src/views/login/utils/rule.ts
@@ -0,0 +1,28 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+
+/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
+export const REGEXP_PWD =
+ /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
+
+/** 登录校验 */
+const loginRules = reactive(
+
+
+
+
+
+
+
+
+
+
+
+ {{ title }}
+ 组件方式判断权限
+
+ 函数方式判断权限
+
+
+ 指令方式判断权限（该方式不能动态修改权限）
+
+
+
+ 当前角色：{{ username }}
+
+
+ Pure-Admin-Thin（非国际化版本）
+
diff --git a/stylelint.config.js b/stylelint.config.js
new file mode 100644
index 0000000..67f8c07
--- /dev/null
+++ b/stylelint.config.js
@@ -0,0 +1,92 @@
+module.exports = {
+ root: true,
+ plugins: ["stylelint-order"],
+ customSyntax: "postcss-html",
+ extends: ["stylelint-config-standard", "stylelint-config-prettier"],
+ rules: {
+ "selector-class-pattern": null,
+ "selector-pseudo-class-no-unknown": [
+ true,
+ {
+ ignorePseudoClasses: ["global"]
+ }
+ ],
+ "selector-pseudo-element-no-unknown": [
+ true,
+ {
+ ignorePseudoElements: ["v-deep"]
+ }
+ ],
+ "at-rule-no-unknown": [
+ true,
+ {
+ ignoreAtRules: [
+ "tailwind",
+ "apply",
+ "variants",
+ "responsive",
+ "screen",
+ "function",
+ "if",
+ "each",
+ "include",
+ "mixin"
+ ]
+ }
+ ],
+ "no-empty-source": null,
+ "named-grid-areas-no-invalid": null,
+ "unicode-bom": "never",
+ "no-descending-specificity": null,
+ "font-family-no-missing-generic-family-keyword": null,
+ "declaration-colon-space-after": "always-single-line",
+ "declaration-colon-space-before": "never",
+ "rule-empty-line-before": [
+ "always",
+ {
+ ignore: ["after-comment", "first-nested"]
+ }
+ ],
+ "unit-no-unknown": [true, { ignoreUnits: ["rpx"] }],
+ "order/order": [
+ [
+ "dollar-variables",
+ "custom-properties",
+ "at-rules",
+ "declarations",
+ {
+ type: "at-rule",
+ name: "supports"
+ },
+ {
+ type: "at-rule",
+ name: "media"
+ },
+ "rules"
+ ],
+ { severity: "warning" }
+ ]
+ },
+ ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.json"],
+ overrides: [
+ {
+ files: ["*.vue", "**/*.vue", "*.html", "**/*.html"],
+ extends: ["stylelint-config-recommended", "stylelint-config-html"],
+ rules: {
+ "keyframes-name-pattern": null,
+ "selector-pseudo-class-no-unknown": [
+ true,
+ {
+ ignorePseudoClasses: ["deep", "global"]
+ }
+ ],
+ "selector-pseudo-element-no-unknown": [
+ true,
+ {
+ ignorePseudoElements: ["v-deep", "v-global", "v-slotted"]
+ }
+ ]
+ }
+ }
+ ]
+};
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..11bb37f
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: "class",
+ corePlugins: {
+ preflight: false
+ },
+ content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+ theme: {
+ extend: {
+ colors: {
+ bg_color: "var(--el-bg-color)",
+ primary: "var(--el-color-primary)",
+ primary_light_9: "var(--el-color-primary-light-9)",
+ text_color_primary: "var(--el-text-color-primary)",
+ text_color_regular: "var(--el-text-color-regular)",
+ text_color_disabled: "var(--el-text-color-disabled)"
+ }
+ }
+ }
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..0e3a5c8
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,46 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "esnext",
+ "moduleResolution": "Node",
+ "strict": false,
+ "jsx": "preserve",
+ "importHelpers": true,
+ "experimentalDecorators": true,
+ "strictFunctionTypes": false,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "isolatedModules": true,
+ "allowSyntheticDefaultImports": true,
+ "forceConsistentCasingInFileNames": true,
+ "sourceMap": true,
+ "baseUrl": ".",
+ "allowJs": false,
+ "resolveJsonModule": true,
+ "lib": ["dom", "esnext"],
+ "incremental": true,
+ "paths": {
+ "@/*": ["src/*"],
+ "@build/*": ["build/*"],
+ "/#/*": ["types/*"]
+ },
+ "types": [
+ "node",
+ "vite/client",
+ "element-plus/global",
+ "@pureadmin/table/volar",
+ "unplugin-vue-define-options",
+ "@pureadmin/descriptions/volar"
+ ],
+ "typeRoots": ["./node_modules/@types/", "./types"]
+ },
+ "include": [
+ "src/**/*.ts",
+ "src/**/*.tsx",
+ "src/**/*.vue",
+ "types/*.d.ts",
+ "mock/*.ts",
+ "vite.config.ts"
+ ],
+ "exclude": ["node_modules", "dist", "**/*.js", "index.html"]
+}
diff --git a/types/global.d.ts b/types/global.d.ts
new file mode 100644
index 0000000..60acb4d
--- /dev/null
+++ b/types/global.d.ts
@@ -0,0 +1,149 @@
+import type {
+ ComponentRenderProxy,
+ VNode,
+ ComponentPublicInstance,
+ FunctionalComponent,
+ PropType as VuePropType
+} from "vue";
+import type { ECharts } from "echarts";
+import { type ResponsiveStorage } from "./index";
+
+// GlobalComponents for Volar
+declare module "vue" {
+ export interface GlobalComponents {
+ IconifyIconOffline: typeof import("../src/components/ReIcon")["IconifyIconOffline"];
+ IconifyIconOnline: typeof import("../src/components/ReIcon")["IconifyIconOnline"];
+ FontIcon: typeof import("../src/components/ReIcon")["FontIcon"];
+ Auth: typeof import("../src/components/ReAuth")["Auth"];
+ }
+}
+
+declare global {
+ const __APP_INFO__: {
+ pkg: {
+ name: string;
+ version: string;
+ dependencies: Recordable