@phelan/design 0.0.1

package/docs/toolkit/examples/env-node-constants.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h3>Node 环境常量</h3>
+    <el-table
+      :data="nodeEnvList"
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="key"
+        label="键"
+        width="100"
+      />
+      <el-table-column
+        prop="value"
+        label="值"
+      />
+      <el-table-column
+        prop="description"
+        label="说明"
+      />
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { nodeEnv } from '@aldi/aim-toolkit/env';
+
+const nodeEnvList = ref<Array<{ key: string; value: string; description: string }>>([]);
+
+onMounted(() => {
+  nodeEnvList.value = [
+    { key: 'dev', value: nodeEnv.dev, description: '开发模式 (development)' },
+    { key: 'test', value: nodeEnv.test, description: '预发布模式 (staging)' },
+    { key: 'prod', value: nodeEnv.prod, description: '生产模式 (production)' },
+  ];
+});
+</script>

package/docs/toolkit/examples/env-node.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h3>Node 构建模式：{{ nodeEnv || '未获取到' }}</h3>
+    <p>对应 process.env.NODE_ENV 或 import.meta.env.MODE</p>
+    <el-tag
+      v-if="nodeEnv"
+      :type="getNodeEnvTagType(nodeEnv)"
+      >{{ nodeEnv }}</el-tag
+    >
+    <el-tag
+      v-else
+      type="info"
+      >undefined</el-tag
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { getNodeEnv } from '@aldi/aim-toolkit/env';
+
+const nodeEnv = ref<string | undefined>('');
+
+onMounted(() => {
+  nodeEnv.value = getNodeEnv();
+});
+
+const getNodeEnvTagType = (env: string) => {
+  if (env === 'development') return 'info';
+  if (env === 'staging') return 'warning';
+  if (env === 'production') return 'success';
+  return '';
+};
+</script>

package/docs/toolkit/examples/monitor-init.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h3>监控初始化</h3>
+    <p>使用 Monitor.init() 初始化监控实例</p>
+    <el-alert
+      title="监控已初始化"
+      type="success"
+      :closable="false"
+      show-icon
+    >
+      <template #default>
+        <div>
+          <p>应用名称：{{ config.name }}</p>
+          <p>应用标识：{{ config.flag }}</p>
+          <p>监控实例：{{ monitorInstance ? '已创建' : '未创建' }}</p>
+        </div>
+      </template>
+    </el-alert>
+    <el-button
+      type="primary"
+      @click="initMonitor"
+      style="margin-top: 16px"
+    >
+      初始化监控
+    </el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Monitor } from '@aldi/aim-toolkit/monitor';
+
+const config = ref({
+  name: 'demo-app',
+  flag: 'demo',
+});
+
+const monitorInstance = ref<typeof Monitor._instance>(null);
+
+const initMonitor = () => {
+  try {
+    Monitor.init({
+      name: config.value.name,
+      flag: config.value.flag,
+    });
+    monitorInstance.value = Monitor._instance;
+    ElMessage.success('监控初始化成功');
+  } catch (error: any) {
+    ElMessage.error(`监控初始化失败: ${error.message}`);
+  }
+};
+</script>

package/docs/toolkit/examples/monitor-vue-error.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h3>Vue 错误处理绑定</h3>
+    <p>绑定 Vue 错误处理器后，组件错误会自动上报到监控系统</p>
+    <el-alert
+      title="注意"
+      type="warning"
+      :closable="false"
+      show-icon
+      style="margin-bottom: 16px"
+    >
+      <template #default> 此示例需要在真实的 Vue 应用中才能完整演示错误上报功能 </template>
+    </el-alert>
+    <el-button
+      type="danger"
+      @click="triggerError"
+    >
+      触发错误（测试用）
+    </el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus';
+
+const triggerError = () => {
+  ElMessage.warning('在真实应用中，这个错误会被自动捕获并上报到监控系统');
+  // 模拟错误
+  throw new Error('这是一个测试错误');
+};
+</script>

package/docs/toolkit/examples/request-baseurl.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <h3>预定义基础路径</h3>
+    <p>使用 baseUrl 对象访问不同服务的基础路径</p>
+    <el-table
+      :data="baseUrlList"
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="service"
+        label="服务名称"
+        width="150"
+      />
+      <el-table-column
+        prop="path"
+        label="基础路径"
+      />
+      <el-table-column
+        prop="example"
+        label="示例"
+      />
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { baseUrl } from '@aldi/aim-toolkit/request';
+
+const baseUrlList = ref<Array<{ service: string; path: string; example: string }>>([]);
+
+onMounted(() => {
+  baseUrlList.value = [
+    {
+      service: 'article',
+      path: baseUrl.article,
+      example: `${baseUrl.article}/articles`,
+    },
+    {
+      service: 'store',
+      path: baseUrl.store,
+      example: `${baseUrl.store}/stores`,
+    },
+    {
+      service: 'payment',
+      path: baseUrl.payment,
+      example: `${baseUrl.payment}/payments`,
+    },
+    {
+      service: 'supplier',
+      path: baseUrl.supplier,
+      example: `${baseUrl.supplier}/suppliers`,
+    },
+    {
+      service: 'tendering',
+      path: baseUrl.tendering,
+      example: `${baseUrl.tendering}/tenders`,
+    },
+    {
+      service: 'reconciliation',
+      path: baseUrl.reconciliation,
+      example: `${baseUrl.reconciliation}/reconciliations`,
+    },
+  ];
+});
+</script>

