App.vue

<template>
  <t-config-provider :global-config="{ classPrefix: 't' }">
    <t-space direction="vertical" style="width: 100%; text-align: center">
      <t-space>
        <a href="https://tdesign.tencent.com/vue-next/overview" target="_blank">
          <img :src="TDesignLogo" class="logo tdesign" alt="TDesign" />
        </a>
        <a href="https://vitejs.dev/" target="_blank">
          <img :src="ViteLogo" class="logo vite" alt="Vite" />
        </a>
      </t-space>
      <h2>
        Welcome to use
        <t-link size="large" theme="primary" href="https://tdesign.tencent.com/vue-next/overview" target="_blank">
          <template #suffix-icon>
            <jump-icon />
          </template>
          TDesign-vue-next
        </t-link>
        +
        <t-link size="large" theme="primary" href="https://vitejs.dev/" target="_blank">
          <template #suffix-icon>
            <jump-icon />
          </template>
          Vite
        </t-link>
        !
      </h2>

      <h3>
        Experience it quickly using the
        <t-link theme="warning" href="https://tdesign.tencent.com/starter/vue-next/" target="_blank">
          <template #suffix-icon>
            <jump-icon />
          </template>
          TDesign Starter
        </t-link>
        page template.
      </h3>

      <t-space size="24px">
        <t-button theme="primary">
          <template #icon><add-icon /></template>
          新建
        </t-button>
        <t-button variant="outline">
          <template #icon><cloud-upload-icon /></template>
          上传文件
        </t-button>
        <t-button shape="circle" theme="primary">
          <template #icon><discount-icon /></template>
        </t-button>
        <t-button shape="circle" theme="primary">
          <template #icon> <cloud-download-icon /></template>
        </t-button>
        <t-button variant="outline"> 搜索 </t-button>
      </t-space>
      <!-- 1_PascalCase in template works fine -->
      <!-- eslint-disable-next-line vue/component-name-in-template-casing -->
      <EditModal :data="editModal" />
      <!-- 2_kebab-case in template works bad -->
      <create-modal :data="createModal" />
    </t-space>
  </t-config-provider>
</template>

<script setup lang="ts">
import { AddIcon, CloudDownloadIcon, CloudUploadIcon, DiscountIcon, JumpIcon } from 'tdesign-icons-vue-next';
import { ref } from 'vue';

import TDesignLogo from '../public/tdesign-logo.svg';
import ViteLogo from './assets/svg/vite-logo.svg';
// problem there
import CreateModal from './components/create-modal/index.vue';
import EditModal from './components/edit-modal/index.vue';

// same variable name but different case
const editModal = ref({});
const createModal = ref({});
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 3em 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo.tdesign:hover {
  filter: drop-shadow(0 0 2em #194de9);
}

.logo.vite:hover {
  filter: drop-shadow(0 0 2em #bd34fe);
}
</style>