From 8ce7f902af5133d742e1fe1017359af4d162080f Mon Sep 17 00:00:00 2001
From: aaa <a@b.c>
Date: Mon, 3 Feb 2025 17:23:16 +0800
Subject: [PATCH] feat: transaction framework

---
 components/DesktopSideBar.vue      | 27 +++++----
 components/TransactionList.vue     | 52 ++++++++++++++++-
 components/TransactionListItem.vue | 37 +++++++++++++
 layouts/desktop.vue                | 12 ++--
 models/transaction.ts              | 28 ++++++++++
 package-lock.json                  |  7 +++
 package.json                       |  1 +
 pages/desktop/dashboard.vue        | 12 ++--
 pages/desktop/transaction.vue      | 89 ++++++++++++++++++++++++++++--
 utils/currency.ts                  | 17 ++++++
 10 files changed, 252 insertions(+), 30 deletions(-)
 create mode 100644 components/TransactionListItem.vue
 create mode 100644 models/transaction.ts
 create mode 100644 utils/currency.ts

diff --git a/components/DesktopSideBar.vue b/components/DesktopSideBar.vue
index 0cfc87d..b14e16c 100644
--- a/components/DesktopSideBar.vue
+++ b/components/DesktopSideBar.vue
@@ -1,17 +1,16 @@
 <template>
-    <v-navigation-drawer expand-on-hover rail>
-        <v-list>
-            <v-list-item prepend-avatar="https://randomuser.me/api/portraits/women/85.jpg"
-                subtitle="sandra_a88@gmailcom" title="Sandra Adams"></v-list-item>
-        </v-list>
+  <v-navigation-drawer  class="pt-4" rail>
+    <v-list>
+      <v-list-item prepend-avatar="https://randomuser.me/api/portraits/women/85.jpg" subtitle="sandra_a88@gmailcom"
+        title="Sandra Adams"></v-list-item>
+    </v-list>
 
-        <v-divider></v-divider>
+    <v-divider></v-divider>
 
-        <v-list density="compact" nav>
-            <v-list-item prepend-icon="mdi-folder" title="My Files" value="myfiles"></v-list-item>
-            <v-list-item prepend-icon="mdi-account-multiple" title="Shared with me" value="shared"></v-list-item>
-            <v-list-item prepend-icon="mdi-star" title="Starred" value="starred"></v-list-item>
-        </v-list>
-    </v-navigation-drawer>
-
-</template>
\ No newline at end of file
+    <v-list density="compact" nav>
+      <v-list-item prepend-icon="mdi-folder" title="My Files" value="myfiles"></v-list-item>
+      <v-list-item prepend-icon="mdi-account-multiple" title="Shared with me" value="shared"></v-list-item>
+      <v-list-item prepend-icon="mdi-star" title="Starred" value="starred"></v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
diff --git a/components/TransactionList.vue b/components/TransactionList.vue
index 75ec3e8..e50a96a 100644
--- a/components/TransactionList.vue
+++ b/components/TransactionList.vue
@@ -1,7 +1,57 @@
 <template>
-  <v-list :items="items"></v-list>
+  <v-list rounded="lg" lines="two">
+    <TransactionListItem v-for="v in transactions" :transaction-item="v"/>
+  </v-list>
 </template>
 <script lang="ts" setup>
