@ruixinkeji/prism-ui 1.0.0

package/components/PrismCode/PrismCode.vue

@@ -0,0 +1,749 @@
+<template>
+  <view class="prism-code" :class="[actualTheme, { 'show-line-numbers': showLineNumbers, 'collapsed': !isExpanded }]">
+    <!-- 头部 -->
+    <view class="code-header" v-if="language || copyable || expandable">
+      <view class="header-left">
+        <view class="code-expand" @click="toggleExpand" v-if="expandable">
+          <text class="fa" :class="isExpanded ? 'fa-chevron-down' : 'fa-chevron-right'"></text>
+        </view>
+        <text class="code-lang" v-if="language">{{ language }}</text>
+      </view>
+      <view class="header-right">
+        <!-- 复制按钮 -->
+        <view class="code-copy" @click="handleCopy" v-if="copyable">
+          <text class="fa" :class="copied ? 'fa-check' : 'fa-copy'"></text>
+          <text class="copy-text">{{ copied ? '已复制' : '复制' }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 代码内容 -->
+    <view class="code-body" v-show="isExpanded" @dblclick="handleCopy">
+      <view class="code-lines">
+        <template v-for="(line, index) in displayLines" :key="index">
+          <view class="code-line" v-if="line.visible">
+            <view class="fold-btn" v-if="foldable && line.foldable" @click="toggleFold(line.foldStart)">
+              <text class="fa" :class="line.folded ? 'fa-plus' : 'fa-minus'"></text>
+            </view>
+            <view class="fold-placeholder" v-else-if="foldable"></view>
+            <text class="line-number" v-if="showLineNumbers">{{ line.lineNum }}</text>
+            <text class="line-content" v-if="!highlight">{{ line.content }}{{ line.folded ? ' ...' : '' }}</text>
+            <rich-text class="line-content hl-content" v-else :nodes="line.htmlContent"></rich-text>
+          </view>
+        </template>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+/**
+ * PrismCode 代码展示组件
+ *
+ * 功能特性：
+ * - 支持多种编程语言语法高亮
+ * - 支持深色/浅色主题自动切换
+ * - 支持代码复制、展开/收起、括号折叠
+ * - 支持显示行号
+ *
+ * 使用示例：
+ * <PrismCode code="const a = 1;" language="JavaScript" :copyable="true" />
+ */
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  // 要展示的代码内容
+  code: { type: String, default: '' },
+
+  // 编程语言，用于语法高亮和头部显示
+  // 支持: js/ts/python/java/go/rust/cpp/sql/html/css/json/shell/vue
+  language: { type: String, default: '' },
+
+  // 主题模式: 'auto' | 'light' | 'dark'
+  // auto: 跟随系统深色模式自动切换
+  theme: { type: String, default: 'auto' },
+
+  // 是否显示行号
+  showLineNumbers: { type: Boolean, default: false },
+
+  // 是否显示复制按钮（双击代码区域也可复制）
+  copyable: { type: Boolean, default: false },
+
+  // 是否可展开/收起整个代码块
+  expandable: { type: Boolean, default: false },
+
+  // 默认是否展开（仅 expandable 为 true 时有效）
+  defaultExpanded: { type: Boolean, default: true },
+
+  // 是否启用括号折叠功能（折叠 {}、[]、() 内的代码）
+  foldable: { type: Boolean, default: false },
+
+  // 是否启用语法高亮
+  highlight: { type: Boolean, default: true }
+});
+
+const appStore = useAppStore();
+const copied = ref(false);
+const isExpanded = ref(props.defaultExpanded);
+const foldedRanges = ref(new Set());
+
+// 计算实际主题
+const actualTheme = computed(() => {
+  if (props.theme === 'auto') {
+    return appStore.isDarkMode ? 'dark' : 'light';
+  }
+  return props.theme;
+});
+
+const codeLines = computed(() => {
+  return props.code ? props.code.split('\n') : [''];
+});
+
+// 语言关键字配置
+const langKeywords = {
+  js: ['const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'break', 'continue', 'class', 'extends', 'import', 'export', 'from', 'default', 'new', 'this', 'super', 'async', 'await', 'try', 'catch', 'finally', 'throw', 'typeof', 'instanceof', 'in', 'of', 'delete', 'void', 'yield', 'static', 'get', 'set'],
+  ts: ['const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'break', 'continue', 'class', 'extends', 'implements', 'import', 'export', 'from', 'default', 'new', 'this', 'super', 'async', 'await', 'try', 'catch', 'finally', 'throw', 'typeof', 'instanceof', 'in', 'of', 'delete', 'void', 'yield', 'static', 'get', 'set', 'interface', 'type', 'enum', 'namespace', 'module', 'declare', 'abstract', 'readonly', 'private', 'protected', 'public', 'as', 'is', 'keyof', 'infer'],
+  python: ['def', 'class', 'return', 'if', 'elif', 'else', 'for', 'while', 'break', 'continue', 'pass', 'import', 'from', 'as', 'try', 'except', 'finally', 'raise', 'with', 'lambda', 'yield', 'global', 'nonlocal', 'assert', 'del', 'in', 'not', 'and', 'or', 'is', 'async', 'await'],
+  java: ['public', 'private', 'protected', 'static', 'final', 'abstract', 'class', 'interface', 'extends', 'implements', 'new', 'return', 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'break', 'continue', 'try', 'catch', 'finally', 'throw', 'throws', 'import', 'package', 'this', 'super', 'void', 'instanceof', 'synchronized', 'volatile', 'transient', 'native', 'enum'],
+  go: ['func', 'return', 'if', 'else', 'for', 'range', 'switch', 'case', 'break', 'continue', 'default', 'package', 'import', 'type', 'struct', 'interface', 'map', 'chan', 'go', 'defer', 'select', 'var', 'const', 'make', 'new', 'nil', 'len', 'cap', 'append', 'copy', 'delete', 'panic', 'recover'],
+  rust: ['fn', 'let', 'mut', 'const', 'static', 'return', 'if', 'else', 'match', 'for', 'while', 'loop', 'break', 'continue', 'struct', 'enum', 'impl', 'trait', 'type', 'where', 'use', 'mod', 'pub', 'crate', 'self', 'super', 'as', 'in', 'ref', 'move', 'async', 'await', 'dyn', 'unsafe', 'extern'],
+  cpp: ['int', 'float', 'double', 'char', 'bool', 'void', 'long', 'short', 'unsigned', 'signed', 'const', 'static', 'extern', 'auto', 'register', 'volatile', 'return', 'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'break', 'continue', 'default', 'class', 'struct', 'union', 'enum', 'public', 'private', 'protected', 'virtual', 'override', 'final', 'new', 'delete', 'this', 'template', 'typename', 'namespace', 'using', 'try', 'catch', 'throw', 'include', 'define', 'ifdef', 'ifndef', 'endif'],
+  sql: ['SELECT', 'FROM', 'WHERE', 'AND', 'OR', 'NOT', 'IN', 'LIKE', 'BETWEEN', 'IS', 'NULL', 'ORDER', 'BY', 'ASC', 'DESC', 'LIMIT', 'OFFSET', 'JOIN', 'LEFT', 'RIGHT', 'INNER', 'OUTER', 'ON', 'GROUP', 'HAVING', 'INSERT', 'INTO', 'VALUES', 'UPDATE', 'SET', 'DELETE', 'CREATE', 'TABLE', 'DROP', 'ALTER', 'INDEX', 'PRIMARY', 'KEY', 'FOREIGN', 'REFERENCES', 'UNIQUE', 'DEFAULT', 'AS', 'DISTINCT', 'COUNT', 'SUM', 'AVG', 'MAX', 'MIN', 'CASE', 'WHEN', 'THEN', 'ELSE', 'END', 'UNION', 'ALL', 'EXISTS'],
+  html: ['html', 'head', 'body', 'div', 'span', 'p', 'a', 'img', 'ul', 'ol', 'li', 'table', 'tr', 'td', 'th', 'form', 'input', 'button', 'select', 'option', 'textarea', 'label', 'script', 'style', 'link', 'meta', 'title', 'header', 'footer', 'nav', 'main', 'section', 'article', 'aside', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'br', 'hr', 'strong', 'em', 'code', 'pre', 'blockquote', 'iframe', 'video', 'audio', 'canvas', 'svg'],
+  css: ['color', 'background', 'background-color', 'font-size', 'font-weight', 'font-family', 'margin', 'padding', 'border', 'width', 'height', 'display', 'position', 'top', 'right', 'bottom', 'left', 'flex', 'grid', 'align-items', 'justify-content', 'text-align', 'line-height', 'overflow', 'z-index', 'opacity', 'transform', 'transition', 'animation', 'box-shadow', 'border-radius', 'cursor', 'visibility', 'content', 'important'],
+  json: [],
+  shell: ['echo', 'cd', 'ls', 'mkdir', 'rm', 'cp', 'mv', 'cat', 'grep', 'find', 'chmod', 'chown', 'sudo', 'apt', 'yum', 'npm', 'yarn', 'git', 'docker', 'curl', 'wget', 'ssh', 'scp', 'tar', 'zip', 'unzip', 'export', 'source', 'alias', 'if', 'then', 'else', 'fi', 'for', 'do', 'done', 'while', 'case', 'esac', 'function', 'return', 'exit'],
+  vue: ['template', 'script', 'style', 'setup', 'ref', 'reactive', 'computed', 'watch', 'watchEffect', 'onMounted', 'onUnmounted', 'defineProps', 'defineEmits', 'defineExpose', 'v-if', 'v-else', 'v-for', 'v-model', 'v-bind', 'v-on', 'v-show', 'v-slot']
+};
+
+// 类型关键字
+const typeKeywords = {
+  ts: ['string', 'number', 'boolean', 'object', 'any', 'void', 'never', 'unknown', 'Array', 'Promise', 'Record', 'Partial', 'Required', 'Readonly', 'Pick', 'Omit', 'Exclude', 'Extract', 'NonNullable', 'ReturnType', 'Parameters', 'InstanceType'],
+  java: ['int', 'long', 'short', 'byte', 'float', 'double', 'char', 'boolean', 'String', 'Integer', 'Long', 'Double', 'Float', 'Boolean', 'Object', 'List', 'Map', 'Set', 'ArrayList', 'HashMap', 'HashSet'],
+  go: ['int', 'int8', 'int16', 'int32', 'int64', 'uint', 'uint8', 'uint16', 'uint32', 'uint64', 'float32', 'float64', 'complex64', 'complex128', 'byte', 'rune', 'string', 'bool', 'error'],
+  rust: ['i8', 'i16', 'i32', 'i64', 'i128', 'isize', 'u8', 'u16', 'u32', 'u64', 'u128', 'usize', 'f32', 'f64', 'bool', 'char', 'str', 'String', 'Vec', 'Option', 'Result', 'Box', 'Rc', 'Arc', 'Cell', 'RefCell']
+};
+
+// 获取语言类型
+function getLangType(lang) {
+  const l = (lang || '').toLowerCase();
+  if (['js', 'javascript', 'jsx'].includes(l)) return 'js';
+  if (['ts', 'typescript', 'tsx'].includes(l)) return 'ts';
+  if (['py', 'python'].includes(l)) return 'python';
+  if (['java', 'kt', 'kotlin'].includes(l)) return 'java';
+  if (['go', 'golang'].includes(l)) return 'go';
+  if (['rs', 'rust'].includes(l)) return 'rust';
+  if (['c', 'cpp', 'c++', 'h', 'hpp'].includes(l)) return 'cpp';
+  if (['sql', 'mysql', 'postgresql', 'sqlite'].includes(l)) return 'sql';
+  if (['html', 'htm', 'xml'].includes(l)) return 'html';
+  if (['css', 'scss', 'sass', 'less'].includes(l)) return 'css';
+  if (['json', 'jsonc'].includes(l)) return 'json';
+  if (['sh', 'bash', 'shell', 'zsh'].includes(l)) return 'shell';
+  if (['vue'].includes(l)) return 'vue';
+  return 'js'; // 默认
+}
+
+// 转义 HTML（只转义内容，不转义标签）
+function escapeHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+// 高亮颜色配置
+const darkColors = {
+  keyword: '#c586c0',
+  string: '#ce9178',
+  number: '#b5cea8',
+  comment: '#6a9955',
+  boolean: '#569cd6',
+  function: '#dcdcaa',
+  type: '#4ec9b0',
+  property: '#4fc1ff',
+  tag: '#569cd6',
+  attr: '#9cdcfe',
+  selector: '#d7ba7d',
+  decorator: '#dcdcaa',
+  operator: '#d4d4d4',
+  bracket: '#ffd700'
+};
+
+const lightColors = {
+  keyword: '#af00db',
+  string: '#a31515',
+  number: '#098658',
+  comment: '#008000',
+  boolean: '#0000ff',
+  function: '#795e26',
+  type: '#267f99',
+  property: '#001080',
+  tag: '#800000',
+  attr: '#e50000',
+  selector: '#800000',
+  decorator: '#795e26',
+  operator: '#000000',
+  bracket: '#0431fa'
+};
+
+// 获取当前主题的颜色
+const hlColors = computed(() => {
+  return actualTheme.value === 'dark' ? darkColors : lightColors;
+});
+
+// 包裹高亮
+function wrap(color, text) {
+  return `<span style="color:${color}">${escapeHtml(text)}</span>`;
+}
+
+// 语法高亮处理
+function highlightLine(line) {
+  if (!props.highlight) return escapeHtml(line);
+
+  const langType = getLangType(props.language);
+
+  // 使用 token 方式解析
+  return tokenize(line, langType);
+}
+
+// 简单的词法分析
+function tokenize(line, langType) {
+  const tokens = [];
+  let i = 0;
+  const colors = hlColors.value;
+
+  while (i < line.length) {
+    let matched = false;
+
+    // 字符串 - 双引号
+    if (line[i] === '"') {
+      const end = findStringEnd(line, i, '"');
+      tokens.push(wrap(colors.string, line.slice(i, end)));
+      i = end;
+      matched = true;
+    }
+    // 字符串 - 单引号
+    else if (line[i] === "'") {
+      const end = findStringEnd(line, i, "'");
+      tokens.push(wrap(colors.string, line.slice(i, end)));
+      i = end;
+      matched = true;
+    }
+    // 字符串 - 模板字符串
+    else if (line[i] === '`') {
+      const end = findStringEnd(line, i, '`');
+      tokens.push(wrap(colors.string, line.slice(i, end)));
+      i = end;
+      matched = true;
+    }
+    // 单行注释
+    else if (line.slice(i, i + 2) === '//') {
+      tokens.push(wrap(colors.comment, line.slice(i)));
+      break;
+    }
+    // Python/Shell 注释
+    else if (['python', 'shell'].includes(langType) && line[i] === '#') {
+      tokens.push(wrap(colors.comment, line.slice(i)));
+      break;
+    }
+    // 数字
+    else if (/\d/.test(line[i]) && (i === 0 || !/\w/.test(line[i - 1]))) {
+      const match = line.slice(i).match(/^(0x[0-9a-fA-F]+|0b[01]+|0o[0-7]+|\d+\.?\d*(?:e[+-]?\d+)?)/);
+      if (match) {
+        tokens.push(wrap(colors.number, match[0]));
+        i += match[0].length;
+        matched = true;
+      }
+    }
+    // 标识符和关键字
+    else if (/[a-zA-Z_]/.test(line[i])) {
+      const match = line.slice(i).match(/^[a-zA-Z_]\w*/);
+      if (match) {
+        const word = match[0];
+        const nextChar = line[i + word.length] || '';
+        const keywords = langKeywords[langType] || langKeywords.js;
+        const types = typeKeywords[langType] || [];
+
+        if (keywords.includes(word)) {
+          tokens.push(wrap(colors.keyword, word));
+        } else if (types.includes(word)) {
+          tokens.push(wrap(colors.type, word));
+        } else if (['true', 'false', 'null', 'undefined', 'NaN', 'Infinity', 'True', 'False', 'None', 'nil'].includes(word)) {
+          tokens.push(wrap(colors.boolean, word));
+        } else if (nextChar === '(') {
+          tokens.push(wrap(colors.function, word));
+        } else if (nextChar === ':') {
+          tokens.push(wrap(colors.property, word));
+        } else {
+          tokens.push(escapeHtml(word));
+        }
+        i += word.length;
+        matched = true;
+      }
+    }
+    // 括号
+    else if (/[(){}[\]]/.test(line[i])) {
+      tokens.push(wrap(colors.bracket, line[i]));
+      i++;
+      matched = true;
+    }
+    // 装饰器
+    else if (line[i] === '@' && ['python', 'java', 'ts'].includes(langType)) {
+      const match = line.slice(i).match(/^@\w+/);
+      if (match) {
+        tokens.push(wrap(colors.decorator, match[0]));
+        i += match[0].length;
+        matched = true;
+      }
+    }
+
+    // 其他字符
+    if (!matched) {
+      tokens.push(escapeHtml(line[i]));
+      i++;
+    }
+  }
+
+  return tokens.join('');
+}
+
+// 查找字符串结束位置
+function findStringEnd(line, start, quote) {
+  let i = start + 1;
+  while (i < line.length) {
+    if (line[i] === '\\') {
+      i += 2;
+    } else if (line[i] === quote) {
+      return i + 1;
+    } else {
+      i++;
+    }
+  }
+  return line.length;
+}
+
+// JSON 高亮
+function highlightJson(line) {
+  let result = line;
+  // 键名
+  result = result.replace(/(&quot;)([^&]+?)(&quot;)\s*:/g, `<span style="color:${hlColors.property}">$1$2$3</span>:`);
+  // 字符串值
+  result = result.replace(/:(\s*)(&quot;)([^&]*?)(&quot;)/g, `:$1<span style="color:${hlColors.string}">$2$3$4</span>`);
+  // 数字
+  result = result.replace(/:\s*(-?\d+\.?\d*)/g, `: <span style="color:${hlColors.number}">$1</span>`);
+  // 布尔和 null
+  result = result.replace(/:\s*(true|false|null)\b/g, `: <span style="color:${hlColors.boolean}">$1</span>`);
+  return result;
+}
+
+// HTML 高亮
+function highlightHtml(line) {
+  let result = line;
+  // 标签
+  result = result.replace(/(&lt;\/?)([\w-]+)/g, `$1<span style="color:${hlColors.tag}">$2</span>`);
+  // 属性名
+  result = result.replace(/\s([\w-]+)(=)/g, ` <span style="color:${hlColors.attr}">$1</span>$2`);
+  // 属性值
+  result = result.replace(/(=)(&quot;[^&]*?&quot;|'[^']*?')/g, `$1<span style="color:${hlColors.string}">$2</span>`);
+  // 注释
+  result = result.replace(/(&lt;!--.*?--&gt;)/g, `<span style="color:${hlColors.comment}">$1</span>`);
+  return result;
+}
+
+// CSS 高亮
+function highlightCss(line) {
+  let result = line;
+  // 选择器（简单匹配）
+  result = result.replace(/^(\s*)([\.\#\w\-\[\]=\"\'\:\s,>+~]+)(\s*\{)/g, `$1<span style="color:${hlColors.selector}">$2</span>$3`);
+  // 属性名
+  result = result.replace(/([\w-]+)(\s*:)/g, `<span style="color:${hlColors.property}">$1</span>$2`);
+  // 属性值中的颜色
+  result = result.replace(/(#[0-9a-fA-F]{3,8})\b/g, `<span style="color:${hlColors.string}">$1</span>`);
+  // 数字和单位
+  result = result.replace(/\b(-?\d+\.?\d*)(px|em|rem|%|vh|vw|deg|s|ms)?\b/g, `<span style="color:${hlColors.number}">$1$2</span>`);
+  // 注释
+  result = result.replace(/(\/\*.*?\*\/)/g, `<span style="color:${hlColors.comment}">$1</span>`);
+  // !important
+  result = result.replace(/(!important)/gi, `<span style="color:${hlColors.keyword}">$1</span>`);
+  return result;
+}
+
+// SQL 高亮
+function highlightSql(line) {
+  let result = line;
+  const keywords = langKeywords.sql;
+  keywords.forEach(kw => {
+    const regex = new RegExp(`\\b(${kw})\\b`, 'gi');
+    result = result.replace(regex, `<span style="color:${hlColors.keyword}">$1</span>`);
+  });
+  // 字符串
+  result = result.replace(/('[^']*')/g, `<span style="color:${hlColors.string}">$1</span>`);
+  // 数字
+  result = result.replace(/\b(\d+\.?\d*)\b/g, `<span style="color:${hlColors.number}">$1</span>`);
+  // 注释
+  result = result.replace(/(--.*$)/g, `<span style="color:${hlColors.comment}">$1</span>`);
+  return result;
+}
+
+// 通用高亮
+function highlightGeneral(line, langType) {
+  let result = line;
+
+  // 字符串（需要先处理，避免被其他规则干扰）
+  result = result.replace(/(&quot;)([^&]*?)(&quot;)/g, `<span style="color:${hlColors.string}">$1$2$3</span>`);
+  result = result.replace(/('[^'\\]*(?:\\.[^'\\]*)*')/g, `<span style="color:${hlColors.string}">$1</span>`);
+  result = result.replace(/(`[^`\\]*(?:\\.[^`\\]*)*`)/g, `<span style="color:${hlColors.string}">$1</span>`);
+
+  // 注释
+  if (['python', 'shell'].includes(langType)) {
+    result = result.replace(/(#.*$)/g, `<span style="color:${hlColors.comment}">$1</span>`);
+  } else {
+    result = result.replace(/(\/\/.*$)/g, `<span style="color:${hlColors.comment}">$1</span>`);
+    result = result.replace(/(\/\*.*?\*\/)/g, `<span style="color:${hlColors.comment}">$1</span>`);
+  }
+
+  // 类型关键字
+  const types = typeKeywords[langType] || [];
+  if (types.length > 0) {
+    const typeRegex = new RegExp(`\\b(${types.join('|')})\\b`, 'g');
+    result = result.replace(typeRegex, `<span style="color:${hlColors.type}">$1</span>`);
+  }
+
+  // 语言关键字
+  const keywords = langKeywords[langType] || langKeywords.js;
+  if (keywords.length > 0) {
+    const kwRegex = new RegExp(`\\b(${keywords.join('|')})\\b`, 'g');
+    result = result.replace(kwRegex, `<span style="color:${hlColors.keyword}">$1</span>`);
+  }
+
+  // 函数调用
+  result = result.replace(/\b([a-zA-Z_]\w*)\s*\(/g, `<span style="color:${hlColors.function}">$1</span>(`);
+
+  // 对象属性名 (key: value 格式)
+  result = result.replace(/\b([a-zA-Z_]\w*)\s*:/g, `<span style="color:${hlColors.property}">$1</span>:`);
+
+  // 括号高亮
+  result = result.replace(/([(){}[\]])/g, `<span style="color:${hlColors.bracket}">$1</span>`);
+
+  // 数字（十六进制、二进制、八进制、浮点数、整数）
+  result = result.replace(/\b(0x[0-9a-fA-F]+|0b[01]+|0o[0-7]+|\d+\.?\d*(?:e[+-]?\d+)?)\b/g, `<span style="color:${hlColors.number}">$1</span>`);
+
+  // 布尔值和特殊值
+  if (['python'].includes(langType)) {
+    result = result.replace(/\b(True|False|None)\b/g, `<span style="color:${hlColors.boolean}">$1</span>`);
+  } else if (['rust'].includes(langType)) {
+    result = result.replace(/\b(true|false|Some|None|Ok|Err)\b/g, `<span style="color:${hlColors.boolean}">$1</span>`);
+  } else if (['go'].includes(langType)) {
+    result = result.replace(/\b(true|false|nil|iota)\b/g, `<span style="color:${hlColors.boolean}">$1</span>`);
+  } else {
+    result = result.replace(/\b(true|false|null|undefined|NaN|Infinity)\b/g, `<span style="color:${hlColors.boolean}">$1</span>`);
+  }
+
+  // 装饰器/注解
+  if (['python', 'java', 'ts'].includes(langType)) {
+    result = result.replace(/(@\w+)/g, `<span style="color:${hlColors.decorator}">$1</span>`);
+  }
+
+  // 操作符
+  result = result.replace(/(\+\+|--|&&|\|\||===|!==|==|!=|&lt;=|&gt;=|=&gt;|\+=|-=|\*=|\/=)/g, `<span style="color:${hlColors.operator}">$1</span>`);
+
+  return result;
+}
+
+// 解析括号折叠区域
+const foldRanges = computed(() => {
+  if (!props.foldable) return [];
+  const ranges = [];
+  const stack = [];
+  const lines = codeLines.value;
+
+  lines.forEach((line, index) => {
+    const openCount = (line.match(/[\{\[\(]/g) || []).length;
+    const closeCount = (line.match(/[\}\]\)]/g) || []).length;
+
+    for (let i = 0; i < openCount; i++) {
+      stack.push(index);
+    }
+    for (let i = 0; i < closeCount; i++) {
+      if (stack.length > 0) {
+        const start = stack.pop();
+        if (index > start) {
+          ranges.push({ start, end: index });
+        }
+      }
+    }
+  });
+  return ranges;
+});
+
+// 计算显示的行
+const displayLines = computed(() => {
+  const lines = codeLines.value;
+  const result = [];
+
+  lines.forEach((content, index) => {
+    const foldRange = foldRanges.value.find(r => r.start === index);
+    const isFolded = foldedRanges.value.has(index);
+    const isHidden = Array.from(foldedRanges.value).some(start => {
+      const range = foldRanges.value.find(r => r.start === start);
+      return range && index > range.start && index <= range.end;
+    });
+
+    result.push({
+      lineNum: index + 1,
+      content,
+      htmlContent: highlightLine(content),
+      visible: !isHidden,
+      foldable: !!foldRange,
+      foldStart: index,
+      folded: isFolded
+    });
+  });
+  return result;
+});
+
+// 切换括号折叠
+function toggleFold(lineIndex) {
+  if (foldedRanges.value.has(lineIndex)) {
+    foldedRanges.value.delete(lineIndex);
+  } else {
+    foldedRanges.value.add(lineIndex);
+  }
+  foldedRanges.value = new Set(foldedRanges.value);
+}
+
+function handleCopy() {
+  uni.setClipboardData({
+    data: props.code,
+    success: () => {
+      copied.value = true;
+      setTimeout(() => { copied.value = false; }, 2000);
+    }
+  });
+}
+
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+}
+</script>
+
+<style lang="scss">
+.prism-code {
+  border-radius: 12rpx;
+  overflow: hidden;
+  margin: 10rpx auto;
+}
+
+/* 头部 */
+.code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16rpx 20rpx;
+  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.code-expand {
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  .fa { font-size: 22rpx; }
+  &:active { opacity: 0.7; }
+}
+
+.code-lang {
+  font-size: 22rpx;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.code-copy {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 8rpx 16rpx;
+  border-radius: 8rpx;
+  transition: all 0.2s;
+
+  &:active { opacity: 0.7; }
+
+  .fa { font-size: 24rpx; }
+  .copy-text { font-size: 22rpx; }
+}
+
+/* 代码内容 */
+.code-body {
+  padding: 20rpx;
+  overflow-x: auto;
+
+  /* 自定义滚动条 - 默认隐藏，悬停显示 */
+  &::-webkit-scrollbar {
+    height: 4px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 2px;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background: rgba(128, 128, 128, 0.4);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(128, 128, 128, 0.6);
+  }
+}
+
+.code-lines {
+  display: flex;
+  flex-direction: column;
+}
+
+.code-line {
+  display: flex;
+  line-height: 1.6;
+  font-family: 'Courier New', Consolas, Monaco, monospace;
+  font-size: 24rpx;
+}
+
+/* 括号折叠按钮 */
+.fold-btn {
+  width: 28rpx;
+  height: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-right: 8rpx;
+  border-radius: 4rpx;
+
+  .fa { font-size: 16rpx; }
+  &:active { opacity: 0.7; }
+}
+
+.fold-placeholder {
+  width: 28rpx;
+  margin-right: 8rpx;
+  flex-shrink: 0;
+}
+
+.line-number {
+  min-width: 48rpx;
+  padding-right: 16rpx;
+  text-align: right;
+  user-select: none;
+  opacity: 0.5;
+}
+
+.line-content {
+  flex: 1;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* 语法高亮颜色 */
+.hl-keyword { color: #c586c0; }
+.hl-string { color: #ce9178; }
+.hl-number { color: #b5cea8; }
+.hl-comment { color: #6a9955; }
+.hl-boolean { color: #569cd6; }
+.hl-function { color: #dcdcaa; }
+.hl-type { color: #4ec9b0; }
+.hl-property { color: #4fc1ff; }
+.hl-tag { color: #569cd6; }
+.hl-attr { color: #9cdcfe; }
+.hl-selector { color: #d7ba7d; }
+.hl-color { color: #ce9178; }
+.hl-decorator { color: #dcdcaa; }
+.hl-operator { color: #d4d4d4; }
+.hl-bracket { color: #ffd700; }
+
+/* 深色主题（默认） */
+.prism-code.dark {
+  background: #1e1e1e;
+
+  .code-header {
+    background: #2d2d2d;
+    border-bottom: 1rpx solid #404040;
+  }
+
+  .code-lang { color: #9cdcfe; }
+
+  .code-copy {
+    color: #808080;
+    background: rgba(255, 255, 255, 0.05);
+    &:hover { background: rgba(255, 255, 255, 0.1); }
+  }
+
+  .line-number { color: #858585; }
+  .line-content { color: #d4d4d4; }
+  .code-expand .fa { color: #808080; }
+  .fold-btn {
+    color: #808080;
+    background: rgba(255, 255, 255, 0.05);
+    &:hover { background: rgba(255, 255, 255, 0.1); }
+  }
+}
+
+/* 浅色主题 */
+.prism-code.light {
+  background: #f5f5f5;
+  border: 1rpx solid #e0e0e0;
+
+  .code-header {
+    background: #ebebeb;
+    border-bottom-color: #e0e0e0;
+  }
+
+  .code-lang { color: #666666; }
+
+  .code-copy {
+    color: #666666;
+    background: rgba(0, 0, 0, 0.05);
+    &:hover { background: rgba(0, 0, 0, 0.1); }
+  }
+
+  .line-number { color: #999999; }
+  .line-content { color: #333333; }
+  .code-expand .fa { color: #666666; }
+  .fold-btn {
+    color: #666666;
+    background: rgba(0, 0, 0, 0.05);
+    &:hover { background: rgba(0, 0, 0, 0.1); }
+  }
+
+  /* 浅色主题高亮颜色 */
+  .hl-keyword { color: #af00db; }
+  .hl-string { color: #a31515; }
+  .hl-number { color: #098658; }
+  .hl-comment { color: #008000; }
+  .hl-boolean { color: #0000ff; }
+  .hl-function { color: #795e26; }
+  .hl-type { color: #267f99; }
+  .hl-property { color: #001080; }
+  .hl-tag { color: #800000; }
+  .hl-attr { color: #e50000; }
+  .hl-selector { color: #800000; }
+  .hl-color { color: #a31515; }
+  .hl-decorator { color: #795e26; }
+  .hl-operator { color: #000000; }
+  .hl-bracket { color: #0431fa; }
+}
+</style>