diff --git a/.env.development b/.env.development
index cc495e8..a58f1f9 100644
--- a/.env.development
+++ b/.env.development
@@ -6,19 +6,19 @@ VITE_PUBLIC_PATH = /
 
 
 # 跨域代理，您可以配置多个 ,请注意，没有换行符
-VITE_PROXY = [["/nursing-unit_102","http://localhost:8092/nursing-unit_102"],["/upload","http://localhost:3300/upload"]]
+VITE_PROXY = [["/nursing-unit_101","http://localhost:8091/nursing-unit_101"],["/upload","http://localhost:3300/upload"]]
 
 #后台接口全路径地址(必填)
-VITE_GLOB_DOMAIN_URL=http://localhost:8092/nursing-unit_102
+VITE_GLOB_DOMAIN_URL=http://localhost:8091/nursing-unit_101
 
 #后台接口父地址(必填)
-VITE_GLOB_API_URL=/nursing-unit_102
+VITE_GLOB_API_URL=/nursing-unit_101
 
 # 接口前缀
 VITE_GLOB_API_URL_PREFIX=
 
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
-VITE_APP_SUB_jeecg-app-1 = '//localhost:8092'
+VITE_APP_SUB_jeecg-app-1 = '//localhost:8091'
 
 # 填写后将作为乾坤子应用启动，主应用注册时AppName需保持一致（放开 VITE_GLOB_QIANKUN_MICRO_APP_NAME 参数表示jeecg-vue3将以乾坤子应用模式启动）
 #VITE_GLOB_QIANKUN_MICRO_APP_NAME=jeecg-vue3
diff --git a/.env.development101 b/.env.development2
similarity index 75%
rename from .env.development101
rename to .env.development2
index a58f1f9..cc495e8 100644
--- a/.env.development101
+++ b/.env.development2
@@ -6,19 +6,19 @@ VITE_PUBLIC_PATH = /
 
 
 # 跨域代理，您可以配置多个 ,请注意，没有换行符
-VITE_PROXY = [["/nursing-unit_101","http://localhost:8091/nursing-unit_101"],["/upload","http://localhost:3300/upload"]]
+VITE_PROXY = [["/nursing-unit_102","http://localhost:8092/nursing-unit_102"],["/upload","http://localhost:3300/upload"]]
 
 #后台接口全路径地址(必填)
-VITE_GLOB_DOMAIN_URL=http://localhost:8091/nursing-unit_101
+VITE_GLOB_DOMAIN_URL=http://localhost:8092/nursing-unit_102
 
 #后台接口父地址(必填)
-VITE_GLOB_API_URL=/nursing-unit_101
+VITE_GLOB_API_URL=/nursing-unit_102
 
 # 接口前缀
 VITE_GLOB_API_URL_PREFIX=
 
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
-VITE_APP_SUB_jeecg-app-1 = '//localhost:8091'
+VITE_APP_SUB_jeecg-app-1 = '//localhost:8092'
 
 # 填写后将作为乾坤子应用启动，主应用注册时AppName需保持一致（放开 VITE_GLOB_QIANKUN_MICRO_APP_NAME 参数表示jeecg-vue3将以乾坤子应用模式启动）
 #VITE_GLOB_QIANKUN_MICRO_APP_NAME=jeecg-vue3
diff --git a/.env.development103 b/.env.development3
similarity index 100%
rename from .env.development103
rename to .env.development3
diff --git a/.env.production b/.env.production
index cb59464..04195f8 100644
--- a/.env.production
+++ b/.env.production
@@ -2,7 +2,7 @@
 VITE_USE_MOCK = false
 
 # 发布路径
-VITE_PUBLIC_PATH = /biz103
+VITE_PUBLIC_PATH = /biz101
 
 # 是否启用gzip或brotli压缩
 # 选项值: gzip | brotli | none
@@ -13,10 +13,10 @@ VITE_BUILD_COMPRESS = 'gzip'
 VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 
 #后台接口父地址(必填)
-VITE_GLOB_API_URL=/nursingunit103
+VITE_GLOB_API_URL=/nursingunit101
 
 #后台接口全路径地址(必填)
-VITE_GLOB_DOMAIN_URL=https://www.focusnu.com/nursingunit103
+VITE_GLOB_DOMAIN_URL=https://www.focusnu.com/nursingunit101
 
 # 接口父路径前缀
 VITE_GLOB_API_URL_PREFIX=
diff --git a/src/App.vue b/src/App.vue
index f0d8666..504bee8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,99 +7,103 @@
 </template>
 
 <script lang="ts" setup>
-  import { watch, ref } from 'vue';
-  import { theme } from 'ant-design-vue';
-  import { ConfigProvider } from 'ant-design-vue';
-  import { AppProvider } from '/@/components/Application';
-  import { useTitle } from '/@/hooks/web/useTitle';
-  import { useLocale } from '/@/locales/useLocale';
-  import { useAppStore } from '/@/store/modules/app';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-  import { ThemeEnum } from '/@/enums/appEnum';
-  import { changeTheme } from '/@/logics/theme/index';
+import { watch, ref } from 'vue';
+import { theme } from 'ant-design-vue';
+import { ConfigProvider } from 'ant-design-vue';
+import { AppProvider } from '/@/components/Application';
+import { useTitle } from '/@/hooks/web/useTitle';
+import { useLocale } from '/@/locales/useLocale';
+import { useAppStore } from '/@/store/modules/app';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { ThemeEnum } from '/@/enums/appEnum';
+import { changeTheme } from '/@/logics/theme/index';
 
-  const appStore = useAppStore();
-  // 解决日期时间国际化问题
-  import 'dayjs/locale/zh-cn';
-  // support Multi-language
-  const { getAntdLocale } = useLocale();
+const appStore = useAppStore();
+// 解决日期时间国际化问题
+import 'dayjs/locale/zh-cn';
+// support Multi-language
+const { getAntdLocale } = useLocale();
 
