@deppon/deppon-template 2.4.1 → 2.4.3

package/es/pro-field/components/TagInput/FieldTagInput.vue_vue_type_script_setup_true_lang.vue.js

@@ -13,25 +13,21 @@ var _hoisted_1 = {
   "class": "field-tag-input-readonly"
 };
 var _hoisted_2 = {
-  key: 1,
-  "class": "field-tag-input"
-};
-var _hoisted_3 = {
   "class": "tag-input-input-wrap"
 };
-var _hoisted_4 = {
+var _hoisted_3 = {
   key: 0,
   "class": "tag-input-tip-wrap"
 };
-var _hoisted_5 = {
+var _hoisted_4 = {
   key: 0,
   "class": "tag-input-add-error"
 };
-var _hoisted_6 = {
+var _hoisted_5 = {
   key: 1,
   "class": "tag-input-list-row"
 };
-var _hoisted_7 = {
+var _hoisted_6 = {
   key: 0,
   "class": "tag-input-list-label"
 };
@@ -63,12 +59,14 @@ var script = {
     var __emit = _ref.emit;
     var props = __props;
     var emit = __emit;
+    var rootRef = ref(null);
     var inputRef = ref(null);
     var inputValue = ref('');
     var addLoading = ref(false);
     var removingIndex = ref(-1);
     /** 添加时校验失败的错误信息，在输入框下方展示 */
     var addError = ref('');
+    var inFormItem = ref(false);
     var readonlyRef = ref(null);
     var readonlyOverflow = ref(false);
     var tipRef = ref(null);
@@ -103,6 +101,10 @@ var script = {
     });
     onMounted(function () {
       nextTick(runOverflowChecks);
+      var rootEl = rootRef.value;
+      if (rootEl && typeof rootEl.closest === 'function') {
+        inFormItem.value = !!rootEl.closest('.el-form-item');
+      }
       window.addEventListener('resize', runOverflowChecks);
     });
     onUnmounted(function () {
@@ -156,6 +158,11 @@ var script = {
       var _props$fieldProps0;
       return ((_props$fieldProps0 = props.fieldProps) === null || _props$fieldProps0 === void 0 ? void 0 : _props$fieldProps0.disabled) === true;
     });
+    /** 在 el-form-item 内时，空输入提示优先复用外层错误区，避免双重提示 */
+    var useFormItemRequiredError = computed(function () {
+      var _props$fieldProps1;
+      return ((_props$fieldProps1 = props.fieldProps) === null || _props$fieldProps1 === void 0 ? void 0 : _props$fieldProps1.useFormItemRequiredError) !== false;
+    });
     var tagList = computed(function () {
       var val = props.text;
       if (Array.isArray(val)) return val;
@@ -171,9 +178,8 @@ var script = {
       var trimmed = (value || '').trim();
       var rules = addRules.value;
       if (!rules.length) {
-        // 未显式配置添加校验规则时，空输入仅拦截，不展示内部错误，
-        // 避免与外层 el-form-item 的必填提示重复显示。
-        if (!trimmed) return '';
+        // 未配置规则时，至少保证空输入有基础提示。
+        if (!trimmed) return '请输入';
         return '';
       }
       var _iterator = _createForOfIteratorHelper(rules),
@@ -214,7 +220,7 @@ var script = {
     }
     function _addItem() {
       _addItem = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _inputValue$value, _props$fieldProps1;
+        var _inputValue$value, _props$fieldProps10;
         var raw, name, list, err, onAdd, result, nextList;
         return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -230,40 +236,46 @@ var script = {
               name = raw.trim();
               list = _toConsumableArray(tagList.value);
               if (name) {
-                _context.next = 2;
+                _context.next = 3;
                 break;
               }
-              // 空值不允许加入；未配置 addRules 时静默拦截，避免与外层必填提示重复。
-              if (addRules.value.length) {
-                addError.value = validateAddInput(raw, list);
+              if (!(useFormItemRequiredError.value && inFormItem.value)) {
+                _context.next = 2;
+                break;
               }
+              // 主动触发一次 update:text，让外层 ProForm 执行 validateField 并展示 el-form-item 错误。
+              emit('update:text', list);
               return _context.abrupt("return");
             case 2:
+              // 非表单场景保留组件内提示。
+              addError.value = validateAddInput(raw, list);
+              return _context.abrupt("return");
+            case 3:
               err = validateAddInput(raw, list);
               if (!err) {
-                _context.next = 3;
+                _context.next = 4;
                 break;
               }
               addError.value = err;
               return _context.abrupt("return");
-            case 3:
+            case 4:
               if (!(list.length >= maxCount.value)) {
-                _context.next = 4;
+                _context.next = 5;
                 break;
               }
               addError.value = "\u6700\u591A\u6DFB\u52A0".concat(maxCount.value, "\u4E2A");
               return _context.abrupt("return");
-            case 4:
-              onAdd = (_props$fieldProps1 = props.fieldProps) === null || _props$fieldProps1 === void 0 ? void 0 : _props$fieldProps1.onAdd;
+            case 5:
+              onAdd = (_props$fieldProps10 = props.fieldProps) === null || _props$fieldProps10 === void 0 ? void 0 : _props$fieldProps10.onAdd;
               if (!(typeof onAdd === 'function')) {
-                _context.next = 10;
+                _context.next = 11;
                 break;
               }
               addLoading.value = true;
-              _context.prev = 5;
-              _context.next = 6;
+              _context.prev = 6;
+              _context.next = 7;
               return Promise.resolve(onAdd(name, list));
-            case 6:
+            case 7:
               result = _context.sent;
               if (Array.isArray(result)) {
                 emit('update:text', result);
@@ -283,18 +295,18 @@ var script = {
                   return (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 || (_inputRef$value2$focu = _inputRef$value2.focus) === null || _inputRef$value2$focu === void 0 ? void 0 : _inputRef$value2$focu.call(_inputRef$value2);
                 });
               }
-              _context.next = 8;
+              _context.next = 9;
               break;
-            case 7:
-              _context.prev = 7;
-              _context["catch"](5);
             case 8:
               _context.prev = 8;
-              addLoading.value = false;
-              return _context.finish(8);
+              _context["catch"](6);
             case 9:
-              return _context.abrupt("return");
+              _context.prev = 9;
+              addLoading.value = false;
+              return _context.finish(9);
             case 10:
+              return _context.abrupt("return");
+            case 11:
               list.push(name);
               emit('update:text', list);
               inputValue.value = '';
@@ -303,11 +315,11 @@ var script = {
                 var _inputRef$value3, _inputRef$value3$focu;
                 return (_inputRef$value3 = inputRef.value) === null || _inputRef$value3 === void 0 || (_inputRef$value3$focu = _inputRef$value3.focus) === null || _inputRef$value3$focu === void 0 ? void 0 : _inputRef$value3$focu.call(_inputRef$value3);
               });
-            case 11:
+            case 12:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[5, 7, 8, 9]]);
+        }, _callee, null, [[6, 8, 9, 10]]);
       }));
       return _addItem.apply(this, arguments);
     }
@@ -316,7 +328,7 @@ var script = {
     }
     function _removeItem() {
       _removeItem = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(index) {
-        var _props$fieldProps10;
+        var _props$fieldProps11;
         var list, name, onRemove, result, nextList;
         return _regeneratorRuntime.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -335,7 +347,7 @@ var script = {
               }
               return _context2.abrupt("return");
             case 2:
-              onRemove = (_props$fieldProps10 = props.fieldProps) === null || _props$fieldProps10 === void 0 ? void 0 : _props$fieldProps10.onRemove;
+              onRemove = (_props$fieldProps11 = props.fieldProps) === null || _props$fieldProps11 === void 0 ? void 0 : _props$fieldProps11.onRemove;
               if (!(typeof onRemove === 'function')) {
                 _context2.next = 8;
                 break;
@@ -390,11 +402,16 @@ var script = {
           }, toDisplayString(displayText.value), 513 /* TEXT, NEED_PATCH */)];
         }),
         _: 1 /* STABLE */
-      }, 8 /* PROPS */, ["content", "disabled"])])) : __props.mode === 'edit' || __props.mode === 'update' ? (openBlock(), createElementBlock("div", _hoisted_2, [createCommentVNode(" 输入 + 添加 区域 "), createElementVNode("div", {
+      }, 8 /* PROPS */, ["content", "disabled"])])) : __props.mode === 'edit' || __props.mode === 'update' ? (openBlock(), createElementBlock("div", {
+        key: 1,
+        ref_key: "rootRef",
+        ref: rootRef,
+        "class": "field-tag-input"
+      }, [createCommentVNode(" 输入 + 添加 区域 "), createElementVNode("div", {
         "class": normalizeClass(["tag-input-input-row", {
           'has-error': addError.value
         }])
-      }, [createElementVNode("div", _hoisted_3, [createVNode(unref(ElInput), {
+      }, [createElementVNode("div", _hoisted_2, [createVNode(unref(ElInput), {
         ref_key: "inputRef",
         ref: inputRef,
         modelValue: inputValue.value,
@@ -435,7 +452,7 @@ var script = {
           }, 8 /* PROPS */, ["loading", "disabled"]))];
         }),
         _: 3 /* FORWARDED */
-      }, 8 /* PROPS */, ["modelValue", "placeholder", "disabled"])]), tip.value ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(unref(ElTooltip), {
+      }, 8 /* PROPS */, ["modelValue", "placeholder", "disabled"])]), tip.value ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(ElTooltip), {
         content: tip.value,
         placement: "top",
         disabled: !tipOverflow.value
@@ -448,7 +465,7 @@ var script = {
           }, toDisplayString(tip.value), 513 /* TEXT, NEED_PATCH */)];
         }),
         _: 1 /* STABLE */
