@james-zhang/elpis 1.0.0

package/app/pages/widgets/schema-search-bar/schema-search-bar.vue

@@ -0,0 +1,134 @@
+<template>
+  <el-form
+    v-if="schema?.properties"
+    :inline="true"
+    class="schema-search-bar"
+    :model="searchForm"
+  >
+    <!-- 循环schema生成搜索项 -->
+    <el-form-item
+      v-for="(schemaItem, key) in schema.properties"
+      :key="key"
+      :label="schemaItem.label"
+    >
+      <!-- 根据字段类型渲染不同输入框(展示子组件) -->
+      <component
+        :ref="searchComList"
+        :is="SearchItemConfig[schemaItem.option?.comType]?.component"
+        :schemaKey="key"
+        :schema="schemaItem"
+        @load="handleChildLoader"
+      />
+    </el-form-item>
+
+    <!-- 操作区域 -->
+    <el-form-item>
+      <el-button
+        type="primary"
+        plain
+        class="search-btn"
+        @click="search"
+      >搜索</el-button>
+      <el-button
+        plain
+        class="reset-btn"
+        @click="reset"
+      >重置</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+
+<script setup>
+import {ref,computed,unref} from 'vue' 
+import SearchItemConfig from './search-item-config.js'
+const props=defineProps({
+  /**
+   * schema配置结构如下：
+   * schema:{
+        //板块数据结构
+        type:'object',
+        properties:{
+          key:{
+            ...schema, //标准schema配置
+            type:'', //字段类型 
+            label:'', //字段的中文名
+            //字段在search-bar中的相关配置
+            option:{
+              ...elComponentConfig,//标准el-component-column配置
+              comType:'',// 配置组件类型 input/select...
+              default:'', //默认值
+            }
+          }
+        }
+      },
+   */
+  schema:Object,
+})
+const schema=computed(()=>unref(props.schema))
+
+const emit=defineEmits(['load','search','reset'])
+
+const searchForm=ref({})
+const searchComList=ref([])
+
+
+const getValue=()=>{
+  let dtoObj={}
+  searchComList.value.forEach(component=>{
+    dtoObj={
+      ...dtoObj,
+      ...component?.getValue(),
+    }
+  })
+  return dtoObj
+}
+
+let childComLoadedCount=0
+const handleChildLoader=(child)=>{
+  childComLoadedCount++
+  const schemaValue = unref(schema)
+  const properties = schemaValue?.properties || {}
+  if(childComLoadedCount>=Object.keys(properties).length){
+    emit('load',getValue())
+  }
+}
+
+const search=()=>{
+  emit('search',getValue())
+}
+const reset=()=>{
+  searchComList.value.forEach(component=>{
+    component?.reset()
+  })
+  emit('reset')
+}
+
+defineExpose({
+  getValue,
+  reset,
+})
+</script>
+
+<style lang="less" scoped>
+.schema-search-bar {
+  min-width: 500px;
+
+  .input{
+    width: 100px;
+  }
+  .select{
+    width: 100px;
+  }
+  .dynamic-select{
+    width: 100px;
+  }
+  .search-btn{
+    width: 100px;
+  }
+
+  .reset-btn{
+    width: 100px;
+  }
+}
+</style>

package/app/pages/widgets/schema-search-bar/search-item-config.js

@@ -0,0 +1,27 @@
+import input from './complex-view/input/input.vue'
+import select from './complex-view/select/select.vue'
+import dynamicSelect from './complex-view/dynamic-select/dynamic-select.vue'
+import dateRange from './complex-view/date-range/date-range.vue'
+
+//业务扩展 search-item 配置
+import BusinessSchemaSearchItemConfig from '$businessSchemaSearchItemConfig'
+
+const SearchItemConfig={
+  input:{
+    component:input,
+  },
+  select:{
+    component:select,
+  },
+  dynamicSelect:{
+    component:dynamicSelect,
+  },
+  dateRange:{
+    component:dateRange,
+  }
+}
+
+export default {
+  ...SearchItemConfig,
+  ...BusinessSchemaSearchItemConfig
+}

