rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add creator coupons and portal lint

Browse Source
This commit is contained in:
Rogee
2026-01-14 09:51:23 +08:00
parent 4f315cc2db
commit fb0a1c2f84
14 changed files with 5103 additions and 1973 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
frontend/portal/src/views/user/NotificationsView.vue
View File

@@ -1,151 +1,216 @@
<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import Dialog from 'primevue/dialog';
import Button from 'primevue/button';
import { userApi } from '../../api/user';
import { ref, onMounted, watch } from "vue";
import Dialog from "primevue/dialog";
import Button from "primevue/button";
import { userApi } from "../../api/user";
const router = useRouter();
const currentTab = ref('all');
const currentTab = ref("all");
const dialogVisible = ref(false);
const selectedNotification = ref(null);
const loading = ref(false);
const page = ref(1);
const tabs = ref([
{ label: '全部', value: 'all', count: 0 },
{ label: '系统通知', value: 'system', count: 0 },
{ label: '订单通知', value: 'order', count: 0 },
{ label: '审核通知', value: 'audit', count: 0 },
{ label: '互动消息', value: 'interaction', count: 0 }
{ label: "全部", value: "all", count: 0 },
{ label: "系统通知", value: "system", count: 0 },
{ label: "订单通知", value: "order", count: 0 },
{ label: "审核通知", value: "audit", count: 0 },
{ label: "互动消息", value: "interaction", count: 0 },
]);
const notifications = ref([]);
const fetchNotifications = async () => {
loading.value = true;
try {
const res = await userApi.getNotifications(currentTab.value, page.value);
notifications.value = res.items || [];
} catch (e) {
console.error("Fetch notifications failed:", e);
} finally {
loading.value = false;
}
loading.value = true;
try {
const res = await userApi.getNotifications(currentTab.value, page.value);
notifications.value = res.items || [];
} catch (e) {
console.error("Fetch notifications failed:", e);
} finally {
loading.value = false;
}
};
onMounted(fetchNotifications);
watch(currentTab, () => {
page.value = 1;
fetchNotifications();
page.value = 1;
fetchNotifications();
});
const getIconStyle = (type) => {
switch(type) {
case 'system': return { bg: 'bg-blue-50', color: 'text-blue-600', icon: 'pi-megaphone' };
case 'order': return { bg: 'bg-green-50', color: 'text-green-600', icon: 'pi-shopping-bag' };
case 'audit': return { bg: 'bg-orange-50', color: 'text-orange-600', icon: 'pi-file-edit' };
case 'interaction': return { bg: 'bg-purple-50', color: 'text-purple-600', icon: 'pi-comments' };
default: return { bg: 'bg-slate-100', color: 'text-slate-500', icon: 'pi-bell' };
}
switch (type) {
case "system":
return { bg: "bg-blue-50", color: "text-blue-600", icon: "pi-megaphone" };
case "order":
return {
bg: "bg-green-50",
color: "text-green-600",
icon: "pi-shopping-bag",
};
case "audit":
return {
bg: "bg-orange-50",
color: "text-orange-600",
icon: "pi-file-edit",
};
case "interaction":
return {
bg: "bg-purple-50",
color: "text-purple-600",
icon: "pi-comments",
};
default:
return { bg: "bg-slate-100", color: "text-slate-500", icon: "pi-bell" };
}
};
const handleNotificationClick = async (item) => {
if (!item.read) {
try {
await userApi.markNotificationRead(item.id);
item.read = true;
} catch (e) {
console.error("Mark read failed:", e);
}
}
if (item.type === 'system') {
selectedNotification.value = item;
dialogVisible.value = true;
if (!item.read) {
try {
await userApi.markNotificationRead(item.id);
item.read = true;
} catch (e) {
console.error("Mark read failed:", e);
}
}
if (item.type === "system") {
selectedNotification.value = item;
dialogVisible.value = true;
}
};
const handleMarkAllRead = async () => {
try {
await userApi.markAllNotificationsRead();
notifications.value.forEach(n => n.read = true);
tabs.value.forEach(t => t.count = 0);
} catch (e) {
console.error("Mark all read failed:", e);
}
}
try {
await userApi.markAllNotificationsRead();
notifications.value.forEach((n) => (n.read = true));
tabs.value.forEach((t) => (t.count = 0));
} catch (e) {
console.error("Mark all read failed:", e);
}
};
</script>
<template>
<div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px]">
<div
class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px]"
>
<!-- Header & Tabs -->
<div class="px-6 pt-6 border-b border-slate-100 flex items-center justify-between">
<div
class="px-6 pt-6 border-b border-slate-100 flex items-center justify-between"
>
<div class="flex items-center gap-8">
<button
v-for="tab in tabs"
<button
v-for="tab in tabs"
:key="tab.value"
@click="currentTab = tab.value"
class="pb-4 text-base font-bold transition-colors border-b-2 cursor-pointer focus:outline-none relative"
:class="currentTab === tab.value ? 'text-primary-600 border-primary-600' : 'text-slate-500 border-transparent hover:text-slate-700'"
:class="
currentTab === tab.value
? 'text-primary-600 border-primary-600'
: 'text-slate-500 border-transparent hover:text-slate-700'
"
>
{{ tab.label }}
<span v-if="tab.count > 0" class="absolute -top-1 -right-4 min-w-[1.25rem] h-5 px-1.5 bg-red-500 text-white text-[10px] rounded-full flex items-center justify-center">{{ tab.count }}</span>
<span
v-if="tab.count > 0"
class="absolute -top-1 -right-4 min-w-[1.25rem] h-5 px-1.5 bg-red-500 text-white text-[10px] rounded-full flex items-center justify-center"
>{{ tab.count }}</span
>
</button>
</div>
<button @click="handleMarkAllRead" class="mb-4 text-base font-medium text-slate-500 hover:text-primary-600 cursor-pointer flex items-center gap-1">
<i class="pi pi-check-circle"></i> 全部已读
<button
@click="handleMarkAllRead"
class="mb-4 text-base font-medium text-slate-500 hover:text-primary-600 cursor-pointer flex items-center gap-1"
>
<i class="pi pi-check-circle"></i> 全部已读
</button>
</div>
<!-- Notification List -->
<div class="p-0">
<div v-if="notifications.length > 0">
<div
v-for="item in notifications"
:key="item.id"
@click="handleNotificationClick(item)"
class="flex items-start gap-4 p-5 border-b border-slate-50 hover:bg-slate-50 transition-colors cursor-pointer group"
:class="{ 'bg-blue-50/30': !item.read }"
<div v-if="notifications.length > 0">
<div
v-for="item in notifications"
:key="item.id"
@click="handleNotificationClick(item)"
class="flex items-start gap-4 p-5 border-b border-slate-50 hover:bg-slate-50 transition-colors cursor-pointer group"
:class="{ 'bg-blue-50/30': !item.read }"
>
<!-- Icon -->
<div
class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"
:class="getIconStyle(item.type).bg"
>
<!-- Icon -->
<div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0" :class="getIconStyle(item.type).bg">
<i class="pi" :class="[getIconStyle(item.type).icon, getIconStyle(item.type).color]"></i>
</div>
<!-- Content -->
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between mb-1">
<h3 class="font-bold text-slate-900 text-lg group-hover:text-primary-600 transition-colors flex items-center gap-2">
<span v-if="!item.read" class="w-2 h-2 bg-blue-600 rounded-full inline-block"></span>
{{ item.title }}
</h3>
<span class="text-sm text-slate-400 whitespace-nowrap">{{ item.time }}</span>
</div>
<p class="text-base text-slate-600 line-clamp-2">{{ item.content }}</p>
</div>
<i
class="pi"
:class="[
getIconStyle(item.type).icon,
getIconStyle(item.type).color,
]"
></i>
</div>
</div>
<!-- Empty State -->
<div v-else class="text-center py-20">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-50 mb-4">
<i class="pi pi-bell-slash text-2xl text-slate-300"></i>
<!-- Content -->
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between mb-1">
<h3
class="font-bold text-slate-900 text-lg group-hover:text-primary-600 transition-colors flex items-center gap-2"
>
<span
v-if="!item.read"
class="w-2 h-2 bg-blue-600 rounded-full inline-block"
></span>
{{ item.title }}
</h3>
<span class="text-sm text-slate-400 whitespace-nowrap">{{
item.time
}}</span>
</div>
<p class="text-base text-slate-600 line-clamp-2">
{{ item.content }}
</p>
</div>
<p class="text-slate-500 text-lg">暂无消息通知</p>
</div>
</div>
</div>
<!-- Empty State -->
<div v-else class="text-center py-20">
<div
class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-50 mb-4"
>
<i class="pi pi-bell-slash text-2xl text-slate-300"></i>
</div>
<p class="text-slate-500 text-lg">暂无消息通知</p>
</div>
</div>
<!-- System Message Modal -->
<Dialog v-model:visible="dialogVisible" modal :header="selectedNotification?.title" :style="{ width: '50rem' }" :breakpoints="{ '960px': '75vw', '641px': '90vw' }">
<div class="p-4">
<div class="text-slate-500 text-sm mb-4">{{ selectedNotification?.time }}</div>
<div class="text-slate-700 leading-relaxed whitespace-pre-wrap">{{ selectedNotification?.content }}</div>
<Dialog
v-model:visible="dialogVisible"
modal
:header="selectedNotification?.title"
:style="{ width: '50rem' }"
:breakpoints="{ '960px': '75vw', '641px': '90vw' }"
>
<div class="p-4">
<div class="text-slate-500 text-sm mb-4">
{{ selectedNotification?.time }}
</div>
<template #footer>
<Button label="关闭" icon="pi pi-check" @click="dialogVisible = false" autofocus />
</template>
<div class="text-slate-700 leading-relaxed whitespace-pre-wrap">
{{ selectedNotification?.content }}
</div>
</div>
<template #footer>
<Button
label="关闭"
icon="pi pi-check"
@click="dialogVisible = false"
autofocus
/>
</template>
</Dialog>
</div>
</template>
</template>

