feat: major update - MySQL, chat, wishlist, PWA, admin overhaul

2026-03-21 20:22:00 +08:00
parent 48fb818b8c
commit 84874707f5
71 changed files with 13457 additions and 2031 deletions
--- a/mengyastore-frontend/src/modules/admin/components/AdminMaintenanceRow.vue
+++ b/mengyastore-frontend/src/modules/admin/components/AdminMaintenanceRow.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="maintenance-row">
+    <div class="maintenance-left">
+      <span class="maintenance-label">站点维护模式</span>
+      <button
+        :class="['maintenance-toggle', enabled ? 'toggle-on' : 'toggle-off']"
+        type="button"
+        @click="$emit('update:enabled', !enabled)"
+      >
+        {{ enabled ? '维护中' : '正常运行' }}
+      </button>
+      <span
+        v-if="message"
+        class="msg-tag"
+        :class="{ error: message.includes('失败') }"
+      >{{ message }}</span>
+    </div>
+    <div class="maintenance-right">
+      <input
+        :value="reason"
+        @input="$emit('update:reason', $event.target.value)"
+        class="maintenance-reason-input"
+        placeholder="维护原因（选填）"
+      />
+      <button class="ghost" type="button" @click="$emit('save')">保存</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  enabled: { type: Boolean, default: false },
+  reason: { type: String, default: '' },
+  message: { type: String, default: '' }
+})
+
+defineEmits(['update:enabled', 'update:reason', 'save'])
+</script>
+
+<style scoped>
+.maintenance-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+  padding: 14px 18px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
+.maintenance-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.maintenance-label {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+}
+
+.maintenance-toggle {
+  padding: 6px 16px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.15s ease;
+  font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
+}
+
+.toggle-on {
+  background: rgba(201, 90, 106, 0.15);
+  color: #c95a6a;
+}
+
+.toggle-on:hover {
+  background: rgba(201, 90, 106, 0.25);
+}
+
+.toggle-off {
+  background: rgba(100, 185, 140, 0.15);
+  color: #3a9a68;
+}
+
+.toggle-off:hover {
+  background: rgba(100, 185, 140, 0.25);
+}
+
+.maintenance-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+}
+
+.maintenance-reason-input {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.7);
+  font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
+  font-size: 15px;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.maintenance-reason-input:focus {
+  border-color: var(--accent);
+}
+
+.msg-tag {
+  font-size: 15px;
+  color: var(--accent-2);
+  padding: 4px 10px;
+  border-radius: 5px;
+  background: rgba(145, 168, 208, 0.1);
+  white-space: nowrap;
+}
+
+.msg-tag.error {
+  color: #c95a6a;
+  background: rgba(201, 90, 106, 0.08);
+}
+
+@media (max-width: 900px) {
+  .maintenance-row {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 10px 12px;
+    gap: 10px;
+  }
+
+  .maintenance-right {
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  .maintenance-reason-input {
+    flex: 1;
+    min-width: 0;
+    font-size: 14px;
+    padding: 7px 10px;
+  }
+}
+</style>