diff --git a/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.css b/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.css index beec7c3..bb4c830 100644 --- a/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.css +++ b/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconbl"; /* Project id 4118609 */ - src: url('iconfont.woff2?t=1703588816023') format('woff2'), - url('iconfont.woff?t=1703588816023') format('woff'), - url('iconfont.ttf?t=1703588816023') format('truetype'); + src: url('iconfont.woff2?t=1704383007925') format('woff2'), + url('iconfont.woff?t=1704383007925') format('woff'), + url('iconfont.ttf?t=1704383007925') format('truetype'); } .iconbl { @@ -13,6 +13,10 @@ -moz-osx-font-smoothing: grayscale; } +.bl-enter:before { + content: "\e65a"; +} + .bl-blog:before { content: "\e7c6"; } diff --git a/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.js b/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.js index 9d7f15d..24b7eb7 100644 --- a/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.js +++ b/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_4118609='',function(h){var a=(a=document.getElementsByTagName("script"))[a.length-1],l=a.getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var v,m,z,i,o,t=function(a,l){l.parentNode.insertBefore(a,l)};if(l&&!h.__iconfont__svg__cssinject__){h.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}v=function(){var a,l=document.createElement("div");l.innerHTML=h._iconfont_svg_string_4118609,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(a=document.body).firstChild?t(l,a.firstChild):a.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(v,0):(m=function(){document.removeEventListener("DOMContentLoaded",m,!1),v()},document.addEventListener("DOMContentLoaded",m,!1)):document.attachEvent&&(z=v,i=h.document,o=!1,b(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,e())})}function e(){o||(o=!0,z())}function b(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(b,50)}e()}}(window); \ No newline at end of file +window._iconfont_svg_string_4118609='',function(h){var a=(a=document.getElementsByTagName("script"))[a.length-1],l=a.getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var v,m,z,i,o,t=function(a,l){l.parentNode.insertBefore(a,l)};if(l&&!h.__iconfont__svg__cssinject__){h.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}v=function(){var a,l=document.createElement("div");l.innerHTML=h._iconfont_svg_string_4118609,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(a=document.body).firstChild?t(l,a.firstChild):a.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(v,0):(m=function(){document.removeEventListener("DOMContentLoaded",m,!1),v()},document.addEventListener("DOMContentLoaded",m,!1)):document.attachEvent&&(z=v,i=h.document,o=!1,b(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,e())})}function e(){o||(o=!0,z())}function b(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(b,50)}e()}}(window); \ No newline at end of file diff --git a/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.json b/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.json index 68bfb54..d933c56 100644 --- a/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.json +++ b/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.json @@ -5,6 +5,13 @@ "css_prefix_text": "bl-", "description": "", "glyphs": [ + { + "icon_id": "12687054", + "name": "回车", + "font_class": "enter", + "unicode": "e65a", + "unicode_decimal": 58970 + }, { "icon_id": "12579639", "name": "blog", diff --git a/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.ttf b/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.ttf index 935abe0..2fc712d 100644 Binary files a/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.ttf and b/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.ttf differ diff --git a/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.woff b/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.woff index 51d5014..51ea87a 100644 Binary files a/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.woff and b/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.woff differ diff --git a/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.woff2 b/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.woff2 index ec77cef..ff5a877 100644 Binary files a/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.woff2 and b/blossom-editor/src/renderer/src/assets/iconfont/blossom/iconfont.woff2 differ diff --git a/blossom-editor/src/renderer/src/assets/utils/color.ts b/blossom-editor/src/renderer/src/assets/utils/color.ts new file mode 100644 index 0000000..370fe3f --- /dev/null +++ b/blossom-editor/src/renderer/src/assets/utils/color.ts @@ -0,0 +1,134 @@ +export interface IColorObj { + r: number + g: number + b: number + a?: number +} + +/** + * 255颜色值转16进制颜色值 + * @param n 255颜色值 + * @returns hex 16进制颜色值 + */ +export const toHex = (n: number) => `${n > 15 ? '' : 0}${n.toString(16)}` + +/** + * 颜色对象转化为16进制颜色字符串 + * @param colorObj 颜色对象 + */ +export const toHexString = (colorObj: IColorObj) => { + const { r, g, b, a = 1 } = colorObj + return `#${toHex(r)}${toHex(g)}${toHex(b)}${a === 1 ? '' : toHex(Math.floor(a * 255))}` +} + +/** + * 颜色对象转化为rgb颜色字符串 + * @param colorObj 颜色对象 + */ +export const toRgbString = (colorObj: IColorObj) => { + const { r, g, b } = colorObj + return `rgb(${r},${g},${b})` +} + +/** + * 颜色对象转化为rgba颜色字符串 + * @param colorObj 颜色对象 + */ +export const toRgbaString = (colorObj: IColorObj, n = 10000) => { + const { r, g, b, a = 1 } = colorObj + return `rgba(${r},${g},${b},${Math.floor(a * n) / n})` +} + +/** + * 16进制颜色字符串解析为颜色对象 + * @param color 颜色字符串 + * @returns IColorObj + */ +export const parseHexColor = (color: string) => { + let hex = color.slice(1) + let a = 1 + if (hex.length === 3) { + hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}` + } + if (hex.length === 8) { + a = parseInt(hex.slice(6), 16) / 255 + hex = hex.slice(0, 6) + } + const bigint = parseInt(hex, 16) + return { + r: (bigint >> 16) & 255, + g: (bigint >> 8) & 255, + b: bigint & 255, + a + } as IColorObj +} + +/** + * rgba颜色字符串解析为颜色对象 + * @param color 颜色字符串 + * @returns IColorObj + */ +export const parseRgbaColor = (color: string) => { + const arr = color.match(/(\d(\.\d+)?)+/g) || [] + const res = arr.map((s: string) => parseInt(s, 10)) + return { + r: res[0], + g: res[1], + b: res[2], + a: parseFloat(arr[3]) || 1 + } as IColorObj +} + +/** + * 颜色字符串解析为颜色对象 + * @param color 颜色字符串 + * @returns IColorObj + */ +export const parseColorString = (color: string) => { + if (color.startsWith('#')) { + return parseHexColor(color) + } else if (color.startsWith('rgb')) { + return parseRgbaColor(color) + } else if (color === 'transparent') { + return parseHexColor('#00000000') + } + throw new Error(`color string error: ${color}`) +} + +/** + * 颜色字符串解析为各种颜色表达方式 + * @param color 颜色字符串 + * @returns IColorObj + */ +export const getColorInfo = (color: string) => { + const colorObj = parseColorString(color) + const hex = toHexString(colorObj) + const rgba = toRgbaString(colorObj) + const rgb = toRgbString(colorObj) + return { + hex, + rgba, + rgb, + rgbaObj: colorObj + } +} + +/** + * 16进制颜色字符串转化为rgba颜色字符串 + * @param hex 16进制颜色字符串 + * @returns rgba颜色字符串 + */ +export const hexToRgba = (hex: string) => { + const colorObj = parseColorString(hex) + return toRgbaString(colorObj) +} + +/** + * rgba颜色字符串转化为16进制颜色字符串 + * @param rgba rgba颜色字符串 + * @returns 16进制颜色字符串 + */ +export const rgbaToHex = (rgba: string) => { + const colorObj = parseColorString(rgba) + return toHexString(colorObj) +} diff --git a/blossom-editor/src/renderer/src/assets/utils/util.ts b/blossom-editor/src/renderer/src/assets/utils/util.ts index c6b094a..86ad07c 100644 --- a/blossom-editor/src/renderer/src/assets/utils/util.ts +++ b/blossom-editor/src/renderer/src/assets/utils/util.ts @@ -152,7 +152,7 @@ export const timestampToDatetime = (timestamp: number | string | Date): string = } /** - * 两个日期相差的条数 + * 两个日期相差的天数 * * @param date1 yyyy-MM-dd * @param date2 yyyy-MM-dd diff --git a/blossom-editor/src/renderer/src/components/IconList.vue b/blossom-editor/src/renderer/src/components/IconList.vue index 0718173..32b055f 100644 --- a/blossom-editor/src/renderer/src/components/IconList.vue +++ b/blossom-editor/src/renderer/src/components/IconList.vue @@ -30,14 +30,14 @@ - + @@ -57,57 +57,57 @@ onMounted(() => { }) }) -const getImg = (img: string) => { - return new URL(`../assets/imgs/${img}`, import.meta.url).href -} +// const getImg = (img: string) => { +// return new URL(`../assets/imgs/${img}`, import.meta.url).href +// } const activeTab = ref('weblogo') const blossom = shallowRef([]) const weblogo = shallowRef([]) -const imgs = shallowRef([ - getImg('plan/base-awesome.png'), - getImg('plan/base-cool.png'), - getImg('plan/base-learning.png'), - getImg('plan/cat-kiss.png'), - getImg('plan/cat-nice.png'), - getImg('plan/cat-smile.png'), - getImg('plan/cat.png'), - getImg('plan/coffee.png'), - getImg('plan/juice.png'), - getImg('plan/beer.png'), - // note - getImg('note/cd.png'), - getImg('note/dustbin.png'), - getImg('note/note.png'), - getImg('note/pin.png'), - getImg('note/plane.png'), - // pe - getImg('pe/headset.png'), - getImg('pe/phone.png'), - getImg('pe/sound.png'), - getImg('pe/watch.png'), - // plant - getImg('plant/02.png'), - getImg('plant/08.png'), - getImg('plant/cactus.png'), - // weather - getImg('weather/feng-s.png'), - getImg('weather/feng.png'), - getImg('weather/qing-s.png'), - getImg('weather/qing.png'), - getImg('weather/qing-moon.png'), - getImg('weather/wu-s.png'), - getImg('weather/wu.png'), - getImg('weather/xue-s.png'), - getImg('weather/xue.png'), - getImg('weather/yin-s.png'), - getImg('weather/yin.png'), - getImg('weather/yu-s.png'), - getImg('weather/yu.png'), - getImg('weather/zhongyu-s.png'), - getImg('weather/zhongyu.png') -]) +// const imgs = shallowRef([ +// getImg('plan/base-awesome.png'), +// getImg('plan/base-cool.png'), +// getImg('plan/base-learning.png'), +// getImg('plan/cat-kiss.png'), +// getImg('plan/cat-nice.png'), +// getImg('plan/cat-smile.png'), +// getImg('plan/cat.png'), +// getImg('plan/coffee.png'), +// getImg('plan/juice.png'), +// getImg('plan/beer.png'), +// // note +// getImg('note/cd.png'), +// getImg('note/dustbin.png'), +// getImg('note/note.png'), +// getImg('note/pin.png'), +// getImg('note/plane.png'), +// // pe +// getImg('pe/headset.png'), +// getImg('pe/phone.png'), +// getImg('pe/sound.png'), +// getImg('pe/watch.png'), +// // plant +// getImg('plant/02.png'), +// getImg('plant/08.png'), +// getImg('plant/cactus.png'), +// // weather +// getImg('weather/feng-s.png'), +// getImg('weather/feng.png'), +// getImg('weather/qing-s.png'), +// getImg('weather/qing.png'), +// getImg('weather/qing-moon.png'), +// getImg('weather/wu-s.png'), +// getImg('weather/wu.png'), +// getImg('weather/xue-s.png'), +// getImg('weather/xue.png'), +// getImg('weather/yin-s.png'), +// getImg('weather/yin.png'), +// getImg('weather/yu-s.png'), +// getImg('weather/yu.png'), +// getImg('weather/zhongyu-s.png'), +// getImg('weather/zhongyu.png') +// ]) const iconSearch = ref('')