Initial commit: GamePortrait 竖屏版 - 深色豪华主题

This commit is contained in:
li
2026-01-16 17:47:53 +08:00
commit 40976e4b45
26611 changed files with 2843638 additions and 0 deletions
+105
View File
@@ -0,0 +1,105 @@
import { type PropType, type ExtractPropTypes } from 'vue';
export type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
export type ImagePosition = 'center' | 'top' | 'right' | 'bottom' | 'left' | string;
export declare const imageProps: {
src: StringConstructor;
alt: StringConstructor;
fit: PropType<ImageFit>;
position: PropType<string>;
round: BooleanConstructor;
block: BooleanConstructor;
width: (NumberConstructor | StringConstructor)[];
height: (NumberConstructor | StringConstructor)[];
radius: (NumberConstructor | StringConstructor)[];
lazyLoad: BooleanConstructor;
iconSize: (NumberConstructor | StringConstructor)[];
showError: {
type: BooleanConstructor;
default: true;
};
errorIcon: {
type: PropType<string>;
default: string;
};
iconPrefix: StringConstructor;
showLoading: {
type: BooleanConstructor;
default: true;
};
loadingIcon: {
type: PropType<string>;
default: string;
};
};
export type ImageProps = ExtractPropTypes<typeof imageProps>;
declare const _default: import("vue").DefineComponent<{
src: StringConstructor;
alt: StringConstructor;
fit: PropType<ImageFit>;
position: PropType<string>;
round: BooleanConstructor;
block: BooleanConstructor;
width: (NumberConstructor | StringConstructor)[];
height: (NumberConstructor | StringConstructor)[];
radius: (NumberConstructor | StringConstructor)[];
lazyLoad: BooleanConstructor;
iconSize: (NumberConstructor | StringConstructor)[];
showError: {
type: BooleanConstructor;
default: true;
};
errorIcon: {
type: PropType<string>;
default: string;
};
iconPrefix: StringConstructor;
showLoading: {
type: BooleanConstructor;
default: true;
};
loadingIcon: {
type: PropType<string>;
default: string;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "load")[], "error" | "load", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
src: StringConstructor;
alt: StringConstructor;
fit: PropType<ImageFit>;
position: PropType<string>;
round: BooleanConstructor;
block: BooleanConstructor;
width: (NumberConstructor | StringConstructor)[];
height: (NumberConstructor | StringConstructor)[];
radius: (NumberConstructor | StringConstructor)[];
lazyLoad: BooleanConstructor;
iconSize: (NumberConstructor | StringConstructor)[];
showError: {
type: BooleanConstructor;
default: true;
};
errorIcon: {
type: PropType<string>;
default: string;
};
iconPrefix: StringConstructor;
showLoading: {
type: BooleanConstructor;
default: true;
};
loadingIcon: {
type: PropType<string>;
default: string;
};
}>> & {
onLoad?: ((...args: any[]) => any) | undefined;
onError?: ((...args: any[]) => any) | undefined;
}, {
round: boolean;
showError: boolean;
block: boolean;
lazyLoad: boolean;
errorIcon: string;
showLoading: boolean;
loadingIcon: string;
}>;
export default _default;
+171
View File
@@ -0,0 +1,171 @@
import { withDirectives as _withDirectives, mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
import { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, defineComponent, getCurrentInstance } from "vue";
import { isDef, addUnit, inBrowser, truthProp, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
import { Icon } from "../icon/index.mjs";
const [name, bem] = createNamespace("image");
const imageProps = {
src: String,
alt: String,
fit: String,
position: String,
round: Boolean,
block: Boolean,
width: numericProp,
height: numericProp,
radius: numericProp,
lazyLoad: Boolean,
iconSize: numericProp,
showError: truthProp,
errorIcon: makeStringProp("photo-fail"),
iconPrefix: String,
showLoading: truthProp,
loadingIcon: makeStringProp("photo")
};
var stdin_default = defineComponent({
name,
props: imageProps,
emits: ["load", "error"],
setup(props, {
emit,
slots
}) {
const error = ref(false);
const loading = ref(true);
const imageRef = ref();
const {
$Lazyload
} = getCurrentInstance().proxy;
const style = computed(() => {
const style2 = {
width: addUnit(props.width),
height: addUnit(props.height)
};
if (isDef(props.radius)) {
style2.overflow = "hidden";
style2.borderRadius = addUnit(props.radius);
}
return style2;
});
watch(() => props.src, () => {
error.value = false;
loading.value = true;
});
const onLoad = (event) => {
if (loading.value) {
loading.value = false;
emit("load", event);
}
};
const triggerLoad = () => {
const loadEvent = new Event("load");
Object.defineProperty(loadEvent, "target", {
value: imageRef.value,
enumerable: true
});
onLoad(loadEvent);
};
const onError = (event) => {
error.value = true;
loading.value = false;
emit("error", event);
};
const renderIcon = (name2, className, slot) => {
if (slot) {
return slot();
}
return _createVNode(Icon, {
"name": name2,
"size": props.iconSize,
"class": className,
"classPrefix": props.iconPrefix
}, null);
};
const renderPlaceholder = () => {
if (loading.value && props.showLoading) {
return _createVNode("div", {
"class": bem("loading")
}, [renderIcon(props.loadingIcon, bem("loading-icon"), slots.loading)]);
}
if (error.value && props.showError) {
return _createVNode("div", {
"class": bem("error")
}, [renderIcon(props.errorIcon, bem("error-icon"), slots.error)]);
}
};
const renderImage = () => {
if (error.value || !props.src) {
return;
}
const attrs = {
alt: props.alt,
class: bem("img"),
style: {
objectFit: props.fit,
objectPosition: props.position
}
};
if (props.lazyLoad) {
return _withDirectives(_createVNode("img", _mergeProps({
"ref": imageRef
}, attrs), null), [[_resolveDirective("lazy"), props.src]]);
}
return _createVNode("img", _mergeProps({
"ref": imageRef,
"src": props.src,
"onLoad": onLoad,
"onError": onError
}, attrs), null);
};
const onLazyLoaded = ({
el
}) => {
const check = () => {
if (el === imageRef.value && loading.value) {
triggerLoad();
}
};
if (imageRef.value) {
check();
} else {
nextTick(check);
}
};
const onLazyLoadError = ({
el
}) => {
if (el === imageRef.value && !error.value) {
onError();
}
};
if ($Lazyload && inBrowser) {
$Lazyload.$on("loaded", onLazyLoaded);
$Lazyload.$on("error", onLazyLoadError);
onBeforeUnmount(() => {
$Lazyload.$off("loaded", onLazyLoaded);
$Lazyload.$off("error", onLazyLoadError);
});
}
onMounted(() => {
nextTick(() => {
var _a;
if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
triggerLoad();
}
});
});
return () => {
var _a;
return _createVNode("div", {
"class": bem({
round: props.round,
block: props.block
}),
"style": style.value
}, [renderImage(), renderPlaceholder(), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
};
}
});
export {
stdin_default as default,
imageProps
};
+1
View File
@@ -0,0 +1 @@
:root{--van-image-placeholder-text-color: var(--van-text-color-2);--van-image-placeholder-font-size: var(--van-font-size-md);--van-image-placeholder-background: var(--van-background);--van-image-loading-icon-size: 32px;--van-image-loading-icon-color: var(--van-gray-4);--van-image-error-icon-size: 32px;--van-image-error-icon-color: var(--van-gray-4)}.van-image{position:relative;display:inline-block}.van-image--round{overflow:hidden;border-radius:var(--van-radius-max)}.van-image--round .van-image__img{border-radius:inherit}.van-image--block{display:block}.van-image__img,.van-image__error,.van-image__loading{display:block;width:100%;height:100%}.van-image__error,.van-image__loading{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-image-placeholder-text-color);font-size:var(--van-image-placeholder-font-size);background:var(--van-image-placeholder-background)}.van-image__loading-icon{color:var(--van-image-loading-icon-color);font-size:var(--van-image-loading-icon-size)}.van-image__error-icon{color:var(--van-image-error-icon-color);font-size:var(--van-image-error-icon-size)}
+79
View File
@@ -0,0 +1,79 @@
export declare const Image: import("../utils").WithInstall<import("vue").DefineComponent<{
src: StringConstructor;
alt: StringConstructor;
fit: import("vue").PropType<import("./Image").ImageFit>;
position: import("vue").PropType<string>;
round: BooleanConstructor;
block: BooleanConstructor;
width: (NumberConstructor | StringConstructor)[];
height: (NumberConstructor | StringConstructor)[];
radius: (NumberConstructor | StringConstructor)[];
lazyLoad: BooleanConstructor;
iconSize: (NumberConstructor | StringConstructor)[];
showError: {
type: BooleanConstructor;
default: true;
};
errorIcon: {
type: import("vue").PropType<string>;
default: string;
};
iconPrefix: StringConstructor;
showLoading: {
type: BooleanConstructor;
default: true;
};
loadingIcon: {
type: import("vue").PropType<string>;
default: string;
};
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "load")[], "error" | "load", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
src: StringConstructor;
alt: StringConstructor;
fit: import("vue").PropType<import("./Image").ImageFit>;
position: import("vue").PropType<string>;
round: BooleanConstructor;
block: BooleanConstructor;
width: (NumberConstructor | StringConstructor)[];
height: (NumberConstructor | StringConstructor)[];
radius: (NumberConstructor | StringConstructor)[];
lazyLoad: BooleanConstructor;
iconSize: (NumberConstructor | StringConstructor)[];
showError: {
type: BooleanConstructor;
default: true;
};
errorIcon: {
type: import("vue").PropType<string>;
default: string;
};
iconPrefix: StringConstructor;
showLoading: {
type: BooleanConstructor;
default: true;
};
loadingIcon: {
type: import("vue").PropType<string>;
default: string;
};
}>> & {
onLoad?: ((...args: any[]) => any) | undefined;
onError?: ((...args: any[]) => any) | undefined;
}, {
round: boolean;
showError: boolean;
block: boolean;
lazyLoad: boolean;
errorIcon: string;
showLoading: boolean;
loadingIcon: string;
}>>;
export default Image;
export { imageProps } from './Image';
export type { ImageFit, ImageProps } from './Image';
export type { ImageThemeVars } from './types';
declare module 'vue' {
interface GlobalComponents {
VanImage: typeof Image;
}
}
+10
View File
@@ -0,0 +1,10 @@
import { withInstall } from "../utils/index.mjs";
import _Image from "./Image.mjs";
const Image = withInstall(_Image);
var stdin_default = Image;
import { imageProps } from "./Image.mjs";
export {
Image,
stdin_default as default,
imageProps
};
+1
View File
@@ -0,0 +1 @@
export {};
+4
View File
@@ -0,0 +1,4 @@
import "../../style/base.css";
import "../../badge/index.css";
import "../../icon/index.css";
import "../index.css";
+9
View File
@@ -0,0 +1,9 @@
export type ImageThemeVars = {
imagePlaceholderTextColor?: string;
imagePlaceholderFontSize?: string;
imagePlaceholderBackground?: string;
imageLoadingIconSize?: string;
imageLoadingIconColor?: string;
imageErrorIconSize?: string;
imageErrorIconColor?: string;
};
View File