fix(manager端升级node版本): 更新多个组件的样式，替换 /deep/ 选择器为 ::v-deep，替换 node-sass 为 sass，优化依赖管理和兼容性，兼容node16版本

manager/.npmrc

@@ -0,0 +1 @@
+engine-strict=false

manager/.yarnrc

@@ -0,0 +1 @@
+--ignore-engines true

manager/README.md

@@ -1,29 +1,90 @@
 # LILISHOP-UI
 
-## Project setup
+# LiliShop UI Manager 的 Node.js 版本兼容性
-```
+
-npm install
+本文档概述了 LiliShop UI seller 项目的 Node.js 版本兼容性。
+
+## 摘要
+
+| Node.js 版本 | npm 版本 | 兼容性 | 备注 |
+|-----------------|-------------|--------------|-------|
+| v20.13.1 (当前 LTS) | 10.8.0 | ✅ 需要解决方案 | 安装需要 `--legacy-peer-deps` 参数，运行需要 `NODE_OPTIONS=--openssl-legacy-provider` |
+| v18.20.8 (LTS) | 10.8.2 | ✅ 需要解决方案 | 安装需要 `--legacy-peer-deps` 参数，运行需要 `NODE_OPTIONS=--openssl-legacy-provider` |
+| v16.20.2 (LTS) | 8.19.4 | ✅ 有轻微警告 | 安装需要 `--legacy-peer-deps` 参数，整体运行良好 |
+| v14.x (最低版本) | - | ❌ 不兼容 | 无法在 ARM64 架构上安装 (M系列 Mac) |
+
+## 详细发现
+
+### Node.js v20.13.1 (当前 LTS)
+- **安装**: 使用 `--legacy-peer-deps` 参数可以正常安装
+- **开发服务器**: 需要设置 `NODE_OPTIONS=--openssl-legacy-provider` 环境变量
+- **构建**: 需要设置 `NODE_OPTIONS=--openssl-legacy-provider` 环境变量
+- **问题**:
+  - vue-awesome-swiper 和 swiper 之间的依赖冲突
+  - 由于 Node.js v20 移除了旧版加密算法导致的 OpenSSL 相关错误
+  - 部分包报告不支持的引擎警告
+- **验证**: 已成功构建并验证 dist/index.html 可以正常运行
+
+### Node.js v18.20.8 (LTS)
+- **安装**: 使用 `--legacy-peer-deps` 参数可以正常安装
+- **开发服务器**: 需要设置 `NODE_OPTIONS=--openssl-legacy-provider` 环境变量
+- **构建**: 需要设置 `NODE_OPTIONS=--openssl-legacy-provider` 环境变量
+- **问题**:
+  - 部分包报告不支持的引擎警告 (v-click-outside-x, @achrinza/node-ipc)
+- **验证**: 已成功构建并验证 dist/index.html 可以正常运行
+
+### Node.js v16.20.2 (LTS)
+- **安装**: 使用 `--legacy-peer-deps` 参数可以正常安装
+- **开发服务器**: 无需额外参数即可运行
+- **构建**: 可以正常构建
+- **问题**:
+  - v-click-outside-x 包有轻微警告 (需要 npm 6.4.1)
+
+### Node.js v14.x
+- **安装**: 在 ARM64 架构 (M系列 Mac) 上无法安装
+- **开发服务器**: 未测试
+- **构建**: 可以正常构建
+- **问题**:
+  - Node.js v14 没有 ARM64 架构的二进制文件
+
+## 建议
+
+1. **最佳版本**: Node.js v16.20.2 配合 npm 8.19.4
+   - 与项目依赖最兼容
+   - 需要的解决方案最少
+   - 性能稳定
+
+2. **安装命令**:
+   ```bash
+   npm install --legacy-peer-deps
    ```
 
-### Compiles and hot-reloads for development
+3. **开发命令**:
-```
+   ```bash
-npm run serve
+   # 对于 Node.js v16
+   npm run dev
+   
+   # 对于 Node.js v18 或 v20
+   NODE_OPTIONS=--openssl-legacy-provider npm run dev
+   或者 npm run dev
    ```
 
-### Compiles and minifies for production
+4. **生产构建命令**:
-```
+   ```bash
+   # 对于 Node.js v16
    npm run build
