admin-2025-02-19 09:05:02

dist/assets/CartView-3fALqSRx.css

@@ -0,0 +1 @@
+.cart[data-v-5355b60e]{padding:20px}

dist/assets/CartView-BUm9dcLD.css

@@ -1 +0,0 @@
-.cart[data-v-f59f2b3f]{padding:20px}

dist/assets/CartView-BgG0OjFN.js

@@ -1 +0,0 @@
-import{_ as t,c as a,a as s,o}from"./index-D_xkYa7Z.js";const r={class:"cart"},_={__name:"CartView",setup(c){return(n,e)=>(o(),a("div",r,e[0]||(e[0]=[s("h1",null,"购物车",-1)])))}},f=t(_,[["__scopeId","data-v-f59f2b3f"]]);export{f as default};

dist/assets/CartView-DEWuC-_Z.js

@@ -0,0 +1 @@
+import{_ as u,r as d,c as a,a as n,F as _,b as p,o,t as c}from"./index-Ct7rszg4.js";const m={class:"container cart"},v=["onClick"],f={__name:"CartView",setup(k){const s=d([]),l=r=>{const t=s.value.findIndex(e=>e.id===r.id);t!==-1&&s.value.splice(t,1)},i=()=>{};return(r,t)=>(o(),a("div",m,[t[0]||(t[0]=n("h1",null,"购物车",-1)),(o(!0),a(_,null,p(s.value,e=>(o(),a("div",{key:e.id,class:"cart-item"},[n("h2",null,c(e.name),1),n("p",null,"价格: "+c(e.price),1),n("button",{onClick:C=>l(e)},"移除",8,v)]))),128)),n("button",{onClick:i},"结算")]))}},b=u(f,[["__scopeId","data-v-5355b60e"]]);export{b as default};

dist/assets/OrderView-CH51OtDb.js

@@ -1 +0,0 @@
-import{_ as r,c as s,a,o}from"./index-D_xkYa7Z.js";const t={class:"order"},_={__name:"OrderView",setup(c){return(d,e)=>(o(),s("div",t,e[0]||(e[0]=[a("h1",null,"订单",-1)])))}},p=r(_,[["__scopeId","data-v-fdfad1a3"]]);export{p as default};

dist/assets/OrderView-CmtZihyO.css

@@ -0,0 +1 @@
+.order[data-v-5a9adf85]{padding:20px}

dist/assets/OrderView-DB5c9XNz.css

@@ -1 +0,0 @@
-.order[data-v-fdfad1a3]{padding:20px}

dist/assets/OrderView-DyZOnkq7.js

@@ -0,0 +1 @@
+import{_ as o,r as i,c as s,a as e,F as c,b as d,o as a,t as r}from"./index-Ct7rszg4.js";const u={class:"container order"},_={__name:"OrderView",setup(p){const n=i([{id:1,totalPrice:"500元",status:"已支付"},{id:2,totalPrice:"300元",status:"待支付"}]);return(m,l)=>(a(),s("div",u,[l[0]||(l[0]=e("h1",null,"订单",-1)),(a(!0),s(c,null,d(n.value,t=>(a(),s("div",{key:t.id,class:"order-item"},[e("h2",null,"订单编号: "+r(t.id),1),e("p",null,"总金额: "+r(t.totalPrice),1),e("p",null,"状态: "+r(t.status),1)]))),128))]))}},v=o(_,[["__scopeId","data-v-5a9adf85"]]);export{v as default};

dist/assets/ProductDetailView-B1ClwXps.css

@@ -1 +0,0 @@
-.product-detail[data-v-3785a455]{padding:20px}

dist/assets/ProductDetailView-BFL6RLQ9.css

@@ -0,0 +1 @@
+.product-detail[data-v-33fcf37a]{padding:20px}

dist/assets/ProductDetailView-D3AXZIHl.js

@@ -0,0 +1 @@
+import{_ as u,r as c,d as l,u as d,c as i,a as o,t as s,o as p}from"./index-Ct7rszg4.js";const _={class:"container product-detail"},m={__name:"ProductDetailView",setup(v){const n=d(),e=c({});l(()=>{const t=n.params.id;e.value={id:t,name:`商品${t}`,description:`这是商品${t}的描述`,price:`${parseInt(t)*100}元`}});const r=t=>{};return(t,a)=>(p(),i("div",_,[a[1]||(a[1]=o("h1",null,"商品详情",-1)),o("h2",null,s(e.value.name),1),o("p",null,s(e.value.description),1),o("p",null,"价格: "+s(e.value.price),1),o("button",{onClick:a[0]||(a[0]=f=>r(e.value))},"加入购物车")]))}},k=u(m,[["__scopeId","data-v-33fcf37a"]]);export{k as default};

dist/assets/ProductDetailView-DefJBqH3.js

