文档图标支持使用图片链接

This commit is contained in:
xiaozzzi 2023-11-02 23:54:05 +08:00
parent f590fe1c64
commit dafea917c5
5 changed files with 32 additions and 8 deletions

View File

@ -217,6 +217,7 @@ CREATE TABLE IF NOT EXISTS `blossom_article` (
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 20153 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_bin COMMENT = '文章Article' ROW_FORMAT = DYNAMIC;
-- ----------------------------
-- Records of blossom_article
-- ----------------------------
@ -327,6 +328,7 @@ CREATE TABLE IF NOT EXISTS `blossom_folder` (
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 12035 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_bin COMMENT = '文件夹Folder' ROW_FORMAT = DYNAMIC;
alter table blossom_folder modify icon varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL default '' comment '图标';
-- ----------------------------
-- Records of blossom_folder
-- ----------------------------

View File

@ -158,11 +158,11 @@
<el-input
v-model="docForm.color"
:style="{ width: '176px', '--el-input-text-color': '#000000', '--el-input-bg-color': docForm.color }"
placeholder="主色调">
placeholder="主色调 #FFFFFF">
</el-input>
</el-form-item>
<el-form-item label="图标">
<el-input v-model="docForm.icon" style="width: 176px" placeholder="图标, wl-">
<el-input v-model="docForm.icon" style="width: 176px" placeholder="wl-|http|https">
<template #append>
<el-tooltip content="查看所有图标" effect="blossomt" placement="top" :hide-after="0">
<div style="cursor: pointer; font-size: 20px" @click="openNewIconWindow()">

View File

@ -4,7 +4,11 @@
{{ props.trees.s }}
</bl-tag>
<div class="doc-name">
<svg v-if="isNotBlank(props.trees.icon)" class="icon menu-icon" aria-hidden="true">
<img
class="menu-icon-img"
v-if="isNotBlank(props.trees.icon) && (props.trees.icon.startsWith('http') || props.trees.icon.startsWith('https'))"
:src="props.trees.icon" />
<svg v-else-if="isNotBlank(props.trees.icon)" class="icon menu-icon" aria-hidden="true">
<use :xlink:href="'#' + props.trees.icon"></use>
</svg>
<div class="name-wrapper">
@ -89,11 +93,15 @@ $icon-size: 17px;
flex-wrap: wrap;
width: 100%;
.menu-icon {
.menu-icon,
.menu-icon-img {
@include box($icon-size, $icon-size, $icon-size, $icon-size, $icon-size, $icon-size);
margin-top: 5px;
margin-right: 8px;
}
.menu-icon-img {
border-radius: 2px;
}
.name-wrapper {
@include ellipsis();
@ -128,12 +136,17 @@ $icon-size: 17px;
flex-wrap: wrap;
width: 100%;
.menu-icon {
.menu-icon,
.menu-icon-img {
@include box($icon-size, $icon-size, $icon-size, $icon-size, $icon-size, $icon-size);
margin-top: 5px;
margin-right: 8px;
}
.menu-icon-img {
border-radius: 2px;
}
.name-wrapper {
@include ellipsis();
max-width: calc(100% - 25px);

View File

@ -81,7 +81,7 @@
</el-form-item>
<el-form-item label="图标">
<el-input v-model="docForm.icon" style="width: 176px" placeholder="图标, wl-">
<el-input v-model="docForm.icon" style="width: 176px" placeholder="wl-|http|https">
<template #append>
<el-tooltip content="查看所有图标" effect="blossomt" placement="top" :hide-after="0">
<div style="cursor: pointer; font-size: 20px" @click="openNewIconWindow()">

View File

@ -4,7 +4,11 @@
{{ props.trees.s }}
</bl-tag>
<span class="doc-name">
<svg v-if="isNotBlank(props.trees.icon)" class="icon menu-icon" aria-hidden="true">
<img
class="menu-icon-img"
v-if="isNotBlank(props.trees.icon) && (props.trees.icon.startsWith('http') || props.trees.icon.startsWith('https'))"
:src="props.trees.icon" />
<svg v-else-if="isNotBlank(props.trees.icon)" class="icon menu-icon" aria-hidden="true">
<use :xlink:href="'#' + props.trees.icon"></use>
</svg>
<div class="name-wrapper">
@ -80,12 +84,17 @@ $icon-size: 17px;
flex-wrap: wrap;
width: 100%;
.menu-icon {
.menu-icon,
.menu-icon-img {
@include box($icon-size, $icon-size, $icon-size, $icon-size, $icon-size, $icon-size);
margin-top: 5px;
margin-right: 8px;
}
.menu-icon-img {
border-radius: 2px;
}
.name-wrapper {
@include ellipsis();
max-width: calc(100% - 25px);