docs: 优秀案例

docs/.vitepress/composables/cases.ts

@@ -0,0 +1,25 @@
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+
+export type CaseData = {
+  name: string
+  image: string
+  description?: string
+}
+
+const data = ref<CaseData[]>([])
+
+export function useCaseData() {
+  const data = [
+    {
+      name: '调剂宝',
+      description: '一个专业的调剂助手，帮助你找到最适合自己的调剂方案。',
+      image:
+        'https://private-user-images.githubusercontent.com/45726436/455309534-d6ae0ca0-9b42-4c01-8024-90f3d9690765.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTAwNDA4MjQsIm5iZiI6MTc1MDA0MDUyNCwicGF0aCI6Ii80NTcyNjQzNi80NTUzMDk1MzQtZDZhZTBjYTAtOWI0Mi00YzAxLTgwMjQtOTBmM2Q5NjkwNzY1LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA2MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNjE2VDAyMjIwNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJiMTBjOWIwYmY3OTVmMTBkZmY1ZjM3MjhhZmQ0OTc4NmRkMjllZDM2MzMwMmQyOGYyMTFiNmU3MzE3N2FhMmMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.6NIPLDSN3n1LFQTSfynFOIa66DGh3QtIgSkx9zlEf54',
+    },
+  ]
+
+  return {
+    data,
+  }
+}

docs/.vitepress/theme/index.ts

@@ -8,6 +8,9 @@ import HomeStar from './components/HomeStar.vue'
 import NavBarTitleAfter from './components/NavBarTitleAfter.vue'
 import FreshImage from './components/FreshImage.vue'
 
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
 export default {
   extends: DefaultTheme,
   Layout: () => {
@@ -20,5 +23,6 @@ export default {
   enhanceApp({ app, router, siteData }) {
     // ...
     app.component('FreshImage', FreshImage)
+    app.use(ElementPlus)
   },
 } satisfies Theme

docs/advanced/showcase/showcase.md

@@ -0,0 +1,63 @@
+# ⭐ 优秀案例
+
+我们非常欢迎大家一起贡献优秀的案例，欢迎在此 [issue](https://github.com/feige996/unibest/issues/139) 提交案例。
+
+`unibest` 已被很多公司和团队在生产环境使用，下面是一些优秀的案例：
+
+<script setup>
+   import bairun from './佰润.png'
+   import jinhuopingtai from './进货平台.png'
+   import chengzhanggui from './橙掌柜.png'
+const  cases = [
+    {
+        name: '佰润', 
+        desc: '月销200w+',  
+        image: bairun,
+    },
+    {
+        name: '进货平台', 
+        desc: '月销200w+',  
+        image: jinhuopingtai,
+    },
+    {
+        name: '橙掌柜', 
+        desc: '月销200w+',  
+        image: chengzhanggui,
+    },
+]
+</script>
+
+<div class="cases-container">
+  <el-card v-for="(item, index) in cases" :key="index" shadow="hover">
+    <template #header>
+      <span class="case-title">{{ item.name }}</span>
+      <span class="case-desc">{{ item.desc }}</span>
+    </template>
+    <el-image :src="item.image" />
+  </el-card>
+</div>
+
+<style scoped>
+.cases-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+  margin: 20px 0;
+}
+
+.case-title {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.case-desc {
+  margin-left: 10px;
+  font-size: 14px;
+  color: #999;
+}
+
+:deep(.el-card__body .el-image) {
+  width: 100%;
+  border-radius: 4px;
+}
+</style>

package.json

@@ -110,6 +110,7 @@
     "@tanstack/vue-query": "^5.62.16",
     "abortcontroller-polyfill": "^1.7.8",
     "dayjs": "1.11.10",
+    "element-plus": "^2.10.2",
     "pinia": "2.0.36",
     "pinia-plugin-persistedstate": "3.2.1",
     "qs": "6.5.3",