diff --git a/cmdb-ui/babel.config.js b/cmdb-ui/babel.config.js index 75b32c6..bbfc558 100644 --- a/cmdb-ui/babel.config.js +++ b/cmdb-ui/babel.config.js @@ -5,14 +5,6 @@ if (IS_PROD) { plugins.push('transform-remove-console') } -// lazy load ant-design-vue -// if your use import on Demand, Use this code -// plugins.push(['import', { -// 'libraryName': 'ant-design-vue', -// 'libraryDirectory': 'es', -// 'style': true // `style: true` 会加载 less 文件 -// }]) - module.exports = { presets: [ '@vue/cli-plugin-babel/preset', diff --git a/cmdb-ui/config/plugin.config.js b/cmdb-ui/config/plugin.config.js index a299497..9d91569 100644 --- a/cmdb-ui/config/plugin.config.js +++ b/cmdb-ui/config/plugin.config.js @@ -2,7 +2,7 @@ const ThemeColorReplacer = require('webpack-theme-color-replacer') const generate = require('@ant-design/colors/lib/generate').default const getAntdSerials = (color) => { - // 淡化（即less的tint） + // Lighten (similar to less's tint) const lightens = new Array(9).fill().map((t, i) => { return ThemeColorReplacer.varyColor.lighten(color, i / 10) }) @@ -13,8 +13,8 @@ const getAntdSerials = (color) => { const themePluginOption = { fileName: 'css/theme-colors-[contenthash:8].css', - matchColors: getAntdSerials('#2f54eb'), // 主色系列 - // 改变样式选择器，解决样式覆盖问题 + matchColors: getAntdSerials('#2f54eb'), // primary color series + // change style selectors to solve style override issues changeSelector (selector) { switch (selector) { case '.ant-calendar-today .ant-calendar-date': diff --git a/cmdb-ui/src/App.vue b/cmdb-ui/src/App.vue index cb14e00..d6c9470 100644 --- a/cmdb-ui/src/App.vue +++ b/cmdb-ui/src/App.vue @@ -60,133 +60,7 @@ export default { }) ) - // 注册富文本自定义元素 - // const resume = { - // type: 'attachment', - // attachmentLabel: '', - // attachmentValue: '', - // children: [{ text: '' }], // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！ - // } - - function withAttachment(editor) { - // JS 语法 - const { isInline, isVoid } = editor - const newEditor = editor - - newEditor.isInline = (elem) => { - const type = DomEditor.getNodeType(elem) - if (type === 'attachment') return true // 针对 type: attachment ，设置为 inline - return isInline(elem) - } - - newEditor.isVoid = (elem) => { - const type = DomEditor.getNodeType(elem) - if (type === 'attachment') return true // 针对 type: attachment ，设置为 void - return isVoid(elem) - } - - return newEditor // 返回 newEditor ，重要！！！ - } - Boot.registerPlugin(withAttachment) - /** - * 渲染“附件”元素到编辑器 - * @param elem 附件元素，即上文的 myResume - * @param children 元素子节点，void 元素可忽略 - * @param editor 编辑器实例 - * @returns vnode 节点（通过 snabbdom.js 的 h 函数生成） - */ - function renderAttachment(elem, children, editor) { - // JS 语法 - - // 获取“附件”的数据，参考上文 myResume 数据结构 - const { attachmentLabel = '', attachmentValue = '' } = elem - - // 附件元素 vnode - const attachVnode = h( - // HTML tag - 'span', - // HTML 属性、样式、事件 - { - props: { contentEditable: false }, // HTML 属性，驼峰式写法 - style: { - display: 'inline-block', - margin: '0 3px', - padding: '0 3px', - backgroundColor: '#e6f7ff', - border: '1px solid #91d5ff', - borderRadius: '2px', - color: '#1890ff', - }, // style ，驼峰式写法 - on: { - click() { - console.log('clicked', attachmentValue) - } /* 其他... */, - }, - }, - // 子节点 - [attachmentLabel] - ) - - return attachVnode - } - const renderElemConf = { - type: 'attachment', // 新元素 type ，重要！！！ - renderElem: renderAttachment, - } - Boot.registerRenderElem(renderElemConf) - - /** - * 生成“附件”元素的 HTML - * @param elem 附件元素，即上文的 myResume - * @param childrenHtml 子节点的 HTML 代码，void 元素可忽略 - * @returns “附件”元素的 HTML 字符串 - */ - function attachmentToHtml(elem, childrenHtml) { - // JS 语法 - - // 获取附件元素的数据 - const { attachmentValue = '', attachmentLabel = '' } = elem - - // 生成 HTML 代码 - const html = `${attachmentLabel}` - - return html - } - const elemToHtmlConf = { - type: 'attachment', // 新元素的 type ，重要！！！ - elemToHtml: attachmentToHtml, - } - Boot.registerElemToHtml(elemToHtmlConf) - - /** - * 解析 HTML 字符串，生成“附件”元素 - * @param domElem HTML 对应的 DOM Element - * @param children 子节点 - * @param editor editor 实例 - * @returns “附件”元素，如上文的 myResume - */ - function parseAttachmentHtml(domElem, children, editor) { - // JS 语法 - - // 从 DOM element 中获取“附件”的信息 - const attachmentValue = domElem.getAttribute('data-attachmentValue') || '' - const attachmentLabel = domElem.getAttribute('data-attachmentLabel') || '' - - // 生成“附件”元素（按照此前约定的数据结构） - const myResume = { - type: 'attachment', - attachmentValue, - attachmentLabel, - children: [{ text: '' }], // void node 必须有 children ，其中有一个空字符串，重要！！！ - } - - return myResume - } - const parseHtmlConf = { - selector: 'span[data-w-e-type="attachment"]', // CSS 选择器，匹配特定的 HTML 标签 - parseElemHtml: parseAttachmentHtml, - } - Boot.registerParseElemHtml(parseHtmlConf) + this.handleEditor() }, beforeDestroy() { clearInterval(this.timer) @@ -221,6 +95,119 @@ export default { } this.SET_LOCALE(saveLocale) this.$i18n.locale = saveLocale + }, + + handleEditor() { + // register custom rich text element: attachment + function withAttachment(editor) { + const { isInline, isVoid } = editor + const newEditor = editor + + newEditor.isInline = (elem) => { + const type = DomEditor.getNodeType(elem) + if (type === 'attachment') return true // For type: attachment, set to inline + return isInline(elem) + } + + newEditor.isVoid = (elem) => { + const type = DomEditor.getNodeType(elem) + if (type === 'attachment') return true // For type: attachment ，set to void + return isVoid(elem) + } + + return newEditor // Must return, important!!! + } + Boot.registerPlugin(withAttachment) + /** + * Render "attachment" element in editor + * @param elem Attachment element + * @param children Child nodes (ignored for void elements) + * @param editor Editor instance + * @returns vnode (generated by snabbdom's h function) + */ + function renderAttachment(elem, children, editor) { + const { attachmentLabel = '', attachmentValue = '' } = elem + + const attachVnode = h( + // HTML tag + 'span', + // HTML attr, style, event + { + props: { contentEditable: false }, + style: { + display: 'inline-block', + margin: '0 3px', + padding: '0 3px', + backgroundColor: '#e6f7ff', + border: '1px solid #91d5ff', + borderRadius: '2px', + color: '#1890ff', + }, + on: { + click() { + console.log('clicked', attachmentValue) + } + }, + }, + // child node + [attachmentLabel] + ) + + return attachVnode + } + const renderElemConf = { + type: 'attachment', + renderElem: renderAttachment, + } + Boot.registerRenderElem(renderElemConf) + + /** + * Generate HTML for "attachment" element + * @param elem Attachment element + * @param childrenHtml Child HTML (ignored for void elements) + * @returns HTML string + */ + function attachmentToHtml(elem, childrenHtml) { + // Getting data for attached elements + const { attachmentValue = '', attachmentLabel = '' } = elem + + // generate HTML + const html = `${attachmentLabel}` + + return html + } + const elemToHtmlConf = { + type: 'attachment', + elemToHtml: attachmentToHtml, + } + Boot.registerElemToHtml(elemToHtmlConf) + + /** + * Parse HTML to generate "attachment" element + * @param domElem DOM element + * @param children Children + * @param editor Editor instance + * @returns Attachment element + */ + function parseAttachmentHtml(domElem, children, editor) { + // Getting “attachment” information from DOM element + const attachmentValue = domElem.getAttribute('data-attachmentValue') || '' + const attachmentLabel = domElem.getAttribute('data-attachmentLabel') || '' + + const myResume = { + type: 'attachment', + attachmentValue, + attachmentLabel, + children: [{ text: '' }], // The void node must have children with an empty string in it, important!!!! + } + + return myResume + } + const parseHtmlConf = { + selector: 'span[data-w-e-type="attachment"]', // CSS selector to match specific HTML tags + parseElemHtml: parseAttachmentHtml, + } + Boot.registerParseElemHtml(parseHtmlConf) } }, } diff --git a/cmdb-ui/src/components/CMDBFilterComp/constants.js b/cmdb-ui/src/components/CMDBFilterComp/constants.js index 7087eb3..0cfe0da 100644 --- a/cmdb-ui/src/components/CMDBFilterComp/constants.js +++ b/cmdb-ui/src/components/CMDBFilterComp/constants.js @@ -1,41 +1,40 @@ -import i18n from '@/lang' - -export const ruleTypeList = () => { - return [ - { value: 'and', label: i18n.t('cmdbFilterComp.and') }, - { value: 'or', label: i18n.t('cmdbFilterComp.or') }, - // { value: 'not', label: '非' }, - ] -} - -export const expList = () => { - return [ - { value: 'is', label: i18n.t('cmdbFilterComp.is') }, - { value: '~is', label: i18n.t('cmdbFilterComp.~is') }, - { value: 'contain', label: i18n.t('cmdbFilterComp.contain') }, - { value: '~contain', label: i18n.t('cmdbFilterComp.~contain') }, - { value: 'start_with', label: i18n.t('cmdbFilterComp.start_with') }, - { value: '~start_with', label: i18n.t('cmdbFilterComp.~start_with') }, - { value: 'end_with', label: i18n.t('cmdbFilterComp.end_with') }, - { value: '~end_with', label: i18n.t('cmdbFilterComp.~end_with') }, - { value: '~value', label: i18n.t('cmdbFilterComp.~value') }, // 为空的定义有点绕 - { value: 'value', label: i18n.t('cmdbFilterComp.value') }, - ] -} - -export const advancedExpList = () => { - return [ - { value: 'in', label: i18n.t('cmdbFilterComp.in') }, - { value: '~in', label: i18n.t('cmdbFilterComp.~in') }, - { value: 'range', label: i18n.t('cmdbFilterComp.range') }, - { value: '~range', label: i18n.t('cmdbFilterComp.~range') }, - { value: 'compare', label: i18n.t('cmdbFilterComp.compare') }, - ] -} - -export const compareTypeList = [ - { value: '1', label: '>' }, - { value: '2', label: '>=' }, - { value: '3', label: '<' }, - { value: '4', label: '<=' }, -] +import i18n from '@/lang' + +export const ruleTypeList = () => { + return [ + { value: 'and', label: i18n.t('cmdbFilterComp.and') }, + { value: 'or', label: i18n.t('cmdbFilterComp.or') }, + ] +} + +export const expList = () => { + return [ + { value: 'is', label: i18n.t('cmdbFilterComp.is') }, + { value: '~is', label: i18n.t('cmdbFilterComp.~is') }, + { value: 'contain', label: i18n.t('cmdbFilterComp.contain') }, + { value: '~contain', label: i18n.t('cmdbFilterComp.~contain') }, + { value: 'start_with', label: i18n.t('cmdbFilterComp.start_with') }, + { value: '~start_with', label: i18n.t('cmdbFilterComp.~start_with') }, + { value: 'end_with', label: i18n.t('cmdbFilterComp.end_with') }, + { value: '~end_with', label: i18n.t('cmdbFilterComp.~end_with') }, + { value: '~value', label: i18n.t('cmdbFilterComp.~value') }, + { value: 'value', label: i18n.t('cmdbFilterComp.value') }, + ] +} + +export const advancedExpList = () => { + return [ + { value: 'in', label: i18n.t('cmdbFilterComp.in') }, + { value: '~in', label: i18n.t('cmdbFilterComp.~in') }, + { value: 'range', label: i18n.t('cmdbFilterComp.range') }, + { value: '~range', label: i18n.t('cmdbFilterComp.~range') }, + { value: 'compare', label: i18n.t('cmdbFilterComp.compare') }, + ] +} + +export const compareTypeList = [ + { value: '1', label: '>' }, + { value: '2', label: '>=' }, + { value: '3', label: '<' }, + { value: '4', label: '<=' }, +] diff --git a/cmdb-ui/src/components/CMDBFilterComp/expression.vue b/cmdb-ui/src/components/CMDBFilterComp/expression.vue index 57fc851..ee32c6c 100644 --- a/cmdb-ui/src/components/CMDBFilterComp/expression.vue +++ b/cmdb-ui/src/components/CMDBFilterComp/expression.vue @@ -301,7 +301,7 @@ export default { return [ { value: 'is', label: this.$t('cmdbFilterComp.is') }, { value: '~is', label: this.$t('cmdbFilterComp.~is') }, - { value: '~value', label: this.$t('cmdbFilterComp.~value') }, // 为空的定义有点绕 + { value: '~value', label: this.$t('cmdbFilterComp.~value') }, { value: 'value', label: this.$t('cmdbFilterComp.value') }, ] } diff --git a/cmdb-ui/src/components/CMDBFilterComp/index.vue b/cmdb-ui/src/components/CMDBFilterComp/index.vue index 96fcff8..eb83f3e 100644 --- a/cmdb-ui/src/components/CMDBFilterComp/index.vue +++ b/cmdb-ui/src/components/CMDBFilterComp/index.vue @@ -87,9 +87,11 @@ export default { }, methods: { + /** + * @param isInitOne When the initialization exp is null, does the ruleList default to giving one + */ visibleChange(open, isInitOne = true) { - // isInitOne 初始化exp为空时，ruleList是否默认给一条 - // const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g + // const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g const exp = this.expression.match(new RegExp(this.regQ, 'g')) ? this.expression.match(new RegExp(this.regQ, 'g'))[0] : null @@ -204,7 +206,7 @@ export default { }, handleSubmit() { if (this.ruleList && this.ruleList.length) { - this.ruleList[0].type = 'and' // 增删后，以防万一第一个不是and + this.ruleList[0].type = 'and' // after add/delete, just in case the first one is not 'and' this.filterExp = '' const expList = this.ruleList.map((rule) => { let singleRuleExp = '' diff --git a/cmdb-ui/src/components/CollapseTransition/index.vue b/cmdb-ui/src/components/CollapseTransition/index.vue index 3407bd2..61ecd27 100644 --- a/cmdb-ui/src/components/CollapseTransition/index.vue +++ b/cmdb-ui/src/components/CollapseTransition/index.vue @@ -14,7 +14,7 @@ - - diff --git a/cmdb-ui/src/components/GlobalFooter/index.js b/cmdb-ui/src/components/GlobalFooter/index.js deleted file mode 100644 index 832e0bd..0000000 --- a/cmdb-ui/src/components/GlobalFooter/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import GlobalFooter from './GlobalFooter' -export default GlobalFooter diff --git a/cmdb-ui/src/components/PageLoading/index.jsx b/cmdb-ui/src/components/PageLoading/index.jsx deleted file mode 100644 index 2886844..0000000 --- a/cmdb-ui/src/components/PageLoading/index.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Spin } from 'ant-design-vue' - -export default { - name: 'PageLoading', - render () { - return (
- -
) - } -} diff --git a/cmdb-ui/src/components/SettingDrawer/SettingDrawer.vue b/cmdb-ui/src/components/SettingDrawer/SettingDrawer.vue deleted file mode 100644 index 3f8db55..0000000 --- a/cmdb-ui/src/components/SettingDrawer/SettingDrawer.vue +++ /dev/null @@ -1,352 +0,0 @@ - - - - - diff --git a/cmdb-ui/src/components/SettingDrawer/SettingItem.vue b/cmdb-ui/src/components/SettingDrawer/SettingItem.vue deleted file mode 100644 index 2b3b553..0000000 --- a/cmdb-ui/src/components/SettingDrawer/SettingItem.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - - - diff --git a/cmdb-ui/src/components/SettingDrawer/index.js b/cmdb-ui/src/components/SettingDrawer/index.js deleted file mode 100644 index 8260f2d..0000000 --- a/cmdb-ui/src/components/SettingDrawer/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import SettingDrawer from './SettingDrawer' -export default SettingDrawer diff --git a/cmdb-ui/src/components/SettingDrawer/settingConfig.js b/cmdb-ui/src/components/SettingDrawer/settingConfig.js deleted file mode 100644 index 6b9770d..0000000 --- a/cmdb-ui/src/components/SettingDrawer/settingConfig.js +++ /dev/null @@ -1,105 +0,0 @@ -import { message } from 'ant-design-vue/es' -// import setting from '../setting'; -import themeColor from './themeColor.js' - -// let lessNodesAppended - -const colorList = [ - { - key: '薄暮', color: '#F5222D' - }, - { - key: '火山', color: '#FA541C' - }, - { - key: '日暮', color: '#FAAD14' - }, - { - key: '明青', color: '#13C2C2' - }, - { - key: '极光绿', color: '#52C41A' - }, - { - key: '拂晓蓝（默认）', color: '#1890FF' - }, - { - key: '极客蓝', color: '#2F54EB' - }, - { - key: '酱紫', color: '#722ED1' - } -] - -const updateTheme = newPrimaryColor => { - const hideMessage = message.loading('正在切换主题！', 0) - themeColor.changeColor(newPrimaryColor).finally(t => { - hideMessage() - }) -} - -/* -const updateTheme = primaryColor => { - // Don't compile less in production! - /* if (process.env.NODE_ENV === 'production') { - return; - } * / - // Determine if the component is remounted - if (!primaryColor) { - return - } - const hideMessage = message.loading('正在编译主题！', 0) - function buildIt () { - if (!window.less) { - return - } - setTimeout(() => { - window.less - .modifyVars({ - '@primary-color': primaryColor - }) - .then(() => { - hideMessage() - }) - .catch(() => { - message.error('Failed to update theme') - hideMessage() - }) - }, 200) - } - if (!lessNodesAppended) { - // insert less.js and color.less - const lessStyleNode = document.createElement('link') - const lessConfigNode = document.createElement('script') - const lessScriptNode = document.createElement('script') - lessStyleNode.setAttribute('rel', 'stylesheet/less') - lessStyleNode.setAttribute('href', '/color.less') - lessConfigNode.innerHTML = ` - window.less = { - async: true, - env: 'production', - javascriptEnabled: true - }; - ` - lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js' - lessScriptNode.async = true - lessScriptNode.onload = () => { - buildIt() - lessScriptNode.onload = null - } - document.body.appendChild(lessStyleNode) - document.body.appendChild(lessConfigNode) - document.body.appendChild(lessScriptNode) - lessNodesAppended = true - } else { - buildIt() - } -} -*/ - -const updateColorWeak = colorWeak => { - // document.body.className = colorWeak ? 'colorWeak' : ''; - colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak') -} - -export { updateTheme, colorList, updateColorWeak } diff --git a/cmdb-ui/src/components/SettingDrawer/themeColor.js b/cmdb-ui/src/components/SettingDrawer/themeColor.js deleted file mode 100644 index 6e7b480..0000000 --- a/cmdb-ui/src/components/SettingDrawer/themeColor.js +++ /dev/null @@ -1,23 +0,0 @@ -import client from 'webpack-theme-color-replacer/client' -import generate from '@ant-design/colors/lib/generate' - -export default { - getAntdSerials (color) { - // 淡化（即less的tint） - const lightens = new Array(9).fill().map((t, i) => { - return client.varyColor.lighten(color, i / 10) - }) - // colorPalette变换得到颜色值 - const colorPalettes = generate(color) - return lightens.concat(colorPalettes) - }, - changeColor (newColor) { - var options = { - newColors: this.getAntdSerials(newColor), // new colors array, one-to-one corresponde with `matchColors` - changeUrl (cssUrl) { - return `/${cssUrl}` // while router is not `hash` mode, it needs absolute path - } - } - return client.changer.changeColor(options, Promise) - } -} diff --git a/cmdb-ui/src/components/tools/DocumentLink.vue b/cmdb-ui/src/components/tools/DocumentLink.vue index 495f1fb..3514b9a 100644 --- a/cmdb-ui/src/components/tools/DocumentLink.vue +++ b/cmdb-ui/src/components/tools/DocumentLink.vue @@ -1,6 +1,6 @@