chore: 新增图标和工具类

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";
 }

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",

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)
+}

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

blossom-editor/src/renderer/src/components/IconList.vue

@@ -30,14 +30,14 @@
           </div>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="系统图片" name="sysimg">
+      <!-- <el-tab-pane label="系统图片" name="sysimg">
         <div class="icon-container">
           <div v-for="img in imgs" class="icon-item" :key="img.icon_id">
             <img style="width: 40px; height: 40px; object-fit: contain" :src="img" />
             <div class="icon-name">{{ img.substring(img.lastIndexOf('/') + 1) }}</div>
           </div>
         </div>
-      </el-tab-pane>
+      </el-tab-pane> -->
     </el-tabs>
   </div>
 </template>
@@ -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<any[]>([])
 const weblogo = shallowRef<any[]>([])
-const imgs = shallowRef<any[]>([
-  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<any[]>([
+//   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('')