diff --git a/.env.development b/.env.development index 1f20bb3..85ee64f 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,5 @@ +# 应用名称 +VITE_APP_NAME=（开发环境）再昇云收运处平台 # 后台服务地址 # VITE_HTTP_PROXY_TARGET=http://localhost:10086 # VITE_HTTP_PROXY_TARGET=http://192.168.2.124:10086 diff --git a/package-lock.json b/package-lock.json index ccd1524..db8d594 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "colorette": "^2.0.20", "fflate": "^0.8.2", "filesize": "^11.0.2", + "sass": "^1.97.2", "stylus": "^0.64.0", "typescript": "~5.8.3", "typescript-plugin-css-modules": "^5.2.0", @@ -39,6 +40,7 @@ "unplugin-vue-components": "^29.0.0", "vite": "^7.1.2", "vite-plugin-vue-devtools": "^8.0.1", + "vue-component-type-helpers": "^3.2.2", "vue-tsc": "^3.0.5" } }, @@ -80,6 +82,7 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -1062,6 +1065,7 @@ "integrity": "sha512-lLt8KLHyl7IClc3RqRpRikz15eCfTRlAWL9leVzPyg5N87FfKE/7EWgWvpiL/z4Tf3dQCIqQb88TmHE0JTIDvA==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "c12": "^3.3.1", "consola": "^3.4.2", @@ -1773,6 +1777,7 @@ "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz", "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==", "license": "MIT", + "peer": true, "dependencies": { "@types/lodash": "*" } @@ -1790,6 +1795,7 @@ "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -2443,6 +2449,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -3740,13 +3747,15 @@ "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/lodash-es": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/lodash-unified": { "version": "1.0.3", @@ -4243,6 +4252,7 @@ "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz", "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==", "license": "MIT", + "peer": true, "dependencies": { "@vue/devtools-api": "^7.7.7" }, @@ -4315,6 +4325,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -4598,9 +4609,9 @@ "optional": true }, "node_modules/sass": { - "version": "1.94.2", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz", - "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==", + "version": "1.97.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.2.tgz", + "integrity": "sha512-y5LWb0IlbO4e97Zr7c3mlpabcbBtS+ieiZ9iwDooShpFKWXf62zz5pEPdwrLYm+Bxn1fnbwFGzHuCLSA9tBmrw==", "dev": true, "license": "MIT", "dependencies": { @@ -4933,6 +4944,7 @@ "integrity": "sha512-ZIdT8eUv8tegmqy1tTIdJv9We2DumkNZFdCF5mz/Kpq3OcTaxSuCAYZge6HKK2CmNC02G1eJig2RV7XTw5hQrA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@adobe/css-tools": "~4.3.3", "debug": "^4.3.2", @@ -5013,6 +5025,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "devOptional": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -5070,6 +5083,7 @@ "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "devOptional": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -5532,6 +5546,7 @@ "integrity": "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -5822,6 +5837,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -5841,6 +5857,7 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.25.tgz", "integrity": "sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==", "license": "MIT", + "peer": true, "dependencies": { "@vue/compiler-dom": "3.5.25", "@vue/compiler-sfc": "3.5.25", @@ -5857,6 +5874,13 @@ } } }, + "node_modules/vue-component-type-helpers": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.2.2.tgz", + "integrity": "sha512-x8C2nx5XlUNM0WirgfTkHjJGO/ABBxlANZDtHw2HclHtQnn+RFPTnbjMJn8jHZW4TlUam0asHcA14lf1C6Jb+A==", + "dev": true, + "license": "MIT" + }, "node_modules/vue-router": { "version": "4.6.3", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.3.tgz", diff --git a/package.json b/package.json index 8291fda..b1def08 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "colorette": "^2.0.20", "fflate": "^0.8.2", "filesize": "^11.0.2", + "sass": "^1.97.2", "stylus": "^0.64.0", "typescript": "~5.8.3", "typescript-plugin-css-modules": "^5.2.0", @@ -41,6 +42,7 @@ "unplugin-vue-components": "^29.0.0", "vite": "^7.1.2", "vite-plugin-vue-devtools": "^8.0.1", + "vue-component-type-helpers": "^3.2.2", "vue-tsc": "^3.0.5" } } diff --git a/src/assets/scss/el-dark.scss b/src/assets/scss/el-dark.scss new file mode 100644 index 0000000..8f81cdf --- /dev/null +++ b/src/assets/scss/el-dark.scss @@ -0,0 +1,2 @@ +// 导入暗黑主题 +@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *; diff --git a/src/assets/scss/el-light.scss b/src/assets/scss/el-light.scss new file mode 100644 index 0000000..ea06e9e --- /dev/null +++ b/src/assets/scss/el-light.scss @@ -0,0 +1,34 @@ +// https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss +// 自定义Element 亮色主题 + +@forward 'element-plus/theme-chalk/src/common/var.scss' with ( + $colors: ( + 'white': #FFFFFF, + 'black': #000000, + 'success': ( + 'base': #13DEB9 + ), + 'warning': ( + 'base': #FFAE1F + ), + 'danger': ( + 'base': #FF4D4F + ), + 'error': ( + 'base': #CF171D + ) + ), + $button: ( + 'hover-bg-color': var(--el-color-primary-light-9), + 'hover-border-color': var(--el-color-primary), + 'border-color': var(--el-color-primary), + 'text-color': var(--el-color-primary) + ), + $messagebox: ( + 'border-radius': '12px' + ), + $popover: ( + 'padding': '14px', + 'border-radius': '10px' + ) +); diff --git a/src/assets/scss/el-ui.scss b/src/assets/scss/el-ui.scss new file mode 100644 index 0000000..7758dfd --- /dev/null +++ b/src/assets/scss/el-ui.scss @@ -0,0 +1,569 @@ +// 优化 Element Plus 组件库默认样式 + +:root { + --custom-radius: 5px; + // 系统主色 + --main-color: #1C6EFF; + --el-color-white: white !important; + --el-color-black: white !important; + --el-color-primary: #1C6EFF; + --el-button-hover-bg-color: #458FFF; + --el-button-hover-border-color: #458FFF; + --el-color-primary-light-3: #458FFF; + --el-color-danger: #CF171D; + // 输入框边框颜色 + // --el-border-color: #E4E4E7 !important; // DCDFE6 + // 按钮粗度 + --el-font-weight-primary: 400 !important; + + --el-component-custom-height: 32px !important; + + --el-component-size: var(--el-component-custom-height) !important; + + // 边框、按钮圆角... + --el-border-radius-base: calc(var(--custom-radius) / 3 + 2px) !important; + + --el-border-radius-small: calc(var(--custom-radius) / 3 + 4px) !important; + --el-messagebox-border-radius: calc(var(--custom-radius) / 3 + 4px) !important; + --el-popover-border-radius: calc(var(--custom-radius) / 3 + 4px) !important; + + .region .el-radio-button__original-radio:checked + .el-radio-button__inner { + color: var(--theme-color); + } +} + +// 优化 el-form-item 标签高度 +.el-form-item__label { + height: var(--el-component-custom-height) !important; + line-height: var(--el-component-custom-height) !important; +} + +// 日期选择器 +.el-date-range-picker { + --el-datepicker-inrange-bg-color: var(--art-gray-200) !important; +} + +// el-card 背景色跟系统背景色保持一致 +html.dark .el-card { + --el-card-bg-color: var(--default-box-color) !important; +} + +.el-pagination { + justify-content: center; + + .el-pager { + li { + box-sizing: border-box; + font-weight: 400 !important; + border: 1px solid #E6EAEB; + transition: border-color 0.15s; + padding: 0 10px !important; + + &:not(.is-active) { + background-color: transparent !important; + } + + &:hover { + border-color: var(--main-color) !important; + } + } + } + + .el-pagination__jump { + .el-input { + height: 32px; + } + } +} + + +// 优化菜单折叠展开动画（提升动画流畅度） +.el-menu.el-menu--inline { + transition: max-height 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important; +} + +.el-sub-menu { + position: relative; +} + +.el-sub-menu .el-sub-menu__icon-arrow { + position: absolute; + top: 50%; + right: var(--el-menu-base-level-padding); + margin-top: -6px; + transition: transform var(--el-transition-duration); + font-size: 12px; + margin-right: 0; + display: block; + width: auto; +} + +// 优化菜单 item hover 动画（提升鼠标跟手感） +.el-sub-menu__title, +.el-menu-item { + height: 42px !important; + margin-bottom: 4px; + line-height: 42px !important; + transition: background-color 0s !important; + width: calc(100% - 16px); + margin-left: 8px; + border-radius: 6px; + + &:hover { + background-color: #F2F4F5 !important; + } +} + +.menus:not(.el-menu--collapse) { + width: 230px; +} + +.el-menu--collapse { + width: calc(16px + var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2); +} + +.el-menu-item.is-active { + background-color: rgb(238, 243, 255); +} + +// -------------------------------- 修改 el-size=default 组件默认高度 start -------------------------------- +// 修改 el-button 高度 +.el-button--default { + height: var(--el-component-custom-height) !important; +} + +// circle 按钮宽度优化 +.el-button--default.is-circle { + width: var(--el-component-custom-height) !important; +} + +// 修改 el-select 高度 +.el-select--default { + .el-select__wrapper { + min-height: var(--el-component-custom-height) !important; + } +} + +// 修改 el-checkbox-button 高度 +.el-checkbox-button--default .el-checkbox-button__inner, + // 修改 el-radio-button 高度 +.el-radio-button--default .el-radio-button__inner { + padding: 10px 15px !important; +} + +.el-scrollbar__bar.is-vertical { + width: 4px; +} + +// -------------------------------- 修改 el-size=default 组件默认高度 end -------------------------------- + +.el-pagination.is-background .btn-next, +.el-pagination.is-background .btn-prev, +.el-pagination.is-background .el-pager li { + border-radius: 6px; +} + +.el-popover { + min-width: 80px; + border-radius: var(--el-border-radius-small) !important; +} + +.el-dialog { + border-radius: 100px !important; + border-radius: calc(var(--custom-radius) / 1.2 + 2px) !important; + overflow: hidden; +} + +.el-dialog__header { + .el-dialog__title { + font-size: 16px; + } +} + +.el-dialog__body { + padding: 25px 0 !important; + position: relative; // 为了兼容 el-pagination 样式，需要设置 relative，不然会影响 el-pagination 的样式，比如 el-pagination__jump--small 会被影响，导致 el-pagination__jump--small 按钮无法点击，详见 URL_ADDRESS.com/element-plus/element-plus/issues/5684#issuecomment-1176299275; +} + +.el-dialog.el-dialog-border { + .el-dialog__body { + // 上边框 + &::before, + // 下边框 + &::after { + content: ''; + position: absolute; + left: -16px; + width: calc(100% + 32px); + height: 1px; + background-color: var(--art-gray-300); + } + + &::before { + top: 0; + } + + &::after { + bottom: 0; + } + } +} + +// el-message 样式优化 +.el-message { + background-color: var(--default-box-color) !important; + border: 0 !important; + box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 3px 6px -4px rgba(0, 0, 0, 0.12), + 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important; + + p { + font-size: 13px; + } +} + +// 修改 el-dropdown 样式 +.el-dropdown-menu { + padding: 6px !important; + border-radius: 10px !important; + border: none !important; + + .el-dropdown-menu__item { + padding: 6px 16px !important; + border-radius: 6px !important; + + &:hover:not(.is-disabled) { + color: var(--art-gray-900) !important; + background-color: var(--art-el-active-color) !important; + } + + &:focus:not(.is-disabled) { + color: var(--art-gray-900) !important; + background-color: var(--art-gray-200) !important; + } + } +} + +// 隐藏 select、dropdown 的三角 +.el-select__popper, +.el-dropdown__popper { + margin-top: -6px !important; + + .el-popper__arrow { + display: none; + } +} + +.el-dropdown-selfdefine:focus { + outline: none !important; +} + +// 处理移动端组件兼容性 +@media screen and (max-width: 640px) { + .el-message-box, + .el-dialog { + width: calc(100% - 24px) !important; + } + + .el-date-picker.has-sidebar.has-time { + width: calc(100% - 24px); + left: 12px !important; + } + + .el-picker-panel *[slot='sidebar'], + .el-picker-panel__sidebar { + display: none; + } + + .el-picker-panel *[slot='sidebar'] + .el-picker-panel__body, + .el-picker-panel__sidebar + .el-picker-panel__body { + margin-left: 0; + } +} + +// 修改el-button样式 +.el-button { + &.el-button--text { + background-color: transparent !important; + padding: 0 !important; + + span { + margin-left: 0 !important; + } + } +} + +// 修改el-tag样式 +.el-tag { + font-weight: 500; + transition: all 0s !important; + + &.el-tag--default { + height: 26px !important; + } +} + +.el-checkbox-group { + &.el-table-filter__checkbox-group label.el-checkbox { + height: 17px !important; + + .el-checkbox__label { + font-weight: 400 !important; + } + } +} + +.el-radio--default { + // 优化单选按钮大小 + .el-radio__input { + .el-radio__inner { + width: 16px; + height: 16px; + + &::after { + width: 6px; + height: 6px; + } + } + } +} + +.el-checkbox { + .el-checkbox__inner { + border-radius: 2px !important; + } +} + +// 优化复选框样式 +.el-checkbox--default { + .el-checkbox__inner { + width: 16px !important; + height: 16px !important; + border-radius: 4px !important; + + &::before { + content: ''; + height: 4px !important; + top: 5px !important; + background-color: #FFFFFF !important; + transform: scale(0.6) !important; + } + } + + .is-checked { + .el-checkbox__inner { + &::after { + width: 3px; + height: 8px; + margin: auto; + border: 2px solid var(--el-checkbox-checked-icon-color); + border-left: 0; + border-top: 0; + transform: translate(-45%, -60%) rotate(45deg) scale(0.86) !important; + transform-origin: center; + } + } + } +} + +.el-notification .el-notification__icon { + font-size: 22px !important; +} + +// 修改 el-message-box 样式 +.el-message-box__headerbtn .el-message-box__close, +.el-dialog__headerbtn .el-dialog__close { + top: 7px; + right: 7px; + width: 30px; + height: 30px; + border-radius: 5px; + transition: all 0.3s; + + &:hover { + background-color: var(--art-hover-color) !important; + color: var(--art-gray-900) !important; + } +} + +.el-message-box { + padding: 25px 20px !important; +} + +.el-message-box__title { + font-weight: 500 !important; +} + +.el-table__column-filter-trigger i { + color: var(--theme-color) !important; + margin: -3px 0 0 2px; +} + +// 去除 el-dropdown 鼠标放上去出现的边框 +.el-tooltip__trigger:focus-visible { + outline: unset; +} + +// ipad 表单右侧按钮优化 +@media screen and (max-width: 1180px) { + .el-table-fixed-column--right { + padding-right: 0 !important; + } +} + +.login-out-dialog { + padding: 30px 20px !important; + border-radius: 10px !important; +} + +// 修改 dialog 动画 +.dialog-fade-enter-active { + .el-dialog:not(.is-draggable) { + animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86); + + // 修复 el-dialog 动画后宽度不自适应问题 + .el-select__selected-item { + display: inline-block; + } + } +} + +.dialog-fade-leave-active { + animation: fade-out 0.2s linear; + + .el-dialog:not(.is-draggable) { + animation: dialog-close 0.5s; + } +} + +@keyframes dialog-open { + 0% { + opacity: 0; + transform: scale(0.2); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes dialog-close { + 0% { + opacity: 1; + transform: scale(1); + } + + 100% { + opacity: 0; + transform: scale(0.2); + } +} + +// 遮罩层动画 +@keyframes fade-out { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +// 修改 el-select 样式 +/* .el-select__popper:not(.el-tree-select__popper) { + .el-select-dropdown__list { + padding: 5px !important; + + .el-select-dropdown__item { + height: 34px !important; + line-height: 34px !important; + border-radius: 6px !important; + + &.is-selected { + color: var(--art-gray-900) !important; + font-weight: 400 !important; + background-color: var(--art-el-active-color) !important; + margin-bottom: 4px !important; + } + + &:hover { + background-color: var(--art-hover-color) !important; + } + } + + .el-select-dropdown__item:hover ~ .is-selected, + .el-select-dropdown__item.is-selected:has(~ .el-select-dropdown__item:hover) { + background-color: transparent !important; + } + } +} */ + +// 修改 el-tree-select 样式 +.el-tree-select__popper { + .el-select-dropdown__list { + padding: 5px !important; + + .el-tree-node { + .el-tree-node__content { + height: 36px !important; + border-radius: 6px !important; + + &:hover { + background-color: var(--art-gray-200) !important; + } + } + } + } +} + +// 实现水波纹在文字下面效果 +.el-button > span { + position: relative; + z-index: 10; +} + +// 优化颜色选择器圆角 +.el-color-picker__color { + border-radius: 2px !important; +} + +// 优化日期时间选择器底部圆角 +.el-picker-panel { + .el-picker-panel__footer { + border-radius: 0 0 var(--el-border-radius-base) var(--el-border-radius-base); + } +} + +// 优化树型菜单样式 +.el-tree-node__content { + border-radius: 4px; + margin-bottom: 4px; + padding: 1px 0; + + &:hover { + background-color: var(--art-hover-color) !important; + } +} + +.dark { + .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { + background-color: var(--art-gray-300) !important; + } +} + +// 隐藏折叠菜单弹窗 hover 出现的边框 +.menu-left-popper:focus-within, +.horizontal-menu-popper:focus-within { + box-shadow: none !important; + outline: none !important; +} + +// 数字输入组件右侧按钮高度跟随自定义组件高度 +.el-input-number--default.is-controls-right { + .el-input-number__decrease, + .el-input-number__increase { + height: calc((var(--el-component-size) / 2)) !important; + } +} diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss new file mode 100644 index 0000000..788ae5b --- /dev/null +++ b/src/assets/scss/index.scss @@ -0,0 +1 @@ +@use './reset.scss'; diff --git a/src/assets/scss/mixin.scss b/src/assets/scss/mixin.scss new file mode 100644 index 0000000..24e14a1 --- /dev/null +++ b/src/assets/scss/mixin.scss @@ -0,0 +1,153 @@ +// sass 混合宏（函数） + +/** +* 溢出省略号 +* @param {Number} 行数 +*/ +@mixin ellipsis($rowCount: 1) { + @if $rowCount <=1 { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } @else { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: $rowCount; + -webkit-box-orient: vertical; + } +} + +/** +* 控制用户能否选中文本 +* @param {String} 类型 +*/ +@mixin userSelect($value: none) { + user-select: $value; + -moz-user-select: $value; + -ms-user-select: $value; + -webkit-user-select: $value; +} + +// 绝对定位居中 +@mixin absoluteCenter() { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; +} + +/** +* css3动画 +* +*/ +@mixin animation( + $from: ( + width: 0px + ), + $to: ( + width: 100px + ), + $name: mymove, + $animate: mymove 2s 1 linear infinite +) { + -webkit-animation: $animate; + -o-animation: $animate; + animation: $animate; + + @keyframes #{$name} { + from { + @each $key, $value in $from { + #{$key}: #{$value}; + } + } + + to { + @each $key, $value in $to { + #{$key}: #{$value}; + } + } + } + + @-webkit-keyframes #{$name} { + from { + @each $key, $value in $from { + $key: $value; + } + } + + to { + @each $key, $value in $to { + $key: $value; + } + } + } +} + +// 圆形盒子 +@mixin circle($size: 11px, $bg: #FFFFFF) { + border-radius: 50%; + width: $size; + height: $size; + line-height: $size; + text-align: center; + background: $bg; +} + +// placeholder +@mixin placeholder($color: #BBBBBB) { + // Firefox + &::-moz-placeholder { + color: $color; + opacity: 1; + } + + // Internet Explorer 10+ + &:-ms-input-placeholder { + color: $color; + } + + // Safari and Chrome + &::-webkit-input-placeholder { + color: $color; + } + + &:placeholder-shown { + text-overflow: ellipsis; + } +} + +//背景透明，文字不透明。兼容IE8 +@mixin betterTransparentize($color, $alpha) { + $c: rgba($color, $alpha); + $ie_c: ie_hex_str($c); + background: rgba($color, 1); + background: $c; + background: transparent \9 +; + zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c}); + -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})'; +} + +//添加浏览器前缀 +@mixin browserPrefix($propertyName, $value) { + @each $prefix in -webkit-, -moz-, -ms-, -o-, '' { + #{$prefix}#{$propertyName}: $value; + } +} + +// 边框 +@mixin border($color: red) { + border: 1px solid $color; +} + +// 背景滤镜 +@mixin backdropBlur() { + --tw-backdrop-blur: blur(30px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} diff --git a/src/assets/scss/reset.scss b/src/assets/scss/reset.scss new file mode 100644 index 0000000..da66ed2 --- /dev/null +++ b/src/assets/scss/reset.scss @@ -0,0 +1,50 @@ +@charset "UTF-8"; +html, :host { + -webkit-text-size-adjust: 100%; + tab-size: 4; + line-height: 1.5; + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; +} + +/*滚动条*/ +/*滚动条整体部分,必须要设置*/ +::-webkit-scrollbar { + width: 5px !important; + height: 0 !important; +} + +/*滚动条的轨道*/ +::-webkit-scrollbar-track { + background-color: #F2F4F5; +} + +/*滚动条的滑块按钮*/ +::-webkit-scrollbar-thumb { + border-radius: 5px; + background-color: #CCCCCC !important; + transition: all 0.2s; + -webkit-transition: all 0.2s; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #B0ABAB !important; +} + +/*滚动条的上下两端的按钮*/ +::-webkit-scrollbar-button { + height: 0; + width: 0; +} + +.dark { + ::-webkit-scrollbar-track { + background-color: #070707; + } + + ::-webkit-scrollbar-thumb { + background-color: #E6EAEB !important; + } +} diff --git a/src/common/element/element.ts b/src/common/element/element.ts index 38e9720..d52aba3 100644 --- a/src/common/element/element.ts +++ b/src/common/element/element.ts @@ -2,6 +2,7 @@ import type { App } from 'vue' import * as ElementPlusIconsVue from '@element-plus/icons-vue' export const elIcons = ElementPlusIconsVue +export type ElIconType = keyof typeof ElementPlusIconsVue const install = (app: App): void => { for (const [ key, component ] of Object.entries(ElementPlusIconsVue)) { diff --git a/src/common/utils/index.ts b/src/common/utils/index.ts index 1aa1c24..d3e2d22 100644 --- a/src/common/utils/index.ts +++ b/src/common/utils/index.ts @@ -1,5 +1,3 @@ -import type { ReactiveFlags } from 'vue' - /** * 类型标签，Object.prototype.toString.call(obj) 的返回值 */ @@ -64,7 +62,7 @@ function debounce(t: number, fn: (...args: T) => void) { } function clone(value: T): T { - if (value === null || typeof value !== 'object') { + if (value === null || typeof value !== 'object' || typeof value === 'function') { return value } const rawValue = isReactive(value) ? toRaw(value) : value @@ -79,47 +77,57 @@ function clone(value: T): T { } const clonedObj = {} as T Object.keys(rawValue).forEach((key) => { - clonedObj[key as keyof T] = clone(rawValue[key as keyof T]) + const propValue = rawValue[key as keyof T] + if (typeof propValue !== 'function') { + clonedObj[key as keyof T] = clone(propValue) + } }) + return clonedObj as T } -type ExtractRawType = -// 匹配 reactive 响应式对象（通过 Vue 内置的 RAW 标记提取原始类型） - T extends { [ReactiveFlags.RAW]: infer RawValue } - ? RawValue - // 递归处理数组（兼容 reactive([]) 场景） - : T extends Array - ? Array> - // 递归处理嵌套对象（兼容 reactive({ a: { b: 1 } }) 场景） - : T extends object - ? { [K in keyof T]: ExtractRawType } - // 非对象类型直接返回（如 string/number 等） - : T; +type PartialForObject = +// 数组类型：直接返回原数组类型（不做 Partial） + T extends Array + ? T + // 普通对象：做 Partial 处理 + : T extends object + ? Partial + // 基本类型：直接返回 + : T; -type ResetAble = T & { $reset: (val?: Partial>) => void } +export type ResetAble = T & { + $reset: (val?: PartialForObject) => void + $clone: () => T +} -function resetAble(target: T): ResetAble { +function resetAble(target: T): ResetAble { const initialData = clone(target) as T + const resetAbleTarget = target as ResetAble + resetAbleTarget.$clone = () => clone(target) as T + + resetAbleTarget.$reset = (val?: PartialForObject) => { + const resetValue = val ?? (initialData as PartialForObject) - (target as ResetAble).$reset = (val?: Partial>) => { - if (val == null) { - val = initialData - } if (Array.isArray(val)) { const arr = target as unknown as Array - const initialArr = val as unknown as Array + const initialArr = resetValue as unknown as Array arr.splice(0, arr.length, ...initialArr) } else { - Object.keys(val).forEach((key) => { - (target as Record)[key] = (val as Record)[key] + const targetObj = target as Record + const resetObj = resetValue as Record + // 步骤1：遍历重置值，赋值到目标对象 + Object.keys(resetObj).forEach((key) => { + targetObj[key] = resetObj[key] }) - Object.getOwnPropertyNames(target).forEach((key) => { - if (key !== '$reset' && !(key in val)) { - (target as Record)[key] = undefined + + // 步骤2：清理目标对象中不存在于重置值的属性（保留 $reset/$clone） + Object.getOwnPropertyNames(targetObj).forEach((key) => { + if (key !== '$reset' && key !== '$clone' && !(key in resetObj)) { + targetObj[key] = undefined } - }) + }); } } return target as ResetAble diff --git a/src/components/a-drop-table/ADropTable.vue b/src/components/a-drop-table/ADropTable.vue index eebc0a1..ec8833c 100644 --- a/src/components/a-drop-table/ADropTable.vue +++ b/src/components/a-drop-table/ADropTable.vue @@ -201,7 +201,7 @@ const displayData = computed(() => { :page-sizes="[10, 20, 50, 100, 500]" :teleported="false" :total="totalCount" - layout="->, sizes, total, prev, pager, next" + background layout="total, prev, pager, next, sizes, jumper" @change="paging"/> diff --git a/src/components/a-icon/iconfont.css b/src/components/a-icon/iconfont.css index 0375ca2..3842f38 100644 --- a/src/components/a-icon/iconfont.css +++ b/src/components/a-icon/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* 项目名称 再昇云 */ - src: url('@/components/a-icon/iconfont.woff2?t=1766204567022') format('woff2'), - url('@/components/a-icon/iconfont.woff?t=1766204567022') format('woff'), - url('@/components/a-icon/iconfont.ttf?t=1766204567022') format('truetype'); + src: url('@/components/a-icon/iconfont.woff2?t=1768370216119') format('woff2'), + url('@/components/a-icon/iconfont.woff?t=1768370216119') format('woff'), + url('@/components/a-icon/iconfont.ttf?t=1768370216119') format('truetype'); } .iconfont { @@ -13,6 +13,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-bell:before { + content: "\e7c4"; +} + .icon-eye:before { content: "\e64f"; } diff --git a/src/components/a-icon/iconfont.json b/src/components/a-icon/iconfont.json index 96fadbd..af2ce5f 100644 --- a/src/components/a-icon/iconfont.json +++ b/src/components/a-icon/iconfont.json @@ -5,6 +5,13 @@ "css_prefix_text": "icon-", "description": "", "glyphs": [ + { + "icon_id": "4766680", + "name": "bell", + "font_class": "bell", + "unicode": "e7c4", + "unicode_decimal": 59332 + }, { "icon_id": "46407625", "name": "eye", diff --git a/src/components/a-icon/iconfont.ts b/src/components/a-icon/iconfont.ts index aed2a28..4b1f051 100644 --- a/src/components/a-icon/iconfont.ts +++ b/src/components/a-icon/iconfont.ts @@ -5,6 +5,13 @@ export const icons = { 'css_prefix_text': 'icon-', 'description': '', 'glyphs': [ + { + 'icon_id': '4766680', + 'name': 'bell', + 'font_class': 'bell', + 'unicode': 'e7c4', + 'unicode_decimal': 59332, + }, { 'icon_id': '46407625', 'name': 'eye', diff --git a/src/components/a-icon/iconfont.ttf b/src/components/a-icon/iconfont.ttf index 7556488..84c127b 100644 Binary files a/src/components/a-icon/iconfont.ttf and b/src/components/a-icon/iconfont.ttf differ diff --git a/src/components/a-icon/iconfont.woff b/src/components/a-icon/iconfont.woff index d0afb7d..a3a6fb4 100644 Binary files a/src/components/a-icon/iconfont.woff and b/src/components/a-icon/iconfont.woff differ diff --git a/src/components/a-icon/iconfont.woff2 b/src/components/a-icon/iconfont.woff2 index bfc9420..36ad335 100644 Binary files a/src/components/a-icon/iconfont.woff2 and b/src/components/a-icon/iconfont.woff2 differ diff --git a/src/components/page/FormPage.vue b/src/components/page/FormPage.vue new file mode 100644 index 0000000..6fad208 --- /dev/null +++ b/src/components/page/FormPage.vue @@ -0,0 +1,484 @@ + + + + + diff --git a/src/components/page/Page.vue b/src/components/page/Page.vue index b007303..77fc6b6 100644 --- a/src/components/page/Page.vue +++ b/src/components/page/Page.vue @@ -12,13 +12,14 @@ .page-wrapper { height 100% width 100%; - overflow auto - padding 16px + overflow hidden + padding 5px box-sizing border-box - box-shadow: rgba(30, 35, 43, 0.16) 0px 2px 10px 0px; - background-color: white; + //box-shadow: inset rgba(30, 35, 43, 0.16) 0px 0 10px 1px; + //background-color: white; display flex flex-direction column + gap 10px } diff --git a/src/dts/components.d.ts b/src/dts/components.d.ts index 00d0d32..0083a8f 100644 --- a/src/dts/components.d.ts +++ b/src/dts/components.d.ts @@ -5,7 +5,6 @@ // ------ // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 -import { GlobalComponents } from 'vue' export {} @@ -15,8 +14,10 @@ declare module 'vue' { ElAside: typeof import('element-plus/es')['ElAside'] ElAvatar: typeof import('element-plus/es')['ElAvatar'] ElButton: typeof import('element-plus/es')['ElButton'] + ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup'] + ElCol: typeof import('element-plus/es')['ElCol'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] ElContainer: typeof import('element-plus/es')['ElContainer'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] @@ -43,6 +44,8 @@ declare module 'vue' { ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm'] ElRadio: typeof import('element-plus/es')['ElRadio'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] + ElRow: typeof import('element-plus/es')['ElRow'] + ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElSelect: typeof import('element-plus/es')['ElSelect'] ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElTable: typeof import('element-plus/es')['ElTable'] @@ -68,8 +71,10 @@ declare global { const ElAside: typeof import('element-plus/es')['ElAside'] const ElAvatar: typeof import('element-plus/es')['ElAvatar'] const ElButton: typeof import('element-plus/es')['ElButton'] + const ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup'] const ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] const ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup'] + const ElCol: typeof import('element-plus/es')['ElCol'] const ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] const ElContainer: typeof import('element-plus/es')['ElContainer'] const ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] @@ -96,6 +101,8 @@ declare global { const ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm'] const ElRadio: typeof import('element-plus/es')['ElRadio'] const ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] + const ElRow: typeof import('element-plus/es')['ElRow'] + const ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] const ElSelect: typeof import('element-plus/es')['ElSelect'] const ElSwitch: typeof import('element-plus/es')['ElSwitch'] const ElTable: typeof import('element-plus/es')['ElTable'] @@ -110,4 +117,4 @@ declare global { const ElUpload: typeof import('element-plus/es')['ElUpload'] const RouterLink: typeof import('vue-router')['RouterLink'] const RouterView: typeof import('vue-router')['RouterView'] -} \ No newline at end of file +} diff --git a/src/dts/g.d.ts b/src/dts/g.d.ts index c12438b..d97938b 100644 --- a/src/dts/g.d.ts +++ b/src/dts/g.d.ts @@ -19,7 +19,7 @@ declare global { records: T[] } - interface PageParam { + interface PageParam extends Record { current?: number size?: number orders?: string diff --git a/src/main.ts b/src/main.ts index 2d24dbb..e503324 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,3 +1,4 @@ +import '@/assets/scss/index.scss' import { createApp } from 'vue' import App from './App.vue' import { Settings } from 'luxon' @@ -7,7 +8,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' // import Ws from '@/common/ws/ws.ts' import element from '@/common/element/element.ts' import router from '@/common/router' -import '@/assets/css/index.css' +// import '@/assets/css/index.css' createApp(App) .use(element) diff --git a/src/pages/a-frame/AAside.tsx b/src/pages/a-frame/AAside.tsx index a33d241..dfe4c4a 100644 --- a/src/pages/a-frame/AAside.tsx +++ b/src/pages/a-frame/AAside.tsx @@ -118,7 +118,7 @@ export default defineComponent( return () => ( <> - + {{ default: () => menuTree.value.map(renderMenu), }} diff --git a/src/pages/a-frame/AFrame.vue b/src/pages/a-frame/AFrame.vue index 42f3324..6f7dfc7 100644 --- a/src/pages/a-frame/AFrame.vue +++ b/src/pages/a-frame/AFrame.vue @@ -3,6 +3,7 @@ import AAside from '@/pages/a-frame/AAside.tsx' import AAvatar from '@/pages/a-frame/AAvatar.vue' import { appName } from '@/common' import Evt from '@/common/utils/evt.ts' +import AIcon from '@/components/a-icon/AIcon.vue' onMounted(() => { Evt.emit('connect_ws') @@ -20,11 +21,23 @@ onUnmounted(() => {
{{ appName }}
- +
+
+ + + + + + +
+ +
- + + + @@ -69,6 +82,23 @@ onUnmounted(() => { font-size: 1.5rem; } } + + & > div:nth-child(2) { + height: 100%; + display: flex; + align-items: center; + box-sizing border-box + gap 20px + + & > div:first-child { + display flex + gap 10px + + & > button { + margin 0 + } + } + } } & > section { @@ -79,20 +109,20 @@ onUnmounted(() => { height 100%; width auto position relative + border-right: solid 1px var(--el-menu-border-color); + + background-color white + padding: 10px 0; } & > main { height 100% width calc(100% - 300px) - padding 5px + padding 0 overflow auto - background-color #F7F9FC + //background-color #F7F9FC + background-color rgb(250, 251, 252) } } } - diff --git a/src/pages/cst/customer/Customer.vue b/src/pages/cst/customer/Customer.vue index 8db6149..429738f 100644 --- a/src/pages/cst/customer/Customer.vue +++ b/src/pages/cst/customer/Customer.vue @@ -1,64 +1,27 @@ - - diff --git a/src/pages/cst/station/Station.vue b/src/pages/cst/station/Station.vue index 48020e5..69035c8 100644 --- a/src/pages/cst/station/Station.vue +++ b/src/pages/cst/station/Station.vue @@ -1,193 +1,133 @@ - - diff --git a/src/pages/cst/truck/Truck.vue b/src/pages/cst/truck/Truck.vue index f5544e3..fa2d499 100644 --- a/src/pages/cst/truck/Truck.vue +++ b/src/pages/cst/truck/Truck.vue @@ -1,28 +1,18 @@ - - diff --git a/src/pages/sys/dict/Dict.vue b/src/pages/sys/dict/Dict.vue index 5d4bf22..546c19a 100644 --- a/src/pages/sys/dict/Dict.vue +++ b/src/pages/sys/dict/Dict.vue @@ -1,8 +1,10 @@ diff --git a/src/pages/sys/gen/tpl/Tpl.vue b/src/pages/sys/gen/tpl/Tpl.vue index 2c4050f..3e80727 100644 --- a/src/pages/sys/gen/tpl/Tpl.vue +++ b/src/pages/sys/gen/tpl/Tpl.vue @@ -1,16 +1,20 @@ + + - diff --git a/src/pages/sys/menus/Menus.vue b/src/pages/sys/menus/Menus.vue index 8454f01..976539d 100644 --- a/src/pages/sys/menus/Menus.vue +++ b/src/pages/sys/menus/Menus.vue @@ -12,15 +12,10 @@ 重置 -
新建
- { - if (resolve!=null){ - resolve(res.data?.map(it => { - it.hasChildren = true - return it - }) ?? []) - } else { - dataTableIns.value?.updateKeyChildren(row.id, res.data?.map(it => { - it.hasChildren = true - it.children = [] - return it - }) ?? []) - } - }) - .finally(() => { - searching.value = false - }) + .then(res => { + if (resolve != null) { + resolve(res.data?.map(it => { + it.hasChildren = true + return it + }) ?? []) + } else { + dataTableIns.value?.updateKeyChildren(row.id, res.data?.map(it => { + it.hasChildren = true + it.children = [] + return it + }) ?? []) + } + }) + .finally(() => { + searching.value = false + }) } onMounted(() => { diff --git a/src/pages/sys/role/Role.vue b/src/pages/sys/role/Role.vue index 943cb99..d0b8c77 100644 --- a/src/pages/sys/role/Role.vue +++ b/src/pages/sys/role/Role.vue @@ -1,211 +1,110 @@ - diff --git a/src/pages/sys/sn-config/SnConfig.vue b/src/pages/sys/sn-config/SnConfig.vue index f80c815..975e023 100644 --- a/src/pages/sys/sn-config/SnConfig.vue +++ b/src/pages/sys/sn-config/SnConfig.vue @@ -1,92 +1,18 @@ - - + + - + + + diff --git a/src/pages/sys/task/Task.vue b/src/pages/sys/task/Task.vue index e71b191..c7cafb3 100644 --- a/src/pages/sys/task/Task.vue +++ b/src/pages/sys/task/Task.vue @@ -1,26 +1,30 @@ - diff --git a/src/pages/sys/task/task.d.ts b/src/pages/sys/task/task.d.ts index ad9d937..e61e035 100644 --- a/src/pages/sys/task/task.d.ts +++ b/src/pages/sys/task/task.d.ts @@ -40,6 +40,7 @@ declare global { criticalTiming?: string // 是否禁用 disabled?: boolean + builtin?: boolean // 备注 memo?: string } diff --git a/src/pages/sys/user/User.vue b/src/pages/sys/user/User.vue index bdd79ec..a141979 100644 --- a/src/pages/sys/user/User.vue +++ b/src/pages/sys/user/User.vue @@ -1,31 +1,22 @@ diff --git a/src/pages/wh/inventory/Inventory.vue b/src/pages/wh/inventory/Inventory.vue index 29f84a7..73a58c8 100644 --- a/src/pages/wh/inventory/Inventory.vue +++ b/src/pages/wh/inventory/Inventory.vue @@ -1,202 +1,120 @@ - - diff --git a/src/pages/wh/out-order/OutOrder.vue b/src/pages/wh/out-order/OutOrder.vue index 2181420..a06911c 100644 --- a/src/pages/wh/out-order/OutOrder.vue +++ b/src/pages/wh/out-order/OutOrder.vue @@ -1,231 +1,150 @@ - - diff --git a/src/pages/wh/purchase-order/PurchaseOrder.vue b/src/pages/wh/purchase-order/PurchaseOrder.vue index 9f30fec..eda8230 100644 --- a/src/pages/wh/purchase-order/PurchaseOrder.vue +++ b/src/pages/wh/purchase-order/PurchaseOrder.vue @@ -1,213 +1,118 @@ - - diff --git a/src/pages/wh/sales-order/SalesOrder.vue b/src/pages/wh/sales-order/SalesOrder.vue index 98fdc6b..65e07c3 100644 --- a/src/pages/wh/sales-order/SalesOrder.vue +++ b/src/pages/wh/sales-order/SalesOrder.vue @@ -1,231 +1,152 @@ + + + - - diff --git a/src/pages/wh/warehouse/Warehouse.vue b/src/pages/wh/warehouse/Warehouse.vue index ade5a81..89116fb 100644 --- a/src/pages/wh/warehouse/Warehouse.vue +++ b/src/pages/wh/warehouse/Warehouse.vue @@ -1,164 +1,113 @@ - - diff --git a/vite.config.ts b/vite.config.ts index 7a87133..92ba210 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -15,11 +15,12 @@ import ElementPlus from 'unplugin-element-plus/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import { fileWatcher } from './plugin/file-watcher.ts' import IconfontProcess from './plugin/iconfont-process.ts' + // import * as https from "node:https"; // https://vite.dev/config/ export default defineConfig((configEnv) => { - const env = loadEnv(configEnv.mode, process.cwd(), ""); + const env = loadEnv(configEnv.mode, process.cwd(), '') // const Agent = https.Agent; // const agent = new Agent({ // keepAlive: true, @@ -34,7 +35,16 @@ export default defineConfig((configEnv) => { }, css: { modules: { - localsConvention: "camelCase", + localsConvention: 'camelCase', + }, + preprocessorOptions: { + scss: { + additionalData: ` + @use "@/assets/scss/el-ui.scss" as *; + @use "@/assets/scss/el-light.scss" as *; + @use "@/assets/scss/mixin.scss" as *; + `, + }, }, }, plugins: [ @@ -42,33 +52,34 @@ export default defineConfig((configEnv) => { vueJsx(), VueDevTools(), ElementPlus({ - defaultLocale: "zh-cn", + defaultLocale: 'zh-cn', + useSource: true, }), AutoImport({ - imports: ["vue", "vue-router", "pinia"], - dts: "./src/dts/auto-imports.d.ts", - resolvers: [ElementPlusResolver()], + imports: [ 'vue', 'vue-router', 'pinia' ], + dts: './src/dts/auto-imports.d.ts', + resolvers: [ ElementPlusResolver() ], }), Components({ - dts: "./src/dts/components.d.ts", - dirs: ["./src/widgets"], - resolvers: [ElementPlusResolver()], + dts: './src/dts/components.d.ts', + dirs: [ './src/widgets' ], + resolvers: [ ElementPlusResolver() ], }), processHtml(env.VITE_APP_NAME), fileWatcher(IconfontProcess), zipDist(), ], resolve: { - extensions: [".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json"], + extensions: [ '.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json' ], alias: [ { - find: "@", - replacement: path.resolve(__dirname, "src"), + find: '@', + replacement: path.resolve(__dirname, 'src'), }, ], }, server: { - host: "0.0.0.0", + host: '0.0.0.0', port: 5173, proxy: { [env.VITE_HTTP_SERVER_BASE_URL]: { @@ -79,14 +90,14 @@ export default defineConfig((configEnv) => { // agent, changeOrigin: true, - rewrite: (path) => (env.VITE_HTTP_SERVER_BASE_URL == null || env.VITE_HTTP_SERVER_BASE_URL == "/" ? path : path.replace(new RegExp(env.VITE_HTTP_SERVER_BASE_URL), "")), + rewrite: (path) => (env.VITE_HTTP_SERVER_BASE_URL == null || env.VITE_HTTP_SERVER_BASE_URL == '/' ? path : path.replace(new RegExp(env.VITE_HTTP_SERVER_BASE_URL), '')), } as ProxyOptions, [env.VITE_WS_SERVER_BASE_URL]: { ws: true, target: env.VITE_WS_PROXY_TARGET, - rewrite: (path) => (env.VITE_WS_SERVER_BASE_URL == null || env.VITE_WS_SERVER_BASE_URL == "/" ? path : path.replace(new RegExp(env.VITE_WS_SERVER_BASE_URL), "")), + rewrite: (path) => (env.VITE_WS_SERVER_BASE_URL == null || env.VITE_WS_SERVER_BASE_URL == '/' ? path : path.replace(new RegExp(env.VITE_WS_SERVER_BASE_URL), '')), } as ProxyOptions, }, }, - }; -}); + } +})