@@ -1 +0,0 @@
-import{_ as t,c as a,a as o,o as s}from"./index-D_xkYa7Z.js";const c={class:"product-detail"},r={__name:"ProductDetailView",setup(_){return(d,e)=>(s(),a("div",c,e[0]||(e[0]=[o("h1",null,"商品详情",-1)])))}},n=t(r,[["__scopeId","data-v-3785a455"]]);export{n as default};

dist/assets/ProductListView-B0XpBea1.css

@@ -0,0 +1 @@
+.product-list[data-v-38a2b793]{padding:20px}

dist/assets/ProductListView-BEythlnl.js

@@ -1 +0,0 @@
-import{_ as s,c as e,a as o,o as c}from"./index-D_xkYa7Z.js";const a={class:"product-list"},r={__name:"ProductListView",setup(_){return(n,t)=>(c(),e("div",a,t[0]||(t[0]=[o("h1",null,"商品列表",-1)])))}},i=s(r,[["__scopeId","data-v-2254c416"]]);export{i as default};

dist/assets/ProductListView-dOlZy1ZW.js

@@ -0,0 +1 @@
+import{_ as d,r as l,c as s,a as e,F as p,b as u,o as n,t as i}from"./index-Ct7rszg4.js";const _={class:"container product-list"},m=["onClick"],f={__name:"ProductListView",setup(k){const o=l([{id:1,name:"商品1",description:"这是商品1的描述",price:"100元"},{id:2,name:"商品2",description:"这是商品2的描述",price:"200元"},{id:3,name:"商品3",description:"这是商品3的描述",price:"300元"}]),a=c=>{};return(c,r)=>(n(),s("div",_,[r[0]||(r[0]=e("h1",null,"商品列表",-1)),(n(!0),s(p,null,u(o.value,t=>(n(),s("div",{key:t.id,class:"product-item"},[e("h2",null,i(t.name),1),e("p",null,i(t.description),1),e("p",null,"价格: "+i(t.price),1),e("button",{onClick:v=>a()},"加入购物车",8,m)]))),128))]))}},h=d(f,[["__scopeId","data-v-38a2b793"]]);export{h as default};

dist/assets/ProductListView-zTdqrKcH.css

@@ -1 +0,0 @@
-.product-list[data-v-2254c416]{padding:20px}

dist/assets/UserProfileView-0n7K-RNl.css

@@ -1 +0,0 @@
-.user-profile[data-v-429c258d]{padding:20px}

dist/assets/UserProfileView-B_yxMYAR.css

@@ -0,0 +1 @@
+.user-profile[data-v-8107594b]{padding:20px}

dist/assets/UserProfileView-BcCxsX8b.js

@@ -0,0 +1 @@
+import{_ as l,r as t,c as r,a as e,t as o,o as i}from"./index-Ct7rszg4.js";const c={class:"container user-profile"},p={__name:"UserProfileView",setup(u){const a=t({name:"张三",email:"zhangsan@example.com",phone:"13800138000"}),n=()=>{};return(_,s)=>(i(),r("div",c,[s[0]||(s[0]=e("h1",null,"个人中心",-1)),e("h2",null,"用户名: "+o(a.value.name),1),e("p",null,"邮箱: "+o(a.value.email),1),e("p",null,"手机号: "+o(a.value.phone),1),e("button",{onClick:n},"编辑资料")]))}},f=l(p,[["__scopeId","data-v-8107594b"]]);export{f as default};

dist/assets/UserProfileView-CQS1Tt_z.js

@@ -1 +0,0 @@
-import{_ as s,c as o,a as r,o as t}from"./index-D_xkYa7Z.js";const a={class:"user-profile"},_={__name:"UserProfileView",setup(c){return(l,e)=>(t(),o("div",a,e[0]||(e[0]=[r("h1",null,"个人中心",-1)])))}},i=s(_,[["__scopeId","data-v-429c258d"]]);export{i as default};

dist/assets/index-BgACLjNj.css

@@ -1 +0,0 @@
-#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}nav{padding:30px}nav a{font-weight:700;color:#2c3e50}nav a.router-link-exact-active{color:#42b983}.home[data-v-c8f5037c]{display:flex;flex-direction:column;min-height:100vh}header nav ul[data-v-c8f5037c]{list-style-type:none;padding:0;display:flex;justify-content:space-around;background-color:#f8f8f8}header nav ul li a[data-v-c8f5037c]{text-decoration:none;color:#333;padding:10px 20px;display:block}header nav ul li a[data-v-c8f5037c]:hover{background-color:#ddd}main[data-v-c8f5037c]{flex:1;padding:20px}.carousel[data-v-c8f5037c],.featured-products[data-v-c8f5037c],.categories[data-v-c8f5037c]{margin-bottom:20px}.carousel-images[data-v-c8f5037c]{display:flex;overflow-x:scroll;white-space:nowrap}.carousel-images img[data-v-c8f5037c]{width:300px;height:auto;margin-right:10px}.product-list[data-v-c8f5037c]{display:flex;flex-wrap:wrap;gap:10px}.product-item[data-v-c8f5037c]{border:1px solid #ddd;padding:10px;width:200px;box-shadow:0 2px 4px #0000001a}.product-item img[data-v-c8f5037c]{width:100%;height:auto}.product-item p[data-v-c8f5037c]{margin-top:5px}footer[data-v-c8f5037c]{text-align:center;padding:10px;background-color:#f8f8f8}

