From 4a68e5fbc55e9fd6bd83be9ae1b9068b093808dd Mon Sep 17 00:00:00 2001 From: "gary.fu" Date: Tue, 2 Jan 2024 14:07:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E6=A0=87=E9=80=89=E6=8B=A9=E6=8E=A7?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/main.css | 15 ++ src/components/common-form-control/index.vue | 4 + src/components/common-icon-select/index.vue | 167 ++++++++++++++++++ .../common-table/common-table-column.vue | 30 ++-- src/components/common-tabs-view/index.vue | 7 +- src/components/index.js | 2 + src/messages/common_cn.js | 5 + src/messages/common_en.js | 5 + src/messages/index.js | 2 +- src/messages/menu_cn.js | 1 + src/messages/menu_en.js | 1 + src/route/ToolsRoutes.js | 4 + src/services/global/GlobalService.js | 5 + src/services/icon/IconService.js | 20 +++ src/views/HomeView.vue | 11 +- src/views/tools/Forms.vue | 7 + src/views/tools/Icons.vue | 104 +++++------ src/views/tools/Tables.vue | 9 + src/views/tools/TestPage.vue | 21 +++ 19 files changed, 343 insertions(+), 77 deletions(-) create mode 100644 src/components/common-icon-select/index.vue create mode 100644 src/services/icon/IconService.js create mode 100644 src/views/tools/TestPage.vue diff --git a/src/assets/main.css b/src/assets/main.css index fcce602..d3b7ca2 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -57,6 +57,21 @@ html, body, #app, .index-container { .text-right { text-align: right; } + +.icon-dialog .el-dialog__body { + padding: 10px; +} + +.icon-list::-webkit-scrollbar { + z-index: 10; + width: 6px; +} +.icon-list::-webkit-scrollbar-thumb { + border-radius:5px; + width:6px; + background:var(--el-text-color-disabled) +} + /** * slide-fade动画 */ diff --git a/src/components/common-form-control/index.vue b/src/components/common-form-control/index.vue index 3bd50a8..58abb96 100644 --- a/src/components/common-form-control/index.vue +++ b/src/components/common-form-control/index.vue @@ -16,6 +16,7 @@ import ControlChild from '@/components/common-form-control/control-child.vue' * @property {boolean} required 是否必填,后面解析成为rules的一部分 * @property {string|RegExp} pattern 正则表达式验证，解析成为rules的一部分 * @property {string} patternMsg 正则表达式验证消息 + * @property {boolean} common 自定义组件 * @property {boolean} disabled 禁用 * @property {boolean} readonly 只读 * @property {string} placeholder 占位提示符 @@ -41,6 +42,9 @@ const props = defineProps({ }) const inputType = computed(() => { + if (props.option.common) { + return `common-${props.option.type}` + } return `el-${props.option.type || 'input'}` }) diff --git a/src/components/common-icon-select/index.vue b/src/components/common-icon-select/index.vue new file mode 100644 index 0000000..cafa1b6 --- /dev/null +++ b/src/components/common-icon-select/index.vue @@ -0,0 +1,167 @@ + + + + + diff --git a/src/components/common-table/common-table-column.vue b/src/components/common-table/common-table-column.vue index 68e7f28..d7d81bf 100644 --- a/src/components/common-table/common-table-column.vue +++ b/src/components/common-table/common-table-column.vue @@ -27,7 +27,7 @@ const props = defineProps({ required: true }, /** - * @type {'large'|'small'|'default'} + * @type {''|'large'|'small'|'default'} */ buttonSize: { type: String, @@ -75,19 +75,21 @@ const props = defineProps({ diff --git a/src/components/index.js b/src/components/index.js index 36c2c70..cbee7e3 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,4 +1,5 @@ import CommonIcon from '@/components/common-icon/index.vue' +import CommonIconSelect from '@/components/common-icon-select/index.vue' import CommonForm from '@/components/common-form/index.vue' import CommonFormControl from '@/components/common-form-control/index.vue' import CommonMenu from '@/components/common-menu/index.vue' @@ -15,6 +16,7 @@ export default { */ install (Vue) { Vue.component('CommonIcon', CommonIcon) + Vue.component('CommonIconSelect', CommonIconSelect) Vue.component('CommonForm', CommonForm) Vue.component('CommonFormControl', CommonFormControl) Vue.component('CommonMenu', CommonMenu) diff --git a/src/messages/common_cn.js b/src/messages/common_cn.js index 6f8a504..ffbd11e 100644 --- a/src/messages/common_cn.js +++ b/src/messages/common_cn.js @@ -33,10 +33,15 @@ common.label.delete = '删除' common.label.search = '搜索' common.label.find = '查找' common.label.back = '返回' +common.label.select = '选择' +common.label.clear = '清空' common.label.tabMode = '多标签模式' common.label.cachedTabMode = '缓存标签页' common.label.showTabIcon = '标签图标' +common.label.keywords = '关键字' //* =======================msg=====================// common.msg.nonNull = '{0}不能为空' common.msg.patternInvalid = '{0}格式校验不通过' +common.msg.pleaseSelectIcon = '请选择图标' +common.msg.inputKeywords = '输入关键字搜索' diff --git a/src/messages/common_en.js b/src/messages/common_en.js index 6b3b5dd..7e71e52 100644 --- a/src/messages/common_en.js +++ b/src/messages/common_en.js @@ -33,10 +33,15 @@ common.label.delete = 'Delete' common.label.search = 'Search' common.label.find = 'Find' common.label.back = 'Back' +common.label.select = 'Select' +common.label.clear = 'Clear' common.label.tabMode = 'Tabs Mode' common.label.cachedTabMode = 'Cache Tabs' common.label.showTabIcon = 'Tab Icon' +common.label.keywords = 'Keywords' //* =======================msg=====================// common.msg.nonNull = '{0} is required.' common.msg.patternInvalid = '{0} pattern check failed.' +common.msg.pleaseSelectIcon = 'Please select icon' +common.msg.inputKeywords = 'Input keywords to search' diff --git a/src/messages/index.js b/src/messages/index.js index aaf9480..1f41274 100644 --- a/src/messages/index.js +++ b/src/messages/index.js @@ -1,4 +1,4 @@ -import { createI18n, useI18n } from 'vue-i18n' +import { createI18n } from 'vue-i18n' import { ref } from 'vue' import messagesCn from './messages_cn' import messagesEn from './messages_en' diff --git a/src/messages/menu_cn.js b/src/messages/menu_cn.js index 2d53d14..6dce0e1 100644 --- a/src/messages/menu_cn.js +++ b/src/messages/menu_cn.js @@ -10,6 +10,7 @@ menu.label.toolsManagement = '工具管理' menu.label.toolsIcons = '图标工具' menu.label.toolsForms = '表单工具' menu.label.toolsTables = '表格工具' +menu.label.toolsTests = '测试页面' menu.label.errorPage = '错误页面' menu.label.errorPage404 = '找不到页面' menu.label.errorPage403 = '没有权限' diff --git a/src/messages/menu_en.js b/src/messages/menu_en.js index 0a890e7..55b8fd8 100644 --- a/src/messages/menu_en.js +++ b/src/messages/menu_en.js @@ -10,6 +10,7 @@ menu.label.toolsManagement = 'Tools' menu.label.toolsIcons = 'Icons' menu.label.toolsForms = 'Forms' menu.label.toolsTables = 'Tables' +menu.label.toolsTests = 'Test Page' menu.label.errorPage = 'Error Page' menu.label.errorPage404 = 'Not Found' menu.label.errorPage403 = 'Access Denied' diff --git a/src/route/ToolsRoutes.js b/src/route/ToolsRoutes.js index 9b91658..9396a39 100644 --- a/src/route/ToolsRoutes.js +++ b/src/route/ToolsRoutes.js @@ -6,6 +6,10 @@ export default [{ path: '/forms', name: 'forms', component: () => import('@/views/tools/Forms.vue') +}, { + path: '/tests', + name: 'tests', + component: () => import('@/views/tools/TestPage.vue') }, { path: '/tables', name: 'tables', diff --git a/src/services/global/GlobalService.js b/src/services/global/GlobalService.js index 903a817..2ab5afc 100644 --- a/src/services/global/GlobalService.js +++ b/src/services/global/GlobalService.js @@ -117,6 +117,11 @@ export const useBusinessMenus = () => { index: '/tables', icon: 'Grid', labelKey: 'menu.label.toolsTables' + }, + { + index: '/tests', + icon: 'TipsAndUpdatesOutlined', + labelKey: 'menu.label.toolsTests' } ] }]) diff --git a/src/services/icon/IconService.js b/src/services/icon/IconService.js new file mode 100644 index 0000000..d01f716 --- /dev/null +++ b/src/services/icon/IconService.js @@ -0,0 +1,20 @@ +import { INSTALL_ICONS } from '@/icons' +import chunk from 'lodash/chunk' + +/** + * @param keywords {string} + * @param colSize {number} + * @returns {{id: number, icons: *}[]} + */ +export const filterIconsByKeywords = (keywords, colSize) => { + let installIcons = INSTALL_ICONS + if (keywords) { + installIcons = installIcons.filter(icon => icon.toLowerCase().includes(keywords.toLowerCase())) + } + return chunk(installIcons, colSize).map((arr, idx) => { + return { + id: idx, + icons: arr + } + }) +} diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index f380635..b7b52a9 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -26,7 +26,10 @@ const showLeftMenu = computed(() => { - + @@ -51,3 +54,9 @@ const showLeftMenu = computed(() => { + diff --git a/src/views/tools/Forms.vue b/src/views/tools/Forms.vue index 0d56b86..9cf1697 100644 --- a/src/views/tools/Forms.vue +++ b/src/views/tools/Forms.vue @@ -95,6 +95,13 @@ const formOptions = [{ value: 'unknown' } ] +}, { + label: '图标测试', + prop: 'icon', + value: '', + type: 'icon-select', + required: true, + common: true }, { label: '地址', prop: 'address', diff --git a/src/views/tools/Icons.vue b/src/views/tools/Icons.vue index a48b738..99f09f3 100644 --- a/src/views/tools/Icons.vue +++ b/src/views/tools/Icons.vue @@ -1,23 +1,14 @@ diff --git a/src/views/tools/Tables.vue b/src/views/tools/Tables.vue index af2abc1..6c298aa 100644 --- a/src/views/tools/Tables.vue +++ b/src/views/tools/Tables.vue @@ -3,18 +3,21 @@ import { ref } from 'vue' const tableData = [ { + id: '1', birthday: '2016-05-03', userName: 'Tom', gender: 'male', address: 'No. 189, Grove St, Los Angeles' }, { + id: '2', birthday: '2016-05-02', userName: 'Tom', gender: 'female', address: 'No. 189, Grove St, Los Angeles' }, { + id: '3', birthday: '2016-05-04', userName: 'Tom', gender: 'male', @@ -54,12 +57,18 @@ const buttons = ref([{ type: 'primary', click: item => { console.info('编辑=============', item) + }, + buttonIf (item) { + return !!item.id } }, { labelKey: 'common.label.delete', type: 'danger', click: item => { console.info('删除=============', item) + }, + buttonIf (item) { + return !!item.id } }, { label: '其他操作' diff --git a/src/views/tools/TestPage.vue b/src/views/tools/TestPage.vue new file mode 100644 index 0000000..a797232 --- /dev/null +++ b/src/views/tools/TestPage.vue @@ -0,0 +1,21 @@ + + + + +