vft 0.0.1

package/src/web/descriptions/descriptions-row.vue

@@ -0,0 +1,49 @@
+<template>
+  <template v-if="descriptions.direction === 'vertical'">
+    <tr>
+      <template v-for="(cell, index) in row" :key="`tr1-${index}`">
+        <descriptions-cell :cell="cell" tag="th" type="label" />
+      </template>
+    </tr>
+    <tr>
+      <template v-for="(cell, index) in row" :key="`tr2-${index}`">
+        <descriptions-cell :cell="cell" tag="td" type="content" />
+      </template>
+    </tr>
+  </template>
+  <tr v-else>
+    <template v-for="(cell, index) in row" :key="`tr3-${index}`">
+      <template v-if="descriptions.border">
+        <descriptions-cell :cell="cell" tag="td" type="label" />
+        <descriptions-cell :cell="cell" tag="td" type="content" />
+      </template>
+      <descriptions-cell v-else :cell="cell" tag="td" type="both" />
+    </template>
+  </tr>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue';
+import { useNamespace } from '../../use';
+
+import DescriptionsCell from './descriptions-cell';
+import { descriptionsKey } from './token';
+
+import type { IDescriptionsInject } from './descriptions.type';
+
+interface Props {
+	row?: Array<any>
+}
+
+const {
+	row = []
+} = defineProps<Props>();
+
+const ns = /* hoist-static*/ useNamespace('descriptions-row');
+
+defineOptions({
+	name: ns.b()
+});
+
+const descriptions = inject(descriptionsKey, {} as IDescriptionsInject);
+</script>

package/src/web/descriptions/descriptions.scss

