add:新增接口代理

.env

@@ -0,0 +1,3 @@
+VITE_ENABLE_MOCK=false
+VITE_API_PREFIX=/api
+VITE_PROXY_ENDPOINT=http://localhost:8000

.env.development

@@ -0,0 +1,4 @@
+VITE_ENABLE_MOCK=false
+VITE_API_PREFIX=/api
+VITE_PROXY_ENDPOINT=https://bright.yilibili.com
+

.env.example

@@ -0,0 +1 @@
+VITE_ENABLE_MOCK=true

pet-manual/components/CardList.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface ListItem {
+  img: string
+  title: string
+  desc: string
+  time: string
+}
+const props = defineProps<{
+  cardList: ListItem[]
+}>()
+</script>
+
+<template>
+  <view
+    v-for="(item, index) in props.cardList" :key="index" class="bg-[white] rounded-md shadow-lg mx-4 mb-4 w-[calc(100% - 32px)] mt-3"
+  >
+    <view class="flex">
+      <image class="w-28 h-28 rounded-l-md" :src="item.img" />
+      <view class="p-4">
+        <view class="text-[14px]">
+          {{ item.title }}
+        </view>
+        <view class="mt-2 text-[11px] text-[#999] whitespace-pre-line">
+          {{ item.desc }}
+        </view>
+        <view class="mt-3 text-[10px] text-[#D8D8D8]">
+          {{ item.time }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+
+</style>

pet-manual/index.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import carousalApi from '@/api/carousal'
+import CardList from '@/pages/pet-manual/components/CardList.vue'
+// const searchValue = ref('')
+import bg from '@/static/image/feed-plan/bg.png'
+import circle from '@/static/image/feed-plan/circle.png'
+import message from '@/static/image/feed-plan/message.png'
+import ToolApi from '@/utils'
+
+interface ListItem {
+  img: string
+  title: string
+  desc: string
+  time: string
+}
+interface Item {
+  content: string
+}
+interface DotStyle {
+  backgroundColor: string
+  selectedBackgroundColor: string
+  selectedBorder: string
+  border: string
+}
+interface TypeItem {
+  name: string
+  isClick: boolean
+}
+const titleName = ref<string>('养宠手册')
+const listModel = ref<ListItem[]>([
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+  {
+    img: bg,
+    title: '猫咪食物禁忌',
+    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
+    time: '2025年1月1日',
+  },
+])
+const safeHeight = ToolApi.getSafeHeight()
+const searchValue = ref<string>('')
+
+const info = ref<Item[]>([
+  { content: '内容 A' },
+  { content: '内容 B' },
+  { content: '内容 C' },
+])
+
+const current = ref<number>(0)
+
+const dotStyle = ref<DotStyle>({
+  backgroundColor: '#DCDCDC',
+  selectedBackgroundColor: '#0052D9',
+  selectedBorder: 'none',
+  border: 'none',
+})
+
+function change(e: CustomEvent<{ current: number }>): void {
+  current.value = e.detail.current
+}
+
+const typeList = ref<TypeItem[]>([
+  { name: '趣味科普', isClick: true },
+  { name: '科学喂养', isClick: false },
+  { name: '科学喂养', isClick: false },
+  { name: '科学喂养', isClick: false },
+])
+
+function handleClickType(item: TypeItem) {
+  typeList.value.forEach(i => (i.isClick = false))
+  item.isClick = true
+}
+const isSearch = ref<boolean>(true)
+function handleSearchFocus() {
+  isSearch.value = false
+}
+function handleCancel() {
+  isSearch.value = true
+}
+const historyList = ref<{ name: string }[]>([
+  { name: '猫' },
+  { name: '狗' },
+  { name: '烘培粮' },
+])
+
+const findList = ref<{ name: string }[]>([
+  { name: '宠物吃饭慢' },
+  { name: '猫咪尿闭怎么办' },
+])
+function onLoad() {
+  carousalApi.getCarousalList().then((res) => {
+    console.log(res)
+  })
+}
+onLoad()
+</script>
+
+<template>
+  <TitleBar :title-name="titleName" />
+
+  <view class="flex flex-col bg-[#F5F6F7] overflow-y-auto" :style="`height:calc(100vh - ${safeHeight}px)`">
+    <view class="mx-[6px]">
+      <uni-search-bar
+        v-model="searchValue"
+        placeholder="请搜索你想要的内容"
+        bg-color="white" clear-button="auto"
+        :cancel-button="isSearch ? 'none' : 'always'"
+        :radius="20"
+        @focus="handleSearchFocus"
+        @cancel="handleCancel"
+      />
+    </view>
+    <view v-show="!isSearch" class="mx-4 mt-4">
+      <view>
+        <text class="text-[18px] font-600">
+          历史记录
+        </text>
+        <view class="mt-4 flex gap-2 flex-wrap text-[12px] text-[#999] font-400 leading-5">
+          <view v-for="(item, index) in historyList" :key="index" class="px-2 py-0.5 flex justify-center items-center bg-[white] rounded-sm">
+            {{ item.name }}
+          </view>
+        </view>
+        <view class="mt-8">
+          <text class="text-[18px] font-600">
+            搜索发现
+          </text>
+          <view class="mt-4 flex gap-2 flex-wrap text-[12px] text-[#999] font-400 leading-5">
+            <view v-for="(item, index) in findList" :key="index" class="px-2 py-0.5 flex justify-center items-center bg-[white] rounded-sm gap-1">
+              <view class="flex items-center justify-center">
+                <uni-icons color="#999999" size="14" type="search" />
+              </view>
+              <view class="flex items-center justify-center">
+                {{ item.name }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view v-show="isSearch">
+      <view class="ml-4 mt-4 text-[20px] font-600">
+        热门推荐
+      </view>
+      <view class="mx-4 mt-4">
+        <uni-swiper-dot :info="info" :current="current" field="content" mode="dot" :dots-styles="dotStyle">
+          <swiper class="swiper-box" @change="change">
+            <swiper-item v-for="(item, index) in info" :key="index" style="background: rgba(0, 0, 0, 0.20)">
+              <view class="swiper-item">
+                {{ item.content }}
+              </view>
+            </swiper-item>
+          </swiper>
+        </uni-swiper-dot>
+      </view>
+      <view class="ml-4 mt-5 text-[20px] font-600">
+        养宠贴士
+      </view>
+      <view class="mx-4">
+        <scroll-view class="scroll mt-2" scroll-x="auto">
+          <view class="group h-[40px] mt-1">
+            <view
+              v-for="(item, index) in typeList" :key="index" class="item h-[30px] w-[28%] rounded-15px relative" style="border: 1px solid #E7E7E7"
+              @tap="handleClickType(item)"
+            >
+              <view v-if="item.isClick">
+                <image :src="message" class="absolute w-full" style="height: calc(100% + 5px)" />
+                <image :src="circle" class="w-[14px] h-[14px] absolute right-2 top-[-4px]" />
+              </view>
+              <view class="w-full h-full flex items-center justify-center text-[14px] z-20 relative font-600" :class="item.isClick ? 'type_select_span' : 'type_span'">
+                {{ item.name }}
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+      <CardList :card-list="listModel" />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.scroll{
+  box-sizing: border-box;
+  .group{
+    white-space: nowrap;
+    .item{
+      display: inline-block;
+      margin-right: 10px;
+    }
+  }
+}
+.type_span{
+  color:#999
+}
+.type_select_span{
+  color:#FFF
+}
+</style>

src/api/carousal.ts

@@ -0,0 +1,9 @@
+import { get } from '@/api/request'
+
+function getCarousalList() {
+  return get('https://bright.yilibili.com/api/carousals/active-list')
+}
+
+export default {
+  getCarousalList,
+}

src/pages/pet-manual/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import carousalApi from '@/api/carousal'
 import CardList from '@/pages/pet-manual/components/CardList.vue'
 // const searchValue = ref('')
 import bg from '@/static/image/feed-plan/bg.png'
@@ -103,7 +104,7 @@ function handleClickType(item: TypeItem) {
   typeList.value.forEach(i => (i.isClick = false))
   item.isClick = true
 }
-const isSearch = ref<boolean>(false)
+const isSearch = ref<boolean>(true)
 function handleSearchFocus() {
   isSearch.value = false
 }
@@ -120,6 +121,12 @@ const findList = ref<{ name: string }[]>([
   { name: '宠物吃饭慢' },
   { name: '猫咪尿闭怎么办' },
 ])
+function onLoad() {
+  carousalApi.getCarousalList().then((res) => {
+    console.log(res)
+  })
+}
+onLoad()
 </script>
 
 <template>
@@ -131,7 +138,7 @@ const findList = ref<{ name: string }[]>([
         v-model="searchValue"
         placeholder="请搜索你想要的内容"
         bg-color="white" clear-button="auto"
-        :cancel-button="isSearch ? 'none' : 'auto'"
+        :cancel-button="isSearch ? 'none' : 'always'"
         :radius="20"
         @focus="handleSearchFocus"
         @cancel="handleCancel"

vite.config.ts

@@ -8,13 +8,14 @@ import postcssPresetEnv from 'postcss-preset-env'
 import tailwindcss from 'tailwindcss'
 import nested from 'tailwindcss/nesting'
 import AutoImport from 'unplugin-auto-import/vite'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import tailwindcssConfig from './tailwind.config' // 注意匹配实际文件
 
 // 注意匹配实际文件
 
 // https://vitejs.dev/config/
-export default async () => {
+export default async ({ command, mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
   return defineConfig({
     css: {
       postcss: {
@@ -30,6 +31,15 @@ export default async () => {
         ],
       },
     },
+    server: {
+      proxy: {
+        '/api': {
+          target: env.VITE_PROXY_ENDPOINT,
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/api/, ''),
+        },
+      },
+    },
     plugins: [
       // https://github.com/uni-helper/vite-plugin-uni-manifest
       UniHelperManifest(),