@hbdlzy/ui-core 0.1.6 → 0.1.7

package/src/components/BaseTable/README.md

@@ -199,9 +199,9 @@ const resultAdapter = (result: any) => {
 
 如果接口参数结构更特殊，可以改用 `sortMapper`。
 
-## 表头列搜索
+## 表头列搜索 / 筛选
 
-`BaseTable` 现在支持列头搜索能力，用法和旧 `TableComponent.vue` 里的 `isSearch` 很接近，但配置方式更收敛。
+`BaseTable` 现在支持列头输入搜索、下拉筛选、多选下拉和级联筛选能力，用法和旧 `TableComponent.vue` 里的 `isSearch` 很接近，但配置方式更收敛。
 
 ### 基础写法
 
@@ -217,7 +217,7 @@ const columns = [
 
 开启后，这一列的表头会出现搜索图标，点击后会弹出输入框，并提供“搜索 / 重置”操作。
 
-### 高级写法
+### 输入框高级写法
 
 ```ts
 const columns = [
@@ -235,13 +235,94 @@ const columns = [
 ]
 ```
 
+### 下拉筛选写法
+
+```ts
+const columns = [
+  {
+    label: '状态',
+    prop: 'status',
+    kind: 'tag',
+    options: [
+      { label: '启用', value: 'enabled', tagType: 'success' },
+      { label: '停用', value: 'disabled', tagType: 'info' }
+    ],
+    headerSearch: {
+      type: 'select',
+      placeholder: '请选择状态',
+      width: 220,
+      searchText: '筛选'
+    }
+  }
+]
+```
+
+下拉筛选默认复用当前列的 `options`，也可以在 `headerSearch.options` 中单独传入选项。需要多选时可以配置 `multiple: true`，请求参数会以数组形式传出。
+
+### 多选下拉筛选写法
+
+```ts
+const columns = [
+  {
+    label: '资讯分类',
+    prop: 'categories',
+    kind: 'tag',
+    options: [
+      { label: '市场资讯', value: 'market', tagType: 'primary' },
+      { label: '运行日报', value: 'operation', tagType: 'success' }
+    ],
+    headerSearch: {
+      type: 'select',
+      multiple: true,
+      placeholder: '请选择分类',
+      searchText: '筛选'
+    }
+  }
+]
+```
+
+多选下拉会在面板里保留展开状态，方便连续选择多个选项；点击“筛选”后请求参数形如 `{ categories: ['market', 'operation'] }`。
+
+### 级联下拉筛选写法
+
+```ts
+const columns = [
+  {
+    label: '所在区域',
+    prop: 'regionPath',
+    headerSearch: {
+      type: 'cascader',
+      placeholder: '请选择区域',
+      width: 420,
+      options: [
+        {
+          label: '华北',
+          value: 'north',
+          children: [
+            {
+              label: '北京',
+              value: 'beijing',
+              children: [
+                { label: '朝阳区', value: 'chaoyang' }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+]
+```
+
+级联筛选默认使用 `children` 作为子级字段，可以通过 `optionChildrenKey` 改写；请求参数会以完整路径数组传出，例如 `{ regionPath: ['north', 'beijing', 'chaoyang'] }`。
+
 ### 行为说明
 
 - 远程模式下，列头搜索值会自动合并到 `request(params)` 的参数里
 - 触发搜索或重置时，会自动把页码重置到第一页
 - 如果配置了 `paramKey`，请求参数会优先使用它
 - 如果没有配置 `paramKey`，默认使用当前列的 `prop`
-- 本地数据模式下，列头搜索会对当前 `data` 做简单文本包含过滤
+- 本地数据模式下，输入搜索会对当前 `data` 做简单文本包含过滤，下拉筛选会按选项值精确匹配，级联筛选会按路径前缀匹配
 - 多个开启搜索的列会按“同时满足”处理
 
 示例请求参数：
@@ -250,7 +331,8 @@ const columns = [
 {
   currentPage: 1,
   pageSize: 20,
-  owner: '张三'
+  owner: '张三',
+  status: 'enabled'
 }
 ```
 
@@ -362,6 +444,7 @@ const columns = [
 
 ```ts
 tableRef.value?.setHeaderSearchValue('owner', '张三')
+tableRef.value?.setHeaderSearchValue('status', 'enabled')
 tableRef.value?.resetHeaderSearch()
 ```
 

package/src/components/BaseTable/index.ts

@@ -10,6 +10,11 @@ export type {
   BaseTableColumnKind,
   BaseTableCssValue,
   BaseTableExpose,
+  BaseTableHeaderSearchConfig,
+  BaseTableHeaderSearchPathValue,
+  BaseTableHeaderSearchPrimitiveValue,
+  BaseTableHeaderSearchType,
+  BaseTableHeaderSearchValue,
   BaseTableLoadedPayload,
   BaseTableNormalizedResult,
   BaseTableOption,

package/src/components/SvgIcon/README.md

@@ -0,0 +1,53 @@
+# SvgIcon
+
+`SvgIcon` 用来展示 SVG symbol sprite 或外链 SVG，兼容旧项目里 `<svg-icon icon-class="xxx" class-name="xxx" />` 的写法。
+
+## 解决的问题
+
+- 统一 SVG 图标展示入口
+- 支持 `#icon-xxx` 形式的 symbol 引用
+- 支持 http、data、blob 等外链 SVG 通过 mask 渲染为 `currentColor`
+- 自动去掉 `iconClass` 首尾空格，兼容旧模板里误带空格的图标名
+
+## 基础用法
+
+```vue
+<template>
+  <SvgIcon
+    icon-class="filter"
+    class-name="table-search-icon"
+  />
+</template>
+
+<script setup lang="ts">
+import { SvgIcon } from '@hbdlzy/ui-core'
+</script>
+```
+
+上面的写法会渲染 `<use href="#icon-filter" />`。页面或项目需要自行通过 SVG sprite 注入 `symbol id="icon-filter"`。
+
+## 外链 SVG
+
+```vue
+<template>
+  <SvgIcon
+    :icon-class="externalSvgUrl"
+    class-name="status-icon"
+  />
+</template>
+```
+
+外链模式会使用 CSS mask 渲染，图标颜色继承父级 `color`。
+
+## Props
+
+- `iconClass`: 图标名或外链 SVG 地址，必填
+- `className`: 追加到根节点的类名
+- `prefix`: symbol 前缀，默认 `icon`，最终引用为 `#${prefix}-${iconClass}`
+- `ariaLabel`: 无障碍标签，未传时图标默认 `aria-hidden="true"`
+
+## 推荐约定
+
+- symbol sprite 的 id 统一使用 `icon-xxx`
+- 需要调色时通过父级或 `className` 设置 `color`
+- 业务项目如果已经有 `svg-sprite-loader` 或 Vite SVG sprite 插件，可继续复用原有注入方式

package/src/components/SvgIcon/SvgIcon.types.ts

@@ -0,0 +1,6 @@
+export interface SvgIconProps {
+  iconClass: string
+  className?: string
+  prefix?: string
+  ariaLabel?: string
+}

package/src/components/SvgIcon/SvgIcon.vue

@@ -0,0 +1,68 @@
+<template>
+  <span
+    v-if="isExternal"
+    class="svg-external-icon svg-icon"
+    :class="className"
+    :style="externalIconStyle"
+    :aria-hidden="ariaHidden"
+    :aria-label="ariaLabel"
+    role="img"
+  />
+  <svg
+    v-else
+    class="svg-icon"
+    :class="className"
+    :aria-hidden="ariaHidden"
+    :aria-label="ariaLabel"
+    role="img"
+  >
+    <use
+      :href="iconName"
+      :xlink:href="iconName"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { SvgIconProps } from './SvgIcon.types'
+
+defineOptions({
+  name: 'SvgIcon'
+})
+
+const props = withDefaults(defineProps<SvgIconProps>(), {
+  className: '',
+  prefix: 'icon',
+  ariaLabel: ''
+})
+
+const normalizedIconClass = computed(() => props.iconClass.trim())
+const normalizedPrefix = computed(() => props.prefix.trim() || 'icon')
+const isExternal = computed(() => /^(https?:|mailto:|tel:|data:|blob:)/.test(normalizedIconClass.value))
+const iconName = computed(() => `#${normalizedPrefix.value}-${normalizedIconClass.value}`)
+const ariaHidden = computed(() => props.ariaLabel ? undefined : 'true')
+
+const externalIconStyle = computed<CSSProperties>(() => ({
+  mask: `url(${normalizedIconClass.value}) no-repeat 50% 50%`,
+  WebkitMask: `url(${normalizedIconClass.value}) no-repeat 50% 50%`
+}))
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  display: inline-block;
+  background-color: currentColor;
+  mask-size: cover !important;
+  -webkit-mask-size: cover !important;
+}
+</style>

package/src/components/SvgIcon/index.ts

@@ -0,0 +1,5 @@
+import SvgIcon from './SvgIcon.vue'
+
+export default SvgIcon
+
+export type { SvgIconProps } from './SvgIcon.types'

package/src/index.ts

@@ -19,6 +19,8 @@ export { default as BaseEChart } from './components/BaseEChart'
 export * from './components/BaseEChart'
 export { default as BaseExportButton } from './components/BaseExportButton'
 export * from './components/BaseExportButton'
+export { default as SvgIcon } from './components/SvgIcon'
+export * from './components/SvgIcon'
 export { default as OutlinedInput } from './components/OutlinedInput'
 export * from './components/OutlinedInput'
 export { default as OutlinedSelect } from './components/OutlinedSelect'