diff --git a/exam-vue/src/components/PanThumb/index.vue b/exam-vue/src/components/PanThumb/index.vue
new file mode 100644
index 0000000..a970af0
--- /dev/null
+++ b/exam-vue/src/components/PanThumb/index.vue
@@ -0,0 +1,95 @@
+<!--
+  @description 头像展示组件，带有悬停效果的圆形图片展示
+  @date 20260622
+-->
+<template>
+  <div
+    :style="{ height: height, width: width }"
+    class="pan-item"
+    :class="{ 'pan-item--hoverable': hoverable }"
+  >
+    <div class="pan-info">
+      <div class="pan-info-roles-container">
+        <slot />
+      </div>
+    </div>
+    <img :src="image" class="pan-thumb" alt="avatar">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PanThumb',
+  props: {
+    image: {
+      type: String,
+      required: true
+    },
+    height: {
+      type: String,
+      required: true
+    },
+    width: {
+      type: String,
+      required: true
+    },
+    hoverable: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pan-item {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  cursor: default;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+
+  &--hoverable:hover {
+    .pan-info {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}
+
+.pan-info {
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+  opacity: 0;
+  transition: all 0.35s ease-in-out;
+  transform: translate3d(0, 0, 0);
+
+  .pan-info-roles-container {
+    padding: 20px;
+    text-align: center;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+.pan-thumb {
+  width: 100%;
+  height: 100%;
+  background-position: center center;
+  background-size: cover;
+  border-radius: 50%;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: 95% 40%;
+  transition: all 0.35s ease-in-out;
+  object-fit: cover;
+}
+</style>
diff --git a/exam-vue/vite.config.mjs b/exam-vue/vite.config.mjs
new file mode 100644
index 0000000..93c5398
--- /dev/null
+++ b/exam-vue/vite.config.mjs
@@ -0,0 +1,69 @@
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const resolve = (dir) => path.resolve(__dirname, dir)
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+
+  return {
+    plugins: [
+      vue(),
+      createSvgIconsPlugin({
+        iconDirs: [resolve('src/icons/svg')],
+        symbolId: 'icon-[name]'
+      })
+    ],
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    },
+    define: {
+      'process.env': {}
+    },
+    server: {
+      port: 9527,
+      open: true
+    },
+    build: {
+      outDir: '../exam-api/src/main/resources/static',
+      emptyOutDir: false,
+      assetsDir: 'static',
+      sourcemap: false,
+      chunkSizeWarningLimit: 1000,
+      rollupOptions: {
+        onwarn(warning, warn) {
+          // 忽略第三方库中的 /*#__PURE__*/ 注释警告
+          if (warning.code === 'INVALID_ANNOTATION') return
+          warn(warning)
+        },
+        output: {
+          chunkFileNames: 'static/js/[name]-[hash].js',
+          entryFileNames: 'static/js/[name]-[hash].js',
+          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
+          manualChunks(id) {
+            if (id.includes('node_modules')) {
+              if (id.includes('element-plus')) {
+                return 'chunk-elementPlus'
+              }
+              return 'chunk-libs'
+            }
+          }
+        }
+      }
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern',
+          silenceDeprecations: ['import']
+        }
+      }
+    }
+  }
+})