-      }, 8 /* PROPS */, ["content", "disabled"])])) : createCommentVNode("v-if", true)], 2 /* CLASS */), addError.value ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(addError.value), 1 /* TEXT */)) : createCommentVNode("v-if", true), createCommentVNode(" 标签列表：有数据时才显示 "), tagList.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [listLabel.value ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(listLabel.value) + "(" + toDisplayString(tagList.value.length) + "/" + toDisplayString(maxCount.value) + ") ", 1 /* TEXT */)) : createCommentVNode("v-if", true), createElementVNode("div", {
+      }, 8 /* PROPS */, ["content", "disabled"])])) : createCommentVNode("v-if", true)], 2 /* CLASS */), addError.value ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(addError.value), 1 /* TEXT */)) : createCommentVNode("v-if", true), createCommentVNode(" 标签列表：有数据时才显示 "), tagList.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [listLabel.value ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(listLabel.value) + "(" + toDisplayString(tagList.value.length) + "/" + toDisplayString(maxCount.value) + ") ", 1 /* TEXT */)) : createCommentVNode("v-if", true), createElementVNode("div", {
         "class": normalizeClass(["tag-input-list-content", {
           'is-removing': removingIndex.value >= 0
         }])
@@ -477,7 +494,7 @@ var script = {
           }), 128 /* KEYED_FRAGMENT */))];
         }),
         _: 1 /* STABLE */
