@morningfast/create-ui 0.0.9 → 0.0.11

package/dist/templates/main-app/env.d.ts

@@ -9,6 +9,7 @@ declare module '*.vue' {
 
 interface ImportMetaEnv {
   readonly VITE_API_BASE_URL?: string
+  readonly VITE_USE_MOCK?: string
   readonly VITE_PROXY_TARGET?: string
 }
 

package/dist/templates/main-app/package.json

@@ -18,8 +18,9 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
-    "@morningfast/platform": "^0.0.9",
+    "@morningfast/platform": "^0.0.11",
     "axios": "^1.16.0",
+    "echarts": "^6.1.0",
     "element-plus": "^2.14.0",
     "localforage": "^1.10.0",
     "morningfast-plus": "^1.1.0",

package/dist/templates/main-app/src/pages/dashboard/Workplace.vue

@@ -1,79 +1,770 @@
 <!--
-  业务首页示例，可删除或改造成项目真实首页。
+  主应用业务首页示例，可删除或改造成项目真实首页。
   这里演示页面如何调用 `src/stores/workplace.ts`，再由 store 调用当前页面目录的 `api.ts`。
 -->
 <template>
-  <div class="page">
-    <div class="page__header">
+  <div class="portal-page">
+    <header class="portal-header">
       <div>
-        <h2 class="page__title">首页</h2>
-        <p class="page__subtitle">这一页用于承接内部管理系统的首页概览、待办提醒和常用入口。</p>
+        <h2 class="portal-header__title">主应用运营门户</h2>
+        <p class="portal-header__subtitle">聚合待办、数据环比、和常用工作入口。</p>
       </div>
-    </div>
+      <div class="portal-header__status">
+        <el-tag effect="light" type="success">主应用运行中</el-tag>
+        <el-tag effect="plain">3 个图表</el-tag>
+      </div>
+    </header>
 
-    <el-row v-loading="workplaceStore.loading" :gutter="16" class="stat-grid">
-      <el-col v-for="item in workplaceStore.metrics" :key="item.label" :xs="12" :sm="12" :md="6">
-        <el-card shadow="hover" class="stat-card">
-          <span class="stat-card__label">{{ item.label }}</span>
-          <strong class="stat-card__value">{{ item.value }}</strong>
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="16">
-      <el-col :xs="24" :lg="16">
-        <el-card shadow="never">
-          <template #header>
-            <div class="block-header">
-              <strong>项目建议推进项</strong>
-              <span>先做结构和能力层，后续直接替换视觉规范</span>
-            </div>
-          </template>
-
-          <el-timeline>
-            <el-timeline-item timestamp="阶段 1" type="primary">
-              路由、布局、登录态、权限占位、请求层
-            </el-timeline-item>
-            <el-timeline-item timestamp="阶段 2" type="success">
-              列表页模板、表单模板、字典管理和基础组件沉淀
-            </el-timeline-item>
-            <el-timeline-item timestamp="阶段 3" type="warning">
-              按项目设计规范覆盖样式，并逐步接入真实接口
-            </el-timeline-item>
-          </el-timeline>
-        </el-card>
-      </el-col>
-
-      <el-col :xs="24" :lg="8">
-        <el-card shadow="never">
-          <template #header>
-            <div class="block-header">
-              <strong>常用入口</strong>
-              <span>后续可以替换成卡片路由导航</span>
-            </div>
-          </template>
+    <div ref="widgetGridRef" class="dashboard-grid">
+      <section
+        v-for="widget in portalWidgets"
+        :key="widget.id"
+        class="portal-panel dashboard-widget"
+        :class="[
+          `dashboard-widget--${widget.id}`,
+          { 'dashboard-widget--wide': widget.size === 'wide' },
+          { 'dashboard-widget--full': widget.size === 'full' },
+        ]"
+      >
+        <div class="panel-header widget-drag-handle" title="拖拽调整模块位置">
+          <div>
+            <strong>{{ widget.title }}</strong>
+            <span>{{ widget.subtitle }}</span>
+          </div>
+        </div>
 
