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

mengyastore-frontend/src/modules/admin/components/AdminTokenRow.vue

@@ -0,0 +1,103 @@
+<template>
+  <div v-if="show" class="token-row">
+    <div class="form-field token-field">
+      <label>管理 Token</label>
+      <div class="token-input-wrap">
+        <input :value="token" @input="$emit('update:token', $event.target.value)" placeholder="粘贴 token 后自动加载…" />
+        <button class="ghost small" type="button" @click="$emit('auto-get')">自动获取</button>
+      </div>
+    </div>
+    <p
+      v-if="message"
+      class="msg-tag"
+      :class="{ error: message.includes('失败') || message.includes('错误') }"
+    >{{ message }}</p>
+  </div>
+  <p
+    v-if="inlineMessage"
+    class="msg-inline"
+    :class="{ error: inlineMessage.includes('失败') || inlineMessage.includes('错误') }"
+  >{{ inlineMessage }}</p>
+</template>
+
+<script setup>
+defineProps({
+  show: { type: Boolean, default: true },
+  token: { type: String, default: '' },
+  message: { type: String, default: '' },
+  inlineMessage: { type: String, default: '' }
+})
+
+defineEmits(['update:token', 'auto-get'])
+</script>
+
+<style scoped>
+.token-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 14px;
+  margin-bottom: 16px;
+  padding: 16px 18px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
+.token-field {
+  flex: 1;
+  max-width: 460px;
+  margin-bottom: 0;
+}
+
+.token-input-wrap {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.token-input-wrap input {
+  flex: 1;
+}
+
+.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);
+}
+
+.msg-inline {
+  font-size: 15px;
+  color: var(--accent-2);
+  margin-bottom: 12px;
+}
+
+.msg-inline.error {
+  color: #c95a6a;
+}
+
+.small {
+  padding: 7px 13px;
+  font-size: 13px;
+  border-radius: 999px;
+}
+
+@media (max-width: 900px) {
+  .token-row {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 12px 12px;
+  }
+
+  .token-field {
+    max-width: 100%;
+  }
+}
+</style>