diff --git a/src/footer/__test__/__snapshots__/demo.test.jsx.snap b/src/footer/__test__/__snapshots__/demo.test.jsx.snap
index 259bf8c23..1e25625bd 100644
--- a/src/footer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/footer/__test__/__snapshots__/demo.test.jsx.snap
@@ -4,16 +4,13 @@ exports[`Footer > Footer baseVue demo works fine 1`] = `
 <div
   class="t-footer"
 >
-  <!-- logo -->
-  
-  <!-- text -->
-  <!--v-if-->
+  <!---->
+  <!---->
   <div
     class="t-footer__text"
   >
     Copyright © 2019-2023 TDesign.All Rights Reserved.
   </div>
-  
 </div>
 `;
 
@@ -29,9 +26,7 @@ exports[`Footer > Footer linkVue demo works fine 1`] = `
     <div
       class="t-footer"
     >
-      <!-- logo -->
-      
-      <!-- text -->
+      <!---->
       <div
         class="t-footer__link-list"
       >
@@ -43,7 +38,7 @@ exports[`Footer > Footer linkVue demo works fine 1`] = `
         >
           底部链接
         </a>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -52,7 +47,6 @@ exports[`Footer > Footer linkVue demo works fine 1`] = `
       >
         Copyright © 2021-2031 TD.All Rights Reserved.
       </div>
-      
     </div>
   </div>
   <div
@@ -61,9 +55,7 @@ exports[`Footer > Footer linkVue demo works fine 1`] = `
     <div
       class="t-footer"
     >
-      <!-- logo -->
-      
-      <!-- text -->
+      <!---->
       <div
         class="t-footer__link-list"
       >
@@ -88,7 +80,7 @@ exports[`Footer > Footer linkVue demo works fine 1`] = `
         >
           底部链接
         </a>
-        <!--v-if-->
+        <!---->
         
         
       </div>
@@ -97,7 +89,6 @@ exports[`Footer > Footer linkVue demo works fine 1`] = `
       >
         Copyright © 2021-2031 TD.All Rights Reserved.
       </div>
-      
     </div>
   </div>
   
@@ -113,7 +104,6 @@ exports[`Footer > Footer logoVue demo works fine 1`] = `
   <div
     class="t-footer"
   >
-    <!-- logo -->
     <a
       class="t-footer__logo"
     >
@@ -166,6 +156,8 @@ exports[`Footer > Footer logoVue demo works fine 1`] = `
         品牌名称
       </span>
     </a>
+    <!---->
+    <!---->
   </div>
   
 </div>
@@ -205,16 +197,13 @@ exports[`Footer > Footer mobileVue demo works fine 1`] = `
       <div
         class="t-footer"
       >
-        <!-- logo -->
-        
-        <!-- text -->
-        <!--v-if-->
+        <!---->
+        <!---->
         <div
           class="t-footer__text"
         >
           Copyright © 2019-2023 TDesign.All Rights Reserved.
         </div>
-        
       </div>
       
     </div>
@@ -244,9 +233,7 @@ exports[`Footer > Footer mobileVue demo works fine 1`] = `
         <div
           class="t-footer"
         >
-          <!-- logo -->
-          
-          <!-- text -->
+          <!---->
           <div
             class="t-footer__link-list"
           >
@@ -258,7 +245,7 @@ exports[`Footer > Footer mobileVue demo works fine 1`] = `
             >
               底部链接
             </a>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -267,7 +254,6 @@ exports[`Footer > Footer mobileVue demo works fine 1`] = `
           >
             Copyright © 2021-2031 TD.All Rights Reserved.
           </div>
-          
         </div>
       </div>
       <div
@@ -276,9 +262,7 @@ exports[`Footer > Footer mobileVue demo works fine 1`] = `
         <div
           class="t-footer"
         >
-          <!-- logo -->
-          
-          <!-- text -->
+          <!---->
           <div
             class="t-footer__link-list"
           >
@@ -303,7 +287,7 @@ exports[`Footer > Footer mobileVue demo works fine 1`] = `
             >
               底部链接
             </a>
-            <!--v-if-->
+            <!---->
             
             
           </div>
@@ -312,7 +296,6 @@ exports[`Footer > Footer mobileVue demo works fine 1`] = `
           >
             Copyright © 2021-2031 TD.All Rights Reserved.
           </div>
-          
         </div>
       </div>
       
@@ -341,7 +324,6 @@ exports[`Footer > Footer mobileVue demo works fine 1`] = `
       <div
         class="t-footer"
       >
-        <!-- logo -->
         <a
           class="t-footer__logo"
         >
