feat(app): 品质商城页面

package.json

@@ -3,9 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
+  "scripts": {},
   "keywords": [],
   "author": "",
   "license": "ISC"

packages/app/src/pages/home/mall/components/product.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { publish } from '../../../../core/libs/svgs'
+import { addBlack } from '@designer-hub/assets/src/assets/svgs'
+</script>
+<template>
+  <div class="w-full flex flex-col gap-2.5">
+    <div class="bg-[#f6f6f6] rounded-2xl w-full aspect-square overflow-hidden">
+      <wd-img
+        width="100%"
+        height="100%"
+        src="https://via.placeholder.com/116x155"
+        mode="aspectFill"
+      ></wd-img>
+    </div>
+    <div class="flex">
+      <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-normal">
+        阿芙佳朵
+      </div>
+      <div class="flex-1"></div>
+      <div
+        class="w-[26px] text-black/30 text-xs font-normal font-['PingFang SC'] line-through leading-normal"
+      >
+        ¥60
+      </div>
+    </div>
+    <div class="flex items-center mb-6">
+      <div class="flex items-end gap-1">
+        <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-5.5">
+          1000
+        </div>
+        <div class="text-black/60 text-sm font-normal font-['PingFang SC']">积分</div>
+      </div>
+      <div class="flex-1"></div>
+      <div class="">
+        <wd-img width="24" height="24" :src="addBlack"></wd-img>
+      </div>
+    </div>
+  </div>
+</template>

packages/app/src/pages/home/mall/index.vue

@@ -9,30 +9,46 @@
 
 <script setup lang="ts">
 import TiltedButton from '@/components/tilted-button.vue'
+import Product from './components/product.vue'
+import { shoppingBag } from '@designer-hub/assets/src/assets/svgs/index'
 
 const data = ref(['https://via.placeholder.com/347x128'])
+const products = ref([{}, {}, {}])
 </script>
 
 <template>
-  <view class="bg-white flex-grow px-3.5">
+  <view class="bg-white flex-grow flex flex-col px-3.5 py-5.5 gap-5.5">
     <wd-swiper :list="data" autoplay height="128px"></wd-swiper>
-    <div class="bg-black rounded-2xl pt-11 my-6">
+    <div class="bg-black rounded-2xl pt-11">
       <div class="bg-white rounded-2xl shadow p-3.5"></div>
     </div>
-    <div class="inline-flex gap-2">
-      <wd-button type="primary" size="small">GELATO专区</wd-button>
-      <wd-button plain size="small">设计周边</wd-button>
+    <div class="w-full inline-flex gap-2">
+      <div><wd-button type="primary" size="small">GELATO专区</wd-button></div>
+      <div>
+        <wd-button plain size="small">设计周边</wd-button>
+      </div>
+    </div>
+    <div class="grid grid-cols-2 gap-2.5">
+      <template v-for="({}, i) of products" :key="i">
+        <Product></Product>
+      </template>
     </div>
     <div class="h-16">
       <div class="fixed bottom-0 left-0 right-0">
-        <div class="h-16 flex items-center justify-around">
-          <div><wd-button type="icon" icon="cart" size="small"></wd-button></div>
+        <div class="h-16 bg-white flex items-center justify-between px-7">
           <div>
-            <TiltedButton custom-class="text-center">
-              <span>购物车</span>
+            <!-- <wd-button type="text" size="small"> -->
+            <wd-img :round="false" width="32" height="32" :src="shoppingBag"></wd-img>
+            <!-- </wd-button> -->
+          </div>
+          <div>
+            <TiltedButton custom-class="text-center! items-center">
               <span
-                class="w-20 h-[22px] text-white text-sm font-normal font-['PingFang SC'] leading-tight"
+                class="h-[22px] text-white text-base font-normal font-['PingFang SC'] leading-tight"
               >
+                购物车
+              </span>
+              <span class="h-[22px] text-white text-sm font-normal font-['PingFang SC']">
                 （已选2件）
               </span>
             </TiltedButton>

