@minilo/ui 0.0.1

package/minilo/theme-chalk/src/mixins/mixin.scss

@@ -0,0 +1,273 @@
+@use '../default/variable.scss' as *;
+
+@mixin bem($block) {
+  $block-selector: '.#{$library-prefix}#{$block}';
+
+  #{$block-selector} {
+    @content;
+  }
+}
+
+@mixin flex(
+  $display: flex,
+  // 显示类型：flex 或 inline-flex
+  $justify: flex-start,
+  // 主轴对齐：flex-start | center | flex-end | space-between | space-around | space-evenly
+  $align-items: stretch,
+  // 交叉轴对齐：stretch | flex-start | center | flex-end | baseline
+  $direction: row,
+  // 主轴方向：row | column | row-reverse | column-reverse
+  $wrap: nowrap,
+  // 换行方式：nowrap | wrap | wrap-reverse
+  $align-content: stretch,
+  // 多行对齐：stretch | flex-start | center | flex-end | space-between | space-around
+  $gap: 0 // 项目间距
+) {
+  display: $display;
+  justify-content: $justify;
+  align-items: $align-items;
+  flex-direction: $direction;
+  flex-wrap: $wrap;
+  align-content: $align-content;
+  gap: $gap;
+}
+
+// 水平方向：左对齐 + 顶部对齐
+@mixin flex-start-start($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 水平方向：左对齐 + 垂直居中
+@mixin flex-start-center($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 水平方向：左对齐 + 底部对齐
+@mixin flex-start-end($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-end;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 水平方向：居中对齐 + 顶部对齐
+@mixin flex-center-start($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 水平方向：居中对齐 + 垂直居中（最常用）
+@mixin flex-center-center($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 水平方向：居中对齐 + 底部对齐
+@mixin flex-center-end($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 水平方向：右对齐 + 顶部对齐
+@mixin flex-end-start($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-start;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 水平方向：右对齐 + 垂直居中
+@mixin flex-end-center($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 水平方向：右对齐 + 底部对齐
+@mixin flex-end-end($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-end;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 水平方向：两端对齐 + 顶部对齐
+@mixin flex-between-start($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 水平方向：两端对齐 + 垂直居中（常用于导航栏）
+@mixin flex-between-center($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 水平方向：两端对齐 + 底部对齐
+@mixin flex-between-end($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 垂直方向：顶部对齐 + 左对齐
+@mixin flex-col-start-start($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 垂直方向：顶部对齐 + 水平居中
+@mixin flex-col-start-center($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 垂直方向：顶部对齐 + 右对齐
+@mixin flex-col-start-end($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-end;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 垂直方向：垂直居中 + 左对齐
+@mixin flex-col-center-start($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 垂直方向：垂直居中 + 水平居中（常用于模态框）
+@mixin flex-col-center-center($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 垂直方向：垂直居中 + 右对齐
+@mixin flex-col-center-end($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 垂直方向：底部对齐 + 左对齐
+@mixin flex-col-end-start($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 垂直方向：底部对齐 + 水平居中
+@mixin flex-col-end-center($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 垂直方向：底部对齐 + 右对齐
+@mixin flex-col-end-end($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 垂直方向：均匀分布 + 左对齐
+@mixin flex-col-between-start($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 垂直方向：均匀分布 + 水平居中（常用于卡片）
+@mixin flex-col-between-center($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// 垂直方向：均匀分布 + 右对齐
+@mixin flex-col-between-end($wrap: nowrap, $gap: 0) {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-wrap: $wrap;
+  gap: $gap;
+}

package/minilo/theme-chalk/src/number-range-input.scss

@@ -0,0 +1,9 @@
+@use './mixins/mixin.scss' as *;
+
+@include bem('number-range-input') {
+  @include flex-start-center($gap: 8px);
+
+  &__separator {
+    color: #666;
+  }
+}

package/minilo/theme-chalk/src/search-table.scss

@@ -0,0 +1,47 @@
+@use './mixins/mixin.scss' as *;
+@use './search.scss' as *;
+
+@include bem('search-table') {
+  height: 100%;
+  @include flex-col-start-start;
+  :deep(.el-table) {
+    border-radius: 8px 8px 0 0;
+    th {
+      background-color: #f3f3f3;
+    }
+  }
+  &__content {
+    width: 100%;
+    margin-top: 10px;
+    flex: 1;
+  }
+  &__pagination {
+    width: 100%;
+    @include flex-end-center;
+    .el-pagination {
+      @include flex-end-center;
+    }
+  }
+}
+// .search-table {
+//   height: 100%;
+//   @include flex-col-start-start;
+//   :deep(.el-table) {
+//     border-radius: 8px 8px 0 0;
+//     th {
+//       background-color: #f3f3f3;
+//     }
+//   }
+//   &__content {
+//     width: 100%;
+//     margin-top: 10px;
+//     flex: 1;
+//   }
+//   &__pagination {
+//     width: 100%;
+//     @include flex-end-center;
+//     .el-pagination {
+//       @include flex-end-center;
+//     }
+//   }
+// }

package/minilo/theme-chalk/src/search.scss

@@ -0,0 +1,20 @@
+@use './mixins/mixin.scss' as *;
+
+@include bem('search') {
+  width: 100%;
+  &__content {
+    @include flex-between-start;
+    .el-form-item {
+      margin-bottom: 6px;
+    }
+    &__left {
+      flex: 1;
+    }
+    &__right {
+      margin-left: 12px;
+    }
+  }
+  &__collapse {
+    margin-bottom: 10px;
+  }
+}

package/minilo/theme-chalk/src/virtual-list.scss

@@ -0,0 +1,49 @@
+@use './mixins/mixin.scss' as *;
+@use './default/variable.scss' as *;
+
+@include bem('virtual-list') {
+  &__container {
+    position: relative;
+    overflow: auto;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    .loading-spinner {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+      border: 2px solid #e4e7ed;
+      border-top-color: #409eff;
+      border-radius: 50%;
+      animation: spin 0.6s linear infinite;
+    }
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+  &__loading-tip,
+  &__finished-tip {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    color: #909399;
+    font-size: 14px;
+    background-color: #fff;
+  }
+  &__phantom {
+    position: relative;
+    width: 100%;
+  }
+  &__content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  &__item {
+    box-sizing: border-box;
+  }
+}

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@minilo/ui",
+  "version": "0.0.1",
+  "type": "module",
+  "imports": {
+    "#/*": "./src/*"
+  },
+  "files": [
+    "minilo/",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./minilo/es/index.d.ts",
+      "import": "./minilo/dist/index.full.min.mjs",
+      "require": "./minilo/dist/index.full.min.mjs"
+    },
+    "./resolver": {
+      "types": "./minilo/es/resolver/index.d.ts",
+      "import": "./minilo/es/resolver/index.mjs",
+      "require": "./minilo/es/resolver/index.js"
+    },
+    "./es/*": {
+      "types": "./minilo/es/index.d.ts",
+      "import": "./minilo/es/components/*/index.mjs"
+    },
+    "./styles": {
+      "import": "./minilo/dist/index.css",
+      "default": "./minilo/dist/index.css"
+    },
+    "./theme-chalk/*": {
+      "import": "./minilo/theme-chalk/*.css",
+      "default": "./minilo/theme-chalk/*.css"
+    },
+    "./components/*": {
+      "import": "./minilo/es/components/*",
+      "default": "./minilo/es/components/*"
+    }
+  },
+  "sideEffects": [
+    "build/*",
+    "build/**/*.css",
+    "build/**/*.scss",
+    "@minilo/utils/**/*.ts"
+  ],
+  "dependencies": {
+    "@iconify/vue": "5.0.0",
+    "element-plus": "2.10.4",
+    "vue": "^3.5.22"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@types/fs-extra": "^11.0.4",
+    "@types/gulp": "^4.0.18",
+    "@types/gulp-rename": "^2.0.7",
+    "@types/gulp-sass": "^6.0.0",
+    "@types/node": "^24.6.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue-jsx": "5.1.1",
+    "@vue/tsconfig": "^0.8.1",
+    "axios-mock-adapter": "^1.22.0",
+    "chalk": "^5.6.2",
+    "child_process": "^1.0.2",
+    "consola": "^3.4.2",
+    "cssnano": "^7.1.2",
+    "echarts": "^6.0.0",
+    "esbuild": "^0.25.12",
+    "fs-extra": "^11.3.2",
+    "gulp": "^5.0.1",
+    "gulp-autoprefixer": "^10.0.0",
+    "gulp-rename": "^2.1.0",
+    "gulp-sass": "^6.0.1",
+    "postcss": "^8.5.6",
+    "rollup": "^4.52.5",
+    "rollup-plugin-esbuild": "^6.2.1",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "sass": "1.89.2",
+    "sucrase": "^3.35.0",
+    "ts-node": "^10.9.2",
+    "tsx": "4.19.3",
+    "typescript": "~5.9.3",
+    "unplugin-auto-import": "0.17.8",
+    "unplugin-vue-components": "0.26.0",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitepress": "2.0.0-alpha.12",
+    "vue-tsc": "^3.1.0",
+    "@minilo/utils": "^0.0.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.17"
+  },
+  "scripts": {
+    "dev": "vite",
+    "tasks": "gulp -f build-script/gulpfile.ts --tasks",
+    "test": "gulp --require ./node_modules/tsx/dist/loader.cjs -f ./gulpfile.ts",
+    "build": "gulp --require ./node_modules/tsx/dist/loader.cjs -f ./build-script/gulpfile.ts",
+    "gulp": "npx ts-node --require ts-node/register node_modules/gulp/bin/gulp.js -f build-script/gulpfile.ts",
+    "build:old": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "clean": "rimraf minilo",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  }
+}