y-admin-pro 0.0.1

package/packages/ele-map-picker/index.vue

@@ -0,0 +1,94 @@
+<!-- 地图位置选择 -->
+<template>
+  <EleModal
+    width="740px"
+    :title="lang.title"
+    v-bind="modalProps || {}"
+    :modelValue="modelValue"
+    :class="['ele-map-picker', { 'is-responsive': isResponsive }]"
+    @update:modelValue="updateModelValue"
+  >
+    <MapView
+      v-bind="mapProps"
+      ref="mapRef"
+      :message="lang.message"
+      :clickMessage="lang.clickMessage"
+      :searchPlaceholder="lang.placeholder"
+      :okText="lang.ok"
+      :mapKey="aMapKey"
+      :mode="keywordMode ? 'keyword' : mode"
+      @mapDone="handleMapDone"
+      @done="handleDone"
+    />
+    <template
+      v-for="name in Object.keys($slots).filter((k) => 'default' !== k)"
+      #[name]="slotProps"
+    >
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import type { Ref } from 'vue';
+  import { ref, computed, watch } from 'vue';
+  import { pick } from '../utils/common';
+  import { useLocale } from '../ele-config-provider/receiver';
+  import { useResponsive } from '../ele-pro-layout/util';
+  import EleModal from '../ele-modal/index.vue';
+  import MapView from './components/map-view.vue';
+  import type { PoiItem, MapLocale } from './types';
+  import { mapPickerProps, mapPickerEmits, mapPropKeys } from './props';
+  import type { MapProps } from './props';
+  type MapViewInstance = InstanceType<typeof MapView> | null;
+
+  defineOptions({ name: 'EleMapPicker' });
+
+  const props = defineProps(mapPickerProps);
+
+  const emit = defineEmits(mapPickerEmits);
+
+  const { lang, globalConfig } = useLocale<MapLocale>('map', props);
+
+  /** 是否开启布局响应 */
+  const isResponsive = useResponsive(props);
+
+  /** 地图组件 */
+  const mapRef: Ref<MapViewInstance> = ref<MapViewInstance>(null);
+
+  /** 地图密钥 */
+  const aMapKey = computed(() => props.mapKey || globalConfig.mapKey);
+
+  /** 地图属性 */
+  const mapProps = computed<Partial<MapProps>>(() => {
+    return pick(props, mapPropKeys);
+  });
+
+  /** 更新modelValue */
+  const updateModelValue = (visible: boolean) => {
+    emit('update:modelValue', visible);
+  };
+
+  /** 地图渲染完成事件 */
+  const handleMapDone = (ins: any) => {
+    emit('mapDone', ins);
+  };
+
+  /** 位置选择完成事件 */
+  const handleDone = (result: PoiItem) => {
+    emit('done', result);
+  };
+
+  watch(
+    () => props.modelValue,
+    (visible: boolean) => {
+      if (visible) {
+        mapRef.value && mapRef.value.showInitSelected();
+      }
+    }
+  );
+
+  defineExpose({
+    mapRef
+  });
+</script>

package/packages/ele-map-picker/props.ts

