重新提交项目内容
This commit is contained in:
李远
parent
e523a3ce4b
commit
cd4e1d7e54
|
|
@ -1,42 +0,0 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
||||
.eslintcache
|
||||
|
||||
# Cypress
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Vitest
|
||||
__screenshots__/
|
||||
|
||||
# Vite
|
||||
*.timestamp-*-*.mjs
|
||||
|
||||
#auto generated files
|
||||
.eslintrc-auto-import.json
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
@import './user.scss';
|
||||
*{margin: 0;padding: 0;box-sizing: border-box;}
|
||||
html,body{
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
}
|
||||
/* 过渡动画样式（name="fade" 对应前缀 fade-） */
|
||||
/* 1. 进入/离开的初始状态 */
|
||||
.user-enter-from,
|
||||
.user-leave-to {
|
||||
opacity: 0;
|
||||
/* 初始透明 */
|
||||
transform: translateX(20px);
|
||||
/* 初始右移20px */
|
||||
}
|
||||
|
||||
/* 2. 进入/离开的过渡过程 */
|
||||
.user-enter-active,
|
||||
.user-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
/* 过渡时长、缓动效果 */
|
||||
}
|
||||
|
||||
/* 3. 进入完成/离开开始的状态 */
|
||||
.user-enter-to,
|
||||
.user-leave-from {
|
||||
opacity: 1;
|
||||
/* 最终不透明 */
|
||||
transform: translateX(0);
|
||||
/* 最终回到原位 */
|
||||
}
|
||||
|
||||
// 全局通知样式
|
||||
.global-notification {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
// 2. 重写动画：从顶部淡入（取消右侧滑入）
|
||||
&.el-notification-fade-enter-active,
|
||||
&.el-notification-fade-leave-active {
|
||||
transition: all 0.3s ease-out !important;
|
||||
transform: translate(-50%, -150%) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import { useUserStore } from '@/stores/modules/user';
|
||||
|
||||
const routes = [
|
||||
// 1. 补全根路径路由定义，避免通配符无限循环
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: () => import('@/views/Test/index.vue'), // 替换为你的首页组件
|
||||
meta: { requiresAuth: true ,title: '首页' } // 首页需要登录
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
name: 'User',
|
||||
component: () => import('@/views/user/index.vue'),
|
||||
redirect: '/user/login',
|
||||
children: [
|
||||
{
|
||||
path: 'login',
|
||||
name: 'Login',
|
||||
component: () => import('@/views/user/Login.vue'),
|
||||
meta: { isAuthPage: true, title: '登录' }
|
||||
},
|
||||
{
|
||||
path: 'register',
|
||||
name: 'Register',
|
||||
component: () => import('@/views/user/Register.vue'),
|
||||
meta: { isAuthPage: true, title: '注册' }
|
||||
},
|
||||
{
|
||||
path: 'forgot-password',
|
||||
name: 'ForgotPassword',
|
||||
component: () => import('@/views/user/ForgotPassword.vue'),
|
||||
meta: { isAuthPage: true, title: '忘记密码' }
|
||||
},
|
||||
{
|
||||
path: 'change-password',
|
||||
name: 'ChangePassword',
|
||||
component: () => import('@/views/user/ChangePassword.vue'),
|
||||
meta: { requiresAuth: true, title: '修改密码' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
redirect: '/user/login' // 404 重定向到登录页，避免循环
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
});
|
||||
|
||||
// 全局前置守卫
|
||||
router.beforeEach(async (to, from) => {
|
||||
const userStore = useUserStore();
|
||||
const isLoggedIn = !!userStore.token;
|
||||
|
||||
// 从修改密码页跳登录页时，直接放行（不跳首页）
|
||||
const isFromChangePasswordToLogin = from.path === '/user/change-password' && to.path === '/user/login';
|
||||
if (isFromChangePasswordToLogin) {
|
||||
return true; // 放行，跳过后续的“已登录访问授权页跳首页”逻辑
|
||||
}
|
||||
// 1. 已登录用户访问授权页 → 重定向到首页
|
||||
if (isLoggedIn && to.meta.isAuthPage) {
|
||||
if (to.path === '/') return true;
|
||||
return '/';
|
||||
}
|
||||
|
||||
// 2. 未登录用户访问需要登录的页面（包括首页）→ 重定向到登录页
|
||||
if (!isLoggedIn && to.meta.requiresAuth) {
|
||||
if (to.path === '/user/login') return true;
|
||||
return '/user/login';
|
||||
}
|
||||
|
||||
// 3. 其他情况正常放行
|
||||
return true;
|
||||
});
|
||||
|
||||
// 可选：设置页面标题
|
||||
router.afterEach((to) => {
|
||||
if (to.meta.title) {
|
||||
document.title = to.meta.title as string;
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
import type { Ref } from 'vue';
|
||||
import { setStorage, getStorage, removeStorage } from '@/utils/storage';
|
||||
// 既支持指定的固定值，也支持任意字符串
|
||||
export type CaptchaType = 'phone' | 'email' | string;
|
||||
|
||||
// 本地存储的状态类型
|
||||
interface StoredCaptchaState {
|
||||
type: CaptchaType; // 验证码类型
|
||||
receiver: string; // 接收方（手机号/邮箱）
|
||||
sendTime: number; // 发送时间戳（毫秒）
|
||||
totalSeconds: number; // 总倒计时时长（默认60）
|
||||
}
|
||||
|
||||
// 倒计时状态类型（供组件绑定）
|
||||
export interface CaptchaCountdownState {
|
||||
countdown: Ref<number>; // 剩余秒数
|
||||
isCounting: Ref<boolean>; // 是否正在倒计时
|
||||
timer: number | null; // 定时器标识
|
||||
key: string; // 唯一标识（区分不同场景/类型的验证码，如：register_phone）
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化验证码倒计时状态（支持刷新恢复）
|
||||
* @param key 唯一标识（必填，如：register_phone/register_email/forgotPassword_phone）
|
||||
* @param totalSeconds 总倒计时时长（默认60秒）
|
||||
* @returns 倒计时状态对象
|
||||
*/
|
||||
export const initCaptchaState = (key: string, totalSeconds: number = 60): CaptchaCountdownState => {
|
||||
const state: CaptchaCountdownState = {
|
||||
countdown: ref(0),
|
||||
isCounting: ref(false),
|
||||
timer: null,
|
||||
key
|
||||
};
|
||||
|
||||
// 页面刷新后，从sessionStorage恢复状态
|
||||
const stored = getStorage<StoredCaptchaState>(`captcha_${key}`, 'session');
|
||||
if (stored) {
|
||||
try {
|
||||
const now = Date.now();
|
||||
// 计算剩余时间 = 总时长 - (当前时间 - 发送时间戳)/1000
|
||||
const remaining = stored.totalSeconds - Math.floor((now - stored.sendTime) / 1000);
|
||||
|
||||
// 剩余时间>0，恢复倒计时
|
||||
if (remaining > 0) {
|
||||
state.countdown.value = remaining;
|
||||
state.isCounting.value = true;
|
||||
|
||||
// 重启定时器
|
||||
state.timer = window.setInterval(() => {
|
||||
state.countdown.value--;
|
||||
// 同步更新本地存储的剩余时间（可选，增强鲁棒性）
|
||||
updateStoredCaptchaState(state.key, state.countdown.value);
|
||||
|
||||
if (state.countdown.value <= 0) {
|
||||
clearCaptchaTimer(state); // 倒计时结束，清除状态
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
// 剩余时间<=0，清空本地存储
|
||||
removeStorage(`captcha_${key}`, 'session');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('恢复验证码倒计时状态失败：', e);
|
||||
removeStorage(`captcha_${key}`, 'session');
|
||||
}
|
||||
}
|
||||
|
||||
return state;
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新本地存储的验证码状态（内部使用）
|
||||
*/
|
||||
const updateStoredCaptchaState = (key: string, remaining: number) => {
|
||||
const stored = getStorage<StoredCaptchaState>(`captcha_${key}`, 'session');
|
||||
if (stored) {
|
||||
// 仅更新剩余时间（可选，核心是时间戳，剩余时间只是辅助）
|
||||
setStorage(`captcha_${key}`, {
|
||||
...stored,
|
||||
// 可选：记录剩余时间，方便初始化时快速读取
|
||||
remaining
|
||||
}, 'session');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 通用发送验证码函数（支持手机/邮箱，防刷新重复发送）
|
||||
* @param type 验证码类型：phone/email
|
||||
* @param receiver 接收方：手机号/邮箱地址
|
||||
* @param state 倒计时状态（由initCaptchaState生成）
|
||||
* @param sendApi 实际发送验证码的接口函数（需自行实现，入参为receiver）
|
||||
* @returns Promise<boolean> 发送是否成功
|
||||
*/
|
||||
export const sendCaptcha = async (
|
||||
type: CaptchaType,
|
||||
receiver: string,
|
||||
state: CaptchaCountdownState,
|
||||
sendApi: (receiver: string) => Promise<any>
|
||||
): Promise<boolean> => {
|
||||
// ========== 核心：刷新后防重复发送的校验 ==========
|
||||
const stored = getStorage<StoredCaptchaState>(`captcha_${state.key}`, 'session');
|
||||
if (stored) {
|
||||
const now = Date.now();
|
||||
const elapsed = Math.floor((now - stored.sendTime) / 1000); // 已过去的秒数
|
||||
|
||||
// 未到冷却期（60秒），禁止发送
|
||||
if (elapsed < stored.totalSeconds) {
|
||||
const remaining = stored.totalSeconds - elapsed;
|
||||
ElNotification({
|
||||
message: `请${remaining}秒后再发送验证码`,
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
customClass: 'global-notification'
|
||||
});
|
||||
// 恢复倒计时（防止内存状态和本地存储不一致）
|
||||
state.countdown.value = remaining;
|
||||
state.isCounting.value = true;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 原有校验 ==========
|
||||
if (state.isCounting.value) {
|
||||
ElNotification({
|
||||
message: '验证码已发送，请勿重复点击',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
customClass: 'global-notification'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!receiver) {
|
||||
ElNotification({
|
||||
message: `请输入${type === 'phone' ? '手机号' : '邮箱'}`,
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
customClass: 'global-notification'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
// 1. 调用真实发送接口
|
||||
// await sendApi(receiver);
|
||||
|
||||
// 2. 发送成功提示
|
||||
ElNotification({
|
||||
message: `验证码已发送至${type === 'phone' ? '手机' : '邮箱'}，请注意查收`,
|
||||
type: 'success',
|
||||
duration: 2000,
|
||||
customClass: 'global-notification'
|
||||
});
|
||||
|
||||
// 3. 记录发送状态到本地存储（核心：防刷新）
|
||||
const storedState: StoredCaptchaState = {
|
||||
type,
|
||||
receiver,
|
||||
sendTime: Date.now(), // 发送时间戳（毫秒）
|
||||
totalSeconds: 60 // 总倒计时时长
|
||||
};
|
||||
setStorage(`captcha_${state.key}`, storedState, 'session');
|
||||
|
||||
|
||||
|
||||
// 4. 启动60秒倒计时
|
||||
state.isCounting.value = true;
|
||||
state.countdown.value = 60;
|
||||
|
||||
// 清除旧定时器（防止重复）
|
||||
if (state.timer) clearInterval(state.timer);
|
||||
|
||||
// 5. 定时器逻辑（同步更新本地存储）
|
||||
state.timer = window.setInterval(() => {
|
||||
state.countdown.value--;
|
||||
// 同步更新本地存储的剩余时间
|
||||
updateStoredCaptchaState(state.key, state.countdown.value);
|
||||
|
||||
if (state.countdown.value <= 0) {
|
||||
clearCaptchaTimer(state); // 倒计时结束，清除所有状态
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
ElNotification({
|
||||
message: `发送${type}验证码失败：${(error as Error).message || '未知错误'}`,
|
||||
type: 'error',
|
||||
duration: 2000,
|
||||
customClass: 'global-notification'
|
||||
});
|
||||
console.error(`发送${type}验证码失败：`, error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 清除验证码倒计时（组件卸载/倒计时结束时调用，防止内存泄漏+清空本地存储）
|
||||
* @param state 倒计时状态
|
||||
*/
|
||||
export const clearCaptchaTimer = (state: CaptchaCountdownState): void => {
|
||||
// 1. 清除定时器
|
||||
if (state.timer) {
|
||||
clearInterval(state.timer);
|
||||
state.timer = null;
|
||||
}
|
||||
|
||||
// 2. 重置内存状态
|
||||
state.countdown.value = 0;
|
||||
state.isCounting.value = false;
|
||||
|
||||
// 3. 清空本地存储（核心：倒计时结束后允许重新发送）
|
||||
removeStorage(`captcha_${state.key}`, 'session');
|
||||
};
|
||||
|
|
@ -1,219 +0,0 @@
|
|||
<template>
|
||||
<div class="user-card">
|
||||
<UserHeader />
|
||||
<UserText :user-text="userText" @back="handleBack" />
|
||||
<UserTabs v-model="activeTab" :tab-list="tabList" />
|
||||
|
||||
<el-form class="user-form" ref="changePasswordFormRef" :model="changePasswordForm" :rules="changePasswordRules">
|
||||
<UserCaptcha v-model="changePasswordForm.code" @sendCode="handleSendCode" :show-send-button="showSendButton"
|
||||
:send-state="sendState" />
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="changePasswordForm.password" placeholder="请输入新密码" type="password" show-password clearable
|
||||
size="large" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="confirmPassword">
|
||||
<el-input v-model="changePasswordForm.confirmPassword" placeholder="请确认新密码" type="password" show-password
|
||||
clearable size="large" />
|
||||
</el-form-item>
|
||||
<el-form-item class="form-submit">
|
||||
<el-button type="primary" @click="handleChangePassword">重新登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// type类型
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
// 组件
|
||||
import UserHeader from './components/Header.vue'
|
||||
import UserText from './components/Text.vue'
|
||||
import UserTabs from './components/Tabs.vue'
|
||||
import UserCaptcha from './components/Captcha.vue'
|
||||
|
||||
//公共方法/store/配置文件
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { getStorage } from '@/utils/storage'
|
||||
import { md5Encrypt } from '@/utils/crypto'
|
||||
import { sendCaptcha, initCaptchaState, clearCaptchaTimer } from '@/utils/sendCaptcha'
|
||||
|
||||
//用户校验规则
|
||||
import { passwordRules, emailRules, phoneRules, codeRules } from './config/rules'
|
||||
//store实例和获取user信息
|
||||
const userStore = useUserStore()
|
||||
const userInfo = getStorage<any>('userInfo')
|
||||
|
||||
//userText 实例
|
||||
const userText = ref({
|
||||
backText: '返回',
|
||||
account: userInfo?.username || ''
|
||||
})
|
||||
|
||||
//tabs 实例
|
||||
const tabList = ref([
|
||||
{ label: '邮箱验证', name: 'email' },
|
||||
{ label: '手机验证', name: 'phone' },
|
||||
])
|
||||
const activeTab = ref<string>(getStorage('loginType', 'session') || 'email')
|
||||
|
||||
// ChangePassword 表单实例
|
||||
const changePasswordFormRef = ref<FormInstance>()
|
||||
const changePasswordForm = ref({
|
||||
email: userInfo?.email || '',
|
||||
countryCode: '+86',
|
||||
phone: userInfo?.mobile || '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
code: '',
|
||||
})
|
||||
console.log('changePasswordForm.value', changePasswordForm.value);
|
||||
const changePasswordRules = ref<FormRules>({
|
||||
email: emailRules().email,
|
||||
phone: phoneRules(changePasswordForm.value).phone,
|
||||
password: passwordRules(changePasswordForm.value).password,
|
||||
confirmPassword: passwordRules(changePasswordForm.value).confirmPassword,
|
||||
code: codeRules().code,
|
||||
})
|
||||
|
||||
// 验证码实例
|
||||
const showSendButton = ref<boolean>(true)
|
||||
const sendState = ref<object>({
|
||||
isCounting: false,
|
||||
countdown: 0,
|
||||
})
|
||||
//初始化验证码倒计时状态
|
||||
const emailCaptchaState = initCaptchaState('email'); // 邮箱专属
|
||||
const phoneCaptchaState = initCaptchaState('phone'); // 手机专属
|
||||
// 邮箱验证码状态
|
||||
const { isCounting: emailIsCounting, countdown: emailCountdown } = emailCaptchaState
|
||||
// 手机验证码状态
|
||||
const { isCounting: phoneIsCounting, countdown: phoneCountdown } = phoneCaptchaState
|
||||
|
||||
//方法
|
||||
// 统一更新sendState的方法
|
||||
const updateSendState = (type: string) => {
|
||||
if (type === 'email') {
|
||||
sendState.value = {
|
||||
isCounting: emailIsCounting,
|
||||
countdown: emailCountdown
|
||||
}
|
||||
} else {
|
||||
sendState.value = {
|
||||
isCounting: phoneIsCounting,
|
||||
countdown: phoneCountdown
|
||||
}
|
||||
}
|
||||
}
|
||||
// 初始化时根据当前activeTab更新sendState（避免刷新后丢失）
|
||||
const initSendState = () => {
|
||||
const currentType = activeTab.value === 'email' ? 'email' : 'phone'
|
||||
updateSendState(currentType)
|
||||
}
|
||||
onMounted(() => {
|
||||
// 页面加载时立即执行，恢复倒计时
|
||||
initSendState()
|
||||
})
|
||||
// 监听activeTab变化，同步sendState
|
||||
watch(
|
||||
activeTab,
|
||||
(newTab, oldTab) => {
|
||||
activeTab.value = newTab;
|
||||
console.log('activeTab.value', activeTab.value);
|
||||
// 只有“主动切换tab”（oldTab有值）时才处理，初始化时（oldTab为undefined）不触发
|
||||
if (oldTab === undefined) return
|
||||
|
||||
if (newTab === 'email' || newTab === 'phone') {
|
||||
// 主动切换到邮箱/手机页时，同步当前类型的倒计时状态（不再无脑重置）
|
||||
updateSendState(newTab)
|
||||
} else if (newTab === 'code') {
|
||||
// 切换到验证码页时，根据存储的类型更新状态
|
||||
const currentType: string = getStorage('forgotType', 'session') || 'email'
|
||||
updateSendState(currentType)
|
||||
}
|
||||
},
|
||||
{ immediate: false } // 关键：关闭立即执行，避免刷新时触发
|
||||
)
|
||||
|
||||
// 定义发送验证码接口
|
||||
const sendCodeApi = async () => {
|
||||
// 发送验证码参数
|
||||
const sendParams = {
|
||||
email: changePasswordForm.value.email,
|
||||
mobile: changePasswordForm.value.phone,
|
||||
reg_type: activeTab.value === 'email' ? 1 : 2,
|
||||
type:'resetPass_code'
|
||||
}
|
||||
return userStore.sendCode(sendParams)
|
||||
}
|
||||
|
||||
|
||||
|
||||
//发送验证码
|
||||
const handleSendCode = async () => {
|
||||
const currentType = activeTab.value
|
||||
// 第二步：确定类型、接收方、对应的倒计时状态和发送函数
|
||||
const type: string = currentType || 'email'
|
||||
const receiver = type === 'phone' ? changePasswordForm.value.phone : changePasswordForm.value.email;
|
||||
const currentCaptchaState = type === 'phone' ? phoneCaptchaState : emailCaptchaState;
|
||||
|
||||
// 第三步：调用封装的发送函数（传正确的函数，而非字符串）
|
||||
await sendCaptcha(
|
||||
type,
|
||||
receiver,
|
||||
currentCaptchaState, // 只更新当前类型的倒计时状态
|
||||
() => sendCodeApi() // 传入返回Promise的函数
|
||||
);
|
||||
|
||||
//把状态同步给子组件
|
||||
updateSendState(type)
|
||||
}
|
||||
|
||||
// 登录
|
||||
const handleChangePassword = async () => {
|
||||
if (!changePasswordFormRef.value) return;
|
||||
|
||||
try {
|
||||
//信息校验
|
||||
await changePasswordFormRef.value.validate();
|
||||
|
||||
// 重置密码参数
|
||||
const changePasswordParams = {
|
||||
mobile: changePasswordForm.value.phone,
|
||||
email: changePasswordForm.value.email,
|
||||
reg_type: activeTab.value === 'email' ? 1 : 2,
|
||||
code: changePasswordForm.value.code,
|
||||
login_password1: md5Encrypt(changePasswordForm.value.password),
|
||||
login_password2: md5Encrypt(changePasswordForm.value.confirmPassword),
|
||||
};
|
||||
console.log('changePasswordParams', changePasswordParams);
|
||||
await userStore.changePassword(changePasswordParams);
|
||||
changePasswordForm.value = {
|
||||
email: userInfo?.email || '',
|
||||
countryCode: '+86',
|
||||
phone: userInfo?.mobile || '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
code: ''
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('表单校验失败：', error);
|
||||
}
|
||||
}
|
||||
|
||||
//返回登录页
|
||||
const handleBack = () => {
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-text {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.user-form {
|
||||
.form-submit {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue