style: update scroll-cache demo UI

Author: cwandev

build/vite/optimize.ts

@@ -23,6 +23,7 @@ const include = [
   'vant/es/tabbar/style/index',
   'vant/es/tabbar-item/style/index',
   'vant/es/list/style/index',
+  'vant/es/text-ellipsis/style/index',
   'unplugin-vue-router/runtime',
   'unplugin-vue-router/data-loaders',
   'unplugin-vue-router/data-loaders/basic',

src/locales/en-US.json

@@ -45,7 +45,10 @@
     "label": "The current component will be cached"
   },
   "scrollCache": {
-    "listItem": "Slide freely. When you get back, the roll position will still be there"
+    "sectionTitle": "Section title",
+    "sectionText": "Section text text text text text text text text text text",
+    "finished": "Already at the bottom ~",
+    "loading": "Loading..."
   },
   "login": {
     "login": "Sign In",

src/locales/zh-CN.json

@@ -45,7 +45,10 @@
     "label": "当前组件将会被缓存"
   },
   "scrollCache": {
-    "listItem": "随便滑滑,离开再回来时位置会保留不变哦"
+    "sectionTitle": "段落标题",
+    "sectionText": "段落内容段落内容段落内容段落内容段落内容段落内容",
+    "finished": "已经到底啦 ~",
+    "loading": "加载中..."
   },
   "login": {
     "login": "登录",

src/pages/scroll-cache/index.vue

@@ -3,9 +3,9 @@ defineOptions({
   name: 'ScrollCache',
 })
 
-const list = ref([])
 const loading = ref(false)
 const finished = ref(false)
+const list = ref([])
 
 function onLoad() {
   setTimeout(() => {
@@ -39,24 +39,33 @@ onBeforeRouteLeave(() => {
   <van-list
     v-model:loading="loading"
     :finished="finished"
-    finished-text="已经到底啦 ~"
-    loading-text="加载中..."
+    :finished-text="$t('scrollCache.finished')"
+    :loading-text="$t('scrollCache.loading')"
     @load="onLoad"
   >
-    <van-cell
-      v-for="(item, index) in list"
-      :key="index"
-      :border="false"
-      class="mb-8 rounded-12"
-    >
-      <template #title>
-        {{ $t('scrollCache.listItem') }}
-      </template>
+    <ul class="space-y-10">
+      <li v-for="item in list" :key="item" class="p-3 flex gap-12">
+        <div class="shrink-0">
+          <div class="rounded-full bg-gray-500/20 flex h-48 w-48 items-center justify-center overflow-hidden">
+            <span class="text-[16px] text-zinc-600 tabular-nums dark:text-zinc-400"> {{ item }} </span>
+          </div>
+        </div>
+
+        <div class="flex-1 min-w-0">
+          <div class="mb-2 flex flex-row gap-1 w-full justify-between">
+            <h3 class="text-[16px] text-zinc-600 font-semibold tracking-tight w-1/2 dark:text-white">
+              <van-text-ellipsis :content="`${$t('scrollCache.sectionTitle')}`" />
+            </h3>
+
+            <time class="text-[12px] text-zinc-400 tabular-nums">2025-05-16</time>
+          </div>
 
-      <template #value>
-        {{ item }}
-      </template>
-    </van-cell>
+          <p class="text-[14px] text-zinc-500">
+            <van-text-ellipsis :rows="2" :content="$t('scrollCache.sectionText')" />
+          </p>
+        </div>
+      </li>
+    </ul>
   </van-list>
 </template>
 

src/types/components.d.ts

@@ -32,5 +32,6 @@ declare module 'vue' {
     VanSwitch: typeof import('vant/es')['Switch']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']
+    VanTextEllipsis: typeof import('vant/es')['TextEllipsis']
   }
 }

uno.config.ts

@@ -13,7 +13,7 @@ const BASE_FONT_SIZE = 4
 
 export default defineConfig({
   shortcuts: [
-    ['btn', 'px-6 py-3 rounded-1 border-none inline-block bg-green-400 text-white cursor-pointer outline-hidden hover:bg-green-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    ['btn', 'px-6 py-3 rounded-4 border-none inline-block bg-green-400 text-white cursor-pointer outline-hidden hover:bg-green-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
   ],
   presets: [
     presetWind4({
@@ -28,6 +28,9 @@ export default defineConfig({
       scale: 1.2,
     }),
   ],
+  postprocess: [
+    createRemToPxProcessor(BASE_FONT_SIZE),
+  ],
   transformers: [
     transformerDirectives(),
     transformerVariantGroup(),