create-yoya-ui 0.1.2 → 0.2.0

package/templates/admin/src/features/dashboard/pages/dashboard-overview-page.js

@@ -0,0 +1,197 @@
+import { vGauge, vRingStat, vTimeline, vTrendCard, vstack } from '@yoyaflow/yoya-ui';
+import { DashboardChart } from '../components/dashboard-chart.js';
+
+const weekLabels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+
+export function DashboardOverviewPage() {
+  return {
+    render() {
+      return vstack({ gap: '16px' }, (stack) => {
+        stack.h2('数据概览');
+
+        stack.vCard((card) => {
+          card.vCardHeader('核心指标');
+          card.vCardBody((body) => {
+            body.vDigitalBoard((board) => {
+              board.columns(4);
+              board.vDigitalBoardItem((item) => {
+                item.label('服务总数');
+                item.value('128');
+                item.unit('个');
+                item.trend('+12 本月');
+                item.trendUp(true);
+                item.icon('🖥️');
+              });
+              board.vDigitalBoardItem((item) => {
+                item.label('运行中');
+                item.value('96');
+                item.unit('个');
+                item.trend('+8 本周');
+                item.trendUp(true);
+                item.tone('success');
+                item.icon('✅');
+              });
+              board.vDigitalBoardItem((item) => {
+                item.label('异常告警');
+                item.value('5');
+                item.unit('个');
+                item.trend('-2 今日');
+                item.trendUp(false);
+                item.tone('danger');
+                item.icon('⚠️');
+              });
+              board.vDigitalBoardItem((item) => {
+                item.label('平均响应');
+                item.value('243');
+                item.unit('ms');
+                item.trend('-18 今日');
+                item.trendUp(true);
+                item.tone('warning');
+                item.icon('⏱️');
+              });
+            });
+          });
+        });
+
+        stack.div((trends) => {
+          trends.style({
+            display: 'grid',
+            gap: '12px',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))'
+          });
+          trends.child(
+            vTrendCard({
+              data: [12, 15, 11, 18, 16, 21, 24],
+              delta: '+6.4%',
+              title: '今日请求',
+              tone: 'primary',
+              unit: 'k',
+              up: true,
+              value: '84.2'
+            })
+          );
+          trends.child(
+            vTrendCard({
+              data: [320, 290, 310, 270, 260, 248, 243],
+              delta: '-18 今日',
+              title: '平均响应',
+              tone: 'success',
+              unit: 'ms',
+              up: true,
+              value: '243'
+            })
+          );
+          trends.child(
+            vTrendCard({
+              data: [6, 7, 4, 3, 5, 2, 2],
+              delta: '-5 较昨日',
+              title: '故障次数',
+              tone: 'danger',
+              unit: '次',
+              up: false,
+              value: '2'
+            })
+          );
+        });
+
+        stack.div((charts) => {
+          charts.style({
+            display: 'grid',
+            gap: '12px',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))'
+          });
+          charts.child(
+            DashboardChart({
+              labels: weekLabels,
+              series: [{ name: '请求量', data: [62, 71, 58, 84, 92, 76, 88] }],
+              title: '近 7 日请求量',
+              type: 'bar'
+            })
+          );
+          charts.child(
+            DashboardChart({
+              labels: weekLabels,
+              series: [
+                { name: '错误数', data: [8, 12, 7, 15, 10, 6, 9], color: '#dc2626' },
+                { name: '恢复数', data: [6, 10, 5, 12, 8, 5, 8], color: '#16a34a' }
+              ],
+              title: '近 7 日错误与恢复',
+              type: 'line'
+            })
+          );
+        });
+
+        stack.div((bottom) => {
+          bottom.style({
+            display: 'grid',
+            gap: '12px',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))'
+          });
+          bottom.vCard((card) => {
+            card.vCardHeader('资源使用');
+            card.vCardBody((body) => {
+              body.hstack((row) => {
+                row.style({ flexWrap: 'wrap', gap: '20px' });
+                row.child(vRingStat({ label: '成功率', percent: 99, tone: 'success' }));
+                row.child(
+                  vRingStat({ label: '容量使用', percent: 68, tone: 'primary', value: '680 GB' })
+                );
+                row.div((box) => {
+                  box.style({ textAlign: 'center' });
+                  box.child(vGauge({ unit: '%', value: 72, tone: 'warning' }));
+                  box.p((text) => {
+                    text.style({ color: 'var(--yoya-color-text-muted, #64748b)', fontSize: '12px' });
+                    text.text('CPU 使用率');
+                  });
+                });
+                row.div((box) => {
+                  box.style({ textAlign: 'center' });
+                  box.child(vGauge({ unit: '%', value: 58, tone: 'primary' }));
+                  box.p((text) => {
+                    text.style({ color: 'var(--yoya-color-text-muted, #64748b)', fontSize: '12px' });
+                    text.text('内存使用率');
+                  });
+                });
+              });
+            });
+          });
+          bottom.vCard((card) => {
+            card.vCardHeader('最近动态');
+            card.vCardBody((body) => {
+              body.child(
+                vTimeline((timeline) => {
+                  timeline.vTimelineItem((item) => {
+                    item.status('success');
+                    item.title('服务发布成功');
+                    item.time('09:32 · 2026-09-01');
+                    item.content((box) =>
+                      box.p('api-gateway v2.4.1 已上线，金丝雀批次全部通过。')
+                    );
+                  });
+                  timeline.vTimelineItem((item) => {
+                    item.status('processing');
+                    item.title('滚动发布中');
+                    item.time('09:20 · 2026-09-01');
+                    item.content('web-console 正在按 5% 批次滚动。');
+                  });
+                  timeline.vTimelineItem((item) => {
+                    item.status('warning');
+                    item.title('容量预警');
+                    item.time('08:47 · 2026-09-01');
+                    item.content('redis 内存使用率接近 80%。');
+                  });
+                  timeline.vTimelineItem((item) => {
+                    item.status('danger');
+                    item.title('告警已恢复');
+                    item.time('08:15 · 2026-09-01');
+                    item.content('数据库连接池告警自动恢复。');
+                  });
+                })
+              );
+            });
+          });
+        });
+      });
+    }
+  };
+}

