AncTe/HumanBreak
1
1
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-07-27 10:01:46 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: 封装图标定义

Browse Source
This commit is contained in:
unanmed 2025-07-23 18:51:24 +08:00
parent 4867ffdfeb
commit ebe48eab8f
1 changed files with 366 additions and 772 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

548
packages-user/client-modules/src/render/components/icons.tsx
View File

@ -1,6 +1,14 @@
import { DefaultProps, ElementLocator, GraphicPropsBase } from '@motajs/render';
import { SetupComponentOptions } from '@motajs/system-ui';
import { computed, defineComponent, onMounted, Ref, ref, watch } from 'vue';
import {
computed,
defineComponent,
DefineSetupFnComponent,
onMounted,
Ref,
ref,
watch
} from 'vue';
export interface IconsProps extends DefaultProps<GraphicPropsBase> {
loc: ElementLocator;
@ -55,12 +63,39 @@ function adjustPath(
};
}
export const RollbackIcon = defineComponent<IconsProps>(props => {
function defineIcon<T extends IconsProps>(
aspect: number,
pathDef: PathFn,
props: SetupComponentOptions<T> = iconsProps
): DefineSetupFnComponent<T> {
return defineComponent<T>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
const generatePath = adjustPath(aspect, path, pathDef);
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
}, props);
}
export const RollbackIcon = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const arc = width / 10;
const arrow = width / 10;
@ -80,35 +115,9 @@ export const RollbackIcon = defineComponent<IconsProps>(props => {
path.lineTo(end + arrow, top + arrow);
path.moveTo(left, top);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const RetweetIcon = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const RetweetIcon = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const arc = width / 10;
const arrow = width / 10;
@ -128,35 +137,9 @@ export const RetweetIcon = defineComponent<IconsProps>(props => {
path.lineTo(right - arrow, top + arrow);
path.moveTo(left, top);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const ViewMapIcon = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const ViewMapIcon = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const left = ox + width / 5;
const top = oy + height / 5;
@ -169,37 +152,10 @@ export const ViewMapIcon = defineComponent<IconsProps>(props => {
path.lineTo(cx, bottom);
path.moveTo(left, cy);
path.lineTo(right, cy);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const DanmakuIcon = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const DanmakuIcon = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const left = ox + width / 5;
const bottom = oy + height - height / 5;
@ -213,35 +169,9 @@ export const DanmakuIcon = defineComponent<IconsProps>(props => {
path.lineTo(left - width / 24, bottom - height / 36);
path.closePath();
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const ReplayIcon = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const ReplayIcon = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const arc = width / 10;
const left = ox + width / 5;
@ -268,35 +198,9 @@ export const ReplayIcon = defineComponent<IconsProps>(props => {
path.lineTo(right, cy);
path.lineTo(right + arc, cy + arc);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const NumpadIcon = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const NumpadIcon = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const left = ox + width / 5;
const top = oy + height / 5;
@ -309,35 +213,9 @@ export const NumpadIcon = defineComponent<IconsProps>(props => {
path2.ellipse(cx, cy, width / 9, height / 6, 0, 0, Math.PI * 2);
path.addPath(path2);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const PlayIcon = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const PlayIcon = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const left = ox + width / 5;
const top = oy + height / 5;
@ -348,36 +226,9 @@ export const PlayIcon = defineComponent<IconsProps>(props => {
path.lineTo(left, bottom);
path.closePath();
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
fill
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const PauseIcon = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const PauseIcon = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const cx = ox + width / 2;
const top = oy + height / 5;
@ -387,35 +238,9 @@ export const PauseIcon = defineComponent<IconsProps>(props => {
path.moveTo(cx + width / 5, top);
path.lineTo(cx + width / 5, bottom);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const DoubleArrow = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const DoubleArrow = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const path2 = new Path2D();
const left = ox + width / 5;
@ -434,36 +259,9 @@ export const DoubleArrow = defineComponent<IconsProps>(props => {
path2.closePath();
path.addPath(path2);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
fill
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const StepForward = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const StepForward = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const path2 = new Path2D();
const left = ox + width / 5;
@ -478,36 +276,9 @@ export const StepForward = defineComponent<IconsProps>(props => {
path2.lineTo(right, bottom);
path.addPath(path2);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
fill
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const SoundVolume = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const SoundVolume = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const left = ox + width / 8;
const top = oy + height / 5;
@ -534,35 +305,9 @@ export const SoundVolume = defineComponent<IconsProps>(props => {
);
path.arc(cx, cy, width / 3, start, end);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const Fullscreen = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const Fullscreen = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const left = ox + width / 4;
const right = ox + width - width / 4;
@ -597,35 +342,9 @@ export const Fullscreen = defineComponent<IconsProps>(props => {
path.lineTo(right, bottom);
path.lineTo(right - width / 8, bottom);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const ExitFullscreen = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const ExitFullscreen = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const left = ox + width / 4;
const right = ox + width - width / 4;
@ -660,35 +379,9 @@ export const ExitFullscreen = defineComponent<IconsProps>(props => {
path.lineTo(right - width / 6, bottom - height / 6);
path.lineTo(right - width / 6, bottom - height / 24);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const ArrowLeftTailless = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const ArrowLeftTailless = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const left = ox + width / 4;
const right = ox + width - width / 4;
@ -699,35 +392,9 @@ export const ArrowLeftTailless = defineComponent<IconsProps>(props => {
path.lineTo(left + width / 4, (top + right) / 2);
path.lineTo(right, bottom);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const ArrowRightTailless = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const ArrowRightTailless = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const left = ox + width / 4;
const right = ox + width - width / 4;
@ -738,35 +405,9 @@ export const ArrowRightTailless = defineComponent<IconsProps>(props => {
path.lineTo(right - width / 4, (top + right) / 2);
path.lineTo(left, bottom);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const ArrowUpTailless = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const ArrowUpTailless = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const left = ox + width / 4;
const right = ox + width - width / 4;
@ -777,35 +418,9 @@ export const ArrowUpTailless = defineComponent<IconsProps>(props => {
path.lineTo((left + right) / 2, top + height / 4);
path.lineTo(right, bottom);
return path;
});
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
export const ArrowDownTailless = defineComponent<IconsProps>(props => {
const path = ref<Path2D>();
const width = computed(() => props.loc[2] ?? 200);
const height = computed(() => props.loc[3] ?? 200);
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
export const ArrowDownTailless = defineIcon(1, (ox, oy, width, height) => {
const path = new Path2D();
const left = ox + width / 4;
const right = ox + width - width / 4;
@ -816,25 +431,4 @@ export const ArrowDownTailless = defineComponent<IconsProps>(props => {
path.lineTo((left + right) / 2, bottom - height / 4);
path.lineTo(right, top);
return path;
});
watch(props, () => {
generatePath(width.value, height.value);
});
onMounted(() => {
generatePath(width.value, height.value);
});
return () => {
return (
<g-path
loc={props.loc}
path={path.value}
stroke
lineJoin="round"
lineCap="round"
></g-path>
);
};
}, iconsProps);
});