-          <div class="shortcut-grid">
-            <div v-for="item in workplaceStore.shortcuts" :key="item.title" class="shortcut-item">
-              {{ item.title }}
+        <div v-if="widget.id === 'metrics'" v-loading="workplaceStore.loading" class="metric-grid">
+          <div
+            v-for="item in metricCards"
+            :key="item.label"
+            class="metric-card"
+            :style="{ '--accent-color': item.color }"
+          >
+            <div class="metric-card__icon">
+              <el-icon>
+                <component :is="item.icon" />
+              </el-icon>
             </div>
+            <span class="metric-card__label">{{ item.label }}</span>
+            <strong class="metric-card__value">{{ item.value }}</strong>
+            <span class="metric-card__hint">{{ item.hint }}</span>
           </div>
-        </el-card>
-      </el-col>
-    </el-row>
+        </div>
+
+        <div v-else-if="widget.id === 'trend'" class="chart chart--trend chart--large" />
+
+        <div v-else-if="widget.id === 'apps'" class="chart chart--apps" />
+
+        <div v-else-if="widget.id === 'radar'" class="chart chart--radar" />
+
+        <el-timeline v-else-if="widget.id === 'timeline'" class="portal-timeline">
+          <el-timeline-item timestamp="阶段 1" type="primary">
+            路由、布局、登录态、权限占位、请求层
+          </el-timeline-item>
+          <el-timeline-item timestamp="阶段 2" type="success">
+            列表页模板、表单模板、字典管理和基础组件沉淀
+          </el-timeline-item>
+          <el-timeline-item timestamp="阶段 3" type="warning">
+            按项目设计规范覆盖样式，并逐步接入真实接口
+          </el-timeline-item>
+        </el-timeline>
+
+        <div v-else-if="widget.id === 'shortcuts'" class="shortcut-grid">
+          <button
+            v-for="item in shortcutCards"
+            :key="item.title"
+            class="shortcut-item"
+            type="button"
+          >
+            <span class="shortcut-item__icon" :style="{ '--accent-color': item.color }">
+              <el-icon>
+                <component :is="item.icon" />
+              </el-icon>
+            </span>
+            <span>{{ item.title }}</span>
+          </button>
+        </div>
+      </section>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import { GridComponent, LegendComponent, RadarComponent, TooltipComponent } from 'echarts/components';
+import { init, use, type EChartsType } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import {
+  Bell,
+  Collection,
+  Finished,
+  Menu,
+  Operation,
+  Setting,
+  User,
+  Warning,
+} from '@element-plus/icons-vue';
+import {
+  getPersistedValue,
+  setPersistedValue,
+  useSortable,
+} from '@morningfast/platform/main';
 
 import { useWorkplaceStore } from '@/stores';
 
+use([
+  BarChart,
+  CanvasRenderer,
+  GridComponent,
+  LegendComponent,
+  LineChart,
+  PieChart,
+  RadarChart,
+  RadarComponent,
+  TooltipComponent,
+]);
+
 const workplaceStore = useWorkplaceStore();
 
