hexagone-frontend

Hexagone 前端文档——导航技能

此技能可让你访问以 GitLab Pages 发布的 Hexagone 前端组件文档（@his/hexa-components）。回答有关 Hexagone 前端组件、模式和约定的问题时，你的职责是获取并阅读相关文档文件。

什么是 Hexagone 前端文档

Hexagone 前端使用 Vue.js 2 构建，采用自定义组件库（@his/hexa-components）、beta-scss 实用类，以及用于状态管理的 Vuex 和 vuex-pathify。文档站点发布于：

https://erp-pas.gitlab-pages-erp-pas.dedalus.lan/hexagone/frontend/hexagone-documentation

该站点是单页应用（SPA），无法直接获取。请改用 GitLab 仓库中的原始 Markdown 文件；这些文件专为 LLM 使用进行了优化。

在以下情况使用此技能：

• 用户询问 Hexagone UI 组件（<btn>、<multiselect>、<data-table> 等）
• 用户需要 Hexagone 组件的属性、事件或用法示例
• 用户询问 beta-scss CSS 实用类（flex:6/12、p:1、m:1 等）
• 用户询问 Vuex store 模块（user、session、environment、navigation 等）
• 用户询问 API 工具（Api()、StandardApi()）
• 用户询问自定义指令（v-focus、v-uppercase）
• 用户询问 Hexagone 中的表单验证规则或表单模式
• 用户正在构建或修改 Hexagone Web 前端视图/空间
• 任何同时提及“Hexagone”和“component”、“composant”、“frontend”、“Vue”、“template”、“formulaire”或“interface”的问题

关键约定

IMPORTANT：Hexagone 使用自定义标签名。绝不要为这些组件使用标准 HTML 标签。

标准 HTML	Hexagone 对应项	文档文件
<button>	<btn>	components/button.md
<select>	<multiselect>	components/select.md
<table>	<data-table>	components/datatable.md
<input type="checkbox">	<checkbox>	components/checkbox.md

关键规则：

• 所有组件都已全局注册——模板中无需导入
• 表单字段必须放在 <div class="input-field"><label for="id">Label</label></div> 中
• 使用 beta-scss 实用类：flex、flex:wrap、flex:6/12、p:1、m:1 等
• 通过 vuex-pathify 访问 store：this.$store.get('module/path') 和 this.$store.set('module/path', value)
• 库：@his/hexa-components，框架：Vue.js 2

文档目录

原始文件可在以下位置获取：

BASE_RAW_URL = https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/raw/master/docs/llm/

组件（36 个组件）

表单和输入

组件	标签	文件路径
输入框	<input> + wrapper	components/input.md
文本区域	<textarea> + wrapper	components/textarea.md
数字	<number>	components/number.md
货币	<currency>	components/currency.md
选择框	<multiselect>	components/select.md
自动补全	<autocomplete>	components/autocomplete.md
复选框	<checkbox>	components/checkbox.md
单选框	<radio>	components/radio.md
按钮开关	<btn-switch>	components/button-switch.md
日期选择器	<datepicker>	components/datepicker.md
时间选择器	<timepicker>	components/timepicker.md
颜色选择器	<colorpicker>	components/colorpicker.md
文件	<file>	components/file.md
IBAN	<iban>	components/iban.md
BIC	<bic>	components/bic.md
Radical	<radical>	components/radical.md

导航与操作

组件	标签	文件路径
Button	<btn>	components/button.md
ButtonGroup	<btn-group>	components/button-group.md
FloatingButton	<floating-btn>	components/floating-button.md
Action	<action>	components/action.md
Link	<link>	components/link.md
Bookmark	<bookmark>	components/bookmark.md
Tabs	<tabs>	components/tabs.md
Steps	<steps>	components/steps.md

数据展示

组件	标签	文件路径
DataTable	<data-table>	components/datatable.md
SimpleTable	<simple-table>	components/simple-table.md
Card	<card>	components/card.md
ProgressBar	<progress-bar>	components/progress-bar.md

用户反馈

组件	标签	文件路径
Alert	<alert>	components/alert.md
Modal	<modal>	components/modal.md
Notification	$notification()	components/notification.md
Question	<question>	components/question.md
Tooltips	<tooltips>	components/tooltips.md
PostIt	<post-it>	components/post-it.md
Spinner	<spinner>	components/spinner.md

布局

组件	标签	文件路径
Collapsible	<collapsible>	components/collapsible.md

模式

主题	文件路径	描述
API 工具	patterns/api.md	用于 Web 服务调用的 Api(url, options) 和 StandardApi(USP)
Store（Vuex）	patterns/store.md	使用 vuex-pathify 的 Vuex store，包含共享模块（user、session 等）

参考

主题	文件路径	描述
指令	reference/directives.md	v-uppercase、v-focus 自定义指令
事件	reference/events.md	鼠标和键盘事件处理
表单规则	reference/form-rules.md	验证规则、必填字段、@is-valid 模式

标签到文件快速查找

用户提到组件标签时，可使用此表快速查找要获取的文件：

标签模式	文件
<btn>、button	components/button.md
<btn-group>	components/button-group.md
<btn-switch>	components/button-switch.md
<floating-btn>	components/floating-button.md
<multiselect>、select	components/select.md
<data-table>、datatable、table	components/datatable.md
<simple-table>	components/simple-table.md
<datepicker>、date	components/datepicker.md
<timepicker>、time、heure	components/timepicker.md
<checkbox>	components/checkbox.md
<radio>	components/radio.md
<autocomplete>	components/autocomplete.md
<modal>、modale	components/modal.md
<alert>、alerte	components/alert.md
<notification>、$notification	components/notification.md
<question>	components/question.md
<card>、carte	components/card.md
<collapsible>	components/collapsible.md
<tabs>、onglets	components/tabs.md
<steps>、etapes	components/steps.md
<spinner>、loading	components/spinner.md
<currency>、montant	components/currency.md
<iban>	components/iban.md
<bic>	components/bic.md
<number>、nombre	components/number.md
<input>、champ texte	components/input.md
<textarea>	components/textarea.md
<file>、upload	components/file.md
<radical>	components/radical.md
<colorpicker>、couleur	components/colorpicker.md
<action>	components/action.md
<link>、lien	components/link.md
<bookmark>、signet	components/bookmark.md
<post-it>	components/post-it.md
<progress-bar>	components/progress-bar.md
<tooltips>、infobulle	components/tooltips.md

