@suzhou-lab/page-components 1.0.0

package/filter-form.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="filter-form" ref="filterForm">
+    <el-form :inline="false" label-position="right">
+      <el-row type="flex" :gutter="16">
+        <el-col v-for="(item, idx) in visibleItems" :key="item.prop || idx" :span="item.span || 6"
+          :class="{ 'is-hidden': !getItemVisible(item) }">
+          <el-form-item :label="item.label" :label-width="labelWidth">
+            <el-input v-if="item.type === 'input'" v-model="internalModel[item.prop]"
+              :placeholder="item.placeholder || '请输入'" :clearable="item.clearable !== false"
+              :disabled="item.disabled" />
+
+            <el-select v-else-if="item.type === 'select'" v-model="internalModel[item.prop]"
+              :placeholder="item.placeholder || '请选择'" :clearable="item.clearable !== false"
+              :filterable="item.filterable !== false" :multiple="!!item.multiple" :disabled="item.disabled"
+              @change="handleItemChange(item)">
+              <el-option v-for="opt in resolvedOptions(item)" :key="opt.value" :label="opt.label" :value="opt.value" />
+            </el-select>
+
+            <el-date-picker v-else-if="item.type === 'yearpicker'" v-model="internalModel[item.prop]" type="year"
+              value-format="yyyy" :placeholder="item.placeholder || '选择年度'" :clearable="item.clearable !== false"
+              :disabled="item.disabled" style="width: 100%" @change="handleItemChange(item)" />
+
+            <el-date-picker v-else-if="item.type === 'monthpicker'" v-model="internalModel[item.prop]" type="month"
+              :value-format="item.valueFormat || 'yyyy-MM'" :placeholder="item.placeholder || '选择月份'"
+              :clearable="item.clearable !== false" :disabled="item.disabled" style="width: 100%"
+              @change="handleItemChange(item)" />
+
+            <el-date-picker v-else-if="item.type === 'datepicker'" v-model="internalModel[item.prop]" type="date"
+              :value-format="item.valueFormat || 'yyyy-MM-dd'" :placeholder="item.placeholder || '选择日期'"
+              :clearable="item.clearable !== false" :disabled="item.disabled" style="width: 100%"
+              @change="handleItemChange(item)" />
+
+            <el-date-picker v-else-if="item.type === 'daterange'" v-model="internalModel[item.prop]" type="daterange"
+              :value-format="item.valueFormat || 'yyyy-MM-dd'" range-separator="至" start-placeholder="开始日期"
+              end-placeholder="结束日期" :clearable="item.clearable !== false" :disabled="item.disabled" style="width: 100%"
+              @change="handleItemChange(item)" />
+
+            <el-cascader v-else-if="item.type === 'cascader'" v-model="internalModel[item.prop]"
+              :options="resolvedOptions(item)" :placeholder="item.placeholder || '请选择'"
+              :props="item.cascaderProps || { value: 'value', label: 'label', children: 'children' }"
+              :clearable="item.clearable !== false" :filterable="item.filterable !== false" :disabled="item.disabled"
+              style="width: 100%" @change="handleItemChange(item)" collapse-tags />
+
+            <component v-else-if="item.type === 'custom' && item.component" :is="item.component"
+              v-model="internalModel[item.prop]" v-bind="item.attrs || {}" @change="handleItemChange(item)" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <div class="filter-actions">
+      <div class="filter-actions__collapse" v-if="hasCollapse" @click="toggleCollapse">
+        <span class="">{{ localCollapsed ? '展开内容' : '收起' }}</span>
+        <svg width="14" height="14" viewBox="0 0 48 48" fill="none" class="chevrons-down"
+          :class="localCollapsed ? '' : 'up'">
+          <path d="M9.9 22.456l14.142 14.142 14.142-14.142" stroke="#4E5969" stroke-width="2" />
+          <path d="M9.9 11.142l14.142 14.142 14.142-14.142" stroke="#4E5969" stroke-width="2" />
+        </svg>
+      </div>
+      <el-button type="primary" :loading="loading" icon="el-icon-search" @click="handleQuery">查询</el-button>
+      <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * filter-form 组件
+ * 配置驱动的筛选表单，统一筛选区样式和布局
+ *
+ * 用法:
+ *   <filter-form
+ *     :items="filterItems"
+ *     v-model="filters"
+ *     @search="onSearch"
+ *     @reset="onReset"
+ *   />
+ */
+export default {
+  name: 'FilterForm',
+  model: {
+    prop: 'model',
+    event: 'input'
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+    collapsed: {
+      type: Boolean,
+      default: true
+    },
+    defaultRowCount: {
+      type: Number,
+      default: 1
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    labelWidth: {
+      type: String,
+      default: '112px'
+    }
+  },
+  data() {
+    return {
+      localCollapsed: this.collapsed,
+      internalModel: { ...this.model }
+    }
+  },
+  computed: {
+    colsPerRow() {
+      return 24 / ((this.items[0] && this.items[0].span) || 6)
+    },
+    maxVisible() {
+      return this.defaultRowCount * this.colsPerRow
+    },
+    hasCollapse() {
+      return this.items.length > this.maxVisible
+    },
+    visibleItems() {
+      if (!this.localCollapsed || !this.hasCollapse) return this.items
+      return this.items.slice(0, this.maxVisible)
+    }
+  },
+  watch: {
+    model: {
+      handler(val) {
+        if (val) {
+          this.internalModel = val
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    internalModel: {
+      handler(val) {
+        this.$emit('input', val)
+      },
+      deep: true
+    },
+    collapsed(val) {
+      this.localCollapsed = val
+    }
+  },
+  methods: {
+    getItemVisible(item) {
+      if (typeof item.visible === 'function') {
+        return item.visible(this.internalModel)
+      }
+      return item.visible !== false
+    },
+    resolvedOptions(item) {
+      if (typeof item.options === 'function') {
+        return item.options(this.internalModel)
+      }
+      return item.options || []
+    },
+    handleItemChange(item) {
+      if (typeof item.onChange === 'function') {
+        item.onChange(this.internalModel[item.prop], this.internalModel)
+      }
+    },
+    toggleCollapse() {
+      this.localCollapsed = !this.localCollapsed
+    },
+    handleQuery() {
+      this.$emit('search', { ...this.internalModel })
+    },
+    handleReset() {
+      const resetModel = {}
+      this.items.forEach(item => {
+        if (item.type === 'daterange') {
+          resetModel[item.prop] = null
+        } else if (item.type === 'cascader') {
+          resetModel[item.prop] = []
+        } else {
+          resetModel[item.prop] = ''
+        }
+      })
+      this.internalModel = resetModel
+      this.$emit('reset', { ...this.internalModel })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// 组件自包含，不依赖项目 _var/_theme 变量
+
+.filter-form {
+  position: relative;
+
+  .el-form-item {
+    margin-bottom: 18px;
+
+    &.is-hidden {
+      display: none;
+    }
+  }
+
+  ::v-deep .el-row--flex {
+    flex-wrap: wrap;
+  }
+
+  ::v-deep .el-input,
+  ::v-deep .el-select,
+  ::v-deep .el-cascader,
+  ::v-deep .el-date-editor {
+    width: 100%;
+  }
+
+  ::v-deep .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+    background: #F1F3F7;
+    border-radius: 4px;
+    border: none;
+  }
+
+  ::v-deep .el-select .el-input__inner {
+    background: #F1F3F7;
+  }
+
+  .filter-actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    &__collapse {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      align-self: end;
+      margin: 0 auto;
+      color: #777;
+      font-size: 14px;
+      user-select: none;
+      cursor: pointer;
+
+      &:hover {
+        color: #1F87F0;
+        fill: #1F87F0;
+      }
+    }
+  }
+
+  .chevrons-down {
+    margin-left: 4px;
+    display: inline-block;
+    transition: transform 0.2s;
+
+    &.up {
+      transform: rotate(180deg);
+    }
+  }
+
+  // ========== Cascader 多选 Tag 原生样式还原（被 CDN index.css / common.scss / table.scss 覆盖） ==========
+  // 基于 element-ui@2.15.7 packages/theme-chalk/src/cascader.scss
+  // 覆盖属性不含 background-color、height、border-radius
+
+  ::v-deep .el-cascader__tags {
+    flex-wrap: nowrap;
+
+    .el-tag {
+      &.el-tag--info {
+        background-color: rgba(0, 0, 0, 0.06);
+        color: #909399;
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &:first-child {
+        flex: 0 1 auto;
+      }
+
+      &:nth-child(2) {
+        flex: 0 0 auto;
+      }
+    }
+  }
+
+  // 搜索输入框
+  ::v-deep .el-cascader__search-input {
+    display: none;
+  }
+}
+</style>

package/index.js

@@ -0,0 +1,20 @@
+// 页面布局组件统一导出
+// 在 main.js 中通过 import '@/components/page' 全局注册
+// 组件本体位于 src/shared/components/page/，通过 webpack alias 被各微应用引用
+
+import FilterForm from './filter-form.vue'
+import ListPage from './list-page.vue'
+
+const install = function (Vue) {
+  if (install.installed) return
+  Vue.component('filter-form', FilterForm)
+  Vue.component('list-page', ListPage)
+}
+
+// 确保自动注册（当用 script 标签引入时）
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export { FilterForm, ListPage }
+export default { install }

package/list-page.vue

@@ -0,0 +1,335 @@
+<template>
+  <el-container class="list-page" ref="listPage">
+    <el-aside class="list-page__aside" :width="asideWidth" v-if="$slots.aside">
+      <slot name="aside" />
+    </el-aside>
+    <el-main class="list-page__main">
+      <el-card v-if="hasFilterSlot" class="list-page__filter" shadow="never">
+        <slot name="filter" />
+      </el-card>
+
+      <el-card class="list-page__table-card" shadow="never">
+        <div v-if="hasToolbarSlot" class="list-page__toolbar">
+          <slot name="toolbar" />
+        </div>
+
+        <div class="list-page__table-wrapper" ref="tableWrapper">
+          <slot />
+        </div>
+
+        <div v-if="hasPaginationSlot" class="list-page__pagination">
+          <slot name="pagination" />
+        </div>
+      </el-card>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: 'ListPage',
+  provide() {
+    return {
+      listPage: this
+    }
+  },
+  props: {
+    sidebarWidth: {
+      type: String,
+      default: '240px'
+    },
+    asideWidth: {
+      type: String,
+      default: '240px'
+    }
+  },
+  data() {
+    return {
+      _tableHeight: 300
+    }
+  },
+  computed: {
+    tableHeight() {
+      return this._tableHeight
+    },
+    hasFilterSlot() {
+      return !!this.$slots.filter || !!this.$scopedSlots.filter
+    },
+    hasToolbarSlot() {
+      return !!this.$slots.toolbar || !!this.$scopedSlots.toolbar
+    },
+    hasPaginationSlot() {
+      return !!this.$slots.pagination || !!this.$scopedSlots.pagination
+    }
+  },
+  mounted() {
+    this.calcTableHeight()
+    this.initObserver()
+    window.addEventListener('resize', this.calcTableHeight)
+  },
+  beforeDestroy() {
+    if (this._observer) this._observer.disconnect()
+    window.removeEventListener('resize', this.calcTableHeight)
+  },
+  methods: {
+    initObserver() {
+      const wrapper = this.$refs.tableWrapper
+      if (!wrapper || typeof ResizeObserver === 'undefined') return
+      this._observer = new ResizeObserver(() => this.calcTableHeight())
+      this._observer.observe(wrapper)
+    },
+    calcTableHeight() {
+      this.$nextTick(() => {
+        const wrapper = this.$refs.tableWrapper
+        if (!wrapper) return
+        const wrapperHeight = wrapper.clientHeight
+        if (wrapperHeight > 0) {
+          this._tableHeight = Math.max(100, Math.floor(wrapperHeight))
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// 组件自包含，不依赖项目 _var/_theme 变量
+// 所有可定制属性均通过 CSS 变量暴露，子应用可在父级或 :root 中覆盖
+// 格式：var(--变量名, 默认值)
+
+.list-page {
+  height: 100% !important;
+  overflow: hidden;
+
+  ::v-deep .el-card {
+    border-radius: 6px;
+    border: none;
+  }
+
+  &__aside {
+    display: flex !important;
+    flex-direction: column !important;
+    overflow: hidden;
+    margin-right: var(--list-page-spacing, 16px);
+  }
+
+  &__main {
+    display: flex !important;
+    flex-direction: column !important;
+    padding: 0 !important;
+    overflow: hidden;
+    height: 100% !important;
+  }
+
+  &__filter {
+    flex-shrink: 0;
+    margin-bottom: var(--list-page-spacing, 16px);
+  }
+
+  &__table-card {
+    flex: 1;
+    min-height: 0;
+    display: flex !important;
+    flex-direction: column !important;
+    overflow: hidden;
+
+    ::v-deep .el-card__body {
+      display: flex !important;
+      flex-direction: column !important;
+      min-height: 0;
+      flex: 1;
+      overflow: hidden;
+      padding: 0;
+    }
+
+    ::v-deep .el-table {
+      thead {
+        tr {
+          th {
+            background-color: var(--list-page-thead-bg, #E2EDFF);
+          }
+        }
+      }
+    }
+
+    ::v-deep .el-table__fixed-right,
+    ::v-deep .el-table__fixed {
+      background-color: var(--list-page-gutter-bg, #F1F3F7);
+    }
+  }
+
+  &__toolbar {
+    flex-shrink: 0;
+    padding: var(--list-page-spacing, 16px);
+    display: flex !important;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    min-width: 0;
+
+    ::v-deep .el-table-show {
+      margin-left: 10px;
+    }
+  }
+
+  &__table-wrapper {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    position: relative;
+    padding: 0 var(--list-page-spacing, 16px);
+
+    ::v-deep .el-table {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    ::v-deep .el-table__body-wrapper {
+
+      &::-webkit-scrollbar {
+        width: var(--list-page-scrollbar-width, 8px);
+        height: var(--list-page-scrollbar-height, 8px);
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: var(--list-page-gutter-bg, #F1F3F7);
+        border-radius: 0;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--list-page-scrollbar-thumb-bg, #c0c4cc);
+        border-radius: 4px;
+      }
+    }
+
+    // 表头排序/筛选图标对齐
+    ::v-deep .el-table__cell {
+      .caret-wrapper {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+
+        &:has(+ .el-table__column-filter-trigger) {
+          right: 22px;
+        }
+      }
+
+      .el-table__column-filter-trigger {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+
+        i {
+          transform: scale(var(--list-page-table-filter-icon-scale, 1));
+        }
+      }
+    }
+
+    ::v-deep .el-table__header-wrapper {
+      height: var(--list-page-table-header-wrapper-height, initial);
+    }
+
+    ::v-deep .el-table__header {
+      table-layout: fixed !important;
+
+      th.el-table__cell {
+        .cell {
+          height: var(--list-page-table-header-cell-height, 24px);
+          line-height: var(--list-page-table-header-cell-line-height, 24px);
+        }
+      }
+    }
+
+    ::v-deep .el-table--border {
+      .el-table__header {
+        th.el-table__cell {
+          border-right: var(--list-page-table-header-cell-border-right, 1px solid rgba(0, 0, 0, 0.06));
+
+          // 检测 cell 内是否实际包含排序/筛选图标（不再依赖不准确的 is-leaf 类）
+          .cell:has(.caret-wrapper) {
+            padding-right: calc(var(--list-page-table-header-cell-is-sortable-padding-right, 24px) + 10px);
+          }
+
+          .cell:has(.el-table__column-filter-trigger) {
+            padding-right: calc(var(--list-page-table-header-cell-is-leaf-padding-right, 16px) + 10px);
+          }
+
+          .cell:has(.caret-wrapper):has(.el-table__column-filter-trigger) {
+            padding-right: calc(var(--list-page-table-header-cell-is-leaf-and-filter-padding-right, 12px) + var(--list-page-table-header-cell-is-sortable-padding-right, 24px) + 10px);
+          }
+        }
+      }
+    }
+  }
+
+  &__pagination {
+    flex-shrink: 0;
+    display: flex !important;
+    justify-content: flex-end;
+    padding: var(--list-page-spacing, 16px);
+    margin: 0;
+
+    ::v-deep .el-pagination {
+      margin-top: 0;
+      padding: 0;
+      text-align: end;
+
+      :last-child {
+        margin-right: 0;
+      }
+
+      &.is-background .btn-next,
+      &.is-background .btn-prev,
+      &.is-background .el-pager li {
+        min-width: var(--list-page-pagination-btn-size, 32px);
+        height: var(--list-page-pagination-btn-size, 32px);
+        line-height: var(--list-page-pagination-btn-size, 32px);
+        border-radius: 2px;
+        font-size: var(--list-page-pagination-btn-font-size, 14px);
+        font-weight: 500;
+        color: var(--list-page-pagination-btn-color, #323233);
+      }
+
+      &.is-background .el-pager li:not(.disabled).active {
+        background: var(--list-page-pagination-active-bg, #1F87F0);
+        border-radius: 2px;
+        font-size: var(--list-page-pagination-btn-font-size, 14px);
+        font-weight: 500;
+        color: var(--list-page-pagination-active-color, #FFFFFF);
+      }
+
+      .el-select .el-input .el-input__inner {
+        height: var(--list-page-pagination-btn-size, 32px) !important;
+        font-size: var(--list-page-pagination-btn-font-size, 14px);
+        font-weight: 400;
+        color: var(--list-page-pagination-text-color, #333);
+        background-color: var(--list-page-pagination-input-bg, #F1F3F7);
+      }
+
+      &__editor.el-input .el-input__inner {
+        height: var(--list-page-pagination-btn-size, 32px);
+        background: var(--list-page-pagination-input-bg-editor, #FFFFFF);
+        border-radius: 2px;
+        border: 1px solid var(--list-page-pagination-input-border, #DCDEE0);
+        color: var(--list-page-pagination-text-color, #333);
+        font-size: var(--list-page-pagination-btn-font-size, 14px);
+      }
+
+      &__jump {
+        margin-left: 8px;
+        font-size: var(--list-page-pagination-btn-font-size, 14px);
+        font-weight: 400;
+        color: var(--list-page-pagination-text-color, #333);
+      }
+
+      &__total {
+        font-size: var(--list-page-pagination-btn-font-size, 14px);
+        font-weight: 400;
+        color: var(--list-page-pagination-text-color, #333);
+        margin-right: 4px;
+      }
+    }
+  }
+}
+</style>

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@suzhou-lab/page-components",
+  "version": "1.0.0",
+  "description": "苏州实验室 UMC 微应用统一列表页面组件 — list-page 布局容器 + filter-form 配置驱动筛选表单，附带 AI 改造技能",
+  "main": "index.js",
+  "bin": {
+    "install-skills": "bin/install-skills.js"
+  },
+  "files": [
+    "index.js",
+    "list-page.vue",
+    "filter-form.vue",
+    "bin/",
+    "skills/",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "echo \"暂无测试\" && exit 0"
+  },
+  "keywords": [
+    "vue",
+    "vue2",
+    "element-ui",
+    "list-page",
+    "filter-form",
+    "table",
+    "qiankun",
+    "micro-app",
+    "umc"
+  ],
+  "author": "苏州实验室",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "http://git.inspur.com/sbg/gih/biz-36/suzhou/umc-shared.git"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.0",
+    "element-ui": "^2.15.0"
+  }
+}