feat: cache

src/assets/base.scss

@@ -1,3 +1,12 @@
 body{
   font-size: .12rem;
+}
+*{
+  margin: 0; padding: 0;
+}
+ul,dl{
+  list-style: none;
+}
+h1,h2,h3,h4,h5,h6, b{
+  font-weight: normal;
 }

src/auto-import.d.ts

@@ -0,0 +1,78 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getCurrentWatcher: typeof import('vue')['getCurrentWatcher']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const isShallow: typeof import('vue')['isShallow']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

src/views/commodity-detail/components/info-table.vue

@@ -0,0 +1,18 @@
+<template>
+  <div id="info-table">
+    <ul class="rounded-[.08rem]" style="border: 1px solid #ddd;">
+      <li class="h-8 leading-8 pl-2" style="border-bottom: 1px solid #ddd;"><span class="">规格</span><b>约6-00g</b></li>
+      <li><span>规格</span><b>约6-00g</b></li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+#info-table{
+  
+}
+</style>

src/views/commodity-detail/components/review-single.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="review-single">
+    <h3 class="flex items-center ml-2 text-sm">
+      <img class="w-8 h-8 rounded-full" src="" alt="">
+      <div class="ml-1">
+        <p class="">饭**子</p>
+        <p class="mt-0.5 text-xs color-[#666]">2025.08.23</p>
+      </div>
+    </h3>
+    <div class="review-content mt-3">
+      <p class="pl-2">公司大丰收东方闪电防守打法四大分三大胜多负少的</p>
+      <p class="flex items-center mt-2">
+        <img class="w-16 h-16 mr-1 rounded-[4px]" src="" alt="" v-for="(item, index) in list" :key="index" />
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const list = ref(['',''])
+</script>
+
+<style>
+
+</style>

src/views/commodity-detail/index.vue

@@ -1,30 +1,83 @@
 <template>
   <div id="commodity-detail">
-    <header class="h-20">
+    <header class="h-70 bg-black">
       轮播图
     </header>
     <main>
       <div class="detail-info wrap">
-        <h3>陕西珍珠首饰项链</h3>
+        <h2 class="text-2xl color-[#000]">陕西珍珠首饰项链</h2>
-        <h4>副标题</h4>
+        <h4 class="mt-2 text-sm">副标题</h4>
-        <ul>
+        <ul class="detail-wrap">
           <li><span>配送</span> <em>立即下单，预计最快今天23:00发货</em></li>
-          <li><span>服务</span> <b>7天无理由退款</b></li>
+          <li><span>服务</span> <button>7天无理由退款</button></li>
         </ul>
       </div>
+      <div class="review-info wrap">
+        <h3 class="wrap-title"><b>用户评价(45.6万+)</b><span>全部评价</span></h3>
+        <div class="mt-5">
+          <review-single />
+        </div>
+      </div>
+      <div class="wrap">
+        <h3 class="wrap-title"><b>商品详情</b><span>查看全部信息</span></h3>
+        <info-table />
+      </div>
     </main>
   </div>
 </template>
 
 <script lang="ts" setup>
+import reviewSingle from './components/review-single.vue'
+import infoTable from './components/info-table.vue'
 </script>
 
 <style scope lang="scss">
 #commodity-detail{
+  background: #f2f2f2;
   .wrap{
-    border-radius: .2rem;
+    margin: .08rem .12rem; 
-    padding: .1rem;
+    border-radius: .12rem;
+    padding: .16rem;
     background: #fff;
+    .wrap-title{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      b{
+        font-size: .16rem;
+        color: #000;
+      }
+      span{
+        font-size: .12rem;
+        color: #777;
+      }
+    }
+  }
+  .detail-info{
+    li{
+      margin-top: .12rem;
+      span{
+        margin-right: .1rem;
+        color: #888;
+      }
+      em{
+        color: #000;
+        font-style: normal;
+      }
+      button{
+        border: 1px solid #aaa;
+        border-radius: .02rem;
+        background: #fff;
+        padding: .02rem .04rem;
+      }
+    }
+  }
+  .review-info{
+    h3{
+      span{
+
+      }
+    }
   }
 }
 </style>

vite.config.ts

@@ -3,6 +3,7 @@ import UnoCSS from 'unocss/vite'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vite.dev/config/
@@ -11,6 +12,13 @@ export default defineConfig({
     UnoCSS(),
     vue(),
     vueDevTools(),
+    AutoImport({
+      imports: [
+        'vue',
+        'vue-router',
+      ],
+      dts: 'src/auto-import.d.ts'
+    }),
   ],
   resolve: {
     alias: {