feat: 🎸 重构layout
chenkl
5 years ago
parent
51313d7116
commit
7ede02141e
@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
|
||||
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
|
||||
<g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
|
||||
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
|
||||
<mask id="mask-3" fill="white">
|
||||
<use xlink:href="#path-2"></use>
|
||||
</mask>
|
||||
<g id="Rectangle-18">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
|
||||
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
|
||||
<rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
|
||||
<defs>
|
||||
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
|
||||
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="setting-copy-2" transform="translate(-1254.000000, -337.000000)">
|
||||
<g id="Group-8" transform="translate(1167.000000, 0.000000)">
|
||||
<g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 338.000000)">
|
||||
<mask id="mask-3" fill="white">
|
||||
<use xlink:href="#path-2"></use>
|
||||
</mask>
|
||||
<g id="Rectangle-18">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
|
||||
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
<rect id="Rectangle-11" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
|
||||
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="é
ç½®é¢æ¿" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
|
||||
<g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
|
||||
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
|
||||
<mask id="mask-3" fill="white">
|
||||
<use xlink:href="#path-2"></use>
|
||||
</mask>
|
||||
<g id="Rectangle-18">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
|
||||
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
<rect id="Rectangle-18" fill="#fff" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
|
||||
<rect id="Rectangle-11" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="setting__content">
|
||||
<div class="setting__title">导航栏布局</div>
|
||||
<div class="icon__wrap">
|
||||
<span :class="{'icon--active': layout==='Classic'}" @click="setLayout('Classic')">
|
||||
<el-tooltip effect="dark" content="经典布局" placement="bottom">
|
||||
<svg-icon icon-class="layout-classic" class="setting-svg-icon" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span :class="{'icon--active': layout==='LeftTop'}" @click="setLayout('LeftTop')">
|
||||
<el-tooltip effect="dark" content="左侧顶部布局" placement="bottom">
|
||||
<svg-icon icon-class="layout-topLeft" class="setting-svg-icon" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span :class="{'icon--active': layout==='Top'}" @click="setLayout('Top')">
|
||||
<el-tooltip effect="dark" content="顶部布局" placement="bottom">
|
||||
<svg-icon icon-class="layout-top" class="setting-svg-icon" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="setting__title">侧边菜单主题</div>
|
||||
|
||||
<div class="setting__title">顶部菜单主题</div>
|
||||
|
||||
<div class="setting__title">界面功能</div>
|
||||
<div class="setting__item">
|
||||
<span>固定顶部操作栏</span>
|
||||
<el-switch v-model="fixedNavbar" @change="setFixedNavbar" />
|
||||
</div>
|
||||
|
||||
<div class="setting__title">界面显示</div>
|
||||
<div class="setting__item">
|
||||
<span>顶部操作栏</span>
|
||||
<el-switch v-model="navbar" @change="setNavbar" />
|
||||
</div>
|
||||
<div class="setting__item">
|
||||
<span>侧边栏缩收</span>
|
||||
<el-switch v-model="hamburger" @change="setHamburger" />
|
||||
</div>
|
||||
<div class="setting__item">
|
||||
<span>面包屑</span>
|
||||
<el-switch v-model="breadcrumb" @change="setBreadcrumb" />
|
||||
</div>
|
||||
<div class="setting__item">
|
||||
<span>全屏按钮</span>
|
||||
<el-switch v-model="screenfull" @change="setScreenfull" />
|
||||
</div>
|
||||
<div class="setting__item">
|
||||
<span>用户头像</span>
|
||||
<el-switch v-model="userInfo" @change="setUserInfo" />
|
||||
</div>
|
||||
<div class="setting__item">
|
||||
<span>标签页</span>
|
||||
<el-switch v-model="tagsView" @change="setTagsView" />
|
||||
</div>
|
||||
<div class="setting__item">
|
||||
<span>LOGO</span>
|
||||
<el-switch v-model="logo" @change="setLogo" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref } from 'vue'
|
||||
import { appStore } from '_p/index/store/modules/app'
|
||||
export default defineComponent({
|
||||
name: 'Setting',
|
||||
setup() {
|
||||
const layout = computed(() => appStore.layout)
|
||||
function setLayout(mode: 'Classic' | 'LeftTop' | 'Top' | 'Test') {
|
||||
if (mode === layout.value) return
|
||||
appStore.SetLayout(mode)
|
||||
}
|
||||
|
||||
const fixedNavbar = ref<boolean>(appStore.fixedNavbar)
|
||||
function setFixedNavbar(fixedNavbar: boolean) {
|
||||
appStore.SetFixedNavbar(fixedNavbar)
|
||||
}
|
||||
|
||||
const navbar = ref<boolean>(appStore.showNavbar)
|
||||
function setNavbar(navbar: boolean) {
|
||||
appStore.SetShowNavbar(navbar)
|
||||
}
|
||||
|
||||
const hamburger = ref<boolean>(appStore.showHamburger)
|
||||
function setHamburger(hamburger: boolean) {
|
||||
appStore.SetHamburger(hamburger)
|
||||
}
|
||||
|
||||
const breadcrumb = ref<boolean>(appStore.showBreadcrumb)
|
||||
function setBreadcrumb(breadcrumb: boolean) {
|
||||
appStore.SetBreadcrumb(breadcrumb)
|
||||
}
|
||||
|
||||
const screenfull = ref<boolean>(appStore.showScreenfull)
|
||||
function setScreenfull(screenfull: boolean) {
|
||||
appStore.SetScreenfull(screenfull)
|
||||
}
|
||||
|
||||
const userInfo = ref<boolean>(appStore.showUserInfo)
|
||||
function setUserInfo(userInfo: boolean) {
|
||||
appStore.SetUserInfo(userInfo)
|
||||
}
|
||||
|
||||
const tagsView = ref<boolean>(appStore.showTags)
|
||||
function setTagsView(tagsView: boolean) {
|
||||
appStore.SetShowTags(tagsView)
|
||||
}
|
||||
|
||||
const logo = ref<boolean>(appStore.showLogo)
|
||||
function setLogo(logo: boolean) {
|
||||
appStore.SetShowLogo(logo)
|
||||
}
|
||||
|
||||
return {
|
||||
layout, setLayout,
|
||||
fixedNavbar, setFixedNavbar,
|
||||
navbar, setNavbar,
|
||||
hamburger, setHamburger,
|
||||
breadcrumb, setBreadcrumb,
|
||||
screenfull, setScreenfull,
|
||||
userInfo, setUserInfo,
|
||||
tagsView, setTagsView,
|
||||
logo, setLogo
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.setting__content {
|
||||
background: @appBg;
|
||||
padding: 0 20px;
|
||||
.setting__title {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.icon__wrap {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
&>span {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
border: 2px solid @appBg;
|
||||
.setting-svg-icon {
|
||||
font-size: 60px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.setting-svg-icon:nth-of-type(2) {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
.icon--active {
|
||||
border: 2px solid #018ffb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.setting__item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<a v-if="isExternal(to)" :href="to" target="_blank" rel="noopener">
|
||||
<slot />
|
||||
</a>
|
||||
<router-link v-else :to="to">
|
||||
<slot />
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue'
|
||||
import { isExternal } from '@/utils/validate'
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
to: {
|
||||
type: String as PropType<string>,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
isExternal
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<el-scrollbar
|
||||
ref="scrollContainer"
|
||||
class="scroll-container"
|
||||
@wheel="handleScroll"
|
||||
>
|
||||
<slot />
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, unref, nextTick } from 'vue'
|
||||
import { useScrollTo } from '@/hooks/useScrollTo'
|
||||
const tagAndTagSpacing = 4 // tagAndTagSpacing
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ScrollPane',
|
||||
setup() {
|
||||
const scrollContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
function handleScroll(e: any): void {
|
||||
const eventDelta: number = e.wheelDelta || -e.deltaY * 40
|
||||
const $scrollWrapper: any = (unref(scrollContainer) as any).wrap
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
|
||||
}
|
||||
|
||||
function moveToTarget(currentTag: any) {
|
||||
const $container: any = (unref(scrollContainer) as any).$el
|
||||
const $containerWidth: number = $container.offsetWidth
|
||||
const $scrollWrapper: any = (unref(scrollContainer) as any).wrap
|
||||
const tagList = (unref(scrollContainer) as any).$parent.$parent.tagRefs
|
||||
|
||||
let firstTag: any = null
|
||||
let lastTag: any = null
|
||||
|
||||
// find first tag and last tag
|
||||
if (tagList.length > 0) {
|
||||
firstTag = tagList[0]
|
||||
lastTag = tagList[tagList.length - 1]
|
||||
}
|
||||
|
||||
if (firstTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = 0
|
||||
} else if (lastTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
|
||||
} else {
|
||||
// find preTag and nextTag
|
||||
const currentIndex: number = tagList.findIndex((item: any) => item === currentTag)
|
||||
const prevTag = tagList[currentIndex - 1]
|
||||
const nextTag = tagList[currentIndex + 1]
|
||||
// the tag's offsetLeft after of nextTag
|
||||
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
|
||||
|
||||
// the tag's offsetLeft before of prevTag
|
||||
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
|
||||
|
||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
||||
nextTick(() => {
|
||||
const { start } = useScrollTo({
|
||||
el: $scrollWrapper,
|
||||
position: 'scrollLeft',
|
||||
to: afterNextTagOffsetLeft - $containerWidth,
|
||||
duration: 500
|
||||
})
|
||||
start()
|
||||
})
|
||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
||||
nextTick(() => {
|
||||
const { start } = useScrollTo({
|
||||
el: $scrollWrapper,
|
||||
position: 'scrollLeft',
|
||||
to: beforePrevTagOffsetLeft,
|
||||
duration: 500
|
||||
})
|
||||
start()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function moveTo(to: number) {
|
||||
const $scrollWrapper: any = (unref(scrollContainer) as any).wrap
|
||||
nextTick(() => {
|
||||
const { start } = useScrollTo({
|
||||
el: $scrollWrapper,
|
||||
position: 'scrollLeft',
|
||||
to: $scrollWrapper.scrollLeft + to,
|
||||
duration: 500
|
||||
})
|
||||
start()
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
handleScroll,
|
||||
scrollContainer,
|
||||
moveToTarget,
|
||||
moveTo
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.scroll-container {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@{deep}(.el-scrollbar__wrap) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<el-dropdown class="avatar-container" trigger="hover">
|
||||
<div>
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="require('@/assets/img/avatar.gif')" class="user-avatar">
|
||||
<span class="name-item">管理员</span>
|
||||
</div>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item key="1">
|
||||
<span style="display: block;" @click="toHome">首页</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item key="2">
|
||||
<span style="display: block;" @click="loginOut">退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { resetRouter } from '_p/index/router'
|
||||
import wsCache from '@/cache'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { tagsViewStore } from '_p/index/store/modules/tagsView'
|
||||
export default defineComponent({
|
||||
name: 'UserInfo',
|
||||
setup() {
|
||||
const { replace, push } = useRouter()
|
||||
async function loginOut(): Promise<void> {
|
||||
wsCache.clear()
|
||||
await resetRouter() // 重置静态路由表
|
||||
await tagsViewStore.delAllViews() // 删除所有的tags标签页
|
||||
replace('/login')
|
||||
}
|
||||
function toHome() {
|
||||
push('/')
|
||||
}
|
||||
return {
|
||||
loginOut,
|
||||
toHome
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.avatar-container {
|
||||
margin-right: 30px;
|
||||
padding: 0 10px;
|
||||
.avatar-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
.user-avatar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.name-item {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue