@usethink/cf-admin-fe 0.1.1 → 0.2.8

package/src/components/ConfigField.vue

@@ -0,0 +1,387 @@
+<template>
+  <div class="config-card" :class="{ 'config-card-primary': primary }">
+    <label class="config-label">
+      <span>{{ localizedLabel }}</span>
+      <input
+        v-if="item.type === 'boolean'"
+        type="checkbox"
+        :checked="value === 'true'"
+        :disabled="status === 'saving'"
+        @change="emitChange(($event.target as HTMLInputElement).checked ? 'true' : 'false')"
+      />
+      <!-- 多选枚举（逗号分隔存储） -->
+      <div v-else-if="item.enum?.length" class="config-enum-wrap">
+        <div class="config-enum-grid" role="group" :aria-label="localizedLabel">
+          <label
+            v-for="opt in item.enum"
+            :key="opt"
+            class="config-enum-item"
+            :class="{ checked: enumValues.includes(opt) }"
+          >
+            <input
+              type="checkbox"
+              :checked="enumValues.includes(opt)"
+              :disabled="status === 'saving'"
+              @change="toggleEnum(opt)"
+            />
+            <span>{{ enumLabel(opt) }}</span>
+          </label>
+        </div>
+      </div>
+      <!-- integer + unit=cents：按“元”编辑，提交“分”字符串 -->
+      <input
+        v-else-if="isCentsMoney"
+        type="number"
+        inputmode="decimal"
+        step="0.01"
+        min="0"
+        :value="displayYuan"
+        :disabled="status === 'saving'"
+        @change="onYuanChange(($event.target as HTMLInputElement).value)"
+      />
+      <input
+        v-else-if="item.type === 'integer'"
+        type="number"
+        step="1"
+        :value="value"
+        :disabled="status === 'saving'"
+        @change="emitChange(($event.target as HTMLInputElement).value)"
+      />
+      <input
+        v-else-if="item.sensitive"
+        type="password"
+        value=""
+        :placeholder="item.configured ? tSafe('adminConfigField.override', '已配置，留空不修改') : tSafe('adminConfigField.notConfigured', '未配置')"
+        autocomplete="new-password"
+        :disabled="status === 'saving'"
+        @change="emitChange(($event.target as HTMLInputElement).value)"
+      />
+      <textarea
+        v-else
+        :value="value"
+        :disabled="status === 'saving'"
+        @change="emitChange(($event.target as HTMLTextAreaElement).value)"
+      />
+    </label>
+    <p v-if="localizedDescription" class="config-help">{{ localizedDescription }}</p>
+    <p v-if="localizedEffect" class="config-effect">{{ localizedEffect }}</p>
+    <p v-if="isCentsMoney" class="config-range">
+      {{ rangeLabel }} {{ tSafe('adminConfigField.yuanUnit', '元') }}
+      <span class="config-range-hint">{{ tSafe('adminConfigField.hint', '按元编辑，入库为分') }}</span>
+    </p>
+    <p v-else-if="item.type === 'integer'" class="config-range">
+      {{ rangeLabel }}
+    </p>
+    <p v-if="localError" class="config-local-error" role="alert">{{ localError }}</p>
+    <div class="config-actions">
+      <span v-if="statusText" class="config-status" :class="`config-status-${status}`">{{ statusText }}</span>
+      <button
+        class="btn btn-ghost btn-xs"
+        type="button"
+        :disabled="status === 'saving'"
+        @click="$emit('reset', item.key)"
+      >{{ tSafe('adminConfigField.reset', '重置') }}</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type {
+  AdminSystemConfigFieldDefinition,
+  ConfigFieldStatus,
+} from '../types/system-config'
+import { formatCents, parseYuanToCents } from '../utils/currency-cents'
+import { tKit } from '../utils/i18n'
+
+const props = defineProps<{
+  item: AdminSystemConfigFieldDefinition
+  value: string
+  primary?: boolean
+  status?: ConfigFieldStatus
+}>()
+
+const emit = defineEmits<{
+  change: [key: string, value: string]
+  reset: [key: string]
+}>()
+
+const localError = ref('')
+
+/** 可选 i18n：统一走 tKit（无 vue-i18n 时用中文 fallback） */
+function tSafe(key: string, fallback: string, params?: Record<string, unknown>): string {
+  return tKit(key, fallback, params)
+}
+
+function translateConfigText(
+  suffix: 'label' | 'description' | 'effect',
+  fallback: string,
+): string {
+  const key = `adminConfig.fields.${props.item.key}.${suffix}`
+  return tSafe(key, fallback)
+}
+
+const localizedLabel = computed(() => translateConfigText('label', props.item.label))
+const localizedDescription = computed(() =>
+  translateConfigText('description', props.item.description || ''),
+)
+const localizedEffect = computed(() => translateConfigText('effect', props.item.effect || ''))
+
+const isCentsMoney = computed(
+  () => props.item.type === 'integer' && props.item.unit === 'cents',
+)
+
+const displayYuan = computed(() => {
+  if (!isCentsMoney.value) return props.value
+  const cents = Number(props.value)
+  if (!Number.isSafeInteger(cents)) return props.value
+  return formatCents(cents)
+})
+
+const unlimited = computed(() => tSafe('adminConfigField.unlimited', '不限'))
+
+const rangeLabel = computed(() => {
+  const min = props.item.min === undefined
+    ? unlimited.value
+    : isCentsMoney.value
+      ? formatCents(props.item.min)
+      : String(props.item.min)
+  const max = props.item.max === undefined
+    ? unlimited.value
+    : isCentsMoney.value
+      ? formatCents(props.item.max)
+      : String(props.item.max)
+  return tSafe('adminConfigField.range', `范围 ${min} ~ ${max}`, { min, max })
+})
+
+const enumValues = computed(() => {
+  if (!props.item.enum) return [] as string[]
+  return (props.value || '')
+    .split(/[,;\s\n]+/)
+    .map((s) => s.trim())
+    .filter(Boolean)
+})
+
+function enumLabel(opt: string): string {
+  return props.item.enumLabels?.[opt] || opt
+}
+
+function toggleEnum(opt: string) {
+  if (!props.item.enum?.length) return
+  const selected = new Set(enumValues.value)
+  if (selected.has(opt)) {
+    if (selected.size <= 1) {
+      localError.value = tSafe('adminConfigField.enumEmptyHint', '至少保留一项')
+      return
+    }
+    selected.delete(opt)
+  } else {
+    selected.add(opt)
+  }
+  localError.value = ''
+  const ordered = props.item.enum.filter((item) => selected.has(item))
+  emitChange(ordered.join(','))
+}
+
+function emitChange(value: string) {
+  localError.value = ''
+  emit('change', props.item.key, value)
+}
+
+function onYuanChange(raw: string) {
+  localError.value = ''
+  const trimmed = raw.trim()
+  if (!trimmed) {
+    localError.value = tSafe('adminConfigField.placeholder', '请输入有效金额')
+    return
+  }
+  const cents = parseYuanToCents(trimmed)
+  if (cents === null || cents < 0) {
+    localError.value = tSafe('adminConfigField.placeholder', '请输入有效金额')
+    return
+  }
+  if (props.item.min !== undefined && cents < props.item.min) {
+    localError.value = tSafe(
+      'adminConfigField.minError',
+      `不能小于 ${formatCents(props.item.min)}`,
+      { min: formatCents(props.item.min) },
+    )
+    return
+  }
+  if (props.item.max !== undefined && cents > props.item.max) {
+    localError.value = tSafe(
+      'adminConfigField.maxError',
+      `不能大于 ${formatCents(props.item.max)}`,
+      { max: formatCents(props.item.max) },
+    )
+    return
+  }
+  emitChange(String(cents))
+}
+
+watch(
+  () => props.value,
+  () => {
+    localError.value = ''
+  },
+)
+
+const statusText = computed(() => {
+  if (props.status === 'saving') return tSafe('adminConfigField.saving', '保存中…')
+  if (props.status === 'saved') return tSafe('adminConfig.saved', '已保存')
+  if (props.status === 'error') return tSafe('adminConfig.saveFailed', '保存失败')
+  return ''
+})
+</script>
+
+<style scoped>
+.config-card {
+  background: var(--tg-secondary-bg, #151b28);
+  border-radius: var(--r-lg, 12px);
+  padding: 12px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.config-card-primary {
+  border-color: var(--admin-accent-border, rgba(245, 158, 11, 0.38));
+  background: linear-gradient(
+    180deg,
+    var(--admin-accent-soft, rgba(245, 158, 11, 0.14)),
+    rgba(245, 158, 11, 0.04)
+  );
+}
+
+.config-card:hover {
+  border-color: rgba(245, 158, 11, 0.55);
+  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.3));
+}
+
+.config-label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--tg-text, #f0f2f5);
+}
+
+.config-label span:first-child {
+  font-weight: 500;
+  font-size: 12px;
+  color: var(--tg-hint, #9aa4b2);
+}
+
+.config-help,
+.config-effect,
+.config-range {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--tg-hint, #9aa4b2);
+}
+
+.config-effect {
+  color: var(--tg-text, #f0f2f5);
+}
+
+.config-range-hint {
+  color: var(--admin-accent-text, #fbbf24);
+}
+
+.config-local-error {
+  margin: 0;
+  font-size: 12px;
+  color: #fca5a5;
+  line-height: 1.4;
+}
+
+.config-label input[type='number'],
+.config-label input[type='password'],
+.config-label textarea {
+  padding: 8px 10px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--r-md, 8px);
+  background: var(--surface, rgba(255, 255, 255, 0.04));
+  color: var(--tg-text, #f0f2f5);
+  font-size: 13px;
+}
+
+.config-label textarea {
+  min-height: 72px;
+  resize: vertical;
+}
+
+.config-label input[type='checkbox'] {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  accent-color: var(--admin-accent, #f59e0b);
+  cursor: pointer;
+}
+
+.config-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: auto;
+}
+
+.config-status {
+  font-size: 12px;
+}
+
+.config-status-saving {
+  color: var(--tg-hint, #9aa4b2);
+}
+
+.config-status-saved {
+  color: #6ee7b7;
+}
+
+.config-status-error {
+  color: #fca5a5;
+}
+
+.config-enum-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+.config-enum-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 6px;
+  width: 100%;
+}
+.config-enum-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.2s;
+  user-select: none;
+}
+.config-enum-item.checked {
+  background: rgba(245, 158, 11, 0.12);
+  border-color: rgba(245, 158, 11, 0.3);
+}
+.config-enum-item:hover {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.config-enum-item input {
+  flex-shrink: 0;
+}
+</style>

package/src/components/ConfirmDialog.vue

@@ -19,13 +19,30 @@
         </span>
       </label>
     </div>
+    <div v-if="requirePhrase" class="confirm-phrase">
+      <label class="confirm-phrase-label" for="confirm-phrase-input">
+        {{ $t('confirm.requirePhrase', { phrase: requirePhrase }) }}
+      </label>
+      <input
+        id="confirm-phrase-input"
+        ref="phraseInputEl"
+        v-model="phraseInput"
+        type="text"
+        class="confirm-phrase-input"
+        autocomplete="off"
+        spellcheck="false"
+        :disabled="loading"
+        :placeholder="requirePhrase"
+        @keydown.enter.prevent="handleConfirm"
+      />
+    </div>
     <template #actions>
       <button type="button" class="btn btn-ghost" :disabled="loading" @click="handleClose">{{ $t('confirm.cancel') }}</button>
       <button
         class="btn"
         type="button"
         :class="danger ? 'btn-danger' : 'btn-primary'"
-        :disabled="loading"
+        :disabled="loading || !phraseOk"
         @click="handleConfirm"
       >
         {{ $t('confirm.confirm') }}
@@ -35,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import AdminModal from './AdminModal.vue'
 import type { ConfirmOptionDef } from '../composables/useConfirmDialog'
 
@@ -48,11 +65,14 @@ const props = withDefaults(defineProps<{
   options?: ConfirmOptionDef[]
   /** key → 是否勾选（由 useConfirmDialog 托管） */
   optionValues?: Record<string, boolean>
+  /** 须完全匹配的确认短语；空则不要求键入 */
+  requirePhrase?: string | null
 }>(), {
   loading: false,
   danger: false,
   options: () => [],
   optionValues: () => ({}),
+  requirePhrase: null,
 })
 
 const emit = defineEmits<{
@@ -62,8 +82,23 @@ const emit = defineEmits<{
 }>()
 
 const innerVisible = ref(false)
+const phraseInput = ref('')
+const phraseInputEl = ref<HTMLInputElement | null>(null)
+
+const phraseOk = computed(() => {
+  const need = props.requirePhrase
+  if (!need) return true
+  return phraseInput.value === need
+})
+
 watch(() => props.modelValue, (val) => {
   innerVisible.value = val
+  if (val) {
+    phraseInput.value = ''
+    if (props.requirePhrase) {
+      nextTick(() => phraseInputEl.value?.focus())
+    }
+  }
 }, { immediate: true })
 watch(innerVisible, (val, wasVisible) => {
   if (!val && wasVisible && props.modelValue) emit('update:modelValue', false)
@@ -78,7 +113,7 @@ function handleClose() {
 }
 
 function handleConfirm() {
-  if (!innerVisible.value || props.loading) return
+  if (!innerVisible.value || props.loading || !phraseOk.value) return
   emit('confirm')
   close()
 }
@@ -157,4 +192,33 @@ function onOptionChange(key: string, checked: boolean) {
   line-height: 1.5;
   opacity: 0.95;
 }
+
+/* 确认短语输入 */
+.confirm-phrase {
+  margin-top: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.confirm-phrase-label {
+  font-size: 13px;
+  color: var(--tg-hint, #9aa4b2);
+  line-height: 1.45;
+}
+.confirm-phrase-input {
+  box-sizing: border-box;
+  height: 36px;
+  padding: 0 10px;
+  border-radius: var(--r-md, 8px);
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
+  background: var(--tg-secondary-bg, #151b28);
+  color: var(--tg-text, #f0f2f5);
+  font-size: 14px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  letter-spacing: 0.04em;
+}
+.confirm-phrase-input:focus {
+  outline: 2px solid rgba(239, 68, 68, 0.45);
+  outline-offset: 1px;
+}
 </style>

package/src/components/index.ts

@@ -2,3 +2,9 @@ export { default as AdminPagination } from './AdminPagination.vue'
 export { default as AdminModal } from './AdminModal.vue'
 export { default as ConfirmDialog } from './ConfirmDialog.vue'
 export { default as ToastContainer } from './ToastContainer.vue'
+export { default as ConfigField } from './ConfigField.vue'
+export { default as AdminShell } from './AdminShell.vue'
+export { default as AdminLoginShell } from './AdminLoginShell.vue'
+export { default as AdminMetadataDetail } from './AdminMetadataDetail.vue'
+export type { AdminShellMenuItem } from './AdminShell.vue'
+export type { AdminLogEntry } from './AdminMetadataDetail.vue'

package/src/composables/createAdminFlagSession.ts

@@ -0,0 +1,129 @@
+/**
+ * Cookie 会话产品用的本地布尔管理端守卫 flag。
+ *
+ * 真正的会话在 HTTP cookie（Better Auth 等）；此处只存 localStorage 快路径标记，
+ * 供路由守卫使用——与 Bearer 产品的 {@link createAdminTokenSession} 对称。
+ *
+ * 产品负责：健康探测、登录/登出、OAuth/PKCE、ADMIN_* 白名单。
+ * 套件负责：单 key 读写 + 一个 Vue ref 句柄（在模块作用域创建一次）。
+ */
+import { computed, ref, type ComputedRef, type Ref } from 'vue'
+
+export const DEFAULT_ADMIN_FLAG_TRUTHY = '1'
+
+export type CreateAdminFlagSessionOptions = {
+  /** localStorage 键名（如 `cf_auth_admin_ok`） */
+  storageKey: string
+  /** 已登录时写入的值；默认 `'1'` */
+  truthyValue?: string
+  /** 覆盖存储实现（测试用）；默认在可用时用 `localStorage` */
+  storage?: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> | null
+}
+
+function resolveStorage(
+  explicit?: CreateAdminFlagSessionOptions['storage'],
+): Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> | null {
+  if (explicit !== undefined) return explicit
+  try {
+    if (typeof localStorage === 'undefined') return null
+    return localStorage
+  } catch {
+    return null
+  }
+}
+
+export function readAdminFlagFromStorage(
+  storageKey: string,
+  storage?: CreateAdminFlagSessionOptions['storage'],
+  truthyValue: string = DEFAULT_ADMIN_FLAG_TRUTHY,
+): boolean {
+  const store = resolveStorage(storage)
+  if (!store) return false
+  try {
+    return store.getItem(storageKey) === truthyValue
+  } catch {
+    return false
+  }
+}
+
+export function writeAdminFlagToStorage(
+  storageKey: string,
+  ok: boolean,
+  options?: {
+    storage?: CreateAdminFlagSessionOptions['storage']
+    truthyValue?: string
+  },
+): void {
+  const store = resolveStorage(options?.storage)
+  if (!store) return
+  const truthy = options?.truthyValue ?? DEFAULT_ADMIN_FLAG_TRUTHY
+  try {
+    if (ok) store.setItem(storageKey, truthy)
+    else store.removeItem(storageKey)
+  } catch {
+    /* 隐私模式 / 配额不足 */
+  }
+}
+
+export type AdminFlagSession = {
+  /** 与 storage flag 同步的响应式镜像 */
+  loggedIn: Ref<boolean>
+  isLoggedIn: ComputedRef<boolean>
+  /** 读 storage（作为 session.readFlag 调用时也可刷新 ref） */
+  readFlag: () => boolean
+  /** 唯一写入入口：true 写入 truthy，false 删除键 */
+  writeFlag: (ok: boolean) => void
+  markLoggedIn: () => void
+  clearSession: () => void
+  storageKey: string
+  truthyValue: string
+}
+
+/**
+ * Cookie 管理端本地守卫 flag 的 Vue 会话句柄。
+ * 在产品模块作用域 **创建一次**（与 createAdminTokenSession 同模式）。
+ */
+export function createAdminFlagSession(
+  options: CreateAdminFlagSessionOptions,
+): AdminFlagSession {
+  const storageKey = options.storageKey
+  const truthyValue = options.truthyValue ?? DEFAULT_ADMIN_FLAG_TRUTHY
+  // 未传 `storage` 时每次调用重新解析，便于测试在模块加载后再 stub localStorage
+  // （Node 默认没有 localStorage）。
+  const explicitStorage = options.storage
+
+  function store() {
+    return resolveStorage(explicitStorage)
+  }
+
+  function readFlag(): boolean {
+    return readAdminFlagFromStorage(storageKey, store(), truthyValue)
+  }
+
+  const loggedIn = ref(readFlag())
+  const isLoggedIn = computed(() => loggedIn.value)
+
+  function writeFlag(ok: boolean): void {
+    writeAdminFlagToStorage(storageKey, ok, { storage: store(), truthyValue })
+    loggedIn.value = ok
+  }
+
+  function markLoggedIn(): void {
+    writeFlag(true)
+  }
+
+  function clearSession(): void {
+    writeFlag(false)
+  }
+
+  return {
+    loggedIn,
+    isLoggedIn,
+    readFlag,
+    writeFlag,
+    markLoggedIn,
+    clearSession,
+    storageKey,
+    truthyValue,
+  }
+}