feat:重构模块

src/components/Password/PasswordCard.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="password-card card-item">
+    <el-avatar class="avatar-info">{{ passwordItem.title.charAt(0) }}</el-avatar>
+
+    <div class="title-info">
+      <span>{{ passwordItem.title }}</span>
+      <span>{{ passwordItem.username }}</span>
+    </div>
+
+    <div class="button-info">
+      <el-button type="primary" :icon="Edit" circle
+                 @click="editClick"/>
+      <el-button type="danger" :icon="DeleteFilled" circle
+                 @click="deleteClick()" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Edit, DeleteFilled } from '@element-plus/icons-vue'
+import { usePasswordStore } from '@/store/password.ts'
+import { defineProps, onMounted, PropType } from 'vue'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { useRouter } from 'vue-router'
+import { IPassword } from '@/types/password.ts'
+
+const passwordStore = usePasswordStore()
+const router = useRouter()
+
+const props = defineProps({
+  passwordItem: {
+    required: true,
+    type: Object as PropType<IPassword>
+  }
+})
+
+onMounted(() => {
+
+})
+
+const editClick = async () => {
+  const id = props.passwordItem?.id
+  passwordStore.passwordApiType = 'UPDATE'
+
+  passwordStore.currentPassword = props.passwordItem as IPassword
+  await router.push({ name: 'PasswordDetailId', params: { id } })
+}
+
+const deleteClick = () => {
+  passwordStore.passwordApiType = 'DELETE'
+  commonElMessageBox(`请确认是否删除该密码记录: ${props.passwordItem?.title}?`).then(() => {
+    passwordStore.handlePasswordApi(props.passwordItem as IPassword)
+  })
+}
+</script>
+
+<style lang="scss">
+.password-card {
+  padding: 10px;
+
+  display: grid;
+  grid-template-columns: 40px 1fr 80px;
+  align-items: center;
+  gap: 10px;
+
+  .avatar-info {
+    background-color: var(--el-color-primary);
+  }
+
+  .title-info {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+}
+</style>

src/components/Password/PasswordQuery.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="mobile-common-query card-item">
+    <div class="query-item">
+      <span>分类：</span>
+      <el-segmented v-model="passwordStore.queryInfo.category"
+                    :options="queryCategoryList"
+                    @change="passwordStore.queryPasswordList()"/>
+    </div>
+
+    <div class="query-item">
+      <span>所属人：</span>
+      <el-segmented v-model="passwordStore.queryInfo.owner"
+                    :options="queryOrderList"
+                    @change="passwordStore.queryPasswordList()"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { usePasswordStore } from '@/store/password.ts'
+import { ICategory } from '@/types'
+
+const passwordStore = usePasswordStore()
+
+const queryCategoryList = ref([] as ICategory[])
+
+onMounted(async () => {
+  await passwordStore.queryPasswordCategory()
+  initCategoryList()
+})
+
+const queryOrderList = [
+  {
+    label: '哥哥',
+    value: '哥哥'
+  }, {
+    label: '宝宝',
+    value: '宝宝'
+  }
+]
+
+const initCategoryList = () => {
+  queryCategoryList.value = []
+  queryCategoryList.value.push({
+    label: '全部',
+    value: ''
+  })
+  passwordStore.categoryList.forEach((item) => {
+    queryCategoryList.value.push({
+      label: item,
+      value: item
+    })
+  })
+}
+</script>