update: 2026-03-28 21:00

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

@@ -1,102 +1,102 @@
-<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="粘贴管理员令牌后自动加载…" />
-      </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'])
-</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>
+<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="粘贴管理员令牌后自动加载…" />
+      </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'])
+</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>