@agile-team/wl-skills-kit 2.1.2 → 2.1.3

package/files/demo/produce/aiflow/mmwr-customer-apply-change-history/index.scss

@@ -1,150 +1,150 @@
-.change-history-page {
-  display: flex !important;
-  padding: 0 !important;
-  height: 100%;
-  overflow: hidden;
-
-  /* ─── 左侧：变更记录面板 ─── */
-  .history-panel {
-    width: 200px;
-    flex-shrink: 0;
-    border-right: 1px solid #e4e7ed;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    background: #fff;
-
-    &__header {
-      padding: 12px 16px;
-      font-size: 14px;
-      font-weight: 600;
-      color: #303133;
-      border-bottom: 1px solid #e4e7ed;
-      flex-shrink: 0;
-    }
-
-    &__list {
-      flex: 1;
-      overflow-y: auto;
-      padding: 4px 0;
-    }
-  }
-
-  .history-card {
-    display: flex;
-    align-items: flex-start;
-    padding: 10px 16px;
-    cursor: pointer;
-    border-left: 3px solid transparent;
-    transition: background 0.15s;
-    gap: 8px;
-
-    &:hover {
-      background: #f5f7fa;
-    }
-
-    &.is-active {
-      background: #ecf5ff;
-      border-left-color: #409eff;
-    }
-
-    &__dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      margin-top: 5px;
-      flex-shrink: 0;
-
-      &.is-add {
-        background: #409eff;
-      }
-      &.is-change {
-        background: #e6a23c;
-      }
-    }
-
-    &__content {
-      flex: 1;
-      min-width: 0;
-    }
-
-    &__type {
-      font-size: 13px;
-      font-weight: 500;
-      color: #303133;
-      line-height: 18px;
-    }
-
-    &__date {
-      font-size: 12px;
-      color: #909399;
-      line-height: 18px;
-    }
-
-    &__person {
-      font-size: 12px;
-      color: #606266;
-      line-height: 18px;
-    }
-  }
-
-  .history-empty {
-    padding: 32px 16px;
-    text-align: center;
-    color: #909399;
-    font-size: 13px;
-  }
-
-  /* ─── 右侧：变更详情面板 ─── */
-  .detail-panel {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    background: #fff;
-
-    &__body {
-      flex: 1;
-      overflow-y: auto;
-      padding: 0 16px 16px;
-    }
-  }
-
-  .page-header {
-    display: flex;
-    align-items: center;
-    padding: 10px 16px;
-    flex-shrink: 0;
-
-    .page-title {
-      font-size: 16px;
-      font-weight: 600;
-      margin-right: 10px;
-    }
-
-    .page-tag {
-      display: inline-block;
-      padding: 1px 8px;
-      font-size: 12px;
-      border-radius: 4px;
-      margin-right: 8px;
-
-      &--change {
-        background-color: var(--el-color-primary-light-9);
-        color: var(--el-color-primary);
-        border: 1px solid var(--el-color-primary-light-7);
-      }
-
-      &--status {
-        background-color: var(--el-color-warning-light-9);
-        color: var(--el-color-warning);
-        border: 1px solid var(--el-color-warning-light-7);
-      }
-    }
-  }
-
-  .page-toolbar {
-    padding: 0 16px 8px;
-    flex-shrink: 0;
-  }
-}
+.change-history-page {
+  display: flex !important;
+  padding: 0 !important;
+  height: 100%;
+  overflow: hidden;
+
+  /* ─── 左侧：变更记录面板 ─── */
+  .history-panel {
+    width: 200px;
+    flex-shrink: 0;
+    border-right: 1px solid #e4e7ed;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: #fff;
+
+    &__header {
+      padding: 12px 16px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #303133;
+      border-bottom: 1px solid #e4e7ed;
+      flex-shrink: 0;
+    }
+
+    &__list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 4px 0;
+    }
+  }
+
+  .history-card {
+    display: flex;
+    align-items: flex-start;
+    padding: 10px 16px;
+    cursor: pointer;
+    border-left: 3px solid transparent;
+    transition: background 0.15s;
+    gap: 8px;
+
+    &:hover {
+      background: #f5f7fa;
+    }
+
+    &.is-active {
+      background: #ecf5ff;
+      border-left-color: #409eff;
+    }
+
+    &__dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin-top: 5px;
+      flex-shrink: 0;
+
+      &.is-add {
+        background: #409eff;
+      }
+      &.is-change {
+        background: #e6a23c;
+      }
+    }
+
+    &__content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &__type {
+      font-size: 13px;
+      font-weight: 500;
+      color: #303133;
+      line-height: 18px;
+    }
+
+    &__date {
+      font-size: 12px;
+      color: #909399;
+      line-height: 18px;
+    }
+
+    &__person {
+      font-size: 12px;
+      color: #606266;
+      line-height: 18px;
+    }
+  }
+
+  .history-empty {
+    padding: 32px 16px;
+    text-align: center;
+    color: #909399;
+    font-size: 13px;
+  }
+
+  /* ─── 右侧：变更详情面板 ─── */
+  .detail-panel {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+
+    &__body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0 16px 16px;
+    }
+  }
+
+  .page-header {
+    display: flex;
+    align-items: center;
+    padding: 10px 16px;
+    flex-shrink: 0;
+
+    .page-title {
+      font-size: 16px;
+      font-weight: 600;
+      margin-right: 10px;
+    }
+
+    .page-tag {
+      display: inline-block;
+      padding: 1px 8px;
+      font-size: 12px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      &--change {
+        background-color: var(--el-color-primary-light-9);
+        color: var(--el-color-primary);
+        border: 1px solid var(--el-color-primary-light-7);
+      }
+
+      &--status {
+        background-color: var(--el-color-warning-light-9);
+        color: var(--el-color-warning);
+        border: 1px solid var(--el-color-warning-light-7);
+      }
+    }
+  }
+
+  .page-toolbar {
+    padding: 0 16px 8px;
+    flex-shrink: 0;
+  }
+}

