zm/taimed-international-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新：登录功能

Browse Source
This commit is contained in:
chenghuan
2025-11-04 12:37:04 +08:00
commit a21fb92916
897 changed files with 51500 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
uni_modules/wot-design-uni/components/wd-popover/index.scss Normal file
View File

@@ -0,0 +1,116 @@
@import "./../common/abstracts/_mixin.scss";
@import "./../common/abstracts/variable.scss";
.wot-theme-dark {
@include b(popover) {
@include e(pos) {
background: rgb(75, 76, 77);
color: $-dark-color;
box-shadow: 0px 2px 10px 0px rgba(75, 76, 77, 0.1);
}
@include e(menu) {
background: rgb(75, 76, 77);
}
@include e(inner) {
background-color: rgb(75, 76, 77);
}
@include e(menu-inner) {
@include halfPixelBorder("top", 0, $-dark-border-color);
}
@include squareArrow($-popover-arrow-size, rgb(75, 76, 77), $-popover-z-index - 1, $-popover-arrow-box-shadow);
}
}
@include b(popover) {
position: relative;
display: inline-block;
@include edeep(icon) {
vertical-align: middle;
font-size: 18px;
margin-right: 5px;
}
@include e(menu-inner) {
position: relative;
padding: $-popover-padding 0;
display: flex;
align-items: center;
@include halfPixelBorder("top", 0, $-popover-border-color);
&:first-child::after {
display: none;
}
}
@include e(menu) {
display: inline-block;
padding: 0 $-popover-padding;
white-space: nowrap;
z-index: $-popover-z-index;
position: relative;
background: $-popover-bg;
border-radius: $-popover-radius;
}
@include edeep(pos) {
position: absolute;
box-sizing: border-box;
background-clip: padding-box;
text-align: center;
min-height: 36px;
z-index: $-popover-z-index;
line-height: $-popover-line-height;
font-size: $-popover-fs;
border-radius: $-popover-radius;
transition: opacity 0.2s;
background: $-popover-bg;
box-shadow: $-popover-box-shadow;
color: $-popover-color;
}
// @include edeep(transition) {
// position: relative;
// z-index: $-popover-z-index;
// }
@include e(hidden) {
left: -100vw;
visibility: hidden;
}
@include e(container) {
position: relative;
line-height: $-tooltip-line-height;
font-size: $-tooltip-fs;
}
@include e(inner) {
position: relative;
white-space: nowrap;
padding: $-popover-padding;
line-height: $-popover-line-height;
z-index: $-popover-z-index;
background-color: $-popover-bg;
border-radius: $-popover-radius;
}
@include edeep(close-icon) {
font-size: 12px;
position: absolute;
right: -8px;
top: -10px;
transform: scale(0.5);
padding: 10px;
}
@include squareArrow($-popover-arrow-size, $-popover-bg, $-popover-z-index - 1, $-popover-arrow-box-shadow);
}

69
uni_modules/wot-design-uni/components/wd-popover/types.ts Normal file
View File

@@ -0,0 +1,69 @@
import type { ExtractPropTypes, PropType } from 'vue'
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
export type PlacementType =
| 'top'
| 'top-start'
| 'top-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end'
| 'right'
| 'right-start'
| 'right-end'
export type PopoverMode = 'menu' | 'normal'
export const popoverProps = {
...baseProps,
customArrow: makeStringProp(''),
customPop: makeStringProp(''),
/**
* 是否显示 popover 箭头
*/
visibleArrow: makeBooleanProp(true),
/**
* 显示的内容，也可以通过 slot#content 传入
*/
content: [String, Object] as PropType<string | Record<string, any>[]>,
/**
* 指定 popover 的放置位置：top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end
*/
placement: makeStringProp<PlacementType>('bottom'),
/**
* 偏移量
*/
offset: makeNumberProp(0),
/**
* 是否使用内容插槽
*/
useContentSlot: makeBooleanProp(false),
/**
* 是否禁用 popover
*/
disabled: makeBooleanProp(false),
/**
* 是否显示关闭按钮
*/
showClose: makeBooleanProp(false),
/**
* 控制 popover 的显示状态
*/
modelValue: makeBooleanProp(false),
/**
* 当前显示的模式，决定内容的展现形式，可选值：normal（普通模式）/ menu（菜单模式）
*/
mode: makeStringProp<PopoverMode>('normal')
}
export type PopoverProps = ExtractPropTypes<typeof popoverProps>
export type PopoverExpose = {
// 打开popover
open: () => void
// 关闭popover
close: () => void
}

180
uni_modules/wot-design-uni/components/wd-popover/wd-popover.vue Normal file
View File