package/templates/admin/src/features/dicts/api/dict.mgr.d.ts

@@ -0,0 +1,79 @@
+/** 字典管理请求命令类型声明（对应 dict.mgr.js）。 */
+import { RequestBase } from '@yoyaflow/yoya-ui';
+import Dicts, { DictStatus } from './dict.views.js';
+
+type DictTypeInstance = InstanceType<typeof Dicts.DictTypeItem>;
+type DictItemInstance = InstanceType<typeof Dicts.DictItem>;
+
+declare class QueryTypes extends RequestBase {
+  address(): string;
+  toItem(row: Record<string, unknown>): DictTypeInstance;
+}
+
+declare class CreateType extends RequestBase {
+  constructor(init?: { name?: string; code?: string; status?: DictStatus; remark?: string });
+  method(): 'POST';
+  address(): string;
+  body(): { name: string; code: string; status: DictStatus; remark: string };
+}
+
+declare class UpdateType extends RequestBase {
+  constructor(
+    id: number,
+    init?: { name?: string; code?: string; status?: DictStatus; remark?: string }
+  );
+  method(): 'PUT';
+  address(): string;
+  body(): { name: string; code: string; status: DictStatus; remark: string };
+}
+
+declare class RemoveType extends RequestBase {
+  constructor(id: number);
+  method(): 'DELETE';
+  address(): string;
+}
+
+declare class QueryItems extends RequestBase {
+  constructor(typeId: number);
+  address(): string;
+  toItem(row: Record<string, unknown>): DictItemInstance;
+}
+
+declare class CreateItem extends RequestBase {
+  constructor(
+    typeId: number,
+    init?: { label?: string; value?: string; sort?: number; status?: DictStatus }
+  );
+  method(): 'POST';
+  address(): string;
+  body(): { label: string; value: string; sort: number; status: DictStatus };
+}
+
+declare class UpdateItem extends RequestBase {
+  constructor(
+    id: number,
+    init?: { label?: string; value?: string; sort?: number; status?: DictStatus }
+  );
+  method(): 'PUT';
+  address(): string;
+  body(): { label: string; value: string; sort: number; status: DictStatus };
+}
+
+declare class RemoveItem extends RequestBase {
+  constructor(id: number);
+  method(): 'DELETE';
+  address(): string;
+}
+
+declare const DictMgr: {
+  QueryTypes: typeof QueryTypes;
+  CreateType: typeof CreateType;
+  UpdateType: typeof UpdateType;
+  RemoveType: typeof RemoveType;
+  QueryItems: typeof QueryItems;
+  CreateItem: typeof CreateItem;
+  UpdateItem: typeof UpdateItem;
+  RemoveItem: typeof RemoveItem;
+};
+
+export default DictMgr;

