(resolve => {
+ setTimeout(() => {
+ resolve();
+ }, time);
+ });
+}
+
+/**
+ * 获取事件对象中的坐标
+ * @param event 事件对象
+ */
+export function getEventPosition(event: MouseEvent | TouchEvent): {
+ clientX: number;
+ clientY: number;
+} {
+ if (event instanceof MouseEvent) {
+ return {
+ clientX: event.clientX,
+ clientY: event.clientY,
+ };
+ }
+
+ const touch = event.touches[0] || event.changedTouches[0] || event.targetTouches[0];
+ const touchX = touch.pageX;
+ const touchY = touch.pageY;
+
+ return {
+ clientX: touchX,
+ clientY: touchY,
+ };
+}
diff --git a/src/assets/utils/validate.ts b/src/assets/utils/validate.ts
new file mode 100644
index 0000000000000000000000000000000000000000..289f9ec76b891bec7a4c4dbcbf5b8a263ecd3d03
--- /dev/null
+++ b/src/assets/utils/validate.ts
@@ -0,0 +1,47 @@
+/**
+ * @file 验证相关的工具函数
+ */
+
+/**
+ * 根据区号验证手机号是否正确
+ * @param phoneNumber 手机号
+ * @param areaCode 区号，默认：+86
+ * @returns 正确的手机号返回 true
+ */
+export function validatePhoneNumber(phoneNumber: string, areaCode = '+86'): boolean {
+ // 对于非国内的手机号，只需要 5～20 位
+ if (areaCode !== '+86') {
+ return /(^\d{5,20}$)/.test(phoneNumber);
+ }
+
+ return /^1[3-9]\d{9}$/.test(phoneNumber);
+}
+
+/**
+ * 验证图片验证码
+ * @param imageCaptcha 图片验证码
+ * @param imageId 图片验证码 id
+ * @returns 正确的验证码返回 true
+ */
+export function validateImageCaptcha(imageCaptcha: string, imageId: string): boolean {
+ return imageCaptcha.length >= 5 && imageId.length > 0;
+}
+
+/**
+ * 文本是否包含特殊字符
+ * @param text 目标文本
+ * @returns 如果存在特殊字符则返回 true
+ */
+export function validateSpecialString(text: string): boolean {
+ const containSpecial = /[~!@#$%^&*()+=[\]{}|\\;:",./<>?]+/;
+ return containSpecial.test(text);
+}
+
+/**
+ * 检测文本中是否仅包含中英文和空格
+ * @param text 目标文本
+ * @returns 如果存在其他字符则返回 false
+ */
+export function validateCnAndEn(text: string): boolean {
+ return /^[\u4e00-\u9fa5a-zA-Z ]+$/.test(text);
+}
diff --git a/src/assets/utils/vue-utils/emit-utils.ts b/src/assets/utils/vue-utils/emit-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b7fff0add5f5d0ec237b7e23168c014b228c3a44
--- /dev/null
+++ b/src/assets/utils/vue-utils/emit-utils.ts
@@ -0,0 +1,18 @@
+import { EmitFn, ObjectEmitsOptions } from 'vue/types/v3-setup-context';
+
+type EmitFuncType = (arg: P) => void;
+
+/**
+ * 创建 emit 配置的空函数
+ */
+export const emitFunc =
(): EmitFuncType
=> (() => true) as EmitFuncType
;
+
+export type VueEmit ObjectEmitsOptions> = EmitFn>;
+
+type UpdateEmitReturn = Record<`update:${K}`, EmitFuncType>;
+
+export function updateModelEmit(field: K) {
+ return {
+ [`update:${field}`]: () => true,
+ } as unknown as UpdateEmitReturn;
+}
diff --git a/src/assets/utils/vue-utils/index.ts b/src/assets/utils/vue-utils/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a7dc83b5eb3212fe4c62382b36a0275c8b4c8501
--- /dev/null
+++ b/src/assets/utils/vue-utils/index.ts
@@ -0,0 +1,23 @@
+import Vue, { Ref, unref } from 'vue';
+
+export type SimilarResponsive = T | Ref;
+
+/**
+ * 获取 ref 响应式对象中的 dom 节点，如果不是则返回 undefined
+ * @param targetRef 响应式对象
+ */
+export const getRefElem = (targetRef: Ref | HTMLElement): E | undefined => {
+ const refValue = unref(targetRef);
+
+ // 如果解构出来的是 dom 节点
+ if (refValue instanceof HTMLElement) {
+ return refValue as E;
+ }
+
+ // 如果解构出来的是 vue 对象，则返回 $el
+ if (refValue instanceof Vue) {
+ return refValue.$el;
+ }
+
+ return undefined;
+};
diff --git a/src/assets/utils/vue-utils/props-utils.ts b/src/assets/utils/vue-utils/props-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..297e5a7f1b4d0f014730c3de47845ef0d77b5466
--- /dev/null
+++ b/src/assets/utils/vue-utils/props-utils.ts
@@ -0,0 +1,94 @@
+/**
+ * @file Vue 的 props 工具
+ */
+import { IconComponentOption } from '@polyv/icons-vue/icon-builder';
+import { computed, ComputedRef, ExtractPropTypes } from 'vue';
+import {
+ string as _string,
+ number as _number,
+ bool as _bool,
+ object as _object,
+ func as _func,
+ oneOf as _oneOf,
+ array as _array,
+ oneOfType as _oneOfType,
+ VueTypeValidableDef,
+} from 'vue-types';
+
+/** Vue prop 配置工具 */
+export class PropUtils {
+ /** String 类型，默认：'' */
+ static get string() {
+ return _string().def('');
+ }
+
+ /** String 类型，默认：undefined */
+ static get looseString() {
+ return _string();
+ }
+
+ /** Number 类型，默认：0 */
+ static get number() {
+ return _number().def(0);
+ }
+
+ /** Number 类型，默认：undefined */
+ static get looseNumber() {
+ return _number();
+ }
+
+ /** Boolean 类型，默认：true */
+ static get bool() {
+ return _bool().def(true);
+ }
+
+ static readonly objectType = _object;
+
+ /** Array 类型，默认：[] */
+ static readonly array = () => {
+ return _array().def([]);
+ };
+
+ /** Object 类型 */
+ static readonly object = _object;
+
+ /** Function 类型 */
+ static readonly func = _func;
+
+ /** 指定为数组中的值 */
+ static readonly oneOf = _oneOf;
+
+ /** 自定义类型 */
+ static readonly oneOfType = _oneOfType;
+
+ /** 枚举类型 */
+ static readonly enum = _string;
+
+ /** 图标组件类型 */
+ static readonly icon = (): VueTypeValidableDef => {
+ return {
+ type: undefined,
+ default: undefined,
+ required: false,
+ } as VueTypeValidableDef;
+ };
+}
+
+export type VueProps UniversalParams> = Readonly>>;
+
+export type FormatProps UniversalParams> = Partial<
+ ExtractPropTypes>
+>;
+
+export type PropComputedRefs = {
+ [K in keyof P]: ComputedRef;
+};
+
+/** 结构 props，将 props 转成 computed */
+export const useProps = (props: P): PropComputedRefs
=> {
+ const ret: PropComputedRefs
= {} as PropComputedRefs
;
+ for (const key in props) {
+ ret[key] = computed(() => props[key]);
+ }
+ return ret;
+};
diff --git a/src/components/README.md b/src/components/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..b801d9a72c6dbdd2d86097a662668f2b0efeabdc
--- /dev/null
+++ b/src/components/README.md
@@ -0,0 +1,9 @@
+# 说明
+
+| 目录 | 说明 |
+| :----------------- | :------------------------------------------------------------- |
+| common-base | 存放一些基础组件，尽量不要使用 store |
+| common-business | 存放 `splash` 和 `watch` 都需要用到的业务组件 |
+| component-icons | 源文件在 `icon-svgs`，该文件夹是经过脚手架自动生成的的图标组件 |
+| page-splash-common | 引导页公共组件 |
+| page-watch-common | 直播观看页公共组件 |
diff --git a/src/components/common-base/action-sheet/mobile-action-sheet.vue b/src/components/common-base/action-sheet/mobile-action-sheet.vue
new file mode 100644
index 0000000000000000000000000000000000000000..386abdfbb91cdcbbabb7b22348ff04917ec3d558
--- /dev/null
+++ b/src/components/common-base/action-sheet/mobile-action-sheet.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
+ {{ option.name }}
+
+
+
+ {{ $lang('base.cancel') }}
+
+
+
+
+
+
+ {{ item.text }}
+
+
+ {{ item.title }}
+
+
+
+
+
+
+
+
+ {{ item.text }}
+
+
+ {{ item.unit }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ dialogTips }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-number-input/pc-form-number-input.vue b/src/components/common-base/form/form-number-input/pc-form-number-input.vue
new file mode 100644
index 0000000000000000000000000000000000000000..774209ca137eade2d8ca0e8424e947d44412b098
--- /dev/null
+++ b/src/components/common-base/form/form-number-input/pc-form-number-input.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-number-input/use-form-number-input.ts b/src/components/common-base/form/form-number-input/use-form-number-input.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2e1b8b6832b34eba4b46b8d893c3daf9ecac664a
--- /dev/null
+++ b/src/components/common-base/form/form-number-input/use-form-number-input.ts
@@ -0,0 +1,76 @@
+import { emitFunc, VueEmit } from '@/assets/utils/vue-utils/emit-utils';
+import { PropUtils, useProps, VueProps } from '@/assets/utils/vue-utils/props-utils';
+import { ref, unref } from 'vue';
+import { InputValueType } from '../form-input/hooks/use-form-input';
+import { FormInputInstance } from '../form-input/types/form-input-types';
+import { formCommonProps } from '../hooks/use-form-common';
+
+export type NumberInputValueType = string | number;
+
+export const formNumberInputProps = () => ({
+ ...formCommonProps(),
+ // 绑定值
+ value: PropUtils.oneOfType([String, Number]).def(''),
+ // 最大值
+ max: PropUtils.number.def(Infinity),
+ // 最小值
+ min: PropUtils.number.def(-Infinity),
+});
+
+export const formNumberInputEmits = () => ({
+ input: emitFunc(),
+});
+
+export const useFormNumberInput = (options: {
+ props: VueProps;
+ emit: VueEmit;
+}) => {
+ const { props, emit } = options;
+
+ const { value } = useProps(props);
+
+ const inputRef = ref();
+
+ /**
+ * 格式化值
+ */
+ function formatValue(val: string | number): NumberInputValueType {
+ if (val === '') {
+ return val;
+ }
+ return Number(val);
+ }
+
+ /**
+ * 检查最大值和最小值
+ */
+ function checkMaxMin(val: NumberInputValueType): NumberInputValueType {
+ if (val === '') {
+ return val;
+ }
+ if (val > props.max) {
+ return props.max;
+ }
+ if (val < props.min) {
+ return props.min;
+ }
+ return val;
+ }
+
+ function onInputChange(val: InputValueType): void {
+ let newVal = formatValue(val);
+ newVal = checkMaxMin(newVal);
+ emit('input', newVal);
+
+ const inputInstance = unref(inputRef);
+ if (inputInstance) {
+ inputInstance.forceUpdate();
+ }
+ }
+
+ return {
+ inputRef,
+ value,
+ onInputChange,
+ };
+};
diff --git a/src/components/common-base/form/form-phone-input/mobile-form-phone-input.vue b/src/components/common-base/form/form-phone-input/mobile-form-phone-input.vue
new file mode 100644
index 0000000000000000000000000000000000000000..38981ab11d66776e3196b28f90e59dc9a8f7f79b
--- /dev/null
+++ b/src/components/common-base/form/form-phone-input/mobile-form-phone-input.vue
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-phone-input/pc-form-phone-input.vue b/src/components/common-base/form/form-phone-input/pc-form-phone-input.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ae4d530450e6ec2e28ba88628344d4f74ea763d9
--- /dev/null
+++ b/src/components/common-base/form/form-phone-input/pc-form-phone-input.vue
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-phone-input/use-form-phone-input.ts b/src/components/common-base/form/form-phone-input/use-form-phone-input.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ee905255516fb64f7edd6d7d0812b5a2e2a5bd77
--- /dev/null
+++ b/src/components/common-base/form/form-phone-input/use-form-phone-input.ts
@@ -0,0 +1,69 @@
+/**
+ * @file 手机号码输入框 hook
+ */
+
+import { translate } from '@/assets/lang';
+import { formCommonProps, useFormCommonValidate } from '../hooks/use-form-common';
+import { computed } from 'vue';
+import { PropUtils, VueProps } from '@/assets/utils/vue-utils/props-utils';
+import { emitFunc, updateModelEmit, VueEmit } from '@/assets/utils/vue-utils/emit-utils';
+import { InputValueType } from '../form-input/hooks/use-form-input';
+
+export const formPhoneInputProps = () => ({
+ ...formCommonProps(),
+ // 绑定值
+ value: PropUtils.string,
+ // 区号，支持.sync
+ areaCode: PropUtils.string.def('+86'),
+ // 占位符
+ placeholder: PropUtils.string,
+});
+
+export const formPhoneInputEmits = () => ({
+ input: emitFunc(),
+ blur: emitFunc(),
+ ...updateModelEmit<'areaCode', string>('areaCode'),
+});
+
+export const useFormPhoneInput = (options: {
+ props: VueProps;
+ emit: VueEmit;
+ closePhoneCode?: () => void;
+}) => {
+ const { props, emit, closePhoneCode } = options;
+ const { validateCurrentFormItem, blurToValidateItem } = useFormCommonValidate({
+ props,
+ });
+
+ /** 输入框占位文本 */
+ const inputPlaceholder = computed(() => {
+ return props.placeholder || translate('form.placeholder.phoneInput');
+ });
+
+ /** 处理表单输入框修改 */
+ function onFormInputChange(val: InputValueType) {
+ emit('input', `${val}`);
+ }
+
+ /** 处理表单输入框失焦 */
+ async function onFormInputBlur() {
+ try {
+ await blurToValidateItem();
+ emit('blur', props.value);
+ } catch (error) {}
+ }
+
+ /** 处理区号选择 */
+ function onPhoneCodeInput(code: string) {
+ emit('update:areaCode', code);
+ validateCurrentFormItem();
+ closePhoneCode && closePhoneCode();
+ }
+
+ return {
+ inputPlaceholder,
+ onFormInputChange,
+ onFormInputBlur,
+ onPhoneCodeInput,
+ };
+};
diff --git a/src/components/common-base/form/form-protocol/mobile-form-protocol.vue b/src/components/common-base/form/form-protocol/mobile-form-protocol.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d20b0e474dbf25d924608e511584707c15c2ddde
--- /dev/null
+++ b/src/components/common-base/form/form-protocol/mobile-form-protocol.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-protocol/pc-form-protocol.vue b/src/components/common-base/form/form-protocol/pc-form-protocol.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b13bba3eb4a27bda18d65bf54cfe02bdacbebb74
--- /dev/null
+++ b/src/components/common-base/form/form-protocol/pc-form-protocol.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-protocol/use-form-protocol.ts b/src/components/common-base/form/form-protocol/use-form-protocol.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9cfa505fbf1df3e419f9852daa2116b9cc7a9265
--- /dev/null
+++ b/src/components/common-base/form/form-protocol/use-form-protocol.ts
@@ -0,0 +1,35 @@
+import { emitFunc, VueEmit } from '@/assets/utils/vue-utils/emit-utils';
+import { PropUtils, VueProps } from '@/assets/utils/vue-utils/props-utils';
+import { computed } from 'vue';
+
+export const formProtocolProps = () => ({
+ /** 是否选中 */
+ value: PropUtils.bool.def(false),
+ /** 协议内容 */
+ content: PropUtils.string,
+});
+
+export const formProtocolEmits = () => ({
+ input: emitFunc(),
+});
+
+export const useFormProtocol = (options: {
+ props: VueProps;
+ emit: VueEmit;
+}) => {
+ const { props, emit } = options;
+
+ const checkboxChecked = computed(() => props.value);
+
+ const contentHtml = computed(() => props.content);
+
+ function onCheckboxChange(checked: boolean) {
+ emit('input', checked);
+ }
+
+ return {
+ checkboxChecked,
+ contentHtml,
+ onCheckboxChange,
+ };
+};
diff --git a/src/components/common-base/form/form-select/mobile-form-select.vue b/src/components/common-base/form/form-select/mobile-form-select.vue
new file mode 100644
index 0000000000000000000000000000000000000000..59cb73a1e0d04d7756f0d93d30f53e2c94119ee8
--- /dev/null
+++ b/src/components/common-base/form/form-select/mobile-form-select.vue
@@ -0,0 +1,164 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-select/pc-form-select.vue b/src/components/common-base/form/form-select/pc-form-select.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0e12fe7ebbbbff5a2f4adec498f5256f48e66ed3
--- /dev/null
+++ b/src/components/common-base/form/form-select/pc-form-select.vue
@@ -0,0 +1,168 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-select/types/form-select-types.ts b/src/components/common-base/form/form-select/types/form-select-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d3eb3f764514d954c684f55beb95456779eaa3cf
--- /dev/null
+++ b/src/components/common-base/form/form-select/types/form-select-types.ts
@@ -0,0 +1,8 @@
+export type SelectValueType = string | number;
+
+export interface SelectOptionItem {
+ /** 显示的文案 */
+ label: string;
+ /** 绑定值 */
+ value: SelectValueType;
+}
diff --git a/src/components/common-base/form/form-select/use-form-select.ts b/src/components/common-base/form/form-select/use-form-select.ts
new file mode 100644
index 0000000000000000000000000000000000000000..741a90af308b9fbb91a17b1867527786f4133ea4
--- /dev/null
+++ b/src/components/common-base/form/form-select/use-form-select.ts
@@ -0,0 +1,201 @@
+import { translate } from '@/assets/lang';
+import { isArray } from '@/assets/utils/array';
+import { emitFunc, VueEmit } from '@/assets/utils/vue-utils/emit-utils';
+import { PropUtils, useProps, VueProps } from '@/assets/utils/vue-utils/props-utils';
+import { computed, ref } from 'vue';
+import { SelectOptionItem, SelectValueType } from './types/form-select-types';
+import { formCommonProps, useFormCommonValidate } from '../hooks/use-form-common';
+
+export const formSelectProps = () => ({
+ ...formCommonProps(),
+ // 绑定值
+ value: PropUtils.oneOfType([String, Number, Array]).def(''),
+ // 输入框标题
+ title: PropUtils.string,
+ // 占位符
+ placeholder: PropUtils.string,
+ // 选项列表
+ options: PropUtils.array(),
+ // 是否多选
+ multiple: PropUtils.bool.def(false),
+});
+
+export const formSelectEmits = () => ({
+ input: emitFunc(),
+});
+
+export const useFormSelect = (options: {
+ props: VueProps;
+ emit: VueEmit;
+ closeOptions?: () => void;
+}) => {
+ const { props, emit, closeOptions } = options;
+ const { formItemIsError, blurToValidateItem, focusToRemoveError } = useFormCommonValidate({
+ props,
+ });
+
+ const { title, multiple } = useProps(props);
+
+ /** 输入框的 value 值 */
+ const inputValue = computed(() => {
+ let valText = '';
+
+ if (props.multiple && isArray(props.value) && props.value.length) {
+ return `${translate('form.select.multiPrefix')}${props.value.length}${translate(
+ 'form.select.multiSuffix',
+ )}`;
+ }
+
+ if (!props.multiple) {
+ const index = props.options.findIndex(option => option.value === props.value);
+ if (index !== -1) {
+ valText = props.options[index].label;
+ }
+ }
+
+ return valText;
+ });
+
+ /** 输入框占位符 */
+ const inputPlaceholder = computed(() => props.placeholder);
+
+ /** 选项列表 */
+ const optionList = computed(() => {
+ return props.options;
+ });
+
+ function onClickOption(option: SelectOptionItem): void {
+ if (props.multiple && isArray(props.value)) {
+ if (props.value.includes(option.value)) {
+ emit(
+ 'input',
+ props.value.filter(item => item !== option.value),
+ );
+ } else {
+ emit('input', [...props.value, option.value]);
+ }
+ }
+
+ if (!props.multiple) {
+ if (option.value !== props.value) {
+ emit('input', option.value);
+ }
+
+ if (closeOptions) {
+ closeOptions();
+ }
+ }
+ }
+
+ /** 是否已选中 */
+ function isSelectedOption(value: SelectValueType): boolean {
+ if (props.multiple && isArray(props.value)) {
+ return props.value.includes(value);
+ }
+ if (!props.multiple) {
+ return value === props.value;
+ }
+ return false;
+ }
+
+ return {
+ multiple,
+ title,
+ inputValue,
+ inputPlaceholder,
+ optionList,
+ onClickOption,
+ isSelectedOption,
+
+ formItemIsError,
+ blurToValidateItem,
+ focusToRemoveError,
+ };
+};
+
+/**
+ * 移动端下的 select
+ */
+export const useFormSelectMobile = (options: {
+ props: VueProps;
+ emit: VueEmit;
+}) => {
+ const { props, emit } = options;
+
+ /** 选项是否显示 */
+ const optionVisible = ref(false);
+
+ /** 打开选项 */
+ function openOption() {
+ optionVisible.value = true;
+ }
+
+ /** 关闭选项 */
+ function closeOption() {
+ optionVisible.value = false;
+ }
+
+ /** 已选的 value */
+ const selectValue = ref('');
+
+ /** 处理点击选项 */
+ function onClickOption(option: SelectOptionItem): void {
+ if (!props.multiple) {
+ selectValue.value = option.value;
+ return;
+ }
+
+ if (!isArray(selectValue.value)) {
+ selectValue.value = [];
+ }
+
+ if (selectValue.value.includes(option.value)) {
+ selectValue.value = selectValue.value.filter(item => item !== option.value);
+ } else {
+ selectValue.value = [...selectValue.value, option.value];
+ }
+ }
+
+ /** 处理点击确认 */
+ function onClickConfirm() {
+ if (!props.multiple) {
+ if (!selectValue.value) {
+ return;
+ }
+
+ if (selectValue.value !== props.value) {
+ emit('input', selectValue.value);
+ closeOption();
+ }
+ }
+
+ if (props.multiple) {
+ if (!isArray(selectValue.value)) {
+ selectValue.value = [];
+ }
+
+ emit('input', selectValue.value);
+ closeOption();
+ }
+ }
+
+ /** 是否已选中 */
+ function isSelectedOption(value: SelectValueType): boolean {
+ if (props.multiple && isArray(selectValue.value)) {
+ return selectValue.value.includes(value);
+ }
+ if (!props.multiple) {
+ return value === selectValue.value;
+ }
+ return false;
+ }
+
+ return {
+ optionVisible,
+ openOption,
+ closeOption,
+ onClickOption,
+ onClickConfirm,
+ isSelectedOption,
+ };
+};
diff --git a/src/components/common-base/form/form-slide-verify/mobile-form-slide-verify.vue b/src/components/common-base/form/form-slide-verify/mobile-form-slide-verify.vue
new file mode 100644
index 0000000000000000000000000000000000000000..955b6f256443632f03b485692c06183877b07318
--- /dev/null
+++ b/src/components/common-base/form/form-slide-verify/mobile-form-slide-verify.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-slide-verify/pc-form-slide-verify.vue b/src/components/common-base/form/form-slide-verify/pc-form-slide-verify.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be24ba51c0fdaa60a142e2c5b221a0163e9904fa
--- /dev/null
+++ b/src/components/common-base/form/form-slide-verify/pc-form-slide-verify.vue
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-slide-verify/use-slide-verify.ts b/src/components/common-base/form/form-slide-verify/use-slide-verify.ts
new file mode 100644
index 0000000000000000000000000000000000000000..839089d53bd8c4b8e5993eef1c5cc42f32e62b8a
--- /dev/null
+++ b/src/components/common-base/form/form-slide-verify/use-slide-verify.ts
@@ -0,0 +1,100 @@
+/**
+ * @file 滑块验证码 hook
+ */
+
+import { loadAliAwsc } from '@/plugins/external-lib-loaders/load-ali-awsc';
+import { randomStr } from '@utils-ts/string';
+import { onMounted } from 'vue';
+import { useLangStore } from '@/store/use-lang-store';
+import { LangType } from '@/assets/lang/lang-enum';
+import { PropUtils, VueProps } from '@/assets/utils/vue-utils/props-utils';
+import { emitFunc, VueEmit } from '@/assets/utils/vue-utils/emit-utils';
+import { getWatchCore } from '@/core/watch-sdk';
+
+export interface SlideVerifyData {
+ sessionId: string;
+ sig: string;
+ token: string;
+ scene: string;
+}
+
+export const formSlideVerifyProps = () => ({
+ /** 绑定的验证值 */
+ value: PropUtils.objectType(),
+});
+
+export const formSlideVerifyEmits = () => ({
+ input: emitFunc(),
+ 'verify-success': emitFunc(),
+ 'verify-fail': emitFunc(),
+ 'verify-error': emitFunc(),
+});
+
+export const useSlideVerify = (options: {
+ props: VueProps;
+ emit: VueEmit;
+}) => {
+ const { emit } = options;
+ const langStore = useLangStore();
+
+ const id = randomStr(8);
+ const scene = 'nc_register_h5';
+
+ // 语言配置
+ const langConfig = {
+ cn: {
+ SLIDE: '按住滑块，拖动到最右',
+ },
+ };
+
+ /** 初始化验证码 */
+ async function initSlideVerify() {
+ const AWSC = await loadAliAwsc();
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ AWSC.use('nc', (state: unknown, module: any) => {
+ const watchCore = getWatchCore();
+ module.init({
+ // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
+ appkey: watchCore.utils.getAliSliderAppKey(),
+ // 使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
+ scene,
+ // 声明滑动验证需要渲染的目标ID。
+ renderTo: `#${id}`,
+ // 配置语言
+ language: langStore.currentLang === LangType.Chinese ? 'cn' : 'en',
+ // 更新多语言配置
+ upLang: langConfig,
+ // 前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
+ success: (data: SlideVerifyData) => {
+ const slideData = {
+ sessionId: data.sessionId,
+ sig: data.sig,
+ token: data.token,
+ scene,
+ };
+
+ emit('input', slideData);
+ emit('verify-success', slideData);
+ },
+ // 滑动验证失败时触发该回调参数。
+ fail: (failCode: string) => {
+ emit('verify-fail', failCode);
+ },
+ // 验证码加载出现异常时触发该回调参数。
+ error: (errorCode: string) => {
+ emit('verify-error', errorCode);
+ },
+ });
+ });
+ }
+
+ onMounted(() => {
+ initSlideVerify();
+ });
+
+ return {
+ id,
+ initSlideVerify,
+ };
+};
diff --git a/src/components/common-base/form/form-sms-verify-input/mobile-form-sms-verify-input.vue b/src/components/common-base/form/form-sms-verify-input/mobile-form-sms-verify-input.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2bf875fac05296486fc8a316ff557f163a54ef17
--- /dev/null
+++ b/src/components/common-base/form/form-sms-verify-input/mobile-form-sms-verify-input.vue
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-sms-verify-input/pc-form-sms-verify-input.vue b/src/components/common-base/form/form-sms-verify-input/pc-form-sms-verify-input.vue
new file mode 100644
index 0000000000000000000000000000000000000000..49174b43298265dae45dba24e11b654d7e7d76ab
--- /dev/null
+++ b/src/components/common-base/form/form-sms-verify-input/pc-form-sms-verify-input.vue
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-sms-verify-input/use-sms-verify-input.ts b/src/components/common-base/form/form-sms-verify-input/use-sms-verify-input.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c11a6f28e5da64d8f7e362f888e736b616b0cc9f
--- /dev/null
+++ b/src/components/common-base/form/form-sms-verify-input/use-sms-verify-input.ts
@@ -0,0 +1,242 @@
+/**
+ * @file 短信验证码输入框 hook
+ */
+
+import { PropUtils, useProps, VueProps } from '@/assets/utils/vue-utils/props-utils';
+import { translate } from '@/assets/lang';
+import { validateImageCaptcha, validatePhoneNumber } from '@/assets/utils/validate';
+import { computed, ref, unref, watchEffect } from 'vue';
+import { toast } from '@/hooks/components/use-toast';
+import { getWatchCore } from '@/core/watch-sdk';
+import { useSecondCountDown } from '@/hooks/tools/use-count-down';
+import { emitFunc, VueEmit } from '@/assets/utils/vue-utils/emit-utils';
+import {
+ SmsScene,
+ SmsValidType,
+ SendSmsVerifyCodeFail,
+ SendSmsVerifyResult,
+} from '@polyv/live-watch-sdk';
+import { InputValueType } from '../form-input/hooks/use-form-input';
+import { ImageVerifyInputInstance } from '../form-image-verify-input/type';
+import { isArray } from '@/assets/utils/array';
+
+/** 验证类型，imageCode - 图片验证码，sliderCode - 滑块验证码 */
+export type VerifyType = 'imageCaptcha' | 'sliderCode';
+
+/**
+ * props 配置
+ */
+export const formSmsVerifyInputProps = () => ({
+ /** 绑定值 */
+ value: PropUtils.string.def(''),
+ /** 区号 */
+ areaCode: PropUtils.string.def('+86'),
+ /** 手机号 */
+ phoneNumber: PropUtils.string.def(''),
+ /** 短信场景 */
+ smsScene: PropUtils.enum().isRequired,
+ /** 验证类型 */
+ validType: PropUtils.enum().def(SmsValidType.Image),
+ /** 图片验证码 id */
+ imageId: PropUtils.string.def(''),
+ /** 图片验证码 */
+ imageCaptcha: PropUtils.string.def(''),
+ /** 图片验证码节点 */
+ imageVerifyInputRef: PropUtils.oneOfType([
+ Array,
+ Object,
+ ]),
+});
+
+/**
+ * emit 配置
+ */
+export const formSmsVerifyInputEmits = () => ({
+ input: emitFunc(),
+});
+
+export const useSmsVerifyInput = (options: {
+ props: VueProps;
+ emit: VueEmit;
+}) => {
+ const { props, emit } = options;
+ const { areaCode, phoneNumber, smsScene, imageCaptcha, imageId, validType } = useProps(props);
+ const { surplusTime, initCountDown } = useSecondCountDown({
+ second: 60,
+ });
+
+ /** 输入框占位文本 */
+ const inputPlaceholder = computed(() => {
+ return translate('form.placeholder.smsVerify');
+ });
+
+ /** 发送按钮是否禁用 */
+ const sendDisabled = computed(() => {
+ let isDisabled = false;
+ const areaCodeVal = unref(areaCode);
+ const phoneNumberVal = unref(phoneNumber);
+
+ // 手机号不规范
+ if (!validatePhoneNumber(phoneNumberVal, areaCodeVal)) {
+ isDisabled = true;
+ }
+
+ // 存在倒计时
+ if (unref(surplusTime).seconds !== 0) {
+ isDisabled = true;
+ }
+
+ // 如果是图片验证码则验证长度
+ if (
+ unref(validType) === SmsValidType.Image &&
+ !validateImageCaptcha(unref(imageCaptcha), unref(imageId))
+ ) {
+ isDisabled = true;
+ }
+
+ return isDisabled;
+ });
+
+ /** 发送按钮文本 */
+ const sendText = computed(() => {
+ const seconds = unref(surplusTime).seconds;
+ if (seconds !== 0) {
+ return `${translate('form.resend')}${seconds}${translate('unit.second')}`;
+ }
+
+ return translate('form.getSmsVerify');
+ });
+
+ /** 处理输入框输入 */
+ function onInputChange(val: InputValueType): void {
+ emit('input', `${val}`);
+ }
+
+ /** 滑块验证码是否显示 */
+ const slideVerifyVisible = ref(false);
+
+ watchEffect(() => {
+ if (unref(sendDisabled)) {
+ slideVerifyVisible.value = false;
+ }
+ });
+
+ /** 处理点击发送 */
+ function onClickSend() {
+ if (unref(sendDisabled)) {
+ return;
+ }
+
+ if (unref(validType) === SmsValidType.Slider) {
+ slideVerifyVisible.value = true;
+ } else {
+ toSendImageSmsCode();
+ }
+ }
+
+ /**
+ * 发送短信验证码（滑块验证）
+ */
+ async function toSendSliderSmsCode(slideData: AliAwscSliceData) {
+ const watchCore = getWatchCore();
+ const validTypeVal = unref(validType);
+
+ let result: SendSmsVerifyResult | undefined;
+
+ if (validTypeVal === SmsValidType.Slider) {
+ result = await watchCore.sms.sendSmsVerifyCode({
+ phoneNumber: unref(phoneNumber),
+ areaCode: unref(areaCode),
+ validType: validTypeVal,
+ scene: unref(smsScene),
+ sessionId: slideData.sessionId,
+ sig: slideData.sig,
+ token: slideData.token,
+ });
+ }
+
+ if (!result) {
+ return;
+ }
+
+ if (result.success) {
+ onSendSuccess();
+ return;
+ }
+
+ toast.error(translate('base.frequentOperation'));
+ slideVerifyVisible.value = false;
+ }
+
+ /**
+ * 发送短信验证码（图片验证）
+ */
+ async function toSendImageSmsCode() {
+ const watchCore = getWatchCore();
+ const validTypeVal = unref(validType);
+
+ let result: SendSmsVerifyResult | undefined;
+
+ if (validTypeVal === SmsValidType.Image) {
+ result = await watchCore.sms.sendSmsVerifyCode({
+ phoneNumber: unref(phoneNumber),
+ areaCode: unref(areaCode),
+ validType: validTypeVal,
+ scene: unref(smsScene),
+ imageId: unref(imageId),
+ imageCaptcha: unref(imageCaptcha),
+ });
+ }
+
+ if (!result) {
+ return;
+ }
+
+ if (result.success) {
+ onSendSuccess();
+ return;
+ }
+
+ const failReason = result.failReason;
+ if (failReason === SendSmsVerifyCodeFail.ImageCaptchaError) {
+ toast.error(translate('form.error.imageCaptchaError'));
+ refreshImageVerify();
+ }
+ }
+
+ /** 刷新图片验证码的输入框 */
+ function refreshImageVerify() {
+ if (isArray(props.imageVerifyInputRef)) {
+ props.imageVerifyInputRef.forEach(instance => {
+ instance.refreshVerifyImage(true);
+ });
+ } else {
+ props.imageVerifyInputRef?.refreshVerifyImage(true);
+ }
+ }
+
+ /**
+ * 处理发送成功
+ */
+ function onSendSuccess() {
+ // 开始倒计时
+ initCountDown();
+
+ // 2秒后隐藏滑块验证码
+ setTimeout(() => {
+ slideVerifyVisible.value = false;
+ }, 2000);
+ }
+
+ return {
+ inputPlaceholder,
+ sendDisabled,
+ sendText,
+ SmsValidType,
+ onInputChange,
+ slideVerifyVisible,
+ onClickSend,
+ toSendSliderSmsCode,
+ toSendImageSmsCode,
+ };
+};
diff --git a/src/components/common-base/form/form-submit-button.vue b/src/components/common-base/form/form-submit-button.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c15b5961c549c9d57a81dd2991a616f25bfc8024
--- /dev/null
+++ b/src/components/common-base/form/form-submit-button.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-upload-image/form-upload-image.vue b/src/components/common-base/form/form-upload-image/form-upload-image.vue
new file mode 100644
index 0000000000000000000000000000000000000000..83b941efce20988101d0a04f8052903dd849e6ba
--- /dev/null
+++ b/src/components/common-base/form/form-upload-image/form-upload-image.vue
@@ -0,0 +1,104 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/form-upload-image/use-form-upload-image.ts b/src/components/common-base/form/form-upload-image/use-form-upload-image.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bea4a3bd74ae04ff6bdb8bf653e0c4054541733b
--- /dev/null
+++ b/src/components/common-base/form/form-upload-image/use-form-upload-image.ts
@@ -0,0 +1,71 @@
+import { translate } from '@/assets/lang';
+import { isMobile } from '@/assets/utils/browser';
+import { emitFunc, VueEmit } from '@/assets/utils/vue-utils/emit-utils';
+import { PropUtils, useProps, VueProps } from '@/assets/utils/vue-utils/props-utils';
+import { getWatchCore } from '@/core/watch-sdk';
+import { toast } from '@/hooks/components/use-toast';
+import { computed, unref } from 'vue';
+
+export const formUploadImageProps = () => ({
+ /** 绑定值 */
+ value: PropUtils.array(),
+ /** 最大上传数量 */
+ maxCount: PropUtils.number.def(Infinity),
+});
+
+export const formUploadImageEmit = () => ({
+ input: emitFunc(),
+});
+
+export const useFormUploadImage = (options: {
+ props: VueProps;
+ emit: VueEmit;
+}) => {
+ const { props, emit } = options;
+ const { value, maxCount } = useProps(props);
+
+ /** 处理点击上传 */
+ async function onClickUpload() {
+ try {
+ if (unref(value).length >= unref(maxCount)) {
+ return;
+ }
+
+ const watchCore = getWatchCore();
+ const { imageUrl } = await watchCore.utils.uploadImage();
+ const newVal = [...unref(value), imageUrl];
+ emit('input', newVal);
+ } catch (error) {
+ toast.error(translate('watchCore.error.uploadImage'));
+ }
+ }
+
+ /** 处理点击删除 */
+ function onClickDelete(index: number) {
+ const newVal = unref(value).filter((url, _index) => _index !== index);
+ emit('input', newVal);
+ }
+
+ /** 数量提示 */
+ const countTips = computed(() => {
+ if (props.maxCount === 1 || props.maxCount === Infinity) {
+ return '';
+ }
+ const surplusCount = props.maxCount - props.value.length;
+ if (surplusCount === 0) {
+ return '';
+ }
+ return `(${translate('form.uploadImage.prefixTips')}${surplusCount}${translate(
+ 'form.uploadImage.suffixTips',
+ )})`;
+ });
+
+ return {
+ value,
+ maxCount,
+ onClickUpload,
+ onClickDelete,
+ countTips,
+ isMobile,
+ };
+};
diff --git a/src/components/common-base/form/form-wrap.vue b/src/components/common-base/form/form-wrap.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c602f7797158fa3a48856f9cb8d43d7c288e0f88
--- /dev/null
+++ b/src/components/common-base/form/form-wrap.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/form/hooks/use-form-common.ts b/src/components/common-base/form/hooks/use-form-common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..146b6e406ec334ea5b348951411c25415fff2b60
--- /dev/null
+++ b/src/components/common-base/form/hooks/use-form-common.ts
@@ -0,0 +1,90 @@
+import { PropUtils, VueProps } from '@/assets/utils/vue-utils/props-utils';
+import { computed, unref } from 'vue';
+import { FormSize, FormTheme } from '../types/enums';
+import { useFormItemInject } from './use-form-item';
+import { useFormWrapPropsInject } from './use-form';
+
+export const formCommonProps = () => ({
+ /** 尺寸 */
+ size: PropUtils.enum(),
+ /** 主题 */
+ theme: PropUtils.enum(),
+ /** 是否进行表单验证 */
+ validateForm: PropUtils.bool.def(true),
+});
+
+export const useFormCommon = (options: {
+ props: VueProps;
+ classPrefix: string;
+}) => {
+ const { props, classPrefix } = options;
+ const formProps = useFormWrapPropsInject();
+
+ /** 表单组件公用 className */
+ const commonClassNames = computed(() => {
+ const list = [];
+
+ // 尺寸
+ const sizeVal = props.size;
+ if (sizeVal && sizeVal !== FormSize.Default) {
+ list.push(`${classPrefix}--size-${sizeVal}`);
+ }
+
+ // 主题
+ const themeVal = props.theme || formProps?.theme;
+ if (unref(themeVal)) {
+ list.push(`${classPrefix}--theme-${themeVal}`);
+ }
+
+ return list;
+ });
+
+ return {
+ commonClassNames,
+ };
+};
+
+/** 表单组件下的验证状态 hook */
+export const useFormCommonValidate = (options: { props: VueProps }) => {
+ const { props } = options;
+ const formItemContext = useFormItemInject();
+
+ /** 验证当前的表单节点 */
+ async function validateCurrentFormItem() {
+ await formItemContext?.validateFormItem();
+ }
+
+ /** 在失焦时进行表单节点验证 */
+ async function blurToValidateItem() {
+ if (!props.validateForm) {
+ return;
+ }
+
+ await validateCurrentFormItem();
+ }
+
+ /** 在聚焦时移除表单节点异常提示 */
+ function focusToRemoveError() {
+ if (!props.validateForm) {
+ return;
+ }
+
+ formItemContext?.removeErrorMessage();
+ }
+
+ /** 表单节点是否处于异常 */
+ const formItemIsError = computed(() => {
+ if (!props.validateForm || !formItemContext) {
+ return false;
+ }
+
+ return unref(formItemContext.formItemIsError);
+ });
+
+ return {
+ validateCurrentFormItem,
+ blurToValidateItem,
+ focusToRemoveError,
+ formItemIsError,
+ };
+};
diff --git a/src/components/common-base/form/hooks/use-form-item.ts b/src/components/common-base/form/hooks/use-form-item.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9ea7b1b954d8b434f051fd5d2eddb08cf006234b
--- /dev/null
+++ b/src/components/common-base/form/hooks/use-form-item.ts
@@ -0,0 +1,188 @@
+import { isMobile } from '@/assets/utils/browser';
+import { formatStyleSize } from '@/assets/utils/dom';
+import { PropUtils, VueProps } from '@/assets/utils/vue-utils/props-utils';
+import Schema from '@/plugins/async-validator';
+import { computed, inject, InjectionKey, provide, ref, unref, watchEffect } from 'vue';
+import {
+ FormItemInstance,
+ formItemLabelModels,
+ FormItemLabelModel,
+ FormValidateOptions,
+} from '../types/form-types';
+import { useFormWrapPropsInject } from './use-form';
+
+export const formItemProps = () => ({
+ /** 该节点属于表单数据中的哪个字段 */
+ formField: PropUtils.looseString,
+ /** 节点标签 */
+ label: PropUtils.looseString,
+ /** 表单标题宽度 */
+ labelWidth: PropUtils.looseNumber,
+ /** 表单标题高度 */
+ labelHeight: PropUtils.looseNumber,
+ /** 表单输入框内容宽度 */
+ contentWidth: PropUtils.looseNumber,
+ /** 是否显示异常信息 */
+ showErrorMessage: PropUtils.bool.def(true),
+ /** 节点异常信息 */
+ errorMessage: PropUtils.looseString,
+ /** label 模式 */
+ labelModel: PropUtils.oneOf(formItemLabelModels),
+ /** 是否显示必填星号 */
+ required: PropUtils.bool.def(false),
+});
+
+/** 组件名 */
+export const FORM_ITEM_COMPONENT_NAME = 'form-item';
+
+/**
+ * 判断 vue 实例是否为
+ * @param instance 实例
+ */
+export const isFormItemInstance = (instance: unknown): instance is FormItemInstance => {
+ const _instance = instance as Partial | undefined;
+ return _instance?.isFormItem ?? false;
+};
+
+export const FORM_ITEM_PROVIDE_KEY: InjectionKey =
+ Symbol('FORM_ITEM_PROVIDE_KEY');
+
+export const useFormItemInject = (): FormItemInstance | undefined => {
+ return inject(FORM_ITEM_PROVIDE_KEY);
+};
+
+export const useFormItem = (options: { props: VueProps }) => {
+ const { props } = options;
+
+ const required = computed(() => props.required);
+
+ const formProps = useFormWrapPropsInject();
+
+ const labelText = computed(() => props.label);
+
+ const labelModel = computed(
+ () => props.labelModel ?? formProps?.labelModel ?? 'inline',
+ );
+
+ /** 节点标签样式 */
+ const labelStyle = computed(() => {
+ if (unref(labelModel) === 'header') {
+ return {};
+ }
+
+ const width = props.labelWidth ?? formProps?.labelWidth;
+ const height = props.labelHeight ?? formProps?.labelHeight;
+
+ return {
+ width: formatStyleSize(width),
+ height: formatStyleSize(height),
+ };
+ });
+
+ /** 节点内容宽度样式 */
+ const contentWidthStyle = computed(() => {
+ const width = props.contentWidth ?? formProps?.contentWidth;
+
+ return formatStyleSize(width);
+ });
+
+ /** 节点异常提示 */
+ const itemErrorMessage = ref();
+ /** 当前表单节点是否异常 */
+ const formItemIsError = computed(() => typeof unref(itemErrorMessage) !== 'undefined');
+
+ watchEffect(() => {
+ if (props.errorMessage) {
+ setErrorMessage(props.errorMessage);
+ } else {
+ itemErrorMessage.value = undefined;
+ }
+ });
+
+ /** 设置异常提示 */
+ function setErrorMessage(message: string | undefined): void {
+ if (message && !props.showErrorMessage) return;
+
+ itemErrorMessage.value = message;
+ }
+
+ /** 移除异常提示 */
+ function removeErrorMessage() {
+ itemErrorMessage.value = undefined;
+ }
+
+ /** 验证当前表单节点 */
+ function validateFormItem(validateOptions: FormValidateOptions = {}): Promise {
+ const showErrorMessage = validateOptions.showErrorMessage ?? true;
+
+ // 当前节点验证的字段名
+ const validateField = props.formField;
+ const formDataVal = formProps?.formData;
+ const formRulesVal = formProps?.formRules;
+
+ /**
+ * 没有传验证字段
+ * 中没有 formData
+ * 以上条件满足其一则不进行验证，默认通过验证
+ */
+ if (!validateField || !formDataVal || !formRulesVal || !formRulesVal[validateField]) {
+ return Promise.resolve();
+ }
+
+ // 创建验证对象
+ const descriptor = {
+ [validateField]: formRulesVal[validateField],
+ };
+ const validateVal = {
+ [validateField]: formDataVal[validateField],
+ };
+ const validator = new Schema(descriptor);
+
+ // 执行验证
+ let message: string | undefined;
+ validator.validate(validateVal, errors => {
+ if (errors && errors.length) {
+ message = errors[0].message;
+ }
+ });
+
+ // 验证失败则提示
+ if (showErrorMessage && props.showErrorMessage) {
+ setErrorMessage(message);
+ }
+
+ return new Promise((resolve, reject) => {
+ if (typeof message === 'undefined') {
+ resolve();
+ } else {
+ reject(new Error(message));
+ }
+ });
+ }
+
+ // expose 导出对象
+ const formItemInstance: FormItemInstance = {
+ isFormItem: true,
+ formItemIsError,
+ setErrorMessage,
+ removeErrorMessage,
+ validateFormItem,
+ };
+
+ // 向下注入
+ provide(FORM_ITEM_PROVIDE_KEY, formItemInstance);
+
+ return {
+ required,
+ labelText,
+ labelModel,
+ labelStyle,
+ contentWidthStyle,
+ itemErrorMessage,
+ formItemIsError,
+ removeErrorMessage,
+ validateFormItem,
+ formItemInstance,
+ isMobile,
+ };
+};
diff --git a/src/components/common-base/form/hooks/use-form-submit-button.ts b/src/components/common-base/form/hooks/use-form-submit-button.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ae1e9a4ab7d0cfd9808aafb4298582014b2a4ef3
--- /dev/null
+++ b/src/components/common-base/form/hooks/use-form-submit-button.ts
@@ -0,0 +1,64 @@
+import { ref, unref, watch } from 'vue';
+import { useFormWrapInject, useFormWrapPropsInject } from './use-form';
+
+export const useFormSubmitButton = () => {
+ const formProps = useFormWrapPropsInject();
+ const formContext = useFormWrapInject();
+
+ /** 提交按钮是否禁用 */
+ const buttonIsDisabled = ref(false);
+
+ /** 检查按钮是否需要禁用 */
+ async function checkDisabled(): Promise {
+ let isDisabled = false;
+
+ if (!formContext) {
+ return;
+ }
+
+ // 表单正在提交中
+ if (unref(formContext.isSubmiting)) {
+ isDisabled = true;
+ buttonIsDisabled.value = isDisabled;
+ return;
+ }
+
+ // 进行表单验证
+ try {
+ if (formContext.validateCurrentForm) {
+ await formContext.validateCurrentForm({
+ showErrorMessage: false,
+ });
+ }
+ } catch (e) {
+ if (unref(formContext.debug)) {
+ console.error('form-submit-button-error', e);
+ }
+ isDisabled = true;
+ }
+
+ buttonIsDisabled.value = isDisabled;
+ }
+
+ watch(
+ () => {
+ return [formProps && formProps.formData, formContext && unref(formContext.isSubmiting)];
+ },
+ () => checkDisabled(),
+ {
+ immediate: true,
+ deep: true,
+ },
+ );
+
+ /** 处理按钮点击 */
+ function onButtonClick() {
+ formContext && formContext.submitForm();
+ }
+
+ return {
+ buttonIsDisabled,
+ checkDisabled,
+ onButtonClick,
+ };
+};
diff --git a/src/components/common-base/form/hooks/use-form.ts b/src/components/common-base/form/hooks/use-form.ts
new file mode 100644
index 0000000000000000000000000000000000000000..40d133781868d2e417764a66cc5b5a120a7beed6
--- /dev/null
+++ b/src/components/common-base/form/hooks/use-form.ts
@@ -0,0 +1,130 @@
+import { useVue } from '@/hooks/core/use-vue';
+import { emitFunc, VueEmit } from '@/assets/utils/vue-utils/emit-utils';
+import { PropUtils, useProps, VueProps } from '@/assets/utils/vue-utils/props-utils';
+import { ValidatorRules } from '@/plugins/async-validator';
+import { ComputedRef, inject, InjectionKey, provide, Ref, ref, unref } from 'vue';
+import { FormTheme } from '../types/enums';
+import { formItemLabelModels, FormValidateOptions } from '../types/form-types';
+import { isFormItemInstance } from './use-form-item';
+
+export const formWrapProps = () => ({
+ /** 绑定的表单对象 */
+ formData: PropUtils.object().def({}),
+ /** 验证规则 */
+ formRules: PropUtils.object().def({}),
+ /** 表单标题宽度 */
+ labelWidth: PropUtils.number.def(170),
+ /** 表单标题高度 */
+ labelHeight: PropUtils.number.def(40),
+ /** 表单输入框内容宽度 */
+ contentWidth: PropUtils.looseNumber,
+ /** 表单提交方法 */
+ submitAction: PropUtils.func(),
+ /** 表单主题，dark-黑暗 */
+ theme: PropUtils.enum(),
+ /** label 模式，默认：inline */
+ labelModel: PropUtils.oneOf(formItemLabelModels).def('inline'),
+ /** 是否开启 debug 打印，默认：false */
+ debug: PropUtils.bool.def(false),
+});
+
+export const formWrapEmits = () => ({
+ // 表单提交事件
+ 'submit-form': emitFunc(),
+});
+
+export type FormWrapProps = VueProps;
+
+/** 注入类型 */
+export interface FormWrapInjectData {
+ /** 是否正在提交 */
+ isSubmiting: Ref;
+ /** debug */
+ debug: ComputedRef;
+ /** 验证当前表单 */
+ validateCurrentForm(validateOptions?: FormValidateOptions): Promise;
+ /** 提交当前表单 */
+ submitForm(validateOptions?: FormValidateOptions): Promise;
+}
+
+export const FORM_WRAP_PROPS_PROVIDE_KEY: InjectionKey = Symbol(
+ 'FORM_WRAP_PROPS_PROVIDE_KEY',
+);
+
+export const useFormWrapPropsInject = (): FormWrapProps | undefined => {
+ return inject(FORM_WRAP_PROPS_PROVIDE_KEY);
+};
+
+export const FORM_WRAP_PROVIDE_KEY: InjectionKey =
+ Symbol('FORM_WRAP_PROVIDE_KEY');
+
+export const useFormWrapInject = (): FormWrapInjectData | undefined => {
+ return inject(FORM_WRAP_PROVIDE_KEY);
+};
+
+export const useFormWrap = (options: {
+ props: VueProps;
+ emit: VueEmit;
+}) => {
+ const { props, emit } = options;
+
+ const { formData, submitAction, debug } = useProps(props);
+ const { getCurrentChildrens } = useVue();
+
+ /** 表单是否正在提交 */
+ const isSubmiting = ref(false);
+
+ /** 验证当前表单 */
+ async function validateCurrentForm(validateOptions: FormValidateOptions = {}): Promise {
+ const childrens = getCurrentChildrens();
+ if (!childrens || childrens.length === 0) {
+ return;
+ }
+
+ for (let i = 0; i < childrens.length; i++) {
+ const instance = childrens[i];
+ if (isFormItemInstance(instance)) {
+ try {
+ await instance.validateFormItem(validateOptions);
+ } catch (e) {
+ return Promise.reject(e);
+ }
+ }
+ }
+ }
+
+ /** 验证并触发表单提交 */
+ async function submitForm(validateOptions: FormValidateOptions): Promise {
+ await validateCurrentForm(validateOptions);
+
+ emit('submit-form', unref(formData));
+
+ const submitActionFn = unref(submitAction);
+ if (typeof submitActionFn === 'function') {
+ isSubmiting.value = true;
+ try {
+ await submitActionFn(unref(formData));
+ } catch (e) {
+ isSubmiting.value = false;
+ } finally {
+ isSubmiting.value = false;
+ }
+ }
+ }
+
+ // 向下注入 props
+ provide(FORM_WRAP_PROPS_PROVIDE_KEY, props);
+
+ provide(FORM_WRAP_PROVIDE_KEY, {
+ debug,
+ isSubmiting,
+ validateCurrentForm,
+ submitForm,
+ });
+
+ return {
+ isSubmiting,
+ validateCurrentForm,
+ submitForm,
+ };
+};
diff --git a/src/components/common-base/form/imgs/form-upload-add.png b/src/components/common-base/form/imgs/form-upload-add.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3b1e6c2efa0347aeea44cd2074bd04a32df45d9
Binary files /dev/null and b/src/components/common-base/form/imgs/form-upload-add.png differ
diff --git a/src/components/common-base/form/imgs/form-upload-del.png b/src/components/common-base/form/imgs/form-upload-del.png
new file mode 100644
index 0000000000000000000000000000000000000000..03322421f786c2801d0237843d81d40266037bb2
Binary files /dev/null and b/src/components/common-base/form/imgs/form-upload-del.png differ
diff --git a/src/components/common-base/form/imgs/form-upload-failed.png b/src/components/common-base/form/imgs/form-upload-failed.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c0565654b5d841433a8de81f8fc641d50759f9d
Binary files /dev/null and b/src/components/common-base/form/imgs/form-upload-failed.png differ
diff --git a/src/components/common-base/form/imgs/form-upload-loading.png b/src/components/common-base/form/imgs/form-upload-loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..600b64c8778149f02223c5220324cbd9619e56f1
Binary files /dev/null and b/src/components/common-base/form/imgs/form-upload-loading.png differ
diff --git a/src/components/common-base/form/types/enums.ts b/src/components/common-base/form/types/enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4822b06c575942661340ddebec13be3479ffbb4e
--- /dev/null
+++ b/src/components/common-base/form/types/enums.ts
@@ -0,0 +1,19 @@
+/** 表单尺寸 */
+export enum FormSize {
+ /** 默认 - 48px */
+ Default = 'default',
+ /** 中 - 40px */
+ Medium = 'medium',
+ /** 小 - 40px */
+ Small = 'small',
+}
+
+/** 表单主题 */
+export enum FormTheme {
+ /** 默认 */
+ Default = 'default',
+ /** 黑暗 */
+ Dark = 'dark',
+ /** 简约 */
+ Simplicity = 'simplicity',
+}
diff --git a/src/components/common-base/form/types/form-types.ts b/src/components/common-base/form/types/form-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..825a04622e016f562a2026f76c3b603594f15695
--- /dev/null
+++ b/src/components/common-base/form/types/form-types.ts
@@ -0,0 +1,29 @@
+import { tupleString } from '@/assets/utils/array';
+import { ComputedRef } from 'vue';
+
+/**
+ * 表单验证选项
+ */
+export interface FormValidateOptions {
+ /** 是否显示异常消息 */
+ showErrorMessage?: boolean;
+}
+
+/**
+ * 表单节点对象
+ */
+export interface FormItemInstance {
+ isFormItem: true;
+ /** 表单节点是否验证异常 */
+ formItemIsError: ComputedRef;
+ /** 设置异常提示 */
+ setErrorMessage(message: string | undefined): void;
+ /** 移除异常提示 */
+ removeErrorMessage(): void;
+ /** 验证表单节点 */
+ validateFormItem(validateOptions?: FormValidateOptions): Promise;
+}
+
+export const formItemLabelModels = tupleString('inline', 'header');
+/** 表单节点 label 样式，inline-行内，header-头部 */
+export type FormItemLabelModel = typeof formItemLabelModels[number];
diff --git a/src/components/common-base/form/utils/utils.ts b/src/components/common-base/form/utils/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..715978353134582fa65bb2a1a4cf4ac80a3e23d8
--- /dev/null
+++ b/src/components/common-base/form/utils/utils.ts
@@ -0,0 +1,14 @@
+import { SelectOptionItem } from '../form-select/types/form-select-types';
+
+/**
+ * 格式化字符串数组下拉选项
+ */
+export function formatSimpleSelectOptions(options: string[]): SelectOptionItem[] {
+ const strList = options.filter(str => !!str);
+ return strList.map(str => {
+ return {
+ label: str,
+ value: str,
+ };
+ });
+}
diff --git a/src/components/common-base/iframe-render/mobile-iframe-render.vue b/src/components/common-base/iframe-render/mobile-iframe-render.vue
new file mode 100644
index 0000000000000000000000000000000000000000..935a7127cae732b4f3cf0b13c1a82a3da136783e
--- /dev/null
+++ b/src/components/common-base/iframe-render/mobile-iframe-render.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/iframe-render/pc-iframe-render.vue b/src/components/common-base/iframe-render/pc-iframe-render.vue
new file mode 100644
index 0000000000000000000000000000000000000000..10cc00a1e52fdff31da6e21a68dc5b820eb1e4dd
--- /dev/null
+++ b/src/components/common-base/iframe-render/pc-iframe-render.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/iframe-render/use-iframe-render.ts b/src/components/common-base/iframe-render/use-iframe-render.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4eae674699f34756ed0348cce76a00f070ea4133
--- /dev/null
+++ b/src/components/common-base/iframe-render/use-iframe-render.ts
@@ -0,0 +1,32 @@
+import { formatStyleSize } from '@/assets/utils/dom';
+import { PropUtils, VueProps } from '@/assets/utils/vue-utils/props-utils';
+import { computed } from 'vue';
+import { CSSProperties } from 'vue/types/jsx';
+
+export const iframeRenderProps = () => ({
+ /** 地址 */
+ src: PropUtils.looseString,
+ /** 高度，默认：600 */
+ height: PropUtils.oneOfType([String, Number]).def(600),
+});
+
+export const useIframeRender = (options: { props: VueProps }) => {
+ const { props } = options;
+
+ const iframeSrc = computed(() => props.src);
+
+ const wrapStyle = computed(() => {
+ const styles: CSSProperties = {};
+
+ if (props.height) {
+ styles.height = formatStyleSize(props.height);
+ }
+
+ return styles;
+ });
+
+ return {
+ iframeSrc,
+ wrapStyle,
+ };
+};
diff --git a/src/components/common-base/list-loading/imgs/loading.png b/src/components/common-base/list-loading/imgs/loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a2d5b705698d63ce54f18b469b30eab095949b8
Binary files /dev/null and b/src/components/common-base/list-loading/imgs/loading.png differ
diff --git a/src/components/common-base/list-loading/list-loading.vue b/src/components/common-base/list-loading/list-loading.vue
new file mode 100644
index 0000000000000000000000000000000000000000..08f686097b72b0da1bee91f631495905f6637f37
--- /dev/null
+++ b/src/components/common-base/list-loading/list-loading.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
diff --git a/src/components/common-base/normal-button/normal-button.vue b/src/components/common-base/normal-button/normal-button.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33616e3b8d7e936bb43a6dda7d1ec590fa15a08e
--- /dev/null
+++ b/src/components/common-base/normal-button/normal-button.vue
@@ -0,0 +1,176 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/normal-button/types.ts b/src/components/common-base/normal-button/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2e81bbbf713bf4cb746dee14eac19e96f3a93898
--- /dev/null
+++ b/src/components/common-base/normal-button/types.ts
@@ -0,0 +1,44 @@
+/**
+ * 按钮类型
+ */
+export enum ButtonType {
+ /** 主题按钮 */
+ Primary = 'primary',
+ /** 信息按钮 */
+ Info = 'info',
+ /** 取消按钮 */
+ Cancel = 'cancel',
+ /** 竖屏按钮 */
+ Portrait = 'portrait',
+ /** 加重按钮 */
+ Aggravate = 'aggravate',
+ /** 侧边菜单栏 */
+ AsideMenu = 'aside-menu',
+}
+
+/**
+ * 按钮尺寸
+ */
+export enum ButtonSize {
+ /** 大 - 56px */
+ Large = 'large',
+ /** 中 - 48px */
+ Medium = 'medium',
+ /** 默认 - 40px */
+ Default = 'default',
+ /** 小 - 32px */
+ Small = 'small',
+ /** 超小 - 28px */
+ Mini = 'mini',
+ /** 超级小 - 24px */
+ XMini = 'x-mini',
+}
+
+/**
+ * 按钮原生类型
+ */
+export enum ButtonNativeType {
+ Button = 'button',
+ Submit = 'submit',
+ Reset = 'reset',
+}
diff --git a/src/components/common-base/normal-button/use-normal-button.ts b/src/components/common-base/normal-button/use-normal-button.ts
new file mode 100644
index 0000000000000000000000000000000000000000..565202e8023997b1c9f08fdc431039d6e6e78aa4
--- /dev/null
+++ b/src/components/common-base/normal-button/use-normal-button.ts
@@ -0,0 +1,27 @@
+import { emitFunc } from '@/assets/utils/vue-utils/emit-utils';
+import { PropUtils } from '@/assets/utils/vue-utils/props-utils';
+import { ButtonNativeType, ButtonSize, ButtonType } from './types';
+
+export const normalButtonProps = () => ({
+ /** 按钮文本，默认：按钮 */
+ text: PropUtils.string.def('按钮'),
+ /** 原生类型，默认：button */
+ nativeType: PropUtils.enum().def(ButtonNativeType.Button),
+ /** 按钮类型，默认：ButtonType.Primary */
+ type: PropUtils.enum().def(ButtonType.Primary),
+ /** 按钮尺寸，默认：ButtonSize.Default */
+ size: PropUtils.enum().def(ButtonSize.Default),
+ /** 按钮是否禁用，默认：false */
+ disabled: PropUtils.bool.def(false),
+ /** 是否块状级按钮，默认：false */
+ block: PropUtils.bool.def(false),
+ /** 按钮图标 */
+ icon: PropUtils.icon(),
+ /** 按钮图标 class */
+ iconClass: PropUtils.string,
+});
+
+export const normalButtonEmits = () => ({
+ /** 点击事件 */
+ click: emitFunc(),
+});
diff --git a/src/components/common-base/phone-code/mobile-phone-code.vue b/src/components/common-base/phone-code/mobile-phone-code.vue
new file mode 100644
index 0000000000000000000000000000000000000000..00a1bf02915d89b05535648ea404816e0368c11f
--- /dev/null
+++ b/src/components/common-base/phone-code/mobile-phone-code.vue
@@ -0,0 +1,135 @@
+
+
+
+
+
+
+
+
+
+
+ {{ item.letter }}
+
+
+ {{ item.country }}
+ {{ item.code }}
+
+
+
+
+
+
+
+ {{ item.letter }}
+
+
+
+
+
+
+
+
+
+ {{ item.letter }}
+
+
+ {{ item.country }}
+ {{ item.code }}
+
+
+
+
+
+
+
+
+ {{ trackHoverValue }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/tabs/mobile-menu-tabs/mobile-menu-tab-pane.vue b/src/components/common-base/tabs/mobile-menu-tabs/mobile-menu-tab-pane.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5ade0a8d1b32d469ea27dc6f21f02214b9687930
--- /dev/null
+++ b/src/components/common-base/tabs/mobile-menu-tabs/mobile-menu-tab-pane.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/tabs/mobile-menu-tabs/mobile-menu-tabs.vue b/src/components/common-base/tabs/mobile-menu-tabs/mobile-menu-tabs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..54d787bf7bd8612566845e197325962e24ff8d0b
--- /dev/null
+++ b/src/components/common-base/tabs/mobile-menu-tabs/mobile-menu-tabs.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/tabs/pc-aside-tabs/pc-aside-tab-header.vue b/src/components/common-base/tabs/pc-aside-tabs/pc-aside-tab-header.vue
new file mode 100644
index 0000000000000000000000000000000000000000..15276785b4a25462bac603eab6f5a1e818f6a5ce
--- /dev/null
+++ b/src/components/common-base/tabs/pc-aside-tabs/pc-aside-tab-header.vue
@@ -0,0 +1,171 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/tabs/pc-aside-tabs/pc-aside-tab-pane.vue b/src/components/common-base/tabs/pc-aside-tabs/pc-aside-tab-pane.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5c4dbeb627d965e2748798bb49ad1eec6026b5ff
--- /dev/null
+++ b/src/components/common-base/tabs/pc-aside-tabs/pc-aside-tab-pane.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/tabs/pc-aside-tabs/pc-aside-tabs.vue b/src/components/common-base/tabs/pc-aside-tabs/pc-aside-tabs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc8f173cb8736291ae99d43fe600fc5847a131d3
--- /dev/null
+++ b/src/components/common-base/tabs/pc-aside-tabs/pc-aside-tabs.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/tabs/pc-normal-tabs/pc-normal-tab-header.vue b/src/components/common-base/tabs/pc-normal-tabs/pc-normal-tab-header.vue
new file mode 100644
index 0000000000000000000000000000000000000000..95513ae23c3eeebac2637c1f38c645189145bd59
--- /dev/null
+++ b/src/components/common-base/tabs/pc-normal-tabs/pc-normal-tab-header.vue
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/tabs/pc-normal-tabs/pc-normal-tab-pane.vue b/src/components/common-base/tabs/pc-normal-tabs/pc-normal-tab-pane.vue
new file mode 100644
index 0000000000000000000000000000000000000000..119b12892f1081b6fc24ac14b666307289263b05
--- /dev/null
+++ b/src/components/common-base/tabs/pc-normal-tabs/pc-normal-tab-pane.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-base/tabs/pc-normal-tabs/pc-normal-tabs.vue b/src/components/common-base/tabs/pc-normal-tabs/pc-normal-tabs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dab4e2db2a9bdb2cc8b3651a328af6323c0da8f5
--- /dev/null
+++ b/src/components/common-base/tabs/pc-normal-tabs/pc-normal-tabs.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
diff --git a/src/components/common-base/tabs/portrait-normal-tabs/portrait-normal-tabs.vue b/src/components/common-base/tabs/portrait-normal-tabs/portrait-normal-tabs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..549fa9120ea0a17f89cd518d27b817324c47f558
--- /dev/null
+++ b/src/components/common-base/tabs/portrait-normal-tabs/portrait-normal-tabs.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
diff --git a/src/components/common-business/basic-info/imgs/low-latency-bg-mob.svg b/src/components/common-business/basic-info/imgs/low-latency-bg-mob.svg
new file mode 100644
index 0000000000000000000000000000000000000000..93c92a5e3c9c25d7cd4488e9b3640aac12323950
--- /dev/null
+++ b/src/components/common-business/basic-info/imgs/low-latency-bg-mob.svg
@@ -0,0 +1,119 @@
+
+
\ No newline at end of file
diff --git a/src/components/common-business/basic-info/imgs/low-latency-bg.svg b/src/components/common-business/basic-info/imgs/low-latency-bg.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d8d202f00a73bedf760ba5de17070514fd3a4553
--- /dev/null
+++ b/src/components/common-business/basic-info/imgs/low-latency-bg.svg
@@ -0,0 +1,117 @@
+
+
\ No newline at end of file
diff --git a/src/components/common-business/basic-info/mobile-basic-info.vue b/src/components/common-business/basic-info/mobile-basic-info.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c56b6589342c7d0aa80f0bd490629d41ce4cecc8
--- /dev/null
+++ b/src/components/common-business/basic-info/mobile-basic-info.vue
@@ -0,0 +1,243 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ channelTitle }}
+
+
+
+
+
+
+
+
+ {{ pageViewVisible ? '' : `${$lang('watch.liveTime')}：` }}
+ {{ liveStartTimeText }}
+
+
+ {{ shortNumber(pageViewCount) }} {{ $lang('watch.pvSuffix') }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ channelPublisher }}
+
+
+
+
+
+ {{ likeCount }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ channelTitle }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ channelPublisher }}
+
+
+
+ {{ channelPublisher }}
+
+
+
+
+
+
+ {{ shortNumber(pageViewCount) }} {{ $lang('watch.pvSuffix') }}
+
+
+
+
+
+
+
+
+
{{ $lang('share.title') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ currentLangText }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/common-business/live-count-down/pc-live-count-down.vue b/src/components/common-business/live-count-down/pc-live-count-down.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a1d5666a50d1116bb3b6904f2cb1a78b864fe46
--- /dev/null
+++ b/src/components/common-business/live-count-down/pc-live-count-down.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-business/live-count-down/use-live-count-down.ts b/src/components/common-business/live-count-down/use-live-count-down.ts
new file mode 100644
index 0000000000000000000000000000000000000000..100fd4f0b6314aee87db61308edb3459d13e94c4
--- /dev/null
+++ b/src/components/common-business/live-count-down/use-live-count-down.ts
@@ -0,0 +1,13 @@
+import { useChannelInfoStore } from '@/store/use-channel-info-store';
+
+export const useLiveCountDown = () => {
+ const channelInfoStore = useChannelInfoStore();
+
+ function onCountDownFinish() {
+ channelInfoStore.isLiveStartCountDownEnd = true;
+ }
+
+ return {
+ onCountDownFinish,
+ };
+};
diff --git a/src/components/common-business/page-fixed-widgets/fixed-back-top.vue b/src/components/common-business/page-fixed-widgets/fixed-back-top.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ed39d1eea8b4bc13e59b2d23724f42f7638abcdb
--- /dev/null
+++ b/src/components/common-business/page-fixed-widgets/fixed-back-top.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/common-business/page-fixed-widgets/fixed-web-share.vue b/src/components/common-business/page-fixed-widgets/fixed-web-share.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6b0cc96b26a3b09f4f041620181547dd824b7f3
--- /dev/null
+++ b/src/components/common-business/page-fixed-widgets/fixed-web-share.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-business/page-fixed-widgets/page-fixed-widgets.vue b/src/components/common-business/page-fixed-widgets/page-fixed-widgets.vue
new file mode 100644
index 0000000000000000000000000000000000000000..65d8aed2e79527d4ab280e667e2a1bd94e75ebcd
--- /dev/null
+++ b/src/components/common-business/page-fixed-widgets/page-fixed-widgets.vue
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/common-business/page-footer/mobile-page-footer.vue b/src/components/common-business/page-footer/mobile-page-footer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..28c23e326580269f9c03aac42d09107908a6a59a
--- /dev/null
+++ b/src/components/common-business/page-footer/mobile-page-footer.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-business/page-footer/pc-page-footer.vue b/src/components/common-business/page-footer/pc-page-footer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7263b05c5e455c7f6c7a1d70344affcff0a2e4e1
--- /dev/null
+++ b/src/components/common-business/page-footer/pc-page-footer.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/common-business/page-footer/use-page-footer.ts b/src/components/common-business/page-footer/use-page-footer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..83284e202a2ffc1cbe4b3778a269aac5b940b610
--- /dev/null
+++ b/src/components/common-business/page-footer/use-page-footer.ts
@@ -0,0 +1,41 @@
+/**
+ * @file 页脚 hook
+ */
+import { useChannelStore } from '@/store/use-channel-store';
+import { storeDefinitionToRefs } from '@/plugins/pinia/util';
+import { ynToBool } from '@utils-ts/boolean';
+import { changeProtocol } from '@utils-ts/net';
+import { computed, unref } from 'vue';
+
+/** 页脚 hook */
+export const usePageFooter = () => {
+ const { channelDetail } = storeDefinitionToRefs(useChannelStore);
+
+ /** 页脚设置信息 */
+ const footerSetting = computed(() => unref(channelDetail)?.footerSetting);
+
+ /** 页脚是否显示 */
+ const footerVisible = computed(() => ynToBool(unref(footerSetting)?.showFooterEnabled || 'N'));
+
+ /** 页脚跳转链接 */
+ const footerLink = computed(() => {
+ const setting = unref(footerSetting);
+ if (!setting) {
+ return '';
+ }
+ const { footTextLinkProtocol, footTextLinkUrl } = setting;
+ return changeProtocol(footTextLinkUrl, footTextLinkProtocol);
+ });
+
+ /** 页脚文案 */
+ const footerText = computed(() => {
+ return unref(footerSetting)?.footerText || '';
+ });
+
+ return {
+ footerSetting,
+ footerVisible,
+ footerLink,
+ footerText,
+ };
+};
diff --git a/src/components/common-business/player/player-audio-live-placeholder.vue b/src/components/common-business/player/player-audio-live-placeholder.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b8896ea08ea6758e4608e07b635a31f05066534f
--- /dev/null
+++ b/src/components/common-business/player/player-audio-live-placeholder.vue
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+
+
{{ $lang('live.audioLive') }}
+
+
+
+ 为了您有更好的观看体验
+
+
+ 请同意协议后进入直播间
+
+
+
+
+
+
+
+
+
+ 欢迎您进入
+
+ {{ viewerRiskConfirmInfo.channelName }}
+
+ 直播间，为更好地保护您的权益，根据国家相关法律法规规定，请您观看直播前，务必认真阅读并充分理解
+
+ 我们的
+
+ 《{{ agreement.agreementTitle }}》
+ 、
+
+ 以及
+
+ 直播平台保利威的
+
+ 《服务协议》
+
+ 和
+
《隐私协议》
+
+ 。
+
您点击同意，即表示您已阅读、理解且接受全部的协议条款，确认同意后即可进入直播间。
+
+
+
+ {{ curPreviewAgreement.title }}
+
+
+
+
+
+
+
+
+
+
+ 为了您有更好的观看体验
+
+
+ 请同意协议后进入直播间
+
+
+
+
+
+
+
+
+
+ 欢迎您进入
+
+ {{ viewerRiskConfirmInfo.channelName }}
+
+ 直播间，为更好地保护您的权益，根据国家相关法律法规规定，请您观看直播前，务必认真阅读并充分理解
+
+ 我们的
+
+ 《{{ agreement.agreementTitle }}》
+ 、
+
+ 以及
+
+ 直播平台保利威的
+
《服务协议》和
《隐私协议》。
+
您点击同意，即表示您已阅读、理解且接受全部的协议条款，确认同意后即可进入直播间。
+
+
+
+ {{ statusTagText }}
+
+
+
+
+
+
diff --git a/src/components/common-business/status-tag/mobile-status-tag.vue b/src/components/common-business/status-tag/mobile-status-tag.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43d0ee26fc81bbc06e9a114f97033ad5d261d9a6
--- /dev/null
+++ b/src/components/common-business/status-tag/mobile-status-tag.vue
@@ -0,0 +1,31 @@
+
+
+ {{ statusTagText }}
+
+
+
+
+
+
diff --git a/src/components/common-business/status-tag/pc-status-tag.vue b/src/components/common-business/status-tag/pc-status-tag.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8f1605198b8924bc1e93be00ea7e305dd57562e3
--- /dev/null
+++ b/src/components/common-business/status-tag/pc-status-tag.vue
@@ -0,0 +1,32 @@
+
+
+ {{ statusTagText }}
+
+
+
+
+
+
diff --git a/src/components/common-business/status-tag/use-status-tag.ts b/src/components/common-business/status-tag/use-status-tag.ts
new file mode 100644
index 0000000000000000000000000000000000000000..92bc6c6a01abf3c6baa7f7d445f2ecf6fad9f800
--- /dev/null
+++ b/src/components/common-business/status-tag/use-status-tag.ts
@@ -0,0 +1,85 @@
+import { translate } from '@/assets/lang';
+import { PropUtils, VueProps } from '@/assets/utils/vue-utils/props-utils';
+import { useChannelStore } from '@/store/use-channel-store';
+import { LiveStatus } from '@polyv/live-watch-sdk';
+import { computed, unref } from 'vue';
+
+export const statusTagProps = () => ({
+ liveStatus: PropUtils.enum(),
+});
+
+/**
+ * 直播状态标签 hook
+ */
+export const useStatusTag = (options: { props: VueProps }) => {
+ const { props } = options;
+
+ const channelStore = useChannelStore();
+
+ const liveStatus = computed(() => {
+ return props.liveStatus ?? channelStore.liveStatus;
+ });
+
+ /**
+ * 获取直播状态文本
+ * @param status 直播状态
+ */
+ function getLiveStatusText(status: LiveStatus): string {
+ const tagTexts: Record = {
+ [LiveStatus.Live]: translate('liveStatus.live'),
+ [LiveStatus.Waiting]: translate('liveStatus.waiting'),
+ [LiveStatus.End]: translate('liveStatus.end'),
+ [LiveStatus.Stop]: translate('liveStatus.stop'),
+ [LiveStatus.Playback]: translate('liveStatus.playback'),
+ [LiveStatus.UnStart]: translate('liveStatus.unStart'),
+ };
+
+ return tagTexts[status];
+ }
+
+ /**
+ * 直播状态标签文本
+ */
+ const statusTagText = computed(() => {
+ return getLiveStatusText(unref(liveStatus));
+ });
+
+ return {
+ liveStatus,
+ statusTagText,
+ };
+};
+
+export const useMiniStatusTagStyle = (options: { props: VueProps }) => {
+ const { props } = options;
+
+ const channelStore = useChannelStore();
+
+ const liveStatus = computed(() => {
+ return props.liveStatus ?? channelStore.liveStatus;
+ });
+
+ const tagColors: Record = {
+ [LiveStatus.Live]: 'linear-gradient(150deg, #F06E6E 0%, #E63A3A 100%)',
+ [LiveStatus.Playback]: 'linear-gradient(152deg, #5ba3ff, #3082fe)',
+ [LiveStatus.Waiting]: 'linear-gradient(152deg, #abafc0, #73778c)',
+ [LiveStatus.End]: 'linear-gradient(152deg, #abafc0, #73778c)',
+ [LiveStatus.Stop]: 'linear-gradient(152deg, #abafc0, #73778c)',
+ [LiveStatus.UnStart]: 'linear-gradient(152deg, #abafc0, #73778c)',
+ };
+
+ /**
+ * 直播状态标签样式
+ */
+ const minStatusTagStyle = computed(() => {
+ const color = tagColors[unref(liveStatus)];
+
+ return {
+ background: color,
+ };
+ });
+
+ return {
+ minStatusTagStyle,
+ };
+};
diff --git a/src/components/common-business/web-share-panel/imgs/icon-share-wechat.png b/src/components/common-business/web-share-panel/imgs/icon-share-wechat.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e6a3c53b7e77c03a72910cbec5ba502e4eea565
Binary files /dev/null and b/src/components/common-business/web-share-panel/imgs/icon-share-wechat.png differ
diff --git a/src/components/common-business/web-share-panel/web-share-panel.vue b/src/components/common-business/web-share-panel/web-share-panel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c2c25b098137c0e3903fefe893d8bf28e177ffc6
--- /dev/null
+++ b/src/components/common-business/web-share-panel/web-share-panel.vue
@@ -0,0 +1,182 @@
+
+
+
+
+
+
+
+
+
+ {{ $lang('copy.link') }}
+
+
+
+
+
+
+
![]()
+
+
+
+ {{ $lang('share.wxScan') }}
+
+
+
+
+
![]()
+
+
+ {{ qrcodeTips }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
+
+ {{ qrcodeTips }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+