dist/assets/index-D2KCecHr.css

@@ -0,0 +1 @@
+body,html{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.container{max-width:768px;margin:0 auto;padding:20px}h1,h2,h3{color:#333}button{background-color:#ff5a5f;border:none;color:#fff;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:10px 2px;cursor:pointer;border-radius:5px}button:hover{background-color:#e74c3c}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}nav{padding:30px}nav a{font-weight:700;color:#2c3e50}nav a.router-link-exact-active{color:#42b983}.home[data-v-8f8c0e33]{display:flex;flex-direction:column;min-height:100vh}header nav ul[data-v-8f8c0e33]{list-style-type:none;padding:0;display:flex;justify-content:space-around;background-color:#f8f8f8}header nav ul li a[data-v-8f8c0e33]{text-decoration:none;color:#333;padding:10px 20px;display:block}header nav ul li a[data-v-8f8c0e33]:hover{background-color:#ddd}main[data-v-8f8c0e33]{flex:1;padding:20px}.carousel[data-v-8f8c0e33],.featured-products[data-v-8f8c0e33],.categories[data-v-8f8c0e33]{margin-bottom:20px}.carousel-images[data-v-8f8c0e33]{display:flex;overflow-x:scroll;white-space:nowrap}.carousel-images img[data-v-8f8c0e33]{width:300px;height:auto;margin-right:10px}.product-list[data-v-8f8c0e33]{display:flex;flex-wrap:wrap;gap:10px}.product-item[data-v-8f8c0e33]{border:1px solid #ddd;padding:10px;width:200px;box-shadow:0 2px 4px #0000001a}.product-item img[data-v-8f8c0e33]{width:100%;height:auto}.product-item p[data-v-8f8c0e33]{margin-top:5px}footer[data-v-8f8c0e33]{text-align:center;padding:10px;background-color:#f8f8f8}

dist/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Prototype Design</title>
-    <script type="module" crossorigin src="/ide/proxy/6005/assets/index-D_xkYa7Z.js"></script>
-    <link rel="stylesheet" crossorigin href="/ide/proxy/6005/assets/index-BgACLjNj.css">
+    <script type="module" crossorigin src="/ide/proxy/6001/assets/index-Ct7rszg4.js"></script>
+    <link rel="stylesheet" crossorigin href="/ide/proxy/6001/assets/index-D2KCecHr.css">
   </head>
   <body>
     <div id="app"></div>

src/assets/common.css

@@ -1,3 +1,34 @@
-body {
-    
-}
+/* 全局样式 */
+body, html {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.container {
+  max-width: 768px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+h1, h2, h3 {
+  color: #333;
+}
+
+button {
+  background-color: #ff5a5f;
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 10px 2px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+button:hover {
+  background-color: #e74c3c;
+}

src/views/CartView.vue

@@ -1,12 +1,34 @@
 <template>
-  <div class="cart">
+  <div class="container cart">
     <h1>购物车</h1>
-    <!-- 购物车内容将在这里展示 -->
+    <div v-for="item in cartItems" :key="item.id" class="cart-item">
+      <h2>{{ item.name }}</h2>
+      <p>价格: {{ item.price }}</p>
+      <button @click="removeFromCart(item)">移除</button>
+    </div>
+    <button @click="checkout">结算</button>
   </div>
 </template>
 
 <script setup>
-// 这里可以引入数据和逻辑
+import { ref } from 'vue'
+
+const cartItems = ref([])
+
+const addToCart = (product) => {
+  cartItems.value.push(product)
+}
+
+const removeFromCart = (item) => {
+  const index = cartItems.value.findIndex(cartItem => cartItem.id === item.id)
+  if (index !== -1) {
+    cartItems.value.splice(index, 1)
+  }
+}
+
+const checkout = () => {
+  // 在这里实现结算的逻辑
+}
 </script>
 
 <style scoped>

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="container home">
     <header>
       <nav>
         <ul>
@@ -26,14 +26,17 @@
           <div class="product-item">
             <img src="@/assets/img/project_view.png" alt="Product 1" />
             <p>产品1 - 描述</p>
+            <button @click="addToCart({ id: 1, name: '产品1', description: '这是产品1的描述', price: '100元' })">加入购物车</button>
           </div>
           <div class="product-item">
             <img src="@/assets/img/prompt_view.png" alt="Product 2" />
             <p>产品2 - 描述</p>
+            <button @click="addToCart({ id: 2, name: '产品2', description: '这是产品2的描述', price: '200元' })">加入购物车</button>
           </div>
           <div class="product-item">
             <img src="@/assets/img/upload_view.png" alt="Product 3" />
             <p>产品3 - 描述</p>
+            <button @click="addToCart({ id: 3, name: '产品3', description: '这是产品3的描述', price: '300元' })">加入购物车</button>
           </div>
         </div>
       </section>
@@ -48,9 +51,11 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'HomeView',
+<script setup>
+import { ref } from 'vue'
+
+const addToCart = (product) => {
+  // 在这里实现添加到购物车的逻辑
 }
 </script>
 

src/views/OrderView.vue

@@ -1,12 +1,21 @@
 <template>
-  <div class="order">
+  <div class="container order">
     <h1>订单</h1>
-    <!-- 订单内容将在这里展示 -->
+    <div v-for="order in orders" :key="order.id" class="order-item">
+      <h2>订单编号: {{ order.id }}</h2>
+      <p>总金额: {{ order.totalPrice }}</p>
+      <p>状态: {{ order.status }}</p>
+    </div>
   </div>
 </template>
 
 <script setup>
-// 这里可以引入数据和逻辑
+import { ref } from 'vue'
+
+const orders = ref([
+  { id: 1, totalPrice: '500元', status: '已支付' },
+  { id: 2, totalPrice: '300元', status: '待支付' }
+])
 </script>
 
 <style scoped>

src/views/ProductDetailView.vue

@@ -1,12 +1,38 @@
 <template>
-  <div class="product-detail">
+  <div class="container product-detail">
     <h1>商品详情</h1>
-    <!-- 商品详情将在这里展示 -->
+    <h2>{{ product.name }}</h2>
+    <p>{{ product.description }}</p>
+    <p>价格: {{ product.price }}</p>
+    <button @click="addToCart(product)">加入购物车</button>
   </div>
 </template>
 
 <script setup>
-// 这里可以引入数据和逻辑
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const product = ref({})
+
+onMounted(() => {
+  const productId = route.params.id
+  // 假设有一个获取商品详情的API
+  // fetchProductDetails(productId).then(data => {
+  //   product.value = data
+  // })
+  // 为了演示，这里直接设置一个示例商品
+  product.value = {
+    id: productId,
+    name: `商品${productId}`,
+    description: `这是商品${productId}的描述`,
+    price: `${parseInt(productId) * 100}元`
+  }
+})
+
+const addToCart = (product) => {
+  // 在这里实现添加到购物车的逻辑
+}
 </script>
 
 <style scoped>

src/views/ProductListView.vue

@@ -1,12 +1,27 @@
 <template>
-  <div class="product-list">
+  <div class="container product-list">
     <h1>商品列表</h1>
-    <!-- 列表项将在这里动态生成 -->
+    <div v-for="product in products" :key="product.id" class="product-item">
+      <h2>{{ product.name }}</h2>
+      <p>{{ product.description }}</p>
+      <p>价格: {{ product.price }}</p>
+      <button @click="addToCart(product)">加入购物车</button>
+    </div>
   </div>
 </template>
 
 <script setup>
-// 这里可以引入数据和逻辑
+import { ref } from 'vue'
+
+const products = ref([
+  { id: 1, name: '商品1', description: '这是商品1的描述', price: '100元' },
+  { id: 2, name: '商品2', description: '这是商品2的描述', price: '200元' },
+  { id: 3, name: '商品3', description: '这是商品3的描述', price: '300元' }
+])
+
+const addToCart = (product) => {
+  // 在这里实现添加到购物车的逻辑
+}
 </script>
 
 <style scoped>

src/views/UserProfileView.vue

@@ -1,12 +1,25 @@
 <template>
-  <div class="user-profile">
+  <div class="container user-profile">
     <h1>个人中心</h1>
-    <!-- 用户信息和个人设置将在这里展示 -->
+    <h2>用户名: {{ user.name }}</h2>
+    <p>邮箱: {{ user.email }}</p>
+    <p>手机号: {{ user.phone }}</p>
+    <button @click="editProfile">编辑资料</button>
   </div>
 </template>
 
 <script setup>
-// 这里可以引入数据和逻辑
+import { ref } from 'vue'
+
+const user = ref({
+  name: '张三',
+  email: 'zhangsan@example.com',
+  phone: '13800138000'
+})
+
+const editProfile = () => {
+  // 在这里实现编辑用户资料的逻辑
+}
 </script>
 
 <style scoped>