package/templates/admin/src/features/dicts/api/dict.mgr.js

@@ -0,0 +1,160 @@
+// 字典管理请求命令：字典类型与字典项。
+import { RequestBase } from '@yoyaflow/yoya-ui';
+import Dicts from './dict.views.js';
+
+class QueryTypes extends RequestBase {
+  address() {
+    return '/dicts/types';
+  }
+
+  toItem(row) {
+    return new Dicts.DictTypeItem(row);
+  }
+}
+
+class CreateType extends RequestBase {
+  constructor({ name = '', code = '', status = 'active', remark = '' } = {}) {
+    super();
+    this.name = name;
+    this.code = code;
+    this.status = status;
+    this.remark = remark;
+  }
+
+  method() {
+    return 'POST';
+  }
+
+  address() {
+    return '/dicts/types';
+  }
+
+  body() {
+    return { name: this.name, code: this.code, status: this.status, remark: this.remark };
+  }
+}
+
+class UpdateType extends RequestBase {
+  constructor(id, { name = '', code = '', status = 'active', remark = '' } = {}) {
+    super();
+    this.id = id;
+    this.name = name;
+    this.code = code;
+    this.status = status;
+    this.remark = remark;
+  }
+
+  method() {
+    return 'PUT';
+  }
+
+  address() {
+    return `/dicts/types/${this.id}`;
+  }
+
+  body() {
+    return { name: this.name, code: this.code, status: this.status, remark: this.remark };
+  }
+}
+
+class RemoveType extends RequestBase {
+  constructor(id) {
+    super();
+    this.id = id;
+  }
+
+  method() {
+    return 'DELETE';
+  }
+
+  address() {
+    return `/dicts/types/${this.id}`;
+  }
+}
+
+class QueryItems extends RequestBase {
+  constructor(typeId) {
+    super();
+    this.typeId = typeId;
+  }
+
+  address() {
+    return `/dicts/types/${this.typeId}/items`;
+  }
+
+  toItem(row) {
+    return new Dicts.DictItem(row);
+  }
+}
+
+class CreateItem extends RequestBase {
+  constructor(typeId, { label = '', value = '', sort = 0, status = 'active' } = {}) {
+    super();
+    this.typeId = typeId;
+    this.label = label;
+    this.value = value;
+    this.sort = sort;
+    this.status = status;
+  }
+
+  method() {
+    return 'POST';
+  }
+
+  address() {
+    return `/dicts/types/${this.typeId}/items`;
+  }
+
+  body() {
+    return { label: this.label, value: this.value, sort: this.sort, status: this.status };
+  }
+}
+
+class UpdateItem extends RequestBase {
+  constructor(id, { label = '', value = '', sort = 0, status = 'active' } = {}) {
+    super();
+    this.id = id;
+    this.label = label;
+    this.value = value;
+    this.sort = sort;
+    this.status = status;
+  }
+
+  method() {
+    return 'PUT';
+  }
+
+  address() {
+    return `/dicts/items/${this.id}`;
+  }
+
+  body() {
+    return { label: this.label, value: this.value, sort: this.sort, status: this.status };
+  }
+}
+
+class RemoveItem extends RequestBase {
+  constructor(id) {
+    super();
+    this.id = id;
+  }
+
+  method() {
+    return 'DELETE';
+  }
+
+  address() {
+    return `/dicts/items/${this.id}`;
+  }
+}
+
+export default {
+  QueryTypes,
+  CreateType,
+  UpdateType,
+  RemoveType,
+  QueryItems,
+  CreateItem,
+  UpdateItem,
+  RemoveItem
+};

package/templates/admin/src/features/dicts/api/dict.mock.js