@@ -0,0 +1,153 @@
+$descriptions-header-margin-bottom: () !default;
+$descriptions-header-margin-bottom: map-merge(
+  (
+    'large': 20px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $descriptions-header-margin-bottom
+);
+
+$descriptions-title-font-size: () !default;
+$descriptions-title-font-size: map-merge(
+  (
+    'large': 16px,
+    'default': 16px,
+    'small': 14px,
+  ),
+  $descriptions-title-font-size
+);
+
+$descriptions-cell-padding-bottom: () !default;
+$descriptions-cell-padding-bottom: map-merge(
+  (
+    'large': 16px,
+    'default': 12px,
+    'small': 8px,
+  ),
+  $descriptions-cell-padding-bottom
+);
+
+$descriptions-bordered-cell-padding: () !default;
+$descriptions-bordered-cell-padding: map-merge(
+  (
+    'large': 12px 15px,
+    'default': 8px 11px,
+    'small': 4px 7px,
+  ),
+  $descriptions-bordered-cell-padding
+);
+
+$descriptions-cell-font-size: () !default;
+$descriptions-cell-font-size: map-merge(
+  (
+    'large': 14px,
+    'default': 14px,
+    'small': 12px,
+  ),
+  $descriptions-cell-font-size
+);
+
+@include b(descriptions) {
+  @include set-component-css-var('descriptions', $descriptions);
+
+  box-sizing: border-box;
+  font-size: getCssVar('font-size', 'base');
+  color: getCssVar('text-color', 'primary');
+
+  @include e(header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: map-get($descriptions-header-margin-bottom, 'default');
+
+    @include e(title) {
+      color: getCssVar('text-color', 'primary');
+      font-size: map-get($descriptions-title-font-size, 'default');
+      font-weight: bold;
+    }
+  }
+
+
+
+  @include e(body) {
+    background-color: getCssVar('fill-color', 'blank');
+
+    .#{$namespace}-descriptions__table {
+      width: 100%;
+      border: 1px solid rgb(241, 246, 254);
+      border-radius: 4px;
+      table-layout: fixed;
+      overflow-wrap: break-word;
+      word-break: break-all;
+      border-collapse: collapse;
+
+      .#{$namespace}-descriptions__cell {
+        box-sizing: border-box;
+        text-align: left;
+        font-weight: normal;
+        line-height: 23px;
+        font-size: map-get($descriptions-cell-font-size, 'default');
+
+        @include when(left) {
+          text-align: left;
+        }
+
+        @include when(center) {
+          text-align: center;
+        }
+
+        @include when(right) {
+          text-align: right;
+        }
+      }
+
+      &.is-bordered {
+        .#{$namespace}-descriptions__cell {
+          border: getCssVar('descriptions-table-border');
+          padding: map-get($descriptions-bordered-cell-padding, 'default');
+        }
+      }
+
+      &:not(.is-bordered) {
+        .#{$namespace}-descriptions__cell {
+          padding-bottom: map-get($descriptions-cell-padding-bottom, 'default');
+        }
+      }
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      font-size: map-get($input-font-size, $size);
+
+      @include e(header) {
+        margin-bottom: map-get($descriptions-header-margin-bottom, $size);
+
+        @include e(title) {
+          font-size: map-get($descriptions-title-font-size, $size);
+        }
+      }
+
+      @include e(body) {
+        .#{$namespace}-descriptions__table {
+          .#{$namespace}-descriptions__cell {
+            font-size: map-get($descriptions-cell-font-size, $size);
+          }
+
+          &.is-bordered {
+            .#{$namespace}-descriptions__cell {
+              padding: map-get($descriptions-bordered-cell-padding, $size);
+            }
+          }
+
+          &:not(.is-bordered) {
+            .#{$namespace}-descriptions__cell {
+              padding-bottom: map-get($descriptions-cell-padding-bottom, $size);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/web/descriptions/descriptions.type.ts

@@ -0,0 +1,19 @@
+export interface IDescriptionsInject {
+  border: boolean;
+  column: number;
+  direction: 'horizontal' | 'vertical';
+  size: '' | 'default' | 'small' | 'large';
+  title: string;
+  extra: string;
+}
+
+export interface IDescriptionsItemInject {
+  label: string;
+  span: number;
+  width: string | number;
+  minWidth: string | number;
+  align: string;
+  labelAlign: string;
+  className: string;
+  labelClassName: string;
+}

package/src/web/descriptions/index.ts

@@ -0,0 +1,4 @@
+import DescriptionsItem from './description-item.vue';
+import Descriptions from './description.vue';
+
+export { DescriptionsItem, Descriptions };

package/src/web/descriptions/token.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue';
+import type { IDescriptionsInject } from './descriptions.type';
+
+export const descriptionsKey = 'vriDescriptions' as any as InjectionKey<IDescriptionsInject>;

package/src/web/divider/index.scss

@@ -0,0 +1,53 @@
+$name: divider;
+
+@include set-root-css-vars($name, $divider);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  position: relative;
+
+  @include m(horizontal) {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: getCompCssVar('margin-y') 0;
+    border-top: 1px getCompCssVar('border-color') getCompCssVar('border-style');
+  }
+
+  @include m(vertical) {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    margin: 0 getCompCssVar('margin-x');
+    vertical-align: middle;
+    position: relative;
+    border-left: 1px getCompCssVar('border-color') getCompCssVar('border-style');
+  }
+
+  @include e(text) {
+    position: absolute;
+    background-color: getCssVar('bg-color');
+    padding: 0 20px;
+    font-weight: 500;
+    color: getCssVar('text-color', 'primary');
+    font-size: 14px;
+
+    @include when(left) {
+      left: 20px;
+      transform: translateY(-50%);
+    }
+
+    @include when(center) {
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    @include when(right) {
+      right: 20px;
+      transform: translateY(-50%);
+    }
+  }
+}

package/src/web/divider/index.ts

@@ -0,0 +1,5 @@
+import Divider from './index.vue';
+
+export * from './types';
+
+export { Divider };

package/src/web/divider/index.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useNamespace } from '../../use';
+import type { CSSProperties } from 'vue';
+import type { BorderColor, BorderStyle } from './types';
+
+interface DividerProps {
+  direction?: 'horizontal' | 'vertical'
+  contentPosition?: 'left' | 'center' | 'right',
+  borderStyle?: BorderStyle,
+  borderColor?: BorderColor,
+  marginY?: string,
+  marginX?: string,
+}
+
+const {
+  direction = 'horizontal',
+  contentPosition = 'center',
+  borderStyle = 'solid',
+  borderColor,
+  marginY,
+  marginX
+} = defineProps<DividerProps>();
+
+const ns = /* hoist-static*/ useNamespace('divider');
+
+defineOptions({
+  name: ns.b()
+});
+
+const dividerStyle = computed(() => {
+  return {
+    ...ns.cssVarBlock({
+      'border-style': borderStyle,
+      'border-color': borderColor,
+      'margin-y': marginY,
+      'margin-x': marginX
+    })
+  } as CSSProperties;
+});
+</script>
+
+<template>
+  <div
+    :class="[ns.b(), ns.m(direction)]"
+    :style="dividerStyle"
+    role="separator"
+  >
+    <div
+      v-if="$slots.default && direction !== 'vertical'"
+      :class="[ns.e('text'), ns.is(contentPosition)]"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "./index.scss";
+</style>