packages/assets/package.json

@@ -3,11 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
+  "scripts": {},
   "devDependencies": {
     "typescript": "^5.5.3",
     "vite": "^5.4.1"

packages/assets/src/assets/svgs/addBlack.ts

@@ -0,0 +1,2 @@
+import addBlack from "./add_black.svg";
+export default addBlack;

packages/assets/src/assets/svgs/add_black.svg

@@ -0,0 +1,9 @@
+<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#143;&#137;&#229;&#143;&#137;">
+<circle id="Ellipse 77" cx="17.135" cy="16.9465" r="12" transform="rotate(41.9513 17.135 16.9465)" fill="black"/>
+<g id="Group 337">
+<path id="Vector 12" d="M22.6729 16.9995L12.1549 17.0814" stroke="white" stroke-width="2" stroke-linecap="round"/>
+<path id="Vector 13" d="M17.4543 22.2995L17.3724 11.7815" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</g>
+</g>
+</svg>

packages/assets/src/assets/svgs/index.ts

@@ -3,11 +3,15 @@ import channelTabbarMine from "./channelTabbarMine";
 import channelTabbarHomeActive from "./channelTabbarHomeActive";
 import channelTabbarMineActive from "./channelTabbarMineActive";
 import addBlue from "./addBlue";
+import shoppingBag from "./shoppingBag";
+import addBlack from "./addBlack";
 
 export {
+  addBlack,
   addBlue,
   channelTabbarMine,
   channelTabbarMineActive,
   channelTabbarHome,
   channelTabbarHomeActive,
+  shoppingBag,
 };

packages/assets/src/assets/svgs/shoppingBag.ts

@@ -0,0 +1,2 @@
+import shoppingBag from "./shopping_bag.svg";
+export default shoppingBag;

packages/assets/src/assets/svgs/shopping_bag.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.5 7.625H4.5C3.87869 7.625 3.375 8.12869 3.375 8.75V26.8795C3.375 28.2062 4.45094 29.2812 5.77778 29.2812H26.2222C27.5491 29.2812 28.625 28.2062 28.625 26.8795V8.75C28.625 8.12869 28.1213 7.625 27.5 7.625ZM26.375 9.875V26.8795C26.375 26.9631 26.3068 27.0312 26.2222 27.0312H5.77097C5.68956 27.0276 5.625 26.9609 5.625 26.8795V9.875H26.375Z" fill="black"/>
+<path d="M23.8797 2.75C24.0552 2.75 24.2283 2.79108 24.3852 2.86995C24.542 2.94883 24.6782 3.06332 24.7829 3.20425L28.4033 8.07925C28.7737 8.57806 28.6696 9.28275 28.1708 9.65319C27.672 10.0236 26.9673 9.91956 26.5969 9.42075L23.3139 5H8.68626L5.40326 9.42075C5.03651 9.91456 4.3422 10.0215 3.84436 9.66416L3.82936 9.65319C3.33051 9.28275 3.22645 8.57806 3.59689 8.07925L7.2173 3.20425C7.32196 3.06332 7.45816 2.94883 7.61499 2.86995C7.77182 2.79108 7.94493 2.75 8.12048 2.75H23.8797Z" fill="black"/>
+<path d="M20.8438 11.8125C21.4651 11.8125 21.9688 12.3162 21.9688 12.9375C21.9688 16.2488 19.3059 18.9375 16.0157 18.9375C12.7254 18.9375 10.0625 16.2488 10.0625 12.9375C10.0625 12.3162 10.5662 11.8125 11.1875 11.8125C11.8026 11.8125 12.3024 12.3062 12.3123 12.9189L12.3125 12.9375C12.3125 15.011 13.9729 16.6875 16.0157 16.6875C18.038 16.6875 19.6855 15.0444 19.7183 12.9996L19.7188 12.9375C19.7188 12.3162 20.2224 11.8125 20.8438 11.8125Z" fill="black"/>
+</svg>