Browse Source

fix: lint

pull/6997/head
xingyu4j 2 weeks ago
parent
commit
fa195fde8e
  1. 1
      packages/@core/composables/src/__tests__/use-sortable.test.ts
  2. 12
      packages/effects/common-ui/src/components/cropper/cropper.vue
  3. 2
      playground/src/views/examples/cropper/index.vue

1
packages/@core/composables/src/__tests__/use-sortable.test.ts

@ -30,6 +30,7 @@ describe('useSortable', () => {
// Import sortablejs to access the mocked create function // Import sortablejs to access the mocked create function
const Sortable = const Sortable =
// @ts-expect-error - This is a dynamic import
await import('sortablejs/modular/sortable.complete.esm.js'); await import('sortablejs/modular/sortable.complete.esm.js');
// Verify that Sortable.create was called with the correct parameters // Verify that Sortable.create was called with the correct parameters

12
packages/effects/common-ui/src/components/cropper/cropper.vue

@ -40,10 +40,10 @@ type DragAction =
// DOM // DOM
const containerRef = ref<HTMLDivElement | null>(null); const containerRef = ref<HTMLDivElement | null>(null);
const bgImageRef = ref<HTMLImageElement | null>(null); const bgImageRef = ref<HTMLImageElement | null>(null);
const maskRef = ref<HTMLDivElement | null>(null); // const maskRef = ref<HTMLDivElement | null>(null);
const maskViewRef = ref<HTMLDivElement | null>(null); const maskViewRef = ref<HTMLDivElement | null>(null);
const cropperRef = ref<HTMLDivElement | null>(null); const cropperRef = ref<HTMLDivElement | null>(null);
const cropperViewRef = ref<HTMLDivElement | null>(null); // const cropperViewRef = ref<HTMLDivElement | null>(null);
// //
const isCropperVisible = ref<boolean>(false); const isCropperVisible = ref<boolean>(false);
@ -739,7 +739,6 @@ defineExpose({ getCropImage });
<!-- 遮罩层 --> <!-- 遮罩层 -->
<div <div
ref="maskRef"
class="cropper-mask" class="cropper-mask"
:style="{ :style="{
display: isCropperVisible ? 'block' : 'none', display: isCropperVisible ? 'block' : 'none',
@ -773,7 +772,6 @@ defineExpose({ getCropImage });
}" }"
> >
<div <div
ref="cropperViewRef"
class="cropper-view" class="cropper-view"
:style="{ :style="{
inset: `${currentDimension[0]}px ${currentDimension[1]}px ${currentDimension[2]}px ${currentDimension[3]}px`, inset: `${currentDimension[0]}px ${currentDimension[1]}px ${currentDimension[2]}px ${currentDimension[3]}px`,
@ -855,19 +853,21 @@ defineExpose({ getCropImage });
<style scoped> <style scoped>
.cropper-action-wrapper { .cropper-action-wrapper {
@apply box-border flex items-center justify-center; @apply box-border flex items-center justify-center;
background-color: transparent;
/* 马赛克背景 */ /* 马赛克背景 */
background-image: background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%); linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 20px 20px;
background-position: background-position:
0 0, 0 0,
0 10px, 0 10px,
10px -10px, 10px -10px,
-10px 0; -10px 0;
background-color: transparent; background-size: 20px 20px;
} }
.cropper-container { .cropper-container {

2
playground/src/views/examples/cropper/index.vue

@ -132,10 +132,12 @@ const downloadImage = () => {
.ratio-label { .ratio-label {
@apply text-sm font-medium; @apply text-sm font-medium;
} }
/* 主裁剪区域 */ /* 主裁剪区域 */
.cropper-main-wrapper { .cropper-main-wrapper {
@apply flex items-center gap-4; @apply flex items-center gap-4;
} }
.cropper-btn-group { .cropper-btn-group {
@apply flex flex-col gap-2; @apply flex flex-col gap-2;
} }

Loading…
Cancel
Save