feat: 优化页面样式

2023-11-30 21:31:55 +08:00
parent 120c737de7
commit 7691481006
4 changed files with 42 additions and 31 deletions
--- a/web/index.html
+++ b/web/index.html
@@ -10,23 +10,22 @@
 		/>
 		<meta
 			name="description"
-			content="django-vue3-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus, 是一款全栈，快速，开源的后台管理系统！"
+			content="django-vue-admin 基于RBAC模型的权限控制的一整套基础开发平台，权限粒度达到列级别，前后端分离，后端采用django + django-rest-framework，前端采用基于 vue3 + CompositionAPI + typescript + vite + element plus"
 		/>
 		<link rel="icon" href="/favicon.ico" />
-		<title>django-vue3-admin</title>
+		<title>django-vue-admin</title>
 	</head>
 	<body>
-		<div id="app"></div>
-		<script type="text/javascript">
-			// let _hmt = _hmt || [];
-			(function () {
-                let hm = document.createElement('script');
-				hm.src = 'https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4';
-                let s = document.getElementsByTagName('script')[0];
-				s.parentNode.insertBefore(hm, s);
-			})();
-		</script>
-		<script type="module" src="/src/main.ts"></script>
-		<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&s=1"></script>
+    <div id="app"></div>
+    <script>
+        var _hmt = _hmt || [];
+        (function() {
+          var hm = document.createElement("script");
+          hm.src = "https://hm.baidu.com/hm.js?9ba8fc809b5584167a2fb9b31bb3970c";
+          var s = document.getElementsByTagName("script")[0];
+          s.parentNode.insertBefore(hm, s);
+        })();
+    </script>
+    <script type="module" src="/src/main.ts"></script>
 	</body>
 </html>
--- a/web/src/views/system/login/index.vue
+++ b/web/src/views/system/login/index.vue
@@ -42,7 +42,7 @@
 		</div>

 		<div class="login-authorization">
-			<p>Copyright © {{getSystemConfig['login.copyright'] || '2021-2022 django-vue-admin.com'}} 版权所有</p>
+			<p>Copyright © {{getSystemConfig['login.copyright'] || '2021-2024 django-vue-admin.com'}} 版权所有</p>
 			<p class="la-other">
 				<a href="https://beian.miit.gov.cn" target="_blank">{{getSystemConfig['login.keep_record'] || '晋ICP备18005113号-3'}}</a>
 				|
--- a/web/src/views/system/role/components/PermissionComNew/index.vue
+++ b/web/src/views/system/role/components/PermissionComNew/index.vue
@@ -10,7 +10,7 @@
            <el-tag>{{ props.roleName }}</el-tag>
          </div>
        </el-col>
-        <el-col :span="6" :offset="8">
+        <el-col :span="6">
          <div>
            <el-button size="small" type="primary" class="pc-save-btn" @click="handleSavePermission">保存菜单授权
            </el-button>
@@ -20,15 +20,16 @@
    </template>
    <div class="permission-com">
      <el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion>
-        <el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex">
+        <el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex"
+                          style="    background-color: #fafafa;">
          <template #title>
-            <div @click.stop="null">
-              <p class="pc-collapse-title">
-                <el-checkbox v-model="item.isCheck">
+            <div>
+              <div class="pc-collapse-title">
+                <el-checkbox v-model="item.isCheck" @click.stop="null">
                  <span>{{ item.name }}</span>
                </el-checkbox>
-              </p>
-              <div v-show="!collapseCurrent.includes(mIndex)">
+              </div>
+              <div v-show="!collapseCurrent.includes(mIndex)" @click.stop="null" style="text-align: left;">
                <el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck">
                  {{ btn.name }}
                </el-checkbox>
@@ -40,7 +41,7 @@
              <p>允许对这些数据有以下操作</p>
              <el-checkbox v-for="(btn,bIndex) in item.btns" :key="bIndex" v-model="btn.isCheck" :label="btn.value">
                <div class="btn-item">
-                  {{ btn.data_range!==null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
+                  {{ btn.data_range !== null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
                  <span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(item, btn.id)">
                    <el-icon><Setting/></el-icon>
                  </span>
@@ -51,7 +52,7 @@
            <div class="pccm-item">
              <p>对这些数据有以下字段权限</p>

-              <ul  class="columns-list">
+              <ul class="columns-list">
                <li class="columns-head">
                  <div class="width-txt">
                    <span>字段</span>
@@ -59,7 +60,7 @@

                  <div v-for="(head,hIndex) in column.header" :key="hIndex" class="width-check">
                    <el-checkbox :label="head.value" @change="handleColumnChange($event, item, head.value)">
-                      <span>{{head.label}}</span>
+                      <span>{{ head.label }}</span>
                    </el-checkbox>
                  </div>
                </li>
@@ -111,7 +112,13 @@
 import {ref, onMounted, defineProps, watch, computed, reactive} from 'vue';
 import XEUtils from 'xe-utils';
 import {errorNotification} from '/@/utils/message';
-import {getDataPermissionRange, getDataPermissionDept, getRolePremission, setRolePremission,setBtnDatarange} from './api';
+import {
+  getDataPermissionRange,
+  getDataPermissionDept,
+  getRolePremission,
+  setRolePremission,
+  setBtnDatarange
+} from './api';
 import {MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType} from './types';
 import {ElMessage} from 'element-plus'

@@ -158,9 +165,9 @@ let menuBtnCurrent = ref<number>(-1);
 let dialogVisible = ref(false);
 let dataPermissionRange = ref<DataPermissionRangeType[]>([]);
 const formatDataRange = computed(() => {
-  return function(datarange:number){
+  return function (datarange: number) {
    const findItem = dataPermissionRange.value.find((i) => i.value === datarange);
-    return  findItem?.label || ''
+    return findItem?.label || ''
  }
 })
 let deptData = ref<CustomDataPermissionDeptType[]>([]);
@@ -228,7 +235,7 @@ const handleDialogConfirm = () => {
        if (btn.id === menuBtnCurrent.value) {
          const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
          btn.data_range = findItem?.value || 0;
-          if(btn.data_range===4){
+          if (btn.data_range === 4) {
            btn.dept = customDataPermission.value
          }
        }
@@ -254,7 +261,10 @@ const handleSavePermission = () => {
 }

 const column = reactive({
-  header:[{value:'is_create',label:'新增可见'},{value:'is_update',label:'编辑可见'},{value:'is_query',label:'列表可见'}]
+  header: [{value: 'is_create', label: '新增可见'}, {value: 'is_update', label: '编辑可见'}, {
+    value: 'is_query',
+    label: '列表可见'
+  }]
 })

 onMounted(() => {
@@ -272,6 +282,7 @@ onMounted(() => {

  .pc-collapse-title {
    line-height: 32px;
+    text-align: left;

    span {
      font-size: 16px;
@@ -365,6 +376,7 @@ onMounted(() => {
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    box-sizing: border-box;
+    background-color: #fafafa;
  }

  .el-collapse-item__header.is-active {