Merge branch 'master' of http://192.168.1.222:3000/jiayi/base-callcenter-web

src/assets/style.css

@@ -710,6 +710,11 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1242,6 +1247,11 @@ video {
   border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
 }
 
+.border-blue-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
@@ -1538,6 +1548,16 @@ video {
   line-height: 1rem;
 }
 
+.text-lg\/7 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm\/6 {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
 .font-bold {
   font-weight: 700;
 }

src/views/main/system/config/index.vue

@@ -0,0 +1,152 @@
+<template>
+    <div class="min-h-screen bg-gray-50 p-8">
+      <div class="mx-auto max-w-7xl">
+        <!-- 标题区域 -->
+        <div class="mb-8 bg-white rounded-lg p-6 shadow-sm">
+          <h1 class="text-3xl font-bold text-gray-900">业务设置</h1>
+          <p class="mt-2 text-gray-600">在此配置系统的业务规则和相关参数</p>
+        </div>
+        <!-- 配置卡片区域 -->
+        <div class="grid gap-6">
+          <!-- 多次来电配置 -->
+          <div class="rounded-lg bg-white p-6 shadow-sm">
+            <div class="mb-6 flex items-center justify-between">
+              <div>
+                <h2 class="text-xl font-semibold text-gray-900">重复来电配置</h2>
+                <p class="mt-1 text-sm text-gray-500">设置多次来电的触发条件</p>
+              </div>
+              <el-button
+                type="primary"
+                class="!rounded-button whitespace-nowrap"
+                @click="saveSettings"
+                :loading="saving"
+              >
+                保存配置
+              </el-button>
+            </div>
+            <div class="flex items-center space-x-4">
+              <div class="flex items-center">
+                <el-input
+                  v-model="dayCount"
+                  type="number"
+                  :min="1"
+                  :max="365"
+                  class="w-24"
+                  @change="validateDayCount"
+                >
+                  <template #append>天</template>
+                </el-input>
+              </div>
+              <span class="text-gray-600">内超过</span>
+              <div class="flex items-center">
+                <el-input
+                  v-model="callCount"
+                  type="number"
+                  :min="1"
+                  :max="100"
+                  class="w-24"
+                  @change="validateCallCount"
+                >
+                  <template #append>次</template>
+                </el-input>
+              </div>
+              <span class="text-gray-600">来电</span>
+            </div>
+            <div class="mt-4 text-sm text-gray-500">
+              注：当客户在设定天数内的来电次数超过设定值时，系统将自动标记为重复来电客户。
+            </div>
+          </div>
+          <!-- 保存成功提示 -->
+          <el-dialog
+            v-model="showSuccessDialog"
+            title="保存成功"
+            width="30%"
+            :show-close="false"
+            center
+          >
+            <div class="flex items-center justify-center py-4">
+              <el-icon class="mr-2 text-green-500"><CircleCheckFilled /></el-icon>
+              <span>配置已成功保存</span>
+            </div>
+            <template #footer>
+              <div class="flex justify-center">
+                <el-button
+                  type="primary"
+                  class="!rounded-button whitespace-nowrap"
+                  @click="showSuccessDialog = false"
+                >
+                  确定
+                </el-button>
+              </div>
+            </template>
+          </el-dialog>
+        </div>
+      </div>
+    </div>
+</template>
+  
+<script lang="ts" setup>
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+import { CircleCheckFilled } from "@element-plus/icons-vue";
+const dayCount = ref<number | null>(7);
+const callCount = ref<number | null>(3);
+const saving = ref(false);
+const showSuccessDialog = ref(false);
+const validateDayCount = (value: number) => {
+  if (value < 1) {
+    dayCount.value = 1;
+    ElMessage.warning("天数不能小于1天");
+  } else if (value > 365) {
+    dayCount.value = 365;
+    ElMessage.warning("天数不能超过365天");
+  }
+};
+const validateCallCount = (value: number) => {
+  if (value < 1) {
+    callCount.value = 1;
+    ElMessage.warning("次数不能小于1次");
+  } else if (value > 100) {
+    callCount.value = 100;
+    ElMessage.warning("次数不能超过100次");
+  }
+};
+const saveSettings = async () => {
+  if (!dayCount.value || !callCount.value) {
+    ElMessage.error("请填写完整的配置信息");
+    return;
+  }
+  saving.value = true;
+  try {
+    // 模拟保存操作
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    showSuccessDialog.value = true;
+  } catch (error) {
+    ElMessage.error("保存失败，请重试");
+  } finally {
+    saving.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.el-input-number :deep(.el-input__wrapper) {
+  padding-right: 0;
+}
+.el-input :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px #e5e7eb inset;
+}
+.el-input :deep(.el-input__wrapper):hover {
+  box-shadow: 0 0 0 1px #d1d5db inset;
+}
+.el-input :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px #409eff inset;
+}
+.el-input :deep(.el-input-group__append) {
+  background-color: #f3f4f6;
+  border-left: 1px solid #e5e7eb;
+  color: #374151;
+  padding: 0 12px;
+}
+</style>
+