chain-saasui 1.0.0

package/README.md

@@ -0,0 +1,6 @@
+
+## 纯粹 ui组件库 基于elementui的二次封装
+```js
+import saasui from 'saasui';
+Vue.use(saasui)
+```

package/babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
+    '@vue/cli-plugin-babel/preset'
+  ],
+  'env': {
+    'development': {
+      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
+      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
+      'plugins': ['dynamic-import-node']
+    }
+  }
+}

package/build/webpack.common.js

@@ -0,0 +1,54 @@
+const path = require("path");
+const { VueLoaderPlugin } = require("vue-loader");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const pkg = require('../package.json');
+const { dependencies = {}, devDependencies = {} } = pkg;
+
+module.exports = {
+    entry: path.resolve(__dirname, "../components/src"),
+    mode: "production",
+    output: {
+        path: path.resolve(__dirname, "../lib"),
+        filename: 'saasui.common.js',
+        chunkFilename: '[id].js',
+        library: 'SAASUI',
+        libraryTarget: 'commonjs2',
+        libraryExport: 'default',
+    },
+    plugins: [
+        new VueLoaderPlugin(),
+        new MiniCssExtractPlugin({
+            filename: 'styles/[name].css',
+            chunkFilename: 'styles/[id].css',
+        }),
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                use: [
+                    {
+                        loader: "vue-loader",
+                    },
+                ],
+            },
+            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] },
+            {
+                test: /\.scss$/,
+                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+            },
+            { test: /\.(jpg|png|gif|bmp|jpeg)$/, loader: 'url-loader' },
+            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }
+        ],
+    },
+    externals: Object.keys({ ...dependencies, ...devDependencies }).reduce((externals, dep) => {
+        externals[dep] = dep; // 将每个依赖排除在打包之外
+        return externals;
+    }, {}),
+    resolve: {
+        extensions: ['.js', '.vue', '.json'], // 添加你项目中用到的扩展名
+        alias: {
+
+        },
+    },
+};

package/build/webpack.components.js

@@ -0,0 +1,69 @@
+const path = require("path");
+const { VueLoaderPlugin } = require("vue-loader");
+const glob = require("glob");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const list = {};
+async function makeList(dirPath, list) {
+    const files = glob.sync(`${dirPath}/**/index.js`);
+    for (let file of files) {
+        const component = file.split(/[/.]/)[2];
+        list[component] = `./${file}`;
+    }
+}
+makeList("components/src", list);
+const NODE_ENV = process.env.NODE_ENV ? process.env.NODE_ENV.trim() : "";
+const isDevelopment = NODE_ENV === 'development'; // trim
+
+module.exports = {
+    entry: list,
+    mode: "production",
+    output: {
+        path: path.resolve(__dirname, "../lib"),
+        filename: '[name].js',
+        chunkFilename: '[id].js',
+        library: 'SAASUI',
+        libraryExport: 'default',
+        libraryTarget: 'umd',
+        umdNamedDefine: true,
+        globalObject: 'typeof self !== \'undefined\' ? self : this'
+    },
+    // output: {
+    //     filename: '[name].js',  // 输出文件名
+    //     chunkFilename: '[id].js',
+    //     path: path.resolve(__dirname, '../lib'),
+    //     libraryTarget: 'commonjs2',  // 使用 CommonJS 格式
+    // },
+    watch: isDevelopment, // 实时打包
+    plugins: [
+        new VueLoaderPlugin(),
+        new MiniCssExtractPlugin({
+            filename: 'styles/[name].css',
+            chunkFilename: 'styles/[id].css',
+        }),
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                use: [
+                    {
+                        loader: "vue-loader",
+                    },
+                ],
+            },
+            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] },
+            {
+                test: /\.scss$/,
+                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+            },
+            { test: /\.(jpg|png|gif|bmp|jpeg)$/, loader: 'url-loader' },
+            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }
+        ],
+    },
+    resolve: {
+        extensions: ['.js', '.vue', '.json'], // 添加你项目中用到的扩展名
+        alias: {
+            vue$: "vue/dist/vue.esm.js", // 使用完整版 Vue
+        },
+    },
+};