+let transactions = [
+{
+    "id": "20842",
+    "description": "aaa",
+    "category": {
+      "id": "10087241",
+      "name": "Category1",
+    },
+    "amount": {
+      "value": "135.33",
+      "currency": "CNY",
+    },
+    "time": "1738564519",
+    "tags": [
+      {
+        "id": "1742004",
+        "name": "t1",
+      },
+      {
+        "id": "1742932",
+        "name": "t3",
+      },
+    ],
+  },
+  {
+    "id": "20845",
+    "description": "bbb",
+    "category": {
+      "id": "10088823",
+      "name": "Category2",
+    },
+    "amount": {
+      "value": "77.99",
+      "currency": "CNY",
+    },
+    "time": "1738564519",
+    "tags": [
+      {
+        "id": "1742004",
+        "name": "t1",
+      },
+      {
+        "id": "1742932",
+        "name": "t3",
+      },
+    ],
+  }
+]
 let items = [
         { type: 'subheader', title: 'Group #1' },
         {
diff --git a/components/TransactionListItem.vue b/components/TransactionListItem.vue
new file mode 100644
index 0000000..ef6102e
--- /dev/null
+++ b/components/TransactionListItem.vue
@@ -0,0 +1,37 @@
+<template>
+  <v-list-item :value="transactionItem.id">
+    <template v-slot:prepend>
+      <v-avatar color="grey-lighten-1">
+        <v-icon color="white">mdi-folder</v-icon>
+      </v-avatar>
+    </template>
+    <v-list-item-title>
+      {{transactionItem.category?.name}}
+    </v-list-item-title>
+    <v-list-item-subtitle>
+      {{formatDateTime}} &middot; {{transactionItem.description}}
+    </v-list-item-subtitle>
+    <template v-slot:append>
+      <v-list-item-action class="flex-column align-end">
+        <span v-html="formatAmountString"></span>
+      </v-list-item-action>
+    </template>
+  </v-list-item>
+</template>
+
+<script lang="ts" setup>
+import {Transaction} from "@/models/transaction.ts"
+import {computed } from 'vue'
+import * as dayjs from 'dayjs'
+import {CurrencyTypeToSymbol} from "@/utils/currency"
+const props = defineProps<{
+  transactionItem: Transaction;
+}>();
+const formatDateTime = computed(() => {
+  let parsed = dayjs.unix(Number(props.transactionItem.time))
+  return parsed.format("HH:mm")
+})
+const formatAmountString = computed(() => {
+  return CurrencyTypeToSymbol(props.transactionItem.amount.currency)+props.transactionItem.amount.val||"0.00"
+})
+</script>
diff --git a/layouts/desktop.vue b/layouts/desktop.vue
index fd970f9..1f24d3e 100644
--- a/layouts/desktop.vue
+++ b/layouts/desktop.vue
@@ -1,16 +1,16 @@
 <template>
-  <!-- <v-layout class=""> -->
+  <v-layout style="min-height: 100%;">
   <!-- <p>desktop layout</p> -->
-  <div>
+  <!-- <div> -->
     <DesktopSideBar />
     <v-app-bar flat>
       <slot name="app-bar-container"></slot>
     </v-app-bar>
-    <v-main class="bg-grey-lighten-4">
-      <v-container>
+    <v-main class="bg-grey-lighten-4 d-flex align-start justify-center">
+      <v-container fluid>
         <slot />
       </v-container>
     </v-main>
-  </div>
-  <!-- </v-layout> -->
+  <!-- </div> -->
+  </v-layout>
 </template>
diff --git a/models/transaction.ts b/models/transaction.ts
new file mode 100644
index 0000000..8fd0998
--- /dev/null
+++ b/models/transaction.ts
@@ -0,0 +1,28 @@
+export interface Category {
+  id: string,
+  name: string,
+}
+
+export interface Tag {
+  id: string,
+  name: string,
+}
+
+export interface Amount{
+  currency: string,
+  val: string,
+}
+
+export interface Transaction{
+  id: string,
+  description: string,
+  time: string,
+  category?: Category,
+  tags?: Tag[],
+  amount?: 
+}
+
+export interface TransactionGroup {
+  group_title: string,
+  transactions?: Transaction[],
+}
diff --git a/package-lock.json b/package-lock.json
index 6656aeb..b143452 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@mdi/font": "^7.4.47",
+        "dayjs": "^1.11.13",
         "nuxt": "^3.15.4",
         "vue": "latest",
         "vue-router": "latest"
@@ -4081,6 +4082,12 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/db0": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/db0/-/db0-0.2.3.tgz",
diff --git a/package.json b/package.json
index a634e94..1e6543a 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
+    "dayjs": "^1.11.13",
     "nuxt": "^3.15.4",
     "vue": "latest",
     "vue-router": "latest"
diff --git a/pages/desktop/dashboard.vue b/pages/desktop/dashboard.vue
index aa7909c..24c73fe 100644
--- a/pages/desktop/dashboard.vue
+++ b/pages/desktop/dashboard.vue
@@ -1,10 +1,14 @@
 <template>
-  <div>
-    Dashboard Page
+  <div style="min-height: 100%;">
+    <NuxtLayout name="desktop">
+      <p>
+        Dashboard Page
+      </p>
+    </NuxtLayout>
   </div>
 </template>
 <script setup lang="ts">
 definePageMeta({
-  layout: 'desktop'
+  
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/desktop/transaction.vue b/pages/desktop/transaction.vue
index 3914136..ff9368e 100644
--- a/pages/desktop/transaction.vue
+++ b/pages/desktop/transaction.vue
@@ -1,17 +1,96 @@
 <template>
-  <div>
+  <div style="min-height: 100%;">
     <NuxtLayout name="desktop">
       <template #app-bar-container>
         <v-app-bar-title>Transactions</v-app-bar-title>
       </template>
-      <v-card>
-        <transaction-list></transaction-list>
-      </v-card>
+      <v-row align="start">
+        <v-col md="8" lg="8" xl="8" xxl="8">
+          <v-sheet rounded="lg">
+            <v-list rounded="lg" lines="two">
+              <template v-for="grp in transactionList.transactionGroups">
+                <v-list-subheader>{{ grp.group_title }}</v-list-subheader>
+                <TransactionListItem v-for="v in grp.transactions" :transaction-item="v" />
+              </template>
+            </v-list>
+          </v-sheet>
+        </v-col>
+        <v-col>
+          <v-sheet rounded="lg">
+            <v-container>
+              <v-form>
+                <v-text-field v-model="name" label="Name" variant="outlined"></v-text-field>
+              </v-form>
+            </v-container>
+          </v-sheet>
+        </v-col>
+      </v-row>
     </NuxtLayout>
   </div>
 </template>
 <script setup lang="ts">
-definePageMeta({
+import { ref } from 'vue';
+import { Transaction, TransactionGroup } from '@/models/transaction';
 
+interface TransactionPageData {
+  transactionGroups: TransactionGroup[],
+}
+const transactionList = ref(
+  {
+    transactionGroups: [],
+    // filters
+  }
+)
+let transactionGrp: TransactionGroup = { transactions: [], group_title: "aabbccdd" };
+transactionGrp.transactions.push({
+  "id": "20842",
+  "description": "aaa",
+  "category": {
+    "id": "10087241",
+    "name": "Category1",
+  },
+  "amount": {
+    "val": "135.33",
+    "currency": "CNY",
+  },
+  "time": "1738564519",
+  "tags": [
+    {
+      "id": "1742004",
+      "name": "t1",
+    },
+    {
+      "id": "1742932",
+      "name": "t3",
+    },
+  ],
 })
+transactionList.value.transactionGroups.push(transactionGrp)
+
+let transactionGrp2: TransactionGroup = { transactions: [], group_title: "eeffgghh" };
+transactionGrp2.transactions.push({
+  "id": "898539",
+  "description": "bbb",
+  "category": {
+    "id": "10087241",
+    "name": "Category2",
+  },
+  "amount": {
+    "val": "67.00",
+    "currency": "CNY",
+  },
+  "time": "1738561205",
+  "tags": [
+    {
+      "id": "1742004",
+      "name": "t1",
+    },
+    {
+      "id": "1742932",
+      "name": "t3",
+    },
+  ],
+})
+transactionList.value.transactionGroups.push(transactionGrp2)
+
 </script>
diff --git a/utils/currency.ts b/utils/currency.ts
new file mode 100644
index 0000000..fc77c28
--- /dev/null
+++ b/utils/currency.ts
@@ -0,0 +1,17 @@
+
+// 定义支持的货币类型
+type Currency = "USD" | "EUR" | "GBP" | "JPY" | "CNY";
+
+// 定义货币类型到 HTML 字符的映射
+const currencySymbols: Record<Currency, string> = {
+  USD: "&#36;", // 美元符号
+  EUR: "&#8364;", // 欧元符号
+  GBP: "&#163;", // 英镑符号
+  JPY: "&#165;", // 日元符号
+  CNY: "&#165;", // 人民币符号（与日元相同）
+};
+
+
+export function CurrencyTypeToSymbol(currencyType: string){
+  return currencySymbols[currencyType] || "";
+}