-  useTitle();
-  /**
-   * 2024-04-07
-   * liaozhiyang
-   * 暗黑模式下默认文字白色，白天模式默认文字 #333
-   * */
-  const modeAction = (data) => {
-    if (data.token) {
-      if (getDarkMode.value === ThemeEnum.DARK) {
-        Object.assign(data.token, { colorTextBase: 'fff' });
-      } else {
-        Object.assign(data.token, { colorTextBase: '#333' });
-      }
+useTitle();
+/**
+ * 2024-04-07
+ * liaozhiyang
+ * 暗黑模式下默认文字白色，白天模式默认文字 #333
+ * */
+const modeAction = (data) => {
+  if (data.token) {
+    if (getDarkMode.value === ThemeEnum.DARK) {
+      Object.assign(data.token, { colorTextBase: 'fff' });
+    } else {
+      Object.assign(data.token, { colorTextBase: '#333' });
     }
-  };
-  // update-begin--author:liaozhiyang---date:20231218---for：【QQYUN-6366】升级到antd4.x
-  const appTheme: any = ref({});
-  const { getDarkMode } = useRootSetting();
-  watch(
-    () => getDarkMode.value,
-    (newValue) => {
-      delete appTheme.value.algorithm;
-      if (newValue === ThemeEnum.DARK) {
-        appTheme.value.algorithm = theme.darkAlgorithm;
-      }
-      // update-begin--author:liaozhiyang---date:20240322---for：【QQYUN-8570】生产环境暗黑模式下主题色不生效
-      if (import.meta.env.PROD) {
-        changeTheme(appStore.getProjectConfig.themeColor);
-      }
-      // update-end--author:liaozhiyang---date:20240322---for：【QQYUN-8570】生产环境暗黑模式下主题色不生效
-      modeAction(appTheme.value);
-      appTheme.value = {
-        ...appTheme.value,
-      };
-    },
-    { immediate: true }
-  );
-  watch(
-    appStore.getProjectConfig,
-    (newValue) => {
-      const primary = newValue.themeColor;
-      const result = {
-        ...appTheme.value,
-        ...{
-          token: {
-            colorPrimary: primary,
-            wireframe: true,
-            fontSize: 14,
-            colorTextBase: '#333',
-            colorSuccess: '#55D187',
-            colorInfo: primary,
-            borderRadius: 4,
-            sizeStep: 4,
-            sizeUnit: 4,
-            colorWarning: '#EFBD47',
-            colorError: '#ED6F6F',
-            fontFamily:
-              '-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol',
-          },
+  }
+};
+// update-begin--author:liaozhiyang---date:20231218---for：【QQYUN-6366】升级到antd4.x
+const appTheme: any = ref({});
+const { getDarkMode } = useRootSetting();
+watch(
+  () => getDarkMode.value,
+  (newValue) => {
+    delete appTheme.value.algorithm;
+    if (newValue === ThemeEnum.DARK) {
+      appTheme.value.algorithm = theme.darkAlgorithm;
+    }
+    // update-begin--author:liaozhiyang---date:20240322---for：【QQYUN-8570】生产环境暗黑模式下主题色不生效
+    if (import.meta.env.PROD) {
+      changeTheme(appStore.getProjectConfig.themeColor);
+    }
+    // update-end--author:liaozhiyang---date:20240322---for：【QQYUN-8570】生产环境暗黑模式下主题色不生效
+    modeAction(appTheme.value);
+    appTheme.value = {
+      ...appTheme.value,
+    };
+  },
+  { immediate: true }
+);
+watch(
+  appStore.getProjectConfig,
+  (newValue) => {
+    const primary = newValue.themeColor;
+    const result = {
+      ...appTheme.value,
+      ...{
+        token: {
+          colorPrimary: primary,
+          wireframe: true,
+          fontSize: 14,
+          colorTextBase: '#333',
+          colorSuccess: '#55D187',
+          colorInfo: primary,
+          borderRadius: 4,
+          sizeStep: 4,
+          sizeUnit: 4,
+          colorWarning: '#EFBD47',
+          colorError: '#ED6F6F',
+          fontFamily:
+            '-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol',
         },
-      };
-      appTheme.value = result;
-      modeAction(result);
-    },
-    { immediate: true }
-  );
-  setTimeout(() => {
-    appStore.getProjectConfig?.themeColor && changeTheme(appStore.getProjectConfig.themeColor);
-  }, 300);
-  // update-end--author:liaozhiyang---date:20231218---for：【QQYUN-6366】升级到antd4.x
+      },
+    };
+    appTheme.value = result;
+    modeAction(result);
+  },
+  { immediate: true }
+);
+setTimeout(() => {
+  appStore.getProjectConfig?.themeColor && changeTheme(appStore.getProjectConfig.themeColor);
+}, 300);
+// update-end--author:liaozhiyang---date:20231218---for：【QQYUN-6366】升级到antd4.x
 
 </script>
 <style lang="less">
-  // update-begin--author:liaozhiyang---date:20230803---for：【QQYUN-5839】windi会影响到html2canvas绘制的图片样式
-  img {
-    display: inline-block;
-  }
-  // update-end--author:liaozhiyang---date:20230803---for：【QQYUN-5839】windi会影响到html2canvas绘制的图片样式
-</style>
+// update-begin--author:liaozhiyang---date:20230803---for：【QQYUN-5839】windi会影响到html2canvas绘制的图片样式
+img {
+  display: inline-block;
+}
+
+.nu-menu-item :hover {
+  color: #69c0ff !important;
+}
+
+// update-end--author:liaozhiyang---date:20230803---for：【QQYUN-5839】windi会影响到html2canvas绘制的图片样式</style>
diff --git a/src/views/services/directiveTag/bodytag/BodyTagList.vue b/src/views/services/directiveTag/bodytag/BodyTagList.vue
index f98a937..41b2d8a 100644
--- a/src/views/services/directiveTag/bodytag/BodyTagList.vue
+++ b/src/views/services/directiveTag/bodytag/BodyTagList.vue
@@ -97,8 +97,8 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     useSearchForm: false,
     pagination: {
       current: 1,
-      pageSize: 50,
-      pageSizeOptions: ['50', '70', '100'],
+      pageSize: 15,
+      pageSizeOptions: ['15','50', '70', '100'],
     },
     actionColumn: {
       width: 160,
diff --git a/src/views/services/directiveTag/emotiontag/EmotionTagList.vue b/src/views/services/directiveTag/emotiontag/EmotionTagList.vue
index f7c3390..8028e78 100644
--- a/src/views/services/directiveTag/emotiontag/EmotionTagList.vue
+++ b/src/views/services/directiveTag/emotiontag/EmotionTagList.vue
@@ -97,8 +97,8 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     useSearchForm: false,
     pagination: {
       current: 1,
-      pageSize: 50,
-      pageSizeOptions: ['50', '70', '100'],
+      pageSize: 15,
+      pageSizeOptions: ['15','50', '70', '100'],
     },
     actionColumn: {
       width: 160,
diff --git a/src/views/services/serviceDirective/ConfigServiceDirectiveList.vue b/src/views/services/serviceDirective/ConfigServiceDirectiveList.vue
index 7210eb4..b224065 100644
--- a/src/views/services/serviceDirective/ConfigServiceDirectiveList.vue
+++ b/src/views/services/serviceDirective/ConfigServiceDirectiveList.vue
@@ -73,10 +73,10 @@
       </a-form>
     </div>
     <div>
-      <div style="width:350px;float: left;max-height:77vh; overflow:auto;position: relative;">
+      <div style="width:350px;float: left;max-height:80vh; overflow:auto;position: relative;">
         <div
           style="position: absolute; top: 8px; right: 8px; z-index: 1; background: white; padding: 0px; border-radius: 4px;">
-          <a-radio-group v-model:value="filterIzEnabled"  @change="searchQuery">
+          <a-radio-group v-model:value="filterIzEnabled" @change="searchQuery">
             <a-radio-button value="all">全部</a-radio-button>
             <a-radio-button value="enabled">启用</a-radio-button>
           </a-radio-group>
@@ -89,8 +89,8 @@
         <a-empty v-if="!treeLoading && treeLoading" />
         <a-button v-if="!treeLoading && treeData.length < 1" type="link" class="btnPrivate" @click="addInstruction"
           preIcon="ant-design:plus-outlined">新增分类标签</a-button>
-        <a-tree style="padding-top: 40px;" v-if="!treeLoading && treeData.length > 0" :tree-data="treeData" v-model:expandedKeys="expandedKeys"
-          expandAction="click" @select="handleTreeSelect">
+        <a-tree style="padding-top: 40px;min-height:80vh;" v-if="!treeLoading && treeData.length > 0"
+          :tree-data="treeData" v-model:expandedKeys="expandedKeys" expandAction="click" @select="handleTreeSelect">
           <template #title="{ data }">
             <!-- @click.stop="openMenu(data, data.children, $event)" -->
             <!-- @contextmenu.prevent="openMenu(data, data.children, $event)" -->
@@ -109,7 +109,7 @@
                 <template #overlay>
                   <a-menu>
                     <a-menu-item v-for="item in menuItems(data)" :key="item.key" :disabled="!item.canAdd"
-                      @click="() => { closeAllMenus(); item.action(data) }">
+                      class="nu-menu-item" @click="() => { closeAllMenus(); item.action(data) }">
                       <Icon style="color:#1890FF;" :icon="item.icon" class="action-icon"></Icon>
                       <span style=" color:#1890FF;margin-left: 5px;">{{ item.label }}</span>
                     </a-menu-item>
@@ -228,7 +228,7 @@
   </a-drawer>
 
   <!-- 体型标签 -->
-  <a-drawer title="体型标签" width="60vw" :open="bodyTagOpen" @close="onBodyTagClose" >
+  <a-drawer title="体型标签" width="60vw" :open="bodyTagOpen" @close="onBodyTagClose">
     <template #footer>
       <a-button type="primary" @click="onBodyTagClose" style="float: right;">关闭</a-button>
     </template>
@@ -236,7 +236,7 @@
   </a-drawer>
 
   <!-- 情绪标签 -->
-  <a-drawer title="情绪标签" width="60vw" :open="emotionTagOpen" @close="onEmotionTagClose" >
+  <a-drawer title="情绪标签" width="60vw" :open="emotionTagOpen" @close="onEmotionTagClose">
     <template #footer>
       <a-button type="primary" @click="onEmotionTagClose" style="float: right;">关闭</a-button>
     </template>
@@ -1165,4 +1165,5 @@ audio::-webkit-media-controls-time-remaining-display {
     overflow-y: auto;
   }
 }
+
 </style>
diff --git a/src/views/services/serviceDirective/components/ConfigServiceDirectiveForm.vue b/src/views/services/serviceDirective/components/ConfigServiceDirectiveForm.vue
index fdf5356..88907c3 100644
--- a/src/views/services/serviceDirective/components/ConfigServiceDirectiveForm.vue
+++ b/src/views/services/serviceDirective/components/ConfigServiceDirectiveForm.vue
@@ -1,187 +1,318 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
-      <template #detail>
-        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
-          name="ConfigService2DirectiveForm">
-          <a-row v-show="!isEditMedia">
-            <a-col :span="12" v-show="false">
-              <a-form-item label="分类标签" v-bind="validateInfos.instructionTagId"
-                id="ConfigServiceDirectiveForm-instructionTagId" name="instructionTagId">
-                <j-dict-select-tag v-model:value="formData.instructionTagId" :orgCode="mainOrgCode"
-                  :dictCode="`nu_config_service_instruction_tag,instruction_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`"
-                  placeholder="请选择分类标签" allowClear @upDictCode="upInstructionDictCode" :disabled="!!formData.id" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12" v-show="false">
-              <a-form-item label="服务类别" v-bind="validateInfos.categoryId" id="ConfigServiceDirectiveForm-categoryId"
-                name="categoryId">
-                <j-dict-select-tag type="list" v-model:value="formData.categoryId" :disabled="!!formData.id"
-                  :orgCode="mainOrgCode" :dictCode="categoryDictCode" placeholder="请选择服务类别" allow-clear
-                  @upDictCode="upCategoryDictCode" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12" v-show="false">
-              <a-form-item label="服务类型" v-bind="validateInfos.typeId" id="ConfigServiceDirectiveForm-typeId"
-                name="typeId">
-                <j-dict-select-tag type="list" v-model:value="formData.typeId" :dictCode="typeDictCode"
-                  :orgCode="mainOrgCode" :disabled="!!formData.id" placeholder="请选择服务类型" allowClear
-                  @upDictCode="upTypeDictCode" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="服务指令名称" v-bind="validateInfos.directiveName"
-                id="ConfigServiceDirectiveForm-directiveName" name="directiveName">
-                <a-input v-model:value="formData.directiveName" placeholder="请输入服务指令名称" allow-clear :maxlength="20"
-                  :showCount="true" :disabled="!!formData.id"></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="收费价格(元)" v-bind="validateInfos.tollPrice" id="ConfigServiceDirectiveForm-tollPrice"
-                name="tollPrice">
-                <a-input-number v-model:value="formData.tollPrice" placeholder="请输入收费价格" style="width: 100%" :min="0"
-                  :max="99999.99" :precision="2" @keydown="onPriceKeydown" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="提成价格(元)" v-bind="validateInfos.comPrice" id="ConfigServiceDirectiveForm-comPrice"
-                name="comPrice">
-                <a-input-number v-model:value="formData.comPrice" placeholder="请输入提成价格" style="width: 100%" :min="0"
-                  :max="99999.99" :precision="2" @keydown="onPriceKeydown" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="医保报销" v-bind="validateInfos.izReimbursement"
-                id="ConfigServiceDirectiveForm-izReimbursement" name="izReimbursement">
-                <j-dict-select-tag type='radio' v-model:value="formData.izReimbursement" dictCode="med_ins_reimb"
-                  allowClear />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="机构优惠" v-bind="validateInfos.izPreferential"
-                id="ConfigServiceDirectiveForm-izPreferential" name="izPreferential">
-                <j-dict-select-tag type='radio' v-model:value="formData.izPreferential"
-                  dictCode="institutional_discount" allowClear />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="周期类型" v-bind="validateInfos.cycleType" id="ConfigServiceDirectiveForm-cycleType"
-                name="cycleType">
-                <j-dict-select-tag type="list" v-model:value="formData.cycleType" dictCode="period_type"
-                  placeholder="请选择周期类型" allowClear @upDictCode="upCycleTypeDictCode" :disabled="!!formData.id" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="服务时长（分钟）" v-bind="validateInfos.serviceDuration"
-                id="ConfigServiceDirectiveForm-serviceDuration" name="serviceDuration">
-                <a-input-number v-model:value="formData.serviceDuration" :min="5" :max="55" :step="5"
-                  placeholder="请输入服务时长（分钟）" allow-clear />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row v-show="!isEditMedia">
-            <a-col :span="24">
-              <a-form-item label="体型标签" id="ConfigServiceDirectiveForm-typeId" :labelCol="labelCol2"
-                :wrapperCol="wrapperCol2" name="typeId">
-                <span v-if="disabled && !formData.bodyTags">-</span>
-                <JCheckbox v-else v-model:value="formData.bodyTags" :orgCode="mainOrgCode" :dictCode="bodyTagDictCode"
-                  @upDictCode="upBodyTagsDictCode" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
-              <a-form-item label="情绪标签" :labelCol="labelCol2" :wrapperCol="wrapperCol2" name="emoTags">
-                <span v-if="disabled && !formData.emotionTags">-</span>
-                <JCheckbox v-else v-model:value="formData.emotionTags" :orgCode="mainOrgCode"
-                  :dictCode="emotionTagDictCode" @upDictCode="upEmotionTagsDictCode" />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="ConfigServiceDirectiveForm-izEnabled"
-                name="izEnabled">
-                <j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
-                  placeholder="请选择是否启用"  allowClear />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row>
-            <a-col :span="12" v-show="showMedia">
-              <a-form-item label="服务指令图片" v-bind="validateInfos.previewFile">
-                <span v-if="disabled && !formData.previewFile">暂无文件</span>
-                <JImageUpload v-else-if="opeType == 'dmlook'" :fileMax="1"
-                  :value="mediaApiAddress + formData.previewFile">
-                </JImageUpload>
-                <JImageUpload v-else :fileMax="1" v-model:value="formData.previewFile"></JImageUpload>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="服务指令描述" v-bind="validateInfos.serviceContent"
-                id="ConfigServiceDirectiveForm-serviceContent" name="serviceContent">
-                <a-textarea v-model:value="formData.serviceContent" :autosize="true" placeholder="请输入服务指令描述"
-                  :maxlength="200" :showCount="true" />
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row v-show="!disabled && showMedia">
-            <a-col :span="12">
-              <a-form-item label="指令音频文件" v-bind="validateInfos.mp3File" id="ConfigServiceDirectiveForm-mp3File">
-                <j-upload v-model:value="formData.mp3File" accept=".mp3" :maxCount="1"></j-upload>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="指令视频文件" v-bind="validateInfos.mp4File" id="ConfigServiceDirectiveForm-mp4File">
-                <j-upload v-model:value="formData.mp4File" accept=".mp4" :maxCount="1"></j-upload>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </template>
-    </JFormContainer>
-    <JFormContainer style="margin-top: -40px;" v-show="showMedia">
-      <template #detail>
-        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
-          name="ConfigServiceDirectiveForm">
-          <a-row>
-            <a-col :span="12" v-if="!!formData.mp3File">
-              <a-form-item label="指令音频预览" id="ConfigServiceDirectiveForm-mp3File">
-                <audio controls disabled="false">
-                  <source
-                    :src="opeType == 'dmlook' ? mediaApiAddress + formData.mp3File : getFileAccessHttpUrl(formData.mp3File)">
-                </audio>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12" v-if="disabled && !formData.mp3File">
-              <a-form-item label="指令音频预览">
-                <span>暂无文件</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12" v-if="!!formData.mp4File" :push="!!formData.mp3File ? 0 : 12">
-              <a-form-item label="指令视频预览" id="ConfigServiceDirectiveForm-mp4File">
-                <video controls>
-                  <source
-                    :src="opeType == 'dmlook' ? mediaApiAddress + formData.mp4File : getFileAccessHttpUrl(formData.mp4File)">
-                </video>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12" v-if="disabled && !formData.mp3File">
-              <a-form-item label="指令视频预览">
-                <span>暂无文件</span>
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-row>
-            <a-col :span="12">
-              <a-form-item label="即时指令图标" v-bind="validateInfos.immediateFile">
-                <span v-if="disabled && !formData.immediateFile">暂无文件</span>
-                <JImageUpload v-else-if="opeType == 'dmlook'" :fileMax="1"
-                  :value="mediaApiAddress + formData.immediateFile">
-                </JImageUpload>
-                <JImageUpload v-else :fileMax="1" v-model:value="formData.immediateFile"></JImageUpload>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </template>
-    </JFormContainer>
+    <div style="background-color: #fff;border-radius: 10px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
+      <JFormContainer :disabled="disabled">
+        <template #detail>
+          <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
+            name="ConfigService2DirectiveForm" style="padding: 20px 0px;">
+            <a-row v-show="!isEditMedia">
+              <a-col :span="12" v-show="false">
+                <a-form-item label="分类标签" v-bind="validateInfos.instructionTagId"
+                  id="ConfigServiceDirectiveForm-instructionTagId" name="instructionTagId">
+                  <j-dict-select-tag v-model:value="formData.instructionTagId" :orgCode="mainOrgCode"
+                    :dictCode="`nu_config_service_instruction_tag,instruction_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`"
+                    placeholder="请选择分类标签" allowClear @upDictCode="upInstructionDictCode" :disabled="!!formData.id" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" v-show="false">
+                <a-form-item label="服务类别" v-bind="validateInfos.categoryId" id="ConfigServiceDirectiveForm-categoryId"
+                  name="categoryId">
+                  <j-dict-select-tag type="list" v-model:value="formData.categoryId" :disabled="!!formData.id"
+                    :orgCode="mainOrgCode" :dictCode="categoryDictCode" placeholder="请选择服务类别" allow-clear
+                    @upDictCode="upCategoryDictCode" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" v-show="false">
+                <a-form-item label="服务类型" v-bind="validateInfos.typeId" id="ConfigServiceDirectiveForm-typeId"
+                  name="typeId">
+                  <j-dict-select-tag type="list" v-model:value="formData.typeId" :dictCode="typeDictCode"
+                    :orgCode="mainOrgCode" :disabled="!!formData.id" placeholder="请选择服务类型" allowClear
+                    @upDictCode="upTypeDictCode" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="服务指令名称" v-bind="validateInfos.directiveName"
+                  id="ConfigServiceDirectiveForm-directiveName" name="directiveName">
+                  <a-input v-model:value="formData.directiveName" placeholder="请输入服务指令名称" allow-clear :maxlength="20"
+                    :showCount="true" :disabled="!!formData.id"></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="机构优惠" v-bind="validateInfos.izPreferential"
+                  id="ConfigServiceDirectiveForm-izPreferential" name="izPreferential">
+                  <j-dict-select-tag type='radio' v-model:value="formData.izPreferential"
+                    dictCode="institutional_discount" allowClear />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="周期类型" v-bind="validateInfos.cycleType" id="ConfigServiceDirectiveForm-cycleType"
+                  name="cycleType">
+                  <j-dict-select-tag type="list" v-model:value="formData.cycleType" dictCode="period_type"
+                    placeholder="请选择周期类型" allowClear @upDictCode="upCycleTypeDictCode" :disabled="!!formData.id" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="ConfigServiceDirectiveForm-izEnabled"
+                  name="izEnabled">
+                  <j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
+                    placeholder="请选择是否启用"  allowClear />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="收费价格(元)" v-bind="validateInfos.tollPrice" id="ConfigServiceDirectiveForm-tollPrice"
+                  name="tollPrice">
+                  <a-input-number v-model:value="formData.tollPrice" placeholder="请输入收费价格" style="width: 100%" :min="0"
+                    :max="99999.99" :precision="2" @keydown="onPriceKeydown" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="医保报销" v-bind="validateInfos.izReimbursement"
+                  id="ConfigServiceDirectiveForm-izReimbursement" name="izReimbursement">
+                  <j-dict-select-tag type='radio' v-model:value="formData.izReimbursement" dictCode="med_ins_reimb"
+                    allowClear />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="提成价格(元)" v-bind="validateInfos.comPrice" id="ConfigServiceDirectiveForm-comPrice"
+                  name="comPrice">
+                  <a-input-number v-model:value="formData.comPrice" placeholder="请输入提成价格" style="width: 100%" :min="0"
+                    :max="99999.99" :precision="2" @keydown="onPriceKeydown" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="服务时长" v-bind="validateInfos.serviceDuration"
+                  id="ConfigServiceDirectiveForm-serviceDuration" name="serviceDuration">
+                  <a-input-number v-model:value="formData.serviceDuration" :min="5" :max="55" :step="5" addon-after="分钟"
+                    placeholder="请输入服务时长（分钟）" allow-clear @keydown="onDurationKeydown" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row v-show="!isEditMedia"
+              style="background-color: #f6faff ; border-top: 1px solid #F0F0F0;border-bottom: 1px solid #F0F0F0;">
+              <a-col :span="12" style="border-right: 1px solid #F0F0F0;padding-top: 20px;">
+                <a-form-item label="体型标签" id="ConfigServiceDirectiveForm-typeId" name="typeId">
+                  <span v-if="disabled && !formData.bodyTags">-</span>
+                  <JCheckbox v-else v-model:value="formData.bodyTags" :orgCode="mainOrgCode" :dictCode="bodyTagDictCode"
+                    @upDictCode="upBodyTagsDictCode" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" style="padding-top: 20px;">
+                <a-form-item label="情绪标签" name="emoTags">
+                  <span v-if="disabled && !formData.emotionTags">-</span>
+                  <JCheckbox v-else v-model:value="formData.emotionTags" :orgCode="mainOrgCode"
+                    :dictCode="emotionTagDictCode" @upDictCode="upEmotionTagsDictCode" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row style="padding: 20px;">
+              <a-col :span="6">
+                <DirectiveRadioCom :directiveMediaBtnValue="directiveMediaBtnValue" @change="mediaBtnChanged">
+                </DirectiveRadioCom>
+              </a-col>
+            </a-row>
+            <a-row style="padding: 0px 20px;">
+              <a-col :span="24" v-show="directiveMediaBtnValue == 0">
+                <a-upload-dragger name="file" v-model:fileList="fileList" :multiple="false" :show-upload-list="false"
+                  :before-upload="beforeUpload" style="background-color: #F6FAFF;">
+                  <div class="upload-area">
+                    <p class="upload-text">点击或者拖拽上传</p>
+                    <div class="upload-icon">
+                      <img src="./pictype.png" alt="MP3 icon" style="width: 40px; height: 40px;" />
+                    </div>
+                    <p class="upload-hint">
+                      <span>文件大小不超过10MB</span>
+                      <span class="divider">|</span>
+                      <a-tooltip placement="top">
+                        <template #title>
+                          这里是格式说明的具体内容
+                        </template>
+                        <span>
+                          <QuestionCircleOutlined style="margin-right: 0px;" />
+                          格式说明
+                        </span>
+                      </a-tooltip>
+                    </p>
+                  </div>
+                </a-upload-dragger>
+              </a-col>
+              <a-col :span="24" v-show="directiveMediaBtnValue == 1">
+                <a-upload-dragger name="file" v-model:fileList="fileList" :multiple="false" :show-upload-list="false"
+                  :before-upload="beforeUpload" style="background-color: #F6FAFF;">
+                  <div class="upload-area">
+                    <p class="upload-text">点击或者拖拽上传</p>
+                    <div class="upload-icon">
+                      <img src="./mp3type.png" alt="MP3 icon" style="width: 40px; height: 40px;" />
+                    </div>
+                    <p class="upload-hint">
+                      <span>文件大小不超过10MB</span>
+                      <span class="divider">|</span>
+                      <a-tooltip placement="top">
+                        <template #title>
+                          这里是格式说明的具体内容
+                        </template>
+                        <span>
+                          <QuestionCircleOutlined style="margin-right: 0px;" />
+                          格式说明
+                        </span>
+                      </a-tooltip>
+                    </p>
+                  </div>
+                </a-upload-dragger>
+              </a-col>
+              <a-col :span="24" v-show="directiveMediaBtnValue == 2">
+                <a-upload-dragger name="file" v-model:fileList="fileList" :multiple="false" :show-upload-list="false"
+                  :before-upload="beforeUpload" style="background-color: #F6FAFF;">
+                  <div class="upload-area">
+                    <p class="upload-text">点击或者拖拽上传</p>
+                    <div class="upload-icon">
+                      <img src="./mp4type.png" alt="MP3 icon" style="width: 40px; height: 40px;" />
+                    </div>
+                    <p class="upload-hint">
+                      <span>文件大小不超过10MB</span>
+                      <span class="divider">|</span>
+                      <a-tooltip placement="top">
+                        <template #title>
+                          这里是格式说明的具体内容
+                        </template>
+                        <span>
+                          <QuestionCircleOutlined style="margin-right: 0px;" />
+                          格式说明
+                        </span>
+                      </a-tooltip>
+                    </p>
+                  </div>
+                </a-upload-dragger>
+              </a-col>
+              <a-col :span="24" v-show="directiveMediaBtnValue == 3">
+                <a-upload-dragger name="file" v-model:fileList="fileList" :multiple="false" :show-upload-list="false"
+                  :before-upload="beforeUpload" style="background-color: #F6FAFF;">
+                  <div class="upload-area">
+                    <p class="upload-text">点击或者拖拽上传</p>
+                    <div class="upload-icon">
+                      <img src="./pictype.png" alt="MP3 icon" style="width: 40px; height: 40px;" />
+                    </div>
+                    <p class="upload-hint">
+                      <span>文件大小不超过10MB</span>
+                      <span class="divider">|</span>
+                      <a-tooltip placement="top">
+                        <template #title>
+                          这里是格式说明的具体内容
+                        </template>
+                        <span>
+                          <QuestionCircleOutlined style="margin-right: 0px;" />
+                          格式说明
+                        </span>
+                      </a-tooltip>
+                    </p>
+                  </div>
+                </a-upload-dragger>
+              </a-col>
+            </a-row>
+            <a-row style="padding: 20px;">
+              <a-col :span="2">
+                <!-- 相对定位的容器 -->
+                <div class="description-container">
+                  <a-button @click="toggleDescription">服务指令描述</a-button>
+                  <div v-show="showDescription" class="description-box">
+                    <div class="box-header">
+                      <span class="title">服务指令描述</span>
+                      <span class="collapse-icon" @click="toggleDescription">
+                        <DownOutlined style="margin-right: 3px;" />收起
+                      </span>
+                    </div>
+                    <div>
+                      <a-textarea v-model:value="formData.serviceContent" placeholder="请输入服务指令描述" :maxlength="200"
+                        :rows="3" :autosize="{ minRows: 3 }" :showCount="true" />
+                    </div>
+                    <!-- <div style="margin-top: 60px;">
+                      <a-button type="primary" class="confirm-btn">确认</a-button>
+                    </div> -->
+                  </div>
+                </div>
+              </a-col>
+            </a-row>
+            <a-row style="margin-top: 20px;">
+              <a-col :span="12" v-show="showMedia">
+                <a-form-item label="服务指令图片" v-bind="validateInfos.previewFile">
+                  <span v-if="disabled && !formData.previewFile">暂无文件</span>
+                  <JImageUpload v-else-if="opeType == 'dmlook'" :fileMax="1"
+                    :value="mediaApiAddress + formData.previewFile">
+                  </JImageUpload>
+                  <JImageUpload v-else :fileMax="1" v-model:value="formData.previewFile"></JImageUpload>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="服务指令描述" v-bind="validateInfos.serviceContent"
+                  id="ConfigServiceDirectiveForm-serviceContent" name="serviceContent">
+                  <a-textarea v-model:value="formData.serviceContent" :autosize="true" placeholder="请输入服务指令描述"
+                    :maxlength="200" :showCount="true" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row v-show="!disabled && showMedia">
+              <a-col :span="12">
+                <a-form-item label="指令音频文件" v-bind="validateInfos.mp3File" id="ConfigServiceDirectiveForm-mp3File">
+                  <j-upload v-model:value="formData.mp3File" accept=".mp3" :maxCount="1"
+                    :beforeUpload="checkMp3"></j-upload>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="指令视频文件" v-bind="validateInfos.mp4File" id="ConfigServiceDirectiveForm-mp4File">
+                  <j-upload v-model:value="formData.mp4File" accept=".mp4" :maxCount="1"
+                    :beforeUpload="checkMp4"></j-upload>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </template>
+      </JFormContainer>
+      <JFormContainer style="margin-top: -40px;" v-show="showMedia">
+        <template #detail>
+          <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :colon="false"
+            name="ConfigServiceDirectiveForm">
+            <a-row>
+              <a-col :span="12" v-if="!!formData.mp3File">
+                <a-form-item label="指令音频预览" id="ConfigServiceDirectiveForm-mp3File">
+                  <audio controls disabled="false">
+                    <source
+                      :src="opeType == 'dmlook' ? mediaApiAddress + formData.mp3File : getFileAccessHttpUrl(formData.mp3File)">
+                  </audio>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" v-if="disabled && !formData.mp3File">
+                <a-form-item label="指令音频预览">
+                  <span>暂无文件</span>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" v-if="!!formData.mp4File" :push="!!formData.mp3File ? 0 : 12">
+                <a-form-item label="指令视频预览" id="ConfigServiceDirectiveForm-mp4File">
+                  <video controls>
+                    <source
+                      :src="opeType == 'dmlook' ? mediaApiAddress + formData.mp4File : getFileAccessHttpUrl(formData.mp4File)">
+                  </video>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" v-if="disabled && !formData.mp3File">
+                <a-form-item label="指令视频预览">
+                  <span>暂无文件</span>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="即时指令图标" v-bind="validateInfos.immediateFile">
+                  <span v-if="disabled && !formData.immediateFile">暂无文件</span>
+                  <JImageUpload v-else-if="opeType == 'dmlook'" :fileMax="1"
+                    :value="mediaApiAddress + formData.immediateFile">
+                  </JImageUpload>
+                  <JImageUpload v-else :fileMax="1" v-model:value="formData.immediateFile"></JImageUpload>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </template>
+      </JFormContainer>
+    </div>
   </a-spin>
 </template>
 
@@ -199,7 +330,17 @@ import { Form } from 'ant-design-vue';
 import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
 import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
 import { env } from 'process';
+import DirectiveRadioCom from './DirectiveRadioCom.vue'
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import { DownOutlined } from '@ant-design/icons-vue';
 
+const showDescription = ref(false);
+
+// 切换悬浮容器的显示状态
+const toggleDescription = () => {
+  showDescription.value = !showDescription.value;
+};
+const fileList = ref([])
 const onPriceKeydown = (e: KeyboardEvent) => {
   const key = e.key;
   // 放行控制键
@@ -217,6 +358,25 @@ const onPriceKeydown = (e: KeyboardEvent) => {
     e.preventDefault();
   }
 };
+
+const onDurationKeydown = (e: KeyboardEvent) => {
+  const key = e.key;
+  // 放行控制键
+  if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(key)) return;
+  // 只能输数字和点
+  if (!/[\d.]/.test(key)) {
+    e.preventDefault();
+    return;
+  }
+  const input = e.target as HTMLInputElement;
+  const { value, selectionStart: s, selectionEnd: t } = input;
+  const next = value.slice(0, s!) + key + value.slice(t!);
+  // 整数最多5位，小数最多2位
+  if (!/^\d{0,2}$/.test(next)) {
+    e.preventDefault();
+  }
+};
+
 const props = defineProps({
   formDisabled: { type: Boolean, default: false },
   formData: { type: Object, default: () => ({}) },
@@ -225,7 +385,22 @@ const props = defineProps({
   mediaApiAddress: '',//指令资源请求地址
   opeType: 'look',
 });
-
+const checkMp3 = (file) => {
+  const isPDF = file.type === 'application/mp3' || file.name.endsWith('.mp3');
+  if (!isPDF) {
+    createMessage.error('只能上传 mp3 文件！');
+    return false; // 阻止上传
+  }
+  return true;
+};
+const checkMp4 = (file) => {
+  const isPDF = file.type === 'application/mp4' || file.name.endsWith('.mp4');
+  if (!isPDF) {
+    createMessage.error('只能上传 PDF mp4');
+    return false; // 阻止上传
+  }
+  return true;
+};
 const bodyTagDictCode = ref(`nu_config_body_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`)
 const emotionTagDictCode = ref(`nu_config_emotion_tag,tag_name,id,del_flag = 0 and iz_enabled = 0 order by sort asc`)
 const formRef = ref();
@@ -258,10 +433,8 @@ const formData = reactive<Record<string, any>>({
   immediateFile: '',
 });
 const { createMessage } = useMessage();
-const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } });
-const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
-const labelCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 3 } });
-const wrapperCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 20 } });
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 19 } });
 const confirmLoading = ref<boolean>(false);
 const isEditMedia = ref(false)
 const instructionTagName = ref('')
