fix: ?import

d2/components/d2/admin/layout/header-aside/index.vue

@@ -15,11 +15,13 @@
 </template>
 
 <script>
-import { makeNameByUrl } from 'd2/utils/component.js'
+import { makeNameByUrl, makeClassNameByUrl } from 'd2/utils/component.js'
 import { computed, ref, unref } from 'vue'
 import { cssUnit } from 'd2/utils/css.js'
 import { useCssPosition } from 'd2/use/css-position.js'
 
+console.log(makeClassNameByUrl(import.meta.url))
+
 export default {
   name: makeNameByUrl(import.meta.url),
   setup () {

d2/utils/component.js

@@ -1,5 +1,5 @@
 import { customAlphabet } from 'nanoid'
-import { kebabCase } from 'lodash-es'
+import { kebabCase, camelCase } from 'lodash-es'
 import { pascalCase } from 'd2/utils/string.js'
 import { namespace } from './const.js'
 
@@ -29,10 +29,12 @@ export function makeRandomName () {
  * @returns {string} component name. eg: 'NamespaceFooBar'
  */
 export function makeNameByUrl (url) {
+  console.log('makeNameByUrl', url)
   const base = 'd2/components/'
   if (import.meta.env.DEV) {
     url = url
       .replace(RegExp(`^${window.location.origin}${import.meta.env.BASE_URL}${base}(d2/)?`), '')
+      .replace(/\?import.+$/, '')
       .replace(/\?t=\d+$/, '')
       .replace(/(\/index)?\.(vue|js|jsx)$/, '')
   } else {
@@ -52,3 +54,12 @@ export function makeNameByUrl (url) {
 export function makeClassName (name) {
   return `${namespace}-${kebabCase(name)}`
 }
+
+/**
+ * Format component main class name by component file url
+ * @param {string} url component file url
+ * @returns {string} component name. eg: 'name-space-foo-bar'
+ */
+export function makeClassNameByUrl (url) {
+  return kebabCase(camelCase(makeNameByUrl(url)))
+}