-onMounted(() => {
+const widgetGridRef = ref<HTMLDivElement>();
+
+let trendChart: EChartsType | undefined;
+let appChart: EChartsType | undefined;
+let radarChart: EChartsType | undefined;
+let resizeObserver: ResizeObserver | undefined;
+
+type WidgetId = 'metrics' | 'trend' | 'apps' | 'radar' | 'timeline' | 'shortcuts';
+
+interface PortalWidget {
+  id: WidgetId;
+  size?: 'full' | 'wide';
+  subtitle: string;
+  title: string;
+}
+
+const WIDGET_ORDER_STORAGE_KEY = 'dashboard:portal-widget-order';
+const METRIC_ORDER_STORAGE_KEY = 'dashboard:portal-metric-order';
+
+const defaultWidgets: PortalWidget[] = [
+  {
+    id: 'metrics',
+    size: 'full',
+    subtitle: '按个人关注顺序展示核心待办',
+    title: '关键指标',
+  },
+  {
+    id: 'trend',
+    size: 'wide',
+    subtitle: '主应用视角下的访问、任务和告警走势',
+    title: '业务活跃趋势',
+  },
+  {
+    id: 'apps',
+    subtitle: '按当前处理阶段查看工作量占比',
+    title: '待办状态分布',
+  },
+  {
+    id: 'radar',
+    subtitle: '模板当前能力成熟度',
+    title: '平台能力雷达',
+  },
+  {
+    id: 'timeline',
+    subtitle: '先做结构和能力层，再接业务规范',
+    title: '项目建议推进项',
+  },
+  {
+    id: 'shortcuts',
+    subtitle: '后续替换成真实菜单路由导航',
+    title: '常用入口',
+  },
+];
+
+const portalWidgets = ref(sortByStoredOrder(defaultWidgets, [], (item) => item.id));
+const metricOrder = ref<string[]>([]);
+
+const { init: initWidgetSortable } = useSortable({
+  animation: 180,
+  chosenClass: 'dashboard-widget--chosen',
+  direction: 'horizontal',
+  dragClass: 'dashboard-widget--dragging',
+  draggable: '.dashboard-widget',
+  ghostClass: 'dashboard-widget--ghost',
+  handle: '.widget-drag-handle',
+  onEnd: (oldIndex, newIndex) => {
+    moveItem(portalWidgets.value, oldIndex, newIndex);
+    persistWidgetOrder();
+    void resetCharts();
+  },
+  swapThreshold: 1,
+});
+
+const { init: initMetricSortable } = useSortable({
+  animation: 160,
+  chosenClass: 'metric-card--chosen',
+  direction: 'horizontal',
+  dragClass: 'metric-card--dragging',
+  draggable: '.metric-card',
+  ghostClass: 'metric-card--ghost',
+  onEnd: (oldIndex, newIndex) => {
+    moveItem(metricOrder.value, oldIndex, newIndex);
+    persistMetricOrder();
+  },
+  swapThreshold: 1,
+});
+
+const metricMeta = [
+  { color: '#2f6fed', hint: '较昨日 +18%', icon: Bell },
+  { color: '#16a085', hint: '已收敛 7 项', icon: Warning },
+  { color: '#8e44ad', hint: '今日完成 11 项', icon: Finished },
+  { color: '#d35400', hint: '2 项等待确认', icon: Operation },
+];
+
+const shortcutMeta = [
+  { color: '#2f6fed', icon: User },
+  { color: '#16a085', icon: Menu },
+  { color: '#8e44ad', icon: Collection },
+  { color: '#d35400', icon: Setting },
+];
+
+const resolvedMetrics = computed(() =>
+  workplaceStore.metrics.map((item, index) => ({
+    ...item,
+    ...metricMeta[index % metricMeta.length],
+  })),
+);
+
+const metricCards = computed(() =>
+  sortByStoredOrder(resolvedMetrics.value, metricOrder.value, (item) => item.label),
+);
+
+const shortcutCards = computed(() =>
+  workplaceStore.shortcuts.map((item, index) => ({
+    ...item,
+    ...shortcutMeta[index % shortcutMeta.length],
+  })),
+);
+
+function sortByStoredOrder<T>(items: T[], storedOrder: string[], getKey: (item: T) => string) {
+  const orderedSet = new Set(storedOrder);
+  const itemMap = new Map(items.map((item) => [getKey(item), item]));
+  const sorted = storedOrder.flatMap((id) => {
+    const item = itemMap.get(id);
+    return item ? [item] : [];
+  });
+  const rest = items.filter((item) => !orderedSet.has(getKey(item)));
+
+  return [...sorted, ...rest];
+}
+
+function sortStringOrder(items: string[], storedOrder: string[]) {
+  const itemSet = new Set(items);
+  const sorted = storedOrder.filter((item) => itemSet.has(item));
+  const orderedSet = new Set(storedOrder);
+  const rest = items.filter((item) => !orderedSet.has(item));
+
+  return [...sorted, ...rest];
+}
+
+function moveItem<T>(items: T[], oldIndex: number, newIndex: number) {
+  if (oldIndex === newIndex) {
+    return;
+  }
+
+  const [item] = items.splice(oldIndex, 1);
+  if (!item) {
+    return;
+  }
+
+  items.splice(newIndex, 0, item);
+}
+
+async function loadWidgetOrder() {
+  const storedOrder = await getPersistedValue<string[]>(WIDGET_ORDER_STORAGE_KEY, []);
+  portalWidgets.value = sortByStoredOrder(defaultWidgets, normalizeStringArray(storedOrder), (item) => item.id);
+}
+
+async function loadMetricOrder() {
+  const storedOrder = await getPersistedValue<string[]>(METRIC_ORDER_STORAGE_KEY, []);
+  metricOrder.value = normalizeStringArray(storedOrder);
+}
+
+function normalizeStringArray(value: unknown) {
+  return Array.isArray(value) ? value.filter((item): item is string => typeof item === 'string') : [];
+}
+
+function persistWidgetOrder() {
+  void setPersistedValue(
+    WIDGET_ORDER_STORAGE_KEY,
+    portalWidgets.value.map((item) => item.id),
+  );
+}
+
+function persistMetricOrder() {
+  void setPersistedValue(METRIC_ORDER_STORAGE_KEY, metricOrder.value);
+}
+
+function getPortalElement(selector: string) {
+  return widgetGridRef.value?.querySelector<HTMLElement>(selector) ?? null;
+}
+
+function syncMetricOrder() {
+  const currentLabels = workplaceStore.metrics.map((item) => item.label);
+  metricOrder.value = sortStringOrder(currentLabels, metricOrder.value);
+  persistMetricOrder();
+}
+
+async function resetCharts() {
+  disposeCharts();
+  await nextTick();
+  setupCharts();
+}
+
+function setupCharts() {
+  const trendChartElement = getPortalElement('.chart--trend');
+  const appChartElement = getPortalElement('.chart--apps');
+  const radarChartElement = getPortalElement('.chart--radar');
+
+  if (!trendChartElement || !appChartElement || !radarChartElement) {
+    return;
+  }
+
+  trendChart = init(trendChartElement);
+  appChart = init(appChartElement);
+  radarChart = init(radarChartElement);
+
+  trendChart.setOption({
+    color: ['#2f6fed', '#16a085', '#f39c12'],
+    grid: { bottom: 28, left: 36, right: 20, top: 36 },
+    legend: { right: 12, top: 0, textStyle: { color: '#667085' } },
+    tooltip: { trigger: 'axis' },
+    xAxis: {
+      boundaryGap: false,
+      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+      type: 'category',
+      axisLine: { lineStyle: { color: '#d0d5dd' } },
+      axisLabel: { color: '#667085' },
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: '#eef2f6' } },
+      axisLabel: { color: '#667085' },
+    },
+    series: [
+      {
+        areaStyle: { opacity: 0.12 },
+        data: [132, 154, 181, 176, 224, 238, 265],
+        name: '访问量',
+        smooth: true,
+        symbolSize: 7,
+        type: 'line',
+      },
+      {
+        data: [28, 36, 42, 39, 51, 56, 64],
+        name: '任务数',
+        smooth: true,
+        symbolSize: 7,
+        type: 'line',
+      },
+      {
+        barWidth: 10,
+        data: [6, 5, 9, 4, 7, 3, 5],
+        name: '告警',
+        type: 'bar',
+      },
+    ],
+  });
+
+  appChart.setOption({
+    color: ['#2f6fed', '#16a085', '#8e44ad', '#f39c12'],
+    tooltip: { trigger: 'item' },
+    legend: { bottom: 0, textStyle: { color: '#667085' } },
+    series: [
+      {
+        center: ['50%', '44%'],
+        data: [
+          { name: '待审核', value: 32 },
+          { name: '处理中', value: 28 },
+          { name: '待确认', value: 22 },
+          { name: '已逾期', value: 8 },
+        ],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 16,
+            shadowColor: 'rgba(16, 24, 40, 0.18)',
+          },
+        },
+        radius: ['48%', '72%'],
+        type: 'pie',
+      },
+    ],
+  });
+
+  radarChart.setOption({
+    color: ['#2f6fed'],
+    radar: {
+      indicator: [
+        { max: 100, name: '路由' },
+        { max: 100, name: '权限' },
+        { max: 100, name: '请求' },
+        { max: 100, name: '微前端' },
+        { max: 100, name: '组件' },
+      ],
+      radius: '66%',
+      splitArea: {
+        areaStyle: {
+          color: ['rgba(47, 111, 237, 0.04)', 'rgba(22, 160, 133, 0.04)'],
+        },
+      },
+      axisName: { color: '#667085' },
+      axisLine: { lineStyle: { color: '#d0d5dd' } },
+      splitLine: { lineStyle: { color: '#e4e7ec' } },
+    },
+    series: [
+      {
+        areaStyle: { opacity: 0.16 },
+        data: [{ name: '当前模板', value: [88, 76, 84, 82, 72] }],
+        symbolSize: 6,
+        type: 'radar',
+      },
+    ],
+    tooltip: {},
+  });
+
+  resizeObserver = new ResizeObserver(() => {
+    trendChart?.resize();
+    appChart?.resize();
+    radarChart?.resize();
+  });
+  resizeObserver.observe(trendChartElement);
+  resizeObserver.observe(appChartElement);
+  resizeObserver.observe(radarChartElement);
+}
+
+function disposeCharts() {
+  resizeObserver?.disconnect();
+  trendChart?.dispose();
+  appChart?.dispose();
+  radarChart?.dispose();
+
+  resizeObserver = undefined;
+  trendChart = undefined;
+  appChart = undefined;
+  radarChart = undefined;
+}
+
+onMounted(async () => {
   if (!workplaceStore.hasOverview) {
     void workplaceStore.loadOverview();
   }
+
+  await Promise.all([loadWidgetOrder(), loadMetricOrder()]);
+  await nextTick();
+  syncMetricOrder();
+  initWidgetSortable(widgetGridRef.value ?? null);
+  initMetricSortable(getPortalElement('.metric-grid'));
+  setupCharts();
+});
+
+watch(
+  () => workplaceStore.loading,
+  async (loading) => {
+    if (!loading) {
+      await nextTick();
+      syncMetricOrder();
+      initMetricSortable(getPortalElement('.metric-grid'));
+      trendChart?.resize();
+      appChart?.resize();
+      radarChart?.resize();
+    }
+  },
+);
+
+onBeforeUnmount(() => {
+  disposeCharts();
 });
 </script>
