富文本优化同时支持列表和链接渲染

packages/vrender-components/__tests__/browser/main.ts

@@ -320,19 +320,34 @@ const specs = [
   }
 ];
 
-const createSidebar = (node: HTMLDivElement) => {
-  const specsHtml = specs.map(entry => {
-    return `<p class="menu-item" data-path="${entry.path}">${entry.name}</p>`;
-  });
+const buildMenuHtml = (filter?: string) => {
+  const keyword = filter?.toLowerCase() ?? '';
+  return specs
+    .filter(
+      entry => !keyword || entry.name.toLowerCase().includes(keyword) || entry.path.toLowerCase().includes(keyword)
+    )
+    .map(entry => {
+      return `<p class="menu-item" data-path="${entry.path}">${entry.name}</p>`;
+    })
+    .join('');
+};
 
+const createSidebar = (node: HTMLDivElement) => {
   node.innerHTML = `
     <div>
       <p class="sidebar-title">组件列表</p>
+      <input class="sidebar-search" placeholder="搜索..." />
       <div class="menu-list">
-        ${specsHtml.join('')}
+        ${buildMenuHtml()}
       </div>
     </div>
   `;
+
+  const searchInput = node.querySelector<HTMLInputElement>('.sidebar-search')!;
+  searchInput.addEventListener('input', () => {
+    const menuList = node.querySelector<HTMLDivElement>('.menu-list')!;
+    menuList.innerHTML = buildMenuHtml(searchInput.value);
+  });
 };
 
 const ACTIVE_ITEM_CLS = 'menu-item-active';
@@ -350,7 +365,10 @@ const handleClick = (e: { target: any }, isInit?: boolean) => {
   }
 
   if (triggerNode) {
-    const path = triggerNode.dataset.path;
+    const path = triggerNode.dataset?.path;
+    if (!path) {
+      return;
+    }
 
     triggerNode.classList.add(ACTIVE_ITEM_CLS);
     if (!isInit) {

packages/vrender-components/__tests__/browser/style.css

@@ -37,8 +37,24 @@ body p {
   line-height: 5vh;
 }
 
+#app .sidebar .sidebar-search {
+  box-sizing: border-box;
+  width: calc(100% - 1em);
+  margin: 0 0.5em 0.5em;
+  padding: 4px 8px;
+  font-size: 13px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  outline: none;
+}
+
+#app .sidebar .sidebar-search:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px var(--primary-color-outline);
+}
+
 #app .sidebar .menu-list {
-  height: 95vh;
+  height: calc(95vh - 2.5em);
   overflow-y: scroll;
   border-top: #d7d7d7 1px solid;
 }

packages/vrender-components/__tests__/browser/vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
+      '@visactor/vrender-components': path.resolve(__dirname, '../../src/index.ts'),
       '@visactor/vrender-core': path.resolve(__dirname, '../../../vrender-core/src/index.ts'),
       '@visactor/vrender': path.resolve(__dirname, '../../../vrender/src/index.ts'),
       '@visactor/vrender-kits': path.resolve(__dirname, '../../../vrender-kits/src/index.ts'),

packages/vrender-core/__tests__/browser/src/main.ts

@@ -3,19 +3,34 @@ import { pages } from './pages/';
 
 const LOCAL_STORAGE_KEY = 'CANOPUS_DEMOS';
 
-const createSidebar = (node: HTMLDivElement) => {
-  const specsHtml = pages.map(entry => {
-    return `<p class="menu-item" data-path="${entry.path}">${entry.title}</p>`;
-  });
+const buildMenuHtml = (filter?: string) => {
+  const keyword = filter?.toLowerCase() ?? '';
+  return pages
+    .filter(
+      entry => !keyword || entry.title.toLowerCase().includes(keyword) || entry.path.toLowerCase().includes(keyword)
+    )
+    .map(entry => {
+      return `<p class="menu-item" data-path="${entry.path}">${entry.title}</p>`;
+    })
+    .join('');
+};
 
+const createSidebar = (node: HTMLDivElement) => {
   node.innerHTML = `
     <div>
       <p class="sidebar-title">页面列表</p>
+      <input class="sidebar-search" placeholder="搜索..." />
       <div class="menu-list">
-        ${specsHtml.join('')}
+        ${buildMenuHtml()}
       </div>
     </div>
   `;
+
+  const searchInput = node.querySelector<HTMLInputElement>('.sidebar-search')!;
+  searchInput.addEventListener('input', () => {
+    const menuList = node.querySelector<HTMLDivElement>('.menu-list')!;
+    menuList.innerHTML = buildMenuHtml(searchInput.value);
+  });
 };
 
 const ACTIVE_ITEM_CLS = 'menu-item-active';
@@ -35,7 +50,10 @@ const handleClick = (e: { target: any }, isInit?: boolean) => {
   }
 
   if (triggerNode) {
-    const path = triggerNode.dataset.path;
+    const path = triggerNode.dataset?.path;
+    if (!path) {
+      return;
+    }
 
     triggerNode.classList.add(ACTIVE_ITEM_CLS);
     if (!isInit) {

packages/vrender-core/__tests__/browser/src/pages/index.ts

@@ -35,6 +35,14 @@ export const pages = [
   {
     title: 'circle绘制',
     path: 'circle'
+  },
+  {
+    title: '富文本列表&链接',
+    path: 'richtext-list-link'
+  },
+  {
+    title: '富文本编辑器',
+    path: 'richtext-editor'
   }
   // {
   //   title: 'rect绘制',