@@ -394,6 +376,8 @@ exports[`Footer > Footer mobileVue demo works fine 1`] = `
             品牌名称
           </span>
         </a>
+        <!---->
+        <!---->
       </div>
       
       
diff --git a/src/footer/__test__/index.test.jsx b/src/footer/__test__/index.test.jsx
index c7fea2b3f..0372164e1 100644
--- a/src/footer/__test__/index.test.jsx
+++ b/src/footer/__test__/index.test.jsx
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
-import Footer from '../footer.vue';
+import Footer from '../footer';
 
 describe('footer', () => {
   describe('props', () => {
diff --git a/src/footer/footer.tsx b/src/footer/footer.tsx
new file mode 100644
index 000000000..2dc3aea85
--- /dev/null
+++ b/src/footer/footer.tsx
@@ -0,0 +1,71 @@
+import { defineComponent } from 'vue';
+import TImage from '../image';
+import FooterProps from './props';
+import config from '../config';
+import { usePrefixClass } from '../hooks/useClass';
+
+const { prefix } = config;
+const name = `${prefix}-footer`;
+export default defineComponent({
+  name,
+  props: FooterProps,
+  setup(props) {
+    const footerClass = usePrefixClass('footer');
+    const footerLinkClass = usePrefixClass('footer__link');
+
+    const renderLogo = () => {
+      const { logo } = props;
+      if (!logo) {
+        return;
+      }
+
+      return (
+        <a class={`${footerClass.value}__logo`} href={logo.url} target={logo.target}>
+          {logo.icon && <TImage class={`${footerClass.value}__icon`} src={logo.icon} />}
+          {logo.title && <span class={`${footerClass.value}__title`}>{logo.title}</span>}
+        </a>
+      );
+    };
+
+    const renderText = () => {
+      if (props.logo) {
+        return;
+      }
+
+      return <div class={`${footerClass.value}__text`}>{props.text}</div>;
+    };
+
+    const renderLink = () => {
+      const { links, logo } = props;
+      const linksLength = links.length - 1;
+      if (logo || linksLength < 0) {
+        return;
+      }
+
+      return (
+        <div class={`${footerLinkClass.value}-list`}>
+          {links.map((link, index) => {
+            return (
+              <>
+                <a href={link.url} target={link.target} class={`${footerLinkClass.value}-item`}>
+                  {link.name}
+                </a>
+                {linksLength !== index && <div class={`${footerLinkClass.value}-line`}>|</div>}
+              </>
+            );
+          })}
+        </div>
+      );
+    };
+
+    return () => {
+      return (
+        <div class={footerClass.value}>
+          {renderLogo()}
+          {renderLink()}
+          {renderText()}
+        </div>
+      );
+    };
+  },
+});
diff --git a/src/footer/footer.vue b/src/footer/footer.vue
deleted file mode 100644
index 3b3b5a4f0..000000000
--- a/src/footer/footer.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div :class="name">
-    <!-- logo -->
-    <template v-if="logo">
-      <a :href="logo.url" :target="logo.target" :class="`${name}__logo`">
-        <t-image v-if="logo.icon" :src="logo.icon" :class="`${name}__icon`" />
-        <span v-if="logo.title" :class="`${name}__title`">
-          {{ logo.title }}
-        </span>
-      </a>
-    </template>
-    <!-- text -->
-    <template v-else>
-      <div v-if="links && links.length > 0" :class="`${name}__link-list`">
-        <template v-for="(link, index) in links" :key="link.name">
-          <a :href="link.url" :target="link.target" :class="`${name}__link-item`">
-            {{ link.name }}
-          </a>
-          <div v-if="index !== links.length - 1" :class="`${name}__link-line`">|</div>
-        </template>
-      </div>
-      <div :class="`${name}__text`">{{ text }}</div>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { toRefs, defineComponent } from 'vue';
-import TImage from '../image';
-import FooterProps from './props';
-import config from '../config';
-
-const { prefix } = config;
-const name = `${prefix}-footer`;
-
-export default defineComponent({
-  name,
-  components: { TImage },
-  props: FooterProps,
-  setup(props) {
-    return {
-      name,
-      ...toRefs(props),
-    };
-  },
-});
-</script>
diff --git a/src/footer/index.ts b/src/footer/index.ts
index f374d5526..56086979a 100644
--- a/src/footer/index.ts
+++ b/src/footer/index.ts
@@ -1,4 +1,4 @@
-import Footer from './footer.vue';
+import Footer from './footer';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';
diff --git a/src/hooks/useClass.ts b/src/hooks/useClass.ts
new file mode 100644
index 000000000..d7e578787
--- /dev/null
+++ b/src/hooks/useClass.ts
@@ -0,0 +1,10 @@
+import { computed, ref } from 'vue';
+import { useConfig } from '../config-provider/useConfig';
+
+export function usePrefixClass(componentName?: string) {
+  const { classPrefix } = useConfig('classPrefix');
+
+  return computed(() => {
+    return componentName ? `${classPrefix.value}-${componentName}` : classPrefix.value;
+  });
+}