提交格式验证修改

src/views/home/initiateChange/index.vue

@@ -6,6 +6,7 @@ import {
   CHANGES, DOC_TODO, LEVEL_COLOR, STATUS_COLOR, TEMP_WATCH, URGE_RECORDS,
   countOpenStatus, type ChangeLevel, type ChangeOrder, type ChangeStatus, type ChangeType,
 } from "@/typings/model";
+import { getColorWithOpacity } from "@/utils/common";
 
 const themeStore = useThemeStore();
 
@@ -27,6 +28,7 @@ const form = ref<ApplyForm>({
   name: "", dept: "", mainChanges: [""], related: "", purposes: [], effect: "",
   type: "", level: "", duration: "", urgent: false, date: "", restoreDate: "",
 });
+const tab = ref<string>("pre");
 const TABS = [
   { id: "pre", name: "变更预识别", icon: 'lucide:sparkles' },
   { id: "form", name: "变更申请表", icon: 'akar-icons:file' },
@@ -36,8 +38,7 @@ const TABS = [
   { id: "accept", name: "验收评价", icon: 'material-symbols:check-circle-outline' },
   { id: "close", name: "变更关闭确认表", icon: 'quill:folder-open' },
 ];
-const tab = ref<"pre" | "form" | "risk" | "train" | "pssr" | "accept" | "close">("pre");
-const formGen = ref<"idle" | "generating" | "done">("idle");
+const formGen = ref<string>("idle");
 const confirmed = ref<Record<string, boolean>>({});
 const blockedTabs = ref<string[]>([]);
 
@@ -47,10 +48,16 @@ const blockedTabs = ref<string[]>([]);
 <NSpace vertical :size="16">
   <!-- 发起变更 -->
   <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
-    <div class="sticky top-0 z-20 rounded-t-xl border-b bg-[#e8f2fd]">
+    <div 
+      class="sticky top-0 z-20 border-b bg-[var(--bg-color)]"
+      :style="{
+        borderRadius: themeStore.themeRadius + 'px',
+        '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1)
+      }"
+    >
       <div 
-        class="flex flex-wrap items-center gap-x-3 gap-y-2 border-b px-4 py-2"
-        :style="{borderColor: themeStore.themeColor}"
+        class="flex flex-wrap items-center gap-x-3 gap-y-2 border-b px-4 py-2 border-[var(--border-color)]"
+        :style="{'--border-color': getColorWithOpacity(themeStore.themeColor, 0.2)}"
       >
         <span class="whitespace-nowrap text-sm font-medium text-slate-600">变更名称 <span class="text-red-500">*</span></span>
         <NInput v-model:value="form.name" maxlength="28" show-count placeholder="AI 自动总结（28 字以内），可手动修改" class="!w-420px" />
@@ -60,8 +67,11 @@ const blockedTabs = ref<string[]>([]);
       <div class="flex items-center gap-1 overflow-x-auto px-3 pt-2">
         <div v-for="t in TABS" :key="t.id" @click="tab = t.id"
           class="flex items-center gap-1.5 whitespace-nowrap px-3 py-2 text-sm transition cursor-pointer border hover:bg-white/60 rounded-t-lg"
-          :class="tab === t.id ? 'border-b-transparent border-[#ACC6E5] bg-white text-[var(--active-color)]':'border-transparent text-slate-500'"
-          :style="{'--active-color': themeStore.themeColor}"
+          :class="tab === t.id ? 'border-b-transparent border-[var(--border-color)] bg-white text-[var(--active-color)]':'border-transparent text-slate-500'"
+          :style="{
+            '--border-color': getColorWithOpacity(themeStore.themeColor, 0.3),
+            '--active-color': themeStore.themeColor
+            }"
         >
           <Icon :icon="t.icon" class="size-14px" />
           {{ t.name }}