lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:优化代码结构

This commit is contained in:
zouzhibing 2022-11-10 13:12:12 +08:00
parent 00ea15f56b
commit 6fbf1d3514
20 changed files with 3747 additions and 3469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<html lang="en" >
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico">
@ -9,60 +9,116 @@
<body>
<div id="app">
<style>
html,
body,
#app {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
.first-loading-wrp {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 90vh;
min-height: 90vh;
}
.init-loading-wrap{
width: 100%;
height: 100%;
.first-loading-wrp > h1 {
font-size: 30px;
font-weight: bolder;
}
.first-loading-wrp .loading-wrp {
display: flex;
align-items: center;
justify-content: center;
padding: 98px;
}
.init-loading-inner {
width: 20px;
height: 50px;
background: #1890ff;
float: left;
margin: 0 3px;
animation: init-loading-inner linear 1s infinite;
-webkit-animation: init-loading-inner linear 1s infinite;
.dot {
position: relative;
box-sizing: border-box;
display: inline-block;
width: 64px;
height: 64px;
font-size: 64px;
transform: rotate(45deg);
animation: antRotate 1.2s infinite linear;
}
.init-loading-inner:nth-child(1){
animation-delay:0s;
.dot i {
position: absolute;
display: block;
width: 28px;
height: 28px;
background-color: #1890ff;
border-radius: 100%;
opacity: 0.3;
transform: scale(0.75);
transform-origin: 50% 50%;
animation: antSpinMove 1s infinite linear alternate;
}
.init-loading-inner:nth-child(2){
animation-delay:0.15s;
.dot i:nth-child(1) {
top: 0;
left: 0;
}
.init-loading-inner:nth-child(3){
animation-delay:0.3s;
.dot i:nth-child(2) {
top: 0;
right: 0;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.init-loading-inner:nth-child(4){
animation-delay:0.45s;
.dot i:nth-child(3) {
right: 0;
bottom: 0;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.init-loading-inner:nth-child(5){
animation-delay:0.6s;
.dot i:nth-child(4) {
bottom: 0;
left: 0;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
@keyframes init-loading-inner{
0%,60%,100% {transform: scale(1);}
30% {transform: scaleY(3);}
@keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
@-webkit-keyframes init-loading-inner{
0%,60%,100% {transform: scale(1);}
30% {transform: scaleY(3);}
}
@-webkit-keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
@keyframes antSpinMove {
to {
opacity: 1;
}
}
@-webkit-keyframes antSpinMove {
to {
opacity: 1;
}
}
</style>
<div class="init-loading-wrap">
<div class="init-loading-inner"></div>
<div class="init-loading-inner"></div>
<div class="init-loading-inner"></div>
<div class="init-loading-inner"></div>
<div class="init-loading-inner"></div>
<div id="vue-admin-perfect">
<div class="first-loading-wrp">
<div class="loading-wrp">
<span class="dot dot-spin">
<i></i>
<i></i>
<i></i>
<i></i>
</span>
</div>
<h1>vue-admin-perfect</h1>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>

5
package.json
View File

@ -21,12 +21,13 @@
"@wangeditor/editor-for-vue": "^5.1.12",
"axios": "^0.27.2",
"clipboard": "^2.0.10",
"codemirror": "^5.65.9",
"core-js": "^3.6.5",
"dayjs": "^1.11.4",
"default-passive-events": "^2.0.0",
"echarts": "^5.3.1",
"echarts-liquidfill": "^3.1.0",
"element-plus": "^2.2.16",
"element-plus": "^2.2.20",
"exceljs": "^4.3.0",
"file-saver": "^2.0.5",
"fuse.js": "^6.6.2",
@ -53,8 +54,6 @@
"vue-splitpane": "^1.0.6",
"vuedraggable": "^4.1.0",
"vuex": "^4.0.0-0",
"vxe-table": "^4.3.5",
"xe-utils": "^3.5.6",
"xlsx": "^0.18.5"
},
"devDependencies": {

121
src/components/CodeMirror/index.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<textarea ref="codeEditor" placeholder="请输入..." ></textarea>
</template>
<script>
import { defineComponent, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
// codemirror基础资源引入
import _CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
// language
import 'codemirror/mode/javascript/javascript.js'
// theme css
import 'codemirror/theme/monokai.css'
// 折叠资源引入:开始
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/foldgutter.js";
// 折叠资源引入:结束
// 搜索资源引入:开始
import "codemirror/addon/scroll/annotatescrollbar.js";
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/match-highlighter.js";
import "codemirror/addon/search/jump-to-line.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
// 搜索资源引入:结束
// 启用placeholder
import "codemirror/addon/display/placeholder.js";
import "codemirror/addon/selection/active-line.js"; //光标行背景高亮，配置里面也需要styleActiveLine设置为true
const CodeMirror = window.CodeMirror || _CodeMirror;
export default defineComponent({
props: {
modelValue: String,
defaultValue: String,
readOnly: {
type: Boolean,
default: false
}
},
setup(props, context) {
const { modelValue, defaultValue, readOnly } = toRefs(props);
const codeEditor = ref();
let editor;
watch(modelValue, () => {
if (null != editor && modelValue.value && modelValue.value !== editor.getValue()) {
// 触发v-model的双向绑定
editor.setValue(modelValue.value);
}
});
watch(readOnly, () => {
if (null != editor) {
editor.setOption("readOnly", readOnly.value);
}
});
onMounted(() => {
editor = CodeMirror.fromTextArea(codeEditor.value, {
value: modelValue.value,
// mime: "text/javascript",
mode: "application/json",
indentWithTabs: false, // 在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符，默认为false
smartIndent: true, // 自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true
lineNumbers: true, // 是否在编辑器左侧显示行号
matchBrackets: true, // 括号匹配
readOnly: readOnly.value,
// 启用代码折叠相关功能:开始
foldGutter: true,
lineWrapping: true, //是否自动换行
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
// 启用代码折叠相关功能:结束
styleActiveLine: false // 光标行高亮
});
// 监听编辑器的change事件
editor.on("change", () => {
// 触发v-model的双向绑定
context.emit("update:modelValue", editor.getValue());
});
if (defaultValue.value) {
editor.setValue(defaultValue.value);
}
});
onBeforeUnmount(() => {
if (null !== editor) {
editor.toTextArea();
editor = null;
}
});
return { codeEditor };
}
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.CodeMirror-wrap{
height: 100%;
}
.CodeMirror-gutters {
position: absolute;
top: 0;
left: 0;
z-index: 3;
min-height: 100%;
white-space: nowrap;
background-color: transparent;
border-right: 1px solid #ddd;
}
</style>

2
src/layout/Header/components/CollapseIcon.vue
View File

@ -6,7 +6,7 @@
</template>
<script lang="ts" setup>
import {useSettingStore} from "@/store/modules/setting"
import {computed} from "_vue@3.2.40@vue";
import {computed} from "vue";
const SettingStore = useSettingStore()
const isCollapse = computed(() =>!SettingStore.isCollapse)
const handleCollapse = () => {

4
src/layout/Header/components/globalComSize.vue
View File

@ -1,6 +1,6 @@
<template>
<el-dropdown trigger="click" @command="setAssemblySize">
<svg-icon class-name="size-icon" icon-class="size" style="font-size: 20px;"/>
<el-dropdown trigger="hover" @command="setAssemblySize">
<svg-icon class-name="size-icon" icon-class="size" style="font-size: 20px;cursor: pointer"/>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in assemblySizeList" :key="item" :disabled="globalComSize === item" :command="item">

13
src/plugins/vxeTable.ts
View File

@ -1,13 +0,0 @@
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
function useTable (app: App) {
app.use(VXETable)
// 给 vue 实例挂载内部对象，例如：
// app.config.globalProperties.$XModal = VXETable.modal
// app.config.globalProperties.$XPrint = VXETable.print
// app.config.globalProperties.$XSaveFile = VXETable.saveFile
// app.config.globalProperties.$XReadFile = VXETable.readFile
}
export default useTable

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

@ -24,6 +24,12 @@ const othersRouter = [{
name: 'editor',
meta: { title: '富文本编辑器', roles: ['other'] , icon: 'MenuIcon'}
},
{
path: 'code-mirror',
component: () => import('@/views/other/codeMirror/index.vue'),
name: 'code-mirror',
meta: { title: '代码编辑器', roles: ['other'] , icon: 'MenuIcon'}
},
{
path: 'mark-down',
component: () => import('@/views/other/markDown/index.vue'),

1
src/styles/common.scss
View File

@ -83,4 +83,5 @@ body{
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
background: white;
padding: 20px;
box-sizing: border-box;
}

3
src/styles/element-dark.scss
View File

@ -173,5 +173,8 @@ html.dark {
background: none;
}
}
.zb-pro-table .el-table__header th{
color: white!important;
}
}

6
src/views/other/clipboard/index.vue
View File

@ -1,5 +1,6 @@
<template>
<u-container-layout>
<div class="app-container">
<div class="app-container-inner">
<el-card style="margin-bottom: 20px">
<div style="margin-bottom: 10px">输入内容，并点击复制按钮</div>
<el-input v-model="copyValue" placeholder="请输入" style="width: 400px; max-width: 100%" />
@ -11,7 +12,8 @@
<div style="margin-bottom: 10px">复制成功后可在这粘贴测试</div>
<el-input v-model="testValue" placeholder="请输入" style="width: 400px; max-width: 100%" />
</el-card>
</u-container-layout>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

43
src/views/other/codeMirror/index.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<div class="m-code-mirror">
<div class="header">
<el-card >
<div>
<span>代码编辑器组件示例</span>
</div>
</el-card>
</div>
<div class="footer">
<div class="footer-inner">
<CodeMirror/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import CodeMirror from '@/components/CodeMirror/index.vue'
</script>
<style lang="scss" scoped>
.m-code-mirror{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
& .header{
flex-shrink: 0;
}
& .footer{
flex: 1;
box-sizing: border-box;
padding: 10px;
display: flex;
}
.footer-inner{
padding: 10px;
flex: 1;
background: white;
box-sizing: border-box;
}
}
</style>

14
src/views/other/count/index.scss Normal file
View File

@ -0,0 +1,14 @@
.count-to {
display: block;
margin: 10px 0;
text-align: center;
font-size: 40px;
font-weight: 500;
color: $primaryColor;
}
.label {
color: #2f4f4f;
font-size: 16px;
display: inline-block;
margin: 15px 30px 15px 0;
}

68
src/views/other/count/index.vue
View File

@ -1,8 +1,9 @@
<template>
<u-container-layout class="components-container">
<div class="app-container">
<div class="app-container-inner">
<count-to
ref="example"
class="example"
class="count-to"
:start-val="options.startValInput"
:end-val="options.endValInput"
:duration="options.durationInput"
@ -85,7 +86,8 @@
<el-descriptions-item label="prefix"> 前缀 </el-descriptions-item>
<el-descriptions-item label="suffix"> 后缀 </el-descriptions-item>
</el-descriptions>
</u-container-layout>
</div>
</div>
</template>
<script lang="ts" setup>
@ -101,9 +103,7 @@
suffix: '元',
separator: ',',
})
const handleChange = (val, type) => {
}
const handleChange = (val, type) => {}
const start = () => {
example.value.start()
}
@ -113,59 +113,5 @@
</script>
<style scoped lang="scss">
.example {
display: block;
margin: 10px 0;
text-align: center;
font-size: 40px;
font-weight: 500;
color: $primaryColor;
/*background: linear-gradient(0deg,#77e0a0,#75c3e9);*/
/*-webkit-background-clip: text;*/
/*-webkit-text-fill-color: transparent;*/
}
.label {
color: #2f4f4f;
font-size: 16px;
display: inline-block;
margin: 15px 30px 15px 0;
}
input {
position: relative;
display: inline-block;
padding: 4px 7px;
width: 70px;
height: 28px;
cursor: text;
font-size: 12px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.65);
background-color: #fff;
background-image: none;
border: 1px solid #d9d9d9;
border-radius: 4px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.startBtn {
margin-left: 20px;
font-size: 20px;
color: #30b08f;
background-color: #fff;
}
.startBtn:hover {
background-color: #30b08f;
color: #fff;
border-color: #30b08f;
}
.pause-resume-btn {
font-size: 20px;
color: #e65d6e;
background-color: #fff;
}
.pause-resume-btn:hover {
background-color: #e65d6e;
color: #fff;
border-color: #e65d6e;
}
@import "./index";
</style>

3
src/views/other/editor/index.vue
View File

@ -27,9 +27,6 @@
<el-descriptions-item label="参考文档"> <a href="https://www.wangeditor.com/v5/for-frame.html" target="_blank"> https://www.wangeditor.com/v5/for-frame.html </a> </el-descriptions-item>
</el-descriptions>
<el-dialog
v-model="dialogVisible"
title="预览"

0
src/views/other/fullScreen.vue → src/views/other/fullScreen/index.vue
View File

0
src/views/other/share.vue
View File

59
src/views/other/splitpane.vue
View File

@ -1,59 +0,0 @@
<template>
<u-container-layout>
<splitpanes style="height: 800px">
<pane min-size="20" class="left">1</pane>
<pane>
<splitpanes horizontal>
<pane class="item1">2</pane>
<pane class="item2">3</pane>
<pane class="item3">4</pane>
</splitpanes>
</pane>
<pane class="item4">5</pane>
</splitpanes>
</u-container-layout>
</template>
<script lang="ts" setup>
// 参考文档 https://antoniandre.github.io/splitpanes/
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
</script>
<style scoped lang="scss">
.splitpanes__pane {
display: flex;
justify-content: center;
align-items: center;
background: red;
font-family: Helvetica, Arial, sans-serif;
color: rgba(255, 255, 255, 0.6);
font-size: 5em;
}
.left {
background: #f38181;
}
.item1 {
background: #fce38a;
}
.item2 {
background: #95e1d3;
}
.item3 {
background: rgb(72, 239, 205);
}
.item4 {
background: rgb(106, 170, 20);
}
.item5 {
background: rgb(72, 239, 205);
}
::v-deep(.splitpanes__splitter) {
min-width: 6px;
}
::v-deep(.splitpanes__splitter) {
min-height: 6px;
cursor: row-resize;
background: white;
}
</style>

8
src/views/other/upload/index.vue
View File

@ -1,6 +1,5 @@
<template>
<u-container-layout>
<div>
<div class="app-container">
<el-card style="margin-bottom: 10px">
<template #header>
<span>按钮上传</span>
@ -21,14 +20,14 @@
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-card>
<el-card>
<el-card style="margin-bottom: 10px">
<template #header>
<span>多图片上传</span>
</template>
<Upload @update="update" v-model="imgs" />
</el-card>
<el-card>
<el-card >
<template #header>
<span>拖拽上传</span>
</template>
@ -54,7 +53,6 @@
</el-upload>
</el-card>
</div>
</u-container-layout>
</template>
<script setup lang="ts">

2
vite.config.ts
View File

@ -63,7 +63,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
server: {
// 服务器主机名，如果允许外部访问，可设置为 "0.0.0.0" 也可设置成你的ip地址
host: '0.0.0.0',
port: 8100,
port: 8080,
open: true,
https: false,
cors: true,

6530
yarn.lock
View File

File diff suppressed because it is too large Load Diff