update

2026-01-01 00:13:50 +08:00
parent 179f1e1f31
commit 87c2d29079
8 changed files with 453 additions and 19 deletions
--- a/app/components/content/ProsePre1.vue
+++ b/app/components/content/ProsePre1.vue
@@ -0,0 +1,275 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    code?: string;
+    language?: string;
+    filename?: string;
+    highlights?: number[];
+    meta?: string;
+    class?: string;
+  }>(),
+  {
+    code: "",
+    language: "text", // Nuxt Content 已经做了此处理
+    highlights: () => [],
+  },
+);
+
+interface CodeblockMeta {
+  icon?: string;
+  wrap?: boolean;
+  [meta: string]: string | boolean | undefined;
+}
+
+const meta = computed(() => {
+  if (!props.meta) return {};
+
+  return props.meta.split(" ").reduce((acc: CodeblockMeta, item) => {
+    const [key, value] = item.split("=");
+    acc[key!] = value ?? true;
+    return acc;
+  }, {});
+});
+
+const appConfig = useAppConfig();
+const compConf = appConfig.component.codeblock;
+
+const rows = computed(() => props.code.split("\n").length - 1);
+const collapsible = computed(() => !meta.value.expand && rows.value > compConf.triggerRows);
+const [isCollapsed, toggleCollapsed] = useToggle(collapsible.value);
+
+const icon = computed(
+  () => meta.value.icon || getFileIcon(props.filename) || getLangIcon(props.language),
+);
+const isWrap = ref(meta.value.wrap);
+
+const codeblock = useTemplateRef("codeblock");
+const { copy, copied } = useCopy(codeblock);
+
+const shikiStore = useShikiStore();
+const rawHtml = ref(escapeHtml(props.code));
+
+function getIndent() {
+  if (meta.value.indent) return meta.value.indent;
+
+  if (["json", "jsonc", "yaml", "yml"].includes(props.language)) return 2;
+
+  return compConf.indent;
+}
+
+onMounted(async () => {
+  const shiki = await shikiStore.load();
+  await shikiStore.loadLang(props.language);
+  // 处理 Markdown 高亮内代码块中的语言
+  // 加载 TeX 语言有概率导致 LaTeX 语言高亮炸掉
+  if (props.language === "markdown" || props.language.startsWith("md")) {
+    const mdLangRegex = /^\s*`{3,}(\S+)/gm;
+    const langs = Array.from(props.code.matchAll(mdLangRegex))
+      .map((match) => match[1])
+      .filter((lang) => lang !== undefined);
+    await shikiStore.loadLang(...langs);
+  }
+
+  rawHtml.value = shiki.codeToHtml(
+    props.code.trimEnd(),
+    shikiStore.getOptions(
+      props.language,
+      [compConf.enableIndentGuide ? "ignoreRenderWhitespace" : "ignoreRenderIndentGuides"],
+      { meta: { indent: getIndent() } },
+    ),
+  );
+});
+</script>
+
+<template>
+  <figure
+    class="z-codeblock"
+    :class="{ collapsed: collapsible && isCollapsed, collapsible }"
+    :style="{
+      '--collapsed-rows': compConf.collapsedRows,
+      '--tab-size': (meta.indent as string) || compConf.tabSize,
+    }">
+    <figcaption>
+      <span v-if="filename" class="filename"> <Icon :name="icon" /> {{ filename }} </span>
+      <span v-else />
+      <!-- 语言不采用绝对定位，因为和文件名占据互斥空间 -->
+      <span v-if="language" class="language">{{ language }}</span>
+      <div class="operations">
+        <button @click="isWrap = !isWrap">
+          {{ isWrap ? "横向滚动" : "自动换行" }}
+        </button>
+        <button @click="copy()">
+          {{ copied ? "已复制" : "复制" }}
+        </button>
+      </div>
+    </figcaption>
+
+    <!-- 嘿嘿，不要换行 -->
+    <pre
+      ref="codeblock"
+      class="shiki scrollcheck-x"
+      :class="[props.class, { wrap: isWrap }]"
+      v-html="rawHtml" />
+
+    <button
+      v-if="collapsible"
+      class="toggle-btn"
+      :aria-label="isCollapsed ? '展开代码块' : '折叠代码块'"
+      @click="toggleCollapsed()">
+      <Icon
+        class="toggle-icon"
+        :class="{ 'is-collapsed': isCollapsed }"
+        name="ph:caret-double-up-bold" />
+      <span class="toggle-tip">{{ rows }} 行</span>
+    </button>
+  </figure>
+</template>
+
+<style lang="scss" scoped>
+.z-codeblock {
+  --line-height: 1.4em;
+
+  position: relative;
+  overflow: clip;
+  margin: 0.5em 0;
+  border-radius: 0.5em;
+  background-color: var(--c-bg-2);
+  font-size: 0.8125rem;
+  line-height: var(--line-height);
+  tab-size: var(--tab-size, 4);
+
+  &.collapsed {
+    pre {
+      overflow: hidden;
+      max-height: calc(var(--line-height) * var(--collapsed-rows) + 3rem);
+      mask-image: linear-gradient(to top, transparent 2rem, #fff 4rem);
+      animation: none;
+    }
+
+    .toggle-btn {
+      margin: 0.5em;
+    }
+  }
+
+  &.collapsible pre {
+    padding-bottom: 2rem;
+  }
+}
+
+figcaption {
+  display: flex;
+  justify-content: space-between;
+  gap: 1em;
+  position: sticky;
+  top: 0;
+  padding: 0 1em;
+  z-index: 2;
+
+  > .filename {
+    padding: 0.2em 0.8em;
+    border-radius: 0 0 0.5em 0.5em;
+    background-color: var(--c-border);
+    word-break: break-all;
+  }
+
+  > .language {
+    opacity: 0.4;
+    height: 0;
+    transform: translateY(0.2em);
+  }
+
+  > .operations {
+    position: absolute;
+    opacity: 0;
+    inset-inline-end: 0;
+    padding: 0 0.6em;
+    border-end-start-radius: 0.5em;
+    background-color: var(--c-bg-2);
+    transition: opacity 0.2s;
+
+    :hover > & {
+      opacity: 1;
+    }
+
+    > button {
+      opacity: 0.4;
+      padding: 0.2em 0.4em;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+pre {
+  // 如果填写 0 会在 calc() 时出错
+  --start-offset: 4em;
+
+  overflow: auto;
+  padding: 1rem;
+  padding-inline-start: var(--start-offset);
+
+  &.wrap {
+    white-space: pre-wrap;
+  }
+}
+
+:deep(.line) {
+  &::before {
+    content: attr(data-line);
+    position: absolute;
+    inset-inline-start: 0;
+    width: var(--start-offset);
+    padding-inline-end: 1em;
+    background-color: var(--c-bg-2);
+    text-align: end;
+    color: var(--c-text-3);
+    z-index: 1;
+  }
+
+  &.highlight {
+    &::before {
+      color: inherit;
+    }
+
+    outline: 0.2em solid var(--ld-bg-active);
+    background-color: var(--ld-bg-active);
+  }
+}
+
+.toggle-btn {
+  position: absolute;
+  inset: auto 0 0;
+  margin: 0.8em;
+  padding: 0.2em;
+  border-radius: 0.5em;
+  background-color: var(--c-bg-3);
+  text-align: center;
+  color: var(--c-text-2);
+}
+
+.toggle-icon {
+  transition: all 0.2s;
+
+  &.is-collapsed {
+    transform: rotate(180deg);
+  }
+
+  :hover > & {
+    opacity: 0;
+  }
+}
+
+.toggle-tip {
+  position: absolute;
+  opacity: 0;
+  inset: auto 0;
+  transition: opacity 0.2s;
+
+  :hover > & {
+    opacity: 1;
+  }
+}
+</style>
--- a/app/components/content/ProsePre2.vue
+++ b/app/components/content/ProsePre2.vue
@@ -36,6 +36,8 @@ const props = defineProps({
  },
 });

+console.log(props.code);
+
 const meta = computed(() => {
  if (!props.meta) return {};

@@ -126,7 +128,37 @@ if (import.meta.client) {
  onMounted(() => {
    if (!codeblock.value) return;

-    const lines = codeblock.value.querySelectorAll(".line");
+    // 兼容不同的代码块结构（包括 text 类型）
+    let lines = Array.from(codeblock.value.querySelectorAll(".line"));
+
+    // 如果没有 .line 元素，按 \n 分割创建行
+    if (lines.length === 0) {
+      const html = codeblock.value.innerHTML;
+      const textLines = html.split("\n");
+
+      // 清空预先存在的内容
+      codeblock.value.innerHTML = "";
+
+      // 为每一行创建包装元素
+      textLines.forEach((lineHtml, index) => {
+        const lineEl = document.createElement("div");
+        lineEl.className = "line";
+        lineEl.innerHTML = lineHtml;
+        lineEl.setAttribute("data-line", String(index + 1));
+        codeblock.value!.appendChild(lineEl);
+      });
+
+      lines = Array.from(codeblock.value.querySelectorAll(".line"));
+    } else {
+      // 原有逻辑：为 .line 元素设置 data-line
+      lines.forEach((line, index) => {
+        if (!line.getAttribute("data-line")) {
+          line.setAttribute("data-line", String(index + 1));
+        }
+      });
+    }
+
+    // 隐藏首尾空行
    let firstNonEmptyIndex = -1;
    let lastNonEmptyIndex = -1;

@@ -141,12 +173,6 @@ if (import.meta.client) {

    // 隐藏首尾空行
    lines.forEach((line, index) => {
-      // 设置行号
-      if (!line.getAttribute("data-line")) {
-        line.setAttribute("data-line", String(index + 1));
-      }
-
-      // 隐藏首尾空行
      if (index < firstNonEmptyIndex || index > lastNonEmptyIndex) {
        (line as HTMLElement).style.display = "none";
      }
@@ -294,7 +320,7 @@ if (import.meta.client) {
 }

 :deep(code) {
-  font-family: "Fira Code", "Monaco", monospace;
+  /* font-family: "JetBrains Mono", "Fira Code", "Monaco", monospace; */
  font-size: 0.95em;
  letter-spacing: 0.01em;
  font-variant-ligatures: common-ligatures;
--- a/app/components/content/ProsePre3.vue
+++ b/app/components/content/ProsePre3.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { useClipboard } from "@vueuse/core";
+
+const props = withDefaults(
+  defineProps<{
+    code?: string;
+    language?: string | null;
+    filename?: string | null;
+    highlights?: number[];
+    meta?: string | null;
+  }>(),
+  {
+    code: "",
+    language: null,
+    filename: null,
+    highlights: undefined,
+    meta: null,
+  },
+);
+
+const { copy, copied } = useClipboard();
+</script>
+
+<template>
+  <div class="relative">
+    <div class="absolute right-2 top-2 flex gap-1">
+      <span
+        v-if="filename"
+        class="block py-1 px-2 text-xs rounded border border-solid border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-slate-700 z-10"
+        >{{ filename }}</span
+      >
+
+      <button
+        class="block border border-solid border-gray-300 dark:border-gray-600 rounded p-1 bg-gray-100 dark:bg-slate-700 z-10"
+        @click="copy(code)">
+        <svg
+          v-if="copied"
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="block text-green-500"
+          viewBox="0 0 16 16">
+          <path
+            d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" />
+        </svg>
+        <svg
+          v-else
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="block"
+          viewBox="0 0 16 16">
+          <path
+            d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
+          <path
+            d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
+        </svg>
+      </button>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style>
+/* pre code .line::before {
+  content: attr(line);
+  position: absolute;
+  left: -6.25rem;
+  color: #cccccc;
+  user-select: none;
+} */
+@import "~/assets/css/code.css";
+</style>