Merge pull request #629 from maomao-cloud/patch-2

fix: IconPicker.vue

src/api/table/index.ts

@@ -1,45 +1,8 @@
 import request from '@/axios'
 import type { TableData } from './types'
 
-interface Result {
-  list: TableData[]
-  total: number
-}
-
-// 生成模拟数据的辅助函数
-const generateMockData = (count: number): TableData[] => {
-  const stages = ['开发阶段', '测试阶段', '生产阶段', '验证阶段', '量产阶段']
-  const carTypes = ['SUV', '轿车', 'MPV', '跑车', '新能源']
-  const creators = ['张三', '李四', '王五', '赵六', '钱七']
-
-  return Array.from({ length: count }, (_, index) => ({
-    ProjectId: `PRJ${String(index + 1).padStart(3, '0')}`,
-    ProjectStage: stages[Math.floor(Math.random() * stages.length)],
-    CarType: carTypes[Math.floor(Math.random() * carTypes.length)],
-    Creator: creators[Math.floor(Math.random() * creators.length)],
-    CreateTime: new Date(Date.now() - Math.floor(Math.random() * 90) * 24 * 60 * 60 * 1000)
-      .toISOString()
-      .split('T')[0],
-    id: index + 1
-  }))
-}
-
-export const getTableListApi = (params: any): Promise<IResponse<Result>> => {
-  const mockData = generateMockData(100)
-  const { pageIndex = 1, pageSize = 10 } = params
-  const start = (pageIndex - 1) * pageSize
-  const end = start + pageSize
-
-  return Promise.resolve({
-    code: 0,
-    data: {
-      list: mockData.slice(start, end),
-      total: mockData.length
-    }
-  })
-
-  // 如果要切换到真实API，只需取消注释下面的代码
-  // return request.get({ url: '/mock/example/list', params })
+export const getTableListApi = (params: any) => {
+  return request.get({ url: '/mock/example/list', params })
 }
 
 export const getCardTableListApi = (params: any) => {

src/api/table/types.ts

@@ -1,8 +1,9 @@
-export interface TableData {
-  ProjectId: string
-  ProjectStage: string
-  CarType: string
-  Creator: string
-  CreateTime: string
-  id?: number
+export type TableData = {
+  id: string
+  author: string
+  title: string
+  content: string
+  importance: number
+  display_time: string
+  pageviews: number
 }

src/components/IconPicker/src/IconPicker.vue

@@ -57,7 +57,8 @@ const icons = [epIcons, antIcons, tIcons]
 const iconName = ref(icons[0].prefix)
 
 const currentIconNameIndex = computed(() => {
-  return icons.findIndex((item) => item.prefix === unref(iconName))
+  const index = icons.findIndex((item) => item.prefix === unref(iconName))
+  return index < 0 ? 0 : index
 })
 
 const tabChange = () => {
@@ -171,7 +172,7 @@ const inputClear = () => {
           v-model:current-page="currentPage"
           v-model:page-size="pageSize"
           :pager-count="5"
-          small
+          size="small"
           :page-sizes="[100, 200, 300, 400]"
           layout="total, prev, pager, next, jumper"
           :total="filterItemIcons(icons[currentIconNameIndex].icons).length"

src/components/Setting/src/Setting.vue

@@ -5,7 +5,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { useCssVar } from '@vueuse/core'
 import { useAppStore } from '@/store/modules/app'
-import { trim, setCssVar, getCssVar } from '@/utils'
+import { trim, setCssVar } from '@/utils'
 import ColorRadioPicker from './components/ColorRadioPicker.vue'
 import InterfaceDisplay from './components/InterfaceDisplay.vue'
 import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
@@ -147,12 +147,6 @@ const clear = () => {
   storageClear()
   window.location.reload()
 }
-
-const themeChange = () => {
-  const color = getCssVar('--el-bg-color')
-  setMenuTheme(color)
-  setHeaderTheme(color)
-}
 </script>
 
 <template>
@@ -172,7 +166,7 @@ const themeChange = () => {
     <div class="text-center">
       <!-- 主题 -->
       <ElDivider>{{ t('setting.theme') }}</ElDivider>
-      <ThemeSwitch @change="themeChange" />
+      <ThemeSwitch />
 
       <!-- 布局 -->
       <ElDivider>{{ t('setting.layout') }}</ElDivider>

src/components/Table/src/components/ColumnSetting.vue

@@ -51,7 +51,7 @@ const confirm = () => {
   const newColumns = cloneDeep(unref(settingColumns))?.map((item) => {
     const fixed = unref(settingColumns)?.find((col) => col.field === item.field)?.fixed
     item.hidden = !unref(checkColumns)?.includes(item.field)
-    item.fixed = fixed ? fixed : undefined
+    item.fixed = fixed ? fixed : false
     return item
   })
   emit('confirm', [...unref(hiddenColumns), ...(newColumns || [])])
@@ -65,7 +65,7 @@ const restore = () => {
 const initColumns = (columns: TableColumn[], isReStore = false) => {
   const newColumns = columns?.filter((item) => {
     if (!isReStore) {
-      item.fixed = item.fixed !== void 0 ? item.fixed : undefined
+      item.fixed = item.fixed !== void 0 ? item.fixed : false
     }
     return (item.type && !DEFAULT_FILTER_COLUMN.includes(item.type)) || !item.type
   })
@@ -133,18 +133,18 @@ watch(
               :key="item.field"
               class="flex items-center justify-between mt-12px"
             >
-              <ElCheckbox :label="item.field">
+              <ElCheckbox :value="item.field">
                 {{ item.label }}
               </ElCheckbox>
               <div class="flex items-center">
                 <ElRadioGroup size="small" v-model="item.fixed">
-                  <ElRadioButton label="left">
+                  <ElRadioButton value="left">
                     <Icon icon="vi-ep:arrow-left" />
                   </ElRadioButton>
-                  <ElRadioButton :label="undefined">
+                  <ElRadioButton :value="false">
                     <Icon icon="vi-ep:close" />
                   </ElRadioButton>
-                  <ElRadioButton label="right">
+                  <ElRadioButton value="right">
                     <Icon icon="vi-ep:arrow-right" />
                   </ElRadioButton>
                 </ElRadioGroup>

src/components/ThemeSwitch/src/ThemeSwitch.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { ElSwitch } from 'element-plus'
 import { useIcon } from '@/hooks/web/useIcon'
 import { useDesign } from '@/hooks/web/useDesign'
+import { getCssVar } from '@/utils'
 
 const { getPrefixCls } = useDesign()
 
@@ -18,15 +19,21 @@ const CrescentMoon = useIcon({ icon: 'vi-emojione-monotone:crescent-moon', color
 const appStore = useAppStore()
 
 // 初始化获取是否是暗黑主题
-const isDark = ref(appStore.getIsDark)
+const isDark = computed({
+  get() {
+    return appStore.getIsDark
+  },
+  set(val: boolean) {
+    appStore.setIsDark(val)
+    const color = getCssVar('--el-bg-color')
+    appStore.setMenuTheme(color)
+    appStore.setHeaderTheme(color)
+    emit('change', val)
+  }
+})
 
 // 设置switch的背景颜色
 const blackColor = 'var(--el-color-black)'
-
-const themeChange = (val: boolean) => {
-  appStore.setIsDark(val)
-  emit('change', val)
-}
 </script>
 
 <template>
@@ -39,7 +46,6 @@ const themeChange = (val: boolean) => {
     :active-color="blackColor"
     :active-icon="Sun"
     :inactive-icon="CrescentMoon"
-    @change="themeChange"
   />
 </template>
 

src/views/Dashboard/Analysis.vue

@@ -3,7 +3,7 @@ import PanelGroup from './components/PanelGroup.vue'
 import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus'
 import { Echart } from '@/components/Echart'
 import { pieOptions, barOptions, lineOptions } from './echarts-data'
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed, watch, onMounted } from 'vue'
 import {
   getUserAccessSourceApi,
   getWeeklyUserActivityApi,
@@ -12,11 +12,15 @@ import {
 import { set } from 'lodash-es'
 import { EChartsOption } from 'echarts'
 import { useI18n } from '@/hooks/web/useI18n'
+import { useAppStore } from '@/store/modules/app'
 
 const { t } = useI18n()
 
 const loading = ref(true)
 
+const appStore = useAppStore()
+const isDark = computed(() => appStore.getIsDark)
+
 const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
 
 // 用户来源
@@ -91,12 +95,40 @@ const getMonthlySales = async () => {
   }
 }
 
+/**
+ * 更新 legend.textStyle
+ */
+const updateLegendTextStyle = (options) => {
+  const newTextStyle = {
+    color: isDark.value ? '#ccc' : '#333'
+  }
+  const inactiveColor = isDark.value ? '#abacac' : '#ccc'
+  set(options, 'title.textStyle', newTextStyle)
+  if (options !== barOptionsData) {
+    set(options, 'legend.textStyle', newTextStyle)
+    set(options, 'legend.inactiveColor', inactiveColor)
+  }
+  options === pieOptionsData && set(options, 'series[0].emptyCircleStyle.color', inactiveColor)
+}
+
 const getAllApi = async () => {
   await Promise.all([getUserAccessSource(), getWeeklyUserActivity(), getMonthlySales()])
   loading.value = false
 }
 
 getAllApi()
+
+// 监听暗黑模式变化并重新更新样式
+watch(isDark, () => {
+  updateLegendTextStyle(pieOptionsData)
+  updateLegendTextStyle(barOptionsData)
+  updateLegendTextStyle(lineOptionsData)
+})
+onMounted(() => {
+  updateLegendTextStyle(pieOptionsData)
+  updateLegendTextStyle(barOptionsData)
+  updateLegendTextStyle(lineOptionsData)
+})
 </script>
 
 <template>

src/views/Level/Menu2.vue

@@ -1,125 +1,20 @@
-<script setup lang="tsx">
+<script setup lang="ts">
+import { ElInput } from 'element-plus'
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
-import { Table, TableColumn } from '@/components/Table'
-import { getTableListApi } from '@/api/table'
-import { TableData } from '@/api/table/types'
 import { ref } from 'vue'
-import { ElTag, ElPagination } from 'element-plus'
-import { BaseButton } from '@/components/Button'
-import TableColumns from './modules/TableColumn'
 
-interface Params {
-  pageIndex?: number
-  pageSize?: number
-}
+defineOptions({
+  name: 'Menu2'
+})
 
 const { t } = useI18n()
 
-const columns: TableColumn[] = [
-  ...TableColumns,
-  {
-    field: 'action',
-    label: '操作',
-    slots: {
-      default: (data) => {
-        return (
-          <div class="flex gap-2">
-            <BaseButton type="primary" onClick={() => actionFn(data)}>
-              操作
-            </BaseButton>
-            <BaseButton type="danger" onClick={() => handleDelete(data)}>
-              删除
-            </BaseButton>
-          </div>
-        )
-      }
-    }
-  }
-]
-
-const loading = ref(true)
-
-const tableDataList = ref<TableData[]>([])
-
-// 分页相关数据
-const currentPage = ref(1)
-const pageSize = ref(10)
-const total = ref(0)
-
-const getTableList = async (params?: Params) => {
-  loading.value = true
-  const res = await getTableListApi(
-    params || {
-      pageIndex: currentPage.value,
-      pageSize: pageSize.value
-    }
-  )
-    .catch(() => {})
-    .finally(() => {
-      loading.value = false
-    })
-  if (res) {
-    tableDataList.value = res.data.list
-    total.value = res.data.total // 设置总数
-  }
-}
-
-// 分页方法
-const handleSizeChange = (val: number) => {
-  pageSize.value = val
-  getTableList()
-}
-
-const handleCurrentChange = (val: number) => {
-  currentPage.value = val
-  getTableList()
-}
-
-// 初始加载
-getTableList()
-
-const actionFn = (data: any) => {
-  console.log(data)
-}
-
-// 添加删除方法
-const handleDelete = (data: any) => {
-  console.log('删除', data)
-}
+const text = ref('')
 </script>
 
 <template>
-  <ContentWrap :title="t('tableDemo.table')" :message="t('tableDemo.tableDes')">
-    <div class="table-container">
-      <Table
-        :columns="columns"
-        :data="tableDataList"
-        :loading="loading"
-        :defaultSort="{ prop: 'display_time', order: 'descending' }"
-      />
-
-      <div class="pagination-container">
-        <el-pagination
-          v-model:current-page="currentPage"
-          v-model:page-size="pageSize"
-          :page-sizes="[10, 20, 50, 100]"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
-    </div>
+  <ContentWrap :title="t('levelDemo.menu')">
+    <div class="flex items-center"> Menu2: <ElInput v-model="text" class="pl-20px" /> </div>
   </ContentWrap>
 </template>
-
-<style lang="less" scoped>
-.table-container {
-  .pagination-container {
-    margin-top: 20px;
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-</style>

src/views/Level/modules/TableColumn.ts

@@ -1,26 +0,0 @@
-import { ElTag } from 'element-plus'
-
-const columns = [
-  {
-    field: 'ProjectId',
-    label: '項目ID'
-  },
-  {
-    field: 'ProjectStage',
-    label: '項目階段'
-  },
-  {
-    field: 'CarType',
-    label: '車輛類型'
-  },
-  {
-    field: 'Creator',
-    label: '創建人'
-  },
-  {
-    field: 'CreateTime',
-    label: '創建時間'
-  }
-]
-
-export default columns

src/views/Login/Login.vue

@@ -3,7 +3,7 @@ import { LoginForm, RegisterForm } from './components'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { LocaleDropdown } from '@/components/LocaleDropdown'
 import { useI18n } from '@/hooks/web/useI18n'
-import { getCssVar, underlineToHump } from '@/utils'
+import { underlineToHump } from '@/utils'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 import { ref } from 'vue'
@@ -26,12 +26,6 @@ const toRegister = () => {
 const toLogin = () => {
   isLogin.value = true
 }
-
-const themeChange = () => {
-  const color = getCssVar('--el-bg-color')
-  appStore.setMenuTheme(color)
-  appStore.setHeaderTheme(color)
-}
 </script>
 
 <template>
@@ -72,7 +66,7 @@ const themeChange = () => {
             </div>
 
             <div class="flex justify-end items-center space-x-10px">
-              <ThemeSwitch @change="themeChange" />
+              <ThemeSwitch />
               <LocaleDropdown class="lt-xl:text-white dark:text-white" />
             </div>
           </div>

src/views/ProjectMenu/ProjectMenu.vue

@@ -1,105 +0,0 @@
-<script setup lang="tsx">
-import { ContentWrap } from '@/components/ContentWrap'
-import { useI18n } from '@/hooks/web/useI18n'
-import { Table, TableColumn } from '@/components/Table'
-import { getTableListApi } from '@/api/table'
-import { TableData } from '@/api/table/types'
-import { ref, h } from 'vue'
-import { ElTag } from 'element-plus'
-import { BaseButton } from '@/components/Button'
-
-interface Params {
-  pageIndex?: number
-  pageSize?: number
-}
-
-const { t } = useI18n()
-
-const columns: TableColumn[] = [
-  {
-    field: 'title',
-    label: t('tableDemo.title')
-  },
-  {
-    field: 'author',
-    label: t('tableDemo.author')
-  },
-  {
-    field: 'display_time',
-    label: t('tableDemo.displayTime'),
-    sortable: true
-  },
-  {
-    field: 'importance',
-    label: t('tableDemo.importance'),
-    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
-      return h(
-        ElTag,
-        {
-          type: cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'
-        },
-        () =>
-          cellValue === 1
-            ? t('tableDemo.important')
-            : cellValue === 2
-              ? t('tableDemo.good')
-              : t('tableDemo.commonly')
-      )
-    }
-  },
-  {
-    field: 'pageviews',
-    label: t('tableDemo.pageviews')
-  },
-  {
-    field: 'action',
-    label: t('tableDemo.action'),
-    slots: {
-      default: (data) => {
-        return (
-          <BaseButton type="primary" onClick={() => actionFn(data)}>
-            {t('tableDemo.action')}
-          </BaseButton>
-        )
-      }
-    }
-  }
-]
-
-const loading = ref(true)
-
-const tableDataList = ref<TableData[]>([])
-
-const getTableList = async (params?: Params) => {
-  const res = await getTableListApi(
-    params || {
-      pageIndex: 1,
-      pageSize: 10
-    }
-  )
-    .catch(() => {})
-    .finally(() => {
-      loading.value = false
-    })
-  if (res) {
-    tableDataList.value = res.data.list
-  }
-}
-
-getTableList()
-
-const actionFn = (data: any) => {
-  console.log(data)
-}
-</script>
-
-<template>
-  <ContentWrap :title="t('tableDemo.table')" :message="t('tableDemo.tableDes')">
-    <Table
-      :columns="columns"
-      :data="tableDataList"
-      :loading="loading"
-      :defaultSort="{ prop: 'display_time', order: 'descending' }"
-    />
-  </ContentWrap>
-</template>