n20-common-lib 3.2.4 → 3.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.2.4",
+  "version": "3.2.6",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/css/_coreLib.scss

@@ -51,6 +51,7 @@
 @import './view-toggle.scss';
 @import './pivot.scss';
 @import './dynamic-table.scss';
+@import './dynamic-field.scss';
 @import './v3/table.scss';
 @import './v3/secondary-tab.scss';
 @import './v3/header.scss';
@@ -58,6 +59,7 @@
 @import './v3/radioCard.scss';
 @import './v3/collapse.scss';
 @import './v3/anchor.scss';
+@import './info-card.scss';
 
 //临时引入
 @import '../../components/ChildRange/style.scss';

package/src/assets/css/dynamic-field.scss

@@ -0,0 +1,86 @@
+/**
+ * DynamicField 模块样式
+ * 包含 DynamicField、DynamicFormView、ContentPop、TableView 组件样式
+ */
+
+/* DynamicField 表单组件样式 */
+.cl-dynamic-field.vertical-form {
+  .el-form-item__content {
+    width: 100%;
+    .input-w {
+      width: 100%;
+    }
+  }
+
+  // 无标签字段隐藏
+  .no-label {
+    display: none !important;
+    .el-form-item__label {
+      display: none;
+    }
+  }
+
+  .n20-form-expandable-pane {
+    container-type: inline-size;
+    // Anchor Item 标题容器样式
+    .anchor-title-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      width: calc(100cqw - 44px);
+      min-height: 40px;
+    }
+
+    .anchor-title-left {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+    }
+
+    .anchor-title-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex: 1;
+      justify-content: flex-end;
+    }
+
+    // 块级插槽样式
+    .tab-block-slot {
+      width: 100%;
+      padding: 12px 0;
+    }
+
+    .field-block-slot {
+      width: 100%;
+      padding: 2px 0;
+    }
+
+    .tab-top-slot {
+      border-bottom: 1px solid var(--color-border-lighter, #ebeef5);
+      margin-bottom: 16px;
+    }
+
+    .tab-bottom-slot {
+      border-top: 1px solid var(--color-border-lighter, #ebeef5);
+      margin-top: 16px;
+    }
+
+    .field-after-index-slot {
+      margin-top: 16px;
+      padding: 12px;
+      background-color: var(--color-bg-light, #f5f7fa);
+      border-radius: 4px;
+    }
+  }
+}
+
+/* DynamicFormView 表单详情视图样式 */
+.CustomFormView {
+  font-size: 14px;
+}
+/* ContentPop / TableView 弹窗内容样式 */
+.contentPop {
+  font-size: 14px;
+}

package/src/assets/css/info-card.scss

@@ -0,0 +1,168 @@
+/**
+ * InfoCard 模块样式
+ * 信息卡片组件，支持折叠展开、装饰logo等
+ */
+
+.info-card + .info-card {
+  margin-top: 8px;
+}
+.info-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 12px 16px;
+  border-radius: 4px;
+  box-sizing: border-box;
+
+  // 右下角装饰logo - 相对于整个卡片定位
+  .corner-logo {
+    position: absolute;
+    bottom: 0;
+    right: -16px;
+    width: 120px;
+    height: 120px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .info-card-header {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+    position: relative;
+    width: 100%;
+    flex-shrink: 0;
+    z-index: 1;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      position: relative;
+      flex-shrink: 0;
+
+      .header-logo {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        position: relative;
+      }
+
+      .header-title {
+        font-family: 'PingFang SC', 'Medium', sans-serif;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        color: #1d2129;
+        white-space: nowrap;
+        position: relative;
+        flex-shrink: 0;
+      }
+    }
+
+    .header-right {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px;
+      cursor: pointer;
+      border-radius: 2px;
+      overflow: hidden;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: rgba(0, 122, 255, 0.06);
+      }
+
+      .collapse-text {
+        font-family: 'PingFang SC', 'Regular', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        color: #007aff;
+        white-space: nowrap;
+      }
+
+      .collapse-arrow {
+        width: 14px;
+        height: 14px;
+        position: relative;
+        flex-shrink: 0;
+        transition: transform 0.3s ease;
+
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          width: 8px;
+          height: 2px;
+          background-color: #007aff;
+          border-radius: 1px;
+          top: 50%;
+          left: 50%;
+          transition: all 0.3s ease;
+        }
+
+        &::before {
+          transform: translate(-50%, -50%) rotate(45deg);
+          margin-left: -2px;
+        }
+
+        &::after {
+          transform: translate(-50%, -50%) rotate(-45deg);
+          margin-left: 2px;
+        }
+
+        &.expanded {
+          &::before {
+            transform: translate(-50%, -50%) rotate(-45deg);
+            margin-left: -3px;
+          }
+
+          &::after {
+            transform: translate(-50%, -50%) rotate(45deg);
+            margin-left: 3px;
+          }
+        }
+      }
+    }
+  }
+
+  .info-card-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    position: relative;
+    width: 100%;
+    flex: 1;
+    z-index: 1;
+  }
+
+  // 折叠动画（Vue 2.6 transition 类名：无 -from/-to 后缀）
+  .collapse-enter-active,
+  .collapse-leave-active {
+    transition: all 0.3s ease;
+    overflow: hidden;
+  }
+
+  .collapse-enter,
+  .collapse-leave-to {
+    max-height: 0;
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  .collapse-enter-to,
+  .collapse-leave {
+    max-height: 2000px;
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/components/AIButton/index.vue

@@ -23,9 +23,10 @@
 </template>
 
 <script>
+import axios from '../../utils/axios.js'
 import Dialog from '../Dialog/index.vue'
 import clUpload from '../Upload/index.vue'
-import axios from '../../utils/axios.js'
+
 let dayjs = undefined
 import('../../index.js').then((res) => {
   dayjs = res.dayjs
@@ -99,4 +100,3 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped></style>

package/src/components/ApprovalCard/index.vue

@@ -340,12 +340,14 @@
 
 <script>
 import 'viewerjs/dist/viewer.css'
+
 import getJsonc from '../../assets/getJsonc.js'
 import axios from '../../utils/axios'
 import { $lc } from '../../utils/i18n/index'
 import importG from '../../utils/importGlobal.js'
 import { linkPush } from '../../utils/urlToGo.js'
 import Dialog from '../Dialog/index.vue'
+
 const ViewerImg = async function () {
   let { component } = await importG('v-viewer', () => import(/*webpackChunkName: "v-viewer"*/ 'v-viewer'))
   return component
@@ -428,6 +430,10 @@ export default {
     align: {
       type: String,
       default: 'left-right'
+    },
+    seeTypes: {
+      type: RegExp,
+      default: /\.(jpg|png|gif|svg|pdf|swf|xlsx|xls|docx|doc|txt)$/i
     }
   },
   data() {
@@ -464,7 +470,6 @@ export default {
       imgType: /\.(jpg|png1|gif|svg)$/i,
       previewName: '',
       previewSameOrg: false,
-      seeTypes: /\.(jpg|png|gif|svg|pdf|swf|xlsx|xls|docx|doc)$/i,
       seeRow: {},
       showFlowHistory: true,
       showFlowHistoryChild: true

package/src/components/AttachmentPass/index.vue

@@ -282,5 +282,3 @@ export default {
   }
 }
 </script>
-
-<style lang="less" scoped></style>