twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-06 00:18:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into fix/aria-hidden

Browse Source
This commit is contained in:
xiaoming 2025-01-04 00:54:02 +08:00 committed by GitHub
commit 3d2bf0e104
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
61 changed files with 1069 additions and 426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/optimize.ts
View File

@ -11,6 +11,7 @@ const include = [
"dayjs", "dayjs",
"axios", "axios",
"pinia", "pinia",
"vditor",
"typeit", "typeit",
"swiper", "swiper",
"qrcode", "qrcode",
@ -22,6 +23,7 @@ const include = [
"vue-tippy", "vue-tippy",
"cropperjs", "cropperjs",
"jsbarcode", "jsbarcode",
"codemirror",
"pinyin-pro", "pinyin-pro",
"sortablejs", "sortablejs",
"swiper/vue", "swiper/vue",
@ -42,6 +44,7 @@ const include = [
"@howdyjs/mouse-menu", "@howdyjs/mouse-menu",
"@logicflow/extension", "@logicflow/extension",
"vue-virtual-scroller", "vue-virtual-scroller",
"codemirror-editor-vue3",
"@amap/amap-jsapi-loader", "@amap/amap-jsapi-loader",
"el-table-infinite-scroll", "el-table-infinite-scroll",
"vue-waterfall-plugin-next", "vue-waterfall-plugin-next",

3
index.html
View File

@ -10,9 +10,6 @@
/> />
<title>vue-pure-admin</title> <title>vue-pure-admin</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<script>
window.process = {};
</script>
</head> </head>
<body> <body>

3
locales/en.yaml
View File

@ -76,6 +76,8 @@ menus:
pureLoginLog: Login Log pureLoginLog: Login Log
pureOperationLog: Operation Log pureOperationLog: Operation Log
pureSystemLog: System Log pureSystemLog: System Log
pureCodeMirror: CodeMirror
pureMarkdown: Markdown
pureEditor: Editor pureEditor: Editor
pureAbnormal: Abnormal Page pureAbnormal: Abnormal Page
pureFourZeroFour: "404" pureFourZeroFour: "404"
@ -92,6 +94,7 @@ menus:
pureDraggable: Draggable pureDraggable: Draggable
pureSplitPane: Split Pane pureSplitPane: Split Pane
pureText: Text Ellipsis pureText: Text Ellipsis
pureSlider: Slider
pureElButton: Button pureElButton: Button
pureButton: Button Animation pureButton: Button Animation
pureCheckButton: Check Button pureCheckButton: Check Button

3
locales/zh-CN.yaml
View File

@ -76,6 +76,8 @@ menus:
pureLoginLog: 登录日志 pureLoginLog: 登录日志
pureOperationLog: 操作日志 pureOperationLog: 操作日志
pureSystemLog: 系统日志 pureSystemLog: 系统日志
pureCodeMirror: 代码编辑器
pureMarkdown: Markdown
pureEditor: 编辑器 pureEditor: 编辑器
pureAbnormal: 异常页面 pureAbnormal: 异常页面
pureFourZeroFour: "404" pureFourZeroFour: "404"
@ -92,6 +94,7 @@ menus:
pureDraggable: 拖拽 pureDraggable: 拖拽
pureSplitPane: 切割面板 pureSplitPane: 切割面板
pureText: 文本省略 pureText: 文本省略
pureSlider: 滑块
pureElButton: 按钮 pureElButton: 按钮
pureCheckButton: 可选按钮 pureCheckButton: 可选按钮
pureButton: 按钮动效 pureButton: 按钮动效

4
package.json
View File

@ -65,6 +65,8 @@
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^1.7.9", "axios": "^1.7.9",
"china-area-data": "^5.0.1", "china-area-data": "^5.0.1",
"codemirror": "^5",
"codemirror-editor-vue3": "^2.8.0",
"cropperjs": "^1.6.2", "cropperjs": "^1.6.2",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"echarts": "^5.5.1", "echarts": "^5.5.1",
@ -90,6 +92,7 @@
"typeit": "^8.8.7", "typeit": "^8.8.7",
"v-contextmenu": "^3.2.0", "v-contextmenu": "^3.2.0",
"v3-infinite-loading": "^1.3.2", "v3-infinite-loading": "^1.3.2",
"vditor": "^3.10.8",
"version-rocket": "^1.7.4", "version-rocket": "^1.7.4",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-i18n": "^10.0.5", "vue-i18n": "^10.0.5",
@ -118,6 +121,7 @@
"@iconify-icons/ri": "^1.2.10", "@iconify-icons/ri": "^1.2.10",
"@iconify/vue": "^4.2.0", "@iconify/vue": "^4.2.0",
"@intlify/unplugin-vue-i18n": "^6.0.1", "@intlify/unplugin-vue-i18n": "^6.0.1",
"@types/codemirror": "^5.60.15",
"@types/dagre": "^0.7.52", "@types/dagre": "^0.7.52",
"@types/intro.js": "^5.1.5", "@types/intro.js": "^5.1.5",
"@types/js-cookie": "^3.0.6", "@types/js-cookie": "^3.0.6",

672
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
src/components/ReText/src/index.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
import { h, onMounted, ref, useSlots } from "vue"; import { h, onMounted, ref, useSlots } from "vue";
import { type TippyOptions, useTippy } from "vue-tippy"; import { type TippyOptions, useTippy } from "vue-tippy";

4
src/components/ReTreeLine/index.ts
View File

@ -90,9 +90,9 @@ export default defineComponent({
]; ];
// 取得每一层的当前节点是不是在当前层级列表的最后一个 // 取得每一层的当前节点是不是在当前层级列表的最后一个
const lastnodeArr = []; const lastnodeArr = [];
let currentNode = this.node; let currentNode: any = this.node;
while (currentNode) { while (currentNode) {
let parentNode = currentNode.parent; let parentNode: any = currentNode.parent;
// 兼容element-plus的 el-tree-v2 (Virtualized Tree 虚拟树) // 兼容element-plus的 el-tree-v2 (Virtualized Tree 虚拟树)
if (currentNode.level === 1 && !currentNode.parent) { if (currentNode.level === 1 && !currentNode.parent) {
// el-tree-v2的第一层node是没有parent的，必需 treeData 创建一个parent // el-tree-v2的第一层node是没有parent的，必需 treeData 创建一个parent

2
src/layout/components/lay-footer/index.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
import { getConfig } from "@/config"; import { getConfig } from "@/config";
const TITLE = getConfig("Title"); const TITLE = getConfig("Title");

2
src/layout/components/lay-notice/components/NoticeItem.vue
View File

@ -112,7 +112,7 @@ function hoverDescription(event, description) {
max-width: 238px; max-width: 238px;
} }
</style> </style>
<style scoped lang="scss"> <style lang="scss" scoped>
.notice-container { .notice-container {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;

20
src/router/enums.ts
View File

@ -17,14 +17,16 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
monitor = 14, monitor = 14,
tabs = 15, tabs = 15,
about = 16, about = 16,
editor = 17, codemirror = 17,
flowchart = 18, markdown = 18,
formdesign = 19, editor = 19,
board = 20, flowchart = 20,
ppt = 21, formdesign = 21,
mind = 22, board = 22,
guide = 23, ppt = 23,
menuoverflow = 24; mind = 24,
guide = 25,
menuoverflow = 26;
export { export {
home, home,
@ -44,6 +46,8 @@ export {
monitor, monitor,
tabs, tabs,
about, about,
codemirror,
markdown,
editor, editor,
flowchart, flowchart,
formdesign, formdesign,

3
src/router/modules/able.ts
View File

@ -15,8 +15,7 @@ export default {
name: "MqttClient", name: "MqttClient",
component: () => import("@/views/able/mqtt-client.vue"), component: () => import("@/views/able/mqtt-client.vue"),
meta: { meta: {
title: $t("menus.pureMqtt"), title: $t("menus.pureMqtt")
extraIcon: "IF-pure-iconfont-new svg"
} }
}, },
{ {

23
src/router/modules/codemirror.ts Normal file
View File

@ -0,0 +1,23 @@
import { $t } from "@/plugins/i18n";
import { codemirror } from "@/router/enums";
export default {
path: "/codemirror",
redirect: "/codemirror/index",
meta: {
icon: "ri:code-box-line",
title: $t("menus.pureCodeMirror"),
rank: codemirror
},
children: [
{
path: "/codemirror/index",
name: "CodeMirror",
component: () => import("@/views/codemirror/index.vue"),
meta: {
title: $t("menus.pureCodeMirror"),
extraIcon: "IF-pure-iconfont-new svg"
}
}
]
} satisfies RouteConfigsTable;

16
src/router/modules/components.ts
View File

@ -47,8 +47,7 @@ export default {
name: "CheckCard", name: "CheckCard",
component: () => import("@/views/components/check-card.vue"), component: () => import("@/views/components/check-card.vue"),
meta: { meta: {
title: $t("menus.pureCheckCard"), title: $t("menus.pureCheckCard")
extraIcon: "IF-pure-iconfont-new svg"
} }
}, },
{ {
@ -112,7 +111,15 @@ export default {
name: "PureText", name: "PureText",
component: () => import("@/views/components/text.vue"), component: () => import("@/views/components/text.vue"),
meta: { meta: {
title: $t("menus.pureText"), title: $t("menus.pureText")
}
},
{
path: "/components/slider",
name: "PureSlider",
component: () => import("@/views/components/slider/index.vue"),
meta: {
title: $t("menus.pureSlider"),
extraIcon: "IF-pure-iconfont-new svg" extraIcon: "IF-pure-iconfont-new svg"
} }
}, },
@ -129,8 +136,7 @@ export default {
name: "CheckButton", name: "CheckButton",
component: () => import("@/views/components/check-button.vue"), component: () => import("@/views/components/check-button.vue"),
meta: { meta: {
title: $t("menus.pureCheckButton"), title: $t("menus.pureCheckButton")
extraIcon: "IF-pure-iconfont-new svg"
} }
}, },
{ {

3
src/router/modules/form.ts
View File

@ -15,8 +15,7 @@ export default {
name: "SchemaForm", name: "SchemaForm",
component: () => import("@/views/schema-form/index.vue"), component: () => import("@/views/schema-form/index.vue"),
meta: { meta: {
title: $t("menus.pureSchemaForm"), title: $t("menus.pureSchemaForm")
extraIcon: "IF-pure-iconfont-new svg"
} }
} }
] ]

3
src/router/modules/ganttastic.ts
View File

@ -15,8 +15,7 @@ export default {
name: "Ganttastic", name: "Ganttastic",
component: () => import("@/views/ganttastic/index.vue"), component: () => import("@/views/ganttastic/index.vue"),
meta: { meta: {
title: $t("menus.pureGanttastic"), title: $t("menus.pureGanttastic")
extraIcon: "IF-pure-iconfont-new svg"
} }
} }
] ]

23
src/router/modules/markdown.ts Normal file
View File

@ -0,0 +1,23 @@
import { $t } from "@/plugins/i18n";
import { markdown } from "@/router/enums";
export default {
path: "/markdown",
redirect: "/markdown/index",
meta: {
icon: "ri:markdown-line",
title: $t("menus.pureMarkdown"),
rank: markdown
},
children: [
{
path: "/markdown/index",
name: "Markdown",
component: () => import("@/views/markdown/index.vue"),
meta: {
title: $t("menus.pureMarkdown"),
extraIcon: "IF-pure-iconfont-new svg"
}
}
]
} satisfies RouteConfigsTable;

6
src/router/modules/table.ts
View File

@ -31,8 +31,7 @@ export default {
name: "PureTableEdit", name: "PureTableEdit",
component: () => import("@/views/table/edit.vue"), component: () => import("@/views/table/edit.vue"),
meta: { meta: {
title: $t("menus.pureTableEdit"), title: $t("menus.pureTableEdit")
extraIcon: "IF-pure-iconfont-new svg"
} }
}, },
{ {
@ -40,8 +39,7 @@ export default {
name: "VxeTable", name: "VxeTable",
component: () => import("@/views/table/virtual.vue"), component: () => import("@/views/table/virtual.vue"),
meta: { meta: {
title: $t("menus.pureVxeTable"), title: $t("menus.pureVxeTable")
extraIcon: "IF-pure-iconfont-new svg"
} }
} }
] ]

3
src/router/modules/vueflow.ts
View File

@ -14,8 +14,7 @@ export default {
name: "VueFlow", name: "VueFlow",
component: () => import("@/views/vue-flow/layouting/index.vue"), component: () => import("@/views/vue-flow/layouting/index.vue"),
meta: { meta: {
title: "vue-flow", title: "vue-flow"
extraIcon: "IF-pure-iconfont-new svg"
} }
} }
] ]

3
src/store/modules/app.ts
View File

@ -8,8 +8,7 @@ import {
responsiveStorageNameSpace responsiveStorageNameSpace
} from "../utils"; } from "../utils";
export const useAppStore = defineStore({ export const useAppStore = defineStore("pure-app", {
id: "pure-app",
state: (): appType => ({ state: (): appType => ({
sidebar: { sidebar: {
opened: opened:

3
src/store/modules/epTheme.ts
View File

@ -6,8 +6,7 @@ import {
responsiveStorageNameSpace responsiveStorageNameSpace
} from "../utils"; } from "../utils";
export const useEpThemeStore = defineStore({ export const useEpThemeStore = defineStore("pure-epTheme", {
id: "pure-epTheme",
state: () => ({ state: () => ({
epThemeColor: epThemeColor:
storageLocal().getItem<StorageConfigs>( storageLocal().getItem<StorageConfigs>(

7
src/store/modules/multiTags.ts
View File

@ -14,8 +14,7 @@ import {
} from "../utils"; } from "../utils";
import { usePermissionStoreHook } from "./permission"; import { usePermissionStoreHook } from "./permission";
export const useMultiTagsStore = defineStore({ export const useMultiTagsStore = defineStore("pure-multiTags", {
id: "pure-multiTags",
state: () => ({ state: () => ({
// 存储标签页信息（路由信息） // 存储标签页信息（路由信息）
multiTags: storageLocal().getItem<StorageConfigs>( multiTags: storageLocal().getItem<StorageConfigs>(
@ -24,12 +23,12 @@ export const useMultiTagsStore = defineStore({
? storageLocal().getItem<StorageConfigs>( ? storageLocal().getItem<StorageConfigs>(
`${responsiveStorageNameSpace()}tags` `${responsiveStorageNameSpace()}tags`
) )
: [ : ([
...routerArrays, ...routerArrays,
...usePermissionStoreHook().flatteningRoutes.filter( ...usePermissionStoreHook().flatteningRoutes.filter(
v => v?.meta?.fixedTag v => v?.meta?.fixedTag
) )
], ] as any),
multiTagsCache: storageLocal().getItem<StorageConfigs>( multiTagsCache: storageLocal().getItem<StorageConfigs>(
`${responsiveStorageNameSpace()}configure` `${responsiveStorageNameSpace()}configure`
)?.multiTagsCache )?.multiTagsCache

5
src/store/modules/permission.ts
View File

@ -12,8 +12,7 @@ import {
} from "../utils"; } from "../utils";
import { useMultiTagsStoreHook } from "./multiTags"; import { useMultiTagsStoreHook } from "./multiTags";
export const usePermissionStore = defineStore({ export const usePermissionStore = defineStore("pure-permission", {
id: "pure-permission",
state: () => ({ state: () => ({
// 静态路由生成的菜单 // 静态路由生成的菜单
constantMenus, constantMenus,
@ -31,7 +30,7 @@ export const usePermissionStore = defineStore({
filterTree(ascending(this.constantMenus.concat(routes))) filterTree(ascending(this.constantMenus.concat(routes)))
); );
this.flatteningRoutes = formatFlatteningRoutes( this.flatteningRoutes = formatFlatteningRoutes(
this.constantMenus.concat(routes) this.constantMenus.concat(routes) as any
); );
}, },
cacheOperate({ mode, name }: cacheType) { cacheOperate({ mode, name }: cacheType) {

3
src/store/modules/settings.ts
View File

@ -1,8 +1,7 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { type setType, store, getConfig } from "../utils"; import { type setType, store, getConfig } from "../utils";
export const useSettingStore = defineStore({ export const useSettingStore = defineStore("pure-setting", {
id: "pure-setting",
state: (): setType => ({ state: (): setType => ({
title: getConfig().Title, title: getConfig().Title,
fixedHeader: getConfig().FixedHeader, fixedHeader: getConfig().FixedHeader,

3
src/store/modules/user.ts
View File

@ -16,8 +16,7 @@ import {
import { useMultiTagsStoreHook } from "./multiTags"; import { useMultiTagsStoreHook } from "./multiTags";
import { type DataInfo, setToken, removeToken, userKey } from "@/utils/auth"; import { type DataInfo, setToken, removeToken, userKey } from "@/utils/auth";
export const useUserStore = defineStore({ export const useUserStore = defineStore("pure-user", {
id: "pure-user",
state: (): userType => ({ state: (): userType => ({
// 头像 // 头像
avatar: storageLocal().getItem<DataInfo<number>>(userKey)?.avatar ?? "", avatar: storageLocal().getItem<DataInfo<number>>(userKey)?.avatar ?? "",

8
src/utils/print.ts
View File

@ -9,6 +9,7 @@ const Print = function (dom, options?: object): PrintFunction {
options = options || {}; options = options || {};
// @ts-expect-error // @ts-expect-error
if (!(this instanceof Print)) return new Print(dom, options); if (!(this instanceof Print)) return new Print(dom, options);
// @ts-expect-error
this.conf = { this.conf = {
styleStr: "", styleStr: "",
// Elements that need to dynamically get and set the height // Elements that need to dynamically get and set the height
@ -18,19 +19,26 @@ const Print = function (dom, options?: object): PrintFunction {
// Callback after printing // Callback after printing
printDoneCallBack: null printDoneCallBack: null
}; };
// @ts-expect-error
for (const key in this.conf) { for (const key in this.conf) {
if (key && options.hasOwnProperty(key)) { if (key && options.hasOwnProperty(key)) {
// @ts-expect-error
this.conf[key] = options[key]; this.conf[key] = options[key];
} }
} }
if (typeof dom === "string") { if (typeof dom === "string") {
// @ts-expect-error
this.dom = document.querySelector(dom); this.dom = document.querySelector(dom);
} else { } else {
// @ts-expect-error
this.dom = this.isDOM(dom) ? dom : dom.$el; this.dom = this.isDOM(dom) ? dom : dom.$el;
} }
// @ts-expect-error
if (this.conf.setDomHeightArr && this.conf.setDomHeightArr.length) { if (this.conf.setDomHeightArr && this.conf.setDomHeightArr.length) {
// @ts-expect-error
this.setDomHeight(this.conf.setDomHeightArr); this.setDomHeight(this.conf.setDomHeightArr);
} }
// @ts-expect-error
this.init(); this.init();
}; };

2
src/views/able/video-frame/index.vue
View File

@ -170,7 +170,7 @@ onBeforeUnmount(() => {
</el-card> </el-card>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
::v-deep(.el-upload-dragger) { ::v-deep(.el-upload-dragger) {
display: flex; display: flex;
align-items: center; align-items: center;

96
src/views/codemirror/index.vue Normal file
View File

@ -0,0 +1,96 @@
<script setup lang="ts">
import "codemirror/theme/material-darker.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/mode/javascript/javascript.js";
import { useDark } from "@pureadmin/utils";
import Codemirror from "codemirror-editor-vue3";
import { ref, reactive, watch, nextTick } from "vue";
import type { Editor, EditorConfiguration } from "codemirror";
const { isDark } = useDark();
const cminstance = ref<Editor | null>(null);
const cmOptions: EditorConfiguration = reactive({
mode: "javascript",
theme: isDark.value ? "material-darker" : "default",
tabSize: 4,
readOnly: false,
autofocus: true,
autoRefresh: true,
lineNumbers: true,
lineWiseCopyCut: true,
gutters: ["CodeMirror-lint-markers"],
lint: true,
extraKeys: {
Ctrl: "autocomplete",
Tab: "autocomplete"
},
hintOptions: {
completeSingle: false
}
});
const code = ref(`function sayHello() {
console.log("Hello, World!");
}
sayHello();`);
const onReady = (cm: Editor) => {
cminstance.value = cm;
cm.on("keypress", () => cm.showHint());
// console.log(cm.getValue());
};
watch(
() => isDark.value,
async newVal => {
await nextTick();
newVal
? cminstance.value.setOption("theme", "material-darker")
: cminstance.value.setOption("theme", "default");
}
);
</script>
<template>
<el-card shadow="never">
<template #header>
<div class="card-header">
<span class="font-medium">
代码编辑器组件，采用开源的
<el-link
href="https://rennzhang.github.io/codemirror-editor-vue3/zh-CN/guide/getting-started"
target="_blank"
style="margin: 0 4px 5px; font-size: 16px"
>
codemirror-editor-vue3
</el-link>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/codemirror/index.vue"
target="_blank"
>
代码位置 src/views/codemirror/index.vue
</el-link>
</template>
<Codemirror
v-model:value="code"
width="100%"
height="400px"
:options="cmOptions"
:border="true"
@ready="onReady"
/>
</el-card>
</template>
<style lang="scss" scoped>
.codemirror-container.bordered {
border: 1px solid var(--pure-border-color);
}
</style>

12
src/views/components/json-editor.vue
View File

@ -84,17 +84,7 @@ watch(
> >
vue-json-pretty vue-json-pretty
</el-link> </el-link>
（支持大数据量）。 （支持大数据量）
</span>
<span class="font-medium">
当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
<el-link
href="https://github.com/surmon-china/vue-codemirror"
target="_blank"
style="margin: 0 4px 5px; font-size: 16px"
>
codemirror6
</el-link>
</span> </span>
</div> </div>
<el-link <el-link

64
src/views/components/slider/components/Base.vue Normal file
View File

@ -0,0 +1,64 @@
<script setup lang="ts">
import { ref } from "vue";
const value1 = ref(0);
const value2 = ref(10);
const value3 = ref(0);
const value4 = ref(0);
const value5 = ref(0);
const formatTooltip = (val: number) => {
return val / 100;
};
</script>
<template>
<div class="slider-demo-block">
<span class="demonstration">默认值</span>
<el-slider v-model="value1" />
</div>
<div class="slider-demo-block">
<span class="demonstration">自定义初始值</span>
<el-slider v-model="value2" />
</div>
<div class="slider-demo-block">
<span class="demonstration">隐藏 Tooltip 提示</span>
<el-slider v-model="value3" :show-tooltip="false" />
</div>
<div class="slider-demo-block">
<span class="demonstration">格式化 Tooltip 提示</span>
<el-slider v-model="value4" :format-tooltip="formatTooltip" />
</div>
<div class="slider-demo-block">
<span class="demonstration">禁用</span>
<el-slider v-model="value5" disabled />
</div>
</template>
<style lang="scss" scoped>
.slider-demo-block {
display: flex;
align-items: center;
max-width: 600px;
}
.slider-demo-block .el-slider {
margin-top: 0;
margin-left: 12px;
}
.slider-demo-block .demonstration {
flex: 1;
margin-bottom: 0;
overflow: hidden;
font-size: 14px;
line-height: 44px;
color: var(--el-text-color-secondary);
text-overflow: ellipsis;
white-space: nowrap;
}
.slider-demo-block .demonstration + .el-slider {
flex: 0 0 70%;
}
</style>

24
src/views/components/slider/components/Input.vue Normal file
View File

@ -0,0 +1,24 @@
<script setup lang="ts">
import { ref } from "vue";
const value = ref(0);
</script>
<template>
<div class="slider-demo-block">
<el-slider v-model="value" show-input />
</div>
</template>
<style lang="scss" scoped>
.slider-demo-block {
display: flex;
align-items: center;
max-width: 600px;
}
.slider-demo-block .el-slider {
margin-top: 0;
margin-left: 12px;
}
</style>

43
src/views/components/slider/components/Marks.vue Normal file
View File

@ -0,0 +1,43 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import type { CSSProperties } from "vue";
interface Mark {
style: CSSProperties;
label: string;
}
type Marks = Record<number, Mark | string>;
const value = ref([30, 60]);
const marks = reactive<Marks>({
0: "0°C",
8: "8°C",
37: "37°C",
50: {
style: {
color: "#1989FA"
},
label: "50%"
}
});
</script>
<template>
<div class="slider-demo-block">
<el-slider v-model="value" range :marks="marks" />
</div>
</template>
<style lang="scss" scoped>
.slider-demo-block {
display: flex;
align-items: center;
max-width: 600px;
}
.slider-demo-block .el-slider {
margin-top: 0;
margin-left: 12px;
}
</style>

40
src/views/components/slider/components/Placement.vue Normal file
View File

@ -0,0 +1,40 @@
<script setup lang="ts">
import { ref } from "vue";
const value1 = ref(0);
const value2 = ref(0);
const value3 = ref(0);
const value4 = ref(0);
</script>
<template>
<div class="slider-demo-block">
<span class="mr-2">上</span>
<el-slider v-model="value1" />
</div>
<div class="slider-demo-block">
<span class="mr-2">下</span>
<el-slider v-model="value2" placement="bottom" />
</div>
<div class="slider-demo-block">
<span class="mr-2">左</span>
<el-slider v-model="value4" placement="left" />
</div>
<div class="slider-demo-block">
<span class="mr-2">右</span>
<el-slider v-model="value3" placement="right" />
</div>
</template>
<style lang="scss" scoped>
.slider-demo-block {
display: flex;
align-items: center;
max-width: 600px;
}
.slider-demo-block .el-slider {
margin-top: 0;
margin-left: 12px;
}
</style>

24
src/views/components/slider/components/Range.vue Normal file
View File

@ -0,0 +1,24 @@
<script setup lang="ts">
import { ref } from "vue";
const value = ref([4, 8]);
</script>
<template>
<div class="slider-demo-block">
<el-slider v-model="value" range show-stops :max="10" />
</div>
</template>
<style lang="scss" scoped>
.slider-demo-block {
display: flex;
align-items: center;
max-width: 600px;
}
.slider-demo-block .el-slider {
margin-top: 0;
margin-left: 12px;
}
</style>

23
src/views/components/slider/components/Size.vue Normal file
View File

@ -0,0 +1,23 @@
<script setup lang="ts">
import { ref } from "vue";
const value = ref(0);
</script>
<template>
<div class="max-w-[600px] ml-4">
<el-slider v-model="value" show-input size="large" />
<el-slider v-model="value" show-input />
<el-slider v-model="value" show-input size="small" />
</div>
</template>
<style lang="scss" scoped>
.el-slider {
margin-top: 20px;
}
.el-slider:first-child {
margin-top: 0;
}
</style>

45
src/views/components/slider/components/Step.vue Normal file
View File

@ -0,0 +1,45 @@
<script setup lang="ts">
import { ref } from "vue";
const value1 = ref(0);
const value2 = ref(0);
</script>
<template>
<div class="slider-demo-block">
<span class="demonstration">不显示断点</span>
<el-slider v-model="value1" :step="10" />
</div>
<div class="slider-demo-block">
<span class="demonstration">显示断点</span>
<el-slider v-model="value2" :step="10" show-stops />
</div>
</template>
<style lang="scss" scoped>
.slider-demo-block {
display: flex;
align-items: center;
max-width: 600px;
}
.slider-demo-block .el-slider {
margin-top: 0;
margin-left: 12px;
}
.slider-demo-block .demonstration {
flex: 1;
margin-bottom: 0;
overflow: hidden;
font-size: 14px;
line-height: 44px;
color: var(--el-text-color-secondary);
text-overflow: ellipsis;
white-space: nowrap;
}
.slider-demo-block .demonstration + .el-slider {
flex: 0 0 70%;
}
</style>

24
src/views/components/slider/components/Vertical.vue Normal file
View File

@ -0,0 +1,24 @@
<script setup lang="ts">
import { ref } from "vue";
const value = ref(0);
</script>
<template>
<div class="slider-demo-block">
<el-slider v-model="value" vertical height="200px" />
</div>
</template>
<style lang="scss" scoped>
.slider-demo-block {
display: flex;
align-items: center;
max-width: 600px;
}
.slider-demo-block .el-slider {
margin-top: 0;
margin-left: 12px;
}
</style>

8
src/views/components/slider/components/index.ts Normal file
View File

@ -0,0 +1,8 @@
export { default as Base } from "./Base.vue";
export { default as Step } from "./Step.vue";
export { default as Size } from "./Size.vue";
export { default as Input } from "./Input.vue";
export { default as Range } from "./Range.vue";
export { default as Marks } from "./Marks.vue";
export { default as Vertical } from "./Vertical.vue";
export { default as Placement } from "./Placement.vue";

56
src/views/components/slider/index.vue Normal file
View File

@ -0,0 +1,56 @@
<script setup lang="ts">
import {
Base,
Step,
Input,
Size,
Placement,
Range,
Vertical,
Marks
} from "./components";
defineOptions({
name: "PureSlider"
});
</script>
<template>
<el-card shadow="never">
<template #header>
<div class="card-header">
<p class="font-medium">滑块</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/slider/index.vue"
target="_blank"
>
代码位置 src/views/components/slider/index.vue
</el-link>
</div>
</template>
<p class="mb-2">基础用法</p>
<Base />
<el-divider />
<p class="mb-2">离散值</p>
<Step />
<el-divider />
<p class="mb-2">带有输入框的滑块</p>
<Input />
<el-divider />
<p class="mb-2">不同尺寸</p>
<Size />
<el-divider />
<p class="mb-2">位置</p>
<Placement />
<el-divider />
<p class="mb-2">范围选择</p>
<Range />
<el-divider />
<p class="mb-2">垂直模式</p>
<Vertical />
<el-divider />
<p class="mb-2">显示标记</p>
<Marks class="mb-6" />
</el-card>
</template>

2
src/views/components/swiper.vue
View File

@ -121,7 +121,7 @@ const swiperExample: any[] = [
</el-card> </el-card>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
:deep(.el-card__body) { :deep(.el-card__body) {
padding-top: 0; padding-top: 0;
} }

2
src/views/components/text.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
import dayjs from "dayjs"; import dayjs from "dayjs";
import { ref } from "vue"; import { ref } from "vue";
import { ReText } from "@/components/ReText"; import { ReText } from "@/components/ReText";

2
src/views/components/upload/form.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
import { formUpload } from "@/api/mock"; import { formUpload } from "@/api/mock";
import { message } from "@/utils/message"; import { message } from "@/utils/message";

2
src/views/list/card/components/ListCard.vue
View File

@ -89,7 +89,7 @@ const cardLogoClass = computed(() => [
</div> </div>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
.list-card-item { .list-card-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

2
src/views/login/index.vue
View File

@ -96,7 +96,7 @@ const immediateDebounce: any = debounce(
true true
); );
useEventListener(document, "keypress", ({ code }) => { useEventListener(document, "keydown", ({ code }) => {
if ( if (
["Enter", "NumpadEnter"].includes(code) && ["Enter", "NumpadEnter"].includes(code) &&
!disabled.value && !disabled.value &&

105
src/views/markdown/components/Vditor.vue Normal file
View File

@ -0,0 +1,105 @@
<script setup lang="ts">
import "vditor/dist/index.css";
import Vditor from "vditor";
import { useDark } from "@pureadmin/utils";
import { useIntervalFn } from "@vueuse/core";
import { onMounted, ref, watch, toRaw, onUnmounted } from "vue";
const emit = defineEmits([
"update:modelValue",
"after",
"focus",
"blur",
"esc",
"ctrlEnter",
"select"
]);
const props = defineProps({
options: {
type: Object,
default() {
return {};
}
},
modelValue: {
type: String,
default: ""
}
});
const { isDark } = useDark();
const editor = ref<Vditor | null>(null);
const markdownRef = ref<HTMLElement | null>(null);
onMounted(() => {
editor.value = new Vditor(markdownRef.value as HTMLElement, {
...props.options,
value: props.modelValue,
cache: {
enable: false
},
fullscreen: {
index: 10000
},
after() {
emit("after", toRaw(editor.value));
},
input(value: string) {
emit("update:modelValue", value);
},
focus(value: string) {
emit("focus", value);
},
blur(value: string) {
emit("blur", value);
},
esc(value: string) {
emit("esc", value);
},
ctrlEnter(value: string) {
emit("ctrlEnter", value);
},
select(value: string) {
emit("select", value);
}
});
});
watch(
() => props.modelValue,
newVal => {
if (newVal !== editor.value?.getValue()) {
editor.value?.setValue(newVal);
}
}
);
watch(
() => isDark.value,
newVal => {
const { pause } = useIntervalFn(() => {
if (editor.value.vditor) {
newVal
? editor.value.setTheme("dark", "dark", "rose-pine")
: editor.value.setTheme("classic", "light", "github");
pause();
}
}, 20);
}
);
onUnmounted(() => {
const editorInstance = editor.value;
if (!editorInstance) return;
try {
editorInstance?.destroy?.();
} catch (error) {
console.log(error);
}
});
</script>
<template>
<div ref="markdownRef" />
</template>

59
src/views/markdown/index.vue Normal file
View File

@ -0,0 +1,59 @@
<script setup lang="ts">
import { ref } from "vue";
import Vditor from "./components/Vditor.vue";
defineOptions({
name: "Markdown"
});
const text = ref(`
\`\`\`ts
function sayHello(): void {
\tconsole.log("Hello, World!");
}
sayHello();
\`\`\`
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
`);
</script>
<template>
<el-card shadow="never">
<template #header>
<div class="card-header">
<span class="font-medium">
Markdown组件，采用开源的
<el-link
href="https://b3log.org/vditor/"
target="_blank"
style="margin: 0 4px 5px; font-size: 16px"
>
Vditor
</el-link>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/markdown"
target="_blank"
>
代码位置 src/views/markdown
</el-link>
</template>
<h1 class="mb-2">
双向绑定：<span class="text-red-500">{{ text }}</span>
</h1>
<Vditor
v-model="text"
:options="{
height: 560, // 高度
outline: { enable: true, position: 'right' } // 大纲
}"
/>
</el-card>
</template>

2
src/views/monitor/logs/login/index.vue
View File

@ -147,7 +147,7 @@ const {
</div> </div>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) { :deep(.el-dropdown-menu__item i) {
margin: 0; margin: 0;
} }

2
src/views/monitor/logs/operation/index.vue
View File

@ -147,7 +147,7 @@ const {
</div> </div>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) { :deep(.el-dropdown-menu__item i) {
margin: 0; margin: 0;
} }

2
src/views/monitor/logs/system/index.vue
View File

@ -153,7 +153,7 @@ const {
</div> </div>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) { :deep(.el-dropdown-menu__item i) {
margin: 0; margin: 0;
} }

2
src/views/monitor/online/index.vue
View File

@ -107,7 +107,7 @@ const {
</div> </div>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) { :deep(.el-dropdown-menu__item i) {
margin: 0; margin: 0;
} }

2
src/views/system/role/index.vue
View File

@ -327,7 +327,7 @@ onMounted(() => {
</div> </div>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) { :deep(.el-dropdown-menu__item i) {
margin: 0; margin: 0;
} }

2
src/views/system/user/index.vue
View File

@ -254,7 +254,7 @@ const {
</div> </div>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) { :deep(.el-dropdown-menu__item i) {
margin: 0; margin: 0;
} }

2
src/views/table/virtual/list.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import { VxeTableBar } from "@/components/ReVxeTableBar"; import { VxeTableBar } from "@/components/ReVxeTableBar";

2
src/views/table/virtual/pageList.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
import { ref, reactive, computed } from "vue"; import { ref, reactive, computed } from "vue";
import { VxeTableBar } from "@/components/ReVxeTableBar"; import { VxeTableBar } from "@/components/ReVxeTableBar";

2
src/views/table/virtual/treeList.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import treeList from "./tree.json"; import treeList from "./tree.json";
import { VxeTableBar } from "@/components/ReVxeTableBar"; import { VxeTableBar } from "@/components/ReVxeTableBar";

2
src/views/vue-flow/layouting/animationEdge.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
import { computed, nextTick, ref, toRef, watch } from "vue"; import { computed, nextTick, ref, toRef, watch } from "vue";
import { TransitionPresets, executeTransition } from "@vueuse/core"; import { TransitionPresets, executeTransition } from "@vueuse/core";
import { import {

2
src/views/vue-flow/layouting/icon.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
defineProps({ defineProps({
name: { name: {
type: String, type: String,

2
src/views/vue-flow/layouting/index.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
import "@vue-flow/core/dist/style.css"; import "@vue-flow/core/dist/style.css";
import "@vue-flow/core/dist/theme-default.css"; import "@vue-flow/core/dist/theme-default.css";
import Icon from "./icon.vue"; import Icon from "./icon.vue";

2
src/views/vue-flow/layouting/processNode.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup> <script setup lang="ts">
import { toRef } from "vue"; import { toRef } from "vue";
import { Handle, useHandleConnections } from "@vue-flow/core"; import { Handle, useHandleConnections } from "@vue-flow/core";

3
tsconfig.json
View File

@ -4,10 +4,11 @@
"module": "ESNext", "module": "ESNext",
"moduleResolution": "bundler", "moduleResolution": "bundler",
"strict": false, "strict": false,
"strictFunctionTypes": false,
"noImplicitThis": true,
"jsx": "preserve", "jsx": "preserve",
"importHelpers": true, "importHelpers": true,
"experimentalDecorators": true, "experimentalDecorators": true,
"strictFunctionTypes": false,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
"isolatedModules": true, "isolatedModules": true,

1
types/global-components.d.ts vendored
View File

@ -120,6 +120,7 @@ declare module "vue" {
} }
interface ComponentCustomProperties { interface ComponentCustomProperties {
$storage: ResponsiveStorage;
$message: (typeof import("element-plus"))["ElMessage"]; $message: (typeof import("element-plus"))["ElMessage"];
$notify: (typeof import("element-plus"))["ElNotification"]; $notify: (typeof import("element-plus"))["ElNotification"];
$msgbox: (typeof import("element-plus"))["ElMessageBox"]; $msgbox: (typeof import("element-plus"))["ElMessageBox"];