package/build/webpack.demo.js

@@ -0,0 +1,40 @@
+'use strict'
+const { log } = require('console')
+const path = require('path')
+
+function resolve(dir) {
+    return path.join(__dirname, dir)
+}
+
+
+// vue.config.js 配置说明
+// 官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
+// 这里只列一部分，具体配置参考文档
+module.exports = {
+    entry: '../src/main.js',
+    // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
+    outputDir: 'dist',
+    // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
+    assetsDir: 'static',
+    // 是否开启eslint保存检测，有效值：ture | false | 'error'
+    lintOnSave: false,
+    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
+    productionSourceMap: false,
+    configureWebpack: {
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, './src'),
+            }
+        },
+    },
+    // rules: [
+    //     {
+    //         test: /\.scss$/,
+    //         use: [
+    //             'style-loader',  // 注入 CSS 到 DOM
+    //             'sass-loader'    // 处理 Sass 文件
+    //         ],
+    //     },
+    // ],
+}
+

package/components/css/card.scss

@@ -0,0 +1,19 @@
+.saas-card {
+    border-radius: 6px;
+    border: 1px solid #dbdee7;
+    margin-bottom: 24px;
+}
+
+.saas-card-header {
+    background: #f7f9fb;
+    border-radius: 6px 6px 0px 0px;
+    border-bottom: 1px solid #dbdee7;
+    font-weight: 500;
+    font-size: 16px;
+    color: #0e1822;
+    padding: 8px 16px;
+}
+
+.saas-card-content {
+    padding: 16px;
+}

package/components/css/common.scss

@@ -0,0 +1,10 @@
+// 公共变量
+$color: red;
+
+$colors: (
+    primary: #1890ff,
+    info: #a1a5b2,
+    success: #2ecc71,
+    danger: #ff3b30,
+    warning: #ff9900,
+);

package/components/css/container.scss

@@ -0,0 +1,14 @@
+// 页面布局
+.saas-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex: 1;
+}
+
+.saas-container-header {
+}
+.saas-container-content {
+    flex: 1;
+    min-height: 300px;
+}

package/components/css/detail.scss

@@ -0,0 +1,87 @@
+.saas-detail {
+    background: #fff;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+.saas-detail-top {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: auto;
+}
+.saas-detail-header {
+    display: flex;
+    position: sticky;
+    padding: 24px 64px;
+    position: sticky;
+    background: #fff;
+    top: 0;
+    z-index: 10;
+}
+.saas-detail-titlebox {
+    // margin: 0 auto;
+}
+.saas-detail-title {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 600;
+    color: #0e1822;
+}
+.saas-detail-sub {
+    margin-top: 8px;
+}
+.saas-title-line {
+    // display: none;
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #1ed080;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+.saas-detail-backbox {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 24px;
+    top: 24px;
+}
+.saas-detail-back {
+    display: flex;
+    align-items: center;
+    border-radius: 50%;
+    border: 1px solid #dbdee7;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    color: #a1a5b2;
+    cursor: pointer;
+
+    &:hover {
+        background: rgb(247, 249, 251);
+    }
+}
+.saas-detail-content {
+    padding: 0px 64px 24px;
+    flex: 1;
+    // overflow-x: auto;
+    // overflow-y: auto;
+}
+.saas-detail-footer {
+    // position: absolute;
+    padding: 16px 24px;
+    background: #fff;
+    text-align: center;
+    box-shadow: 8px 0px 12px 0px rgba(161, 165, 178, 0.1);
+    border-radius: 0px 0px 0px 0px;
+    border-top: 1px solid #dbdee7;
+    z-index: 5;
+}
+
+.saas-steptop-btn {
+    display: flex;
+    align-items: center;
+}

