zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化分类选择功能：新增默认展开分类列表设置，更新相关页面以支持此功能

Browse Source
This commit is contained in:
Zhengchen Tao
2026-04-06 14:06:06 +08:00
parent 9c4a0493ee
commit b82533233e
9 changed files with 48 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MY_REQUIREMENTS.md
+16 -14
View File
@@ -7,16 +7,15 @@
## 一、UI / 主题
### 1. ⚠️ 自选主题色
### 1. ❌ 自选主题色（已实现后 revert）
**描述：** 在设置页面增加主题色选择器，用户可自由选择应用主色调。
**现状：** 主题色当前硬编码为 `#c67e48`，仅支持亮色/暗色切换。
**现状：** 实现后效果不佳，已全部 revert。主题色仍为硬编码 `#c67e48`。
**实现思路：**
- 在设置页新增颜色选择器组件
- 将所选颜色保存至 `localStorage`
- 启动时读取颜色并注入 CSS 变量（Framework7 支持动态 primary color）
- 涉及文件：`src/MobileApp.vue`、`src/lib/settings.ts`、设置页面
**实现思路（留存备查）：**
- 存 localStorage + 云同步，启动时注入 `--ebk-theme-color` CSS 变量
- 移动端 f7params / 桌面端 Vuetify theme 从设置读取
- 预设颜色复用账户 14 色调板
---
@@ -126,12 +125,15 @@
## 七、分类选择
### 10. ❓ 分类选择默认全部展开（待定）
**描述：** 在记账页选择分类时，默认展开所有一级分类。
### 10. 🟢 分类选择默认全部展开（仅移动端）
**描述：** 在移动端记账页选择分类时，默认展开所有一级分类。PC 端使用不同的分类选择组件，无需此设置。
**实现思路：**
- 修改 `TreeViewSelectionSheet.vue` 中展开状态的初始值
- 涉及文件：`src/components/mobile/TreeViewSelectionSheet.vue`
**已完成：**
- 设置存 localStorage（字段 `expandCategoryTreeByDefault`，默认 `false`），即时生效无需 reload
- `TreeViewSelectionSheet` 新增可选 prop `defaultExpanded`，`:opened` 改为 `props.defaultExpanded || isPrimaryItemHasSecondaryValue(item)`
- 移动端 EditPage 三个分类 sheet（支出/收入/转账）均传入 `:default-expanded`
- 设置仅在移动端设置页显示，PC 端无对应入口
- 涉及文件：`src/components/mobile/TreeViewSelectionSheet.vue`、`src/views/mobile/transactions/EditPage.vue`、`src/views/mobile/SettingsPage.vue`
---
@@ -170,7 +172,7 @@
| # | 需求 | 状态 |
|---|------|------|
| 1 | 自选主题色 | ⚠️ 待做 |
| 1 | 自选主题色 | ❌ 已 revert |
| 2 | 信用卡额度 | 🟢 已完成 |
| 3 | 账户信息卡片 | 🟢 已完成 |
| 4 | 调整余额入口 | 🟢 已完成 |
@@ -179,7 +181,7 @@
| 7 | 小键盘布局 | 🟢 已完成 |
| 8 | 详情编辑/删除 | 🟢 已完成 |
| 9 | 点击时间默认日期选择器 | 🟢 已完成 |
| 10 | 分类默认展开 | ❓ 待定 |
| 10 | 分类默认展开 | 🟢 已完成 |
| 11 | 全局动画加速 | 🟢 已完成 |
| 12 | 点击卡顿优化 | 🔍 暂调查 |
| 13 | 离线缓存 | ❌ 暂缓 |
src/components/mobile/TreeViewSelectionSheet.vue
+2 -1
View File
@@ -21,7 +21,7 @@
</f7-list>
<f7-treeview class="tree-view-selection-treeview">
<f7-treeview-item item-toggle
:opened="isPrimaryItemHasSecondaryValue(item)"
:opened="props.defaultExpanded || isPrimaryItemHasSecondaryValue(item)"
:label="ti((primaryTitleField ? item[primaryTitleField] : item) as string, !!primaryTitleI18n)"
:key="primaryKeyField ? item[primaryKeyField] : item"
v-for="item in filteredItems">
@@ -59,6 +59,7 @@ import { type Framework7Dom, scrollSheetToTop } from '@/lib/ui/mobile.ts';
interface MobileTwoLevelItemSelectionBaseProps extends TwoLevelItemSelectionBaseProps {
show: boolean;
defaultExpanded?: boolean;
}
const props = defineProps<MobileTwoLevelItemSelectionBaseProps>();
src/core/setting.ts
+2
View File
@@ -36,6 +36,7 @@ export interface ApplicationSettings extends BaseApplicationSetting {
showAccountBalance: boolean;
swipeBack: boolean;
animate: boolean;
expandCategoryTreeByDefault: boolean;
// Application Lock
applicationLock: boolean;
applicationLockWebAuthn: boolean;
@@ -174,6 +175,7 @@ export const DEFAULT_APPLICATION_SETTINGS: ApplicationSettings = {
showAccountBalance: true,
swipeBack: true,
animate: true,
expandCategoryTreeByDefault: false,
// Application Lock
applicationLock: false,
applicationLockWebAuthn: false,
src/locales/en.json
+1
View File
@@ -2282,6 +2282,7 @@
"Exchange Rate": "Exchange Rate",
"Enable Swipe Back": "Enable Swipe Back",
"Enable Animation": "Enable Animation",
"Expand Category List By Default": "Expand Category List By Default",
"Basic Information": "Basic Information",
"User Information": "User Information",
"Already have an account?": "Already have an account?",
src/locales/zh_Hans.json
+1
View File
@@ -2282,6 +2282,7 @@
"Exchange Rate": "汇率",
"Enable Swipe Back": "启用侧滑返回",
"Enable Animation": "启用动画",
"Expand Category List By Default": "默认展开分类列表",
"Basic Information": "基本信息",
"User Information": "用户信息",
"Already have an account?": "已经有账号？",
src/locales/zh_Hant.json
+1
View File
@@ -2282,6 +2282,7 @@
"Exchange Rate": "匯率",
"Enable Swipe Back": "啟用滑動返回",
"Enable Animation": "啟用動畫",
"Expand Category List By Default": "預設展開分類列表",
"Basic Information": "基本資訊",
"User Information": "使用者資訊",
"Already have an account?": "已經有帳號？",
src/stores/setting.ts
+6
View File
@@ -171,6 +171,11 @@ export const useSettingsStore = defineStore('settings', () => {
appSettings.value.animate = value;
}
function setExpandCategoryTreeByDefault(value: boolean): void {
updateApplicationSettingsValue('expandCategoryTreeByDefault', value);
appSettings.value.expandCategoryTreeByDefault = value;
}
// Application Lock
function setEnableApplicationLock(value: boolean): void {
updateApplicationSettingsValue('applicationLock', value);
@@ -528,6 +533,7 @@ export const useSettingsStore = defineStore('settings', () => {
setShowAccountBalance,
setEnableSwipeBack,
setEnableAnimate,
setExpandCategoryTreeByDefault,
// -- Application Lock
setEnableApplicationLock,
setEnableApplicationLockWebAuthn,
src/views/mobile/SettingsPage.vue
+16 -1
View File
@@ -108,6 +108,15 @@
</template>
</f7-list-item>
<f7-list-item>
<template #after-title>
{{ tt('Expand Category List By Default') }}
</template>
<template #after>
<f7-toggle :checked="expandCategoryTreeByDefault" @toggle:change="expandCategoryTreeByDefault = $event"></f7-toggle>
</template>
</f7-list-item>
<f7-list-item :title="tt('Browser Cache Management')" link="/settings/browser_caches"></f7-list-item>
<f7-list-item link="#" no-chevron :title="tt('Switch to Desktop Version')" @click="switchToDesktopVersion"></f7-list-item>
@@ -153,7 +162,6 @@ const version = `${getClientDisplayVersion()}`;
const logouting = ref<boolean>(false);
const showThemePopup = ref<boolean>(false);
const showTimezonePopup = ref<boolean>(false);
const currentNickName = computed<string>(() => userStore.currentUserNickname || tt('User'));
const currentTheme = computed<string>({
@@ -176,6 +184,13 @@ const currentTimezoneName = computed<string>(() => {
return '';
});
const expandCategoryTreeByDefault = computed<boolean>({
get: () => settingsStore.appSettings.expandCategoryTreeByDefault,
set: value => {
settingsStore.setExpandCategoryTreeByDefault(value);
}
});
const isEnableSwipeBack = computed<boolean>({
get: () => settingsStore.appSettings.swipeBack,
set: value => {
src/views/mobile/transactions/EditPage.vue
+3
View File
@@ -119,6 +119,7 @@
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
:default-expanded="settingsStore.appSettings.expandCategoryTreeByDefault"
:items="allCategories[CategoryType.Expense]"
v-model:show="showCategorySheet"
v-model="transaction.expenseCategoryId">
@@ -151,6 +152,7 @@
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
:default-expanded="settingsStore.appSettings.expandCategoryTreeByDefault"
:items="allCategories[CategoryType.Income]"
v-model:show="showCategorySheet"
v-model="transaction.incomeCategoryId">
@@ -183,6 +185,7 @@
secondary-icon-field="icon" secondary-icon-type="category" secondary-color-field="color"
secondary-hidden-field="hidden"
:enable-filter="true" :filter-placeholder="tt('Find category')" :filter-no-items-text="tt('No available category')"
:default-expanded="settingsStore.appSettings.expandCategoryTreeByDefault"
:items="allCategories[CategoryType.Transfer]"
v-model:show="showCategorySheet"
v-model="transaction.transferCategoryId">