npm - mm_ai - Versions diffs - 1.0.0 - Mend

mm_ai 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2678) hide show

package/common/tool/develop/build_html_ui/tpl/index.html ADDED Viewed

@@ -0,0 +1,437 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <title>58个组件演示 | 主题化组件库</title>
+  <!-- 引入外部 CSS（基础类名使用下划线，修饰符使用连字符） -->
+  <link rel="stylesheet" href="./css/var.css">
+  <link rel="stylesheet" href="./css/component.css">
+  <link rel="stylesheet" href="./css/size.css">
+  <link rel="stylesheet" href="./css/color.css">
+  <script src="./js/jquery4.min.js"></script>
+  <script src="./js/ui.js"></script>
+  <!-- 页面布局辅助样式（非组件样式，仅用于演示排版，类名已统一使用下划线） -->
+  <style>
+    .demo_section {
+      margin-bottom: var(--spacing_xl);
+      border-bottom: 1px solid var(--border_color_light);
+      padding-bottom: var(--spacing_lg);
+    }
+    .demo_title {
+      font-size: var(--font_size_lg);
+      font-weight: var(--font_weight_bold);
+      margin-bottom: var(--spacing_base);
+      color: var(--color_text_primary);
+    }
+    .demo_grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing_md);
+      align-items: center;
+    }
+    hr {
+      margin: var(--spacing_lg) 0;
+      border: none;
+      border-top: 1px solid var(--border_color_light);
+    }
+    body {
+      padding: var(--spacing_lg);
+      font-family: var(--font_family_sans);
+      background: var(--bg_body);
+      color: var(--color_text_primary);
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <h1 class="h1" style="margin-bottom: var(--spacing_lg);">58 个组件演示</h1>
+    <p class="p text-muted">所有组件基础类使用下划线（如 <code>.card_header</code>），修饰符使用连字符（如
+      <code>.btn-primary</code>、<code>.btn-sm</code>）。
+    </p>
+    <!-- ==================== 布局组件 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">布局组件 (Layout)</div>
+      <div class="demo_grid">
+        <div class="container"
+          style="background: var(--bg_surface_secondary); padding: var(--spacing_sm); border-radius: var(--radius_base);">
+          .container</div>
+        <div class="row" style="background: var(--bg_surface_secondary); gap: var(--spacing_sm);">
+          <div class="col">.col 1</div>
+          <div class="col">.col 2</div>
+        </div>
+        <div class="grid"
+          style="grid-template-columns: repeat(3,1fr); background: var(--bg_surface_secondary); padding: var(--spacing_sm);">
+          .grid 项</div>
+        <div class="flex">.flex 项1</div>
+        <div class="stack">.stack 项1<br>.stack 项2</div>
+        <div class="divider" style="width: 200px;"></div>
+        <div class="spacer" style="background: #ccc; width: 50px; height: 20px;"></div>
+      </div>
+    </div>
+    <!-- ==================== 按钮 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">按钮 .btn (尺寸 + 颜色)</div>
+      <div class="demo_grid">
+        <button class="btn btn-primary">Primary</button>
+        <button class="btn btn-secondary">Secondary</button>
+        <button class="btn btn-success">Success</button>
+        <button class="btn btn-danger">Danger</button>
+        <button class="btn btn-warning">Warning</button>
+        <button class="btn btn-info">Info</button>
+        <button class="btn btn-light">Light</button>
+        <button class="btn btn-dark">Dark</button>
+        <button class="btn btn-primary btn-sm">Sm Primary</button>
+        <button class="btn btn-success btn-lg">Lg Success</button>
+        <button class="btn btn-danger btn-xl">XL Danger</button>
+        <button class="btn btn-primary" disabled>Disabled</button>
+      </div>
+    </div>
+    <!-- ==================== 输入框 / 文本域 / 下拉 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">输入框 .input / 文本域 .textarea / 下拉 .select</div>
+      <div class="demo_grid">
+        <input class="input" placeholder="默认输入框" style="width: 200px;">
+        <input class="input input-primary" placeholder="Primary focus" style="width: 200px;">
+        <input class="input input-danger input-sm" placeholder="Danger sm" style="width: 150px;">
+        <textarea class="textarea" placeholder="文本域" rows="2" style="width: 200px;"></textarea>
+        <select class="select" style="width: 150px;">
+          <option>选项一</option>
+          <option>选项二</option>
+        </select>
+        <select class="select select-success select-lg" style="width: 180px;">
+          <option>大号成功</option>
+          <option>大号成功二</option>
+        </select>
+      </div>
+    </div>
+    <!-- ==================== 复选框 / 单选框 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">复选框 .checkbox / 单选框 .radio (颜色变体)</div>
+      <div class="demo_grid">
+        <label class="checkbox"><input type="checkbox"> 默认</label>
+        <label class="checkbox checkbox-primary"><input type="checkbox" checked> Primary</label>
+        <label class="checkbox checkbox-success"><input type="checkbox"> Success</label>
+        <label class="checkbox checkbox-danger"><input type="checkbox"> Danger</label>
+        <label class="radio"><input type="radio" name="radio"> 默认</label>
+        <label class="radio radio-primary"><input type="radio" name="radio" checked> Primary</label>
+        <label class="radio radio-success"><input type="radio" name="radio"> Success</label>
+      </div>
+    </div>
+    <!-- ==================== 开关 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">开关 .switch (含颜色变体)</div>
+      <div class="demo_grid">
+        <label class="switch"><input type="checkbox"><span class="switch_slider"></span></label>
+        <label class="switch switch-primary"><input type="checkbox" checked><span class="switch_slider"></span></label>
+        <label class="switch switch-sm switch-success"><input type="checkbox"><span
+            class="switch_slider"></span></label>
+        <label class="switch switch-lg switch-danger">
+          <input type="checkbox" checked><span class="switch_slider"></span>
+        </label>
+      </div>
+    </div>
+    <!-- ==================== 滑块 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">滑块 .slider (颜色变体)</div>
+      <div class="demo_grid">
+        <input type="range" class="slider" style="width: 200px;">
+        <input type="range" class="slider slider-warning" style="width: 200px;" value="50">
+        <input type="range" class="slider slider-sm slider-success" style="width: 150px;">
+      </div>
+    </div>
+    <!-- ==================== 评分 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">评分 .rate (含颜色变体)</div>
+      <div class="rate rate-primary" data-rate-value="3">
+        <span class="rate_star" data-value="1">★</span>
+        <span class="rate_star" data-value="2">★</span>
+        <span class="rate_star" data-value="3">★</span>
+        <span class="rate_star" data-value="4">★</span>
+        <span class="rate_star" data-value="5">★</span>
+      </div>
+      <br />
+      <div class="rate rate-success rate-sm" data-rate-value="2">
+        <span class="rate_star" data-value="1">★</span>
+        <span class="rate_star" data-value="2">★</span>
+        <span class="rate_star" data-value="3">★</span>
+        <span class="rate_star" data-value="4">★</span>
+        <span class="rate_star" data-value="5">★</span>
+      </div>
+      <br />
+      <div class="rate rate-warning" data-rate-value="4">
+        <span class="rate_star" data-value="1">★</span>
+        <span class="rate_star" data-value="2">★</span>
+        <span class="rate_star" data-value="3">★</span>
+        <span class="rate_star" data-value="4">★</span>
+        <span class="rate_star" data-value="5">★</span>
+      </div>
+    </div>
+    <!-- ==================== 表单结构 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">表单 .form / .form_item / .label / .fieldset</div>
+      <form class="form" style="max-width: 300px;">
+        <div class="form_item">
+          <label class="label label-primary">用户名</label>
+          <input class="input" placeholder="请输入">
+        </div>
+        <div class="form_item form_item-sm">
+          <label class="label label-sm">密码</label>
+          <input class="input input-sm" type="password" placeholder="小号输入框">
+        </div>
+        <fieldset class="fieldset fieldset-primary">
+          <legend class="legend legend-primary">附加信息</legend>
+          <label class="checkbox"><input type="checkbox"> 同意条款</label>
+        </fieldset>
+      </form>
+    </div>
+    <!-- ==================== 提示类 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">提示框 .tooltip / 气泡卡片 .popover (静态演示)</div>
+      <div class="demo_grid">
+        <span class="tooltip" style="position: static; display: inline-block;">Tooltip 文本</span>
+        <div class="popover popover-primary" style="position: static; display: inline-block; width: auto;">Popover 内容
+        </div>
+      </div>
+    </div>
+    <!-- ==================== 模态框 / 抽屉 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">模态框 .modal / 抽屉 .drawer (仅结构，需JS触发)</div>
+      <button class="btn btn-primary"
+        onclick="document.querySelector('.modal-demo').style.display='flex'">打开模态框</button>
+      <button class="btn btn-secondary"
+        onclick="document.querySelector('.drawer-demo').classList.add('open')">打开抽屉</button>
+      <div class="modal modal-demo"
+        style="display: none; position: fixed; top:0; left:0; background: rgba(0,0,0,0.5); z-index: 1000;"
+        onclick="if(event.target===this)this.style.display='none'">
+        <div class="modal_content modal-sm">
+          <div class="modal_header">模态框标题</div>
+          <div class="modal_body">这是一个模态框内容</div>
+          <div class="modal_footer"><button class="btn btn-primary"
+              onclick="this.closest('.modal').style.display='none'">关闭</button></div>
+        </div>
+      </div>
+      <div class="drawer drawer-demo" style="position: fixed; top:0; right:0; z-index: 1000;">
+        <div class="drawer_header"
+          style="padding: var(--spacing_base); border-bottom: 1px solid var(--border_color_light);">抽屉标题</div>
+        <div class="drawer_body" style="padding: var(--spacing_base);">抽屉内容</div>
+        <button class="btn btn-sm" onclick="this.closest('.drawer').classList.remove('open')"
+          style="margin: var(--spacing_base);">关闭</button>
+      </div>
+    </div>
+    <!-- ==================== 下拉菜单 / 菜单 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">下拉菜单 .dropdown / 菜单 .menu</div>
+      <div class="dropdown" style="display: inline-block;">
+        <button class="btn btn-secondary">下拉菜单</button>
+        <div class="dropdown_menu dropdown_menu-sm" style="display: none;">
+          <ul class="menu">
+            <li class="menu_item">菜单项1</li>
+            <li class="menu_item menu_item-primary">菜单项2 (primary hover)</li>
+            <li class="menu_item">菜单项3</li>
+          </ul>
+        </div>
+      </div>
+      <div style="padding: 1rem;"></div>
+      <ul class="menu" style="border:1px solid var(--border_color_light); width: 150px;">
+        <li class="menu_item">默认菜单</li>
+        <li class="menu_item menu_item-primary">Primary hover</li>
+      </ul>
+    </div>
+    <!-- ==================== 标签页 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">标签页 .tabs / .tab</div>
+      <div class="tabs">
+        <div class="tab tab_active tab-primary">激活页</div>
+        <div class="tab">未激活</div>
+      </div>
+    </div>
+    <!-- ==================== 卡片 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">卡片 .card (含颜色变体)</div>
+      <div class="demo_grid">
+        <div class="card" style="width: 200px;">
+          <div class="card_header">卡片标题</div>
+          <div class="card_body">卡片内容区域</div>
+          <div class="card_footer">底部</div>
+        </div>
+        <div class="card card-primary" style="width: 200px;">
+          <div class="card_header">Primary 卡片</div>
+          <div class="card_body">边框/头部颜色变体</div>
+        </div>
+      </div>
+    </div>
+    <!-- ==================== 头像 / 徽标 / 标签 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">头像 .avatar / 徽标 .badge / 标签 .tag</div>
+      <div class="demo_grid">
+        <div class="avatar"
+          style="background-image: url('https://gips1.baidu.com/it/u=2964993118,1268983187&fm=3074&app=3074&f=PNG?w=2048&h=2048'); background-color: #ccc;">
+        </div>
+        <div class="avatar avatar-lg"
+          style="background-image: url('https://gips1.baidu.com/it/u=2964993118,1268983187&fm=3074&app=3074&f=PNG?w=2048&h=2048'); background-color: #ccc;">
+        </div>
+        <span class="badge badge-primary">Badge</span>
+        <span class="badge badge-success badge-sm">Success sm</span>
+        <span class="tag tag-danger">Tag</span>
+        <span class="tag tag-lg">Tag lg</span>
+      </div>
+    </div>
+    <!-- ==================== 警告提示 / 全局提示 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">警告 .alert / 全局提示 .message (静态)</div>
+      <div class="alert alert-primary">这是一条警告信息 (primary)</div>
+      <br />
+      <div class="alert alert-success alert-sm">成功提示 (sm)</div>
+      <br />
+      <div class="message message-danger" style="position: static; transform: none; margin-top: 10px;">全局提示 (danger)
+      </div>
+    </div>
+    <!-- ==================== 进度条 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">进度条 .progress</div>
+      <div class="progress" style="width: 300px;">
+        <div class="progress_bar progress_bar-primary" style="width: 60%;"></div>
+      </div>
+      <br />
+      <div class="progress progress-sm" style="width: 200px;">
+        <div class="progress_bar progress_bar-success" style="width: 40%;"></div>
+      </div>
+    </div>
+    <!-- ==================== 加载中 / 骨架屏 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">加载中 .spinner / 骨架屏 .skeleton</div>
+      <div class="spinner spinner-primary"></div>
+      <div class="spinner spinner-sm spinner-success"></div>
+      <div class="skeleton" style="width: 200px; height: 20px; margin-top: 10px;"></div>
+    </div>
+    <!-- ==================== 面包屑 / 分页 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">面包屑 .breadcrumb / 分页 .pagination</div>
+      <ul class="breadcrumb">
+        <li class="breadcrumb_item"><a href="#" class="link">首页</a></li>
+        <li class="breadcrumb_item breadcrumb_item-primary">当前页</li>
+      </ul>
+      <div class="pagination">
+        <div class="pagination_item">1</div>
+        <div class="pagination_item pagination_item-primary active">2</div>
+        <div class="pagination_item">3</div>
+      </div>
+    </div>
+    <!-- ==================== 步骤条 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">步骤条 .steps / .step</div>
+      <div class="steps step-primary">
+        <div class="step step_active">
+          <div class="step_indicator">1</div>
+          <div>步骤1</div>
+        </div>
+        <div class="step">
+          <div class="step_indicator">2</div>
+          <div>步骤2</div>
+        </div>
+        <div class="step">
+          <div class="step_indicator">3</div>
+          <div>步骤3</div>
+        </div>
+      </div>
+    </div>
+    <!-- ==================== 表格 / 列表 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">表格 .table / 列表 .list</div>
+      <table class="table table-sm" style="width: 100%;">
+        <thead class="table_header">
+          <tr>
+            <th>姓名</th>
+            <th>年龄</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>张三</td>
+            <td>25</td>
+          </tr>
+          <tr>
+            <td>李四</td>
+            <td>30</td>
+          </tr>
+        </tbody>
+      </table>
+      <ul class="list">
+        <li class="list_item">列表项1</li>
+        <li class="list_item list_item-sm">小号列表项</li>
+      </ul>
+    </div>
+    <!-- ==================== 图片 / 图标 / 链接 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">图片 .img / 图标 .icon / 链接 .link</div>
+      <div class="demo_grid">
+        <img class="img img-sm"
+          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23ccc'/%3E%3C/svg%3E"
+          alt="demo">
+        <svg class="icon icon-primary" viewBox="0 0 24 24" width="24" height="24">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
+        </svg>
+        <a href="#" class="link link-primary">主色链接</a>
+        <a href="#" class="link link-success link-lg">大号成功链接</a>
+      </div>
+    </div>
+    <!-- ==================== 标题 / 段落 / 文本 / 代码 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">标题 .h* / 段落 .p / 文本 .text / 代码 .code</div>
+      <h2 class="h2 heading-primary">主色标题 H2</h2>
+      <p class="p p-sm">小号段落文本，用于展示小号文字。</p>
+      <p class="text text-danger">危险文本色</p>
+      <code class="code code-sm">const a = 1;</code>
+    </div>
+    <!-- ==================== 引用 / 图形 / 图形说明 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">引用 .blockquote / 图形 .figure / .figcaption</div>
+      <blockquote class="blockquote blockquote-primary">这是一个引用块，左边框为primary色。</blockquote>
+      <figure class="figure">
+        <img class="img img-sm"
+          src="https://gimg3.baidu.com/topone/src=https%3A%2F%2Fbkimg.cdn.bcebos.com%2Fsmart%2Fbf096b63f6246b60b6f5f809e4f81a4c500fa2d0-bkimg-process%2Cv_1%2Crw_1%2Crh_1%2Cmaxl_800%2Cpad_1%3Fx-bce-process%3Dimage%2Fresize%2Cm_pad%2Cw_348%2Ch_348%2Ccolor_ffffff&refer=http%3A%2F%2Fwww.baidu.com&app=2011&size=w931&n=0&g=0n&er=404&q=75&fmt=auto&maxorilen2heic=2000000?sec=1778691600&t=7be334182e27d453507218c7456d12f0"
+          alt="图形">
+        <figcaption class="figcaption figcaption-sm">图形说明文字</figcaption>
+      </figure>
+    </div>
+    <!-- ==================== 时间 / 地址 ==================== -->
+    <div class="demo_section">
+      <div class="demo_title">时间 .time / 地址 .address</div>
+      <div class="time time-sm">2025-03-20</div>
+      <address class="address address-lg">北京市朝阳区</address>
+    </div>
+  </div>
+</body>
+</html>