@@ -0,0 +1,180 @@
<template>
<view :class="`wd-popover ${customClass}`" :style="customStyle" id="popover" @click.stop="popover.noop">
<!-- 使用插槽时无法获取正确宽高 -->
<view class="wd-popover__pos wd-popover__hidden" id="pos">
<view :class="`wd-popover__container ${customPop}`">
<view v-if="!useContentSlot && mode === 'normal'" class="wd-popover__inner">
{{ content }}
</view>
<view v-if="!useContentSlot && mode === 'menu' && typeof content === 'object'" class="wd-popover__menu">
<view v-for="(item, index) in content" :key="index" class="wd-popover__menu-inner" @click="menuClick(index)">
<wd-icon v-if="item.iconClass" :name="item.iconClass" custom-class="wd-popover__icon" />
<text>{{ item.content }}</text>
</view>
</view>
</view>
</view>
<wd-transition custom-class="wd-popover__pos" :custom-style="popover.popStyle.value" :show="showPopover" name="fade" :duration="200">
<view :class="`wd-popover__container ${customPop}`">
<view
v-if="props.visibleArrow"
:class="`wd-popover__arrow ${popover.arrowClass.value} ${customArrow}`"
:style="popover.arrowStyle.value"
></view>
<!-- 普通模式 -->
<view v-if="!useContentSlot && mode === 'normal'" class="wd-popover__inner">
{{ content }}
</view>
<!-- 列表模式 -->
<view v-if="!useContentSlot && mode === 'menu'" class="wd-popover__menu">
<view
v-for="(item, index) in content"
:key="index"
class="wd-popover__menu-inner"
@click="menuClick(index)"
:style="index === 0 ? 'border-top: none' : ''"
>
<wd-icon v-if="typeof item === 'object' && item.iconClass" :name="item.iconClass" custom-class="wd-popover__icon" />
<view style="display: inline-block">{{ typeof item === 'object' && item.content ? item.content : '' }}</view>
</view>
</view>
<!-- 用户自定义样式 -->
<slot name="content" v-else />
</view>
<wd-icon v-if="showClose" name="close" custom-class="wd-popover__close-icon" @click="toggle"></wd-icon>
</wd-transition>
<view @click="toggle" class="wd-popover__target" id="target">
<slot />
</view>
</view>
</template>
<script lang="ts">
export default {
name: 'wd-popover',
options: {
virtualHost: true,
addGlobalClass: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import wdIcon from '../wd-icon/wd-icon.vue'
import wdTransition from '../wd-transition/wd-transition.vue'
import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { usePopover } from '../composables/usePopover'
import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
import { type Queue, queueKey } from '../composables/useQueue'
import { popoverProps, type PopoverExpose } from './types'
import { isArray } from '../common/util'
const props = defineProps(popoverProps)
const emit = defineEmits(['update:modelValue', 'menuclick', 'change', 'open', 'close'])
const queue = inject<Queue | null>(queueKey, null)
const selector: string = 'popover'
const { proxy } = getCurrentInstance() as any
const popover = usePopover(props.visibleArrow)
const showPopover = ref<boolean>(false) // 控制popover显隐
watch(
() => props.content,
(newVal) => {
const { mode } = props
if (mode === 'normal' && typeof newVal !== 'string') {
console.error('The value type must be a string type in normal mode')
} else if (mode === 'menu' && !isArray(newVal)) {
console.error('The value type must be a Array type in menu mode')
}
}
)
watch(
() => props.placement,
() => {
popover.init(props.placement, props.visibleArrow, selector)
}
)
watch(
() => props.modelValue,
(newValue) => {
showPopover.value = newValue
}
)
watch(
() => showPopover.value,
(newValue) => {
if (newValue) {
popover.control(props.placement, props.offset)
if (queue && queue.closeOther) {
queue.closeOther(proxy)
} else {
closeOther(proxy)
}
}
popover.showStyle.value = newValue ? 'display: inline-block;' : 'display: none;'
emit('change', { show: newValue })
emit(`${newValue ? 'open' : 'close'}`)
}
)
onMounted(() => {
popover.init(props.placement, props.visibleArrow, selector)
})
onBeforeMount(() => {
if (queue && queue.pushToQueue) {
queue.pushToQueue(proxy)
} else {
pushToQueue(proxy)
}
popover.showStyle.value = showPopover.value ? 'opacity: 1;' : 'opacity: 0;'
})
onBeforeUnmount(() => {
if (queue && queue.removeFromQueue) {
queue.removeFromQueue(proxy)
} else {
removeFromQueue(proxy)
}
})
function menuClick(index: number) {
updateModelValue(false)
emit('menuclick', {
item: (props.content as Array<Record<string, any>>)[index],
index
})
}
function toggle() {
if (props.disabled) return
updateModelValue(!showPopover.value)
}
function open() {
updateModelValue(true)
}
function close() {
updateModelValue(false)
}
function updateModelValue(value: boolean) {
showPopover.value = value
emit('update:modelValue', value)
}
defineExpose<PopoverExpose>({
open,
close
})
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>