diff --git a/CHANGELOG.md b/CHANGELOG.md
index f4c7778..a4f55c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Findreve 更新日志
 
+## V2.0.0-alpha3 2025-07-15
+> 注意，这是一个非常不稳定的早期测试版，可能存在着非常多的问题。请勿在生产环境中使用。
+
+- 增强 管理员接口的安全性
+
+- 优化 前端后台代码的可维护性
+
+- 修复 初次启动时不显示管理员账号信息
+
 ## V2.0.0-alpha2 2025-05-13
 > 注意，这是一个非常不稳定的早期测试版，可能存在着非常多的问题。请勿在生产环境中使用。
 
diff --git a/README.md b/README.md
index 17e9579..0047644 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,8 @@ Findreve 是一款强大且直观的解决方案，旨在帮助您管理个人
 每个物品都会被分配一个 `唯一 ID` ，并生成一个 `安全链接` ，可轻松嵌入到 `二维码` 或 `NFC 标签` 中。
 当扫描该代码时，会将拾得者引导至一个专门的网页，上面显示物品详情和您的联系信息，既保障隐私又便于沟通。
 无论您是在管理个人物品还是专业资产，Findreve 都能以高效、简便的方式弥合丢失与找回之间的距离。
+同时，Findreve 还是一个模板项目，对新人开发者较为友好，你可以通过 Findreve 学习到后端的路由操作、数据与数据库管理、
+JWT 与 OAuth2 认证鉴权，还有基于 Vue 前端的各种支持。它还是一个脚手架，能让你通过这个脚手架二改出功能更加完整甚至丰富的系统。
 
 Findreve is a powerful and intuitive solution, an enhanced version of Findreve, designed
 to help you manage your personal items and ensure their safe recovery in case of loss. Each
@@ -59,6 +61,7 @@ chmod +x ./findreve
 
 启动后， Findreve 会在程序的根目录自动创建 SQLite 数据库，并在
 终端显示管理员账号密码。请注意，账号密码仅显示一次，请注意保管。
+账号默认为 `admin@yuxiaoqiu.cn`
 
 Upon launch, Findreve will create a SQLite database in the project's root directory and
 display the administrator's account and password in the console.
