mirror of
https://github.com/fugary/simple-element-plus-template.git
synced 2026-02-22 22:27:00 +00:00
Merge remote-tracking branch 'origin/main'
This commit is contained in:
gary.fu
@@ -17,6 +17,7 @@ module.exports = {
|
||||
},
|
||||
rules: {
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'@typescript-eslint/no-unused-expressions': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off'
|
||||
}
|
||||
}
|
||||
|
||||
9877
package-lock.json
generated
9877
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
54
package.json
54
package.json
@@ -14,44 +14,44 @@
|
||||
"url": "https://github.com/fugary/simple-element-plus-template"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@guolao/vue-monaco-editor": "^1.5.5",
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@guolao/vue-monaco-editor": "^1.6.0",
|
||||
"@howiefh/ant-path-matcher": "^0.0.4",
|
||||
"@vicons/material": "^0.12.0",
|
||||
"@vueuse/core": "^10.11.1",
|
||||
"@vicons/material": "^0.13.0",
|
||||
"@vueuse/core": "^14.2.0",
|
||||
"async-validator": "^4.2.5",
|
||||
"axios": "^1.7.9",
|
||||
"dayjs": "^1.11.13",
|
||||
"echarts": "^5.5.0",
|
||||
"element-plus": "^2.9.11",
|
||||
"lodash-es": "^4.17.21",
|
||||
"monaco-editor": "^0.52.2",
|
||||
"axios": "^1.13.4",
|
||||
"dayjs": "^1.11.19",
|
||||
"echarts": "^6.0.0",
|
||||
"element-plus": "^2.13.2",
|
||||
"lodash-es": "^4.17.23",
|
||||
"monaco-editor": "^0.55.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"numeral": "^2.0.6",
|
||||
"pinia": "^2.3.1",
|
||||
"pinia-plugin-persistedstate": "^3.2.3",
|
||||
"pinia": "^3.0.4",
|
||||
"pinia-plugin-persistedstate": "^4.7.1",
|
||||
"sortablejs": "^1.15.6",
|
||||
"split.js": "^1.6.5",
|
||||
"ua-parser-js": "^1.0.38",
|
||||
"vite-plugin-mock": "^3.0.1",
|
||||
"vue": "^3.4.38",
|
||||
"vue-echarts": "^6.7.3",
|
||||
"vue-i18n": "^9.14.4",
|
||||
"vue-router": "^4.5.1",
|
||||
"ua-parser-js": "^2.0.8",
|
||||
"vite-plugin-mock": "^3.0.2",
|
||||
"vue": "^3.5.27",
|
||||
"vue-echarts": "^8.0.1",
|
||||
"vue-i18n": "^11.2.8",
|
||||
"vue-router": "^5.0.1",
|
||||
"vue-virtual-scroller": "^2.0.0-beta.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.10.5",
|
||||
"@typescript-eslint/eslint-plugin": "^7.13.1",
|
||||
"@typescript-eslint/parser": "^7.18.0",
|
||||
"@vitejs/plugin-vue": "^5.2.4",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
"@rushstack/eslint-patch": "^1.15.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.54.0",
|
||||
"@typescript-eslint/parser": "^8.54.0",
|
||||
"@vitejs/plugin-vue": "^6.0.3",
|
||||
"@vitejs/plugin-vue-jsx": "^5.1.3",
|
||||
"@vue/eslint-config-standard": "^8.0.1",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-plugin-vue": "^9.32.0",
|
||||
"rollup-plugin-visualizer": "^5.14.0",
|
||||
"typescript": "^5.7.3",
|
||||
"vite": "^5.4.19",
|
||||
"eslint-plugin-vue": "^9.33.0",
|
||||
"rollup-plugin-visualizer": "^6.0.5",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "^7.3.1",
|
||||
"vite-plugin-eslint": "^1.8.1"
|
||||
}
|
||||
}
|
||||
263
src/assets/login.css
Normal file
263
src/assets/login.css
Normal file
@@ -0,0 +1,263 @@
|
||||
/* Login Page Styles */
|
||||
.login-container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
/* Left Branding Section */
|
||||
.login-branding {
|
||||
width: 50%;
|
||||
background: linear-gradient(135deg, #001529 0%, #003a73 100%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Decorative Circle */
|
||||
.branding-decoration {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 50vw;
|
||||
height: 50vw;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
|
||||
animation: float 20s infinite ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.branding-content {
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
padding: 0 40px;
|
||||
animation: fadeIn 1.2s ease-out;
|
||||
}
|
||||
|
||||
.branding-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.branding-subtitle {
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
opacity: 0.9;
|
||||
letter-spacing: 1px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.branding-footer {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
font-size: 14px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Right Form Section */
|
||||
.login-form-section {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--el-bg-color);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-tools {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 40px;
|
||||
animation: slideUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
margin-bottom: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-header h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--el-text-color-primary);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.form-subtitle {
|
||||
font-size: 16px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Form Styles */
|
||||
.modern-form .el-form-item {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.modern-form .el-input__wrapper {
|
||||
box-shadow: none;
|
||||
background-color: var(--el-fill-color-light);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 1px 11px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.modern-form .el-input__wrapper:hover {
|
||||
background-color: var(--el-fill-color);
|
||||
}
|
||||
|
||||
.modern-form .el-input__wrapper.is-focus {
|
||||
background-color: var(--el-bg-color);
|
||||
border-color: var(--el-color-primary);
|
||||
box-shadow: 0 0 0 1px var(--el-color-primary) inset;
|
||||
}
|
||||
|
||||
.modern-form .el-input__inner {
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
.form-actions {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-slide-enter-active,
|
||||
.fade-slide-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
.login-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.login-branding {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.branding-title {
|
||||
font-size: 32px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.branding-subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.branding-decoration {
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
top: -50vw;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.login-form-section {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-tools {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,18 @@
|
||||
body, #app .el-header{
|
||||
body,
|
||||
#app .el-header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
--el-border-radius-large: 6px;
|
||||
}
|
||||
|
||||
html, body, #app, .index-container {
|
||||
html,
|
||||
body,
|
||||
#app,
|
||||
.index-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -60,18 +65,23 @@ html, body, #app, .index-container {
|
||||
.padding-left1 {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.padding-left2 {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.padding-left3 {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.padding-right1 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.padding-right2 {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.padding-right3 {
|
||||
padding-right: 15px;
|
||||
}
|
||||
@@ -79,18 +89,23 @@ html, body, #app, .index-container {
|
||||
.padding-top1 {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.padding-top2 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.padding-top3 {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.padding-bottom1 {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.padding-bottom2 {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.padding-bottom3 {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
@@ -98,9 +113,11 @@ html, body, #app, .index-container {
|
||||
.margin-bottom1 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.margin-bottom2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.margin-bottom3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@@ -108,9 +125,11 @@ html, body, #app, .index-container {
|
||||
.margin-left1 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.margin-left2 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.margin-left3 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
@@ -118,9 +137,11 @@ html, body, #app, .index-container {
|
||||
.margin-right1 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.margin-right2 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.margin-right3 {
|
||||
margin-right: 15px;
|
||||
}
|
||||
@@ -128,9 +149,11 @@ html, body, #app, .index-container {
|
||||
.margin-top1 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.margin-top2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.margin-top3 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
@@ -138,9 +161,11 @@ html, body, #app, .index-container {
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -173,17 +198,21 @@ html, body, #app, .index-container {
|
||||
border-radius: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.el-dialog.is-fullscreen .el-dialog__header {
|
||||
margin-top: -20px;
|
||||
padding-top: 20px;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.el-dialog.is-fullscreen .el-dialog__footer {
|
||||
bottom: var(--el-dialog-padding-primary);
|
||||
}
|
||||
|
||||
.el-dialog.is-fullscreen .dialog-footer {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.el-dialog.is-fullscreen .el-dialog__body {
|
||||
padding: 48px 12px;
|
||||
}
|
||||
@@ -192,6 +221,7 @@ html, body, #app, .index-container {
|
||||
z-index: 10;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.icon-list::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
width: 6px;
|
||||
@@ -301,7 +331,8 @@ html, body, #app, .index-container {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.common-autocomplete .el-tabs__nav-next, .el-tabs__nav-prev {
|
||||
.common-autocomplete .el-tabs__nav-next,
|
||||
.el-tabs__nav-prev {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
@@ -441,6 +472,7 @@ html, body, #app, .index-container {
|
||||
float: right;
|
||||
width: calc(100% - 140px) !important;
|
||||
}
|
||||
|
||||
.common-params-edit .el-upload-list {
|
||||
margin-left: -515px;
|
||||
width: 700px;
|
||||
@@ -453,12 +485,15 @@ html, body, #app, .index-container {
|
||||
.request-table {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.request-table .el-table__row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.request-table .current-row td:first-child {
|
||||
border-left: 4px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.request-table td {
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
@@ -506,6 +541,62 @@ html, body, #app, .index-container {
|
||||
resize: horizontal;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.disable-affix .el-affix--fixed {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
/* Theme transition animation (from Element Plus) */
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation: none;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
::view-transition-old(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
z-index: 2147483646;
|
||||
}
|
||||
|
||||
.dark::view-transition-old(root) {
|
||||
z-index: 2147483646;
|
||||
}
|
||||
|
||||
.dark::view-transition-new(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 整体编辑器区域 */
|
||||
.monaco-editor.vs {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
/* gutter（行号区） */
|
||||
.monaco-editor.vs .margin {
|
||||
background-color: #f0f2f5;
|
||||
box-shadow: inset -1px 0 0 #dcdfe6;
|
||||
}
|
||||
|
||||
/* 内容区 */
|
||||
.monaco-editor.vs .monaco-editor-background {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Dark Mode Editor Contrast */
|
||||
.dark .monaco-editor.vs-dark {
|
||||
background-color: var(--el-bg-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dark .monaco-editor.vs-dark .margin {
|
||||
background-color: #252526 !important;
|
||||
box-shadow: inset -1px 0 0 #424242;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dark .monaco-editor.vs-dark .monaco-editor-background {
|
||||
background-color: #1e1e1e !important;
|
||||
}
|
||||
@@ -51,5 +51,38 @@ const activeRoutePath = computed(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-menu) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Base Item Style */
|
||||
:deep(.el-menu-item),
|
||||
:deep(.el-sub-menu__title) {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
/* Vertical Menu Active State (Default) */
|
||||
:deep(.el-menu:not(.el-menu--horizontal) .el-menu-item.is-active) {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
border-right: 3px solid var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Dark Mode Active Override */
|
||||
.dark :deep(.el-menu:not(.el-menu--horizontal) .el-menu-item.is-active) {
|
||||
background-color: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Hover Effects */
|
||||
:deep(.el-menu-item:hover),
|
||||
:deep(.el-sub-menu__title:hover) {
|
||||
background-color: var(--el-fill-color-light);
|
||||
color: var(--el-menu-text-color);
|
||||
}
|
||||
|
||||
.dark :deep(.el-menu-item:hover),
|
||||
.dark :deep(.el-sub-menu__title:hover) {
|
||||
background-color: var(--el-bg-color-overlay);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -121,7 +121,96 @@ onBeforeUnmount(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.common-tabs .el-tabs__header {
|
||||
:deep(.el-tabs__header) {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid var(--el-border-color-light) !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav) {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
/* Allow pseudo-elements to overflow and cover the header border */
|
||||
:deep(.el-tabs__nav-wrap),
|
||||
:deep(.el-tabs__nav-scroll) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
border: 1px solid transparent !important;
|
||||
margin: 0 4px 0 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
/* Default inactive background */
|
||||
background-color: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
/* Bottom border for inactive tabs */
|
||||
:deep(.el-tabs__item:not(.is-active)) {
|
||||
border-bottom: 1px solid var(--el-border-color-light) !important;
|
||||
}
|
||||
|
||||
/* Specific styling for active tab to look "connected" to content */
|
||||
:deep(.el-tabs__item.is-active) {
|
||||
background-color: var(--el-bg-color);
|
||||
border-left: 1px solid var(--el-border-color-light) !important;
|
||||
border-right: 1px solid var(--el-border-color-light) !important;
|
||||
border-top: 1px solid var(--el-border-color-light) !important;
|
||||
border-bottom: 1px solid transparent !important;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Cover the header bottom border under active tab */
|
||||
:deep(.el-tabs__item.is-active)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background-color: var(--el-bg-color);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Top highlight line for active tab */
|
||||
:deep(.el-tabs__item.is-active)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
height: 2px;
|
||||
background-color: var(--el-color-primary);
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item:not(.is-active):hover) {
|
||||
background-color: var(--el-fill-color);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
.dark :deep(.el-tabs__header) {
|
||||
border-bottom: 1px solid var(--el-border-color-darker) !important;
|
||||
}
|
||||
|
||||
.dark :deep(.el-tabs__item) {
|
||||
background-color: var(--el-bg-color-overlay);
|
||||
}
|
||||
|
||||
.dark :deep(.el-tabs__item:not(.is-active)) {
|
||||
border-bottom: 1px solid var(--el-border-color-darker) !important;
|
||||
}
|
||||
|
||||
.dark :deep(.el-tabs__item.is-active) {
|
||||
background-color: var(--el-bg-color);
|
||||
border-color: var(--el-border-color-darker) !important;
|
||||
border-bottom-color: transparent !important;
|
||||
}
|
||||
|
||||
.dark :deep(.el-tabs__item.is-active)::before {
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,6 +3,7 @@ export const common = baseMessages()
|
||||
|
||||
common.label.title = '简单Element+模板'
|
||||
common.label.login = '登录'
|
||||
common.label.logining = '登录中...'
|
||||
common.label.index = '首页'
|
||||
common.label.settings = '设置'
|
||||
common.label.confirm = '确认'
|
||||
@@ -88,6 +89,8 @@ common.msg.commonInput = '请输入{0}'
|
||||
common.msg.networkError = '网络异常，请稍后再试.'
|
||||
common.msg.networkTimeout = '系统处理超时，请稍后再试.'
|
||||
common.msg.loginTitle = '用户登录'
|
||||
common.msg.loginSubtitle = '企业级快速开发平台'
|
||||
common.msg.loginWelcome = '欢迎回来，请输入您的账号密码'
|
||||
common.msg.loading = '系统正在处理中，请稍候...'
|
||||
common.msg.saveSuccess = '保存成功。'
|
||||
common.msg.operationSuccess = '操作成功。'
|
||||
|
||||
@@ -3,6 +3,7 @@ export const common = baseMessages()
|
||||
|
||||
common.label.title = 'Simple Element+'
|
||||
common.label.login = 'Login'
|
||||
common.label.logining = 'Logging in...'
|
||||
common.label.index = 'Home'
|
||||
common.label.settings = 'Settings'
|
||||
common.label.confirm = 'Confirm'
|
||||
@@ -88,6 +89,8 @@ common.msg.commonInput = 'Please input {0}'
|
||||
common.msg.networkError = 'Network error, please try later.'
|
||||
common.msg.networkTimeout = 'System process timeout, please try later.'
|
||||
common.msg.loginTitle = 'User Login'
|
||||
common.msg.loginSubtitle = 'Enterprise Rapid Development Platform'
|
||||
common.msg.loginWelcome = 'Welcome back, please enter your credentials'
|
||||
common.msg.loading = 'Loading, please wait...'
|
||||
common.msg.saveSuccess = 'Save Success.'
|
||||
common.msg.operationSuccess = 'Operation Success.'
|
||||
|
||||
@@ -16,6 +16,7 @@ import { GlobalLocales } from '@/consts/GlobalConstants'
|
||||
import { useLoginConfigStore } from '@/stores/LoginConfigStore'
|
||||
import { I18N_ENABLED, THEME_ENABLED } from '@/config'
|
||||
import { $logout } from '@/utils'
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
export const searchMenusResult = (queryParam, config) => {
|
||||
return $httpPost('/api/searchMenus', queryParam, config)
|
||||
@@ -135,6 +136,67 @@ const processMenus = (menus, parent = undefined) => {
|
||||
|
||||
export const useThemeAndLocaleMenus = () => {
|
||||
const globalConfigStore = useGlobalConfigStore()
|
||||
|
||||
const toggleTheme = (event) => {
|
||||
// Attempt to get coordinates from the event or global event
|
||||
// Element Plus el-menu-item emits a custom object, not a MouseEvent, so event.clientX might be missing.
|
||||
const mouseEvent = event && typeof event.clientX === 'number' ? event : window.event
|
||||
const x = mouseEvent?.clientX ?? window.innerWidth / 2
|
||||
const y = mouseEvent?.clientY ?? window.innerHeight / 2
|
||||
|
||||
const endRadius = Math.hypot(
|
||||
Math.max(x, innerWidth - x),
|
||||
Math.max(y, innerHeight - y)
|
||||
)
|
||||
|
||||
// Fallback for browsers without View Transition API
|
||||
if (!document.startViewTransition) {
|
||||
globalConfigStore.changeTheme(!globalConfigStore.isDarkTheme)
|
||||
return
|
||||
}
|
||||
|
||||
// Disable transitions to prevent "fading" snapshot
|
||||
const css = document.createElement('style')
|
||||
css.appendChild(document.createTextNode(`* {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
-ms-transition: none !important;
|
||||
transition: none !important;
|
||||
}`))
|
||||
document.head.appendChild(css)
|
||||
|
||||
const transition = document.startViewTransition(async () => {
|
||||
globalConfigStore.changeTheme(!globalConfigStore.isDarkTheme)
|
||||
await nextTick()
|
||||
})
|
||||
|
||||
transition.ready.then(() => {
|
||||
const clipPath = [
|
||||
`circle(0px at ${x}px ${y}px)`,
|
||||
`circle(${endRadius}px at ${x}px ${y}px)`
|
||||
]
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: globalConfigStore.isDarkTheme ? [...clipPath].reverse() : clipPath
|
||||
},
|
||||
{
|
||||
duration: 400,
|
||||
easing: 'ease-in',
|
||||
fill: 'forwards',
|
||||
pseudoElement: globalConfigStore.isDarkTheme
|
||||
? '::view-transition-old(root)'
|
||||
: '::view-transition-new(root)'
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
// Clean up the transition disable style after the animation finishes
|
||||
transition.finished.then(() => {
|
||||
document.head.removeChild(css)
|
||||
})
|
||||
}
|
||||
|
||||
return [{
|
||||
icon: 'LanguageFilled',
|
||||
isDropdown: true,
|
||||
@@ -156,7 +218,7 @@ export const useThemeAndLocaleMenus = () => {
|
||||
isDropdown: true,
|
||||
enabled: THEME_ENABLED,
|
||||
iconIf: () => !globalConfigStore.isDarkTheme ? 'moon' : 'sunny',
|
||||
click: () => globalConfigStore.changeTheme(!globalConfigStore.isDarkTheme)
|
||||
click: (event) => toggleTheme(event)
|
||||
}]
|
||||
}
|
||||
|
||||
|
||||
1
src/vendors/monaco-editor.js
vendored
1
src/vendors/monaco-editor.js
vendored
@@ -17,7 +17,6 @@ const defaultConfig = {
|
||||
automaticLayout: true,
|
||||
autoIndent: 'full',
|
||||
scrollBeyondLastLine: false,
|
||||
theme: 'vs-dark',
|
||||
wordWrap: 'on',
|
||||
readOnly: true
|
||||
}
|
||||
|
||||
@@ -96,5 +96,10 @@ useMenuConfigStore().loadBusinessMenus()
|
||||
</el-container>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.tabs-header {
|
||||
padding-top: 6px !important;
|
||||
height: auto !important;
|
||||
border-bottom: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,40 +4,51 @@ import { useRouter } from 'vue-router'
|
||||
import { useThemeAndLocaleMenus } from '@/services/menu/MenuService'
|
||||
import { useLoginConfigStore } from '@/stores/LoginConfigStore'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Lock, User } from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
const loginConfigStore = useLoginConfigStore()
|
||||
|
||||
const themeAndLocaleMenus = ref(useThemeAndLocaleMenus())
|
||||
|
||||
/**
|
||||
* @type {[CommonFormOption]}
|
||||
*/
|
||||
const loginFormOptions = [{
|
||||
labelKey: 'common.label.username',
|
||||
required: true,
|
||||
prop: 'userName'
|
||||
prop: 'userName',
|
||||
attrs: {
|
||||
size: 'large',
|
||||
'prefix-icon': User
|
||||
}
|
||||
}, {
|
||||
labelKey: 'common.label.password',
|
||||
required: true,
|
||||
prop: 'userPassword',
|
||||
attrs: {
|
||||
showPassword: true
|
||||
size: 'large',
|
||||
showPassword: true,
|
||||
'prefix-icon': Lock
|
||||
}
|
||||
}]
|
||||
|
||||
/**
|
||||
* @type {LoginVo}
|
||||
*/
|
||||
const loginVo = ref({
|
||||
userName: 'admin',
|
||||
userPassword: '123456'
|
||||
})
|
||||
|
||||
const submitForm = form => {
|
||||
form.validate(async (valid) => {
|
||||
const loading = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
const submitForm = async () => {
|
||||
const form = formRef.value?.form
|
||||
if (!form) return
|
||||
|
||||
await form.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loading.value = true
|
||||
const loginResult = await loginConfigStore.login(loginVo.value)
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
if (loginResult.success) {
|
||||
router.push('/')
|
||||
} else {
|
||||
@@ -46,60 +57,92 @@ const submitForm = form => {
|
||||
}
|
||||
})
|
||||
}
|
||||
const formRef = ref()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-container>
|
||||
<el-card class="login-form">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ $t('common.msg.loginTitle') }}</span>
|
||||
<div class="login-container">
|
||||
<!-- Tools -->
|
||||
<div class="login-tools">
|
||||
<common-menu
|
||||
:menus="themeAndLocaleMenus"
|
||||
mode="horizontal"
|
||||
:ellipsis="false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Left Branding -->
|
||||
<div class="login-branding">
|
||||
<div class="branding-decoration" />
|
||||
<div class="branding-content">
|
||||
<transition
|
||||
name="fade-slide"
|
||||
mode="out-in"
|
||||
>
|
||||
<div :key="$i18n.locale">
|
||||
<h1 class="branding-title">
|
||||
{{ $t('common.label.title') }}
|
||||
</h1>
|
||||
<p class="branding-subtitle">
|
||||
{{ $t('common.msg.loginSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Form Section -->
|
||||
<div class="login-form-section">
|
||||
<div class="form-wrapper">
|
||||
<div class="form-header">
|
||||
<h2>{{ $t('common.msg.loginTitle') }}</h2>
|
||||
<p class="form-subtitle">
|
||||
{{ $t('common.msg.loginWelcome') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<common-form
|
||||
ref="formRef"
|
||||
:model="loginVo"
|
||||
:options="loginFormOptions"
|
||||
label-width="100px"
|
||||
class="modern-form"
|
||||
label-position="top"
|
||||
:show-buttons="false"
|
||||
@submit-form="submitForm"
|
||||
/>
|
||||
<template #footer>
|
||||
|
||||
<div class="form-actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm(formRef.form)"
|
||||
class="login-btn"
|
||||
:loading="loading"
|
||||
@click="submitForm"
|
||||
>
|
||||
{{ $t('common.label.submit') }}
|
||||
{{ loading ? $t('common.label.logining') : $t('common.label.login') }}
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
class="reset-btn"
|
||||
text
|
||||
@click="formRef.form.resetFields()"
|
||||
>
|
||||
{{ $t('common.label.reset') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-card>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<style scoped src="@/assets/login.css"></style>
|
||||
|
||||
<style scoped>
|
||||
.login-form {
|
||||
width: 500px;
|
||||
margin: 5% auto;
|
||||
:deep(.el-menu--horizontal) {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
:deep(.el-menu--horizontal > .el-menu-item) {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.el-menu--horizontal.el-menu {
|
||||
border-bottom: none;
|
||||
:deep(.el-menu--horizontal > .el-menu-item.is-active) {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -45,6 +45,7 @@ const chartConfig = {
|
||||
<v-chart
|
||||
v-if="chartConfig"
|
||||
class="chart"
|
||||
:key="theme"
|
||||
:theme="theme"
|
||||
:option="chartConfig"
|
||||
autoresize
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
<script setup>
|
||||
import { useMonacoEditorOptions } from '@/vendors/monaco-editor'
|
||||
import { $copyText } from '@/utils'
|
||||
import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const globalConfigStore = useGlobalConfigStore()
|
||||
const { contentRef, languageRef, editorRef, monacoEditorOptions, formatDocument } = useMonacoEditorOptions({
|
||||
readOnly: false
|
||||
})
|
||||
const theme = computed(() => {
|
||||
return globalConfigStore.isDarkTheme ? 'vs-dark' : 'vs'
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -13,6 +21,7 @@ const { contentRef, languageRef, editorRef, monacoEditorOptions, formatDocument
|
||||
:language="languageRef"
|
||||
height="400px"
|
||||
:options="monacoEditorOptions"
|
||||
:theme="theme"
|
||||
@mount="editorRef=$event"
|
||||
/>
|
||||
<el-footer
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { filterIconsByKeywords } from '@/services/icon/IconService'
|
||||
import { $copyText } from '@/utils'
|
||||
|
||||
const colSize = ref(8)
|
||||
const keyWords = ref('')
|
||||
@@ -12,20 +11,8 @@ const filterIcons = computed(() => {
|
||||
})
|
||||
|
||||
const copyIcon = (icon) => {
|
||||
const { copy, isSupported } = useClipboard()
|
||||
const iconStr = `<common-icon icon="${icon}"/>`
|
||||
if (isSupported) {
|
||||
copy(iconStr)
|
||||
ElMessage({
|
||||
message: `Copied: ${iconStr}`,
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
message: `Copy Not supported: ${iconStr}`,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
$copyText({ text: iconStr, success: `Copied: ${iconStr}` })
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -75,14 +62,23 @@ const copyIcon = (icon) => {
|
||||
</el-col>
|
||||
</el-row>
|
||||
</recycle-scroller>
|
||||
<el-backtop
|
||||
v-common-tooltip="$t('common.label.backtop')"
|
||||
target=".scroller"
|
||||
:right="40"
|
||||
:bottom="40"
|
||||
/>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.scroller, .icon-container {
|
||||
.scroller {
|
||||
height: 100%;
|
||||
}
|
||||
.icon-container {
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
.icon-container .el-input {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite'
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { viteMockServe } from 'vite-plugin-mock'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
@@ -16,9 +16,6 @@ const optionalPlugins = [{
|
||||
mockPath: './mock'
|
||||
}),
|
||||
enabled: true
|
||||
}, {
|
||||
plugin: splitVendorChunkPlugin(),
|
||||
enabled: true
|
||||
}].filter(p => p.enabled).map(p => p.plugin)
|
||||
|
||||
const JS_FILE_NAMES = 'js/[name]-[hash].js'
|
||||
|
||||
Reference in New Issue
Block a user