平台设置-zl

src/api/system/platformConfig/index.ts

@@ -42,3 +42,12 @@ export function delPlatformConfig(id: number | number[]) {
     method: 'delete'
   });
 }
+
+// 批量保存平台配置
+export function saveBatchPlatformConfig(data: any[]) {
+  return request({
+    url: '/system/platformConfig/saveBatch',
+    method: 'post',
+    data: data
+  });
+}

src/assets/styles/sidebar.scss

@@ -113,6 +113,7 @@
       border-radius: 8px;
       height: 45px;
       margin: 1px 5px 1px 5px;
+      padding-left: 45px !important;
       &:not(.is-active):hover {
         background-color: rgba(0, 0, 0, 0.1) !important;
       }

src/views/system/aboutUs/index.vue

@@ -1,42 +1,23 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="标题" prop="title">
-              <el-input v-model="queryParams.title" placeholder="请输入标题" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
-
     <el-card shadow="hover">
       <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:about:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:about:remove']">删除</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
+        <div class="card-header">
+          <span class="title">关于我们信息列表</span>
+          <div class="header-actions">
+            <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
+            <el-button type="success" icon="Link" @click="handleGenerateLink">生成链接</el-button>
+            <el-button icon="Refresh" circle @click="getList" />
+          </div>
+        </div>
       </template>
 
-      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="标题" prop="title" />
-        <el-table-column label="排序" prop="sort" width="80" />
+      <el-table v-loading="loading" :data="dataList" border>
+        <el-table-column label="标题" prop="title" align="center" />
         <el-table-column label="操作" width="150" align="center">
           <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:about:edit']">修改</el-button>
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:about:remove']">删除</el-button>
+            <el-button link type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -51,7 +32,7 @@
           <el-input v-model="form.title" placeholder="请输入标题" />
         </el-form-item>
         <el-form-item label="内容" prop="content">
-          <el-input v-model="form.content" type="textarea" :rows="6" placeholder="请输入内容" />
+          <editor v-model="form.content" :min-height="300" />
         </el-form-item>
         <el-form-item label="排序" prop="sort">
           <el-input-number v-model="form.sort" :min="0" />
@@ -70,20 +51,15 @@
 <script setup name="AboutUs" lang="ts">
 import { listAbout, getAbout, addAbout, updateAbout, delAbout } from '@/api/system/about';
 import { ComponentInternalInstance, getCurrentInstance, ref, reactive, toRefs } from 'vue';
-import { ElForm } from 'element-plus';
+import type { FormInstance } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const dataList = ref([]);
 const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
 const total = ref(0);
 
-const queryFormRef = ref(ElForm);
-const formRef = ref(ElForm);
+const formRef = ref<FormInstance>();
 
 const dialog = reactive({ visible: false, title: '' });
 
