vue-super-crud 1.7.1

package/styles/tabs.scss

@@ -0,0 +1,139 @@
+.sc-tabs {
+  // 旋转动画
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  // 刷新图标旋转
+  .rotating {
+    animation: rotate 0.45s linear infinite;
+  }
+
+  // tabs内容区域基础样式
+  .sc-tabs__content {
+    position: relative;
+    min-height: 100px;
+    transition: height 0.3s ease-in-out; // 保留过渡动画
+    height: auto; // 默认自适应高度
+  }
+
+  // 标签页面板
+  .tab-pane {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 20px;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+    will-change: transform, opacity;
+
+    &.is-active {
+      position: relative; // 激活状态下改为相对定位，使父容器可以正确计算高度
+    }
+  }
+
+  // 动画相关样式
+  .fade-transform-enter-active,
+  .fade-transform-leave-active {
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  .fade-transform-enter {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  .fade-transform-leave-to {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+
+  // tabs导航栏底部线条
+  .el-tabs__nav-wrap::after {
+    height: 1px;
+    background-color: var(--border-color-lighter);
+  }
+
+  // 自定义滚动条样式
+  .el-tabs__content {
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--border-color-light);
+      border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--background-color-light);
+      border-radius: 3px;
+    }
+  }
+}
+
+// 带边框的tabs样式
+.sc-tabs__border {
+  // 移除头部边距
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+
+  // 移除卡片式tabs的底部边框
+  .el-tabs--card > .el-tabs__header {
+    border-bottom: none;
+  }
+
+  // 内容区域样式
+  .sc-tabs__content {
+    position: relative;
+    overflow: visible;
+    border: 1px solid var(--border-color-lighter);
+    border-radius: 0 4px 4px 4px;
+    background-color: var(--color-white);
+    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+    // 刷新状态移除边框
+    &.sc-tabs__is-refresh {
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  // 选项卡样式优化
+  .el-tabs__item {
+    height: 40px;
+    line-height: 40px;
+    color: var(--color-text-regular);
+
+    &.is-active {
+      font-weight: 500;
+      color: var(--color-primary);
+    }
+
+    // 刷新图标
+    .el-icon-refresh {
+      margin-left: 5px;
+      font-size: 14px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      transition: color 0.3s;
+
+      &:hover {
+        color: var(--color-primary);
+      }
+    }
+  }
+}

package/styles/verifyInput.scss

@@ -0,0 +1,56 @@
+.sc-verify-input {
+  input {
+    caret-color: transparent;
+    border-radius: 2px;
+    border: 1px solid #eee;
+    text-align: center;
+    transition: border-color 0.3s ease;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input:valid {
+    border-color: #dcdfe6;
+  }
+  input:focus-visible {
+    outline: none;
+    border-color: var(--color-primary);
+  }
+}
+
+.sc-verify-input--mini {
+  input {
+    height: 28px;
+    width: 22px;
+    font-size: 12px;
+    margin: 6px;
+  }
+}
+.sc-verify-input--small {
+  input {
+    height: 32px;
+    width: 24px;
+    font-size: 13px;
+    margin: 8px;
+  }
+}
+.sc-verify-input--medium {
+  input {
+    height: 36px;
+    width: 28px;
+    font-size: 14px;
+    margin: 10px;
+  }
+}
+.sc-verify-input--default {
+  input {
+    height: 40px;
+    width: 32px;
+    font-size: 15px;
+    margin: 11px;
+  }
+}

package/vue-jsx-sync.js

@@ -0,0 +1,90 @@
+let syncRe = /(.*)\_sync/;
+const camelizeRE = /-(\w)/g;
+const camelize = (str) => {
+  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ""));
+};
+
+var genListener = function genListener(t, event, body) {
+  return t.objectProperty(
+    t.stringLiteral("update:" + event),
+    t.arrowFunctionExpression([t.identifier("$$val")], t.blockStatement(body))
+  );
+};
+
+var genAssignmentCode = function genAssignmentCode(t, model) {
+  return t.expressionStatement(
+    t.assignmentExpression("=", model, t.identifier("$$val"))
+  );
+};
+
+module.exports = function (babel) {
+  const t = babel.types;
+
+  return {
+    inherits: require("babel-plugin-syntax-jsx"),
+    visitor: {
+      JSXOpeningElement: function (path) {
+        let attrsObject, onObject;
+
+        path.get("attributes").forEach(function (attr) {
+          let matched = attr.node.name.name.match(syncRe);
+          if (matched) {
+            let prop = matched[1];
+            attr.node.name.name = prop;
+
+            let model;
+
+            attr.traverse({
+              JSXExpressionContainer: function (path) {
+                model = path.node.expression;
+              },
+            });
+
+            if (!t.isMemberExpression(model)) {
+              console.error(
+                "You should use MemberExpression with sync modifier, prop [" +
+                  prop +
+                  "] on node [" +
+                  path.node.name.name +
+                  "]"
+              );
+              return;
+            }
+
+            // Create attrs object if not already present
+            if (!attrsObject) {
+              attrsObject = t.jSXAttribute(
+                t.jSXIdentifier("attrs"),
+                t.jSXExpressionContainer(t.objectExpression([]))
+              );
+              path.pushContainer("attributes", attrsObject);
+            }
+
+            // Create on object if not already present
+            if (!onObject) {
+              onObject = t.jSXAttribute(
+                t.jSXIdentifier("on"),
+                t.jSXExpressionContainer(t.objectExpression([]))
+              );
+              path.pushContainer("attributes", onObject);
+            }
+
+            // Add the model to the attrs object
+            attrsObject.value.expression.properties.push(
+              t.objectProperty(t.stringLiteral(prop), model)
+            );
+
+            // Generate the listener for the on object
+            let listener = genListener(t, camelize(prop), [
+              genAssignmentCode(t, model),
+            ]);
+            onObject.value.expression.properties.push(listener);
+
+            // Remove the original sync attribute
+            attr.remove();
+          }
+        });
+      },
+    },
+  };
+};

package/vue.config.js

@@ -0,0 +1,54 @@
+const path = require("path");
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
+const alias = require("./build/alias");
+module.exports = {
+  // transpileDependencies: ['element-ui'], // 解决IE浏览器本地启动白屏现象
+  // outputDir: process.env.outputDir || 'dist', // 输出文件名称
+  // publicPath: './', // 部署应用包时的基本 URL
+  productionSourceMap: true, // 解决vue项目打包后浏览器F12查看到项目源代码false不能看到
+  // productionSourceMap: true, // 测试调试打断点
+  lintOnSave: false, // 去掉eslint校验
+
+  devServer: {
+    port: 1234, // 设置端口号
+    // open: true, // 启动项目自动打开浏览器
+    proxy: {
+      // 解决跨域问题
+      "/api": {
+        target: "http://192.168.4.225:8080 ", // 本地json数据
+        changeOrigin: true,
+        ws: false,
+        pathRewrite: {
+          "^/api": "", // 本地
+        },
+      },
+    },
+  },
+  // 修改 src 目录 为 examples 目录
+  pages: {
+    index: {
+      entry: "examples/main.js",
+      template: "examples/index.html",
+      filename: "index.html",
+    },
+  },
+  // output: {
+  //   filename: 'index.js',
+  //   path: path.resolve(__dirname, './lib'),
+  //   library: '@wocwin/t-ui', // 指定类库名,主要用于直接引用的方式
+  //   libraryTarget: 'umd' // 定义打包方式Universal Module Definition,同时支持在CommonJS、AMD和全局变量使用
+  // },
+  // 强制内联CSS
+  css: {
+    extract: false,
+  },
+  configureWebpack: (config) => {
+    config.devtool = "source-map";
+    config.resolve.alias = {
+      ...alias,
+      "#": resolve("examples"),
+    };
+  },
+};