package/src/web/divider/types.ts

@@ -0,0 +1,2 @@
+export type BorderStyle = CSSStyleDeclaration['borderStyle']
+export type BorderColor = CSSStyleDeclaration['borderColor']

package/src/web/empty/constants.ts

@@ -0,0 +1,12 @@
+export enum Empty {
+  /** 暂无收藏记录 */
+  NO_COLLECT = 'no-collect.png',
+  /** 整个页面数据 */
+  NO_PAGE_DATA = 'no-page-data.png',
+  /** 暂无数据 */
+  NO_DATA = 'no-data.png',
+  /** 此筛选条件下无结果 */
+  NO_FILTER = 'no-filter.png',
+  /** 没有搜索结果 */
+  NO_SEARCH = 'no-search.png'
+}

package/src/web/empty/index.scss

@@ -0,0 +1,57 @@
+$name: empty;
+$empty: () !default;
+$empty: map-merge((
+  'img-size': '160px',
+  'img-size-small': '80px',
+  'img-size-large': '240px',
+  'text-color': white,
+  'desc-top': '10px',
+  'desc-color': getCssVar('text-placeholder-color'),
+  'desc-size': 14px,
+), $empty);
+
+@include set-root-css-vars($name, $empty);
+
+@function getCompCssVar($args...) {
+  @return getCssVar($name, $args...);
+}
+
+@include b($name) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 10px 0;
+
+  @include e(image) {
+    width: getCompCssVar('img-size');
+    height: getCompCssVar('img-size');
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      @include e(image) {
+
+        width: getCompCssVar('img-size', $size);
+        height: getCompCssVar('img-size', $size);
+      }
+    }
+  }
+
+  @include e(desc) {
+    margin-top: getCompCssVar('desc-top');
+    color: getCompCssVar('desc-color');
+    font-size: getCompCssVar('desc-size');
+  }
+
+  @include e(bottom) {
+    margin-top: 5px;
+  }
+}

package/src/web/empty/index.ts

@@ -0,0 +1,5 @@
+import Empty from './index.vue';
+
+export * from './constants';
+
+export { Empty };

package/src/web/empty/index.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { renderTNode, setSize, VNode } from '@vri/utils';
+import { useNamespace } from '../../use';
+import type { ComponentSize } from '../../../types/component';
+import { getSizeType } from '../../utils';
+import { Empty } from './constants';
+import './index.scss';
+
+import NoCollect from './assets/no-collect.png';
+import NoData from './assets/no-data.png';
+import NoFilter from './assets/no-filter.png';
+import NoPageData from './assets/no-page-data.png';
+import NoSearch from './assets/no-search.png';
+
+interface EmptyProps {
+  /** 图片类型或字符串 支持自定义 slot */
+  img?: string;
+  type?: Empty;
+  /** 图片大小 */
+  size?: ComponentSize | string | number[];
+  /** 图片底部描述 支持自定义 slot */
+  desc?: string;
+}
+
+const { img, type = Empty.NO_DATA, size } = defineProps<EmptyProps>();
+
+const ns = /* hoist-static*/ useNamespace('empty');
+
+defineOptions({
+  name: ns.b()
+});
+
+const instance = getCurrentInstance();
+
+const imgTypeMap = new Map<Empty, {text: string; img: string; size?: EmptyProps['size']; descStyle?: Record<string, Numberish>}>([
+  [
+    Empty.NO_COLLECT,
+    {
+      text: '暂无收藏记录',
+      img: NoCollect
+    }
+  ],
+  [
+    Empty.NO_PAGE_DATA,
+    {
+      text: '没有找到相关信息',
+      size: 300,
+      img: NoPageData
+    }
+  ],
+  [
+    Empty.NO_DATA,
+    {
+      text: '暂无数据',
+      img: NoData
+    }
+  ],
+  [
+    Empty.NO_FILTER,
+    {
+      text: '此筛选条件下无结果',
+      img: NoFilter
+    }
+  ],
+  [
+    Empty.NO_SEARCH,
+    {
+      text: '没有搜索结果',
+      img: NoSearch
+    }
+  ]
+]);
+
+const imgInfos = imgTypeMap.get(type);
+
+const imgContent = computed(() => img || imgInfos?.img);
+
+const descContent = computed(() => renderTNode(instance, 'desc', { defaultNode: imgInfos?.text }));
+
+const _sizeType = getSizeType(size);
+</script>
+
+<template>
+  <div :class="[ns.b(), _sizeType ? ns.m(_sizeType) : '']">
+    <div :class="ns.e('image')" :style="_sizeType ? {} : setSize(imgInfos?.size || size)">
+      <slot v-if="$slots.img" name="img" />
+      <img v-else :src="imgContent" alt="" />
+    </div>
+    <span :class="ns.e('desc')" v-if="descContent">
+      <v-node :content="descContent" />
+    </span>
+    <div v-if="$slots.default" :class="ns.e('bottom')">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/web/exception/index.ts