package/components/css/dialog.scss

@@ -0,0 +1,83 @@
+@import './common.scss';
+
+.saas-dialog {
+    .el-dialog {
+        border-radius: 6px;
+    }
+
+    .el-dialog__body {
+        padding: 0;
+    }
+    .btneditclass {
+        color: #2c68f8;
+    }
+    ::v-deep .el-dialog__footer {
+        padding: 12px 24px 20px;
+    }
+
+    .el-dialog__header {
+        border-bottom: 1px solid #dbdee7;
+        padding: 12px 16px;
+    }
+    .el-dialog__footer {
+        padding: 8px 16px;
+        border-top: 1px solid #dbdee7;
+    }
+    .el-dialog__headerbtn {
+        top: 16px;
+    }
+}
+
+.content-no-padding {
+    .saas-dialog-content {
+        padding: 0;
+    }
+}
+
+.saas-dialog-auto {
+    max-height: calc(85vh - 100px);
+    overflow-y: auto;
+}
+.saas-dialog-content {
+    padding: 16px;
+}
+
+.saas-dialog-footer {
+    height: auto;
+    text-align: right;
+}
+
+.saas-drawer {
+    .el-drawer__body {
+        display: flex;
+    }
+    .btneditclass {
+        color: #2c68f8;
+    }
+}
+
+.saas-drawer-content {
+    flex: 1;
+    padding: 24px;
+    overflow-y: auto;
+}
+
+.saas-drawer-footer {
+    height: auto;
+    padding: 16px 24px;
+    border-top: 1px #efefef solid;
+    text-align: right;
+}
+
+.saas-dialog,
+.saas-drawer {
+    .submit-form {
+        .el-form-item__content {
+            line-height: normal;
+        }
+        .el-form-item__label {
+            line-height: normal;
+            font-weight: 500;
+        }
+    }
+}

package/components/css/group.scss

@@ -0,0 +1,82 @@
+.saas-group {
+    display: flex;
+    overflow-x: auto;
+    min-height: 50px;
+    padding-bottom: 4px;
+    div {
+        box-sizing: border-box;
+    }
+
+    &::-webkit-scrollbar {
+        width: 3px;
+        height: 4px;
+        background-color: #fff;
+        cursor: pointer;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: rgba(144, 147, 153, 0.2);
+
+        &:hover {
+            background-color: rgba(144, 147, 153, 0.5);
+        }
+    }
+    /* 修改滚动条滑道的颜色 */
+    &::-webkit-scrollbar-track {
+        background-color: #fff; /* 设置滑道背景颜色 */
+    }
+}
+.saas-sort-group {
+    display: flex;
+    border-radius: 6px 6px 6px 6px;
+    margin-right: 8px;
+    background: #f7f9fb;
+}
+.saas-sort-item {
+    width: 136px;
+    background: #f7f9fb;
+    border: 1px solid #f7f9fb;
+    text-align: center;
+    padding: 8px 4px;
+    position: relative;
+    cursor: pointer;
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .title {
+        font-weight: 600;
+        font-size: 16px;
+        color: #0e1822;
+        line-height: 24px;
+    }
+    .text {
+        font-size: 14px;
+        color: #7b8089;
+        line-height: 22px;
+        max-width: 100%;
+    }
+
+    img {
+        display: none;
+        position: absolute;
+        width: 16px;
+        right: -1px;
+        top: -1px;
+    }
+}
+.saas-sort-item.active {
+    border: 1px solid #28b86a;
+    border-radius: 6px;
+    background: #f4fbf8;
+
+    .title,
+    .text {
+        color: #28b86a;
+    }
+
+    img {
+        display: block;
+    }
+}

package/components/css/index.scss

@@ -0,0 +1,11 @@
+@import './common.scss';
+@import './dialog.scss';
+@import './detail.scss';
+@import './unit.scss';
+@import './card.scss';
+@import './group.scss';
+@import './messagebox.scss';
+@import './pagetable.scss';
+@import './table.scss';
+@import "./tablebuttons.scss";
+@import './container.scss';