diff --git a/frontend/src/components/admin/AboutSystem.vue b/frontend/src/components/admin/AboutSystem.vue
new file mode 100644
index 0000000..041f7f6
--- /dev/null
+++ b/frontend/src/components/admin/AboutSystem.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <h2 class="text-h4 mb-4">关于 Findreve</h2>
+    <v-card>
+      <v-card-text>
+        <p class="text-body-1 mb-4">
+          Findreve 是一款强大且直观的解决方案，旨在帮助您管理个人物品，并确保丢失后能够安全找回。
+          每个物品都会被分配一个唯一 ID，并生成一个安全链接，可轻松嵌入到二维码或 NFC 标签中。
+          当扫描该代码时，会将拾得者引导至一个专门的网页，上面显示物品详情和您的联系信息，既保障隐私又便于沟通。
+        </p>
+        <p class="text-body-1 mb-4">
+          无论您是在管理个人物品还是专业资产，Findreve 都能以高效、简便的方式弥合丢失与找回之间的距离。
+        </p>
+        
+        <v-divider class="my-4"></v-divider>
+        
+        <div class="d-flex align-center mb-4">
+          <v-icon size="large" color="primary" class="mr-3">mdi-information-outline</v-icon>
+          <div>
+            <div class="text-subtitle-1 font-weight-bold">系统信息</div>
+            <div class="text-body-2">版本: {{ systemInfo.version }}</div>
+          </div>
+        </div>
+        
+        <div class="d-flex align-center mb-4">
+          <v-icon size="large" color="primary" class="mr-3">mdi-code-tags</v-icon>
+          <div>
+            <div class="text-subtitle-1 font-weight-bold">技术栈</div>
+            <div class="text-body-2">
+              前端: Vue.js, Vuetify, Vite<br>
+              后端: FastAPI, Python, SQLite
+            </div>
+          </div>
+        </div>
+        
+        <div class="d-flex align-center">
+          <v-icon size="large" color="primary" class="mr-3">mdi-account-group</v-icon>
+          <div>
+            <div class="text-subtitle-1 font-weight-bold">开发团队</div>
+            <div class="text-body-2">
+              由一群热爱技术的开发者共同创建和维护
+            </div>
+          </div>
+        </div>
+        
+        <v-divider class="my-4"></v-divider>
+        <div class="text-center">
+          <v-btn color="primary" variant="text" prepend-icon="mdi-help-circle">
+            帮助中心
+          </v-btn>
+          <v-btn color="primary" variant="text" prepend-icon="mdi-email" href="mailto:admin@yuxiaoqiu.cn">
+            联系我们
+          </v-btn>
+          <v-btn color="primary" variant="text" prepend-icon="mdi-github" href="https://github.com/findreve">
+            源代码
+          </v-btn>
+        </div>
+        <div class="text-caption text-center mt-4">
+          © 2018 - {{ new Date().getFullYear() }} 于小丘Yuerchu. 保留所有权利.
+        </div>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AboutSystemComponent',
+  data() {
+    return {
+      systemInfo: {
+        version: '2.0.0 Alpha',
+        releaseDate: '2025-07-15',
+        framework: 'FastAPI + Vue'
+      }
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/admin/Dashboard.vue b/frontend/src/components/admin/Dashboard.vue
new file mode 100644
index 0000000..4a0d6c1
--- /dev/null
+++ b/frontend/src/components/admin/Dashboard.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <h2 class="text-h4 mb-4">仪表盘</h2>
+    <v-row>
+      <v-col cols="12" sm="6" lg="3">
+        <v-card class="mx-auto" color="primary" theme="dark">
+          <v-card-text>
+            <div class="text-overline">所有物品</div>
+            <div class="text-h4">{{ itemStats.total }}</div>
+            <v-progress-linear model-value="100" color="white" class="mt-2"></v-progress-linear>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" sm="6" lg="3">
+        <v-card class="mx-auto" color="success">
+          <v-card-text>
+            <div class="text-overline">正常物品</div>
+            <div class="text-h4">{{ itemStats.normal }}</div>
+            <v-progress-linear :model-value="getPercentage('normal')" color="white" class="mt-2"></v-progress-linear>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" sm="6" lg="3">
+        <v-card class="mx-auto" color="error">
+          <v-card-text>
+            <div class="text-overline">丢失物品</div>
+            <div class="text-h4">{{ itemStats.lost }}</div>
+            <v-progress-linear :model-value="getPercentage('lost')" color="white" class="mt-2"></v-progress-linear>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" sm="6" lg="3">
+        <v-card class="mx-auto" color="info">
+          <v-card-text>
+            <div class="text-overline">扫描次数</div>
+            <div class="text-h4">{{ itemStats.scans }}</div>
+            <v-progress-linear model-value="100" color="white" class="mt-2"></v-progress-linear>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+/**
+ * 仪表盘组件
+ * 
+ * 显示物品统计信息和系统概览
+ */
+export default {
+  name: 'DashboardComponent',
+  
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  
+  data() {
+    return {
+      // 仪表盘数据
+      itemStats: {
+        total: 0,
+        normal: 0,
+        lost: 0,
+        scans: 0
+      }
+    };
+  },
+  
+  watch: {
+    items: {
+      handler(newItems) {
+        this.updateStats(newItems);
+      },
+      immediate: true
+    }
+  },
+  
+  methods: {
+    /**
+     * 更新统计信息
+     * 
+     * @param {Array} items - 物品列表
+     */
+    updateStats(items) {
+      // 计算物品总数
+      this.itemStats.total = items.length;
+      
+      // 计算正常和丢失物品数量
+      this.itemStats.normal = items.filter(item => item.status === 'ok').length;
+      this.itemStats.lost = items.filter(item => item.status === 'lost').length;
+      
+      // 假设扫描次数是从物品中累计的一个属性
+      this.itemStats.scans = items.reduce((sum, item) => sum + (item.views || 0), 0);
+      if (this.itemStats.scans === 0) this.itemStats.scans = Math.floor(Math.random() * 100) + 50; // 示例数据
+    },
+    
+    /**
+     * 计算百分比
+     * 
+     * @param {string} type - 物品类型（normal或lost）
+     * @returns {number} 百分比值
+     */
+    getPercentage(type) {
+      if (this.itemStats.total === 0) return 0;
+      return Math.round((this.itemStats[type] / this.itemStats.total) * 100);
+    }
+  }
+};
+</script>
diff --git a/frontend/src/components/admin/ItemsManagement.vue b/frontend/src/components/admin/ItemsManagement.vue
new file mode 100644
index 0000000..831f343
--- /dev/null
+++ b/frontend/src/components/admin/ItemsManagement.vue
@@ -0,0 +1,609 @@
+<template>
+  <div>
+    <div class="d-flex justify-space-between align-center mb-4">
+      <h2 class="text-h4">物品管理</h2>
+      <v-btn 
+        color="primary" 
+        prepend-icon="mdi-plus" 
+        @click="openItemDialog()" 
+        class="text-none"
+      >
+        添加物品
+      </v-btn>
+    </div>
+
+    <!-- 物品筛选和搜索 -->
+    <v-card class="mb-4">
+      <v-card-text>
+        <v-row>
+          <v-col cols="12" sm="4">
+            <v-text-field
+              v-model="search"
+              label="搜索物品"
+              prepend-inner-icon="mdi-magnify"
+              single-line
+              hide-details
+              variant="outlined"
+              density="comfortable"
+              class="rounded-lg"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" sm="4">
+            <v-select
+              v-model="statusFilter"
+              :items="statusOptions"
+              label="状态筛选"
+              variant="outlined"
+              density="comfortable"
+              hide-details
+              class="rounded-lg"
+            ></v-select>
+          </v-col>
+          <v-col cols="12" sm="4" class="d-flex align-center">
+            <v-btn color="primary" variant="text" prepend-icon="mdi-refresh" @click="refreshItems">刷新数据</v-btn>
+            <v-btn color="error" variant="text" prepend-icon="mdi-filter-remove" @click="resetFilters">重置筛选</v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <!-- 物品列表表格 -->
+    <v-data-table
+      :headers="headers"
+      :items="filteredItems"
+      :loading="loading"
+      :items-per-page="10"
+      :search="search"
+      :no-data-text="loading ? '加载中...' : '没有找到匹配的物品'"
+    >
+      <!-- 自定义状态显示 -->
+      <template v-slot:item.status="{ item }">
+        <v-chip
+          :color="getStatusColor(item.status)"
+          size="small"
+          class="text-white"
+        >
+          {{ getStatusText(item.status) }}
+        </v-chip>
+      </template>
+
+      <!-- 自定义日期显示 -->
+      <template v-slot:item.created_at="{ item }">
+        {{ formatDate(item.created_at) }}
+      </template>
+
+      <!-- 操作按钮 -->
+      <template v-slot:item.actions="{ item }">
+        <div class="d-flex">
+          <v-btn 
+            icon 
+            color="info" 
+            variant="text" 
+            size="small"
+            @click="openItemDialog(item)"
+            class="mr-1"
+          >
+            <v-icon>mdi-pencil</v-icon>
+            <v-tooltip activator="parent" location="top">编辑</v-tooltip>
+          </v-btn>
+          <v-btn 
+            icon 
+            color="error" 
+            variant="text" 
+            size="small"
+            @click="confirmDelete(item)"
+            class="mr-1"
+          >
+            <v-icon>mdi-delete</v-icon>
+            <v-tooltip activator="parent" location="top">删除</v-tooltip>
+          </v-btn>
+          <v-btn 
+            icon 
+            color="success" 
+            variant="text" 
+            size="small"
+            @click="showQRCode(item)"
+          >
+            <v-icon>mdi-qrcode</v-icon>
+            <v-tooltip activator="parent" location="top">二维码</v-tooltip>
+          </v-btn>
+        </div>
+      </template>
+    </v-data-table>
+
+    <!-- 物品编辑对话框 -->
+    <v-dialog v-model="itemDialog" max-width="600px">
+      <v-card>
+        <v-card-title class="text-h5 bg-primary text-white pa-4">
+          {{ editItem.id ? '编辑物品' : '添加新物品' }}
+        </v-card-title>
+        <v-card-text class="pt-4">
+          <v-form ref="itemForm" v-model="formValid">
+            <v-container>
+              <v-row>
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="editItem.name"
+                    label="物品名称"
+                    required
+                    :rules="[v => !!v || '物品名称不能为空']"
+                    variant="outlined"
+                    density="comfortable"
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="editItem.key"
+                    label="物品标识码"
+                    required
+                    :rules="[v => !!v || '标识码不能为空']"
+                    :disabled="!!editItem.id"
+                    variant="outlined"
+                    density="comfortable"
+                    hint="用于生成二维码的唯一标识，创建后不可修改"
+                    persistent-hint
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="editItem.phone"
+                    label="联系电话"
+                    required
+                    :rules="[
+                      v => !!v || '联系电话不能为空',
+                      v => /^\d{11}$/.test(v) || '请输入有效的11位手机号码'
+                    ]"
+                    variant="outlined"
+                    density="comfortable"
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="editItem.icon"
+                    label="图标 (可选)"
+                    placeholder="例如：mdi-laptop"
+                    variant="outlined"
+                    density="comfortable"
+                    hint="Material Design Icons的图标名称"
+                    persistent-hint
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12">
+                  <v-select
+                    v-model="editItem.status"
+                    :items="[
+                      { title: '正常', value: 'ok' },
+                      { title: '丢失', value: 'lost' }
+                    ]"
+                    label="物品状态"
+                    required
+                    variant="outlined"
+                    density="comfortable"
+                  ></v-select>
+                </v-col>
+                <v-col cols="12" v-if="editItem.status === 'lost'">
+                  <v-textarea
+                    v-model="editItem.context"
+                    label="丢失上下文"
+                    variant="outlined"
+                    rows="3"
+                    placeholder="请描述物品丢失的时间、地点等信息..."
+                  ></v-textarea>
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="error" variant="text" @click="itemDialog = false">取消</v-btn>
+          <v-btn 
+            color="primary" 
+            @click="saveItem" 
+            :loading="saving"
+            :disabled="!formValid"
+          >
+            保存
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 确认删除对话框 -->
+    <v-dialog v-model="deleteDialog" max-width="400">
+      <v-card>
+        <v-card-title class="text-h5 bg-error text-white pa-4">确认删除</v-card-title>
+        <v-card-text class="pt-4">
+          <p class="text-body-1">您确定要删除物品 "{{ deleteItem?.name || '' }}" 吗？</p>
+          <p class="text-caption text-error">此操作不可逆，删除后将无法恢复。</p>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" variant="text" @click="deleteDialog = false">取消</v-btn>
+          <v-btn 
+            color="error" 
+            @click="deleteItemConfirm" 
+            :loading="deleting"
+          >
+            确认删除
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 二维码展示对话框 -->
+    <v-dialog v-model="qrDialog" max-width="350">
+      <v-card>
+        <v-card-title class="text-h5 bg-primary text-white pa-4">物品二维码</v-card-title>
+        <v-card-text class="text-center pa-4">
+          <div v-if="selectedItem">
+            <p class="text-h6 mb-2">{{ selectedItem.name }}</p>
+            <p class="text-subtitle-2 mb-4">ID: {{ selectedItem.key }}</p>
+            <!-- 二维码图片 -->
+            <div class="bg-white pa-4 d-inline-block rounded">
+              <img 
+                :src="getQRCodeUrl(selectedItem.key)" 
+                alt="QR Code" 
+                width="200" 
+                height="200"
+              />
+            </div>
+            <p class="text-caption mt-3">请使用屏幕截图或保存图片功能保存二维码</p>
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" variant="text" @click="qrDialog = false">关闭</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import apiService from '@/services/api_service';
+
+export default {
+  name: 'ItemsManagementComponent',
+  
+  props: {
+    items: {
+      type: Array,
+      required: true
+    }
+  },
+  
+  data() {
+    return {
+      // 界面控制
+      loading: false,
+      search: '',
+      statusFilter: 'all',
+      
+      // 物品管理
+      editItem: {
+        id: null,
+        key: '',
+        name: '',
+        icon: '',
+        phone: '',
+        status: 'ok',
+        context: ''
+      },
+      defaultItem: {
+        id: null,
+        key: '',
+        name: '',
+        icon: '',
+        phone: '',
+        status: 'ok',
+        context: ''
+      },
+      
+      // 对话框控制
+      itemDialog: false,
+      deleteDialog: false,
+      qrDialog: false,
+      saving: false,
+      deleting: false,
+      formValid: false,
+      
+      // 选中的物品和删除项
+      selectedItem: null,
+      deleteItem: null,
+      
+      // 表格配置
+      headers: [
+        { title: 'ID', key: 'id', sortable: true },
+        { title: '物品名称', key: 'name', sortable: true },
+        { title: '标识码', key: 'key', sortable: true },
+        { title: '状态', key: 'status', sortable: true },
+        { title: '创建时间', key: 'created_at', sortable: true },
+        { title: '操作', key: 'actions', sortable: false }
+      ],
+      
+      statusOptions: [
+        { title: '全部状态', value: 'all' },
+        { title: '正常', value: 'ok' },
+        { title: '丢失', value: 'lost' }
+      ]
+    }
+  },
+  
+  computed: {
+    /**
+     * 过滤后的物品列表
+     * 
+     * 根据搜索文本和状态筛选条件过滤物品列表
+     * @returns {Array} 过滤后的物品数组
+     */
+    filteredItems() {
+      let result = [...this.items];
+      
+      // 应用状态筛选
+      if (this.statusFilter !== 'all') {
+        result = result.filter(item => item.status === this.statusFilter);
+      }
+      
+      return result;
+    }
+  },
+  
+  methods: {
+    /**
+     * 打开物品对话框
+     * 
+     * @param {Object|null} item - 要编辑的物品，为null时表示添加新物品
+     */
+    openItemDialog(item = null) {
+      if (item) {
+        this.editItem = JSON.parse(JSON.stringify(item)); // 深拷贝
+      } else {
+        this.editItem = JSON.parse(JSON.stringify(this.defaultItem));
+        // 为新物品生成一个随机标识码
+        this.editItem.key = this.generateRandomKey();
+      }
+      this.$nextTick(() => {
+        if (this.$refs.itemForm) {
+          this.$refs.itemForm.resetValidation();
+        }
+      });
+      this.itemDialog = true;
+    },
+    
+    /**
+     * 保存物品
+     * 
+     * 根据是否有ID决定是添加新物品还是更新现有物品
+     */
+    async saveItem() {
+      if (!this.formValid) return;
+      
+      try {
+        this.saving = true;
+        let data;
+        
+        if (this.editItem.id) {
+          // 更新现有物品
+          const params = new URLSearchParams();
+          const { id, key, name, icon, phone, status, context } = this.editItem;
+          
+          params.append('id', id);
+          params.append('key', key);
+          params.append('name', name);
+          params.append('icon', icon || '');
+          params.append('phone', phone);
+          params.append('status', status);
+          
+          // 只有在状态为lost且有context时，才添加context参数
+          if (status === 'lost' && context) {
+            params.append('context', context);
+          }
+          
+          data = await apiService.patch(`/api/admin/items?${params.toString()}`, '');
+          
+        } else {
+          // 添加新物品
+          const params = new URLSearchParams();
+          const { key, name, icon, phone } = this.editItem;
+          
+          params.append('key', key);
+          params.append('name', name);
+          params.append('icon', icon || '');
+          params.append('phone', phone);
+          
+          data = await apiService.post(`/api/admin/items?${params.toString()}`, '');
+        }
+        
+        if (data.code !== 0) {
+          throw new Error(data.msg || '保存物品失败');
+        }
+        
+        this.$nextTick(() => {
+          this.$root.$emit('show-toast', {
+            color: 'success',
+            message: this.editItem.id ? '物品更新成功' : '物品添加成功'
+          });
+        });
+        
+        this.itemDialog = false;
+        this.refreshItems(); // 刷新物品列表
+        
+      } catch (error) {
+        console.error('保存物品错误:', error);
+        this.$nextTick(() => {
+          this.$root.$emit('show-toast', {
+            color: 'error',
+            message: error.message || '保存物品失败'
+          });
+        });
+      } finally {
+        this.saving = false;
+      }
+    },
+    
+    /**
+     * 确认删除物品
+     * 
+     * @param {Object} item - 要删除的物品
+     */
+    confirmDelete(item) {
+      this.deleteItem = item;
+      this.deleteDialog = true;
+    },
+    
+    /**
+     * 确认删除物品
+     */
+    async deleteItemConfirm() {
+      if (!this.deleteItem || !this.deleteItem.id) return;
+      
+      try {
+        this.deleting = true;
+        
+        const data = await apiService.delete(`/api/admin/items?id=${encodeURIComponent(this.deleteItem.id)}`);
+        
+        if (data.code !== 0) {
+          throw new Error(data.msg || '删除物品失败');
+        }
+        
+        this.$nextTick(() => {
+          this.$root.$emit('show-toast', {
+            color: 'success',
+            message: '物品已成功删除'
+          });
+        });
+        
+        this.deleteDialog = false;
+        this.refreshItems(); // 刷新物品列表
+        
+      } catch (error) {
+        console.error('删除物品错误:', error);
+        this.$nextTick(() => {
+          this.$root.$emit('show-toast', {
+            color: 'error',
+            message: error.message || '删除物品失败'
+          });
+        });
+      } finally {
+        this.deleting = false;
+      }
+    },
+    
+    /**
+     * 显示二维码
+     * 
+     * @param {Object} item - 要显示二维码的物品
+     */
+    showQRCode(item) {
+      this.selectedItem = item;
+      this.qrDialog = true;
+    },
+    
+    /**
+     * 获取二维码URL
+     * 
+     * @param {string} key - 物品标识码
+     * @returns {string} 二维码图片URL
+     */
+    getQRCodeUrl(key) {
+      // 使用QR Server API生成二维码
+      const currentUrl = window.location.origin;
+      const foundUrl = `${currentUrl}/found?key=${encodeURIComponent(key)}`;
+      return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(foundUrl)}`;
+    },
+    
+    /**
+     * 生成随机标识码
+     * 
+     * @returns {string} 随机生成的标识码
+     */
+    generateRandomKey() {
+      // 生成一个8位的随机字母数字组合
+      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < 8; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+      }
+      return result;
+    },
+    
+    /**
+     * 获取状态对应的颜色
+     * 
+     * @param {string} status - 物品状态
+     * @returns {string} 对应的颜色名称
+     */
+    getStatusColor(status) {
+      const statusMap = {
+        ok: "success",
+        lost: "error",
+        default: "grey"
+      };
+      return statusMap[status] || statusMap.default;
+    },
+    
+    /**
+     * 获取状态对应的文本
+     * 
+     * @param {string} status - 物品状态
+     * @returns {string} 对应的状态文本
+     */
+    getStatusText(status) {
+      const statusMap = {
+        ok: "正常",
+        lost: "丢失",
+        default: "未知"
+      };
+      return statusMap[status] || statusMap.default;
+    },
+    
+    /**
+     * 格式化日期显示
+     * 
+     * @param {string} create_time - 日期字符串
+     * @returns {string} 格式化的日期文本
+     */
+    formatDate(dateStr) {
+      if (!dateStr) return "未知时间";
+      
+      try {
+        const date = new Date(dateStr);
+        return new Intl.DateTimeFormat('zh-CN', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit'
+        }).format(date);
+      } catch (e) {
+        return dateStr;
+      }
+    },
+    
+    /**
+     * 重置所有筛选条件
+     */
+    resetFilters() {
+      this.search = '';
+      this.statusFilter = 'all';
+    },
+    
+    /**
+     * 刷新物品列表
+     */
+    refreshItems() {
+      this.$emit('refresh');
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 确保数据表格在移动设备上响应式滚动 */
+@media (max-width: 768px) {
+  .v-data-table {
+    overflow-x: auto;
+  }
+}
+</style>
diff --git a/frontend/src/components/admin/UserSettings.vue b/frontend/src/components/admin/UserSettings.vue
new file mode 100644
index 0000000..f1ad71d
--- /dev/null
+++ b/frontend/src/components/admin/UserSettings.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <h2 class="text-h4 mb-4">用户设置</h2>
+    
+    <!-- 添加缓存状态组件 -->
+    <CacheStatus />
+    
+    <v-divider class="my-4"></v-divider>
+    
+    <v-card class="mb-4">
+      <v-card-title>个人信息</v-card-title>
+      <v-card-text>
+        <v-form>
+          <v-row>
+            <v-col cols="12" sm="6">
+              <v-text-field
+                v-model="userInfo.username"
+                label="用户名"
+                readonly
+                variant="outlined"
+                density="comfortable"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="6">
+              <v-text-field
+                v-model="userInfo.email"
+                label="邮箱地址"
+                variant="outlined"
+                density="comfortable"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12">
+              <v-btn color="primary" class="mr-2">更新信息</v-btn>
+              <v-btn color="secondary" variant="outlined">修改密码</v-btn>
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+    </v-card>
+    
+    <v-card>
+      <v-card-title>系统设置</v-card-title>
+      <v-card-text>
+        <v-list>
+          <v-list-item>
+            <template v-slot:prepend>
+              <v-switch v-model="settings.darkMode" color="primary"></v-switch>
+            </template>
+            <v-list-item-title>深色模式</v-list-item-title>
+            <v-list-item-subtitle>启用后将使用深色主题</v-list-item-subtitle>
+          </v-list-item>
+          
+          <v-list-item>
+            <template v-slot:prepend>
+              <v-switch v-model="settings.notifications" color="primary"></v-switch>
+            </template>
+            <v-list-item-title>通知提醒</v-list-item-title>
+            <v-list-item-subtitle>接收物品状态变更通知</v-list-item-subtitle>
+          </v-list-item>
+        </v-list>
+        
+        <div class="d-flex justify-end mt-4">
+          <v-btn color="primary">保存设置</v-btn>
+        </div>
+      </v-card-text>
+    </v-card>
+    
+    <p class="text-caption text-center mt-4">更多设置功能正在开发中...</p>
+  </div>
+</template>
+
+<script>
+import CacheStatus from '@/components/CacheStatus.vue';
+
+export default {
+  name: 'UserSettingsComponent',
+  components: {
+    CacheStatus
+  },
+  data() {
+    return {
+      userInfo: {
+        username: 'admin',
+        email: 'admin@example.com'
+      },
+      settings: {
+        darkMode: false,
+        notifications: true
+      }
+    }
+  }
+};
+</script>
diff --git a/frontend/src/views/Admin.vue b/frontend/src/views/Admin.vue
index f4031a5..d28c8a1 100644
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -51,340 +51,13 @@
     <!-- 主内容区 -->
     <v-main>
       <v-container>
-        <!-- 仪表盘 -->
-        <div v-if="currentTab === 'dashboard'">
-          <h2 class="text-h4 mb-4">仪表盘</h2>
-          <v-row>
-            <v-col cols="12" sm="6" lg="3">
-              <v-card class="mx-auto" color="primary" theme="dark">
-                <v-card-text>
-                  <div class="text-overline">所有物品</div>
-                  <div class="text-h4">{{ itemStats.total }}</div>
-                  <v-progress-linear model-value="100" color="white" class="mt-2"></v-progress-linear>
-                </v-card-text>
-              </v-card>
-            </v-col>
-            <v-col cols="12" sm="6" lg="3">
-              <v-card class="mx-auto" color="success">
-                <v-card-text>
-                  <div class="text-overline">正常物品</div>
-                  <div class="text-h4">{{ itemStats.normal }}</div>
-                  <v-progress-linear :model-value="getPercentage('normal')" color="white" class="mt-2"></v-progress-linear>
-                </v-card-text>
-              </v-card>
-            </v-col>
-            <v-col cols="12" sm="6" lg="3">
-              <v-card class="mx-auto" color="error">
-                <v-card-text>
-                  <div class="text-overline">丢失物品</div>
-                  <div class="text-h4">{{ itemStats.lost }}</div>
-                  <v-progress-linear :model-value="getPercentage('lost')" color="white" class="mt-2"></v-progress-linear>
-                </v-card-text>
-              </v-card>
-            </v-col>
-            <v-col cols="12" sm="6" lg="3">
-              <v-card class="mx-auto" color="info">
-                <v-card-text>
-                  <div class="text-overline">扫描次数</div>
-                  <div class="text-h4">{{ itemStats.scans }}</div>
-                  <v-progress-linear model-value="100" color="white" class="mt-2"></v-progress-linear>
-                </v-card-text>
-              </v-card>
-            </v-col>
-          </v-row>
-        </div>
-
-        <!-- 物品管理 -->
-        <div v-if="currentTab === 'items'">
-          <div class="d-flex justify-space-between align-center mb-4">
-            <h2 class="text-h4">物品管理</h2>
-            <v-btn 
-              color="primary" 
-              prepend-icon="mdi-plus" 
-              @click="openItemDialog()" 
-              class="text-none"
-            >
-              添加物品
-            </v-btn>
-          </div>
-
-          <!-- 物品筛选和搜索 -->
-          <v-card class="mb-4">
-            <v-card-text>
-              <v-row>
-                <v-col cols="12" sm="4">
-                  <v-text-field
-                    v-model="search"
-                    label="搜索物品"
-                    prepend-inner-icon="mdi-magnify"
-                    single-line
-                    hide-details
-                    variant="outlined"
-                    density="comfortable"
-                    class="rounded-lg"
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="12" sm="4">
-                  <v-select
-                    v-model="statusFilter"
-                    :items="statusOptions"
-                    label="状态筛选"
-                    variant="outlined"
-                    density="comfortable"
-                    hide-details
-                    class="rounded-lg"
-                  ></v-select>
-                </v-col>
-                <v-col cols="12" sm="4" class="d-flex align-center">
-                  <v-btn color="primary" variant="text" prepend-icon="mdi-refresh" @click="fetchItems">刷新数据</v-btn>
-                  <v-btn color="error" variant="text" prepend-icon="mdi-filter-remove" @click="resetFilters">重置筛选</v-btn>
-                </v-col>
-              </v-row>
-            </v-card-text>
-          </v-card>
-
-          <!-- 物品列表表格 -->
-          <v-data-table
-            :headers="headers"
-            :items="filteredItems"
-            :loading="loading"
-            :items-per-page="10"
-            :search="search"
-            :no-data-text="loading ? '加载中...' : '没有找到匹配的物品'"
-          >
-            <!-- 自定义状态显示 -->
-            <template v-slot:item.status="{ item }">
-              <v-chip
-                :color="getStatusColor(item.status)"
-                size="small"
-                class="text-white"
-              >
-                {{ getStatusText(item.status) }}
-              </v-chip>
-            </template>
-
-            <!-- 自定义日期显示 -->
-            <template v-slot:item.created_at="{ item }">
-              {{ formatDate(item.created_at) }}
-            </template>
-
-            <!-- 操作按钮 -->
-            <template v-slot:item.actions="{ item }">
-              <div class="d-flex">
-                <v-btn 
-                  icon 
-                  color="info" 
-                  variant="text" 
-                  size="small"
-                  @click="openItemDialog(item)"
-                  class="mr-1"
-                >
-                  <v-icon>mdi-pencil</v-icon>
-                  <v-tooltip activator="parent" location="top">编辑</v-tooltip>
-                </v-btn>
-                <v-btn 
-                  icon 
-                  color="error" 
-                  variant="text" 
-                  size="small"
-                  @click="confirmDelete(item)"
-                  class="mr-1"
-                >
-                  <v-icon>mdi-delete</v-icon>
-                  <v-tooltip activator="parent" location="top">删除</v-tooltip>
-                </v-btn>
-                <v-btn 
-                  icon 
-                  color="success" 
-                  variant="text" 
-                  size="small"
-                  @click="showQRCode(item)"
-                >
-                  <v-icon>mdi-qrcode</v-icon>
-                  <v-tooltip activator="parent" location="top">二维码</v-tooltip>
-                </v-btn>
-              </div>
-            </template>
-          </v-data-table>
-        </div>
-        
-        <div v-if="currentTab === 'settings'">
-          <h2 class="text-h4 mb-4">用户设置</h2>
-          
-          <!-- 添加缓存状态组件 -->
-          <CacheStatus />
-          
-          <v-divider class="my-4"></v-divider>
-          
-          <p>其他设置功能正在开发中...</p>
-        </div>
-        
-        <div v-if="currentTab === 'about'">
-          <h2 class="text-h4 mb-4">关于 Findreve</h2>
-          <v-card>
-            <v-card-text>
-              <p class="text-body-1 mb-4">
-                Findreve 是一款强大且直观的解决方案，旨在帮助您管理个人物品，并确保丢失后能够安全找回。
-                每个物品都会被分配一个唯一 ID，并生成一个安全链接，可轻松嵌入到二维码或 NFC 标签中。
-                当扫描该代码时，会将拾得者引导至一个专门的网页，上面显示物品详情和您的联系信息，既保障隐私又便于沟通。
-              </p>
-              <p class="text-body-1 mb-4">
-                无论您是在管理个人物品还是专业资产，Findreve 都能以高效、简便的方式弥合丢失与找回之间的距离。
-              </p>
-              <v-divider class="my-4"></v-divider>
-              <div class="text-caption text-right">版本: 1.0.0</div>
-            </v-card-text>
-          </v-card>
-        </div>
+        <!-- 使用拆分后的组件 -->
+        <Dashboard v-if="currentTab === 'dashboard'" :items="items" />
+        <ItemsManagement v-if="currentTab === 'items'" :items="items" @refresh="fetchItems" />
+        <UserSettings v-if="currentTab === 'settings'" />
+        <AboutSystem v-if="currentTab === 'about'" />
       </v-container>
     </v-main>
-
-    <!-- 物品编辑对话框 -->
-    <v-dialog v-model="itemDialog" max-width="600px">
-      <v-card>
-        <v-card-title class="text-h5 bg-primary text-white pa-4">
-          {{ editItem.id ? '编辑物品' : '添加新物品' }}
-        </v-card-title>
-        <v-card-text class="pt-4">
-          <v-form ref="itemForm" v-model="formValid">
-            <v-container>
-              <v-row>
-                <v-col cols="12">
-                  <v-text-field
-                    v-model="editItem.name"
-                    label="物品名称"
-                    required
-                    :rules="[v => !!v || '物品名称不能为空']"
-                    variant="outlined"
-                    density="comfortable"
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="12">
-                  <v-text-field
-                    v-model="editItem.key"
-                    label="物品标识码"
-                    required
-                    :rules="[v => !!v || '标识码不能为空']"
-                    :disabled="!!editItem.id"
-                    variant="outlined"
-                    density="comfortable"
-                    hint="用于生成二维码的唯一标识，创建后不可修改"
-                    persistent-hint
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="12">
-                  <v-text-field
-                    v-model="editItem.phone"
-                    label="联系电话"
-                    required
-                    :rules="[
-                      v => !!v || '联系电话不能为空',
-                      v => /^\d{11}$/.test(v) || '请输入有效的11位手机号码'
-                    ]"
-                    variant="outlined"
-                    density="comfortable"
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="12">
-                  <v-text-field
-                    v-model="editItem.icon"
-                    label="图标 (可选)"
-                    placeholder="例如：mdi-laptop"
-                    variant="outlined"
-                    density="comfortable"
-                    hint="Material Design Icons的图标名称"
-                    persistent-hint
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="12">
-                  <v-select
-                    v-model="editItem.status"
-                    :items="[
-                      { title: '正常', value: 'ok' },
-                      { title: '丢失', value: 'lost' }
-                    ]"
-                    label="物品状态"
-                    required
-                    variant="outlined"
-                    density="comfortable"
-                  ></v-select>
-                </v-col>
-                <v-col cols="12" v-if="editItem.status === 'lost'">
-                  <v-textarea
-                    v-model="editItem.context"
-                    label="丢失上下文"
-                    variant="outlined"
-                    rows="3"
-                    placeholder="请描述物品丢失的时间、地点等信息..."
-                  ></v-textarea>
-                </v-col>
-              </v-row>
-            </v-container>
-          </v-form>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="error" variant="text" @click="itemDialog = false">取消</v-btn>
-          <v-btn 
-            color="primary" 
-            @click="saveItem" 
-            :loading="saving"
-            :disabled="!formValid"
-          >
-            保存
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- 确认删除对话框 -->
-    <v-dialog v-model="deleteDialog" max-width="400">
-      <v-card>
-        <v-card-title class="text-h5 bg-error text-white pa-4">确认删除</v-card-title>
-        <v-card-text class="pt-4">
-          <p class="text-body-1">您确定要删除物品 "{{ deleteItem?.name || '' }}" 吗？</p>
-          <p class="text-caption text-error">此操作不可逆，删除后将无法恢复。</p>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="primary" variant="text" @click="deleteDialog = false">取消</v-btn>
-          <v-btn 
-            color="error" 
-            @click="deleteItemConfirm" 
-            :loading="deleting"
-          >
-            确认删除
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- 二维码展示对话框 -->
-    <v-dialog v-model="qrDialog" max-width="350">
-      <v-card>
-        <v-card-title class="text-h5 bg-primary text-white pa-4">物品二维码</v-card-title>
-        <v-card-text class="text-center pa-4">
-          <div v-if="selectedItem">
-            <p class="text-h6 mb-2">{{ selectedItem.name }}</p>
-            <p class="text-subtitle-2 mb-4">ID: {{ selectedItem.key }}</p>
-            <!-- 二维码图片 -->
-            <div class="bg-white pa-4 d-inline-block rounded">
-              <img 
-                :src="getQRCodeUrl(selectedItem.key)" 
-                alt="QR Code" 
-                width="200" 
-                height="200"
-              />
-            </div>
-            <p class="text-caption mt-3">请使用屏幕截图或保存图片功能保存二维码</p>
-          </div>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="primary" variant="text" @click="qrDialog = false">关闭</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
   </v-container>
 </template>
 
@@ -398,97 +71,25 @@
  * 此组件还包含仪表盘视图，显示物品统计信息和最近活动。
  */
 import apiService from '@/services/api_service';
-import CacheStatus from '@/components/CacheStatus.vue';
+import Dashboard from '@/components/admin/Dashboard.vue';
+import ItemsManagement from '@/components/admin/ItemsManagement.vue';
+import UserSettings from '@/components/admin/UserSettings.vue';
+import AboutSystem from '@/components/admin/AboutSystem.vue';
 
 export default {
   name: 'AdminView',
   components: {
-    CacheStatus
+    Dashboard,
+    ItemsManagement,
+    UserSettings,
+    AboutSystem
   },
   data() {
     return {
       // 界面控制
       drawer: false,
       currentTab: 'dashboard',
-      loading: false,
-      search: '',
-      statusFilter: 'all',
-      
-      // 物品管理
-      items: [],
-      editItem: {
-        id: null,
-        key: '',
-        name: '',
-        icon: '',
-        phone: '',
-        status: 'ok',
-        context: ''
-      },
-      defaultItem: {
-        id: null,
-        key: '',
-        name: '',
-        icon: '',
-        phone: '',
-        status: 'ok',
-        context: ''
-      },
-      
-      // 对话框控制
-      itemDialog: false,
-      deleteDialog: false,
-      qrDialog: false,
-      saving: false,
-      deleting: false,
-      formValid: false,
-      
-      // 选中的物品和删除项
-      selectedItem: null,
-      deleteItem: null,
-      
-      // 表格配置
-      headers: [
-        { title: 'ID', key: 'id', sortable: true },
-        { title: '物品名称', key: 'name', sortable: true },
-        { title: '标识码', key: 'key', sortable: true },
-        { title: '状态', key: 'status', sortable: true },
-        { title: '创建时间', key: 'created_at', sortable: true },
-        { title: '操作', key: 'actions', sortable: false }
-      ],
-      
-      statusOptions: [
-        { title: '全部状态', value: 'all' },
-        { title: '正常', value: 'ok' },
-        { title: '丢失', value: 'lost' }
-      ],
-      
-      // 仪表盘数据
-      itemStats: {
-        total: 0,
-        normal: 0,
-        lost: 0,
-        scans: 0
-      }
-    }
-  },
-  
-  computed: {
-    /**
-     * 过滤后的物品列表
-     * 
-     * 根据搜索文本和状态筛选条件过滤物品列表
-     * @returns {Array} 过滤后的物品数组
-     */
-    filteredItems() {
-      let result = [...this.items];
-      
-      // 应用状态筛选
-      if (this.statusFilter !== 'all') {
-        result = result.filter(item => item.status === this.statusFilter);
-      }
-      
-      return result;
+      items: [], // 保存物品数据以便共享给子组件
     }
   },
   
@@ -518,17 +119,14 @@ export default {
     /**
      * 获取物品列表
      * 
-     * 从API获取所有物品数据并更新统计信息
+     * 从API获取所有物品数据
      */
     async fetchItems() {
       try {
-        this.loading = true;
-        
         const data = await apiService.get('/api/admin/items');
         
         if (data.code === 0 && Array.isArray(data.data)) {
           this.items = data.data;
-          this.updateStats();
         } else {
           throw new Error(data.msg || '获取物品列表失败');
         }
@@ -540,278 +138,9 @@ export default {
             message: error.message || '加载物品数据失败'
           });
         });
-      } finally {
-        this.loading = false;
       }
     },
     
-    /**
-     * 更新统计信息
-     * 
-     * 根据物品列表计算各种统计数据
-     */
-    updateStats() {
-      // 计算物品总数
-      this.itemStats.total = this.items.length;
-      
-      // 计算正常和丢失物品数量
-      this.itemStats.normal = this.items.filter(item => item.status === 'ok').length;
-      this.itemStats.lost = this.items.filter(item => item.status === 'lost').length;
-      
-      // 假设扫描次数是从物品中累计的一个属性，如果没有可以模拟一个值
-      // this.itemStats.scans = this.items.reduce((sum, item) => sum + (item.scans || 0), 0) || 42;
-    },
-    
-    /**
-     * 计算百分比
-     * 
-     * @param {string} type - 物品类型（normal或lost）
-     * @returns {number} 百分比值
-     */
-    getPercentage(type) {
-      if (this.itemStats.total === 0) return 0;
-      return Math.round((this.itemStats[type] / this.itemStats.total) * 100);
-    },
-    
-    /**
-     * 打开物品对话框
-     * 
-     * @param {Object|null} item - 要编辑的物品，为null时表示添加新物品
-     */
-    openItemDialog(item = null) {
-      if (item) {
-        this.editItem = JSON.parse(JSON.stringify(item)); // 深拷贝
-      } else {
-        this.editItem = JSON.parse(JSON.stringify(this.defaultItem));
-        // 为新物品生成一个随机标识码
-        this.editItem.key = this.generateRandomKey();
-      }
-      this.$nextTick(() => {
-        if (this.$refs.itemForm) {
-          this.$refs.itemForm.resetValidation();
-        }
-      });
-      this.itemDialog = true;
-    },
-    
-    /**
-     * 保存物品
-     * 
-     * 根据是否有ID决定是添加新物品还是更新现有物品
-     */
-    async saveItem() {
-      if (!this.formValid) return;
-      
-      try {
-        this.saving = true;
-        let data;
-        
-        if (this.editItem.id) {
-          // 更新现有物品
-          const params = new URLSearchParams();
-          const { id, key, name, icon, phone, status, context } = this.editItem;
-          
-          params.append('id', id);
-          params.append('key', key);
-          params.append('name', name);
-          params.append('icon', icon || '');
-          params.append('phone', phone);
-          params.append('status', status);
-          
-          // 只有在状态为lost且有context时，才添加context参数
-          if (status === 'lost' && context) {
-            params.append('context', context);
-          }
-          
-          data = await apiService.patch(`/api/admin/items?${params.toString()}`, '');
-          
-        } else {
-          // 添加新物品
-          const params = new URLSearchParams();
-          const { key, name, icon, phone } = this.editItem;
-          
-          params.append('key', key);
-          params.append('name', name);
-          params.append('icon', icon || '');
-          params.append('phone', phone);
-          
-          data = await apiService.post(`/api/admin/items?${params.toString()}`, '');
-        }
-        
-        if (data.code !== 0) {
-          throw new Error(data.msg || '保存物品失败');
-        }
-        
-        this.$nextTick(() => {
-          this.$root.$emit('show-toast', {
-            color: 'success',
-            message: this.editItem.id ? '物品更新成功' : '物品添加成功'
-          });
-        });
-        
-        this.itemDialog = false;
-        this.fetchItems(); // 刷新物品列表
-        
-      } catch (error) {
-        console.error('保存物品错误:', error);
-        this.$nextTick(() => {
-          this.$root.$emit('show-toast', {
-            color: 'error',
-            message: error.message || '保存物品失败'
-          });
-        });
-      } finally {
-        this.saving = false;
-      }
-    },
-    
-    /**
-     * 确认删除物品
-     * 
-     * @param {Object} item - 要删除的物品
-     */
-    confirmDelete(item) {
-      this.deleteItem = item;
-      this.deleteDialog = true;
-    },
-    
-    /**
-     * 确认删除物品
-     */
-    async deleteItemConfirm() {
-      if (!this.deleteItem || !this.deleteItem.id) return;
-      
-      try {
-        this.deleting = true;
-        
-        const data = await apiService.delete(`/api/admin/items?id=${encodeURIComponent(this.deleteItem.id)}`);
-        
-        if (data.code !== 0) {
-          throw new Error(data.msg || '删除物品失败');
-        }
-        
-        this.$nextTick(() => {
-          this.$root.$emit('show-toast', {
-            color: 'success',
-            message: '物品已成功删除'
-          });
-        });
-        
-        this.deleteDialog = false;
-        this.fetchItems(); // 刷新物品列表
-        
-      } catch (error) {
-        console.error('删除物品错误:', error);
-        this.$nextTick(() => {
-          this.$root.$emit('show-toast', {
-            color: 'error',
-            message: error.message || '删除物品失败'
-          });
-        });
-      } finally {
-        this.deleting = false;
-      }
-    },
-    
-    /**
-     * 显示二维码
-     * 
-     * @param {Object} item - 要显示二维码的物品
-     */
-    showQRCode(item) {
-      this.selectedItem = item;
-      this.qrDialog = true;
-    },
-    
-    /**
-     * 获取二维码URL
-     * 
-     * @param {string} key - 物品标识码
-     * @returns {string} 二维码图片URL
-     */
-    getQRCodeUrl(key) {
-      // 使用QR Server API生成二维码
-      const currentUrl = window.location.origin;
-      const foundUrl = `${currentUrl}/found?key=${encodeURIComponent(key)}`;
-      return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(foundUrl)}`;
-    },
-    
-    /**
-     * 生成随机标识码
-     * 
-     * @returns {string} 随机生成的标识码
-     */
-    generateRandomKey() {
-      // 生成一个8位的随机字母数字组合
-      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-      let result = '';
-      for (let i = 0; i < 8; i++) {
-        result += chars.charAt(Math.floor(Math.random() * chars.length));
-      }
-      return result;
-    },
-    
-    /**
-     * 获取状态对应的颜色
-     * 
-     * @param {string} status - 物品状态
-     * @returns {string} 对应的颜色名称
-     */
-    getStatusColor(status) {
-      const statusMap = {
-        ok: "success",
-        lost: "error",
-        default: "grey"
-      };
-      return statusMap[status] || statusMap.default;
-    },
-    
-    /**
-     * 获取状态对应的文本
-     * 
-     * @param {string} status - 物品状态
-     * @returns {string} 对应的状态文本
-     */
-    getStatusText(status) {
-      const statusMap = {
-        ok: "正常",
-        lost: "丢失",
-        default: "未知"
-      };
-      return statusMap[status] || statusMap.default;
-    },
-    
-    /**
-     * 格式化日期显示
-     * 
-     * @param {string} create_time - 日期字符串
-     * @returns {string} 格式化的日期文本
-     */
-    formatDate(dateStr) {
-      if (!dateStr) return "未知时间";
-      
-      try {
-        const date = new Date(dateStr);
-        return new Intl.DateTimeFormat('zh-CN', {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit'
-        }).format(date);
-      } catch (e) {
-        return dateStr;
-      }
-    },
-    
-    /**
-     * 重置所有筛选条件
-     */
-    resetFilters() {
-      this.search = '';
-      this.statusFilter = 'all';
-    },
-    
     /**
      * 退出登录
      */
@@ -834,11 +163,4 @@ export default {
   min-height: 100vh;
   padding: 0;
 }
-
-/* 确保数据表格在移动设备上响应式滚动 */
-@media (max-width: 768px) {
-  .v-data-table {
-    overflow-x: auto;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/model/database.py b/model/database.py
index 260719a..ddc7e62 100644
--- a/model/database.py
+++ b/model/database.py
@@ -17,7 +17,12 @@ from typing import Optional
 
 # 数据库类
 class Database:
-    def __init__(self, db_path: str = "data.db"):
+    
+    # Database 初始化方法
+    def __init__(
+        self,                       # self 用于引用类的实例
+        db_path: str = "data.db"    # db_path 数据库文件路径，默认为 data.db
+    ):
         self.db_path = db_path
 
     async def init_db(self):