package/app/pages/widgets/schema-table/schema-table.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="schema-table">
+    <el-table
+      v-if="hasSchemaProperties || tableData.length > 0"
+      v-loading="loading"
+      :data="tableData"
+      class="table"
+    >
+      <!-- 循环schema配置渲染表格列 -->
+      <template v-if="hasSchemaProperties">
+        <el-table-column
+          v-for="(schemaItem, key) in schema.properties"
+          :key="key"
+          :prop="key"
+          :label="schemaItem.label"
+          v-bind="schemaItem.option"
+        ></el-table-column>
+      </template>
+
+      <!-- schema 为空时，根据返回数据自动生成列 -->
+      <template v-else>
+        <el-table-column
+          v-for="key in dataColumnKeys"
+          :key="key"
+          :prop="key"
+          :label="key"
+        ></el-table-column>
+      </template>
+
+      <!-- 操作列：动态渲染按钮 -->
+      <el-table-column
+        v-if="buttons?.length > 0"
+        label="操作"
+        fixed="right"
+        :width="operationWidth"
+      >
+        <template #default="scope">
+          <el-button v-for="item in buttons" link v-bind="item" :key="item.key" @click="operationHandler({btnConfig:item,rowData:scope.row})">
+            <!-- 按钮内容后续绑定item配置、点击事件 -->
+             {{ item.label }}
+          </el-button>
+        </template>
+      </el-table-column>
+
+    </el-table>
+    <el-row justify="end" class="pagination">
+      <el-pagination
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :page-sizes="[10,20,50,100,200]"
+        :total="total"
+        layout="total,sizes, prev, pager, next, jumper"
+        @current-change="onCurrentPageChange"
+        @size-change="onPageSizeChange"
+      />
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref,onMounted,watch,nextTick,computed,unref } from 'vue'
+import $curl from '$elpisCommon/curl.js'
+// 接收父组件传入配置
+const props = defineProps({
+  /**
+   * 表格Schema配置（列、字段、表单渲染规则）
+   * {
+        //板块数据结构
+        type:'',
+        properties:{
+          key:{
+            ...schema, //标准schema配置
+            type:'', //字段类型 
+            label:'', //字段的中文名
+            option:{
+              ...elTableConfig,//标准table配置
+              visible:true, //是否在table中显示
+            }
+          }
+        }
+      }
+   */
+  schema: Object,    // 表格Schema配置（列、字段、表单渲染规则）
+
+  /**
+   * 表格数据源 api
+   */
+  api: String,       // 请求表格数据的接口地址
+
+  /**
+   * api请求参数，请求API时携带
+   */
+  apiParams:Object, // 请求表格数据的接口参数
+
+  /**
+   * buttons操作按钮相关配置，结构如下：
+   * {
+            label:'',//按钮中文名
+            eventKey:'',//按钮点击事件名
+            eventOption:{}, //按钮点击事件参数
+            ...elButtonConfig,//标准按钮配置
+          }
+   */
+  buttons: Array     // 表格顶部操作按钮配置数组
+})
+const schema=computed(()=>unref(props.schema))
+const api=computed(()=>unref(props.api))
+const apiParams=computed(()=>{
+  const val = props.apiParams
+  if (val && typeof val === 'object' && 'value' in val) {
+    return val.value ?? {}
+  }
+  return val ?? {}
+})
+const buttons=computed(()=>unref(props.buttons))
+
+const emit= defineEmits(['operate'])
+
+const operationWidth=computed(()=>{
+  return buttons?.value?.length > 0 ? buttons.value.reduce((pre,cur)=>pre+cur.label.length*18,50)+'px' : '50px'
+})
+
+const hasSchemaProperties=computed(()=>{
+  return schema.value?.properties && Object.keys(schema.value.properties).length>0
+})
+
+const dataColumnKeys=computed(()=>{
+  if(!tableData.value || tableData.value.length===0){
+    return []
+  }
+  return Object.keys(tableData.value[0])
+})
+
+const loading=ref(false)
+const tableData=ref([])
+const currentPage=ref(1)
+const pageSize=ref(10)
+const total=ref(0)
+
+onMounted(()=>{
+  initData()
+})
+watch([schema,api,apiParams],initData,{deep:true})
+
+
+function initData(){
+  currentPage.value=1
+  pageSize.value=50
+  nextTick(async()=>{
+    await loadTableData()
+  })
+}
+
+//节流，避免频繁请求（onMounted/watch）
+let timerId=null
+const loadTableData=async()=>{
+  if(timerId){
+    clearTimeout(timerId)
+  }
+  timerId=setTimeout(async()=>{
+    await fetchTableData()
+    timerId=null //解除引用，释放内存 
+  },100)
+}
+
+//请求table数据
+const fetchTableData=async()=>{
+  if(!api.value){
+    return
+  }
+  showLoading()
+  const res=await $curl({
+    method:'get',
+    url:`${api.value}/list`,
+    query:{ 
+      page:currentPage.value,
+      size:pageSize.value,
+      ...(apiParams.value || {}),
+    }
+  })
+  hideLoading()
+  
+  if(!res || !res.success){
+    tableData.value=[]
+    total.value=0
+    return
+  }
+  
+  // 兼容两种返回结构：数组 或 { list, total }
+  const listData = Array.isArray(res.data) ? res.data : res.data?.list
+  if(!Array.isArray(listData)){
+    tableData.value=[]
+    total.value=0
+    return
+  }
+  tableData.value=buildTableData(listData)
+  total.value=res.data?.total ?? res.metaData?.total ?? 0
+}
+/**
+ * 对后端返回的数据进行渲染前的预处理
+ * @param {object} data 后端返回的原始数据
+ * @returns 处理后的数据
+ */
+
+const buildTableData=(listData)=>{
+  if(!schema.value?.properties){
+    return listData
+  }
+  return listData.map(rowData=>{
+    for(const dKey in rowData){
+      const schemaItem=schema.value.properties[dKey]
+      // 处理toFixed配置
+      if(schemaItem?.option?.toFixed){
+        rowData[dKey]=rowData[dKey].toFixed && rowData[dKey].toFixed(schemaItem.option.toFixed)
+      }
+    }
+    return rowData
+  })
+}
+
+const showLoading=()=>{
+  loading.value=true
+}
+const hideLoading=()=>{
+  loading.value=false
+}
+/**
+ * 操作按钮点击事件处理
+ * @param {object} params 包含按钮配置和行数据的对象参数
+ */
+const operationHandler=({btnConfig,rowData})=>{
+  emit('operate',{btnConfig,rowData})
+}
+/**
+ * 分页当前页改变事件处理
+ * @param {number} val 新的当前页码
+ */
+const onCurrentPageChange=(val)=>{
+  currentPage.value=val
+  loadTableData()
+}
+/**
+ * 分页每页显示改变事件处理
+ * @param {number} val 新的每页显示数量
+ */
+const onPageSizeChange=(val)=>{
+  pageSize.value=val
+  loadTableData()
+}
+
+defineExpose({
+  initData,
+  loadTableData,
+  showLoading,
+  hideLoading,
+})
+
+
+</script>
+
+<style lang="less" scoped>
+.schema-table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  .table {
+    flex: 1; /* 表格自适应占满剩余高度 */
+  }
+
+  .pagination {
+    margin: 10px 0;
+    text-align: right; /* 分页靠右对齐 */
+  }
+}
+</style>

