diff --git a/app.config.ts b/app.config.ts deleted file mode 100644 index dc458ca..0000000 --- a/app.config.ts +++ /dev/null @@ -1,36 +0,0 @@ -export default defineAppConfig({ - ui: { - prose: { - pre: { - slots: { - root: "relative my-4 group rounded-lg bg-(--c-bg-2,#0f1419)", - header: - "sticky top-0 z-20 flex items-center justify-between gap-3 px-4 py-2.5 bg-(--c-bg-2,#0f1419) border-b border-(--c-border,#2a2e38) backdrop-blur-sm", - filename: - "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-(--c-bg-3,#1a1f2e) text-xs font-mono text-(--c-text-1,#e8eaed) whitespace-nowrap border border-(--c-border,#2a2e38)", - icon: "w-3.5 h-3.5 shrink-0 opacity-80", - copy: "px-2.5 py-1.5 rounded-md text-xs font-mono bg-(--c-bg-3,#1a1f2e) hover:bg-(--c-border,#2a2e38) transition-colors text-(--c-text-2,#a8adb8) hover:text-(--c-text-1,#e8eaed) border border-transparent hover:border-(--c-border,#2a2e38)", - base: "overflow-auto m-0 text-(--c-text-1,#e8eaed) shiki font-mono text-sm leading-relaxed", - }, - }, - codeIcon: { - terminal: "i-ph-terminal-window-duotone", - config: "i-lucide-settings", - package: "i-lucide-package", - json: "i-ph-file-json", - ts: "i-ph-file-ts", - js: "i-ph-file-js", - vue: "i-ph-file-vue", - py: "i-ph-file-py", - sh: "i-ph-terminal-window-duotone", - bash: "i-ph-terminal-window-duotone", - yml: "i-ph-file-yaml", - yaml: "i-ph-file-yaml", - md: "i-ph-file-md", - html: "i-ph-file-html", - css: "i-ph-file-css", - xml: "i-ph-file-xml", - }, - }, - }, -}); diff --git a/app/app.config.ts b/app/app.config.ts index 6307c81..14a0d43 100644 --- a/app/app.config.ts +++ b/app/app.config.ts @@ -1,17 +1,22 @@ // @keep-sorted export default defineAppConfig({ - component: { - codeblock: { - /** 代码块触发折叠的行数 */ - triggerRows: 32, - /** 代码块折叠后的行数 */ - collapsedRows: 16, - /** 启用代码块缩进导航会关闭空格渲染 */ - enableIndentGuide: true, - /** 代码块缩进导航(Indent Guige)竖线匹配空格数 */ - indent: 4, - /** tab渲染宽度 */ - tabSize: 3, + ui: { + prose: { + // pre: { + // slots: { + // root: "relative my-4 group rounded-lg bg-(--c-bg-2,#0f1419)", + // header: + // "sticky top-0 z-20 flex items-center justify-between gap-3 px-4 py-2.5 bg-(--c-bg-2,#0f1419) border-b border-(--c-border,#2a2e38) backdrop-blur-sm", + // filename: + // "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-(--c-bg-3,#1a1f2e) text-xs font-mono text-(--c-text-1,#e8eaed) whitespace-nowrap border border-(--c-border,#2a2e38)", + // icon: "w-3.5 h-3.5 shrink-0 opacity-80", + // copy: "px-2.5 py-1.5 rounded-md text-xs font-mono bg-(--c-bg-3,#1a1f2e) hover:bg-(--c-border,#2a2e38) transition-colors text-(--c-text-2,#a8adb8) hover:text-(--c-text-1,#e8eaed) border border-transparent hover:border-(--c-border,#2a2e38)", + // base: "overflow-auto m-0 text-(--c-text-1,#e8eaed) shiki font-mono text-sm leading-relaxed", + // }, + // }, + codeIcon: { + config: "i-lucide-settings", + }, }, }, }); diff --git a/app/assets/css/code.css b/app/assets/css/code.css index 9bc4cd8..e0d4beb 100644 --- a/app/assets/css/code.css +++ b/app/assets/css/code.css @@ -11,7 +11,7 @@ width: 5.25rem; padding-right: 1rem; text-align: right; - color: #999999; + color: white; user-select: none; font-size: 0.85em; } diff --git a/app/assets/css/main.css b/app/assets/css/main.css index 6ae9de1..be775ec 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -3,7 +3,6 @@ /* @import url("https://fontsapi.zeoseven.com/292/main/result.css"); */ @import "tailwindcss"; @import "@nuxt/ui"; -@import "code.css"; @plugin "@tailwindcss/typography"; @plugin "@tailwindcss/forms"; @tailwind utilities; @@ -20,6 +19,27 @@ --font-roboto: "LXGW WenKai", sans-serif; } */ +/* 先定义计数器 */ +pre[class*="language-"] { + counter-reset: line; +} + +/* 每个代码行 /
前自增计数并打印 */ +pre[class*="language-"] code > * { + counter-increment: line; + position: relative; + padding-left: 3rem; /* 行号留出空间 */ +} + +pre[class*="language-"] code > *::before { + content: counter(line); + position: absolute; + left: 0; + width: 2rem; + text-align: right; + color: #6b7280; /* Tailwind gray-500 */ +} + @theme { --font-roboto: "JetBrains Maple Mono", sans-serif; --font-display: "JetBrains Maple Mono", sans-serif; diff --git a/app/components/content/Alert.vue b/app/components/content/Alert.vue index 01b1178..96c877a 100644 --- a/app/components/content/Alert.vue +++ b/app/components/content/Alert.vue @@ -13,6 +13,9 @@ interface Props { } const props = withDefaults(defineProps(), { + title: "", + icon: "", + color: "", type: "info", card: false, flat: false, @@ -95,7 +98,7 @@ const iconName = computed(() => props.icon || config.value.icon);
-
+
diff --git a/content/blogs/showcase/index.md b/content/blogs/showcase/index.md index 3d09219..938eb73 100644 --- a/content/blogs/showcase/index.md +++ b/content/blogs/showcase/index.md @@ -35,18 +35,6 @@ categories: ["Development"] 你也可以把它嵌入到任意文章中:``。 -## 提示/警告(Warning) - -使用站内 `Warning` 组件展示一个警告框(支持命名 title 槽或 props 回退): - -::Warning{title="注意"} -这是通过 `::Warning` 区块语法渲染的示例警告。 -:: - -或者使用组件语法(支持 slot 或 props): - -这里是警告内容(slot)示例。 - ## 告警框(Alert) `Alert` 组件支持多种类型,可以用来展示不同类型的通知信息: