diff --git a/components.d.ts b/components.d.ts index a6db607bd6758860c9838c045ed08011f623785c..e4de266e5c50ec0e5bcd050cd7f1ab9cdc3931f1 100644 --- a/components.d.ts +++ b/components.d.ts @@ -11,8 +11,10 @@ declare module '@vue/runtime-core' { AppEditor: typeof import('./src/components/AppEditor.vue')['default'] AppFooter: typeof import('./src/components/AppFooter.vue')['default'] AppHeader: typeof import('./src/components/AppHeader.vue')['default'] + ElButton: typeof import('element-plus/es')['ElButton'] ElCard: typeof import('element-plus/es')['ElCard'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] + ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup'] ElCollapse: typeof import('element-plus/es')['ElCollapse'] ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'] ElDialog: typeof import('element-plus/es')['ElDialog'] @@ -25,6 +27,7 @@ declare module '@vue/runtime-core' { ElInput: typeof import('element-plus/es')['ElInput'] ElOption: typeof import('element-plus/es')['ElOption'] ElPagination: typeof import('element-plus/es')['ElPagination'] + ElPopover: typeof import('element-plus/es')['ElPopover'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElSelect: typeof import('element-plus/es')['ElSelect'] ElSwitch: typeof import('element-plus/es')['ElSwitch'] diff --git a/src/assets/svg-icons/icon-setting.svg b/src/assets/svg-icons/icon-setting.svg new file mode 100644 index 0000000000000000000000000000000000000000..787c08346b212bfbc2c812ffedd8fa920c46a418 --- /dev/null +++ b/src/assets/svg-icons/icon-setting.svg @@ -0,0 +1,16 @@ + + + settings_outlined@1x + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/shared/styles/element-plus/_popper.scss b/src/shared/styles/element-plus/_popper.scss new file mode 100644 index 0000000000000000000000000000000000000000..11ae4d5e7ffc6a8b5a08fc52ba4e352635afffb7 --- /dev/null +++ b/src/shared/styles/element-plus/_popper.scss @@ -0,0 +1,7 @@ +body { + .el-popover.el-popper { + border-radius: 0 ; + box-shadow: var(--o-shadow-l1); + padding: 16px; + } +} \ No newline at end of file diff --git a/src/shared/styles/index.scss b/src/shared/styles/index.scss index 895efbee96cf9167ac79f8e63641d06d15df900b..0a4f79f81e7fc79d6b21a57721a0e8e2ae0f5aa4 100644 --- a/src/shared/styles/index.scss +++ b/src/shared/styles/index.scss @@ -3,4 +3,5 @@ @import './markdown.scss'; @import './element-plus/message'; @import './element-plus/option'; +@import './element-plus/popper'; @import './theme-dark.scss'; diff --git a/src/views/TheQuickIssue.vue b/src/views/TheQuickIssue.vue index aa183d989aa6539c29d6593eab9abb3b23a62997..cd9a61d00fdc8c40313d343452dcdca0b386bda7 100644 --- a/src/views/TheQuickIssue.vue +++ b/src/views/TheQuickIssue.vue @@ -14,13 +14,14 @@ import { } from '@/api/api-quick-issue'; import { OptionList } from '@/shared/@types/type-quick-issue'; -import { isValidKey, scrollToTop } from '@/shared/utils'; +import { scrollToTop } from '@/shared/utils'; import IconTraingleUp from '~icons/app/icon-arrow-traingle-up.svg'; import IconTraingleDown from '~icons/app/icon-arrow-traingle-down.svg'; import IconFilter from '~icons/app/icon-filter.svg'; import IconTag from '~icons/app/icon-tag'; import IconRefresh from '~icons/app/icon-refresh'; +import IconSetting from '~icons/app/icon-setting'; import AppContent from '@/components/AppContent.vue'; import ODropdown from 'opendesign/dropdown/ODropdown.vue'; @@ -61,6 +62,115 @@ for (let i = 0; i < keyArr.length; i++) { filterList.value.set(keyArr[i], { page: 1, total: 0, keyword: '', data: [] }); } +const titleList = ref( + new Map([ + [ + 'id', + { + value: 'ID', + }, + ], + [ + 'repo', + { + value: computed(() => { + return t('quickIssue.REPO_NAME'); + }), + }, + ], + [ + 'title', + { + value: computed(() => { + return t('quickIssue.TITLE'); + }), + }, + ], + [ + 'state', + { + value: computed(() => { + return t('quickIssue.STATE'); + }), + }, + ], + [ + 'type', + { + value: computed(() => { + return t('quickIssue.TYPE'); + }), + }, + ], + [ + 'author', + { + value: computed(() => { + return t('quickIssue.SUBMITTER'); + }), + }, + ], + [ + 'assignee', + { + value: computed(() => { + return t('quickIssue.ASSIGNER'); + }), + }, + ], + [ + 'priority', + { + value: computed(() => { + return t('quickIssue.PRIORITY'); + }), + }, + ], + [ + 'label', + { + value: computed(() => { + return t('quickIssue.LABEL'); + }), + }, + ], + [ + 'branch', + { + value: computed(() => { + return t('quickIssue.BRANCH'); + }), + }, + ], + [ + 'create_at', + { + value: computed(() => { + return t('quickIssue.CREATED_AT'); + }), + }, + ], + [ + 'updata_at', + { + value: computed(() => { + return t('quickIssue.UPDATE_AT'); + }), + }, + ], + ]) +); +const checkedTitle = ref([ + 'repo', + 'type', + 'title', + 'state', + 'author', + 'label', + 'create_at', + 'updata_at', +]); + const queryData = reactive({ page: 1, per_page: 10, @@ -86,6 +196,15 @@ const optionQuery = reactive({ mode: 'local', }); +const handleTitleClick = (title: string) => { + if (checkedTitle.value.includes(title)) { + const index = checkedTitle.value.indexOf(title); + checkedTitle.value.splice(index, 1); + } else { + checkedTitle.value.push(title); + } +}; + const handleCheckedValueChange = (value: string[]) => { const checkedCount = value.length; checkAll.value = checkedCount === ISSUE_CONFIG.ISSUE_STATE.length; @@ -153,9 +272,7 @@ function getRepoIssueData() { }); } function handleCommand(command: string | Array, key: string) { - if (isValidKey(key, queryData)) { - (queryData as any)[key] = command; - } + (queryData as any)[key] = command; } function getNextPage() { @@ -225,6 +342,11 @@ function getOption(type: string) { } } onMounted(() => { + if (window.localStorage?.getItem('title')) { + checkedTitle.value = JSON.parse( + window.localStorage.getItem('title') as any + ); + } getRepoIssueData(); getOption('authors'); getOption('assignees'); @@ -233,6 +355,15 @@ onMounted(() => { getOption('types'); getOption('repos'); }); +watch( + () => checkedTitle, + () => { + window.localStorage.setItem('title', JSON.stringify(checkedTitle.value)); + }, + { + deep: true, + } +); watch( () => queryData, () => { @@ -270,480 +401,570 @@ watch( :data="issueData" style="width: 100%" > - - - - - -