227
frontend/portal/src/views/user/SecurityView.vue
View File

@@ -1,115 +1,154 @@
<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import Dialog from "primevue/dialog";
import ConfirmDialog from "primevue/confirmdialog";
import Toast from "primevue/toast";
import { useToast } from "primevue/usetoast";
import { tenantPath } from "../../utils/tenant";
const toast = useToast();
const verifyDialog = ref(false);
const currentAction = ref("");
const route = useRoute();
const tenantRoute = (path) => tenantPath(path, route);
const openVerify = (action) => {
currentAction.value = action;
verifyDialog.value = true;
};
const handleVerifySuccess = () => {
verifyDialog.value = false;
toast.add({
severity: "success",
summary: "验证通过",
detail: "即将跳转至操作页面...",
life: 2000,
});
// In real app, redirect to specific edit page
};
</script>
<template>
<div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8">
<div
class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8"
>
<h1 class="text-2xl font-bold text-slate-900 mb-8">账号安全</h1>
<!-- Security Level (Optional visual) -->
<div class="mb-10 p-6 bg-slate-50 rounded-xl border border-slate-100 flex items-center justify-between">
<div>
<div class="text-lg font-bold text-slate-900 mb-1">安全等级：中</div>
<p class="text-sm text-slate-500">建议绑定邮箱并完成实名认证，提升账号安全性。</p>
</div>
<div class="w-32 h-2 bg-slate-200 rounded-full overflow-hidden">
<div class="h-full bg-orange-500 w-1/2"></div>
</div>
<div
class="mb-10 p-6 bg-slate-50 rounded-xl border border-slate-100 flex items-center justify-between"
>
<div>
<div class="text-lg font-bold text-slate-900 mb-1">安全等级：中</div>
<p class="text-sm text-slate-500">
建议绑定邮箱并完成实名认证，提升账号安全性。
</p>
</div>
<div class="w-32 h-2 bg-slate-200 rounded-full overflow-hidden">
<div class="h-full bg-orange-500 w-1/2"></div>
</div>
</div>
<!-- Security Items -->
<div class="space-y-6">
<!-- Phone -->
<div class="flex items-center justify-between py-4 border-b border-slate-50">
<div class="flex items-center gap-4">
<i class="pi pi-mobile text-xl text-slate-400"></i>
<div>
<div class="font-bold text-slate-900">手机绑定</div>
<div class="text-sm text-slate-500">已绑定：138****8888</div>
</div>
<!-- Phone -->
<div
class="flex items-center justify-between py-4 border-b border-slate-50"
>
<div class="flex items-center gap-4">
<i class="pi pi-mobile text-xl text-slate-400"></i>
<div>
<div class="font-bold text-slate-900">手机绑定</div>
<div class="text-sm text-slate-500">已绑定：138****8888</div>
</div>
<button @click="openVerify('phone')" class="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg hover:bg-slate-50 text-sm font-medium transition-colors">更换</button>
</div>
</div>
<button
@click="openVerify('phone')"
class="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg hover:bg-slate-50 text-sm font-medium transition-colors"
>
更换
</button>
</div>
<!-- Real-name Auth -->
<div class="flex items-center justify-between py-4 border-b border-slate-50">
<div class="flex items-center gap-4">
<i class="pi pi-id-card text-xl text-slate-400"></i>
<div>
<div class="font-bold text-slate-900">实名认证</div>
<div class="text-sm text-slate-500">未认证，发布内容前需完成认证</div>
</div>
<!-- Real-name Auth -->
<div
class="flex items-center justify-between py-4 border-b border-slate-50"
>
<div class="flex items-center gap-4">
<i class="pi pi-id-card text-xl text-slate-400"></i>
<div>
<div class="font-bold text-slate-900">实名认证</div>
<div class="text-sm text-slate-500">
未认证，发布内容前需完成认证
</div>
</div>
<button @click="$router.push(tenantRoute('/creator/apply'))" class="px-4 py-2 text-primary-600 font-medium hover:text-primary-700 text-sm transition-colors">去认证</button>
</div>
</div>
<button
@click="$router.push(tenantRoute('/creator/apply'))"
class="px-4 py-2 text-primary-600 font-medium hover:text-primary-700 text-sm transition-colors"
>
去认证
</button>
</div>
</div>
<!-- Verification Dialog -->
<Dialog v-model:visible="verifyDialog" modal header="安全验证" :style="{ width: '25rem' }">
<div class="text-sm text-slate-600 mb-6">为了您的账号安全，请先进行身份验证。</div>
<div class="space-y-4">
<div>
<label class="block text-xs font-bold text-slate-500 mb-1">手机号</label>
<div class="text-lg font-bold text-slate-900">138****8888</div>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 mb-2">验证码</label>
<div class="flex gap-2">
<input type="text" class="flex-1 h-10 px-3 rounded border border-slate-200 focus:border-primary-500 focus:outline-none" placeholder="6位数字">
<button class="px-3 h-10 border border-slate-200 rounded text-sm text-slate-600 hover:bg-slate-50">获取验证码</button>
</div>
</div>
</div>
<Dialog
v-model:visible="verifyDialog"
modal
header="安全验证"
:style="{ width: '25rem' }"
>
<div class="text-sm text-slate-600 mb-6">
为了您的账号安全，请先进行身份验证。
</div>
<div class="flex justify-end gap-2 mt-8">
<button @click="verifyDialog = false" class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm">取消</button>
<button @click="handleVerifySuccess" class="px-4 py-2 bg-primary-600 text-white rounded hover:bg-primary-700 text-sm">下一步</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-xs font-bold text-slate-500 mb-1"
>手机号</label
>
<div class="text-lg font-bold text-slate-900">138****8888</div>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 mb-2"
>验证码</label
>
<div class="flex gap-2">
<input
type="text"
class="flex-1 h-10 px-3 rounded border border-slate-200 focus:border-primary-500 focus:outline-none"
placeholder="6位数字"
/>
<button
class="px-3 h-10 border border-slate-200 rounded text-sm text-slate-600 hover:bg-slate-50"
>
获取验证码
</button>
</div>
</div>
</div>
<div class="flex justify-end gap-2 mt-8">
<button
@click="verifyDialog = false"
class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm"
>
取消
</button>
<button
@click="handleVerifySuccess"
class="px-4 py-2 bg-primary-600 text-white rounded hover:bg-primary-700 text-sm"
>
下一步
</button>
</div>
</Dialog>
<ConfirmDialog></ConfirmDialog>
<Toast />
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import Dialog from 'primevue/dialog';
import ConfirmDialog from 'primevue/confirmdialog';
import Toast from 'primevue/toast';
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import { tenantPath } from '../../utils/tenant';
const confirm = useConfirm();
const toast = useToast();
const verifyDialog = ref(false);
const currentAction = ref('');
const route = useRoute();
const tenantRoute = (path) => tenantPath(path, route);
const openVerify = (action) => {
currentAction.value = action;
verifyDialog.value = true;
};
const handleVerifySuccess = () => {
verifyDialog.value = false;
toast.add({ severity: 'success', summary: '验证通过', detail: '即将跳转至操作页面...', life: 2000 });
// In real app, redirect to specific edit page
};
const confirmDelete = () => {
confirm.require({
message: '注销后，您的所有数据、资产、购买记录将永久丢失且无法找回。请输入“注销”以确认。',
header: '高风险操作确认',
icon: 'pi pi-info-circle',
rejectLabel: '取消',
acceptLabel: '确认注销',
rejectClass: 'p-button-secondary p-button-outlined',
acceptClass: 'p-button-danger',
accept: () => {
toast.add({ severity: 'error', summary: '已提交注销申请', detail: '账号将在 7 天后正式注销', life: 3000 });
}
});
};
</script>