ltj/helios-web-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: transaction framework

Browse Source
This commit is contained in:
aaa
2025-02-03 17:23:16 +08:00
parent 0425cd90a6
commit 8ce7f902af
10 changed files with 252 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/DesktopSideBar.vue
View File

@@ -1,8 +1,8 @@
<template>
<v-navigation-drawer expand-on-hover rail>
<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-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>
@@ -13,5 +13,4 @@
<v-list-item prepend-icon="mdi-star" title="Starred" value="starred"></v-list-item>
</v-list>
</v-navigation-drawer>
</template>

52
components/TransactionList.vue
View File

@@ -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' },
{

37
components/TransactionListItem.vue Normal file
View File

@@ -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>

12
layouts/desktop.vue
View File

@@ -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>

28
models/transaction.ts Normal file
View File

@@ -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[],
}

7
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -11,6 +11,7 @@
},
"dependencies": {
"@mdi/font": "^7.4.47",
"dayjs": "^1.11.13",
"nuxt": "^3.15.4",
"vue": "latest",
"vue-router": "latest"

8
pages/desktop/dashboard.vue
View File

@@ -1,10 +1,14 @@
<template>
<div>
<div style="min-height: 100%;">
<NuxtLayout name="desktop">
<p>
Dashboard Page
</p>
</NuxtLayout>
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'desktop'
})
</script>

89
pages/desktop/transaction.vue
View File

@@ -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>

17
utils/currency.ts Normal file
View File

@@ -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] || "";
}