@@ -0,0 +1,149 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type { ElEmptyProps } from '../ele-app/el';
+import type { EleModalProps } from '../ele-app/plus';
+import type { SelectMode, PoiItem, MapLocale } from './types';
+
+/**
+ * 属性
+ */
+export const mapProps = {
+  /** 地图的高度 */
+  height: {
+    type: String,
+    default: '460px'
+  },
+  /** 地图默认中心点 */
+  center: Array as PropType<number[]>,
+  /** 地图初始缩放级别 */
+  zoom: {
+    type: Number,
+    default: 11
+  },
+  /** 地图选中后缩放级别 */
+  selectedZoom: {
+    type: Number,
+    default: 17
+  },
+  /** POI检索最大数量 */
+  poiLimit: {
+    type: Number,
+    default: 30
+  },
+  /** POI检索兴趣点类别 */
+  poiType: {
+    type: String,
+    default: ''
+  },
+  /** POI检索关键字 */
+  poiKeywords: {
+    type: String,
+    default: ''
+  },
+  /** POI检索半径 */
+  poiRadius: {
+    type: Number,
+    default: 1000
+  },
+  /** 是否返回行政区 */
+  returnRegions: Boolean,
+  /** 是否强制选择 */
+  required: {
+    type: Boolean,
+    default: true
+  },
+  /** 强制选择提示文本 */
+  message: String,
+  /** 输入建议的城市范围 */
+  suggestionCity: {
+    type: String,
+    default: '全国'
+  },
+  /** 搜索框提示文本 */
+  searchPlaceholder: String,
+  /** 地图中心图标地址 */
+  markerSrc: {
+    type: String,
+    default:
+      'https://3gimg.qq.com/lightmap/components/locationPicker2/image/marker.png'
+  },
+  /** 高德地图密钥 */
+  mapKey: String,
+  /** 高德地图版本号 */
+  mapVersion: {
+    type: String,
+    default: '2.0'
+  },
+  /** 地图风格 */
+  mapStyle: String,
+  /** 是否暗黑主题 */
+  darkMode: Boolean,
+  /** 完成按钮文字 */
+  okText: String,
+  /** 空组件属性 */
+  emptyProps: Object as PropType<ElEmptyProps>,
+  /** 自定义搜索栏样式 */
+  searchStyle: Object as PropType<StyleValue>,
+  /** 位置选择模式 */
+  mode: {
+    type: String as PropType<SelectMode>,
+    default: 'poi'
+  },
+  /** 非关键字模式是否显示搜索框 */
+  filterable: {
+    type: Boolean,
+    default: true
+  },
+  /** 强制选择点击地图提示文本 */
+  clickMessage: String,
+  /** 回显选中的位置 */
+  selected: Object as PropType<PoiItem>,
+  /** 侧栏容器样式 */
+  sideStyle: Object as PropType<StyleValue>
+};
+
+export const mapPickerProps = {
+  ...mapProps,
+  /** 弹窗是否显示 */
+  modelValue: Boolean,
+  /** 弹窗参数 */
+  modalProps: Object as PropType<Omit<EleModalProps, 'modelValue'>>,
+  /** 是否开启响应式 */
+  responsive: {
+    type: Boolean,
+    default: null
+  },
+  /** 国际化 */
+  locale: Object as PropType<Partial<MapLocale>>,
+  /** 是否使用关键字检索模式, 默认POI检索模式 */
+  keywordMode: Boolean,
+  /** 自定义header样式 */
+  headerStyle: Object as PropType<StyleValue>
+};
+
+export type MapPickerProps = ExtractPropTypes<typeof mapPickerProps>;
+
+export type MapProps = ExtractPropTypes<typeof mapProps>;
+
+/**
+ * 事件
+ */
+export const mapPickerEmits = {
+  /** 选择完成事件 */
+  done: (_result: PoiItem) => true,
+  /** 地图渲染完成事件 */
+  mapDone: (_ins: any) => true,
+  /** 弹窗打开事件 */
+  open: () => true,
+  /** 弹窗关闭事件 */
+  closed: () => true,
+  /** 更新弹窗打开状态 */
+  'update:modelValue': (_value: boolean) => true
+};
+
+export type MapPropKeys = Array<keyof typeof mapProps>;
+
+/**
+ * 地图组件属性名
+ */
+export const mapPropKeys: MapPropKeys = Object.keys(mapProps) as any;

package/packages/ele-map-picker/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 地图位置选择器主题变量 */
+@mixin set-map-var($var) {
+  .ele-map-picker {
+    @include set-ele-var('map', $var);
+  }
+}

package/packages/ele-map-picker/style/index.scss