package/docs/toolkit/examples/request-basic.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <h3>基础请求示例</h3>
+    <p>使用增强的 axios 实例发送请求</p>
+    <el-button
+      type="primary"
+      @click="sendRequest"
+      :loading="loading"
+    >
+      发送请求
+    </el-button>
+    <div
+      v-if="response"
+      style="margin-top: 16px"
+    >
+      <el-alert
+        title="请求成功"
+        type="success"
+        :closable="false"
+      >
+        <pre style="margin: 0">{{ JSON.stringify(response, null, 2) }}</pre>
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { axios } from '@aldi/aim-toolkit/request';
+
+const loading = ref(false);
+const response = ref<any>(null);
+
+const sendRequest = async () => {
+  loading.value = true;
+  try {
+    // 注意：这里使用模拟的 API，实际使用时需要替换为真实的 API 地址
+    const res = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
+    response.value = res.data;
+    ElMessage.success('请求成功');
+  } catch (error: any) {
+    ElMessage.error(`请求失败: ${error.message}`);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>

package/docs/toolkit/examples/request-cache.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <h3>缓存工具</h3>
+    <el-tabs>
+      <el-tab-pane
+        label="会话级缓存"
+        name="session"
+      >
+        <div style="margin-bottom: 16px">
+          <el-input
+            v-model="sessionKey"
+            placeholder="键"
+            style="width: 200px; margin-right: 8px"
+          />
+          <el-input
+            v-model="sessionValue"
+            placeholder="值"
+            style="width: 200px; margin-right: 8px"
+          />
+          <el-button
+            type="primary"
+            @click="setSession"
+            >设置</el-button
+          >
+          <el-button @click="getSession">获取</el-button>
+          <el-button
+            type="danger"
+            @click="removeSession"
+            >删除</el-button
+          >
+        </div>
+        <div v-if="sessionResult">
+          <el-alert
+            :title="`结果: ${sessionResult}`"
+            type="info"
+            :closable="false"
+          />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane
+        label="本地缓存"
+        name="local"
+      >
+        <div style="margin-bottom: 16px">
+          <el-input
+            v-model="localKey"
+            placeholder="键"
+            style="width: 200px; margin-right: 8px"
+          />
+          <el-input
+            v-model="localValue"
+            placeholder="值"
+            style="width: 200px; margin-right: 8px"
+          />
+          <el-button
+            type="primary"
+            @click="setLocal"
+            >设置</el-button
+          >
+          <el-button @click="getLocal">获取</el-button>
+          <el-button
+            type="danger"
+            @click="removeLocal"
+            >删除</el-button
+          >
+        </div>
+        <div v-if="localResult">
+          <el-alert
+            :title="`结果: ${localResult}`"
+            type="info"
+            :closable="false"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { cache } from '@aldi/aim-toolkit/request';
+
+const sessionKey = ref('');
+const sessionValue = ref('');
+const sessionResult = ref('');
+
+const localKey = ref('');
+const localValue = ref('');
+const localResult = ref('');
+
+const setSession = () => {
+  if (sessionKey.value && sessionValue.value) {
+    cache.session.set(sessionKey.value, sessionValue.value);
+    sessionResult.value = `已设置: ${sessionKey.value} = ${sessionValue.value}`;
+    ElMessage.success('设置成功');
+  }
+};
+
+const getSession = () => {
+  if (sessionKey.value) {
+    const value = cache.session.get(sessionKey.value);
+    sessionResult.value = value ? `值: ${value}` : '未找到';
+  }
+};
+
+const removeSession = () => {
+  if (sessionKey.value) {
+    cache.session.remove(sessionKey.value);
+    sessionResult.value = `已删除: ${sessionKey.value}`;
+    ElMessage.success('删除成功');
+  }
+};
+
+const setLocal = () => {
+  if (localKey.value && localValue.value) {
+    cache.local.set(localKey.value, localValue.value);
+    localResult.value = `已设置: ${localKey.value} = ${localValue.value}`;
+    ElMessage.success('设置成功');
+  }
+};
+
+const getLocal = () => {
+  if (localKey.value) {
+    const value = cache.local.get(localKey.value);
+    localResult.value = value ? `值: ${value}` : '未找到';
+  }
+};
+
+const removeLocal = () => {
+  if (localKey.value) {
+    cache.local.remove(localKey.value);
+    localResult.value = `已删除: ${localKey.value}`;
+    ElMessage.success('删除成功');
+  }
+};
+</script>

package/docs/toolkit/examples/wujie-logout.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h3>登出处理</h3>
+    <p>调用无界底座的登出功能</p>
+    <el-button
+      type="danger"
+      @click="handleLogout"
+      >执行登出</el-button
+    >
+    <el-alert
+      title="注意"
+      type="warning"
+      :closable="false"
+      show-icon
+      style="margin-top: 16px"
+    >
+      <template #default>
+        此功能需要在无界微前端环境中使用。点击登出按钮会通知底座执行登出操作。
+      </template>
+    </el-alert>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { loginOutHandler } from '@aldi/aim-toolkit/wujie';
+
+const handleLogout = () => {
+  ElMessageBox.confirm('确定要登出吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(() => {
+      loginOutHandler();
+      ElMessage.success('已通知底座执行登出');
+    })
+    .catch(() => {
+      // 用户取消
+    });
+};
+</script>

package/docs/toolkit/examples/wujie-token.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <h3>获取 Token</h3>
+    <p>在微前端环境中自动获取 token，或使用默认 token 进行本地调试</p>
+    <el-input
+      v-model="defaultToken"
+      placeholder="默认 token（用于本地调试）"
+      style="width: 300px; margin-bottom: 16px"
+    />
+    <div>
+      <el-button
+        type="primary"
+        @click="getTokenValue"
+        >获取 Token</el-button
+      >
+      <el-button @click="clearToken">清空</el-button>
+    </div>
+    <div
+      v-if="token"
+      style="margin-top: 16px"
+    >
+      <el-alert
+        :title="`Token: ${token}`"
+        type="success"
+        :closable="false"
+      />
+    </div>
+    <el-alert
+      title="提示"
+      type="info"
+      :closable="false"
+      show-icon
+      style="margin-top: 16px"
+    >
+      <template #default>
+        在微前端环境中，token 会通过事件总线从底座获取。本地调试时可以传入默认 token。
+      </template>
+    </el-alert>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { getToken } from '@aldi/aim-toolkit/wujie';
+
+const defaultToken = ref('');
+const token = ref<string | undefined>('');
+
+const getTokenValue = () => {
+  token.value = getToken(defaultToken.value || undefined);
+  if (token.value) {
+    ElMessage.success('Token 获取成功');
+  } else {
+    ElMessage.warning('未获取到 Token');
+  }
+};
+
+const clearToken = () => {
+  token.value = '';
+  defaultToken.value = '';
+};
+</script>

package/docs/toolkit/monitor.md

@@ -0,0 +1,69 @@
+---
+outline: deep
+---
+
+# 监控上报 (monitor)
+
+监控模块基于 Aegis Web SDK 封装，提供了统一的监控上报功能，包括错误监控、性能监控、页面访问统计等。
+
+## 类
+
+### Monitor
+
+监控类，采用单例模式。
+
+### Monitor.init()
+
+创建并初始化 Monitor 实例。如果实例已存在，则更新配置参数。
+
+**参数：**
+- `outerConfig: MonitorConfig` - 监控配置对象
+
+**返回值：** `Monitor` - Monitor 实例
+
+```typescript
+import { Monitor } from '@aldi/aim-toolkit/monitor';
+
+Monitor.init({
+  name: 'store-web',
+  flag: 'store',
+});
+```
+
+### Monitor._instance
+
+Monitor 单例实例，初始化后可通过此属性访问实例。
+
+**类型：** `Monitor | null`
+
+### monitor.bindVueErrorHandler()
+
+绑定 Vue 应用的错误处理器，自动捕获并上报 Vue 组件错误。
+
+**参数：**
+- `vue: App` - Vue 应用实例
+
+```typescript
+import { createApp } from 'vue';
+import { Monitor } from '@aldi/aim-toolkit/monitor';
+
+const app = createApp(App);
+Monitor._instance?.bindVueErrorHandler(app);
+```
+
+### monitor.aegis
+
+Aegis 实例，可以直接调用 Aegis 的方法进行自定义上报。
+
+**类型：** `Aegis | null`
+
+## 类型
+
+### MonitorConfig
+
+初始化监控时需要传入的配置对象。
+
+| 属性名 | 说明 | 类型 | 必填 |
+| ------ | ---- | ---- | ---- |
+| name | 应用名称 | `string` | 是 |
+| flag | 应用资源入口的 path 关键词 | `string` | 是 |