+   
+   # 对于 Node.js v18 或 v20
+   NODE_OPTIONS=--openssl-legacy-provider npm run build
+   或者 npm run dev
    ```
 
-### Run your tests
+## 未来考虑
-```
+
-npm run test
+1. 更新依赖以兼容较新的 Node.js 版本
-```
+2. 解决对等依赖冲突
+3. 更新 package.json 以指定推荐的 Node.js 版本范围
 
-### Lints and fixes files
-```
-npm run lint
-```
 
 ### Customize configuration
 详情点击 [https://cli.vuejs.org/zn/config/](https://cli.vuejs.org/zn/config/).

manager/package.json

@@ -5,9 +5,12 @@
   "description": "lilishop-ui",
   "author": "lili-platform",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
-    "dev": "vue-cli-service serve"
+    "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve"
+  },
+  "engines": {
+    "node": ">=14"
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "0.0.7",
@@ -16,8 +19,9 @@
     "core-js": "^3.6.5",
     "dplayer": "^1.26.0",
     "js-cookie": "^2.2.1",
-    "node-sass": "^4.14.1",
+    "price-color": "1.0.2",
-    "sass-loader": "^8.0.2",
+    "sass": "^1.63.6",
+    "sass-loader": "^10.4.1",
     "sockjs-client": "^1.4.0",
     "swiper": "^6.3.5",
     "uuid": "^8.3.2",
@@ -31,8 +35,7 @@
     "vue-router": "^3.1.3",
     "vuedraggable": "^2.23.2",
     "vuex": "^3.4.0",
-    "xss": "^1.0.7",
+    "xss": "^1.0.7"
-    "price-color":"1.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.4.4",
@@ -50,6 +53,8 @@
     "vue-template-compiler": "^2.6.10"
   },
   "resolutions": {
-    "minimatch": "^3.1.2"
+    "minimatch": "^3.1.2",
+    "node-sass": "npm:sass@^1.63.6",
+    "@achrinza/node-ipc": "9.2.2"
   }
 }

manager/src/components/hotzone/index.vue

@@ -57,11 +57,11 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-/deep/ .ivu-modal {
+::v-deep .ivu-modal {
   overflow: hidden;
   height: 650px !important;
 }
-/deep/ .ivu-modal-body {
+::v-deep .ivu-modal-body {
   width: 100%;
   height: 500px;
   overflow: hidden;

manager/src/components/lili-dialog/index.vue

@@ -86,11 +86,11 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-/deep/ .ivu-modal {
+::v-deep .ivu-modal {
   overflow: hidden;
   height: 650px !important;
 }
-/deep/ .ivu-modal-body {
+::v-deep .ivu-modal-body {
   width: 100%;
   height: 500px;
   overflow: hidden;

manager/src/components/lili-dialog/link-dialog.vue

@@ -122,11 +122,11 @@ export default {
   width: 100%;
 }
 
-/deep/ .ivu-modal {
+::v-deep .ivu-modal {
   overflow: hidden;
   height: 650px !important;
 }
-/deep/ .ivu-modal-body {
+::v-deep .ivu-modal-body {
   width: 100%;
   height: 500px;
   overflow: hidden;

manager/src/components/lili-dialog/style.scss

@@ -42,12 +42,12 @@
   }
 }
 
-/deep/ .ivu-scroll-container {
+::v-deep .ivu-scroll-container {
   width: 100% !important;
   height: 400px !important;
 }
 
-/deep/ .ivu-scroll-content {
+::v-deep .ivu-scroll-content {
   /* */
   display: flex;
   flex-wrap: wrap;
@@ -81,7 +81,7 @@
   align-items: center;
   margin: 10px;
 
-  /deep/ img {
+  ::v-deep img {
     width: 60px;
     height: 60px;
     text-align: center;

manager/src/components/lili-dialog/template/marketing.vue

@@ -420,7 +420,7 @@ img {
   overflow: auto;
   width: 100%;
 }
-/deep/ .ivu-table-wrapper {
+::v-deep .ivu-table-wrapper {
   width: 100%;
 }
 .list {

manager/src/components/lili-dialog/template/other.vue

@@ -157,7 +157,7 @@ export default {
   text-align: center;
   transition: 0.35s;
   cursor: pointer;
-  /deep/ p {
+  ::v-deep p {
     margin: 10px 0;
   }
   border: 1px solid #ededed;

manager/src/components/lili-dialog/template/pages.vue

@@ -33,7 +33,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/ .ivu-card-body {
+::v-deep .ivu-card-body {
   height: 414px;
   overflow: auto;
 }
@@ -69,11 +69,11 @@ export default {
   height: 416px;
   overflow: hidden;
 }
-/deep/ .ivu-table {
+::v-deep .ivu-table {
   height: 300px !important;
   overflow: auto;
 }
-/deep/ .ivu-card-body {
+::v-deep .ivu-card-body {
   padding: 0;
   height: auto;
 }

manager/src/components/lili-dialog/template/special.vue

@@ -137,7 +137,7 @@ img {
   overflow: auto;
   width: 100%;
 }
-/deep/ .ivu-table-wrapper {
+::v-deep .ivu-table-wrapper {
   width: 100%;
 }
 .list {

manager/src/views/goods/goods-manage/category.vue

@@ -543,7 +543,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/ .ivu-table-wrapper {
+::v-deep .ivu-table-wrapper {
   overflow: auto;
 }
 .table {

manager/src/views/home/home.scss

@@ -10,7 +10,7 @@ h4 {
   margin: 20px 0;
   font-size: 18px;
 }
-/deep/ .ivu-icon {
+::v-deep .ivu-icon {
   margin-left: 40px;
   margin-right: 40px;
 }

manager/src/views/main-parts/message-tip.vue

@@ -66,16 +66,16 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-/deep/ .ivu-select-dropdown {
+::v-deep .ivu-select-dropdown {
   text-align: left;
 }
 .message-con {
   margin-right: 10px;
 }
-/deep/ .ivu-dropdown-item{
+::v-deep .ivu-dropdown-item{
   padding: 7px 20px  !important;
 }
-/deep/ .ivu-badge-count{
+::v-deep .ivu-badge-count{
   right: -10px !important;
 }
 </style>

manager/src/views/main-parts/shrinkable-menu/shrinkable-menu.vue

@@ -90,7 +90,7 @@ export default {
 .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu){
     color: $theme_color;
 }
-/deep/.ivu-menu-vertical .ivu-menu-item-group-title {
+::v-deep.ivu-menu-vertical .ivu-menu-item-group-title {
     height: 40px;
     line-height: 40px;
     padding-left: 20px;

manager/src/views/member/list/index.vue

@@ -546,10 +546,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/ .ivu-table-wrapper {
+::v-deep .ivu-table-wrapper {
   width: 100%;
 }
-/deep/ .ivu-card {
+::v-deep .ivu-card {
   width: 100%;
 }
 .face {

manager/src/views/page-decoration/modelForm.vue

@@ -371,7 +371,7 @@ export default {
   .search {
     width: 460px;
     margin: 0 auto;
-    /deep/ .ivu-input.ivu-input-large {
+    ::v-deep .ivu-input.ivu-input-large {
       border: 2px solid $theme_color;
       font-size: 12px;
       height: 34px;
@@ -379,7 +379,7 @@ export default {
         box-shadow: none;
       }
     }
-    /deep/ .ivu-input-group-append {
+    ::v-deep .ivu-input-group-append {
       border: 1px solid $theme_color;
       border-left: none;
       height: 30px;

manager/src/views/page-decoration/wap/decorate.scss

@@ -1,4 +1,4 @@
-/deep/ .ivu-modal-mask,
+::v-deep .ivu-modal-mask,
 .ivu-modal-wrap {
   z-index: 800;
 }

manager/src/views/page-decoration/wap/style.scss

@@ -84,7 +84,7 @@
   text-align: center;
   font-weight: bold;
   line-height: 2;
-  /deep/ img {
+  ::v-deep img {
     margin: 0 auto;
   }
 }

manager/src/views/page/article-manage/HOTWORD_SETTING.vue

@@ -128,7 +128,7 @@ export default {
   }
 }
 
-/deep/ .ivu-input {
+::v-deep .ivu-input {
   width: 70px !important;
 }
 
@@ -138,7 +138,7 @@ export default {
 }
 
 .label-btns {
-  /deep/ .ivu-btn {
+  ::v-deep .ivu-btn {
     margin-right: 10px;
   }
 }

manager/src/views/page/article-manage/style.scss

@@ -1,4 +1,4 @@
-/deep/ .ivu-input{
+::v-deep .ivu-input{
   width: 200px !important;
 }
 
@@ -16,7 +16,7 @@
   margin-right: 10px;
 }
 
-/deep/ .ivu-form-item-content {
+::v-deep .ivu-form-item-content {
   margin-left: 0 !important;
   display: flex;
 }

manager/src/views/page/article-manage/template/setupHotWords.vue

@@ -116,7 +116,7 @@ export default {
   width:500px;
   justify-content:space-between;
 }
-/deep/ .ivu-input {
+::v-deep .ivu-input {
   width: 100px !important;
 }
 .ivu-input-wrapper {

manager/src/views/personal-center/personal-center.vue

@@ -188,7 +188,7 @@ export default {
   }
 }
 
-/deep/ .upload-list {
+::v-deep .upload-list {
   img {
     width: 100%;
     height: 100%;

manager/src/views/promotions/live/live-detail.vue

@@ -236,7 +236,7 @@ export default {
 <style lang="scss" scoped>
 .action {
   display: flex;
-  /deep/ .ivu-btn {
+  ::v-deep .ivu-btn {
     margin: 0 5px !important;
   }
 }

manager/src/views/promotions/points-goods/points-goods-edit.vue

@@ -287,7 +287,7 @@ div.base-info-item {
   }
 
   /*teatarea*/
-  /deep/ .el-textarea {
+  ::v-deep .el-textarea {
     width: 150%;
   }
 
@@ -315,11 +315,11 @@ div.base-info-item {
 
 /*图片上传组件第一张图设置封面*/
 .goods-images {
-  /deep/ li.el-upload-list__item:first-child {
+  ::v-deep li.el-upload-list__item:first-child {
     position: relative;
   }
 
-  /deep/ li.el-upload-list__item:first-child:after {
+  ::v-deep li.el-upload-list__item:first-child:after {
     content: "封";
     color: #fff;
     font-weight: bold;

manager/src/views/seller/bill/accountStatementBill.vue

@@ -213,7 +213,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-/deep/ .ivu-col {
+::v-deep .ivu-col {
   min-height: 100vh;
 }
 </style>

manager/src/views/seller/shop/shopOperation.vue

@@ -862,7 +862,7 @@ export default {
   z-index: 9;
 }
 
-/deep/ .ivu-tabs-bar {
+::v-deep .ivu-tabs-bar {
   margin: 0;
 }
 

manager/src/views/statistics/order.vue

@@ -782,7 +782,7 @@ export default {
       z-index: 2;
     }
   }
-  /deep/ .box {
+  ::v-deep .box {
     color: #fff;
     position: absolute;
 

manager/src/views/sys/setting-manage/authLogin/CONNECT_SETTING.vue

@@ -123,7 +123,7 @@ export default {
   margin-right: 10px;
   display: flex;
   margin-bottom: 20px;
-  /deep/ .ivu-card-body {
+  ::v-deep .ivu-card-body {
     padding: 0 16px !important;
   }
 }

manager/src/views/sys/setting-manage/authLogin/QQ_CONNECT.vue

@@ -133,7 +133,7 @@ export default {
   margin-right: 20px;
   display: flex;
   margin-bottom: 20px;
-  /deep/ .ivu-card-body {
+  ::v-deep .ivu-card-body {
     padding: 0 16px !important;
   }
 }
@@ -151,7 +151,7 @@ export default {
   padding-bottom: 10px;
   flex-direction: column;
   align-items: center;
-  /deep/ .ivu-btn {
+  ::v-deep .ivu-btn {
     width: 100px;
   }
 }

manager/src/views/sys/setting-manage/authLogin/WECHAT_CONNECT.vue

@@ -132,7 +132,7 @@ export default {
   margin-right: 20px;
   display: flex;
   margin-bottom: 20px;
-  /deep/ .ivu-card-body {
+  ::v-deep .ivu-card-body {
     padding: 0 16px !important;
   }
 }
@@ -150,7 +150,7 @@ export default {
   padding-bottom: 10px;
   flex-direction: column;
   align-items: center;
-  /deep/ .ivu-btn {
+  ::v-deep .ivu-btn {
     width: 100px;
   }
 }

manager/src/views/sys/setting-manage/pay/ALIPAY_PAYMENT.vue

@@ -90,12 +90,12 @@ export default {
   display: flex;
 }
 .w200 {
-  /deep/ .ivu-input {
+  ::v-deep .ivu-input {
     width: 250px !important;
     margin: 0 10px;
   }
 }
-/deep/ .ivu-input {
+::v-deep .ivu-input {
   width: 450px !important;
   margin: 0 10px;
 }

manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue

@@ -151,7 +151,7 @@ export default {
   margin-right: 20px;
   display: flex;
   margin-bottom: 20px;
-  /deep/ .ivu-card-body {
+  ::v-deep .ivu-card-body {
     padding: 0 16px !important;
   }
 }

manager/src/views/sys/setting-manage/pay/WECHAT_PAYMENT.vue

@@ -118,13 +118,13 @@ export default {
 }
 
 .w200 {
-  /deep/ .ivu-input {
+  ::v-deep .ivu-input {
     width: 250px !important;
     margin: 0 10px;
   }
 }
 
-/deep/ .ivu-input {
+::v-deep .ivu-input {
   width: 450px !important;
   margin: 0 10px;
 }

manager/src/views/sys/setting-manage/setting/GOODS_SETTING.vue

@@ -188,7 +188,7 @@ export default {
 .label-item {
   display: flex;
 }
-/deep/ .ivu-input {
+::v-deep .ivu-input {
   width: 100px !important;
 }
 </style>

manager/src/views/sys/setting-manage/setting/IM_SETTING.vue

@@ -74,7 +74,7 @@ export default {
   display: flex;
 }
 
-/deep/ .ivu-input {
+::v-deep .ivu-input {
   width: 300px !important;
   margin: 0 10px;
 }

manager/src/views/sys/setting-manage/setting/LOGISTICS_SETTING.vue

@@ -113,7 +113,7 @@ export default {
   display: flex;
 }
 
-/deep/ .ivu-input {
+::v-deep .ivu-input {
   width: 300px !important;
   margin: 0 10px;
 }

manager/src/views/sys/setting-manage/setting/ORDER_SETTING.vue

@@ -124,7 +124,7 @@ export default {
   margin-right: 10px;
 }
 
-/deep/ .ivu-input {
+::v-deep .ivu-input {
   width: 100px !important;
 }
 

manager/src/views/sys/setting-manage/setting/OSS_SETTING.vue

@@ -161,7 +161,7 @@ export default {
   display: flex;
 }
 
-/deep/ .ivu-input {
+::v-deep .ivu-input {
   width: 300px !important;
   margin: 0 10px;
 }

manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue

@@ -172,7 +172,7 @@ export default {
   }
 }
 
-/deep/ .ivu-input {
+::v-deep .ivu-input {
   width: 70px !important;
 }
 
@@ -182,7 +182,7 @@ export default {
 }
 
 .label-btns {
-  /deep/ .ivu-btn {
+  ::v-deep .ivu-btn {
     margin-right: 10px;
   }
 }

manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue

@@ -160,7 +160,7 @@ export default {
   display: flex;
 }
 
-/deep/ .ivu-input {
+::v-deep .ivu-input {
   width: 300px !important;
   margin: 0 10px;
 }

manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue

@@ -98,7 +98,7 @@ export default {
 
 <style lang="scss" scoped>
 @import "./style.scss";
-/deep/ .ivu-form-item-content{
+::v-deep .ivu-form-item-content{
   align-items: center;
   padding-bottom: 5px;
 }

manager/src/views/sys/setting-manage/setting/style.scss

@@ -1,4 +1,4 @@
-/deep/ .ivu-input{
+::v-deep .ivu-input{
   width: 200px !important;
 }
 
@@ -21,7 +21,7 @@
   margin-right: 10px;
 }
 
-/deep/ .ivu-form-item-content {
+::v-deep .ivu-form-item-content {
   margin-left: 0 !important;
   display: flex;
 }

seller/README.md

@@ -66,7 +66,7 @@
    
    # 对于 Node.js v18 或 v20
    NODE_OPTIONS=--openssl-legacy-provider npm run dev
-   或者 npm run dev:18
+   或者 npm run dev
    ```
 
 4. **生产构建命令**:
@@ -76,7 +76,7 @@
    
    # 对于 Node.js v18 或 v20
    NODE_OPTIONS=--openssl-legacy-provider npm run build
-   或者 npm run dev:18
+   或者 npm run dev
    ```
 
 ## 未来考虑