@@ -0,0 +1,296 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-map-var($ele);
+
+.ele-modal .ele-map-picker .ele-modal-body {
+  padding: 0;
+}
+
+.ele-map-picker {
+  overflow: hidden;
+}
+
+/* 主体区域 */
+.ele-map-view {
+  display: flex;
+
+  &.is-poi-mode > .ele-loading-spinner {
+    background: none;
+
+    & > .ele-loading-dot {
+      display: none;
+    }
+  }
+}
+
+/* 地图容器 */
+.ele-map-view-body {
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 地图中心图标 */
+.ele-map-view-body-icon {
+  width: 26px;
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  margin-left: -13px;
+  pointer-events: none;
+}
+
+.ele-map-view-icon-plus {
+  color: #2f54eb;
+  font-size: 14px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* 列表区域 */
+.ele-map-view-side {
+  width: 40%;
+  height: 100%;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+/* 列表顶部搜索框 */
+.ele-map-view-search {
+  flex-shrink: 0;
+  padding: eleVar('map', 'search-padding');
+  box-sizing: border-box;
+
+  .el-autocomplete,
+  .el-input {
+    width: 100%;
+  }
+}
+
+/* 列表底部提示信息 */
+.ele-map-view-extra {
+  flex-shrink: 0;
+  padding: 6px 12px;
+  box-sizing: border-box;
+
+  /* 确定按钮 */
+  .ele-map-view-btn-ok {
+    width: 100%;
+    display: block;
+  }
+}
+
+.ele-map-view-message {
+  padding: 4px 8px;
+  box-sizing: border-box;
+  color: elVar('color-error');
+  font-size: elVar('font-size', 'small');
+  background: elVar('color-error', 'light-9');
+  border: 1px solid elVar('color-error', 'light-8');
+  border-radius: elVar('border-radius', 'base');
+  text-align: center;
+}
+
+/* 列表空图标 */
+.ele-map-view-empty {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* poi列表 */
+.ele-map-view-list {
+  flex: 1;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.ele-map-view-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 14px;
+  transition: background-color $transition-base;
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+
+  &:hover {
+    background: elVar('fill-color', 'light');
+  }
+
+  & + .ele-map-view-item::before {
+    content: '';
+    border-top: 1px solid elVar('border-color', 'light');
+    position: absolute;
+    top: 0;
+    left: 12px;
+    right: 12px;
+  }
+}
+
+.ele-map-view-item-body {
+  flex: 1;
+  padding: 0 0 0 6px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.ele-map-view-item-title {
+  font-size: elVar('font-size', 'base');
+  word-break: break-all;
+}
+
+.ele-map-view-item-text {
+  color: elVar('text-color', 'secondary');
+  font-size: elVar('font-size', 'extra-small');
+  word-break: break-all;
+  margin-top: 2px;
+}
+
+.ele-map-view-item-icon {
+  flex-shrink: 0;
+  font-size: 18px;
+  color: elVar('text-color', 'secondary');
+}
+
+.ele-map-view-item-radio {
+  font-size: 14px;
+  color: elVar('color-primary');
+  margin: 0 -4px 0 0;
+}
+
+.ele-map-view-item:not(.is-active) .ele-map-view-item-radio {
+  visibility: hidden;
+}
+
+/* 地图底部提示信息 */
+.ele-map-view-body {
+  & > .ele-map-view-search {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    padding: 0;
+    width: 200px;
+    max-width: calc(100% - 16px);
+    background: elVar('bg-color', 'overlay');
+    box-shadow: elVar('box-shadow', 'lighter');
+    border-radius: elVar('border-radius', 'base');
+  }
+
+  & > .ele-map-view-message,
+  & > .ele-map-view-btn-ok {
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    width: max-content;
+    max-width: calc(100% - 32px);
+    box-shadow: elVar('box-shadow', 'light');
+  }
+
+  & > .ele-map-view-btn-ok {
+    width: 120px;
+    border-radius: 32px;
+  }
+}
+
+/* 搜索建议列表 */
+.ele-map-suggest-popper.el-popper .el-autocomplete-suggestion__list > li {
+  height: auto;
+}
+
+.ele-map-suggest-item {
+  line-height: normal;
+  box-sizing: border-box;
+  padding: 6px 0;
+}
+
+.ele-map-suggest-title {
+  word-break: break-all;
+}
+
+.ele-map-suggest-text {
+  color: elVar('text-color', 'secondary');
+  font-size: elVar('font-size', 'small');
+  word-break: break-all;
+  margin-top: 2px;
+}
+
+/* 地图图标跳动动画 */
+.ele-map-view-anim-bounce {
+  animation: mapAnimBounce 0.6s;
+}
+
+@keyframes mapAnimBounce {
+  from,
+  to {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+/* 小屏幕适应 */
+@media screen and (max-width: 768px) {
+  .ele-map-picker.is-responsive {
+    top: 0 !important;
+    left: 0 !important;
+    margin: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    height: 100% !important;
+    border-radius: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+
+    & > .el-dialog__header {
+      flex-shrink: 0;
+
+      .ele-modal-tool-max,
+      .ele-modal-resize-icon {
+        display: none;
+      }
+    }
+
+    & > .el-dialog__body {
+      flex: 1;
+      overflow: hidden;
+
+      & > .ele-modal-body {
+        height: 100%;
+        overflow: hidden;
+      }
+    }
+
+    .ele-map-view {
+      height: 100% !important;
+      flex-direction: column;
+    }
+
+    .ele-map-view-body {
+      height: auto;
+    }
+
+    .ele-map-view-side {
+      height: 68%;
+      width: 100%;
+      min-width: 100%;
+
+      & > .ele-map-view-search {
+        padding-top: 6px;
+      }
+    }
+  }
+}

package/packages/ele-map-picker/style/index.ts

@@ -0,0 +1,8 @@
+import 'element-plus/es/components/autocomplete/style/index';
+import 'element-plus/es/components/input/style/index';
+import 'element-plus/es/components/button/style/index';
+import 'element-plus/es/components/icon/style/index';
+import 'element-plus/es/components/empty/style/index';
+import '../../ele-loading/style/index';
+import '../../ele-modal/style/index';
+import './index.scss';

package/packages/ele-map-picker/types.ts

@@ -0,0 +1,71 @@
+/**
+ * 位置选择模式
+ */
+export type SelectMode = 'lnglat' | 'poi' | 'keyword';
+
+/**
+ * 行政区数据
+ */
+export interface City {
+  /** 省 */
+  province: string;
+  /** 市 */
+  city: string;
+  /** 区 */
+  district: string;
+  /** 区号 */
+  citycode: number;
+}
+
+/**
+ * 检索结果
+ */
+export interface PoiItem extends Record<string, any> {
+  /** 唯一标识 */
+  key?: string;
+  /** 地点名称 */
+  name?: string;
+  /** 详细地址 */
+  address?: string;
+  /** 纬度 */
+  lat?: number;
+  /** 经度 */
+  lng?: number;
+  /** 输入建议的街道 */
+  district?: string;
+  /** 行政区 */
+  city?: City;
+}
+
+/**
+ * 实例
+ */
+export interface MapState {
+  /** 上次搜索建议 */
+  lastSuggestion?: string;
+  /** 选中的搜索建议 */
+  selectedSuggestion?: PoiItem | null;
+  /** 是否是选中条目移动地图 */
+  isItemClickMove?: boolean;
+  /** 地图实例 */
+  mapIns?: any;
+  /** 检索实例 */
+  placeSearchIns?: any;
+  /** 搜索建议实例 */
+  autoCompleteIns?: any;
+  /** 地图标记点 */
+  centerMarker?: any;
+}
+
+/**
+ * 国际化
+ */
+export interface MapLocale {
+  title: string;
+  placeholder: string;
+  message: string;
+  ok: string;
+  clickMessage: string;
+}
+
+export type CenterPoint = PoiItem;

package/packages/ele-mention/index.vue

@@ -0,0 +1,44 @@
+<!-- 提及 -->
+<template>
+  <ElMention
+    v-bind="omit($props, ['options'])"
+    ref="mentionRef"
+    :options="optionData"
+    @update:modelValue="emitMethods['update:modelValue']"
+    @search="emitMethods['search']"
+    @select="emitMethods['select']"
+    @focus="emitMethods['focus']"
+    @blur="emitMethods['blur']"
+  >
+    <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+  </ElMention>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElMention } from 'element-plus';
+  import type { ElMentionInstance } from '../ele-app/el';
+  import { omit } from '../utils/common';
+  import { useComponentEvents, useProOptions } from '../utils/hook';
+  import type { MentionOption } from './types';
+  import { mentionProps, mentionEmits } from './props';
+
+  defineOptions({ name: 'EleMention' });
+
+  const props = defineProps(mentionProps);
+
+  const emit = defineEmits(mentionEmits);
+
+  const { emitMethods } = useComponentEvents(mentionEmits, emit);
+  const { optionData, reloadOptions } = useProOptions<MentionOption>(props);
+
+  /** 组件引用 */
+  const mentionRef = ref<ElMentionInstance>(null);
+
+  defineExpose({
+    reloadOptions,
+    mentionRef
+  });
+</script>

package/packages/ele-mention/props.ts

@@ -0,0 +1,17 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { mentionProps as elMentionProps } from 'element-plus';
+import type { MentionOption, MentionOptionsFunction } from './types';
+export { mentionEmits } from 'element-plus';
+
+/**
+ * 属性
+ */
+export const mentionProps = {
+  ...elMentionProps,
+  /** 数据 */
+  options: [Array, Function] as PropType<
+    MentionOption[] | MentionOptionsFunction
+  >
+};
+
+export type MentionProps = ExtractPropTypes<typeof mentionProps>;

package/packages/ele-mention/style/index.ts

@@ -0,0 +1 @@
+import 'element-plus/es/components/transfer/style/index';

package/packages/ele-mention/types.ts

@@ -0,0 +1,16 @@
+/**
+ * 选项数据
+ */
+export interface MentionOption extends Record<string, any> {
+  /** 选项值 */
+  value: string;
+  /** 显示文本 */
+  label?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+}
+
+/**
+ * 选项数据请求函数
+ */
+export type MentionOptionsFunction = () => Promise<MentionOption[]>;