package/components/css/messagebox.scss

@@ -0,0 +1,59 @@
+.message-box-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 4999;
+}
+
+.message-box {
+    background: white;
+    padding: 32px 24px 24px;
+    width: 480px;
+    border-radius: 8px;
+}
+
+.message-box__header {
+    font-weight: 600;
+    font-size: 16px;
+    color: #333333;
+    line-height: 24px;
+    margin-bottom: 8px;
+}
+
+.message-box__content {
+    margin-bottom: 24px;
+    color: #5c616a;
+}
+
+.message-box__footer {
+    display: flex;
+    justify-content: flex-end;
+    // gap: 10px;
+}
+
+.message-box__input {
+    width: 100%;
+    padding: 6px;
+}
+
+.message-box_icon {
+    color: #ff9900;
+    display: flex;
+    font-size: 24px;
+}
+
+.message-box_main {
+    display: flex;
+    gap: 8px;
+}
+
+.message-box_right {
+    flex: 1;
+    width: 0;
+}

package/components/css/pagetable.scss

@@ -0,0 +1,89 @@
+.saas-page-table {
+    background: #fff;
+    height: calc(100% - 16px);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 16px;
+    border-radius: 8px;
+    // overflow-y: inherit;
+}
+.saas-page-table-header {
+    // margin-bottom: 16px;
+    flex-shrink: 0;
+}
+
+.saas-page-table-menu {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 600;
+    color: #0e1822;
+    margin-bottom: 16px;
+}
+
+.saas-page-table-menu.hasClose {
+    font-weight: 400;
+}
+.saas-page-table-back_title {
+    margin-right: 16px;
+}
+.saas-page-table-title_line {
+    height: 14px;
+    width: 1px;
+    background: #dbdee7;
+    margin-right: 16px;
+}
+.saas-page-table-sub {
+    margin-top: 8px;
+}
+.saas-page-title-line {
+    // display: none;
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #1ed080;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+.saas-page-table-backbox {
+    display: flex;
+    align-items: center;
+    top: 24px;
+}
+.saas-page-table-back {
+    display: flex;
+    align-items: center;
+    border-radius: 50%;
+    border: 1px solid #dbdee7;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    color: #a1a5b2;
+    cursor: pointer;
+    margin-right: 8px;
+
+    &:hover {
+        background: rgb(247, 249, 251);
+    }
+}
+.saas-page-table-title {
+    flex: 1;
+}
+.saas-page-table-form {
+    // margin-bottom: 16px;
+}
+
+.saas-page-table-content {
+    flex: 1;
+    min-height: 300px;
+}
+.saas-page-table-footer {
+    flex-shrink: 0;
+}
+
+.saas-steptop-btn {
+    display: flex;
+    align-items: center;
+}

package/components/css/tablebuttons.scss

@@ -0,0 +1,15 @@
+.saas-table-buttons {
+    display: flex;
+    gap: 0 8px;
+    flex-wrap: wrap;
+    align-items: center;
+    .el-button + .el-button {
+        margin-left: 0;
+    }
+    .el-button--text:not(.is-disabled) {
+        color: #2c68f8;
+    }
+    .smart-More {
+        font-weight: bolder;
+    }
+}

package/components/css/unit.scss

@@ -0,0 +1,25 @@
+@import './common.scss';
+
+.saas-unit {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+    color: #0e1822;
+    font-size: 14px;
+}
+
+@each $name, $color in $colors {
+    .saas-unit-#{$name} {
+        background-color: $color;
+        width: 8px;
+        height: 8px;
+        border-radius: 2px;
+        box-shadow: 0px 0px 0px 2px rgba($color, 0.2);
+    }
+}
+
+.saas-unit-text {
+    width: 0;
+    flex: 1;
+}