Skip to content

Commit

Permalink
style: 样式优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@KwokKwok
KwokKwok committed Sep 23, 2024
1 parent 9ff659a commit 58c4b6d
Show file tree
Hide file tree
Showing 7 changed files with 262 additions and 35 deletions.
9 changes: 1 addition & 8 deletions entrypoints/content/components/Modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,10 @@ export default function ({ close, payload, visible }) {
const iframeRef = useRef(null);

useEffect(() => {
if (!visible) {
iframeRef.current.contentWindow.postMessage(
JSON.stringify({ type: 'clear' }),
'*'
);
return;
}
if (payload.type) {
iframeRef.current.contentWindow.postMessage(JSON.stringify(payload), '*');
}
}, [payload, loaded, visible]);
}, [payload]);
return (
<div
className={
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "silo",
"private": true,
"version": "1.5.0",
"version": "1.5.1",
"type": "module",
"scripts": {
"dev": "vite",
Expand Down
41 changes: 23 additions & 18 deletions src/assets/styles/markdown.scss
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,32 @@
.silo-markdown {

table {
margin: 8px 0;
pre>code {
padding: 8px 12px !important;
display: block;
overflow-x: auto;
}

table,
th,
td {
border: 1px solid;
padding: 6px;
}
// table {
// margin: 8px 0;
// }

// table,
// th,
// td {
// border: 1px solid;
// padding: 6px;
// }

pre {
padding: 0 !important;
}

ul,
p,
ol,
pre,
table,
blockquote,
dl {
margin: 8px 0;
}
// ul,
// p,
// ol,
// pre,
// table,
// blockquote,
// dl {
// margin: 8px 0;
// }
}
8 changes: 4 additions & 4 deletions src/components/AiMessage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default function AiMessage({
<Markdown
children={content}
remarkPlugins={[remarkGfm]}
className="silo-markdown prose !max-w-none prose-pre:bg-transparent prose-li:my-0 prose-slate prose-sm dark:prose-invert !leading-[1.6em]"
className="silo-markdown prose !max-w-none prose-pre:bg-transparent prose-slate prose-red prose-sm dark:prose-invert prose-headings:text-primary dark:prose-headings:text-[#2ddaff]"
components={{
code(props) {
let { children, className, node, ...rest } = props;
Expand Down Expand Up @@ -109,10 +109,10 @@ export default function AiMessage({
{...rest}
className={
className +
' not-prose text-xs leading-4 px-1 rounded-sm bg-[#878378] bg-opacity-15 dark:bg-teal text-[#EB5757] dark:text-cyan-300 font-code'
' text-xs leading-4 px-1 rounded-sm bg-[#878378] bg-opacity-15 dark:bg-teal text-[#EB5757] dark:text-cyan-300 font-code'
}
>
{children}
{children.trim()}
</code>
)}
</>
Expand Down Expand Up @@ -142,6 +142,6 @@ export default function AiMessage({
)}
</div>
),
[content, likes, isBest, isDark]
[content, likes.length, isBest, isDark]
);
}
11 changes: 9 additions & 2 deletions src/components/InputControl.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,14 @@ import { useIsMobile } from '../utils/use';
import { Popconfirm } from 'tdesign-react';
import SystemPromptSelector from './SystemPromptSelector';

export default function ({ onStop, onSubmit, loading, enter, placeholder }) {
export default function ({
onStop,
onSubmit,
loading,
enter,
placeholder,
plain = false,
}) {
const [input, setInput] = useState('');
const inputRef = useRef();
const isMobile = useIsMobile();
Expand Down Expand Up @@ -68,7 +75,7 @@ export default function ({ onStop, onSubmit, loading, enter, placeholder }) {
(input.includes('\n') ? 'rounded-2xl' : 'rounded-3xl')
}
>
<SystemPromptSelector />
{!plain && <SystemPromptSelector />}
<textarea
type="text"
rows={1}
Expand Down
3 changes: 2 additions & 1 deletion src/components/WebCopilot/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,11 @@ export default function ({ message }) {
<div className="flex-1 relative flex-shrink-0 ml-2">
<InputControl
placeholder="继续问我吧"
plain
enter
onStop={onStop}
onSubmit={onSubmit}
loading={loading}
loading={modelResponses[activeIndex]?.loading}
/>
</div>
</div>
Expand Down
223 changes: 222 additions & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,20 @@
import { addIconSelectors } from "@iconify/tailwind"
const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")


const _round = (num) =>
num
.toFixed(7)
.replace(/(\.[0-9]+?)0+$/, '$1')
.replace(/\.0$/, '')
const round = (num) => _round(num)
const rem = (px) => `${_round(px / 16)}rem`
const em = (px, base, ratio) => `${_round(px / base * ratio)}em`

const SPACING_RATIO = 0.6;
const LINE_HEIGHT_RATIO = 0.9;


/** @type {import('tailwindcss').Config} */
export default {
content: [
Expand All @@ -16,7 +30,214 @@ export default {
},
transitionProperty: {
'visible': 'transform, opacity',
}
},
typography: {
sm: {
css: [
{
fontSize: rem(14),
lineHeight: round(24 / 14 * LINE_HEIGHT_RATIO),
p: {
marginTop: em(16, 14, SPACING_RATIO),
marginBottom: em(16, 14, SPACING_RATIO),
},
'[class~="lead"]': {
fontSize: em(18, 14),
lineHeight: round(28 / 18 * LINE_HEIGHT_RATIO),
marginTop: em(16, 18, SPACING_RATIO),
marginBottom: em(16, 18, SPACING_RATIO),
},
blockquote: {
marginTop: em(24, 18, SPACING_RATIO),
marginBottom: em(24, 18, SPACING_RATIO),
paddingInlineStart: em(20, 18, SPACING_RATIO),
},
h1: {
fontSize: em(30, 14),
marginTop: '0',
marginBottom: em(24, 30, SPACING_RATIO),
lineHeight: round(36 / 30 * LINE_HEIGHT_RATIO),
},
h2: {
fontSize: em(20, 14),
marginTop: em(32, 20, SPACING_RATIO),
marginBottom: em(16, 20, SPACING_RATIO),
lineHeight: round(28 / 20 * LINE_HEIGHT_RATIO),
},
h3: {
fontSize: em(18, 14),
marginTop: em(28, 18, SPACING_RATIO),
marginBottom: em(8, 18, SPACING_RATIO),
lineHeight: round(28 / 18 * LINE_HEIGHT_RATIO),
},
h4: {
marginTop: em(20, 14, SPACING_RATIO),
marginBottom: em(8, 14, SPACING_RATIO),
lineHeight: round(20 / 14 * LINE_HEIGHT_RATIO),
},
img: {
marginTop: em(24, 14, SPACING_RATIO),
marginBottom: em(24, 14, SPACING_RATIO),
},
picture: {
marginTop: em(24, 14, SPACING_RATIO),
marginBottom: em(24, 14, SPACING_RATIO),
},
'picture > img': {
marginTop: '0',
marginBottom: '0',
},
video: {
marginTop: em(24, 14, SPACING_RATIO),
marginBottom: em(24, 14, SPACING_RATIO),
},
kbd: {
fontSize: em(12, 14),
borderRadius: rem(5),
paddingTop: em(2, 14, SPACING_RATIO),
paddingInlineEnd: em(5, 14, SPACING_RATIO),
paddingBottom: em(2, 14, SPACING_RATIO),
paddingInlineStart: em(5, 14, SPACING_RATIO),
},
code: {
fontSize: em(12, 14),
},
'h2 code': {
fontSize: em(18, 20),
},
'h3 code': {
fontSize: em(16, 18),
},
pre: {
fontSize: em(12, 14),
lineHeight: round(20 / 12 * LINE_HEIGHT_RATIO),
marginTop: em(20, 12, SPACING_RATIO),
marginBottom: em(20, 12, SPACING_RATIO),
borderRadius: rem(4),
paddingTop: em(8, 12, SPACING_RATIO),
paddingInlineEnd: em(12, 12, SPACING_RATIO),
paddingBottom: em(8, 12, SPACING_RATIO),
paddingInlineStart: em(12, 12, SPACING_RATIO),
},
ol: {
marginTop: em(16, 14, SPACING_RATIO),
marginBottom: em(16, 14, SPACING_RATIO),
paddingInlineStart: em(22, 14, SPACING_RATIO),
},
ul: {
marginTop: em(16, 14, SPACING_RATIO),
marginBottom: em(16, 14, SPACING_RATIO),
paddingInlineStart: em(22, 14, SPACING_RATIO),
},
li: {
marginTop: em(4, 14, SPACING_RATIO),
marginBottom: em(4, 14, SPACING_RATIO),
},
'ol > li': {
paddingInlineStart: em(6, 14, SPACING_RATIO),
},
'ul > li': {
paddingInlineStart: em(6, 14, SPACING_RATIO),
},
'> ul > li p': {
marginTop: em(8, 14, SPACING_RATIO),
marginBottom: em(8, 14, SPACING_RATIO),
},
'> ul > li > p:first-child': {
marginTop: em(16, 14, SPACING_RATIO),
},
'> ul > li > p:last-child': {
marginBottom: em(16, 14, SPACING_RATIO),
},
'> ol > li > p:first-child': {
marginTop: em(16, 14, SPACING_RATIO),
},
'> ol > li > p:last-child': {
marginBottom: em(16, 14, SPACING_RATIO),
},
'ul ul, ul ol, ol ul, ol ol': {
marginTop: em(8, 14, SPACING_RATIO),
marginBottom: em(8, 14, SPACING_RATIO),
},
dl: {
marginTop: em(16, 14, SPACING_RATIO),
marginBottom: em(16, 14, SPACING_RATIO),
},
dt: {
marginTop: em(16, 14, SPACING_RATIO),
},
dd: {
marginTop: em(4, 14, SPACING_RATIO),
paddingInlineStart: em(22, 14, SPACING_RATIO),
},
hr: {
marginTop: em(40, 14, SPACING_RATIO),
marginBottom: em(40, 14, SPACING_RATIO),
},
'hr + *': {
marginTop: '0',
},
'h2 + *': {
marginTop: '0',
},
'h3 + *': {
marginTop: '0',
},
'h4 + *': {
marginTop: '0',
},
table: {
fontSize: em(12, 14),
lineHeight: round(18 / 12 * LINE_HEIGHT_RATIO),
},
'thead th': {
paddingInlineEnd: em(12, 12, SPACING_RATIO),
paddingBottom: em(8, 12, SPACING_RATIO),
paddingInlineStart: em(12, 12, SPACING_RATIO),
},
'thead th:first-child': {
paddingInlineStart: '0',
},
'thead th:last-child': {
paddingInlineEnd: '0',
},
'tbody td, tfoot td': {
paddingTop: em(8, 12, SPACING_RATIO),
paddingInlineEnd: em(12, 12, SPACING_RATIO),
paddingBottom: em(8, 12, SPACING_RATIO),
paddingInlineStart: em(12, 12, SPACING_RATIO),
},
'tbody td:first-child, tfoot td:first-child': {
paddingInlineStart: '0',
},
'tbody td:last-child, tfoot td:last-child': {
paddingInlineEnd: '0',
},
figure: {
marginTop: em(24, 14, SPACING_RATIO),
marginBottom: em(24, 14, SPACING_RATIO),
},
'figure > *': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
fontSize: em(12, 14),
lineHeight: round(16 / 12 * LINE_HEIGHT_RATIO),
marginTop: em(8, 12, SPACING_RATIO),
},
},
{
'> :first-child': {
marginTop: '0',
},
'> :last-child': {
marginBottom: '0',
},
},
],
},
},
},
},
plugins: [
Expand Down

0 comments on commit 58c4b6d

Please sign in to comment.