@@ -0,0 +1,81 @@
+// 字典演示用内存 mock（接入真实后端后删除本文件）。
+import { mockRequest } from '../../../api/domain.api.js';
+
+let types = [
+  { id: 1, name: '性别', code: 'gender', status: 'active', remark: '性别字典' },
+  { id: 2, name: '通用状态', code: 'common_status', status: 'active', remark: '通用启停状态' },
+  { id: 3, name: '通知类型', code: 'notice_type', status: 'active', remark: '消息通知类型' }
+];
+
+let items = [
+  { id: 11, typeId: 1, label: '男', value: 'male', sort: 1, status: 'active' },
+  { id: 12, typeId: 1, label: '女', value: 'female', sort: 2, status: 'active' },
+  { id: 21, typeId: 2, label: '启用', value: 'active', sort: 1, status: 'active' },
+  { id: 22, typeId: 2, label: '禁用', value: 'disabled', sort: 2, status: 'active' },
+  { id: 31, typeId: 3, label: '系统通知', value: 'system', sort: 1, status: 'active' },
+  { id: 32, typeId: 3, label: '告警', value: 'alert', sort: 2, status: 'active' },
+  { id: 33, typeId: 3, label: '私信', value: 'message', sort: 3, status: 'disabled' }
+];
+
+const delay = (ms = 200) => new Promise((resolve) => setTimeout(resolve, ms));
+
+mockRequest('GET', '/dicts/types', async () => {
+  await delay();
+  return { ok: true, code: '0', data: types.slice() };
+});
+
+mockRequest('POST', '/dicts/types', async (req) => {
+  await delay();
+  const type = { id: Math.max(0, ...types.map((item) => item.id)) + 1, ...req.body() };
+  types = [...types, type];
+  return { ok: true, code: '0', data: type };
+});
+
+mockRequest('PUT', /^\/dicts\/types\/\d+$/, async (req) => {
+  await delay();
+  const id = Number(req.address().split('/').pop());
+  const type = { ...types.find((item) => item.id === id), ...req.body(), id };
+  types = types.map((item) => (item.id === id ? type : item));
+  return { ok: true, code: '0', data: type };
+});
+
+mockRequest('DELETE', /^\/dicts\/types\/\d+$/, async (req) => {
+  await delay();
+  const id = Number(req.address().split('/').pop());
+  types = types.filter((item) => item.id !== id);
+  items = items.filter((item) => item.typeId !== id);
+  return { ok: true, code: '0', data: null };
+});
+
+mockRequest('GET', /^\/dicts\/types\/\d+\/items$/, async (req) => {
+  await delay();
+  const typeId = Number(req.address().split('/')[3]);
+  return {
+    ok: true,
+    code: '0',
+    data: items.filter((item) => item.typeId === typeId).sort((a, b) => a.sort - b.sort)
+  };
+});
+
+mockRequest('POST', /^\/dicts\/types\/\d+\/items$/, async (req) => {
+  await delay();
+  const typeId = Number(req.address().split('/')[3]);
+  const item = { id: Math.max(0, ...items.map((entry) => entry.id)) + 1, typeId, ...req.body() };
+  items = [...items, item];
+  return { ok: true, code: '0', data: item };
+});
+
+mockRequest('PUT', /^\/dicts\/items\/\d+$/, async (req) => {
+  await delay();
+  const id = Number(req.address().split('/').pop());
+  const item = { ...items.find((entry) => entry.id === id), ...req.body(), id };
+  items = items.map((entry) => (entry.id === id ? item : entry));
+  return { ok: true, code: '0', data: item };
+});
+
+mockRequest('DELETE', /^\/dicts\/items\/\d+$/, async (req) => {
+  await delay();
+  const id = Number(req.address().split('/').pop());
+  items = items.filter((entry) => entry.id !== id);
+  return { ok: true, code: '0', data: null };
+});

package/templates/admin/src/features/dicts/api/dict.state.d.ts

@@ -0,0 +1,23 @@
+/** 字典页状态类类型声明（对应 dict.state.js）。 */
+import Dicts from './dict.views.js';
+
+type DictTypeInstance = InstanceType<typeof Dicts.DictTypeItem>;
+type DictItemInstance = InstanceType<typeof Dicts.DictItem>;
+
+export default class DictsPageState {
+  constructor();
+  types(): DictTypeInstance[];
+  selectedTypeId(): number | null;
+  selectedType(): DictTypeInstance | null;
+  items(): DictItemInstance[];
+  subscribe(listener: () => void): () => void;
+  loadTypes(): Promise<unknown>;
+  selectType(id: number): void;
+  loadItems(): Promise<void>;
+  addType(payload: Record<string, unknown>): Promise<Record<string, unknown>>;
+  editType(id: number, payload: Record<string, unknown>): Promise<Record<string, unknown>>;
+  removeType(id: number): Promise<void>;
+  addItem(payload: Record<string, unknown>): Promise<Record<string, unknown>>;
+  editItem(id: number, payload: Record<string, unknown>): Promise<Record<string, unknown>>;
+  removeItem(id: number): Promise<void>;
+}

