feat: 聊天的样式调整

This commit is contained in:
zoujing
2025-09-02 17:44:22 +08:00
parent 663df81099
commit 537b7521e1
2 changed files with 56 additions and 32 deletions

View File

@@ -39,7 +39,7 @@
), ),
radial-gradient(75% 60% at center, var(--bg-color) 50%, transparent 50%); radial-gradient(75% 60% at center, var(--bg-color) 50%, transparent 50%);
padding: var(--p); padding: var(--p);
margin-right: 8px; margin-right: 6px;
display: grid; display: grid;
place-items: center; place-items: center;
position: relative; position: relative;

View File

@@ -36,6 +36,10 @@ export default {
type: String, type: String,
default: '#2d2d2d' default: '#2d2d2d'
}, },
fontFamily: {
type: String,
default: 'PingFang SC, PingFang SC'
},
aiMode: { aiMode: {
type: Boolean, type: Boolean,
default: false default: false
@@ -87,13 +91,13 @@ export default {
initTagStyle() { initTagStyle() {
const themeColor = this.themeColor const themeColor = this.themeColor
const codeBgColor = this.codeBgColor const codeBgColor = this.codeBgColor
const fontFamily = this.fontFamily
let zeroStyle = { let zeroStyle = {
p: ` p: `
margin:6px; margin:6px 0;
font-size: 15px; font-size: 15px;
line-height:1.75; line-height:1.65;
letter-spacing:0.2em; font-family: ${fontFamily};
word-spacing:0.1em;
`, `,
// 一级标题 // 一级标题
h1: ` h1: `
@@ -102,10 +106,12 @@ export default {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
padding:3px 10px 1px; padding:3px 10px 1px;
border-bottom: 2px solid ${themeColor}; border-bottom: 2px solid ${themeColor};
border-top-right-radius:3px; border-top-right-radius:3px;
border-top-left-radius:3px; border-top-left-radius:3px;
`, `,
// 二级标题 // 二级标题
h2: ` h2: `
@@ -113,6 +119,7 @@ export default {
font-size: 20px; font-size: 20px;
text-align:center; text-align:center;
color:${themeColor}; color:${themeColor};
font-family: ${fontFamily};
font-weight:bolder; font-weight:bolder;
padding-left:10px; padding-left:10px;
// border:1px solid ${themeColor}; // border:1px solid ${themeColor};
@@ -122,6 +129,7 @@ export default {
margin:6px 0; margin:6px 0;
font-size: 18px; font-size: 18px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
padding-left:10px; padding-left:10px;
border-left:3px solid ${themeColor}; border-left:3px solid ${themeColor};
`, `,
@@ -129,6 +137,7 @@ export default {
blockquote: ` blockquote: `
margin:6px 0; margin:6px 0;
font-size:15px; font-size:15px;
font-family: ${fontFamily};
color: #777777; color: #777777;
border-left: 4px solid #dddddd; border-left: 4px solid #dddddd;
padding: 0 10px; padding: 0 10px;
@@ -150,10 +159,12 @@ export default {
strong: ` strong: `
font-weight: border; font-weight: border;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// 斜体 // 斜体
em: ` em: `
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
letter-spacing:0.3em; letter-spacing:0.3em;
`, `,
// 分割线 // 分割线
@@ -194,57 +205,68 @@ export default {
initTagStyleForAi() { initTagStyleForAi() {
const themeColor = this.themeColor const themeColor = this.themeColor
const codeBgColor = this.codeBgColor const codeBgColor = this.codeBgColor
const fontFamily = this.fontFamily
let zeroStyle = { let zeroStyle = {
p: ` p: `
font-size: 16px; margin:6px 0;
font-size: 15px;
line-height:1.55;
font-family: ${fontFamily};
`, `,
// 一级标题 // 一级标题
h1: ` h1: `
margin:6px 0; margin:4px 0;
font-size: 22px; font-size: 20px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// 二级标题 // 二级标题
h2: ` h2: `
margin:6px 0; margin:4px 0;
font-size: 20px; font-size: 18px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// 三级标题 // 三级标题
h3: ` h3: `
margin:6x 0; margin:4x 0;
font-size: 18px; font-size: 16px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// 四级标题 // 四级标题
h4: ` h4: `
margin:6px 0; margin:4px 0;
font-size: 16px; font-size: 15px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// 五级标题 // 五级标题
h5: ` h5: `
margin:6px 0; margin:4px 0;
font-size: 16px; font-size: 14px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// 六级标题 // 六级标题
h6: ` h6: `
margin:6px 0; margin:4px 0;
font-size: 16px; font-size: 12px;
color: ${themeColor} color: ${themeColor};
font-family: ${fontFamily};
`, `,
// 引用 // 引用
blockquote: ` blockquote: `
margin:6px 0; margin:4px 0;
font-size:14px; font-size:14px;
color: #777777; color: #777777;
border-left: 4px solid #dddddd; border-left: 4px solid #dddddd;
padding: 0 10px; padding: 0 10px;
font-family: ${fontFamily};
`, `,
// 列表 // 列表
ul: ` ul: `
margin: 6px 0; margin: 4px 0;
color: #555; color: #555;
`, `,
li: ` li: `
@@ -259,6 +281,7 @@ export default {
strong: ` strong: `
font-weight: border; font-weight: border;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// 斜体 // 斜体
em: ` em: `
@@ -272,14 +295,14 @@ export default {
border:none; border:none;
text-align:center; text-align:center;
background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0)); background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
margin:8px 0; margin:4px 0;
`, `,
// 表格 // 表格
table: ` table: `
border-spacing:0; border-spacing:0;
overflow:auto; overflow:auto;
min-width:100%; min-width:100%;
margin:8px 0; margin:4px 0;
border-collapse: collapse; border-collapse: collapse;
`, `,
th: ` th: `
@@ -296,6 +319,7 @@ export default {
background: ${codeBgColor}; background: ${codeBgColor};
font-size:12px; font-size:12px;
position: relative; position: relative;
font-family: ${fontFamily};
`, `,
} }
this.tagStyle = zeroStyle this.tagStyle = zeroStyle