feat: 增加密码管理模块

src/views/mobile-home/meta.ts

@@ -239,10 +239,20 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '内容',
     icon: ''
   },
+  '/mobile-home/password': {
+    title: '密码',
+    icon: 'home-password',
+    order: 14,
+    redirect: '/mobile-home/password/list'
+  },
+  '/mobile-home/password/list': {
+    title: '清单',
+    icon: ''
+  },
   '/mobile-home/profile': {
     title: '个人信息',
     icon: '',
-    order: 14,
+    order: 15,
     hidden: true,
     redirect: '/mobile-home/profile/index'
   },

src/views/mobile-home/password/detail[id].vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="mobile-password-detail common-mobile-view">
+    <el-form ref="formRef" :model="passwordStore.currentPassword"
+             :rules="rules" label-width="70px">
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="passwordStore.currentPassword.title" autocomplete="off"
+                  placeholder="请输入标题" clearable
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="账号" prop="username">
+        <el-input v-model="passwordStore.currentPassword.username" autocomplete="off"
+                  placeholder="请输入账号" clearable
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="密码" prop="password">
+        <el-input v-model="passwordStore.currentPassword.password" autocomplete="off"
+                  placeholder="请输入密码" type="password" clearable
+                  show-password show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="网站">
+        <el-input v-model="passwordStore.currentPassword.website" autocomplete="off"
+                  placeholder="请输入网站" clearable
+                  type="textarea" :rows="3"
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="所属人" prop="owner">
+        <el-select v-model="passwordStore.currentPassword.owner"
+                   placeholder="请选择所属人" clearable>
+          <el-option
+              v-for="(item, index) in ['哥哥', '宝宝']"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="分类">
+        <el-select v-model="passwordStore.currentPassword.category"
+                   placeholder="请选择物品分类" clearable
+                   :allow-create="true" :filterable="true">
+          <el-option
+              v-for="(item, index) in passwordStore.categoryList"
+              :key="index" :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="备注">
+        <el-input v-model="passwordStore.currentPassword.remark" autocomplete="off"
+                  placeholder="请输入备注" clearable
+                  type="textarea" :rows="3"
+                  show-word-limit maxlength="20">
+        </el-input>
+      </el-form-item>
+    </el-form>
+
+    <div class="button-container">
+      <el-button type="primary" @click="confirmClick">确认</el-button>
+      <el-button type="info" @click="cancelClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { usePasswordStore } from '@/store/password.ts'
+import { useAppStore } from '@/store/app.ts'
+import { FormRules } from 'element-plus'
+import { passwordRules } from '@/utils/element/elRules'
+import { onMounted, reactive, ref } from 'vue'
+
+const formRef = ref()
+const rules = reactive<FormRules>(passwordRules)
+const passwordStore = usePasswordStore()
+const appStore = useAppStore()
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+})
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await passwordStore.handlePasswordApi(passwordStore.currentPassword)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+</script>
+
+<style scoped lang="scss">
+.mobile-password-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>

src/views/mobile-home/password/list.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="mobile-product-list common-mobile-view">
+    <password-query />
+
+    <el-empty v-if="passwordStore.passwordList.length === 0" description="暂无密码记录"/>
+
+    <div v-else class="product-list">
+      <password-card v-for="(item, index) in passwordStore.passwordList"
+                    :key="index" :password-item="item"/>
+    </div>
+
+    <draggable-button @click="addClick"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DraggableButton from '@/components/Mobile/DraggableButton.vue'
+import PasswordQuery from '@/components/Home/Password/PasswordQuery.vue'
+import PasswordCard from '@/components/Home/Password/PasswordCard.vue'
+import { usePasswordStore } from '@/store/password.ts'
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const passwordStore = usePasswordStore()
+const router = useRouter()
+
+onMounted(async () => {
+  await passwordStore.queryPasswordList()
+})
+
+const addClick = () => {
+  passwordStore.passwordApiType = 'ADD'
+  passwordStore.currentPassword = passwordStore.getEmptyPassword()
+  router.push({ name: 'MobileHomePasswordDetailId', params: { id: 0 } })
+}
+</script>
+
+<style lang="scss">
+.mobile-product-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .product-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+</style>

src/views/mobile/index.vue

@@ -68,6 +68,10 @@
                    title="家庭账本" sub-title="守护家庭财富"
                    router="/mobile-home/ledger/list"/>
 
+      <module-card icon="iconfont icon-ai-password" color="#4361EE"
+                   title="密码管家" sub-title="守护数字安全"
+                   router="/mobile-home/password/list"/>
+
       <module-card icon="iconfont icon-fuwuqi" color="#FF6B6B"
                    title="服务监控" sub-title="掌握系统健康"
                    router="/mobile-home/server/monitor"/>