package/app/pages/widgets/sider-container/sider-container.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-container class="sider-container">
+    <!-- 左侧侧边栏插槽 -->
+    <el-aside width="260px" class="aside">
+      <slot name="menu-content" />
+    </el-aside>
+    <!-- 右侧主内容区插槽 -->
+    <el-main class="main">
+      <slot name="main-content" />
+    </el-main>
+  </el-container>
+</template>
+
+<script setup>
+// 纯布局组件，无业务逻辑
+</script>
+
+<style lang="less" scoped>
+.sider-container {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: row;
+
+  .aside {
+    width: 260px;
+    min-width: 260px;
+    flex-shrink: 0;
+    border-right: 1px solid #E8E8E8;
+    overflow: auto;
+  }
+
+  .main {
+    overflow: auto;
+  }
+
+  // 深度修改内部el-menu样式，去掉右侧边框
+  :deep(.el-menu) {
+    border-right: 0;
+  }
+}
+</style>

package/app/public/static/normalize.css

@@ -0,0 +1,239 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */    
+html,body,span,div,p,a,table,tbody,td,h1,h2,h3,img,form,font,strong,b,i,dl,dt,dd,ol,ul,li,dl,dd,dt,iframe,label,blockquote,input,button
+{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+html {
+    font-family: "Open Sans","Helvetica Neue","Microsoft Yahei",sans-serif;/* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+    background-color: transparent;
+    text-decoration: none;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+    border: 0;
+}
+
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+    margin: 1em 40px;
+}
+
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    color: inherit; /* 1 */
+    font: inherit; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+    overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+    line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+td,
+th {
+    padding: 0;
+}