修改

src/layout/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <side-bar v-if="!sidebar.hide" class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
-      <!-- <el-scrollbar>
+    <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+        <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+        <side-bar v-if="!sidebar.hide" class="sidebar-container" />
+        <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+            <!-- <el-scrollbar>
         <div :class="{ 'fixed-header': fixedHeader }">
           <navbar ref="navbarRef" @setLayout="setLayout" />
           <tags-view v-if="needTagsView" />
@@ -11,14 +11,14 @@
         <app-main />
         <settings ref="settingRef" />
       </el-scrollbar> -->
-      <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar ref="navbarRef" @set-layout="setLayout" />
-        <tags-view v-if="needTagsView" />
-      </div>
-      <app-main />
-      <settings ref="settingRef" />
+            <div :class="{ 'fixed-header': fixedHeader }">
+                <navbar ref="navbarRef" @set-layout="setLayout" />
+                <tags-view v-if="needTagsView" />
+            </div>
+            <app-main />
+            <settings ref="settingRef" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -37,51 +37,51 @@ const needTagsView = computed(() => settingsStore.tagsView);
 const fixedHeader = computed(() => settingsStore.fixedHeader);
 
 const classObj = computed(() => ({
-  hideSidebar: !sidebar.value.opened,
-  openSidebar: sidebar.value.opened,
-  withoutAnimation: sidebar.value.withoutAnimation,
-  mobile: device.value === 'mobile'
+    hideSidebar: !sidebar.value.opened,
+    openSidebar: sidebar.value.opened,
+    withoutAnimation: sidebar.value.withoutAnimation,
+    mobile: device.value === 'mobile'
 }));
 
 const { width } = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
 watchEffect(() => {
-  if (device.value === 'mobile') {
-    useAppStore().closeSideBar({ withoutAnimation: false });
-  }
-  if (width.value - 1 < WIDTH) {
-    useAppStore().toggleDevice('mobile');
-    useAppStore().closeSideBar({ withoutAnimation: true });
-  } else {
-    useAppStore().toggleDevice('desktop');
-  }
+    if (device.value === 'mobile') {
+        useAppStore().closeSideBar({ withoutAnimation: false });
+    }
+    if (width.value - 1 < WIDTH) {
+        useAppStore().toggleDevice('mobile');
+        useAppStore().closeSideBar({ withoutAnimation: true });
+    } else {
+        useAppStore().toggleDevice('desktop');
+    }
 });
 
 const navbarRef = ref<InstanceType<typeof Navbar>>();
 const settingRef = ref<InstanceType<typeof Settings>>();
 
 onMounted(() => {
-  nextTick(() => {
-    navbarRef.value?.initTenantList();
-  });
+    nextTick(() => {
+        navbarRef.value?.initTenantList();
+    });
 });
 
 onMounted(() => {
-  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
-  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket');
+    let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+    initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket');
 });
 
 onMounted(() => {
-  // initSSE(import.meta.env.VITE_APP_BASE_API + '/resource/sse');
+    // initSSE(import.meta.env.VITE_APP_BASE_API + '/resource/sse');
 });
 
 const handleClickOutside = () => {
-  useAppStore().closeSideBar({ withoutAnimation: false });
+    useAppStore().closeSideBar({ withoutAnimation: false });
 };
 
 const setLayout = () => {
-  settingRef.value?.openSetting();
+    settingRef.value?.openSetting();
 };
 </script>
 