-      })], 2 /* CLASS */)])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true);
+      })], 2 /* CLASS */)])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */)) : createCommentVNode("v-if", true);
     };
   }
 };

package/es/pro-layout/ProLayout.vue.css

@@ -1166,9 +1166,9 @@ body .el-overlay-dialog,
   width: 100%;
   height: 100%;
   overflow: hidden;
+  background: radial-gradient(circle at 8% 10%, rgba(64, 158, 255, 0.08), transparent 44%), radial-gradient(circle at 88% 0%, rgba(99, 102, 241, 0.08), transparent 38%), linear-gradient(180deg, #f6f9ff 0%, #f4f7fd 100%);
   /* 覆盖 Element Plus 按钮样式，确保优先级 */
   /* 防止 header-right 插槽内容挤压操作按钮 */
-  /* 限制 header-right 插槽内容，防止挤压按钮 */
 }
 .pro-layout__sider {
   display: flex;
@@ -1509,11 +1509,13 @@ body .el-overlay-dialog,
 }
 .pro-layout__header {
   padding: 0 !important;
-  background-color: var(--el-bg-color, #ffffff) !important;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.92)) !important;
+  backdrop-filter: blur(10px);
   position: relative;
   z-index: 100;
   width: 100vw;
-  border-bottom: 1px solid var(--el-border-color-lighter, #f5f5f5) !important;
+  border-bottom: 1px solid rgba(39, 82, 173, 0.08) !important;
+  box-shadow: 0 8px 24px rgba(31, 56, 104, 0.06);
   /* 覆盖 Element Plus 默认的按钮间距 */
 }
 .pro-layout__header--fixed {
@@ -1522,12 +1524,14 @@ body .el-overlay-dialog,
   left: 0;
   right: 0;
   z-index: 1000;
-  border-bottom: 1px solid var(--el-border-color-lighter, #f5f5f5) !important;
+  border-bottom: 1px solid rgba(39, 82, 173, 0.08) !important;
+  box-shadow: 0 8px 24px rgba(31, 56, 104, 0.06);
 }
 .pro-layout__header-content {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 8px;
   height: 100%;
   width: 100%;
 }
@@ -1567,6 +1571,7 @@ body .el-overlay-dialog,
   gap: 12px;
   padding: 0 16px;
   flex-shrink: 0;
+  margin-left: auto;
 }
 .pro-layout__header-search {
   width: 180px;
@@ -1634,26 +1639,49 @@ body .el-overlay-dialog,
   font-size: 14px;
   color: var(--el-text-color-secondary, #909399) !important;
 }
-.pro-layout .pro-layout__header-right {
-  /* 确保操作按钮不会被压缩 */
-}
 .pro-layout .pro-layout__header-right .pro-layout__header-action-btn {
   flex-shrink: 0 !important;
   min-width: 32px !important;
   width: 32px !important;
   height: 32px !important;
 }
-.pro-layout .pro-layout__header .pro-layout__header-right {
-  /* 确保 header-right 插槽内容不会占用过多空间 */
-}
-.pro-layout .pro-layout__header .pro-layout__header-right > div:first-child {
+.pro-layout .pro-layout__header-right .pro-layout__header-search {
   flex-shrink: 1;
   min-width: 0;
-  max-width: 150px;
-  /* 限制最大宽度 */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  max-width: 220px;
+}
+.pro-layout .pro-layout__header-right .pro-layout__header-user-name {
+  flex-shrink: 0;
+  max-width: none;
+}
+.pro-layout__top-menu {
+  flex: 1;
+  min-width: 0;
+  padding: 0 6px;
+}
+.pro-layout__top-menu .pro-layout__top-menu-el {
+  background: transparent !important;
+  border-bottom: none !important;
+}
+.pro-layout__top-menu .el-menu-item {
+  height: 38px !important;
+  margin: 8px 6px !important;
+  border-radius: 10px !important;
+  border-bottom: none !important;
+  color: #4a5b76 !important;
+  transition: all 0.2s ease !important;
+}
+.pro-layout__top-menu .el-menu-item:hover {
+  color: #1f6bff !important;
+  background: rgba(64, 158, 255, 0.09) !important;
+}
+.pro-layout__top-menu .el-menu-item.is-active {
+  background: linear-gradient(135deg, rgba(57, 124, 255, 0.18), rgba(108, 74, 255, 0.15)) !important;
+  box-shadow: 0 8px 20px rgba(56, 108, 255, 0.16);
+}
+.pro-layout__top-menu .el-menu-item.is-active .pro-layout__top-menu-item-label {
+  color: #1651d7 !important;
+  font-weight: 700;
 }
 .pro-layout__breadcrumb {
   display: flex;
@@ -1713,64 +1741,121 @@ body .el-overlay-dialog,
 .pro-layout__tags-view {
   flex-shrink: 0;
   height: auto !important;
-  min-height: 40px !important;
-  background-color: var(--el-bg-color, #ffffff) !important;
-  border-bottom: 1px solid var(--el-border-color-light, #ebeef5) !important;
+  min-height: 48px !important;
+  background: transparent !important;
+  border-bottom: none !important;
   overflow: visible;
 }
 .pro-layout__tags-menu {
-  height: 100%;
-  border-bottom: none;
-  background-color: transparent;
-  /* 修复 tags-menu 高度问题，不影响宽度 */
+  display: flex !important;
+  align-items: center;
+  flex-wrap: nowrap !important;
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  min-height: 48px;
+  padding: 6px 12px !important;
+  margin: 8px 14px 6px;
+  border-radius: 12px;
+  border: none !important;
+  outline: none;
+  background: transparent !important;
+  box-shadow: none;
+  height: auto !important;
 }
 .pro-layout__tags-menu.el-menu.el-menu--horizontal {
-  height: 40px !important;
-  line-height: 40px !important;
+  height: auto !important;
+  line-height: normal !important;
+  border-bottom: none !important;
 }
 .pro-layout__tags-menu .el-menu-item {
-  height: 100%;
-  line-height: normal !important;
-  padding: 6px 12px;
-  margin: 0;
-  border-bottom: none;
-  background-color: transparent;
-  border-radius: 4px;
+  flex: 0 0 auto;
+  height: 34px !important;
+  line-height: 34px !important;
+  margin-right: 8px !important;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0 12px !important;
+  border-radius: 8px !important;
+  border: none !important;
+  border-bottom: none !important;
+  background: transparent !important;
+  transition: all 0.2s ease;
   position: relative;
-  flex-shrink: 0;
-  transition: all 0.3s;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 .pro-layout__tags-menu .el-menu-item:not(:last-child):not(.is-active)::after {
-  content: '';
-  position: absolute;
-  right: -4px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1px;
-  height: 16px;
-  background-color: var(--el-border-color-lighter, #f0f0f0) !important;
+  display: none;
 }
 .pro-layout__tags-menu .el-menu-item:hover {
-  background-color: var(--el-fill-color-light, #f5f7fa) !important;
+  background: rgba(78, 138, 255, 0.1) !important;
 }
 .pro-layout__tags-menu .el-menu-item.is-active {
-  background-color: var(--el-fill-color-light, #f5f7fa) !important;
-  color: var(--el-color-primary, #409eff) !important;
-  border-top-left-radius: 15px;
-  border-top-right-radius: 15px;
+  border: none !important;
+  background: linear-gradient(135deg, #ffffff, #f3f8ff) !important;
+  box-shadow: 0 4px 12px rgba(59, 98, 186, 0.16);
   border-bottom: none !important;
-  position: relative;
   overflow: visible;
 }
-.pro-layout__tags-menu .el-menu-item.is-active .el-menu-item__title,
+.pro-layout__tags-menu .pro-layout__tag-label {
+  color: #46556f;
+  font-size: 12px;
+  font-weight: 500;
+  text-decoration: none !important;
+}
 .pro-layout__tags-menu .el-menu-item.is-active .pro-layout__tag-label {
-  color: var(--el-color-primary, #409eff) !important;
+  color: #2259d2 !important;
+  font-weight: 600;
 }
-.pro-layout__tags-menu .el-menu-item.is-active:not(:last-child)::after {
-  display: none;
+.pro-layout__tags-menu .pro-layout__tag-actions .pro-layout__tag-icon {
+  color: #8a98b2;
+  font-size: 12px;
+}
+.pro-layout__tags-menu .pro-layout__tag-item .pro-layout__tag-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 2px;
+}
+.pro-layout__tags-menu .pro-layout__tag-item .pro-layout__tag-icon {
+  margin-left: 0 !important;
+  padding: 0;
+}
+.pro-layout__tags-menu .pro-layout__tag-item:hover .pro-layout__tag-actions .pro-layout__tag-icon,
+.pro-layout__tags-menu .pro-layout__tag-actions .pro-layout__tag-icon:hover {
+  color: #2b65f5 !important;
+}
+.pro-layout__tags-menu .fixed-home-tag-item {
+  cursor: pointer;
+  user-select: none;
+  padding: 0 12px !important;
+  background: linear-gradient(135deg, #eff5ff, #e8f1ff) !important;
+  box-shadow: none !important;
+}
+.pro-layout__tags-menu .fixed-home-tag-item .fixed-home-tag-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #2e5ccf;
+  font-weight: 600;
+}
+.pro-layout__tags-menu .fixed-home-tag-item .fixed-home-tag-icon {
+  font-style: normal;
+  font-size: 14px;
+  line-height: 1;
+}
+.pro-layout__tags-menu .fixed-home-tag-item .pro-layout__tag-actions {
+  display: none !important;
+}
+.pro-layout__tags-menu > .el-sub-menu {
+  margin-left: auto !important;
+  position: sticky;
+  right: 0;
+  z-index: 2;
+  border-radius: 10px;
+  background: linear-gradient(90deg, rgba(249, 252, 255, 0.92), rgba(245, 249, 255, 0.96));
+  box-shadow: -10px 0 14px -12px rgba(27, 56, 106, 0.32);
 }
 .pro-layout__tag-item {
   display: flex;
@@ -1851,7 +1936,7 @@ body .el-overlay-dialog,
   width: 100%;
   padding: 0 !important;
   margin: 0 !important;
-  background-color: var(--el-bg-color-page, #f8f8f8) !important;
+  background: radial-gradient(circle at top left, #eef4ff 0%, #f7f9ff 45%, #fbfcff 100%) !important;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@deppon/deppon-template",
-    "version": "2.4.1",
+    "version": "2.4.3",
     "main": "es/index.js",
     "module": "es/index.js",
     "typings": "es/index.d.ts",
@@ -43,11 +43,11 @@
         "less": "^4.2.0"
     },
     "dependencies": {
-        "@deppon/deppon-assets": "2.4.1",
-        "@deppon/deppon-request": "2.4.1",
-        "@deppon/deppon-router": "2.4.1",
-        "@deppon/deppon-ui": "2.4.1",
-        "@deppon/deppon-utils": "2.4.1",
+        "@deppon/deppon-assets": "2.4.3",
+        "@deppon/deppon-request": "2.4.3",
+        "@deppon/deppon-router": "2.4.3",
+        "@deppon/deppon-ui": "2.4.3",
+        "@deppon/deppon-utils": "2.4.3",
         "dayjs": "^1.11.10",
         "lodash-es": "^4.17.21",
         "mitt": "^3.0.1"