chore(frontend): introduce prettier + eslint and prune unused code
- Add Prettier 3 with prettier-plugin-organize-imports (sorts/removes unused imports) - Add ESLint 10 flat config with typescript-eslint + eslint-plugin-vue + eslint-config-prettier - Add root scripts: format, format:check, lint, lint:fix - Reformat 257 files across admin-web, ops-web, desktop-client, packages - Remove unused locals/exports flagged by --noUnusedLocals/--noUnusedParameters - Fix duplicate localTabLabel key, surrogate-pair regex u-flag, NBSP literal in regex - Skip server/ (Go) and apps/browser-extension/ (deprecated per ADR) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,96 +1,105 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type Component, type CSSProperties } from "vue";
|
||||
import { DownOutlined } from "@ant-design/icons-vue";
|
||||
import { DownOutlined } from '@ant-design/icons-vue'
|
||||
import {
|
||||
computed,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
watch,
|
||||
type Component,
|
||||
type CSSProperties,
|
||||
} from 'vue'
|
||||
|
||||
type EditorActionMenuItem = {
|
||||
key: string;
|
||||
label: string;
|
||||
icon?: Component;
|
||||
danger?: boolean;
|
||||
disabled?: boolean;
|
||||
active?: boolean;
|
||||
children?: EditorActionMenuItem[];
|
||||
};
|
||||
key: string
|
||||
label: string
|
||||
icon?: Component
|
||||
danger?: boolean
|
||||
disabled?: boolean
|
||||
active?: boolean
|
||||
children?: EditorActionMenuItem[]
|
||||
}
|
||||
|
||||
type EditorActionMenuGroup = {
|
||||
key: string;
|
||||
columns?: number;
|
||||
items: EditorActionMenuItem[];
|
||||
};
|
||||
key: string
|
||||
columns?: number
|
||||
items: EditorActionMenuItem[]
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
x: number;
|
||||
y: number;
|
||||
groups: EditorActionMenuGroup[];
|
||||
variant?: "tile" | "inline";
|
||||
minWidth?: string;
|
||||
maxWidth?: string;
|
||||
}>();
|
||||
x: number
|
||||
y: number
|
||||
groups: EditorActionMenuGroup[]
|
||||
variant?: 'tile' | 'inline'
|
||||
minWidth?: string
|
||||
maxWidth?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [key: string];
|
||||
}>();
|
||||
select: [key: string]
|
||||
}>()
|
||||
|
||||
const menuRef = ref<HTMLElement | null>(null);
|
||||
const menuRef = ref<HTMLElement | null>(null)
|
||||
const frame = ref({
|
||||
x: props.x,
|
||||
y: props.y,
|
||||
});
|
||||
})
|
||||
|
||||
const resolvedVariant = computed(() => props.variant ?? "inline");
|
||||
const resolvedVariant = computed(() => props.variant ?? 'inline')
|
||||
|
||||
const menuStyle = computed<CSSProperties>(() => {
|
||||
const style: CSSProperties = {
|
||||
left: `${frame.value.x}px`,
|
||||
top: `${frame.value.y}px`,
|
||||
};
|
||||
}
|
||||
|
||||
if (props.minWidth) {
|
||||
style.minWidth = props.minWidth;
|
||||
style.minWidth = props.minWidth
|
||||
}
|
||||
|
||||
if (props.maxWidth) {
|
||||
style.maxWidth = props.maxWidth;
|
||||
style.maxWidth = props.maxWidth
|
||||
}
|
||||
|
||||
return style;
|
||||
});
|
||||
return style
|
||||
})
|
||||
|
||||
function clamp(value: number, min: number, max: number): number {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
return Math.min(Math.max(value, min), max)
|
||||
}
|
||||
|
||||
function syncMenuFrame(): void {
|
||||
void nextTick(() => {
|
||||
const menu = menuRef.value;
|
||||
const menu = menuRef.value
|
||||
if (!menu) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
const offset = 16;
|
||||
const offset = 16
|
||||
frame.value = {
|
||||
x: clamp(props.x, offset, Math.max(offset, window.innerWidth - menu.offsetWidth - offset)),
|
||||
y: clamp(props.y, offset, Math.max(offset, window.innerHeight - menu.offsetHeight - offset)),
|
||||
};
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleWindowResize(): void {
|
||||
syncMenuFrame();
|
||||
syncMenuFrame()
|
||||
}
|
||||
|
||||
function handleSelect(item: EditorActionMenuItem): void {
|
||||
if (item.disabled) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
|
||||
emit("select", item.key);
|
||||
emit('select', item.key)
|
||||
}
|
||||
|
||||
function resolveGroupStyle(group: EditorActionMenuGroup): CSSProperties {
|
||||
return {
|
||||
gridTemplateColumns: `repeat(${Math.max(group.columns ?? group.items.length, 1)}, minmax(0, 1fr))`,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
@@ -103,23 +112,23 @@ watch(
|
||||
variant: resolvedVariant.value,
|
||||
}),
|
||||
() => {
|
||||
syncMenuFrame();
|
||||
syncMenuFrame()
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
flush: "post",
|
||||
flush: 'post',
|
||||
},
|
||||
);
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("resize", handleWindowResize);
|
||||
syncMenuFrame();
|
||||
});
|
||||
window.addEventListener('resize', handleWindowResize)
|
||||
syncMenuFrame()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", handleWindowResize);
|
||||
});
|
||||
window.removeEventListener('resize', handleWindowResize)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
Reference in New Issue
Block a user