u
This commit is contained in:
oneao committed
1 parent
78eb811ff7
commit
97fe2ff306
83 files changed
+10083
-3662
No files matched your search
@@ -1,7 +1,6 @@
|
||||
import { createApp, reactive, ref } from 'vue'
|
||||
import { Plus, Search, Settings } from '@lucide/vue'
|
||||
import {
|
||||
G3Attachment,
|
||||
G3Button,
|
||||
G3ButtonGroup,
|
||||
G3ButtonGroupSeparator,
|
||||
@@ -35,6 +34,7 @@ import {
|
||||
G3Splitter,
|
||||
G3SplitterPanel,
|
||||
G3Switch,
|
||||
G3Table,
|
||||
G3TabPane,
|
||||
G3Tabs,
|
||||
G3Tag,
|
||||
@@ -42,7 +42,6 @@ import {
|
||||
G3Tooltip,
|
||||
G3Tree,
|
||||
} from '@g3soft/ui'
|
||||
import type { AttachmentCategory, AttachmentItem } from '@g3soft/ui'
|
||||
import '@g3soft/tokens'
|
||||
|
||||
/**
|
||||
@@ -74,7 +73,6 @@ const LONG_TEXT = Array.from({ length: 40 }, (_, index) => `第 ${index + 1} 行
|
||||
|
||||
const App = {
|
||||
components: {
|
||||
G3Attachment,
|
||||
G3Button,
|
||||
G3ButtonGroup,
|
||||
G3ButtonGroupSeparator,
|
||||
@@ -106,6 +104,7 @@ const App = {
|
||||
G3Splitter,
|
||||
G3SplitterPanel,
|
||||
G3Switch,
|
||||
G3Table,
|
||||
G3TabPane,
|
||||
G3Tabs,
|
||||
G3Tag,
|
||||
@@ -193,26 +192,50 @@ const App = {
|
||||
})
|
||||
}
|
||||
|
||||
/* ---- Attachment 附件管理器 ---- */
|
||||
const attachmentFiles = ref<AttachmentItem[]>([
|
||||
{ id: 1, name: '2026年度框架合同.pdf', size: 512_000, categoryId: 'contract' },
|
||||
{ id: 2, name: '供应商报价明细.xlsx', size: 86_000, categoryId: 'invoice' },
|
||||
{ id: 3, name: '现场照片.jpg', size: 1_240_000, categoryId: 'photo' },
|
||||
{ id: 4, name: '验收纪要.docx', size: 24_000, categoryId: 'contract' },
|
||||
{ id: 5, name: '进度汇报.pptx', size: 640_000, categoryId: 'photo' },
|
||||
{ id: 6, name: '现场记录.zip', size: 8_192_000, categoryId: 'invoice' },
|
||||
/* ---- Table 表格 ---- */
|
||||
// 小数据量：用于验证「行数 ≤ 100 时关闭虚拟滚动」的门控
|
||||
// 注意必须是 ref：模板里 v-model:columns 要能回写，否则拖列宽无处落库（松手回弹）
|
||||
const tableColumns = ref([
|
||||
{ dataIndex: 'name', title: '名称', width: 180 },
|
||||
{ dataIndex: 'amount', title: '金额', width: 120, align: 'right' },
|
||||
{ dataIndex: 'status', title: '状态', width: 110, editor: { type: 'select', options: [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '停用', value: 0 },
|
||||
] } },
|
||||
{ dataIndex: 'enabled', title: '启用', width: 80, editor: { type: 'checkbox' } },
|
||||
{ dataIndex: 'remark', title: '备注', editor: { type: 'text' } },
|
||||
{ dataIndex: 'op', title: '操作', width: 140, resizable: false, actions: [
|
||||
{ label: '编辑', onClick: () => {} },
|
||||
{ label: '删除', type: 'danger', confirm: '确认删除该行？', onClick: () => {} },
|
||||
] },
|
||||
])
|
||||
const attachmentCategories: AttachmentCategory[] = [
|
||||
{ id: 'contract', name: '合同文件' },
|
||||
{ id: 'invoice', name: '发票凭证' },
|
||||
{ id: 'photo', name: '现场照片' },
|
||||
const tableData = ref([
|
||||
{ id: 1, name: '合同 A', amount: 12000, status: 1, enabled: 1, remark: '已归档' },
|
||||
{ id: 2, name: '合同 B', amount: 8600, status: 0, enabled: 0, remark: '' },
|
||||
{ id: 3, name: '合同 C', amount: 43000, status: 1, enabled: 1, remark: '待复核' },
|
||||
])
|
||||
const tableSelectedKeys = ref([])
|
||||
|
||||
// 大数据量：用于验证虚拟滚动真的开启
|
||||
const bigTableColumns = [
|
||||
{ dataIndex: 'id', title: 'ID', width: 80 },
|
||||
{ dataIndex: 'name', title: '名称', width: 200 },
|
||||
{ dataIndex: 'value', title: '数值', width: 140, align: 'right' },
|
||||
]
|
||||
const bigTableData = Array.from({ length: 5000 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
name: `记录 ${i + 1}`,
|
||||
value: (i + 1) * 7,
|
||||
}))
|
||||
|
||||
return {
|
||||
attachmentFiles,
|
||||
attachmentCategories,
|
||||
rtl,
|
||||
toggleRtl,
|
||||
tableColumns,
|
||||
tableData,
|
||||
tableSelectedKeys,
|
||||
bigTableColumns,
|
||||
bigTableData,
|
||||
model,
|
||||
tab,
|
||||
seg,
|
||||
@@ -478,27 +501,6 @@ const App = {
|
||||
<G3RichText v-model="richHtml" data-testid="rich-text" placeholder="请输入正文…" />
|
||||
</section>
|
||||
|
||||
<section id="s-attachment">
|
||||
<h2>Attachment 附件管理器</h2>
|
||||
<!-- 根节点是单元素 div，data-testid 直接落在组件上即可 -->
|
||||
<G3Attachment
|
||||
data-testid="attachment"
|
||||
:files="attachmentFiles"
|
||||
:categories="attachmentCategories"
|
||||
:height="420"
|
||||
/>
|
||||
<!-- 窄实例：分类栏 200 + 分割条 10 之后列表只剩 ~210px，
|
||||
压到一行的极限（工具栏必须裁切 / 省略，而不是长高）-->
|
||||
<div style="width: 420px; margin-top: 12px">
|
||||
<G3Attachment
|
||||
data-testid="attachment-narrow"
|
||||
:files="attachmentFiles"
|
||||
:categories="attachmentCategories"
|
||||
:height="360"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="s-feedback">
|
||||
<h2>Modal / Drawer / Message / Notification</h2>
|
||||
<div class="row">
|
||||
@@ -525,6 +527,41 @@ const App = {
|
||||
<G3Select v-model="model.role" :options="roleOptions" data-testid="drawer-select" placeholder="抽屉内选择" />
|
||||
</G3Drawer>
|
||||
</section>
|
||||
|
||||
<section id="s-table">
|
||||
<h2>Table 表格</h2>
|
||||
|
||||
<!-- 小数据量（3 行）：行数 ≤ 100，纵向虚拟滚动应当关闭 -->
|
||||
<div data-testid="table-wrap" style="height: 320px">
|
||||
<G3Table
|
||||
data-testid="table"
|
||||
v-model:columns="tableColumns"
|
||||
:data-source="tableData"
|
||||
:row-selection="{ selectedRowKeys: tableSelectedKeys, onChange: (keys) => (tableSelectedKeys = keys) }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 大数据量（5000 行）：纵向虚拟滚动应当开启；容器限高以产生滚动 -->
|
||||
<div data-testid="table-big-wrap" style="height: 360px; margin-top: 16px">
|
||||
<G3Table
|
||||
data-testid="table-big"
|
||||
:columns="bigTableColumns"
|
||||
:data-source="bigTableData"
|
||||
:seq="false"
|
||||
:row-height="30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 窄容器：验证列宽铺满与省略号 -->
|
||||
<div data-testid="table-narrow-wrap" style="width: 480px; height: 240px; margin-top: 16px">
|
||||
<G3Table
|
||||
data-testid="table-narrow"
|
||||
:columns="tableColumns"
|
||||
:data-source="tableData"
|
||||
:seq="false"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user