package/templates/admin/src/features/dicts/api/dict.state.js

@@ -0,0 +1,103 @@
+// 字典页状态类：字典类型 + 当前类型下的字典项。
+import DictMgr from './dict.mgr.js';
+
+export default class DictsPageState {
+  constructor() {
+    this._types = [];
+    this._selectedTypeId = null;
+    this._items = [];
+    this._listeners = new Set();
+  }
+
+  types() {
+    return this._types;
+  }
+
+  selectedTypeId() {
+    return this._selectedTypeId;
+  }
+
+  selectedType() {
+    return this._types.find((type) => type.id === this._selectedTypeId) ?? null;
+  }
+
+  items() {
+    return this._items;
+  }
+
+  subscribe(listener) {
+    this._listeners.add(listener);
+    return () => this._listeners.delete(listener);
+  }
+
+  async loadTypes() {
+    const result = await new DictMgr.QueryTypes().submit();
+    this._types = result.data;
+    if (!this._selectedTypeId && this._types.length > 0) {
+      this._selectedTypeId = this._types[0].id;
+    }
+    await this.loadItems();
+    this._emit();
+    return result;
+  }
+
+  async selectType(id) {
+    this._selectedTypeId = id;
+    await this.loadItems();
+    this._emit();
+    return this;
+  }
+
+  async loadItems() {
+    if (this._selectedTypeId === null) {
+      this._items = [];
+      return;
+    }
+    const result = await new DictMgr.QueryItems(this._selectedTypeId).submit();
+    this._items = result.data;
+  }
+
+  async addType(payload) {
+    await new DictMgr.CreateType(payload).submit();
+    await this.loadTypes();
+    return payload;
+  }
+
+  async editType(id, payload) {
+    await new DictMgr.UpdateType(id, payload).submit();
+    await this.loadTypes();
+    return payload;
+  }
+
+  async removeType(id) {
+    await new DictMgr.RemoveType(id).submit();
+    if (this._selectedTypeId === id) {
+      this._selectedTypeId = null;
+    }
+    await this.loadTypes();
+  }
+
+  async addItem(payload) {
+    await new DictMgr.CreateItem(this._selectedTypeId, payload).submit();
+    await this.loadItems();
+    this._emit();
+    return payload;
+  }
+
+  async editItem(id, payload) {
+    await new DictMgr.UpdateItem(id, payload).submit();
+    await this.loadItems();
+    this._emit();
+    return payload;
+  }
+
+  async removeItem(id) {
+    await new DictMgr.RemoveItem(id).submit();
+    await this.loadItems();
+    this._emit();
+  }
+
+  _emit() {
+    this._listeners.forEach((listener) => listener());
+  }
+}

package/templates/admin/src/features/dicts/api/dict.views.d.ts

@@ -0,0 +1,41 @@
+/** 字典结果结构类型声明（对应 dict.views.js）。 */
+export type DictStatus = 'active' | 'disabled';
+
+export class DictTypeItem {
+  id: number;
+  name: string;
+  code: string;
+  status: DictStatus;
+  remark: string;
+  constructor(init?: {
+    id: number;
+    name?: string;
+    code?: string;
+    status?: DictStatus;
+    remark?: string;
+  });
+}
+
+export class DictItem {
+  id: number;
+  typeId: number | null;
+  label: string;
+  value: string;
+  sort: number;
+  status: DictStatus;
+  constructor(init?: {
+    id: number;
+    typeId?: number | null;
+    label?: string;
+    value?: string;
+    sort?: number;
+    status?: DictStatus;
+  });
+}
+
+declare const Dicts: {
+  DictTypeItem: typeof DictTypeItem;
+  DictItem: typeof DictItem;
+};
+
+export default Dicts;