agilebuilder-ui 1.1.13 → 1.1.14

package/src/styles/display-layout.scss

@@ -32,3 +32,255 @@
     box-shadow: 0px 1px 8px 0px #00000019;
   }
 }
+
+[overflow-wrap] {
+  word-wrap: break-word; 
+  overflow-wrap: break-word;
+}
+
+.yx-flex-wrap {
+  display: flex;
+  justify-content: flex-start;
+  &[vertical] {
+    flex-direction: column;
+  }
+  &[justify='space-between'] {
+    justify-content: space-between;
+  }
+  &[align='center'] {
+    align-items: center;
+  }
+  &[wrap] {
+    flex-wrap: wrap;
+  }
+}
+
+.el-descriptions {
+  &[layout='form'] {
+    .el-descriptions__cell {
+      display: flex;
+      gap: 10px;
+      .el-descriptions__label {
+        margin: 0;
+        max-width: 40%;
+        flex: 0 0 auto;
+      }
+      .el-descriptions__content {
+        flex: 1 1 auto;
+        word-wrap: break-word; 
+        overflow-wrap: break-word;
+
+        .ellipsis {
+          word-wrap: break-word !important; 
+          overflow-wrap: break-word !important; 
+          width: auto !important;
+          white-space: inherit !important;
+        }
+      }
+      @media (max-width: 450px) {
+        & {
+          flex-direction: column;
+        }
+        .el-descriptions__label {
+          width: 100% !important;
+          max-width: 100%;
+        }
+      }
+    }
+  }
+}
+
+.yx-card-main {
+  &.is-checked {
+    border-color: #409eff;
+    background-color: #ecf5ff;
+  }
+  &[header-padding] {
+    & > .el-card__header {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: stretch;
+      padding: 0 !important;
+      overflow: hidden;
+      min-height: 50px;
+
+      @media (max-width: 450px) {
+        min-height: 40px;
+      }
+
+      & > .yx-flex-wrap {
+        gap: 10px;
+        height: 100%;
+        padding: 5px var(--el-card-padding);
+      }
+    }
+  }
+  &[body-padding] {
+    & > .el-card__body {
+      padding: 0 !important;
+    }
+  }
+  .el-card__header {
+
+    & > .yx-flex-wrap {
+      flex: 1 1 auto;
+
+      [layout-title] {
+        max-width: calc(100% - 40px);
+
+        a, div, span {
+          display: block !important;
+        }
+        .ellipsis {
+          width: auto !important;
+          text-align: left !important;
+        }
+      }
+    }
+  }
+  .yx-card-body {
+    padding: var(--el-card-padding);
+    background-color: var(--el-fill-color-blank);
+  }
+  @media (max-width: 450px) {
+    &[header-padding] {
+      & > .el-card__header {
+        & > .yx-flex-wrap {
+          padding: 5px 10px;
+        }
+      }
+    }
+    & > .el-card__footer {
+      padding: 5px 10px;
+    }
+    .yx-card-body {
+      padding: 10px;
+    }
+  }
+}
+
+[scrollable-main] {
+  position: relative;
+  &:has(.el-scrollbar__wrap:has(::-webkit-scrollbar-thumb:vertical)):not(:has(.el-scrollbar__wrap:has(:first-child:has(+ *))))::before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 10px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
+    pointer-events: none;
+  }
+  
+  /* 底部阴影 */
+  &:has(.el-scrollbar__wrap:has(::-webkit-scrollbar-thumb:vertical)):not(:has(.el-scrollbar__wrap:has(:last-child:has(+ *))))::after {
+    content: " ";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 10px;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
+    pointer-events: none;
+  }
+}
+
+[loading-rotate] {
+  animation: loading-rotate 2s linear infinite;
+}
+
+@keyframes loading-rotate {
+  to {
+    transform:rotate(360deg)
+  }
+}
+
+.isHideTable {
+  opacity: 0 !important;
+  z-index: -99 !important;
+  width: 0px !important;
+  height: 0px !important;
+  overflow: hidden !important;
+}
+
+.xs-hidden-opacity-only {
+  @media (max-width: 768px) {
+    opacity: 0 !important;
+    z-index: -99 !important;
+    width: 0px !important;
+    height: 0px !important;
+    overflow: hidden !important;
+  }
+}
+
+@media (max-width: 450px) {
+  // 该样式临时处理移动端展示结构问题，如果冲突请清理
+  .app-wrapper {
+    .tab-main-container {
+      & > .app-main {
+
+        & > [style*='min-height'] {
+          min-height: calc(100vh - 20px) !important;
+
+          & .app-container {
+            min-height: calc(100vh - 20px) !important;
+
+            & > [style*='padding'] {
+              padding: 0 !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.yx-drawer {
+  .el-drawer {
+      .el-drawer__header {
+          padding: var(--el-drawer-padding-primary);
+          margin: 0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: var(--el-drawer-padding-primary);
+      }
+
+      .el-drawer__body {
+          & > .yx-flex-wrap {
+              height: 100%;
+
+          }
+          & > .el-scrollbar {
+              height: 100%;
+          }
+      }
+  }
+
+  &.yx-scrollbar-body {
+      .el-drawer__body {
+          padding: 0;
+          & > .el-scrollbar {
+              & > .el-scrollbar__wrap {
+                  & > .el-scrollbar__view {
+                      padding: var(--el-drawer-padding-primary);
+                  }
+              }
+          }
+      }
+  }
+}
+
+.el-dialog {
+  @media (max-width: 768px) {
+    &[layout-mobile='bottom'] {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      margin: 0;
+    }
+  }
+}

package/src/styles/index.scss

@@ -19,6 +19,7 @@
 @import "./table.scss";
 @import './theme/tiffany-blue-mobile/index.scss';
 @import './theme/tiffany-blue-mobile/sidebar.scss';
+@import 'element-plus/theme-chalk/display.css';
 
 body {
   overflow: hidden;

package/src/utils/guid.js

@@ -0,0 +1,13 @@
+/**
+ * 获取4位随机数
+ */
+export function getS4(a, b, c, d) {
+  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+}
+
+/**
+ * 生成GuId
+ */
+export function getGuId(data = `{s}{s}-{s}-{s}-{s}-{s}{s}{s}`) {
+  return data.replace(/{(y|m|d|h|i|s|a)+}/g, getS4)
+}

package/src/views/layout/tab-content-index.vue

@@ -69,7 +69,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import 'agilebuilder-ui/src/styles/mixin.scss';
+@import '../../styles/mixin.scss';
 @include clearfix;
 .app-wrapper {
   position: relative;

package/vite.config.js

@@ -2,14 +2,17 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 import { terser } from 'rollup-plugin-terser'
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [
-    vue(),  
+    vue(),
+    vueJsx(),
     terser({
       compress: {
-        drop_console: true,
-        drop_debugger: true
+        drop_console: ['production'].includes(mode),
+        drop_debugger: ['production'].includes(mode),
       },
       output: {
         // 对于console.error，不做任何处理
@@ -26,7 +29,7 @@ export default defineConfig({
     }, //库编译模式配置
     rollupOptions: {
       // 确保外部化处理那些你不想打包进库的依赖
-      external: ["vue"],
+      external: ["vue", "jsx"],
       output: {
         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
         globals: {
@@ -40,11 +43,12 @@ export default defineConfig({
         },
       },
     }, // rollup打包配置
+    sourcemap: mode === 'development'
   },
   // ...其他配置项
   resolve: {
     // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
   }
-});
+}));