create-jnrs-vue 1.2.20 → 1.2.21

package/jnrs-vue/components.d.ts

@@ -18,6 +18,7 @@ declare module 'vue' {
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCascader: typeof import('element-plus/es')['ElCascader']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
@@ -34,6 +35,8 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
@@ -42,7 +45,6 @@ declare module 'vue' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     ElWatermark: typeof import('element-plus/es')['ElWatermark']
   }
   export interface GlobalDirectives {

package/jnrs-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jnrs-vue",
-  "version": "1.2.20",
+  "version": "1.2.21",
   "description": "JNRS 信息化管理系统",
   "author": "talia_tan",
   "private": true,
@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
-    "@jnrs/shared": "1.1.14",
-    "@jnrs/vue-core": "1.2.9",
+    "@jnrs/shared": "1.1.15",
+    "@jnrs/vue-core": "1.2.10",
     "@jnrs/lingshu-smart": "2.2.4",
     "@vueuse/core": "^14.1.0",
     "element-plus": "^2.13.3",

package/jnrs-vue/src/App.vue

@@ -4,7 +4,7 @@ import { useSystemStore } from '@jnrs/vue-core/pinia'
 import { ElConfigProvider } from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-CN'
 import en from 'element-plus/es/locale/lang/en'
-import { useI18n } from 'vue-i18n'
+import { useI18n } from '@/locales'
 import { changeLocales as changeLocalesForShared } from '@jnrs/shared/locales'
 
 const { locale } = useI18n()

package/jnrs-vue/src/api/demos/index.ts

@@ -97,7 +97,7 @@ export const DetailsApi = (): Promise<FileContainer> => {
 }
 
 /**
- * 表单新增（包含文件上传类需使用 formData 类型）
+ * 表单编辑（包含文件上传类需使用 formData 类型）
  */
 export const EditApi = (data: AddProjectItem) => {
   const formData = objectToFormData({
@@ -112,9 +112,18 @@ export const EditApi = (data: AddProjectItem) => {
 }
 
 /**
- * 数据详情
+ * 删除数据
+ */
+export const DelApi = (id: string) => {
+  return axiosRequest({
+    url: `/mock/demos/delete/${id}`,
+    method: 'delete'
+  })
+}
+/**
+ * 列表数据
  */
-export const TableApi = (data?: ProjectQuery): Promise<PageTableData<ProjectItem>> => {
+export const ListApi = (data?: ProjectQuery): Promise<PageTableData<ProjectItem>> => {
   return axiosRequest({
     url: '/mock/demos/table',
     method: 'get',

package/jnrs-vue/src/api/system/index.ts

@@ -19,6 +19,9 @@ interface LoginParams {
   password: string
 }
 
+/**
+ * 登录结果
+ */
 export interface LoginResult extends User {
   token: string
   dict: Dict

package/jnrs-vue/src/assets/styles/animation.scss

@@ -0,0 +1,15 @@
+/* fade-transform transition */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}

package/jnrs-vue/src/components/common/CardTable.vue

@@ -12,7 +12,7 @@ import { ref, onActivated } from 'vue'
 import { JnPagination, JnTable } from '@jnrs/vue-core/components'
 import { debounce } from '@jnrs/shared/lodash'
 
-interface Props {
+export interface Props {
   /**
    * 获取数据表格 api 函数
    */

package/jnrs-vue/src/components/common/DictTag.vue

@@ -10,7 +10,7 @@
 import { computed } from 'vue'
 import { getDictLabel, getDictColor } from '@/utils/packages'
 
-interface Props {
+export interface Props {
   dictName: string
   value: string | number
   /**
@@ -30,7 +30,7 @@ interface Props {
 const { dictName = '', value = '', showColor = true, popover = '' } = defineProps<Props>()
 
 const computedColor = computed(() => {
-  return showColor ? getDictColor(dictName, value) : 'unset'
+  return showColor ? getDictColor(dictName, value) : 'inherit'
 })
 </script>
 
@@ -39,12 +39,13 @@ const computedColor = computed(() => {
     <template #reference>
       <span
         class="dictTag"
+        :class="{ dictTag_showColor: showColor }"
         :style="{
           backgroundColor: computedColor
         }"
       >
         <span
-          :class="{ dictTag_label_showColor: showColor }"
+          class="dictLabel"
           :style="{
             color: computedColor
           }"
@@ -64,10 +65,11 @@ const computedColor = computed(() => {
   padding: 1px 8px;
   border-radius: 4px;
   white-space: nowrap;
-  transform: scale(0.8);
+}
 
-  .dictTag_label_showColor {
-    font-size: 1.1em;
+.dictTag_showColor {
+  transform: scale(0.9);
+  .dictLabel {
     filter: invert(0.5) brightness(0.5);
   }
 }

package/jnrs-vue/src/components/common/ImageView.vue

@@ -8,7 +8,7 @@ import { FileApi } from '@/api/common'
 
 import { JnImageView } from '@jnrs/vue-core/components'
 
-interface Props {
+export interface Props {
   /**
    * 要加载的文件列表 ｜ 文件名唯一标识 uniqueFileName
    */

package/jnrs-vue/src/components/common/PdfView.vue

@@ -7,7 +7,7 @@ import { FileApi } from '@/api/common'
 
 import { JnPdfView } from '@jnrs/vue-core/components'
 
-interface Props {
+export interface Props {
   /**
    * 要加载的文件列表 ｜ 文件名唯一标识 uniqueFileName
    */

package/jnrs-vue/src/components/select/SelectManager.vue

@@ -7,7 +7,7 @@
  -->
 
 <script setup lang="ts">
-import { TableApi } from '@/api/demos/index'
+import { ListApi } from '@/api/demos/index'
 import { JnSelectTemplate } from '@jnrs/vue-core/components'
 </script>
 
@@ -16,7 +16,7 @@ import { JnSelectTemplate } from '@jnrs/vue-core/components'
     tableName="项目经理"
     :keyValue="{ name: 'manager', id: 'managerId', code: 'code' }"
     optionSecondaryField="code"
-    :listApi="TableApi"
+    :listApi="ListApi"
   >
     <template #table>
       <el-table-column prop="manager" label="项目经理" align="center" sortable />

package/jnrs-vue/src/composables/useCrud.ts

@@ -0,0 +1,131 @@
+import { ref, type Ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { debounce } from '@jnrs/shared/lodash'
+import { objectMatchAssign } from '@jnrs/shared'
+import type { Pagination, PageTableData } from '@/types'
+
+interface CrudOptions<TItem, TForm, TQuery> {
+  // 初始值
+  defaultForm: () => TForm
+  defaultQuery?: () => TQuery
+  // API
+  listApi: (params: Partial<Pagination> & TQuery) => Promise<PageTableData<TItem> | TItem[]>
+  saveApi: (data: TForm) => Promise<unknown>
+  deleteApi?: (id: number) => Promise<unknown>
+  // 可选：是否启用分页，默认 true
+  pagination?: boolean
+  // 可选：数据转换
+  transformItem?: (item: TItem) => TItem
+  beforeEdit?: (row: TItem, form: TForm) => TForm
+}
+
+export function useCrud<TItem, TForm, TQuery = object>(options: CrudOptions<TItem, TForm, TQuery>) {
+  const { defaultForm, defaultQuery, listApi, saveApi, deleteApi, pagination: enablePagination = true, transformItem, beforeEdit } = options
+
+  // 列表状态
+  const loading = ref(false)
+  const tableData = ref<TItem[]>([]) as Ref<TItem[]>
+  const total = ref(0)
+  const pagination = ref<Pagination>({ pageNo: 1, pageSize: 20 })
+  const queryForm = ref(defaultQuery?.() ?? {}) as Ref<TQuery>
+
+  // 表单状态
+  const dialogRef = ref()
+  const formRef = ref<FormInstance>()
+  const form = ref(defaultForm()) as Ref<TForm>
+
+  // 获取列表
+  const getList = debounce(async () => {
+    loading.value = true
+    try {
+      const params = {
+        ...(enablePagination ? pagination.value : {}),
+        ...queryForm.value
+      } as Partial<Pagination> & TQuery
+      const res = await listApi(params)
+      // 支持返回数组或 { list, count } 格式
+      if (Array.isArray(res)) {
+        tableData.value = transformItem ? res.map(transformItem) : res
+        total.value = res.length
+      } else {
+        tableData.value = transformItem ? res.list.map(transformItem) : res.list
+        total.value = res.count ?? res.list.length
+      }
+    } catch (e) {
+      console.error(e)
+    } finally {
+      loading.value = false
+    }
+  }, 300)
+
+  // 打开新增
+  const openCreate = () => {
+    dialogRef.value?.open()
+    queueMicrotask(() => {
+      formRef.value?.resetFields()
+      form.value = defaultForm() as TForm
+    })
+  }
+
+  // 打开编辑
+  const openEdit = (row: TItem) => {
+    dialogRef.value?.open()
+    queueMicrotask(() => {
+      formRef.value?.resetFields()
+      const matched = objectMatchAssign(
+        defaultForm() as Record<string, unknown>, 
+        row as Record<string, unknown>
+      ) as TForm
+      form.value = (beforeEdit ? beforeEdit(row, matched) : matched) as TForm
+    })
+  }
+
+  // 提交表单
+  const submitForm = async () => {
+    const valid = await formRef.value?.validate().catch(() => false)
+    if (!valid) return
+
+    loading.value = true
+    try {
+      await saveApi(form.value)
+      ElMessage.success('保存成功')
+      dialogRef.value?.close()
+      getList()
+    } catch (e) {
+      console.error(e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 删除
+  const handleDelete = async (id: number) => {
+    if (!deleteApi) return
+
+    try {
+      await ElMessageBox.confirm('确定要删除吗?', '操作确认', {
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+
+      loading.value = true
+      await deleteApi(id)
+      ElMessage.success('删除成功')
+      getList()
+    } catch (e) {
+      if (e !== 'cancel') {
+        console.error(e)
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    loading, tableData, total, pagination, queryForm,
+    dialogRef, formRef, form,
+    getList, openCreate, openEdit, submitForm, handleDelete
+  }
+}

package/jnrs-vue/src/layout/RouterTabs.vue

@@ -18,6 +18,12 @@ const tabLabel = computed(() => {
 })
 const route = useRoute()
 
+// 右键菜单相关
+const contextMenuVisible = ref(false)
+const contextMenuLeft = ref(0)
+const contextMenuTop = ref(0)
+const selectedTab = ref<MenuItem | null>(null)
+
 // 监听路由变化，更新标签页
 watch(
   () => route.name,
@@ -50,7 +56,7 @@ onMounted(() => {
 
 // 首页判断
 const isHome = (d: MenuItem) => {
-  return d.path === '/' || d.path === ''
+  return d.name === 'Home' || d.path === '/' || d.path === ''
 }
 
 // 添加标签页
@@ -78,7 +84,7 @@ const removeTab = (routerName: string) => {
   // 如果删除的是当前激活的标签页，就跳转到前一个标签页
   if (activeRouterName.value === routerName) {
     const nextTab = menuTabs.value[currentIndex] || menuTabs.value[currentIndex - 1]
-    if (nextTab.name) {
+    if (nextTab?.name) {
       activeRouterName.value = nextTab.name
       handleRouter({
         name: nextTab.name
@@ -96,6 +102,80 @@ const handleTabClick = (tab: TabsPaneContext) => {
     name: tab.props.name
   })
 }
+
+// 打开右键菜单
+const openContextMenu = (e: MouseEvent, item: MenuItem) => {
+  e.preventDefault()
+  selectedTab.value = item
+  contextMenuLeft.value = e.clientX
+  contextMenuTop.value = e.clientY
+  contextMenuVisible.value = true
+}
+
+// 关闭右键菜单
+const closeContextMenu = () => {
+  contextMenuVisible.value = false
+  selectedTab.value = null
+}
+
+// 关闭其他标签页
+const closeOtherTabs = () => {
+  if (!selectedTab.value?.name) return
+  const tabName = selectedTab.value.name
+  menuTabs.value = menuTabs.value.filter((tab) => isHome(tab) || tab.name === tabName)
+  // 如果当前激活的不是选中的标签页，跳转到选中的标签页
+  if (activeRouterName.value !== tabName) {
+    activeRouterName.value = tabName
+    handleRouter({ name: tabName })
+  }
+  closeContextMenu()
+}
+
+// 关闭所有标签页
+const closeAllTabs = () => {
+  // 保留首页
+  const homeTab = menuTabs.value.find((tab) => isHome(tab))
+  menuTabs.value = homeTab ? [homeTab] : []
+  // 跳转到首页
+  if (homeTab?.name) {
+    activeRouterName.value = homeTab.name
+    handleRouter({ name: homeTab.name })
+  }
+  closeContextMenu()
+}
+
+// 关闭右侧标签页
+const closeRightTabs = () => {
+  if (!selectedTab.value?.name) return
+  const tabName = selectedTab.value.name
+  const currentIndex = menuTabs.value.findIndex((tab) => tab.name === tabName)
+  if (currentIndex === -1) return
+  menuTabs.value = menuTabs.value.filter((tab, index) => isHome(tab) || index <= currentIndex)
+  // 如果当前激活的标签页被关闭了，跳转到选中的标签页
+  if (!menuTabs.value.some((tab) => tab.name === activeRouterName.value)) {
+    activeRouterName.value = tabName
+    handleRouter({ name: tabName })
+  }
+  closeContextMenu()
+}
+
+// 点击其他地方关闭右键菜单
+const handleClickOutside = () => {
+  if (contextMenuVisible.value) {
+    closeContextMenu()
+  }
+}
+
+// 监听点击事件
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+// 组件卸载时移除事件监听
+import { onUnmounted } from 'vue'
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
 </script>
 
 <template>
@@ -103,10 +183,34 @@ const handleTabClick = (tab: TabsPaneContext) => {
     <el-tabs v-model="activeRouterName" type="card" @tab-remove="removeTab" @tab-click="handleTabClick">
       <el-tab-pane v-for="item in menuTabs" :key="item.name" :name="item.name" :closable="!isHome(item)">
         <template #label>
-          <span>{{ tabLabel(item) }}</span>
+          <span @contextmenu="(e: MouseEvent) => openContextMenu(e, item)">{{ tabLabel(item) }}</span>
         </template>
       </el-tab-pane>
     </el-tabs>
+
+    <!-- 右键菜单 -->
+    <Teleport to="body">
+      <Transition name="fade">
+        <div
+          v-show="contextMenuVisible"
+          class="context-menu"
+          :style="{ left: contextMenuLeft + 'px', top: contextMenuTop + 'px' }"
+        >
+          <div class="context-menu-item" @click="closeOtherTabs">
+            <el-icon><Close /></el-icon>
+            <span>关闭其他</span>
+          </div>
+          <div class="context-menu-item" @click="closeRightTabs">
+            <el-icon><ArrowRight /></el-icon>
+            <span>关闭右侧</span>
+          </div>
+          <div class="context-menu-item" @click="closeAllTabs">
+            <el-icon><CircleClose /></el-icon>
+            <span>关闭所有</span>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
@@ -122,10 +226,13 @@ const handleTabClick = (tab: TabsPaneContext) => {
     color: var(--jnrs-font-primary-06);
     font-size: 12px;
     height: var(--jnrs-routerTabs-height);
+    transition: all 0.3s ease;
   }
   :deep(.el-tabs__item.is-active) {
     color: var(--jnrs-color-primary);
     border-bottom-color: var(--jnrs-color-primary);
+    background: var(--jnrs-color-primary-005);
+    font-weight: bold;
   }
   :deep(.el-tabs__nav) {
     border-radius: 0;
@@ -139,4 +246,45 @@ const handleTabClick = (tab: TabsPaneContext) => {
     color: var(--jnrs-color-primary);
   }
 }
+
+.context-menu {
+  position: fixed;
+  z-index: 9999;
+  background: var(--jnrs-card-primary);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--jnrs-background-primary);
+  padding: 4px 0;
+  min-width: 120px;
+
+  .context-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--jnrs-font-primary-08);
+    transition: all 0.2s;
+
+    &:hover {
+      background: var(--jnrs-color-primary-005);
+      color: var(--jnrs-color-primary);
+    }
+
+    .el-icon {
+      font-size: 14px;
+    }
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>