+
+<style scoped>
+.portal-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+  min-height: 0;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.portal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.portal-header__title {
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.3;
+  color: #101828;
+}
+
+.portal-header__subtitle {
+  margin: 6px 0 0;
+  color: #667085;
+  font-size: 14px;
+}
+
+.portal-header__status {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.dashboard-grid {
+  display: flex;
+  align-items: stretch;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.dashboard-widget {
+  flex: 1 1 calc((100% - 32px) / 3);
+  min-height: 330px;
+  min-width: 320px;
+}
+
+.dashboard-widget--wide {
+  flex-basis: calc(((100% - 32px) / 3) * 2 + 16px);
+}
+
+.dashboard-widget--full {
+  flex-basis: 100%;
+  min-height: auto;
+}
+
+.dashboard-widget--metrics {
+  min-height: 220px;
+}
+
+.dashboard-widget--chosen,
+.metric-card--chosen {
+  cursor: grabbing;
+}
+
+.dashboard-widget--ghost,
+.metric-card--ghost {
+  border-style: dashed;
+  background: #eef4ff;
+  box-shadow: none;
+  opacity: 0.64;
+}
+
+.dashboard-widget--dragging,
+.metric-card--dragging {
+  box-shadow: 0 18px 46px rgba(16, 24, 40, 0.18);
+  opacity: 0.96;
+}
+
+.metric-card,
+.portal-panel {
+  border: 1px solid #e4e7ec;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.06);
+}
+
+.metric-card {
+  position: relative;
+  display: grid;
+  min-height: 142px;
+  padding: 18px;
+  overflow: hidden;
+  cursor: grab;
+}
+
+.metric-card::after {
+  position: absolute;
+  top: -40px;
+  right: -38px;
+  width: 118px;
+  height: 118px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
+  content: '';
+}
+
+.metric-card__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  margin-bottom: 14px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--accent-color) 12%, #fff);
+  color: var(--accent-color);
+  font-size: 20px;
+}
+
+.metric-card__label,
+.metric-card__hint,
+.panel-header span {
+  color: #667085;
+}
+
+.metric-card__label {
+  font-size: 13px;
+}
+
+.metric-card__value {
+  margin-top: 4px;
+  font-size: 30px;
+  line-height: 1.15;
+  color: #101828;
+}
+
+.metric-card__hint {
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.portal-panel {
+  padding: 18px;
+}
+
+.panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.panel-header strong {
+  display: block;
+  font-size: 16px;
+  color: #101828;
+}
+
+.panel-header span {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+}
+
+.widget-drag-handle {
+  cursor: grab;
+  user-select: none;
+}
+
+.widget-drag-handle:active {
+  cursor: grabbing;
+}
+
+.chart {
+  width: 100%;
+  height: 258px;
+}
+
+.chart--large {
+  height: 300px;
+}
+
+.chart--radar {
+  height: 252px;
+}
+
+.portal-timeline {
+  padding-top: 8px;
+}
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.shortcut-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.shortcut-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  height: 66px;
+  padding: 0 12px;
+  border: 1px solid #e4e7ec;
+  border-radius: 8px;
+  background: #f8fafc;
+  color: #344054;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+  text-align: left;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.shortcut-item:hover {
+  border-color: color-mix(in srgb, var(--accent-color) 34%, #d0d5dd);
+  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08);
+  transform: translateY(-2px);
+}
+
+.shortcut-item__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--accent-color) 12%, #fff);
+  color: var(--accent-color);
+  font-size: 18px;
+}
+
+@media (max-width: 640px) {
+  .portal-page {
+    padding: 16px;
+  }
+
+  .portal-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .portal-header__status {
+    flex-wrap: wrap;
+  }
+
+  .shortcut-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 1200px) {
+  .metric-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .dashboard-widget,
+  .dashboard-widget--wide,
+  .dashboard-widget--full {
+    flex-basis: 100%;
+    min-width: 0;
+  }
+}
+</style>

package/dist/templates/main-app/src/pages/dashboard/api.ts

@@ -34,7 +34,7 @@ const mockWorkplaceOverview: WorkplaceOverview = {
 };
 
 export async function fetchWorkplaceOverview(): Promise<WorkplaceOverview> {
-  if (import.meta.env.VITE_USE_MOCK === 'true') {
+  if (import.meta.env.VITE_USE_MOCK === 'true' || !import.meta.env.VITE_PROXY_TARGET) {
     return mockWorkplaceOverview;
   }
 

package/dist/templates/sub-app/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
-    "@morningfast/platform": "^0.0.9",
+    "@morningfast/platform": "^0.0.11",
     "@types/sortablejs": "^1.15.9",
     "@vitejs/plugin-vue": "^6.0.6",
     "element-plus": "^2.14.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morningfast/create-ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Morningfast UI internal system scaffold CLI.",
   "bin": {
     "create-morningfast-ui": "dist/index.js"