CSS 实用类（beta-scss）

这些类无需获取任何文件即可使用——直接使用即可：

类	说明
flex	显示为 flex
flex:wrap	Flex 换行
flex:col	Flex 方向为列
flex:X/12	分数宽度（例如，flex:6/12 = 50%）
p:1	内边距 1rem
m:1	外边距 1rem
pt:1、pr:1、pb:1、pl:1	各方向内边距
mt:1、mr:1、mb:1、ml:1	各方向外边距
text:bold	字体粗细为粗体
text:center	文本居中对齐
bg:grey-light	浅灰色背景
border	标准边框
rounded:1/2	圆角半径
w:full	宽度 100%

图标

使用 <icon> 组件并指定图标名称：

<icon>checked</icon>
<icon>close</icon>
<icon>search</icon>
<icon>edit</icon>

图标来自 @his/fonts-icons。

如何回答问题

第 1 步：识别相关文件

使用上方的表格，将用户的问题映射到一个或多个文档文件：

• 具体组件标签（例如，<btn>、<multiselect>）--> 使用标签到文件查找表
• 组件名称（例如，“datatable”、“datepicker”）--> 在组件目录中查找
• Store / 状态管理 --> 获取 patterns/store.md
• API / Web 服务调用 --> 获取 patterns/api.md
• 指令（v-focus、v-uppercase）--> 获取 reference/directives.md
• 表单验证 / 必填字段 --> 获取 reference/form-rules.md
• 事件（点击、键盘）--> 获取 reference/events.md
• CSS 类 --> 使用上方的 CSS 实用类表（无需获取文件）
• 图标 --> 使用上方的图标部分（无需获取文件）
• 一般性的“列出所有组件” --> 使用上方的目录（无需获取文件）

步骤 2：获取文件

使用 WebFetch 从 GitLab 获取原始 Markdown 文件：

WebFetch: url="${BASE_RAW_URL}<file-path>" prompt="Return the full content of this markdown file"

例如：

• Button 组件：WebFetch: url="https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/raw/master/docs/llm/components/button.md" prompt="Return the full content"
• Store 模式：WebFetch: url="https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/raw/master/docs/llm/patterns/store.md" prompt="Return the full content"

仅获取所需的文件。 不要一次性获取所有文件。

如果 WebFetch 失败（网络错误、超时），请告知用户 GitLab 实例无法访问，并建议他们：

1. 直接访问文档网站：https://erp-pas.gitlab-pages-erp-pas.dedalus.lan/hexagone/frontend/hexagone-documentation
2. 浏览源代码仓库：https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation/-/tree/master/docs/llm

步骤 3：提取并呈现答案

获取文件后，提取相关信息：

1. 针对特定组件： 提供 props 表、事件表和用法示例
2. 针对模式： 提供 API/函数签名、选项和示例
3. 针对参考主题： 提供相关规则、表格或指令

清晰地呈现信息，并保留原有结构（props 表、事件表、代码示例）。

步骤 4：必要时交叉引用

如果用户的问题涉及多个主题（例如，“如何构建带有日期选择器和验证的表单？”），请获取多个文件，并整理出连贯的答案，展示如何组合这些组件。

回复指南

呈现组件文档时，请使用以下结构：

## <ComponentName> (`<tag-name>`)

**Library:** @his/hexa-components
**Source:** [file URL]

### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|

### Events
| Event | Description |
|-------|-------------|

### Example
[Code example from the documentation]

重要规则

1. 始终从 GitLab 仓库获取内容——切勿根据记忆或关于 Vue.js 组件的一般知识作答。Hexagone 有特定约定（自定义标签、beta-scss、vuex-pathify），与标准 Vue.js 模式不同。

2. 呈现信息时引用源文件：始终注明信息来自哪个文档文件。

3. 不要编造 props、事件或组件行为——如果获取的文件中没有相关信息，请明确说明。不要猜测或推断。

4. 遵循 Hexagone 约定：

   • 使用 <btn> 而不是 <button>，使用 <multiselect> 而不是 <select>，使用 <data-table> 而不是 <table>
   • 将表单字段放在 <div class="input-field"> 中
   • 使用 beta-scss 工具类，而不是自定义 CSS
   • 使用 this.$store.get() / this.$store.set() 访问 store

5. 妥善处理缺失的文档——如果某个组件没有文档，请告知用户，并建议他们查看 hexagone-documentation 网站，或在仓库中提出 issue：https://gitlab-erp-pas.dedalus.lan/erp-pas/hexagone/frontend/hexagone-documentation。

6. 与 hexagone-swdoc 交叉引用——如果问题涉及从前端视图调用 Hexagone 后端 Web 服务，请建议使用 hexagone-swdoc 技能查看 API 契约详情，并使用此技能中的 Api() / StandardApi() 工具了解前端调用模式。

7. 始终遵循以下表单字段模式：

   <div class="input-field">
     <label for="myField">My Label</label>
     
   </div>
   

8. 选项少于 6 个时，使用 <btn-group> 而不是 <multiselect>——这样可以避免多一次点击，并直接显示所有选项。