first commit

src/features/product/assets/README.md

@@ -0,0 +1 @@
+# 临时占位，上传空文件夹，保存文件结构用，后面删除

src/features/product/components/README.md

@@ -0,0 +1 @@
+# 临时占位，上传空文件夹，保存文件结构用，后面删除

src/features/product/composables/README.md

@@ -0,0 +1 @@
+# 临时占位，上传空文件夹，保存文件结构用，后面删除

src/features/product/router/index.ts

@@ -0,0 +1,16 @@
+import { RouteRecordRaw } from 'vue-router';
+
+export const productRouter: Array<RouteRecordRaw> = [
+    {
+        path: '/Products',
+        name: 'ProductList',
+        component: () => import('../views/ProductList/ProductList.jsx'),
+        meta: { title: '商品列表' }
+    },
+    {
+        path: '/ProductDetail',
+        name: 'ProductDetail',
+        component: () => import('../views/ProductDetail/ProductDetail.jsx'),
+        meta: { title: '商品详情' }
+    },
+]

src/features/product/views/ProductDetail/ProductDetail.module.less

@@ -0,0 +1,5 @@
+.ProductDetail {
+  .title {
+    color: blue;
+  }
+}

src/features/product/views/ProductDetail/ProductDetail.tsx

@@ -0,0 +1,62 @@
+import styles from './ProductDetail.module.less'
+
+import { product } from '@domains/product/di/productModule';
+import { ProductType } from '@domains/product/domain/type/ProductType';
+import { defineComponent, onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+
+interface storeType {
+    item: ProductType
+    id: number
+}
+
+export default defineComponent({
+    setup() {
+        const route = useRoute();
+        const productService = product.createProductApplicationService();
+
+        const state = reactive<storeType>({
+            item: {} as ProductType,
+            id: 0
+        })
+
+        onMounted(() => {
+            if (!route.query.id) {
+                throw new Error("缺少id参数");
+            }
+
+            state.id = Number(route.query.id)
+            console.log("id: ", state.id);
+            loadProductDetail()
+        })
+
+        const loadProductDetail = async () => {
+            state.item = await productService.getProductInfo(state.id);
+            console.log("state.item: ", state.item);
+        }
+
+        return () => (
+            <div class={ styles.ProductDetail }>
+                <h1 class={ styles.title }>商品领域模块 - 商品详情页面</h1>
+                <hr/>
+                <p>商品id：{ state.id }</p>
+                { state.item.name }
+                <ul>
+                    {
+                        Object.entries(state.item).map(([ key, value ]) =>
+                            <li>{ key }: { value }</li>
+                        )
+                    }
+                </ul>
+            </div>
+        )
+    }
+})
+
+// export default defineComponent({
+//     setup() {
+//         return () => (
+//             <div>商品详情</div>
+//         )
+//     }
+// })

src/features/product/views/ProductList/ProductList.module.less

@@ -0,0 +1,5 @@
+.ProductList {
+  .test {
+    color: var(--theme-color);
+  }
+}

src/features/product/views/ProductList/ProductList.tsx

@@ -0,0 +1,79 @@
+import styles from './ProductList.module.less'
+
+import { defineComponent, onMounted, reactive } from 'vue'
+import { useRouter } from 'vue-router';
+import { product } from '@domains/product/di/productModule';
+import { ProductType } from '@domains/product/domain/type/ProductType';
+import { ElCard, ElIcon, Icons } from "shared/element-plus";
+
+interface storeType {
+    list: Array<ProductType>
+}
+
+export default defineComponent({
+    setup() {
+
+        const router = useRouter();
+        const productService = product.createProductApplicationService();
+
+        const state = reactive<storeType>({
+            list: []
+        })
+
+
+        onMounted(() => {
+            loadProductList()
+        })
+
+        const loadProductList = async () => {
+            state.list = await productService.getProductList();
+            console.log("state.list: ", state.list);
+        }
+
+        const ElCardHeader = () => {
+            return (
+                <div class="card-header">
+                    <ElIcon size={ 15 }>
+                        <Icons.Position></Icons.Position>
+                    </ElIcon>
+                    <span>Card 头部</span>
+                </div>
+            )
+        }
+
+        const ElCardFooter = () => {
+            return <div>Footer 底部</div>
+        }
+
+        return () => (
+            <div class={ styles.ProductList }>
+                <h1 class={ styles.test }>商品领域模块 - 商品列表页面3</h1>
+                <hr/>
+                <h2>从Deno 后端 加载的数据，点击进详情</h2>
+                <ElCard>
+                    { {
+                        header: () => ElCardHeader(),
+                        footer: () => ElCardFooter(),
+                        default: () =>
+                            state.list.map(item =>
+                                <p key={ item.id } onClick={ () => {
+                                    router.push({ name: 'ProductDetail', query: { id: item.id } });
+                                } }>
+                                    { item.id } | { item.name } | ¥{ item.price }
+                                </p>
+                            )
+                    } }
+                </ElCard>
+
+            </div>
+        )
+    }
+})
+
+// export default defineComponent({
+//     setup() {
+//         return () => (
+//             <div>商品列表</div>
+//         )
+//     }
+// })