@@ -91,8 +67,7 @@ const data = reactive({
   form: {} as any,
   queryParams: {
     pageNum: 1,
-    pageSize: 10,
-    title: undefined
+    pageSize: 10
   },
   rules: {
     title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
@@ -110,22 +85,6 @@ const getList = async () => {
   loading.value = false;
 };
 
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getList();
-};
-
-const resetQuery = () => {
-  queryFormRef.value.resetFields();
-  handleQuery();
-};
-
-const handleSelectionChange = (selection: any[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
-
 const reset = () => {
   form.value = {
     id: undefined,
@@ -144,37 +103,36 @@ const handleAdd = () => {
 
 const handleUpdate = async (row: any) => {
   reset();
-  const id = row.id || ids.value[0];
-  const res = await getAbout(id);
+  const res = await getAbout(row.id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
   dialog.title = '修改关于我们';
 };
 
-const submitForm = () => {
-  formRef.value.validate(async (valid: boolean) => {
-    if (valid) {
-      if (form.value.id) {
-        await updateAbout(form.value);
-        proxy?.$modal.msgSuccess('修改成功');
-      } else {
-        await addAbout(form.value);
-        proxy?.$modal.msgSuccess('新增成功');
-      }
-      dialog.visible = false;
-      getList();
-    }
-  });
+const submitForm = async () => {
+  await formRef.value?.validate();
+  if (form.value.id) {
+    await updateAbout(form.value);
+    proxy?.$modal.msgSuccess('修改成功');
+  } else {
+    await addAbout(form.value);
+    proxy?.$modal.msgSuccess('新增成功');
+  }
+  dialog.visible = false;
+  getList();
 };
 
-const handleDelete = async (row?: any) => {
-  const deleteIds = row?.id || ids.value;
+const handleDelete = async (row: any) => {
   await proxy?.$modal.confirm('是否确认删除？');
-  await delAbout(deleteIds);
+  await delAbout(row.id);
   proxy?.$modal.msgSuccess('删除成功');
   getList();
 };
 
+const handleGenerateLink = () => {
+  proxy?.$modal.msgSuccess('链接已生成');
+};
+
 const cancel = () => {
   dialog.visible = false;
   reset();
@@ -182,3 +140,19 @@ const cancel = () => {
 
 getList();
 </script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.card-header .title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+</style>

src/views/system/basicSetting/index.vue

@@ -2,157 +2,292 @@
   <div class="p-2">
     <el-card shadow="hover">
       <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:platformConfig:add']">新增</el-button>
+        <div class="card-header">
+          <span class="title">平台基本信息管理</span>
+        </div>
+      </template>
+
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" v-loading="loading">
+        <!-- 平台名称 -->
+        <el-form-item label="平台名称" prop="platformName">
+          <el-input v-model="form.platformName" placeholder="请输入平台名称" />
+        </el-form-item>
+
+        <!-- 第一行：所属公司、平台简称、站点域名 -->
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="所属公司" prop="company">
+              <el-input v-model="form.company" placeholder="请输入所属公司" />
+            </el-form-item>
           </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:platformConfig:remove']">删除</el-button>
+          <el-col :span="8">
+            <el-form-item label="平台简称" prop="shortName">
+              <el-input v-model="form.shortName" placeholder="请输入平台简称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="站点域名" prop="domain">
+              <el-input v-model="form.domain" placeholder="请输入站点域名" />
+            </el-form-item>
           </el-col>
         </el-row>
-      </template>
 
-      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="配置键" prop="configKey" />
-        <el-table-column label="配置名称" prop="name" />
-        <el-table-column label="配置值" prop="value" show-overflow-tooltip />
-        <el-table-column label="操作" width="150" align="center">
-          <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:platformConfig:edit']">修改</el-button>
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:platformConfig:remove']">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-    </el-card>
+        <!-- 第二行：ICP证书号、经营许可证、客服邮箱 -->
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="ICP证书号" prop="icpNo">
+              <el-input v-model="form.icpNo" placeholder="请输入ICP证书号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="经营许可证" prop="license">
+              <el-input v-model="form.license" placeholder="请输入经营许可证">
+                <template #suffix>
+                  <el-tooltip content="经营许可证编号" placement="top">
+                    <el-icon><QuestionFilled /></el-icon>
+                  </el-tooltip>
+                </template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="客服邮箱" prop="serviceEmail">
+              <el-input v-model="form.serviceEmail" placeholder="请输入客服邮箱" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 第三行：客服时间、客服图标、客服链接 -->
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="客服时间" prop="serviceTime">
+              <el-input v-model="form.serviceTime" placeholder="如：08:30-20:00" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="客服图标" prop="serviceIcon">
+              <el-radio-group v-model="form.serviceIcon">
+                <el-radio value="code">code</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="客服链接" prop="serviceLink">
+              <el-input v-model="form.serviceLink" placeholder="请输入客服链接" />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-    <!-- 添加或修改对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="配置键" prop="configKey">
-          <el-input v-model="form.configKey" placeholder="请输入配置键" />
+        <!-- 第四行：反馈图标、反馈链接、公众号图标 -->
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="反馈图标" prop="feedbackIcon">
+              <el-radio-group v-model="form.feedbackIcon">
+                <el-radio value="dashboard">dashboard</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="反馈链接" prop="feedbackLink">
+              <el-input v-model="form.feedbackLink" placeholder="请输入在线反馈链接" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="公众号图标" prop="wechatIcon">
+              <el-radio-group v-model="form.wechatIcon">
+                <el-radio value="color">color</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 第五行：公众号链接、微博图标、微博链接 -->
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="公众号链接" prop="wechatLink">
+              <el-input v-model="form.wechatLink" placeholder="请输入公众号链接" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="微博图标" prop="weiboIcon">
+              <el-radio-group v-model="form.weiboIcon">
+                <el-radio value="radio">radio</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="微博链接" prop="weiboLink">
+              <el-input v-model="form.weiboLink" placeholder="请输入微博链接" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 客服热线 -->
+        <el-form-item label="客服热线" prop="servicePhone">
+          <el-input v-model="form.servicePhone" placeholder="请输入客服热线" />
         </el-form-item>
-        <el-form-item label="配置名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入配置名称" />
+
+        <!-- 详细页标题 -->
+        <el-form-item label="详细页标题" prop="detailTitle">
+          <el-input v-model="form.detailTitle" type="textarea" :rows="2" placeholder="请输入详细页标题">
+            <template #suffix>
+              <el-tooltip content="详细页标题说明" placement="top">
+                <el-icon><QuestionFilled /></el-icon>
+              </el-tooltip>
+            </template>
+          </el-input>
         </el-form-item>
-        <el-form-item label="配置值" prop="value">
-          <el-input v-model="form.value" type="textarea" placeholder="请输入配置值" />
+
+        <!-- 商品关键词 -->
+        <el-form-item label="商品关键词" prop="keywords">
+          <el-input v-model="form.keywords" type="textarea" :rows="2" placeholder="请输入商品关键词">
+            <template #suffix>
+              <el-tooltip content="商品关键词说明" placement="top">
+                <el-icon><QuestionFilled /></el-icon>
+              </el-tooltip>
+            </template>
+          </el-input>
+        </el-form-item>
+
+        <!-- 图片上传：平台LOGO、平台图标、默认头像 -->
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="平台LOGO" prop="logo">
+              <image-upload v-model="form.logo" :limit="1" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="平台图标" prop="icon">
+              <image-upload v-model="form.icon" :limit="1" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="默认头像" prop="defaultAvatar">
+              <image-upload v-model="form.defaultAvatar" :limit="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 小程序二维码 -->
+        <el-form-item label="小程序二维码" prop="miniQrcode">
+          <image-upload v-model="form.miniQrcode" :limit="1" />
+        </el-form-item>
+
+        <!-- 内容 -->
+        <el-form-item label="内容" prop="content">
+          <el-input v-model="form.content" type="textarea" :rows="3" placeholder="请输入内容" />
+        </el-form-item>
+
+        <!-- 详细页描述 -->
+        <el-form-item label="详细页描述" prop="detailDesc">
+          <el-input v-model="form.detailDesc" type="textarea" :rows="3" placeholder="请输入详细页描述" />
+        </el-form-item>
+
+        <!-- 提交按钮 -->
+        <el-form-item>
+          <el-button type="primary" @click="submitForm" v-hasPermi="['system:platformConfig:edit']">提交</el-button>
         </el-form-item>
       </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    </el-card>
   </div>
 </template>
 
 <script setup name="BasicSetting" lang="ts">
-import { listPlatformConfig, getPlatformConfig, addPlatformConfig, updatePlatformConfig, delPlatformConfig } from '@/api/system/platformConfig';
-import { ComponentInternalInstance, getCurrentInstance, ref, reactive, toRefs } from 'vue';
-import { ElForm } from 'element-plus';
+import { listPlatformConfig, saveBatchPlatformConfig } from '@/api/system/platformConfig';
+import { ComponentInternalInstance, getCurrentInstance, ref, reactive, toRefs, onMounted } from 'vue';
+import type { FormInstance } from 'element-plus';
+import { QuestionFilled } from '@element-plus/icons-vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-const dataList = ref([]);
 const loading = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-
-const formRef = ref(ElForm);
-
-const dialog = reactive({ visible: false, title: '' });
+const formRef = ref<FormInstance>();
+const configList = ref<any[]>([]);
 
 const data = reactive({
-  form: {} as any,
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    configType: '0'
-  },
+  form: {
+    platformName: '',
+    company: '',
+    shortName: '',
+    domain: '',
+    icpNo: '',
+    license: '',
+    serviceEmail: '',
+    serviceTime: '',
+    serviceIcon: 'code',
+    serviceLink: '',
+    feedbackIcon: 'dashboard',
+    feedbackLink: '',
+    wechatIcon: 'color',
+    wechatLink: '',
+    weiboIcon: 'radio',
+    weiboLink: '',
+    servicePhone: '',
+    detailTitle: '',
+    keywords: '',
+    logo: '',
+    icon: '',
+    defaultAvatar: '',
+    miniQrcode: '',
+    content: '',
+    detailDesc: ''
+  } as any,
   rules: {
-    configKey: [{ required: true, message: '配置键不能为空', trigger: 'blur' }],
-    name: [{ required: true, message: '配置名称不能为空', trigger: 'blur' }],
-    value: [{ required: true, message: '配置值不能为空', trigger: 'blur' }]
+    platformName: [{ required: true, message: '平台名称不能为空', trigger: 'blur' }],
+    servicePhone: [{ required: true, message: '客服热线不能为空', trigger: 'blur' }]
   }
 });
 
-const { queryParams, form, rules } = toRefs(data);
+const { form, rules } = toRefs(data);
 
 const getList = async () => {
   loading.value = true;
-  const res = await listPlatformConfig(queryParams.value);
-  dataList.value = res.rows;
-  total.value = res.total;
-  loading.value = false;
-};
-
-const handleSelectionChange = (selection: any[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
-
-const reset = () => {
-  form.value = {
-    id: undefined,
-    configType: '0',
-    configKey: undefined,
-    name: undefined,
-    value: undefined
-  };
-  formRef.value?.resetFields();
-};
-
-const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加基本配置';
-};
-
-const handleUpdate = async (row: any) => {
-  reset();
-  const id = row.id || ids.value[0];
-  const res = await getPlatformConfig(id);
-  Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改基本配置';
-};
-
-const submitForm = () => {
-  formRef.value.validate(async (valid: boolean) => {
-    if (valid) {
-      if (form.value.id) {
-        await updatePlatformConfig(form.value);
-        proxy?.$modal.msgSuccess('修改成功');
-      } else {
-        await addPlatformConfig(form.value);
-        proxy?.$modal.msgSuccess('新增成功');
+  try {
+    const res = await listPlatformConfig({ configType: '0', pageNum: 1, pageSize: 100 });
+    configList.value = res.rows || [];
+    configList.value.forEach((item: any) => {
+      if (form.value.hasOwnProperty(item.configKey)) {
+        form.value[item.configKey] = item.value;
       }
-      dialog.visible = false;
-      getList();
-    }
-  });
-};
-
-const handleDelete = async (row?: any) => {
-  const deleteIds = row?.id || ids.value;
-  await proxy?.$modal.confirm('是否确认删除？');
-  await delPlatformConfig(deleteIds);
-  proxy?.$modal.msgSuccess('删除成功');
-  getList();
+    });
+  } finally {
+    loading.value = false;
+  }
 };
 
-const cancel = () => {
-  dialog.visible = false;
-  reset();
+const submitForm = async () => {
+  try {
+    await formRef.value?.validate();
+    
+    const configKeys = Object.keys(form.value);
+    const batchData = configKeys.map(key => ({
+      configType: '0',
+      configKey: key,
+      name: key,
+      value: form.value[key] || ''
+    }));
+    
+    await saveBatchPlatformConfig(batchData);
+    proxy?.$modal.msgSuccess('保存成功');
+    getList();
+  } catch (error) {
+    console.error('保存失败:', error);
+  }
 };
 
-getList();
+onMounted(() => {
+  getList();
+});
 </script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.card-header .title {
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>

src/views/system/bottomNav/index.vue

@@ -1,56 +1,29 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="导航名称" prop="navigationName">
-              <el-input v-model="queryParams.navigationName" placeholder="请输入导航名称" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="是否启用" prop="isEnable">
-              <el-select v-model="queryParams.isEnable" placeholder="请选择" clearable>
-                <el-option label="是" value="0" />
-                <el-option label="否" value="1" />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
-
     <el-card shadow="hover">
       <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:navigation:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:navigation:remove']">删除</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
+        <div class="card-header">
+          <span class="title">底部导航信息列表</span>
+          <div>
+            <el-button type="primary" @click="handleAdd" v-hasPermi="['system:navigation:add']">+ 新增</el-button>
+            <el-button @click="getList">刷新</el-button>
+          </div>
+        </div>
       </template>
 
-      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="导航名称" prop="navigationName" />
-        <el-table-column label="链接地址" prop="url" show-overflow-tooltip />
-        <el-table-column label="排序" prop="sort" width="80" />
-        <el-table-column label="是否启用" prop="isEnable" width="100">
+      <el-table v-loading="loading" :data="dataList" border>
+        <el-table-column label="导航标题" prop="navigationName" align="center" />
+        <el-table-column label="链接地址" prop="url" align="center" show-overflow-tooltip />
+        <el-table-column label="排序" prop="sort" width="100" align="center" />
+        <el-table-column label="是否显示" prop="isEnable" width="100" align="center">
           <template #default="scope">
-            <el-tag :type="scope.row.isEnable === '0' ? 'success' : 'danger'">
-              {{ scope.row.isEnable === '0' ? '是' : '否' }}
-            </el-tag>
+            {{ scope.row.isEnable === '0' ? '显示' : '不显示' }}
           </template>
         </el-table-column>
         <el-table-column label="操作" width="150" align="center">
           <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:navigation:edit']">修改</el-button>
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:navigation:remove']">删除</el-button>
+            <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['system:navigation:edit']">编辑</el-button>
+            <el-button link type="danger" @click="handleDelete(scope.row)" v-hasPermi="['system:navigation:remove']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -59,27 +32,39 @@
     </el-card>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="导航名称" prop="navigationName">
-          <el-input v-model="form.navigationName" placeholder="请输入导航名称" />
-        </el-form-item>
-        <el-form-item label="链接地址" prop="url">
-          <el-input v-model="form.url" placeholder="请输入链接地址" />
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="form.sort" :min="0" />
-        </el-form-item>
-        <el-form-item label="是否启用" prop="isEnable">
-          <el-radio-group v-model="form.isEnable">
-            <el-radio value="0">是</el-radio>
-            <el-radio value="1">否</el-radio>
-          </el-radio-group>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="导航标题" prop="navigationName">
+              <el-input v-model="form.navigationName" placeholder="请输入导航标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="导航链接" prop="url">
+              <el-input v-model="form.url" placeholder="请输入导航链接" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="排序" prop="sort">
+              <el-input-number v-model="form.sort" :min="0" controls-position="right" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否启用" prop="isEnable">
+              <el-switch v-model="form.isEnable" active-value="0" inactive-value="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="描述" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" @click="submitForm">确 认</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -90,20 +75,15 @@
 <script setup name="BottomNav" lang="ts">
 import { listNavigation, getNavigation, addNavigation, updateNavigation, delNavigation } from '@/api/system/navigation';
 import { ComponentInternalInstance, getCurrentInstance, ref, reactive, toRefs } from 'vue';
-import { ElForm } from 'element-plus';
+import type { FormInstance } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const dataList = ref([]);
 const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
 const total = ref(0);
 
-const queryFormRef = ref(ElForm);
-const formRef = ref(ElForm);
+const formRef = ref<FormInstance>();
 
 const dialog = reactive({ visible: false, title: '' });
 
@@ -112,15 +92,13 @@ const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    navType: 'footer',
-    navigationName: undefined,
-    isEnable: undefined
+    navType: 'footer'
   },
   rules: {
     navigationName: [{ required: true, message: '导航名称不能为空', trigger: 'blur' }],
     url: [{ required: true, message: '链接地址不能为空', trigger: 'blur' }],
     sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
-    isEnable: [{ required: true, message: '请选择是否启用', trigger: 'change' }]
+    isEnable: [{ required: true, message: '请选择是否显示', trigger: 'change' }]
   }
 });
 
@@ -134,22 +112,6 @@ const getList = async () => {
   loading.value = false;
 };
 
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getList();
-};
-
-const resetQuery = () => {
-  queryFormRef.value.resetFields();
-  handleQuery();
-};
-
-const handleSelectionChange = (selection: any[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
-
 const reset = () => {
   form.value = {
     id: undefined,
@@ -157,7 +119,8 @@ const reset = () => {
     navigationName: undefined,
     url: undefined,
     sort: 0,
-    isEnable: '0'
+    isEnable: '0',
+    remark: undefined
   };
   formRef.value?.resetFields();
 };
@@ -165,20 +128,19 @@ const reset = () => {
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = '添加底部导航';
+  dialog.title = '新增底部导航';
 };
 
 const handleUpdate = async (row: any) => {
   reset();
-  const id = row.id || ids.value[0];
-  const res = await getNavigation(id);
+  const res = await getNavigation(row.id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
   dialog.title = '修改底部导航';
 };
 
 const submitForm = () => {
-  formRef.value.validate(async (valid: boolean) => {
+  formRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       if (form.value.id) {
         await updateNavigation(form.value);
@@ -193,10 +155,9 @@ const submitForm = () => {
   });
 };
 
-const handleDelete = async (row?: any) => {
-  const deleteIds = row?.id || ids.value;
+const handleDelete = async (row: any) => {
   await proxy?.$modal.confirm('是否确认删除？');
-  await delNavigation(deleteIds);
+  await delNavigation(row.id);
   proxy?.$modal.msgSuccess('删除成功');
   getList();
 };
@@ -208,3 +169,15 @@ const cancel = () => {
 
 getList();
 </script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.card-header .title {
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>

src/views/system/floatNav/index.vue

@@ -1,56 +1,29 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="导航名称" prop="navigationName">
-              <el-input v-model="queryParams.navigationName" placeholder="请输入导航名称" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="是否启用" prop="isEnable">
-              <el-select v-model="queryParams.isEnable" placeholder="请选择" clearable>
-                <el-option label="是" value="0" />
-                <el-option label="否" value="1" />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
-
     <el-card shadow="hover">
       <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:navigation:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:navigation:remove']">删除</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
+        <div class="card-header">
+          <span class="title">浮动导航信息列表</span>
+          <div>
+            <el-button type="primary" @click="handleAdd" v-hasPermi="['system:navigation:add']">+ 新增</el-button>
+            <el-button @click="getList">刷新</el-button>
+          </div>
+        </div>
       </template>
 
-      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="导航名称" prop="navigationName" />
-        <el-table-column label="链接地址" prop="url" show-overflow-tooltip />
-        <el-table-column label="排序" prop="sort" width="80" />
-        <el-table-column label="是否启用" prop="isEnable" width="100">
+      <el-table v-loading="loading" :data="dataList" border>
+        <el-table-column label="导航标题" prop="navigationName" align="center" />
+        <el-table-column label="链接地址" prop="url" align="center" show-overflow-tooltip />
+        <el-table-column label="排序" prop="sort" width="100" align="center" />
+        <el-table-column label="是否显示" prop="isEnable" width="100" align="center">
           <template #default="scope">
-            <el-tag :type="scope.row.isEnable === '0' ? 'success' : 'danger'">
-              {{ scope.row.isEnable === '0' ? '是' : '否' }}
-            </el-tag>
+            {{ scope.row.isEnable === '0' ? '显示' : '不显示' }}
           </template>
         </el-table-column>
         <el-table-column label="操作" width="150" align="center">
           <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:navigation:edit']">修改</el-button>
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:navigation:remove']">删除</el-button>
+            <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['system:navigation:edit']">编辑</el-button>
+            <el-button link type="danger" @click="handleDelete(scope.row)" v-hasPermi="['system:navigation:remove']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -59,27 +32,39 @@
     </el-card>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="导航名称" prop="navigationName">
-          <el-input v-model="form.navigationName" placeholder="请输入导航名称" />
-        </el-form-item>
-        <el-form-item label="链接地址" prop="url">
-          <el-input v-model="form.url" placeholder="请输入链接地址" />
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="form.sort" :min="0" />
-        </el-form-item>
-        <el-form-item label="是否启用" prop="isEnable">
-          <el-radio-group v-model="form.isEnable">
-            <el-radio value="0">是</el-radio>
-            <el-radio value="1">否</el-radio>
-          </el-radio-group>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="导航标题" prop="navigationName">
+              <el-input v-model="form.navigationName" placeholder="请输入导航标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="导航链接" prop="url">
+              <el-input v-model="form.url" placeholder="请输入导航链接" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="排序" prop="sort">
+              <el-input-number v-model="form.sort" :min="0" controls-position="right" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否启用" prop="isEnable">
+              <el-switch v-model="form.isEnable" active-value="0" inactive-value="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="描述" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" @click="submitForm">确 认</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -90,20 +75,15 @@
 <script setup name="FloatNav" lang="ts">
 import { listNavigation, getNavigation, addNavigation, updateNavigation, delNavigation } from '@/api/system/navigation';
 import { ComponentInternalInstance, getCurrentInstance, ref, reactive, toRefs } from 'vue';
-import { ElForm } from 'element-plus';
+import type { FormInstance } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const dataList = ref([]);
 const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
 const total = ref(0);
 
-const queryFormRef = ref(ElForm);
-const formRef = ref(ElForm);
+const formRef = ref<FormInstance>();
 
 const dialog = reactive({ visible: false, title: '' });
 
@@ -112,15 +92,13 @@ const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    navType: 'float',
-    navigationName: undefined,
-    isEnable: undefined
+    navType: 'float'
   },
   rules: {
     navigationName: [{ required: true, message: '导航名称不能为空', trigger: 'blur' }],
     url: [{ required: true, message: '链接地址不能为空', trigger: 'blur' }],
     sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
-    isEnable: [{ required: true, message: '请选择是否启用', trigger: 'change' }]
+    isEnable: [{ required: true, message: '请选择是否显示', trigger: 'change' }]
   }
 });
 
@@ -134,22 +112,6 @@ const getList = async () => {
   loading.value = false;
 };
 
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getList();
-};
-
-const resetQuery = () => {
-  queryFormRef.value.resetFields();
-  handleQuery();
-};
-
-const handleSelectionChange = (selection: any[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
-
 const reset = () => {
   form.value = {
     id: undefined,
@@ -157,7 +119,8 @@ const reset = () => {
     navigationName: undefined,
     url: undefined,
     sort: 0,
-    isEnable: '0'
+    isEnable: '0',
+    remark: undefined
   };
   formRef.value?.resetFields();
 };
@@ -165,20 +128,19 @@ const reset = () => {
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = '添加浮动导航';
+  dialog.title = '新增浮动导航';
 };
 
 const handleUpdate = async (row: any) => {
   reset();
-  const id = row.id || ids.value[0];
-  const res = await getNavigation(id);
+  const res = await getNavigation(row.id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
   dialog.title = '修改浮动导航';
 };
 
 const submitForm = () => {
-  formRef.value.validate(async (valid: boolean) => {
+  formRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       if (form.value.id) {
         await updateNavigation(form.value);
@@ -193,10 +155,9 @@ const submitForm = () => {
   });
 };
 
-const handleDelete = async (row?: any) => {
-  const deleteIds = row?.id || ids.value;
+const handleDelete = async (row: any) => {
   await proxy?.$modal.confirm('是否确认删除？');
-  await delNavigation(deleteIds);
+  await delNavigation(row.id);
   proxy?.$modal.msgSuccess('删除成功');
   getList();
 };
@@ -208,3 +169,15 @@ const cancel = () => {
 
 getList();
 </script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.card-header .title {
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>

src/views/system/homeNav/index.vue

@@ -1,56 +1,29 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="导航名称" prop="navigationName">
-              <el-input v-model="queryParams.navigationName" placeholder="请输入导航名称" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="是否启用" prop="isEnable">
-              <el-select v-model="queryParams.isEnable" placeholder="请选择" clearable>
-                <el-option label="是" value="0" />
-                <el-option label="否" value="1" />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
-
     <el-card shadow="hover">
       <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:navigation:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:navigation:remove']">删除</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
+        <div class="card-header">
+          <span class="title">首页导航信息列表</span>
+          <div>
+            <el-button type="primary" @click="handleAdd" v-hasPermi="['system:navigation:add']">+ 新增</el-button>
+            <el-button @click="getList">刷新</el-button>
+          </div>
+        </div>
       </template>
 
-      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="导航名称" prop="navigationName" />
-        <el-table-column label="链接地址" prop="url" show-overflow-tooltip />
-        <el-table-column label="排序" prop="sort" width="80" />
-        <el-table-column label="是否启用" prop="isEnable" width="100">
+      <el-table v-loading="loading" :data="dataList" border>
+        <el-table-column label="导航标题" prop="navigationName" align="center" />
+        <el-table-column label="链接地址" prop="url" align="center" show-overflow-tooltip />
+        <el-table-column label="排序" prop="sort" width="100" align="center" />
+        <el-table-column label="是否显示" prop="isEnable" width="100" align="center">
           <template #default="scope">
-            <el-tag :type="scope.row.isEnable === '0' ? 'success' : 'danger'">
-              {{ scope.row.isEnable === '0' ? '是' : '否' }}
-            </el-tag>
+            {{ scope.row.isEnable === '0' ? '显示' : '不显示' }}
           </template>
         </el-table-column>
         <el-table-column label="操作" width="150" align="center">
           <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:navigation:edit']">修改</el-button>
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:navigation:remove']">删除</el-button>
+            <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['system:navigation:edit']">编辑</el-button>
+            <el-button link type="danger" @click="handleDelete(scope.row)" v-hasPermi="['system:navigation:remove']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -59,27 +32,39 @@
     </el-card>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="导航名称" prop="navigationName">
-          <el-input v-model="form.navigationName" placeholder="请输入导航名称" />
-        </el-form-item>
-        <el-form-item label="链接地址" prop="url">
-          <el-input v-model="form.url" placeholder="请输入链接地址" />
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="form.sort" :min="0" />
-        </el-form-item>
-        <el-form-item label="是否启用" prop="isEnable">
-          <el-radio-group v-model="form.isEnable">
-            <el-radio value="0">是</el-radio>
-            <el-radio value="1">否</el-radio>
-          </el-radio-group>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="导航标题" prop="navigationName">
+              <el-input v-model="form.navigationName" placeholder="请输入导航标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="导航链接" prop="url">
+              <el-input v-model="form.url" placeholder="请输入导航链接" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="排序" prop="sort">
+              <el-input-number v-model="form.sort" :min="0" controls-position="right" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否启用" prop="isEnable">
+              <el-switch v-model="form.isEnable" active-value="0" inactive-value="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="描述" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" @click="submitForm">确 认</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -90,20 +75,15 @@
 <script setup name="HomeNav" lang="ts">
 import { listNavigation, getNavigation, addNavigation, updateNavigation, delNavigation } from '@/api/system/navigation';
 import { ComponentInternalInstance, getCurrentInstance, ref, reactive, toRefs } from 'vue';
-import { ElForm } from 'element-plus';
+import type { FormInstance } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const dataList = ref([]);
 const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
 const total = ref(0);
 
-const queryFormRef = ref(ElForm);
-const formRef = ref(ElForm);
+const formRef = ref<FormInstance>();
 
 const dialog = reactive({ visible: false, title: '' });
 
@@ -112,15 +92,13 @@ const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    navType: 'home',
-    navigationName: undefined,
-    isEnable: undefined
+    navType: 'home'
   },
   rules: {
     navigationName: [{ required: true, message: '导航名称不能为空', trigger: 'blur' }],
     url: [{ required: true, message: '链接地址不能为空', trigger: 'blur' }],
     sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
-    isEnable: [{ required: true, message: '请选择是否启用', trigger: 'change' }]
+    isEnable: [{ required: true, message: '请选择是否显示', trigger: 'change' }]
   }
 });
 
@@ -134,22 +112,6 @@ const getList = async () => {
   loading.value = false;
 };
 
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getList();
-};
-
-const resetQuery = () => {
-  queryFormRef.value.resetFields();
-  handleQuery();
-};
-
-const handleSelectionChange = (selection: any[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
-
 const reset = () => {
   form.value = {
     id: undefined,
@@ -157,7 +119,8 @@ const reset = () => {
     navigationName: undefined,
     url: undefined,
     sort: 0,
-    isEnable: '0'
+    isEnable: '0',
+    remark: undefined
   };
   formRef.value?.resetFields();
 };
@@ -170,8 +133,7 @@ const handleAdd = () => {
 
 const handleUpdate = async (row: any) => {
   reset();
-  const id = row.id || ids.value[0];
-  const res = await getNavigation(id);
+  const res = await getNavigation(row.id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
   dialog.title = '修改首页导航';
@@ -193,10 +155,9 @@ const submitForm = () => {
   });
 };
 
-const handleDelete = async (row?: any) => {
-  const deleteIds = row?.id || ids.value;
+const handleDelete = async (row: any) => {
   await proxy?.$modal.confirm('是否确认删除？');
-  await delNavigation(deleteIds);
+  await delNavigation(row.id);
   proxy?.$modal.msgSuccess('删除成功');
   getList();
 };
@@ -208,3 +169,15 @@ const cancel = () => {
 
 getList();
 </script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.card-header .title {
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>

src/views/system/innerNav/index.vue

@@ -1,56 +1,29 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="导航名称" prop="navigationName">
-              <el-input v-model="queryParams.navigationName" placeholder="请输入导航名称" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="是否启用" prop="isEnable">
-              <el-select v-model="queryParams.isEnable" placeholder="请选择" clearable>
-                <el-option label="是" value="0" />
-                <el-option label="否" value="1" />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
-
     <el-card shadow="hover">
       <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:navigation:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:navigation:remove']">删除</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
+        <div class="card-header">
+          <span class="title">内页导航信息列表</span>
+          <div>
+            <el-button type="primary" @click="handleAdd" v-hasPermi="['system:navigation:add']">+ 新增</el-button>
+            <el-button @click="getList">刷新</el-button>
+          </div>
+        </div>
       </template>
 
-      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="导航名称" prop="navigationName" />
-        <el-table-column label="链接地址" prop="url" show-overflow-tooltip />
-        <el-table-column label="排序" prop="sort" width="80" />
-        <el-table-column label="是否启用" prop="isEnable" width="100">
+      <el-table v-loading="loading" :data="dataList" border>
+        <el-table-column label="导航标题" prop="navigationName" align="center" />
+        <el-table-column label="链接地址" prop="url" align="center" show-overflow-tooltip />
+        <el-table-column label="排序" prop="sort" width="100" align="center" />
+        <el-table-column label="是否显示" prop="isEnable" width="100" align="center">
           <template #default="scope">
-            <el-tag :type="scope.row.isEnable === '0' ? 'success' : 'danger'">
-              {{ scope.row.isEnable === '0' ? '是' : '否' }}
-            </el-tag>
+            {{ scope.row.isEnable === '0' ? '显示' : '不显示' }}
           </template>
         </el-table-column>
         <el-table-column label="操作" width="150" align="center">
           <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:navigation:edit']">修改</el-button>
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:navigation:remove']">删除</el-button>
+            <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['system:navigation:edit']">编辑</el-button>
+            <el-button link type="danger" @click="handleDelete(scope.row)" v-hasPermi="['system:navigation:remove']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -59,27 +32,39 @@
     </el-card>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="导航名称" prop="navigationName">
-          <el-input v-model="form.navigationName" placeholder="请输入导航名称" />
-        </el-form-item>
-        <el-form-item label="链接地址" prop="url">
-          <el-input v-model="form.url" placeholder="请输入链接地址" />
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="form.sort" :min="0" />
-        </el-form-item>
-        <el-form-item label="是否启用" prop="isEnable">
-          <el-radio-group v-model="form.isEnable">
-            <el-radio value="0">是</el-radio>
-            <el-radio value="1">否</el-radio>
-          </el-radio-group>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="导航标题" prop="navigationName">
+              <el-input v-model="form.navigationName" placeholder="请输入导航标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="导航链接" prop="url">
+              <el-input v-model="form.url" placeholder="请输入导航链接" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="排序" prop="sort">
+              <el-input-number v-model="form.sort" :min="0" controls-position="right" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否启用" prop="isEnable">
+              <el-switch v-model="form.isEnable" active-value="0" inactive-value="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="描述" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" @click="submitForm">确 认</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -90,20 +75,15 @@
 <script setup name="InnerNav" lang="ts">
 import { listNavigation, getNavigation, addNavigation, updateNavigation, delNavigation } from '@/api/system/navigation';
 import { ComponentInternalInstance, getCurrentInstance, ref, reactive, toRefs } from 'vue';
-import { ElForm } from 'element-plus';
+import type { FormInstance } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const dataList = ref([]);
 const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
 const total = ref(0);
 
-const queryFormRef = ref(ElForm);
-const formRef = ref(ElForm);
+const formRef = ref<FormInstance>();
 
 const dialog = reactive({ visible: false, title: '' });
 
@@ -112,15 +92,13 @@ const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    navType: 'inner',
-    navigationName: undefined,
-    isEnable: undefined
+    navType: 'inner'
   },
   rules: {
     navigationName: [{ required: true, message: '导航名称不能为空', trigger: 'blur' }],
     url: [{ required: true, message: '链接地址不能为空', trigger: 'blur' }],
     sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
-    isEnable: [{ required: true, message: '请选择是否启用', trigger: 'change' }]
+    isEnable: [{ required: true, message: '请选择是否显示', trigger: 'change' }]
   }
 });
 
@@ -134,22 +112,6 @@ const getList = async () => {
   loading.value = false;
 };
 
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getList();
-};
-
-const resetQuery = () => {
-  queryFormRef.value.resetFields();
-  handleQuery();
-};
-
-const handleSelectionChange = (selection: any[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
-
 const reset = () => {
   form.value = {
     id: undefined,
@@ -157,7 +119,8 @@ const reset = () => {
     navigationName: undefined,
     url: undefined,
     sort: 0,
-    isEnable: '0'
+    isEnable: '0',
+    remark: undefined
   };
   formRef.value?.resetFields();
 };
@@ -165,20 +128,19 @@ const reset = () => {
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = '添加内页导航';
+  dialog.title = '新增内页导航';
 };
 
 const handleUpdate = async (row: any) => {
   reset();
-  const id = row.id || ids.value[0];
-  const res = await getNavigation(id);
+  const res = await getNavigation(row.id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
   dialog.title = '修改内页导航';
 };
 
 const submitForm = () => {
-  formRef.value.validate(async (valid: boolean) => {
+  formRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       if (form.value.id) {
         await updateNavigation(form.value);
@@ -193,10 +155,9 @@ const submitForm = () => {
   });
 };
 
-const handleDelete = async (row?: any) => {
-  const deleteIds = row?.id || ids.value;
+const handleDelete = async (row: any) => {
   await proxy?.$modal.confirm('是否确认删除？');
-  await delNavigation(deleteIds);
+  await delNavigation(row.id);
   proxy?.$modal.msgSuccess('删除成功');
   getList();
 };
@@ -208,3 +169,15 @@ const cancel = () => {
 
 getList();
 </script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.card-header .title {
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>

src/views/system/loginSetting/index.vue

@@ -1,158 +1,198 @@
 <template>
   <div class="p-2">
-    <el-card shadow="hover">
+    <el-card shadow="hover" v-loading="loading">
       <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:platformConfig:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:platformConfig:remove']">删除</el-button>
-          </el-col>
-        </el-row>
+        <div class="card-header">
+          <span class="title">登录图片设置</span>
+        </div>
       </template>
 
-      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="配置键" prop="configKey" />
-        <el-table-column label="配置名称" prop="name" />
-        <el-table-column label="配置值" prop="value" show-overflow-tooltip />
-        <el-table-column label="操作" width="150" align="center">
-          <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:platformConfig:edit']">修改</el-button>
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:platformConfig:remove']">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-    </el-card>
-
-    <!-- 添加或修改对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="配置键" prop="configKey">
-          <el-input v-model="form.configKey" placeholder="请输入配置键" />
-        </el-form-item>
-        <el-form-item label="配置名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入配置名称" />
-        </el-form-item>
-        <el-form-item label="配置值" prop="value">
-          <el-input v-model="form.value" type="textarea" placeholder="请输入配置值" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
+      <div class="tips-section">
+        <p>网站登录页顶部4张图片，每次刷新可随机显示，最多可设置上传4张。</p>
+        <p>选择上传文件并提交表单生效，图片请依照输入框下提示文字内容选项。</p>
+        <p>背景色指图片下方区域颜色，适用于较宽分辨率下浏览页面时整体充满窗宽，因此请注择和上传图片最为接近或相邻原的色彩。</p>
+      </div>
+
+      <!-- 图片1 -->
+      <div class="image-section" v-for="(item, index) in imageList" :key="index">
+        <div class="image-title">
+          <span class="label">图片{{ index + 1 }}：</span>
+          <span class="hint">请使用1000*480像素jpg/gif/png格式的图片</span>
         </div>
-      </template>
-    </el-dialog>
+        <div class="image-content">
+          <div class="image-preview">
+            <el-image 
+              v-if="item.image" 
+              :src="item.image" 
+              fit="cover"
+              style="width: 280px; height: 140px;"
+            />
+            <div v-else class="empty-image">
+              <el-icon size="40"><Picture /></el-icon>
+            </div>
+          </div>
+          <div class="image-actions">
+            <div class="upload-btn">
+              <image-upload v-model="item.image" :limit="1" :fileSize="5" :isShowTip="false" />
+            </div>
+            <div class="color-picker">
+              <span>背景色：</span>
+              <el-color-picker v-model="item.bgColor" />
+            </div>
+            <div class="action-btns">
+              <el-button @click="handleReset(index)">重 置</el-button>
+              <el-button type="primary" @click="handleConfirm(index)">确 认</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script setup name="LoginSetting" lang="ts">
-import { listPlatformConfig, getPlatformConfig, addPlatformConfig, updatePlatformConfig, delPlatformConfig } from '@/api/system/platformConfig';
-import { ComponentInternalInstance, getCurrentInstance, ref, reactive, toRefs } from 'vue';
-import { ElForm } from 'element-plus';
+import { listPlatformConfig, addPlatformConfig, updatePlatformConfig } from '@/api/system/platformConfig';
+import { ComponentInternalInstance, getCurrentInstance, ref, reactive, onMounted } from 'vue';
+import { Picture } from '@element-plus/icons-vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-const dataList = ref([]);
 const loading = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
+const configList = ref<any[]>([]);
 
-const formRef = ref(ElForm);
-
-const dialog = reactive({ visible: false, title: '' });
-
-const data = reactive({
-  form: {} as any,
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    configType: '1'
-  },
-  rules: {
-    configKey: [{ required: true, message: '配置键不能为空', trigger: 'blur' }],
-    name: [{ required: true, message: '配置名称不能为空', trigger: 'blur' }],
-    value: [{ required: true, message: '配置值不能为空', trigger: 'blur' }]
-  }
-});
-
-const { queryParams, form, rules } = toRefs(data);
+const imageList = reactive([
+  { image: '', bgColor: '#409EFF', configKeyImage: 'loginImage1', configKeyColor: 'loginBgColor1' },
+  { image: '', bgColor: '#409EFF', configKeyImage: 'loginImage2', configKeyColor: 'loginBgColor2' },
+  { image: '', bgColor: '#409EFF', configKeyImage: 'loginImage3', configKeyColor: 'loginBgColor3' },
+  { image: '', bgColor: '#409EFF', configKeyImage: 'loginImage4', configKeyColor: 'loginBgColor4' }
+]);
 
 const getList = async () => {
   loading.value = true;
-  const res = await listPlatformConfig(queryParams.value);
-  dataList.value = res.rows;
-  total.value = res.total;
-  loading.value = false;
-};
-
-const handleSelectionChange = (selection: any[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
-
-const reset = () => {
-  form.value = {
-    id: undefined,
-    configType: '1',
-    configKey: undefined,
-    name: undefined,
-    value: undefined
-  };
-  formRef.value?.resetFields();
+  try {
+    const res = await listPlatformConfig({ configType: '1', pageNum: 1, pageSize: 100 });
+    configList.value = res.rows || [];
+    configList.value.forEach((item: any) => {
+      imageList.forEach((img, index) => {
+        if (item.configKey === img.configKeyImage) {
+          imageList[index].image = item.value || '';
+        }
+        if (item.configKey === img.configKeyColor) {
+          imageList[index].bgColor = item.value || '#409EFF';
+        }
+      });
+    });
+  } finally {
+    loading.value = false;
+  }
 };
 
-const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加登录配置';
+const handleReset = (index: number) => {
+  imageList[index].image = '';
+  imageList[index].bgColor = '#409EFF';
 };
 
-const handleUpdate = async (row: any) => {
-  reset();
-  const id = row.id || ids.value[0];
-  const res = await getPlatformConfig(id);
-  Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改登录配置';
-};
+const handleConfirm = async (index: number) => {
+  const item = imageList[index];
+  
+  // 保存图片
+  const existImage = configList.value.find((c: any) => c.configKey === item.configKeyImage);
+  if (existImage) {
+    await updatePlatformConfig({ ...existImage, value: item.image });
+  } else {
+    await addPlatformConfig({ configType: '1', configKey: item.configKeyImage, name: `登录图片${index + 1}`, value: item.image });
+  }
 
-const submitForm = () => {
-  formRef.value.validate(async (valid: boolean) => {
-    if (valid) {
-      if (form.value.id) {
-        await updatePlatformConfig(form.value);
-        proxy?.$modal.msgSuccess('修改成功');
-      } else {
-        await addPlatformConfig(form.value);
-        proxy?.$modal.msgSuccess('新增成功');
-      }
-      dialog.visible = false;
-      getList();
-    }
-  });
-};
+  // 保存背景色
+  const existColor = configList.value.find((c: any) => c.configKey === item.configKeyColor);
+  if (existColor) {
+    await updatePlatformConfig({ ...existColor, value: item.bgColor });
+  } else {
+    await addPlatformConfig({ configType: '1', configKey: item.configKeyColor, name: `登录背景色${index + 1}`, value: item.bgColor });
+  }
 
-const handleDelete = async (row?: any) => {
-  const deleteIds = row?.id || ids.value;
-  await proxy?.$modal.confirm('是否确认删除？');
-  await delPlatformConfig(deleteIds);
-  proxy?.$modal.msgSuccess('删除成功');
+  proxy?.$modal.msgSuccess('保存成功');
   getList();
 };
 
-const cancel = () => {
-  dialog.visible = false;
-  reset();
-};
-
-getList();
+onMounted(() => {
+  getList();
+});
 </script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.card-header .title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.tips-section {
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+.tips-section p {
+  margin: 5px 0;
+  color: #606266;
+  font-size: 13px;
+}
+.image-section {
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+.image-section:last-child {
+  border-bottom: none;
+}
+.image-title {
+  margin-bottom: 15px;
+}
+.image-title .label {
+  font-weight: bold;
+  color: #409EFF;
+}
+.image-title .hint {
+  color: #409EFF;
+  font-size: 13px;
+}
+.image-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 30px;
+}
+.image-preview {
+  width: 280px;
+  height: 140px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.empty-image {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f7fa;
+  color: #909399;
+}
+.image-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+.color-picker {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.action-btns {
+  display: flex;
+  gap: 10px;
+}
+</style>

src/views/system/searchNav/index.vue

@@ -1,56 +1,29 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="导航名称" prop="navigationName">
-              <el-input v-model="queryParams.navigationName" placeholder="请输入导航名称" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="是否启用" prop="isEnable">
-              <el-select v-model="queryParams.isEnable" placeholder="请选择" clearable>
-                <el-option label="是" value="0" />
-                <el-option label="否" value="1" />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
-
     <el-card shadow="hover">
       <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:navigation:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:navigation:remove']">删除</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
+        <div class="card-header">
+          <span class="title">搜索导航信息列表</span>
+          <div>
+            <el-button type="primary" @click="handleAdd" v-hasPermi="['system:navigation:add']">+ 新增</el-button>
+            <el-button @click="getList">刷新</el-button>
+          </div>
+        </div>
       </template>
 
-      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="导航名称" prop="navigationName" />
-        <el-table-column label="链接地址" prop="url" show-overflow-tooltip />
-        <el-table-column label="排序" prop="sort" width="80" />
-        <el-table-column label="是否启用" prop="isEnable" width="100">
+      <el-table v-loading="loading" :data="dataList" border>
+        <el-table-column label="导航标题" prop="navigationName" align="center" />
+        <el-table-column label="链接地址" prop="url" align="center" show-overflow-tooltip />
+        <el-table-column label="排序" prop="sort" width="100" align="center" />
+        <el-table-column label="是否显示" prop="isEnable" width="100" align="center">
           <template #default="scope">
-            <el-tag :type="scope.row.isEnable === '0' ? 'success' : 'danger'">
-              {{ scope.row.isEnable === '0' ? '是' : '否' }}
-            </el-tag>
+            {{ scope.row.isEnable === '0' ? '显示' : '不显示' }}
           </template>
         </el-table-column>
         <el-table-column label="操作" width="150" align="center">
           <template #default="scope">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:navigation:edit']">修改</el-button>
-            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:navigation:remove']">删除</el-button>
+            <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['system:navigation:edit']">编辑</el-button>
+            <el-button link type="danger" @click="handleDelete(scope.row)" v-hasPermi="['system:navigation:remove']">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -59,27 +32,39 @@
     </el-card>
 
     <!-- 添加或修改对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="导航名称" prop="navigationName">
-          <el-input v-model="form.navigationName" placeholder="请输入导航名称" />
-        </el-form-item>
-        <el-form-item label="链接地址" prop="url">
-          <el-input v-model="form.url" placeholder="请输入链接地址" />
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="form.sort" :min="0" />
-        </el-form-item>
-        <el-form-item label="是否启用" prop="isEnable">
-          <el-radio-group v-model="form.isEnable">
-            <el-radio value="0">是</el-radio>
-            <el-radio value="1">否</el-radio>
-          </el-radio-group>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="导航标题" prop="navigationName">
+              <el-input v-model="form.navigationName" placeholder="请输入导航标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="导航链接" prop="url">
+              <el-input v-model="form.url" placeholder="请输入导航链接" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="排序" prop="sort">
+              <el-input-number v-model="form.sort" :min="0" controls-position="right" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否启用" prop="isEnable">
+              <el-switch v-model="form.isEnable" active-value="0" inactive-value="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="描述" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" @click="submitForm">确 认</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -90,20 +75,15 @@
 <script setup name="SearchNav" lang="ts">
 import { listNavigation, getNavigation, addNavigation, updateNavigation, delNavigation } from '@/api/system/navigation';
 import { ComponentInternalInstance, getCurrentInstance, ref, reactive, toRefs } from 'vue';
-import { ElForm } from 'element-plus';
+import type { FormInstance } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const dataList = ref([]);
 const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<number | string>>([]);
-const single = ref(true);
-const multiple = ref(true);
 const total = ref(0);
 
-const queryFormRef = ref(ElForm);
-const formRef = ref(ElForm);
+const formRef = ref<FormInstance>();
 
 const dialog = reactive({ visible: false, title: '' });
 
@@ -112,15 +92,13 @@ const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    navType: 'search',
-    navigationName: undefined,
-    isEnable: undefined
+    navType: 'search'
   },
   rules: {
     navigationName: [{ required: true, message: '导航名称不能为空', trigger: 'blur' }],
     url: [{ required: true, message: '链接地址不能为空', trigger: 'blur' }],
     sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
-    isEnable: [{ required: true, message: '请选择是否启用', trigger: 'change' }]
+    isEnable: [{ required: true, message: '请选择是否显示', trigger: 'change' }]
   }
 });
 
@@ -134,22 +112,6 @@ const getList = async () => {
   loading.value = false;
 };
 
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getList();
-};
-
-const resetQuery = () => {
-  queryFormRef.value.resetFields();
-  handleQuery();
-};
-
-const handleSelectionChange = (selection: any[]) => {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length !== 1;
-  multiple.value = !selection.length;
-};
-
 const reset = () => {
   form.value = {
     id: undefined,
@@ -157,7 +119,8 @@ const reset = () => {
     navigationName: undefined,
     url: undefined,
     sort: 0,
-    isEnable: '0'
+    isEnable: '0',
+    remark: undefined
   };
   formRef.value?.resetFields();
 };
@@ -165,20 +128,19 @@ const reset = () => {
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = '添加搜索导航';
+  dialog.title = '新增搜索导航';
 };
 
 const handleUpdate = async (row: any) => {
   reset();
-  const id = row.id || ids.value[0];
-  const res = await getNavigation(id);
+  const res = await getNavigation(row.id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
   dialog.title = '修改搜索导航';
 };
 
 const submitForm = () => {
-  formRef.value.validate(async (valid: boolean) => {
+  formRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       if (form.value.id) {
         await updateNavigation(form.value);
@@ -193,10 +155,9 @@ const submitForm = () => {
   });
 };
 
-const handleDelete = async (row?: any) => {
-  const deleteIds = row?.id || ids.value;
+const handleDelete = async (row: any) => {
   await proxy?.$modal.confirm('是否确认删除？');
-  await delNavigation(deleteIds);
+  await delNavigation(row.id);
   proxy?.$modal.msgSuccess('删除成功');
   getList();
 };
@@ -208,3 +169,15 @@ const cancel = () => {
 
 getList();
 </script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.card-header .title {
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>

src/views/system/terms/index.vue

@@ -2,22 +2,21 @@
   <div class="p-2">
     <el-card shadow="hover">
       <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
-          </el-col>
-          <right-toolbar @query-table="getList"></right-toolbar>
-        </el-row>
+        <div class="card-header">
+          <span class="title">事项与条款信息列表</span>
+          <div class="header-actions">
+            <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
+            <el-button icon="Refresh" circle @click="getList" />
+          </div>
+        </div>
       </template>
 
       <el-table v-loading="loading" :data="termsList" border>
-        <el-table-column label="条款类型" align="center" prop="type" :show-overflow-tooltip="true" />
-        <el-table-column label="排序" align="center" prop="sort" width="80" />
-        <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
-        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+        <el-table-column label="编号" align="center" prop="sort" width="100" />
+        <el-table-column label="事项类型" align="center" prop="type" />
+        <el-table-column label="操作" align="center" width="100">
           <template #default="scope">
             <el-button link type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
-            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -34,19 +33,14 @@
     <!-- 添加或修改对话框 -->
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="800px" append-to-body>
       <el-form ref="termsFormRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="条款类型" prop="type">
-          <el-input v-model="form.type" placeholder="请输入条款类型名称" />
+        <el-form-item label="事项类型" prop="type">
+          <el-input v-model="form.type" placeholder="请输入事项类型名称" />
         </el-form-item>
         <el-form-item label="排序" prop="sort">
           <el-input-number v-model="form.sort" controls-position="right" :min="0" />
         </el-form-item>
         <el-form-item label="内容" prop="content">
-          <el-input
-            v-model="form.content"
-            type="textarea"
-            :rows="10"
-            placeholder="请输入条款内容（支持HTML）"
-          />
+          <editor v-model="form.content" :min-height="300" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -60,7 +54,9 @@
 </template>
 
 <script setup name="Terms" lang="ts">
-import { listTerms, getTerms, addTerms, updateTerms, delTerms } from '@/api/system/terms';
+import { listTerms, getTerms, addTerms, updateTerms } from '@/api/system/terms';
+import { ComponentInternalInstance, getCurrentInstance, ref, reactive, onMounted } from 'vue';
+import type { FormInstance } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -73,12 +69,12 @@ const queryParams = ref({
   pageSize: 10
 });
 
-const dialog = reactive<DialogOption>({
+const dialog = reactive({
   visible: false,
   title: ''
 });
 
-const termsFormRef = ref<ElFormInstance>();
+const termsFormRef = ref<FormInstance>();
 
 const initFormData = {
   id: undefined as number | undefined,
@@ -90,11 +86,10 @@ const initFormData = {
 const form = ref({ ...initFormData });
 
 const rules = reactive({
-  type: [{ required: true, message: '条款类型不能为空', trigger: 'blur' }],
-  content: [{ required: true, message: '条款内容不能为空', trigger: 'blur' }]
+  type: [{ required: true, message: '事项类型不能为空', trigger: 'blur' }],
+  content: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
 });
 
-/** 查询列表 */
 const getList = async () => {
   loading.value = true;
   try {
@@ -106,56 +101,40 @@ const getList = async () => {
   }
 };
 
-/** 取消按钮 */
 const cancel = () => {
   reset();
   dialog.visible = false;
 };
 
-/** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
   termsFormRef.value?.resetFields();
 };
 
-/** 新增按钮操作 */
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = '添加条款';
+  dialog.title = '添加事项与条款';
 };
 
-/** 修改按钮操作 */
 const handleUpdate = async (row: any) => {
   reset();
   const res = await getTerms(row.id);
   form.value = res.data;
   dialog.visible = true;
-  dialog.title = '修改条款';
-};
-
-/** 提交按钮 */
-const submitForm = () => {
-  termsFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      if (form.value.id) {
-        await updateTerms(form.value);
-        proxy?.$modal.msgSuccess('修改成功');
-      } else {
-        await addTerms(form.value);
-        proxy?.$modal.msgSuccess('新增成功');
-      }
-      dialog.visible = false;
-      getList();
-    }
-  });
+  dialog.title = '修改事项与条款';
 };
 
-/** 删除按钮操作 */
-const handleDelete = async (row: any) => {
-  await proxy?.$modal.confirm('是否确认删除该条款?');
-  await delTerms(row.id);
-  proxy?.$modal.msgSuccess('删除成功');
+const submitForm = async () => {
+  await termsFormRef.value?.validate();
+  if (form.value.id) {
+    await updateTerms(form.value);
+    proxy?.$modal.msgSuccess('修改成功');
+  } else {
+    await addTerms(form.value);
+    proxy?.$modal.msgSuccess('新增成功');
+  }
+  dialog.visible = false;
   getList();
 };
 
@@ -163,3 +142,19 @@ onMounted(() => {
   getList();
 });
 </script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.card-header .title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+</style>