From 540f610eaa5ecdda1e876162d3dbee809ce678e1 Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期一, 05 十月 2026 08:49:21 +0800
Subject: [PATCH] docs(version): record pushed v1.0.0 tag

---
 traffic-audit-web/src/components/AppHeader.vue |  105 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 103 insertions(+), 2 deletions(-)

diff --git a/traffic-audit-web/src/components/AppHeader.vue b/traffic-audit-web/src/components/AppHeader.vue
index f4e1b04..f077c9a 100644
--- a/traffic-audit-web/src/components/AppHeader.vue
+++ b/traffic-audit-web/src/components/AppHeader.vue
@@ -1,29 +1,120 @@
 <template>
   <el-header class="app-header">
-    <span class="header-title">{{ title }}</span>
+    <span class="header-title">
+      {{ systemName }}<span class="header-version" v-if="version">V{{ version }}</span>
+      <template v-if="pageName"> - {{ pageName }}</template>
+    </span>
     <div class="header-right">
       <span class="header-user">
         <i class="el-icon-user"></i> {{ username }}
       </span>
+      <el-button type="text" class="header-link" @click="openChangePwd">
+        <i class="el-icon-key"></i> 淇敼瀵嗙爜
+      </el-button>
       <el-button type="text" class="header-logout" @click="logout">
         <i class="el-icon-switch-button"></i> 閫�鍑虹櫥褰�
       </el-button>
     </div>
+
+    <el-dialog title="淇敼瀵嗙爜" :visible.sync="pwdDialogVisible" width="420px" @closed="resetPwdForm">
+      <el-form ref="pwdForm" :model="pwdForm" :rules="pwdRules" label-width="90px">
+        <el-form-item label="鍘熷瘑鐮�" prop="oldPassword">
+          <el-input v-model="pwdForm.oldPassword" type="password" show-password placeholder="璇疯緭鍏ュ師瀵嗙爜"></el-input>
+        </el-form-item>
+        <el-form-item label="鏂板瘑鐮�" prop="newPassword">
+          <el-input v-model="pwdForm.newPassword" type="password" show-password placeholder="鑷冲皯 6 浣�"></el-input>
+        </el-form-item>
+        <el-form-item label="纭鏂板瘑鐮�" prop="confirmPassword">
+          <el-input v-model="pwdForm.confirmPassword" type="password" show-password placeholder="鍐嶆杈撳叆鏂板瘑鐮�"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="pwdDialogVisible = false">鍙栨秷</el-button>
+        <el-button type="primary" :loading="pwdSaving" @click="submitPwd">淇濆瓨</el-button>
+      </div>
+    </el-dialog>
   </el-header>
 </template>
 
 <script>
+import api from '@/api'
+
 export default {
   name: 'AppHeader',
   props: {
     title: { type: String, required: true }
   },
+  data() {
+    return {
+      version: '',
+      pwdDialogVisible: false,
+      pwdSaving: false,
+      pwdForm: { oldPassword: '', newPassword: '', confirmPassword: '' },
+      pwdRules: {
+        oldPassword: [{ required: true, message: '璇疯緭鍏ュ師瀵嗙爜', trigger: 'blur' }],
+        newPassword: [
+          { required: true, message: '璇疯緭鍏ユ柊瀵嗙爜', trigger: 'blur' },
+          { min: 6, message: '鏂板瘑鐮侀暱搴︿笉鑳藉皯浜� 6 浣�', trigger: 'blur' }
+        ],
+        confirmPassword: [
+          { required: true, message: '璇峰啀娆¤緭鍏ユ柊瀵嗙爜', trigger: 'blur' },
+          {
+            validator: (rule, value, cb) => (value === this.pwdForm.newPassword ? cb() : cb(new Error('涓ゆ杈撳叆鐨勫瘑鐮佷笉涓�鑷�'))),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
   computed: {
     username() {
       return sessionStorage.getItem('username') || 'admin'
+    },
+    // The system name always comes first so the version can sit right after it.
+    systemName() {
+      return this.title.split(' - ')[0]
+    },
+    pageName() {
+      const parts = this.title.split(' - ')
+      return parts.length > 1 ? parts.slice(1).join(' - ') : ''
     }
   },
+  created() {
+    api.get('/version')
+      .then(res => {
+        if (res && res.data && res.data.version) this.version = res.data.version
+      })
+      .catch(() => {})
+  },
   methods: {
+    openChangePwd() {
+      this.pwdForm = { oldPassword: '', newPassword: '', confirmPassword: '' }
+      this.pwdDialogVisible = true
+      this.$nextTick(() => this.$refs.pwdForm && this.$refs.pwdForm.clearValidate())
+    },
+    resetPwdForm() {
+      this.$refs.pwdForm && this.$refs.pwdForm.clearValidate()
+    },
+    submitPwd() {
+      this.$refs.pwdForm.validate(valid => {
+        if (!valid) return
+        this.pwdSaving = true
+        api.post('/auth/change-password', {
+          oldPassword: this.pwdForm.oldPassword,
+          newPassword: this.pwdForm.newPassword
+        })
+          .then(() => {
+            this.$message.success('瀵嗙爜淇敼鎴愬姛')
+            this.pwdDialogVisible = false
+          })
+          .catch(err => {
+            if (err && err._toast) return
+            const d = err && err.response && err.response.data
+            this.$message.error((d && d.message) || '瀵嗙爜淇敼澶辫触')
+          })
+          .finally(() => { this.pwdSaving = false })
+      })
+    },
     logout() {
       this.$confirm('纭畾閫�鍑虹櫥褰曞悧锛�', '鎻愮ず', {
         confirmButtonText: '閫�鍑�',
@@ -62,6 +153,16 @@
   line-height: normal;
 }
 .header-user { opacity: 0.92; }
+.header-version {
+  font-size: 12px;
+  line-height: 1.6;
+  margin-left: 8px;
+  padding: 2px 8px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.18);
+}
+.header-link { color: #fff; font-size: 14px; padding: 0; }
+.header-link:hover { color: #ffd04b; }
 .header-logout { color: #fff; font-size: 14px; padding: 0; }
 .header-logout:hover { color: #ffd04b; }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.9.1