feat(price-formula-variable): 运营后台价格变量管理页 P4

- 新增 /other/priceFormulaVariable 路由 - PriceFormulaVariableListView.vue: · 变量列表 (标识/名称/单位/当前值/取值方式/状态) · 快速改值: 行内编辑当前值, 保存后相关商品价格自动变化 · 新增/编辑弹窗: 手工维护 / AKShare采集两种模式 · 采集代码 + 换算公式配置 · 启停/删除
feat(theme-system): F006 后台主题配置页
2026-08-04 16:16:34 +08:00 · 2026-08-04 16:16:34 +08:00
4 changed files with 443 additions and 1 deletions
--- a/src/config/menu-labels.ts
+++ b/src/config/menu-labels.ts
@ -145,6 +145,7 @@ export const MENU_LABELS: MenuLabel[] = [
  { url: 'sys/dict-type',                 label: '字典类型',       icon: 'Collection', path: '/sys/dict',                sort: 412 },
  { url: 'sys/notice',                    label: '通知公告',       icon: 'Bell',       path: '/sys/notice',               sort: 413 },
  { url: 'sys/params',                    label: '参数配置',       icon: 'Setting',    path: '/sys/params',               sort: 414 },
+  { url: 'sys/theme-config',             label: '主题配置',       icon: 'Brush',      path: '/sys/theme-config',        sort: 415 },
  { url: 'message/mail-template',         label: '邮件模板',       icon: 'Document',   path: '/message/mail-template',    sort: 803 },
  { url: 'message/mail-log',              label: '邮件日志',       icon: 'List',       path: '/message/mail-log',         sort: 804 },
  { url: 'message/sms-log',               label: '短信日志',       icon: 'List',       path: '/message/sms-log',          sort: 805 },
--- a/src/modules/other/priceFormulaVariable/PriceFormulaVariableListView.vue
+++ b/src/modules/other/priceFormulaVariable/PriceFormulaVariableListView.vue
@ -0,0 +1,256 @@
+<script setup lang="ts">
+/**
+ * 价格公式系统变量管理 (运营后台)
+ *
+ * 走 /supplier/supplierGoodPriceFormulaVariable/ API
+ * 功能: 变量 CRUD + 快速改值 (改后 SKU 公式价格自动变化)
+ * 字段: varKey/varName/varUnit/currentValue/sourceType/sourceCode/formula/sort/status
+ */
+import { onMounted, ref, reactive } from 'vue'
+import { httpGet, httpPost } from '@/utils/request'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import DataTable from '@/components/DataTable/DataTable.vue'
+import PageHeader from '@/components/PageHeader/PageHeader.vue'
+
+interface Variable {
+  id: string
+  varKey: string
+  varName: string
+  varUnit: string
+  currentValue: number
+  sourceType: number
+  sourceCode: string
+  formula: string
+  sort: number
+  status: number
+  createDate: string
+  updateDate: string
+}
+
+const list = ref<Variable[]>([])
+const loading = ref(false)
+const total = ref(0)
+const page = ref(1)
+const limit = ref(20)
+const keyword = ref('')
+
+// 新增/编辑弹窗
+const dialogVisible = ref(false)
+const saving = ref(false)
+const form = reactive<any>({
+  id: null, varKey: '', varName: '', varUnit: '', currentValue: 0,
+  sourceType: 1, sourceCode: '', formula: '', sort: 0, status: 1
+})
+
+// 快速改值
+const quickEditId = ref<string | null>(null)
+const quickValue = ref('')
+
+const SOURCE_MAP: Record<number, string> = { 1: '手工维护', 2: 'AKShare采集' }
+
+async function load() {
+  loading.value = true
+  try {
+    const data: any = await httpGet('/supplier/supplierGoodPriceFormulaVariable/page', {
+      page: page.value, limit: limit.value, keyword: keyword.value || undefined
+    })
+    list.value = (data?.list || []).map((it: any) => ({
+      id: String(it.id), varKey: it.var_key || '--', varName: it.var_name || '--',
+      varUnit: it.var_unit || '', currentValue: Number(it.current_value || 0),
+      sourceType: Number(it.source_type || 1), sourceCode: it.source_code || '',
+      formula: it.formula || '', sort: Number(it.sort || 0), status: Number(it.status || 1),
+      createDate: it.create_date || '--', updateDate: it.update_date || '--'
+    }))
+    total.value = Number(data?.total || 0)
+  } catch (e: any) {
+    ElMessage.error(e?.msg || e?.message || '加载失败')
+    list.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+function onSearch() { page.value = 1; load() }
+function onReset() { keyword.value = ''; page.value = 1; load() }
+function onPageChange(p: number) { page.value = p; load() }
+function onLimitChange(l: number) { limit.value = l; page.value = 1; load() }
+
+function openAdd() {
+  Object.assign(form, { id: null, varKey: '', varName: '', varUnit: '', currentValue: 0, sourceType: 1, sourceCode: '', formula: '', sort: 0, status: 1 })
+  dialogVisible.value = true
+}
+
+function openEdit(row: Variable) {
+  Object.assign(form, {
+    id: row.id, varKey: row.varKey, varName: row.varName, varUnit: row.varUnit,
+    currentValue: row.currentValue, sourceType: row.sourceType, sourceCode: row.sourceCode,
+    formula: row.formula, sort: row.sort, status: row.status
+  })
+  dialogVisible.value = true
+}
+
+async function save() {
+  if (!form.varKey.trim() || !form.varName.trim()) {
+    ElMessage.warning('变量标识和变量名必填'); return
+  }
+  saving.value = true
+  try {
+    await httpPost('/supplier/supplierGoodPriceFormulaVariable/save', { ...form })
+    ElMessage.success('保存成功')
+    dialogVisible.value = false
+    load()
+  } catch (e: any) {
+    ElMessage.error(e?.msg || e?.message || '保存失败')
+  } finally { saving.value = false }
+}
+
+async function quickUpdateValue(row: Variable) {
+  if (quickValue.value === '') return
+  try {
+    await httpPost('/supplier/supplierGoodPriceFormulaVariable/updateValue', { id: row.id, currentValue: quickValue.value })
+    ElMessage.success(`「${row.varName}」值已更新为 ${quickValue.value}, 相关商品价格将自动变化`)
+    quickEditId.value = null
+    quickValue.value = ''
+    load()
+  } catch (e: any) {
+    ElMessage.error(e?.msg || e?.message || '更新失败')
+  }
+}
+
+async function remove(row: Variable) {
+  try {
+    await ElMessageBox.confirm(`确认删除变量「${row.varName}」? 引用该变量的商品公式将无法计算`, '删除确认', { type: 'warning' })
+    await httpGet('/supplier/supplierGoodPriceFormulaVariable/delete', { id: row.id })
+    ElMessage.success('删除成功')
+    load()
+  } catch (e: any) {
+    if (e === 'cancel' || e === 'close') return
+    ElMessage.error(e?.msg || e?.message || '删除失败')
+  }
+}
+
+function toggleStatus(row: Variable) {
+  const next = row.status === 1 ? 0 : 1
+  httpPost('/supplier/supplierGoodPriceFormulaVariable/save', {
+    id: row.id, varKey: row.varKey, varName: row.varName, varUnit: row.varUnit,
+    currentValue: row.currentValue, sourceType: row.sourceType, sourceCode: row.sourceCode,
+    formula: row.formula, sort: row.sort, status: next
+  }).then(() => {
+    ElMessage.success(next === 1 ? '已启用' : '已禁用')
+    load()
+  }).catch((e: any) => ElMessage.error(e?.msg || e?.message || '操作失败'))
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="rr-page">
+    <PageHeader title="价格变量管理" :sub="`系统级价格变量 (共 ${total} 个), 修改变量值后所有引用商品的售价自动更新`">
+      <el-button type="primary" @click="openAdd">新增变量</el-button>
+    </PageHeader>
+
+    <div class="rr-card">
+      <div class="flex items-center gap-3 mb-4">
+        <el-input v-model="keyword" placeholder="按变量名/标识搜索" clearable style="width: 260px" @keyup.enter="onSearch" />
+        <el-button type="primary" @click="onSearch">搜索</el-button>
+        <el-button @click="onReset">重置</el-button>
+      </div>
+
+      <DataTable
+        :columns="[
+          { prop: 'varName', label: '变量名', width: 120 },
+          { prop: 'varKey', label: '标识', width: 140 },
+          { prop: 'varUnit', label: '单位', width: 80 },
+          { prop: 'currentValue', label: '当前值', width: 130, slot: 'value' },
+          { prop: 'sourceType', label: '取值方式', width: 110, slot: 'source' },
+          { prop: 'sourceCode', label: '采集代码', width: 100 },
+          { prop: 'status', label: '状态', width: 80, slot: 'status' },
+          { prop: 'updateDate', label: '更新时间', width: 170 },
+          { prop: 'action', label: '操作', width: 220, slot: 'action', fixed: 'right' }
+        ]"
+        :data="list"
+        :loading="loading"
+        :total="total"
+        :page="page"
+        :limit="limit"
+        :show-pagination="true"
+        :page-sizes="[10, 20, 50, 100]"
+        @page-change="onPageChange"
+        @limit-change="onLimitChange"
+        empty-text="暂无变量"
+        borderless
+        row-key="id"
+      >
+        <template #value="{ row }">
+          <div class="flex items-center gap-2">
+            <span class="font-bold text-primary">¥{{ Number(row.currentValue).toLocaleString() }}</span>
+            <template v-if="quickEditId === row.id">
+              <el-input v-model="quickValue" size="small" style="width: 90px" placeholder="新值" @keyup.enter="quickUpdateValue(row)" />
+              <el-button size="small" type="primary" @click="quickUpdateValue(row)">确认</el-button>
+              <el-button size="small" @click="quickEditId = null; quickValue = ''">取消</el-button>
+            </template>
+            <el-button v-else size="small" text type="primary" @click="quickEditId = row.id; quickValue = String(row.currentValue)">改值</el-button>
+          </div>
+        </template>
+        <template #source="{ row }">
+          <el-tag :type="row.sourceType === 2 ? 'warning' : 'info'" size="small" effect="light">
+            {{ SOURCE_MAP[row.sourceType] || '未知' }}
+          </el-tag>
+        </template>
+        <template #status="{ row }">
+          <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small" effect="light">
+            {{ row.status === 1 ? '启用' : '禁用' }}
+          </el-tag>
+        </template>
+        <template #action="{ row }">
+          <el-link type="primary" :underline="false" @click="openEdit(row)">编辑</el-link>
+          <el-divider direction="vertical" />
+          <el-link type="warning" :underline="false" @click="toggleStatus(row)">{{ row.status === 1 ? '禁用' : '启用' }}</el-link>
+          <el-divider direction="vertical" />
+          <el-link type="danger" :underline="false" @click="remove(row)">删除</el-link>
+        </template>
+      </DataTable>
+    </div>
+
+    <!-- 新增/编辑弹窗 -->
+    <el-dialog v-model="dialogVisible" :title="form.id ? '编辑变量' : '新增变量'" width="520px" destroy-on-close>
+      <el-form label-width="90px" label-position="left">
+        <el-form-item label="变量标识" required>
+          <el-input v-model="form.varKey" placeholder="如 copper_price (英文/下划线, 唯一)" :disabled="!!form.id" />
+        </el-form-item>
+        <el-form-item label="变量名" required>
+          <el-input v-model="form.varName" placeholder="如 铜价 (公式中显示的名称)" />
+        </el-form-item>
+        <el-form-item label="单位">
+          <el-input v-model="form.varUnit" placeholder="如 元/吨" />
+        </el-form-item>
+        <el-form-item label="当前值">
+          <el-input-number v-model="form.currentValue" :precision="4" :step="100" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="取值方式">
+          <el-radio-group v-model="form.sourceType">
+            <el-radio :value="1">手工维护</el-radio>
+            <el-radio :value="2">AKShare采集</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="form.sourceType === 2" label="采集代码">
+          <el-input v-model="form.sourceCode" placeholder="AKShare 商品代码, 如 copper/aluminum/steel" />
+        </el-form-item>
+        <el-form-item v-if="form.sourceType === 2" label="换算公式">
+          <el-input v-model="form.formula" placeholder="可选, 如 raw * 1.05 (raw=采集原始值)" />
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="form.sort" :min="0" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="save">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -150,6 +150,12 @@ const routes: RouteRecordRaw[] = [
    component: () => import('@/modules/other/goodunit/GoodunitListView.vue'),
    meta: { title: '商品单位' }
  },
+  {
+    path: "/other/priceFormulaVariable",
+    name: "OtherPriceFormulaVariable",
+    component: () => import("@/modules/other/priceFormulaVariable/PriceFormulaVariableListView.vue"),
+    meta: { title: "价格变量管理" }
+  },
  {
    path: '/other/label',
    name: 'OtherLabel',
@ -250,6 +256,7 @@ const routes: RouteRecordRaw[] = [
  { path: '/sys/log/error', component: () => import('@/modules/sys/LogErrorView.vue'), meta: { title: '异常日志' } },
  { path: '/sys/notice', component: () => import('@/modules/generic/MockTableView.vue'), props: () => ({ configKey: 'sys-notice' }), meta: { title: '通知公告' } },
    { path: '/sys/params', component: () => import('@/modules/generic/MockTableView.vue'), props: () => ({ configKey: 'sys-params' }), meta: { title: '参数配置' } },
+  { path: '/sys/theme-config', component: () => import('@/views/theme/ThemeConfigView.vue'), meta: { title: '主题配置' } },
  { path: '/sys/notice-user', component: () => import('@/modules/generic/MockTableView.vue'), props: () => ({ configKey: 'sys-notice-user' }), meta: { title: '用户通知' } },
  { path: '/sys/userManagement', component: () => import('@/modules/generic/MockTableView.vue'), props: () => ({ configKey: 'sys-userManagement' }), meta: { title: '全国运营中心' } },
  // user 9 个
--- a/src/views/theme/ThemeConfigView.vue
+++ b/src/views/theme/ThemeConfigView.vue
@ -0,0 +1,178 @@
+<!--
+ * F006 主题配置 (管理后台)
+ * - 选 4 套预设主题之一，应用到 pc-前端-v2 全站
+ * - 后端接口:
+ *   GET  /sys/openapi/theme/current  → { theme: "industrial-blue", available: [...] }
+ *   POST /sys/openapi/theme/update?theme=xxx 切换主题
+ * - 切换后 pc-前端-v2 下次刷新或主页轮询时会拿到最新主题
+ -->
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import PageHeader from '@/components/PageHeader/PageHeader.vue'
+import { httpGet, httpPost } from '@/utils/request'
+
+interface Theme {
+  key: string
+  label: string
+  description: string
+  primary: string
+  'primary-container': string
+  secondary: string
+  surface: string
+  'text-primary': string
+  border: string
+}
+
+const themes = ref<Theme[]>([
+  {
+    key: 'industrial-blue',
+    label: '工业蓝',
+    description: '默认主题，适用于工业品 B2B 大宗交易场景',
+    primary: '#0B5394', 'primary-container': '#E8F0FA',
+    secondary: '#E07B00', surface: '#FFFFFF',
+    'text-primary': '#1A1F2C', border: '#E2E6EE',
+  },
+  {
+    key: 'steel-red',
+    label: '钢红',
+    description: '国企/政策导向客户首选，庄重正式',
+    primary: '#A8202E', 'primary-container': '#FAE8EB',
+    secondary: '#C99B30', surface: '#FFFFFF',
+    'text-primary': '#1A1F2C', border: '#EFE2E4',
+  },
+  {
+    key: 'forest-green',
+    label: '森林绿',
+    description: '能源/碳中和/化工场景，传递可持续发展',
+    primary: '#1F6E4D', 'primary-container': '#E5F2EC',
+    secondary: '#D4A017', surface: '#FFFFFF',
+    'text-primary': '#1A1F2C', border: '#E2EAE5',
+  },
+  {
+    key: 'midnight-slate',
+    label: '暗夜深灰',
+    description: '数据型暗模式，适合长时间盯盘的运营人员',
+    primary: '#3B82F6', 'primary-container': '#1E293B',
+    secondary: '#60A5FA', surface: '#0F172A',
+    'text-primary': '#F1F5F9', border: '#334155',
+  },
+])
+
+const current = ref<string>('')
+const preview = ref<string>('')  // 用户选中但未保存
+const saving = ref(false)
+const loading = ref(false)
+
+const updateTime = ref('')
+
+async function load() {
+  loading.value = true
+  try {
+    const res: any = await httpGet('/sys/openapi/theme/current')
+    if (res.code === 0) {
+      current.value = res.data.theme
+      preview.value = res.data.theme
+      updateTime.value = new Date().toLocaleString('zh-CN')
+    }
+  } catch (e) {
+    ElMessage.error('加载当前主题失败: ' + (e as Error).message)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function save() {
+  if (!preview.value) return
+  saving.value = true
+  try {
+    const res: any = await httpPost(`/sys/openapi/theme/update?theme=${preview.value}`)
+    if (res.code === 0) {
+      current.value = preview.value
+      updateTime.value = new Date().toLocaleString('zh-CN')
+      ElMessage.success(`主题已切换为「${findByKey(preview.value)?.label}」，pc-前端-v2 下次访问将自动应用`)
+    } else {
+      ElMessage.error(res.msg || '保存失败')
+    }
+  } catch (e: any) {
+    ElMessage.error('保存失败: ' + e.message)
+  } finally {
+    saving.value = false
+  }
+}
+
+function findByKey(key: string) {
+  return themes.value.find(t => t.key === key)
+}
+
+const dirty = computed(() => preview.value !== current.value)
+
+onMounted(load)
+</script>
+
+<template>
+  <PageHeader title="主题配置" :sub="`当前生效主题 · ${findByKey(current)?.label || '加载中'} · 更新于 ${updateTime}`">
+    <div class="flex gap-2 items-center">
+      <el-tag v-if="dirty" type="warning" effect="plain">有未保存的更改</el-tag>
+      <el-button type="primary" :disabled="!dirty || saving" :loading="saving" @click="save">
+        保存并应用
+      </el-button>
+    </div>
+  </PageHeader>
+
+  <div v-loading="loading" class="grid grid-cols-1 lg:grid-cols-2 gap-5 mt-5">
+    <div
+      v-for="theme in themes"
+      :key="theme.key"
+      class="rounded-2xl border-2 transition-all cursor-pointer overflow-hidden hover:-translate-y-1 hover:shadow-xl"
+      :class="preview === theme.key
+        ? 'border-primary shadow-lg shadow-primary/20'
+        : 'border-border'"
+      @click="preview = theme.key"
+    >
+      <!-- 预览头 -->
+      <div
+        class="h-24 flex items-center justify-between px-5 text-white"
+        :style="{ background: `linear-gradient(135deg, ${theme.primary}, ${theme.secondary})` }"
+      >
+        <div>
+          <div class="text-lg font-bold">{{ theme.label }}</div>
+          <div class="text-xs opacity-80 mt-1">{{ theme.key }}</div>
+        </div>
+        <div class="flex items-center gap-2">
+          <el-icon v-if="preview === theme.key" :size="22"><Check /></el-icon>
+          <el-tag v-if="current === theme.key" type="success" effect="dark" size="small">当前生效</el-tag>
+        </div>
+      </div>
+
+      <!-- Preview mock -->
+      <div class="p-5 space-y-3" :style="{ backgroundColor: theme.surface, color: theme['text-primary'] }">
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded-lg flex items-center justify-center text-white font-bold"
+            :style="{ backgroundColor: theme.primary }">M</div>
+          <div class="font-bold text-sm">LOGO 主品牌色</div>
+        </div>
+        <div class="text-xs opacity-70">{{ theme.description }}</div>
+        <div class="flex gap-2 mt-3">
+          <button class="px-4 py-1.5 rounded-lg text-xs font-bold text-white"
+            :style="{ backgroundColor: theme.primary }">主按钮</button>
+          <button class="px-4 py-1.5 rounded-lg text-xs font-bold border-2"
+            :style="{ borderColor: theme.primary, color: theme.primary }">描边按钮</button>
+          <span class="px-3 py-1 rounded text-xs font-bold"
+            :style="{ backgroundColor: theme['primary-container'], color: theme.primary }">标签</span>
+        </div>
+        <div class="text-[10px] opacity-50 pt-2 border-t" :style="{ borderColor: theme.border }">
+          HEX: {{ theme.primary }} · {{ theme.secondary }} · {{ theme['text-primary'] }}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <el-alert
+    class="mt-6"
+    type="info"
+    :closable="false"
+    title="关于主题切换"
+    description="点击主题卡片预览，保存后 pc-前端-v2 的所有页面（包括其他用户正在浏览）将在下次请求 / 重载时生效。无需重启服务。"
+  />
+</template>