package/files/demo/produce/aiflow/mmwr-customer-apply-change-history/index.vue

@@ -1,79 +1,79 @@
-<template>
-  <div class="app-container change-history-page">
-    <!-- 左侧：变更历史记录面板 -->
-    <div class="history-panel" v-loading="historyLoading">
-      <div class="history-panel__header">变更记录</div>
-      <div class="history-panel__list">
-        <div
-          v-for="item in historyList"
-          :key="item.id"
-          class="history-card"
-          :class="{ 'is-active': item.id === selectedId }"
-          @click="handleSelectHistory(item)"
-        >
-          <span
-            class="history-card__dot"
-            :class="item.changeType.includes('新增') ? 'is-add' : 'is-change'"
-          ></span>
-          <div class="history-card__content">
-            <div class="history-card__type">{{ item.changeType }}</div>
-            <div class="history-card__date">{{ item.changeTime }}</div>
-            <div class="history-card__person">{{ item.changePerson }}</div>
-          </div>
-        </div>
-        <div
-          v-if="!historyList.length && !historyLoading"
-          class="history-empty"
-        >
-          暂无变更记录
-        </div>
-      </div>
-    </div>
-
-    <!-- 右侧：变更详情面板 -->
-    <div class="detail-panel" v-loading="loading">
-      <div class="page-header">
-        <span class="page-title">客户变更详情</span>
-        <span class="page-tag page-tag--change">变更</span>
-        <span class="page-tag page-tag--status">未审核</span>
-      </div>
-      <div class="page-toolbar">
-        <el-button @click="handleCancel">取消</el-button>
-      </div>
-      <div class="detail-panel__body">
-        <c_customerTabs ref="tabsRef" mode="view" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRoute } from "vue-router";
-import { useChangeHistory } from "./data";
-import c_customerTabs from "@/components/local/c_customerTabs/index.vue";
-
-const tabsRef = ref<InstanceType<typeof c_customerTabs>>();
-const route = useRoute();
-
-const {
-  loading,
-  historyLoading,
-  historyList,
-  selectedId,
-  loadHistoryList,
-  loadMockData,
-  handleSelectHistory,
-  handleCancel
-} = useChangeHistory(tabsRef);
-
-onMounted(() => {
-  // TODO: 后端接口就绪后，启用真实接口：
-  // const id = route.query.id as string;
-  // if (id) { loadHistoryList(id); } else { loadMockData(); }
-  loadMockData();
-});
-</script>
-
-<style scoped lang="scss">
-@import "./index.scss";
-</style>
+<template>
+  <div class="app-container change-history-page">
+    <!-- 左侧：变更历史记录面板 -->
+    <div class="history-panel" v-loading="historyLoading">
+      <div class="history-panel__header">变更记录</div>
+      <div class="history-panel__list">
+        <div
+          v-for="item in historyList"
+          :key="item.id"
+          class="history-card"
+          :class="{ 'is-active': item.id === selectedId }"
+          @click="handleSelectHistory(item)"
+        >
+          <span
+            class="history-card__dot"
+            :class="item.changeType.includes('新增') ? 'is-add' : 'is-change'"
+          ></span>
+          <div class="history-card__content">
+            <div class="history-card__type">{{ item.changeType }}</div>
+            <div class="history-card__date">{{ item.changeTime }}</div>
+            <div class="history-card__person">{{ item.changePerson }}</div>
+          </div>
+        </div>
+        <div
+          v-if="!historyList.length && !historyLoading"
+          class="history-empty"
+        >
+          暂无变更记录
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧：变更详情面板 -->
+    <div class="detail-panel" v-loading="loading">
+      <div class="page-header">
+        <span class="page-title">客户变更详情</span>
+        <span class="page-tag page-tag--change">变更</span>
+        <span class="page-tag page-tag--status">未审核</span>
+      </div>
+      <div class="page-toolbar">
+        <el-button @click="handleCancel">取消</el-button>
+      </div>
+      <div class="detail-panel__body">
+        <c_customerTabs ref="tabsRef" mode="view" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import { useChangeHistory } from "./data";
+import c_customerTabs from "@/components/local/c_customerTabs/index.vue";
+
+const tabsRef = ref<InstanceType<typeof c_customerTabs>>();
+const route = useRoute();
+
+const {
+  loading,
+  historyLoading,
+  historyList,
+  selectedId,
+  loadHistoryList,
+  loadMockData,
+  handleSelectHistory,
+  handleCancel
+} = useChangeHistory(tabsRef);
+
+onMounted(() => {
+  // TODO: 后端接口就绪后，启用真实接口：
+  // const id = route.query.id as string;
+  // if (id) { loadHistoryList(id); } else { loadMockData(); }
+  loadMockData();
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>