@@ -90,46 +90,46 @@ const setLayout = () => {
 @import '@/assets/styles/variables.module.scss';
 
 .app-wrapper {
-  @include clearfix;
-  position: relative;
-  height: 100%;
-  width: 100%;
-
-  &.mobile.openSidebar {
-    position: fixed;
-    top: 0;
-  }
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    &.mobile.openSidebar {
+        position: fixed;
+        top: 0;
+    }
 }
 
 .drawer-bg {
-  background: #000;
-  opacity: 0.3;
-  width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
 }
 
 .fixed-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 9;
-  width: calc(100% - #{$base-sidebar-width});
-  transition: width 0.28s;
-  background: $fixed-header-bg;
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 9;
+    width: calc(100% - #{$base-sidebar-width});
+    transition: width 0.28s;
+    background: $fixed-header-bg;
 }
 
 .hideSidebar .fixed-header {
-  width: calc(100% - 54px);
+    width: calc(100% - 54px);
 }
 
 .sidebarHide .fixed-header {
-  width: 100%;
+    width: 100%;
 }
 
 .mobile .fixed-header {
-  width: 100%;
+    width: 100%;
 }
 </style>

src/views/zycp-app/swyq-code/index.vue

@@ -1,88 +1,94 @@
 <template>
     <div class="p-3">
-        <el-form class="mb10" ref="formRef" :model="paramForm" inline>
-            <el-form-item label="产品类别：" class="search-form-item" prop="classType">
-                <el-select v-model="paramForm.classType" placeholder="请选择" @change="onSearch" style="width: 120px;">
-                    <el-option v-for="item in class_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="审核状态：" class="search-form-item" prop="res">
-                <el-select v-model="paramForm.res" placeholder="请选择" @change="onSearch" style="width: 120px;">
-                    <el-option v-for="item in check_status" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="生成时间：" class="search-form-item" prop="dateTime">
-                <div style="width: 240px" class="d-flex">
-                    <DateRange v-model="paramForm.dateTime" v-model:start-date="paramForm.startAt" v-model:end-date="paramForm.endAt" @change="onSearch"></DateRange>
-                </div>
-            </el-form-item>
-            <el-form-item prop="keywords" label="关键字搜索：" class="search-form-item">
-                <el-input v-model="paramForm.keywords" style="width: 260px;" @keyup.enter="onSearch" class="input-with-search" clearable placeholder="搜生成批号、产品名称、备注"></el-input>
-            </el-form-item>
-            <el-form-item class="search-form-item">
-                <el-button @click="onSearch" type="primary">搜索</el-button>
-                <el-button @click="resetSearch">重置</el-button>
-            </el-form-item>
-        </el-form>
-        <vxe-table :data="list" border :loading="loading">
-            <vxe-column type="seq" title="序号" width="50">
-                <template #default="{ $rowIndex }">
-                    {{ paramForm.pageSize * (paramForm.pageNum - 1) + $rowIndex + 1 }}
-                </template>
-            </vxe-column>
-            <vxe-column field="batchSn" class-name="c-333 f-w-5" width="100" title="生成批号"></vxe-column>
-            <vxe-column min-width="300" title="产品信息">
-                <template #default="{ row }">
-                    <RowProGB :row="row"></RowProGB>
-                </template>
-            </vxe-column>
-            <vxe-column min-width="160" title="码数量" :formatter="colNoData">
-                <template #default="{ row }">
-                    <div class="f-w-5 c-333">{{ row.codeAllCount || '-' }}</div>
-                    <div class="f-12 c-999">
-                        <template v-for="(item, index) in row?.codeInfo" :key="index">
-                            <div class="mr20">{{ item?.level }}级：{{ item?.count || 0 }}</div>
+        <div class="bg-fff flex1 ov-hd d-flex flex-cln">
+            <div class="pd-16 border-bottom">
+                <el-form ref="formRef" :model="paramForm" :inline="true" label-width="auto">
+                    <el-form-item label="产品类别：" class="search-form-item" prop="classType">
+                        <el-select v-model="paramForm.classType" placeholder="请选择" @change="onSearch" style="width: 120px;">
+                            <el-option v-for="item in class_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="审核状态：" class="search-form-item" prop="res">
+                        <el-select v-model="paramForm.res" placeholder="请选择" @change="onSearch" style="width: 120px;">
+                            <el-option v-for="item in check_status" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="生成时间：" class="search-form-item" prop="dateTime">
+                        <div style="width: 240px" class="d-flex">
+                            <DateRange v-model="paramForm.dateTime" v-model:start-date="paramForm.startAt" v-model:end-date="paramForm.endAt" @change="onSearch"></DateRange>
+                        </div>
+                    </el-form-item>
+                    <el-form-item prop="keywords" label="关键字搜索：" class="search-form-item">
+                        <el-input v-model="paramForm.keywords" style="width: 260px;" @keyup.enter="onSearch" class="input-with-search" clearable placeholder="搜生成批号、产品名称、备注"></el-input>
+                    </el-form-item>
+                    <el-form-item class="search-form-item">
+                        <el-button @click="onSearch" type="primary">搜索</el-button>
+                        <el-button @click="resetSearch">重置</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <div class="flex1 ov-hd pd-16">
+                <vxe-table :data="list" border :loading="loading">
+                    <vxe-column type="seq" title="序号" width="50">
+                        <template #default="{ $rowIndex }">
+                            {{ paramForm.pageSize * (paramForm.pageNum - 1) + $rowIndex + 1 }}
                         </template>
-                    </div>
-                </template>
-            </vxe-column>
-            <vxe-column field="useCount" width="80" title="使用记录" :formatter="colNoData">
-                <template #default="{ row }">
-                    <el-button v-if="row.useCount" @click="clickLookUseLog(row)" type="primary" text class="small-f-14" size="small">{{ row.useCount }}条</el-button>
-                    <template v-else>-</template>
-                </template>
-            </vxe-column>
-            <vxe-column field="downloadCount" width="80" title="下载次数" :formatter="colNoData"></vxe-column>
-            <vxe-column field="downloadTime" width="110" title="最近下载时间" :formatter="colNoData"></vxe-column>
-            <vxe-column width="110" title="审核状态">
-                <template #default="{ row }">
-                    <div>{{ selectDictLabel(check_status, row?.res) || '-' }}</div>
-                    <div class="f-s-12 c-#999" v-if="row?.res == '2'">理由: {{  row?.msg }}</div>
-                </template>
-            </vxe-column>
-            <vxe-column width="110" title="生成状态" :formatter="colNoData">
-                <template #default="{ row }">
-                    <template v-if="row.status * 1">生成成功</template>
-                    <template v-else>生成中</template>
-                </template>
-            </vxe-column>
-            <vxe-column field="remark" min-width="130" title="备注" :formatter="colNoData"></vxe-column>
-            <vxe-column field="createByName" min-width="100" title="创建人" :formatter="colNoData"></vxe-column>
-            <vxe-column field="createTime" width="110" title="创建时间" :formatter="colNoData"></vxe-column>
-            <vxe-column fixed="right" title="操作" align="center" width="240">
-                <template #default="{ row }">
-                    <template v-if="row?.res === '0'">
-                        <el-button @click="handleApproval(row, '1')" type="success">审核通过</el-button>
-                        <el-button @click="handleApproval(row, '2')" type="warning">审核不通过</el-button>
+                    </vxe-column>
+                    <vxe-column field="batchSn" class-name="c-333 f-w-5" width="100" title="生成批号"></vxe-column>
+                    <vxe-column min-width="300" title="产品信息">
+                        <template #default="{ row }">
+                            <RowProGB :row="row"></RowProGB>
+                        </template>
+                    </vxe-column>
+                    <vxe-column min-width="160" title="码数量" :formatter="colNoData">
+                        <template #default="{ row }">
+                            <div class="f-w-5 c-333">{{ row.codeAllCount || '-' }}</div>
+                            <div class="f-12 c-999">
+                                <template v-for="(item, index) in row?.codeInfo" :key="index">
+                                    <div class="mr20">{{ item?.level }}级：{{ item?.count || 0 }}</div>
+                                </template>
+                            </div>
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="useCount" width="80" title="使用记录" :formatter="colNoData">
+                        <template #default="{ row }">
+                            <el-button v-if="row.useCount" @click="clickLookUseLog(row)" type="primary" text class="small-f-14" size="small">{{ row.useCount }}条</el-button>
+                            <template v-else>-</template>
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="downloadCount" width="80" title="下载次数" :formatter="colNoData"></vxe-column>
+                    <vxe-column field="downloadTime" width="110" title="最近下载时间" :formatter="colNoData"></vxe-column>
+                    <vxe-column width="110" title="审核状态">
+                        <template #default="{ row }">
+                            <div>{{ selectDictLabel(check_status, row?.res) || '-' }}</div>
+                            <div class="f-s-12 c-#999" v-if="row?.res == '2'">理由: {{  row?.msg }}</div>
+                        </template>
+                    </vxe-column>
+                    <vxe-column width="110" title="生成状态" :formatter="colNoData">
+                        <template #default="{ row }">
+                            <template v-if="row.status * 1">生成成功</template>
+                            <template v-else>生成中</template>
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="remark" min-width="130" title="备注" :formatter="colNoData"></vxe-column>
+                    <vxe-column field="createByName" min-width="100" title="创建人" :formatter="colNoData"></vxe-column>
+                    <vxe-column field="createTime" width="110" title="创建时间" :formatter="colNoData"></vxe-column>
+                    <vxe-column fixed="right" title="操作" align="center" width="240">
+                        <template #default="{ row }">
+                            <template v-if="row?.res === '0'">
+                                <el-button @click="handleApproval(row, '1')" type="success">审核通过</el-button>
+                                <el-button @click="handleApproval(row, '2')" type="warning">审核不通过</el-button>
+                            </template>
+                        </template>
+                    </vxe-column>
+                    <template #empty>
+                        <Empty description="暂无数据"></Empty>
                     </template>
-                </template>
-            </vxe-column>
-            <template #empty>
-                <Empty description="暂无数据"></Empty>
-            </template>
-        </vxe-table>
-        <div class="d-flex j-c" style="padding-top: 10px;">
-            <el-pagination v-model:page-size="paramForm.pageSize" background v-model:current-page="paramForm.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="total" hide-on-single-page @size-change="changePageSize" @current-change="changePage" />
+                </vxe-table>
+            </div>
+            <div class="d-flex j-c" style="padding-top: 10px;">
+                <el-pagination v-model:page-size="paramForm.pageSize" background v-model:current-page="paramForm.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="total" hide-on-single-page @size-change="changePageSize" @current-change="changePage" />
+            </div>
         </div>
     </div>
 </template>

uno.config.ts

@@ -1,23 +0,0 @@
-import { defineConfig, presetAttributify, presetIcons, presetTypography, presetUno, presetWebFonts, transformerDirectives, transformerVariantGroup } from 'unocss';
-
-export default defineConfig({
-    shortcuts: {
-        'panel-title': 'pb-[5px] font-sans leading-[1.1] font-medium text-base text-[#6379bb] border-b border-b-solid border-[var(--el-border-color-light)] mb-5 mt-0'
-    },
-    theme: {
-        colors: {
-            primary: 'var(--el-color-primary)',
-            primary_dark: 'var(--el-color-primary-light-5)'
-        }
-    },
-    presets: [
-        presetUno(),
-        presetAttributify(),
-        presetIcons(),
-        presetTypography(),
-        presetWebFonts({
-            fonts: {}
-        })
-    ],
-    transformers: [transformerDirectives(), transformerVariantGroup()]
-});

vite/plugins/unocss.ts

@@ -6,8 +6,8 @@ export default () => {
         rules: [
             [/^mg-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
             [/^pd-([\.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
-            [/^bg-([\w-]+)$/, ([_, color]) => ({ 'background-color': color })],
-            [/^c-#([\w-]+)$/, ([_, color]) => ({ color: color })],
+            [/^bg-(#[\w-]+)$/, ([_, color]) => ({ 'background-color': color })],
+            [/^c-(#[\w-]+)$/, ([_, color]) => ({ color: color })],
             [/^bc-([\w-]+)$/, ([_, color]) => ({ 'border-color': color })],
             [/^rounded-([\.\d]+)$/, ([_, num]) => ({ 'border-radius': `${num}px` })],
             // 下边距