n20-project-component 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-project-component",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "PC 端 Vue 2 + Element UI 组件库",
   "main": "dist/n20-project-component.umd.min.js",
   "module": "dist/n20-project-component.common.js",
@@ -17,11 +17,8 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "vue": "^2.6.0",
-    "element-ui": "^2.15.0"
-  },
-  "dependencies": {
-    "n20-common-lib": "^2.22.39"
+    "element-ui": "^2.15.0",
+    "vue": "^2.6.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
@@ -65,5 +62,8 @@
     "n20"
   ],
   "author": "",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "n20-common-lib": "^3.1.21"
+  }
 }

package/src/components/ProFilterView/style/iconfont.css

@@ -0,0 +1,61 @@
+/* ProFilterView 组件使用的图标样式 */
+
+/* v3 系列图标字体 (来自 iconFont3) */
+@font-face {
+  font-family: "v3-iconfont";
+  src: url('./v3-iconfont.woff2') format('woff2'),
+       url('./v3-iconfont.woff') format('woff'),
+       url('./v3-iconfont.ttf') format('truetype');
+}
+
+/* n20 系列图标字体 (来自 iconFont) */
+@font-face {
+  font-family: "n20-iconfont";
+  src: url('./n20-iconfont.woff2') format('woff2'),
+       url('./n20-iconfont.woff') format('woff'),
+       url('./n20-iconfont.ttf') format('truetype');
+}
+
+/* 应用字体到对应的图标类 */
+[class^="v3-icon-"], [class*=" v3-icon-"] {
+  font-family: "v3-iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[class^="n20-icon-"], [class*=" n20-icon-"] {
+  font-family: "n20-iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ProFilterView 使用的 v3 系列图标 */
+.v3-icon-find:before {
+  content: "\e6ef";
+}
+
+.v3-icon-inbox:before {
+  content: "\e6f2";
+}
+
+.v3-icon-more:before {
+  content: "\e670";
+}
+
+.v3-icon-filter:before {
+  content: "\e6f4";
+}
+
+/* ProFilterView 使用的 n20 系列图标 */
+.n20-icon-xiala-moren:before {
+  content: "\e66c";
+}
+
+/* Element UI 图标 (el-icon-check) */
+/* .el-icon-check:before {
+  content: "\e611";
+} */

package/src/components/ProFilterView/style/style.scss

@@ -0,0 +1,352 @@
+// ProFilterView 组件样式
+
+// 视图弹窗样式
+.el-popover.pro-filter-view-popover {
+  padding: 8px;
+  margin-top: 4px;
+  max-width: 256px;
+
+  .filter-view-wrapper {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+  
+  /* more 图标默认隐藏，hover 列表项时显示 */
+  .proFilterView-list-item .proFilterView-list-item__more {
+    visibility: hidden;
+  }
+  
+  .proFilterView-list-item:hover .proFilterView-list-item__more {
+    visibility: visible;
+  }
+  
+  /* 视图名称单行溢出省略 */
+  .proFilterView-list-item__name {
+    flex: 1;
+    width: 180px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+}
+
+// ProFilterView 主容器
+.ProFilterView {
+  width: 100%;
+  font-size: 14px;
+
+  .top {
+    padding: 6px 0px;
+    border-bottom: 1px solid #e5e6eb !important;
+  }
+  
+  .filter {
+    padding: 12px 0px 4px;
+    border-bottom: 1px solid #e5e6eb !important;
+  }
+  
+  .flex-item {
+    padding: 0 8px;
+    margin-top: 8px;
+  }
+
+  .botton {
+    padding: 8px;
+    border-radius: 4px;
+    background: var(--fill-2, #f2f3f5);
+    border: none;
+    
+    .popover-title {
+      display: inline-block;
+      max-width: 120px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+    }
+  }
+  
+  .activiti {
+    background: var(--color-primary-light-9);
+    border: var(--color-primary-light-9);
+    color: var(--color-primary);
+  }
+
+  ::v-deep .el-form-item__content {
+    margin-left: 0;
+  }
+}
+
+// 分割线
+.ProFilterView_divider {
+  width: 100%;
+  height: 1px;
+  background-color: #e5e5e5;
+  margin-top: 8px;
+}
+
+// 新建视图按钮
+.ProFilterView-add {
+  cursor: pointer;
+  margin-top: 8px;
+
+  img {
+    margin-right: 12px;
+  }
+  
+  padding: 8px;
+  height: 20px;
+  line-height: 20px;
+  position: relative;
+}
+
+.ProFilterView-add:hover {
+  border-radius: 2px;
+  background: var(--fill-1, #f7f8fa);
+}
+
+// 列表项样式
+.proFilterView-list-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  padding: 0px;
+  cursor: pointer;
+  border-radius: 2px;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+
+  &.is-selected {
+    color: var(--color-primary);
+  }
+
+  .selected-icon {
+    color: var(--color-primary);
+  }
+}
+
+// 筛选器隐藏状态样式
+.filter.is-hidden {
+  padding: 4px;
+  border-bottom: none !important;
+}
+
+// 高级查询样式
+.data-scope {
+  background: var(--fill-1, #f5f7fa);
+  padding: 16px;
+  border-radius: 4px;
+  max-height: 450px;
+  overflow-y: auto;
+  
+  .children {
+    margin-left: 80px;
+    border: 1px dashed #e5e6eb;
+  }
+  
+  .view-name {
+    margin-bottom: 16px;
+  }
+
+  .view-name-input {
+    width: 100%;
+  }
+
+  .condition-group {
+    margin-bottom: 16px;
+    padding-left: 32px;
+    position: relative;
+  }
+
+  .delete-group-btn-top {
+    position: absolute;
+    top: -16px;
+    right: -6px;
+    color: #4e5969;
+    z-index: 1;
+  }
+
+  .delete-group-btn-top :hover {
+    background: var(--color-danger-light-9, #fef0f0);
+  }
+  
+  .conditions {
+    padding: 12px;
+    position: relative;
+    display: flex;
+    height: calc(44px * var(--condition-count, 1) - 12px);
+    
+    .line {
+      width: 1px;
+      height: calc(44px * var(--line-condition-count, 1) - 36px);
+      background-color: #606266;
+      margin-right: 48px;
+      opacity: calc(1 - var(--is-single, 0));
+      margin-top: 12px;
+      position: relative;
+      
+      .logic-select {
+        width: 60px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        border-radius: 4px;
+        overflow: hidden;
+        border: 1px solid #dcdfe6;
+
+        .logic-option {
+          flex: 1;
+          text-align: center;
+          padding: 4px 0;
+          font-size: 12px;
+          cursor: pointer;
+          background-color: #fff;
+
+          &.active {
+            background-color: var(--color-primary);
+            color: #fff;
+          }
+        }
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 8px;
+        height: 1px;
+        background-color: #606266;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 8px;
+        height: 1px;
+        background-color: #606266;
+      }
+    }
+    
+    .condition-item {
+      margin-bottom: 12px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .condition-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+
+  .group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    padding: 8px;
+    background: var(--fill-2, #f2f3f5);
+    border-radius: 4px;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .group-logic-label,
+  .condition-logic-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .logic-text {
+    font-size: 14px;
+    color: var(--color-text-regular, #606266);
+  }
+
+  .delete-group-btn {
+    color: var(--color-danger, #f56c6c);
+    padding: 4px 8px;
+  }
+
+  .delete-group-btn:hover {
+    background: var(--color-danger-light-9, #fef0f0);
+  }
+
+  .field-select,
+  .operator-select {
+    width: 150px;
+  }
+
+  .value-inputs {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .value-select,
+  .text-input {
+    width: 200px;
+  }
+
+  .date-picker {
+    width: 300px;
+  }
+
+  .number-input {
+    width: 200px;
+  }
+
+  .number-range {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .delete-btn {
+    padding: 8px 2px;
+    margin-left: 0;
+    color: #4e5969;
+  }
+
+  .delete-btn:hover {
+    background: var(--color-danger-light-9, #fef0f0);
+  }
+
+  .add-btn {
+    padding: 8px 2px;
+    margin-right: -8px;
+    color: #4e5969;
+  }
+
+  .add-btn:hover {
+    background: var(--color-primary-light-9, #ecf5ff);
+  }
+  
+  .group-actions {
+    display: flex;
+    gap: 12px;
+    margin-top: 8px;
+  }
+
+  .add-condition-btn,
+  .add-group-btn {
+    color: var(--color-primary, #409eff);
+    font-size: 14px;
+  }
+}