@@ -578,6 +751,12 @@ function syncMediaForAllBizFunc() {
     });
 }
 
+const directiveMediaBtnValue = ref(0)
+function mediaBtnChanged(v_) {
+  directiveMediaBtnValue.value = v_
+
+}
+
 onMounted(() => {
 
 })
@@ -595,4 +774,119 @@ defineExpose({
 .antd-modal-form {
   padding: 14px;
 }
-</style>
+
+:deep .ant-checkbox-wrapper {
+  margin-top: 5px;
+  margin-bottom: 10px;
+  width: 30%;
+}
+
+.upload-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-icon {
+  margin-bottom: 16px;
+}
+
+.upload-text {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 8px;
+}
+
+.upload-hint {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.divider {
+  color: rgba(0, 0, 0, 0.2);
+}
+
+.description-container {
+  position: relative;
+  z-index: 1000;
+}
+
+.description-box {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  background: #f6faff;
+  border-radius: 4px;
+  padding: 12px;
+  width: 43vw;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  margin-bottom: 8px;
+}
+
+.box-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 8px;
+  margin-bottom: 12px;
+}
+
+.title {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.collapse-icon {
+  color: #1890ff;
+  cursor: pointer;
+}
+
+.content {
+  background: #fff;
+  border-radius: 4px;
+  padding: 12px;
+  position: relative;
+}
+
+.instruction {
+  color: #8c8c8c;
+  margin-bottom: 30px;
+}
+
+.confirm-btn {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  background: #1890ff;
+  border-radius: 20px;
+}
+
+/* 渐隐渐现动画 */
+.slide-fade-enter-active {
+  transition: opacity 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: opacity 0.3s cubic-bezier(0.5, 0, 0.8, 1);
+}
+
+/* 进入时从透明开始 */
+.slide-fade-enter-from {
+  opacity: 0;
+}
+
+/* 离开时渐变到透明 */
+.slide-fade-leave-to {
+  opacity: 0;
+}
+
+/* 确保容器初始状态无变形 */
+.slide-fade-enter-to,
+.slide-fade-leave-from {
+  opacity: 1;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue b/src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue
index feac11b..4aa0245 100644
--- a/src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue
+++ b/src/views/services/serviceDirective/components/ConfigServiceDirectiveModal.vue
@@ -15,8 +15,8 @@
     :formBpm="false" :mainOrgCode="mainOrgCode"></ConfigServiceDirectiveForm>
 </a-spin>
 </j-modal> -->
-  <a-drawer :title="title" width="70vw" v-model:visible="visible" :closable="true"
-    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+  <a-drawer :title="title" width="80vw" v-model:visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" @close="handleCancel" :bodyStyle="{ background: 'linear-gradient(135deg, #f1f7ff 0%, #f1f7ff 100%)' }">
     <a-spin :spinning="loading">
       <ConfigServiceDirectiveForm ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit"
         :formBpm="false" :mainOrgCode="mainOrgCode" :mediaApiAddress="mediaApiAddress" :opeType="opeType">
@@ -273,4 +273,5 @@ defineExpose({
   display: none !important;
 }
 </style>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+</style>
diff --git a/src/views/services/serviceDirective/components/DirectiveRadioCom.vue b/src/views/services/serviceDirective/components/DirectiveRadioCom.vue
new file mode 100644
index 0000000..da0ee8b
--- /dev/null
+++ b/src/views/services/serviceDirective/components/DirectiveRadioCom.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="tab-container" :class="{ compact }">
+    <div 
+      v-for="(tab, index) in tabs" 
+      :key="index"
+      class="tab-item"
+      :class="{ active: activeTab === index }"
+      @click="handleTabClick(index)"
+    >
+      <span class="tab-text">{{ tab }}</span>
+      <div v-if="index < tabs.length - 1" class="tab-divider"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  directiveMediaBtnValue: {
+    type: Number,
+    default: 0
+  },
+  compact: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:directiveMediaBtnValue', 'change'])
+
+const tabs = ['服务指令图片', '指令音频文件', '指令视频文件', '即时指令图标']
+const activeTab = ref(props.directiveMediaBtnValue)
+
+watch(() => props.directiveMediaBtnValue, (newVal) => {
+  activeTab.value = newVal
+})
+
+const handleTabClick = (index) => {
+  activeTab.value = index
+  emit('update:directiveMediaBtnValue', index)
+  emit('change', index)
+}
+</script>
+
+<style scoped>
+.tab-container {
+  display: inline-flex;
+  background-color: #f1f7ff;
+  padding: 4px;
+  border-radius: 8px;
+  white-space: nowrap;
+}
+
+.tab-item {
+  position: relative;
+  padding: 6px 12px;
+  cursor: pointer;
+  color: #666;
+  font-size: 13px;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+}
+
+.tab-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+}
+
+.tab-item:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.tab-item.active {
+  background-color: #fff;
+  color: #333;
+  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  z-index: 1;
+}
+
+/* .tab-divider {
+  position: absolute;
+  right: 0;
+  top: 20%;
+  height: 60%;
+  width: 1px;
+  background-color: rgba(0, 0, 0, 0.1);
+  z-index: 2;
+} */
+
+/* 紧凑模式 */
+.tab-container.compact .tab-item {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.tab-container.compact .tab-text {
+  max-width: 80px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/services/serviceDirective/components/mp3type.png b/src/views/services/serviceDirective/components/mp3type.png
new file mode 100644
index 0000000..5230378
Binary files /dev/null and b/src/views/services/serviceDirective/components/mp3type.png differ
diff --git a/src/views/services/serviceDirective/components/mp4type.png b/src/views/services/serviceDirective/components/mp4type.png
new file mode 100644
index 0000000..8970b41
Binary files /dev/null and b/src/views/services/serviceDirective/components/mp4type.png differ
diff --git a/src/views/services/serviceDirective/components/pictype.png b/src/views/services/serviceDirective/components/pictype.png
new file mode 100644
index 0000000..2667330
Binary files /dev/null and b/src/views/services/serviceDirective/components/pictype.png differ