@@ -0,0 +1,3 @@
+import Exception from './index.vue';
+
+export { Exception };

package/src/web/exception/index.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { generateCssVars } from '@vri/utils';
+import { useRouter } from 'vue-router';
+import { useRouterHelper } from '@vri/router';
+import { useTabs } from '@vri/store';
+import Result from '../result/index.vue';
+import ExceptionSrc from './exception.png';
+
+interface Props {
+  title?: string;
+  showRefresh?: boolean
+  showHome?: boolean
+}
+
+const {
+	title = '页面打不开？刷新下试试',
+  showRefresh = true,
+  showHome
+} = defineProps<Props>();
+
+const router = useRouter();
+
+const { goRoot } = useRouterHelper(router);
+const { refreshPage } = useTabs();
+
+const initStyle = {
+  ...generateCssVars({
+    'title-font-size': '16px'
+  }, 'result')
+};
+</script>
+
+<template>
+  <result :title="title" :icon="{icon: ExceptionSrc, size: 350}" :style="initStyle">
+    <template #extra>
+      <el-button v-if="showHome" type="primary" @click="goRoot">返回主页</el-button>
+      <el-button v-if="showRefresh" type="primary" @click="refreshPage">刷新页面</el-button>
+    </template>
+  </result>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/src/web/filter/README.md

@@ -0,0 +1,25 @@
+# filter 筛选组件
+
+## Usage
+
+```html
+<vri-filter :menus="menus"></vri-filter>
+```
+
+## Props
+
+| 属性名 | 说明         | 类型               | 是否必传 | 默认值 |
+| ------ | ------------ | ------------------ | -------- | ------ |
+| menus  | 筛选菜单集合 | Array\<MenuProps\> | 是       | -      |
+| gap    | 菜单间距(px) | string\|number     | 否       | 40     |
+
+### menu props
+
+| 属性名    | 说明                            | 类型     | 是否必传             | 默认值 |
+| --------- | ------------------------------- | -------- | -------------------- | ------ |
+| title     | 筛选项名称                      | string   | 是                   | -      |
+| component | 组件名称                        | string   | 是                   | -      |
+| options   | 菜单选项列表                    | Array    | 是（仅日期组件不传） | -      |
+| submitFn  | 提交处理函数                    | Function | 是                   | -      |
+| type      | 日期选择器类型 / 级联是否为地区 | string   | 否                   | -      |
+| required  | 单选是否必须有值                | boolean  | 否                   | true   |

package/src/web/filter/index.scss

@@ -0,0 +1,14 @@
+$name: 'filter';
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  display: inline-flex;
+  align-items: center;
+  gap: getCompCssVar('gap');
+  @include e(filter-menu) {
+    display: inline-block;
+  }
+}

package/src/web/filter/index.ts

@@ -0,0 +1,5 @@
+import Filter from './index.vue';
+
+export * from './type';
+
+export { Filter };