Revert "feat: 🚀 基础模板分支 (#1)"

This reverts commit 6f63836.
17359898647 · Sep 25, 2023 · 71e3289 · 71e3289
1 parent 6f63836
commit 71e3289
Show file tree

Hide file tree

Showing 12 changed files with 613 additions and 1 deletion.
diff --git a/src/store/modules/useMenuStore.ts b/src/store/modules/useMenuStore.ts
@@ -74,6 +74,6 @@ export const useMenuStore = defineStore('useMenuStore', () => {
   }
 }, {
   persist: {
-    paths: ['openKeys', 'selectKey'],
+    paths: ['openKeys', 'selectKey', 'menuOptions'],
   },
 })
diff --git a/src/views/Assembly/ButtonTest.vue b/src/views/Assembly/ButtonTest.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import DefaultButton from './_ButtonDefault.vue'
+import ButtonGroup from './_ButtonGroup.vue'
+
+definePage({
+  meta: {
+    isTitle: '按钮测试',
+    lineIcon: 'teenyicons:button-outline',
+  },
+})
+</script>
+
+<template>
+  <NCard>
+    <NSpace :vertical="true">
+      <DefaultButton />
+      <ButtonGroup />
+    </NSpace>
+  </NCard>
+</template>
diff --git a/src/views/Assembly/DemoView.vue b/src/views/Assembly/DemoView.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { NCard } from 'naive-ui'
+import { useAutoAnimate } from '@/composables/useAutoAnimate'
+
+definePage({
+  meta: {
+    isTitle: '测试组件',
+    isOrder: Number.POSITIVE_INFINITY,
+  },
+})
+const [show, setShow] = useToggle(false)
+const cardRef = shallowRef<HTMLElement>()
+useAutoAnimate({
+  el: cardRef,
+})
+</script>
+
+<template>
+  <NCard title="测试组件">
+    <RippleButton
+      :ripple="true"
+      @click="() => setShow()"
+    >
+      测试
+    </RippleButton>
+    <NCard
+      ref="cardRef"
+      title="标题"
+    >
+      <div
+        v-if="show"
+        class="h-20vh red"
+      />
+    </NCard>
+  </NCard>
+</template>
diff --git a/src/views/Assembly/NetTest.vue b/src/views/Assembly/NetTest.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { request } from '@/api'
+
+interface RootObject {
+  userId: number
+  id: number
+  title: string
+  completed: boolean
+}
+definePage({
+  meta: {
+    isTitle: '网络测试',
+    lineIcon: 'lucide:test-tube-2',
+  },
+})
+const api = ref('1')
+const { execute, isLoading, data } = request<RootObject>({
+  url: () => `https://jsonplaceholder.typicode.com/todos/${api.value}`,
+  retry: 3,
+  onSuccess: (res) => {
+    console.log(res)
+  },
+  onError: (err) => {
+    console.log(err)
+  },
+  onFinish: () => {
+    console.log('finish')
+  },
+})
+</script>
+
+<template>
+  <NCard title="网络测试">
+    <NSpace
+      :size="10"
+      vertical
+    >
+      <RippleButton
+        :loading="isLoading"
+        @click="() => execute()"
+      >
+        触发
+      </RippleButton>
+      <NInput v-model:value="api" />
+      <NCard>
+        <pre v-html="JSON.stringify(toValue(data), null, 2)" />
+      </NCard>
+    </NSpace>
+  </NCard>
+</template>
diff --git a/src/views/Assembly/TableTest.vue b/src/views/Assembly/TableTest.vue
@@ -0,0 +1,128 @@
+<script lang="tsx" setup>
+import { findIndex, slice } from 'lodash-es'
+import type { PaginationProps } from 'naive-ui'
+import { NDataTable, NSwitch } from 'naive-ui'
+import ShowOrEdit from './_ShowOrEdit.vue'
+import { useTable } from '@/composables/useTable'
+
+function PreView({ data }: { data: any }) {
+  return (
+    <pre>
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  )
+}
+definePage({
+  meta: {
+    isTitle: '表格测试',
+    lineIcon: 'material-symbols:home',
+    isKeepAlive: false,
+  },
+})
+interface tableData {
+  userId: number
+  id: number
+  title: string
+  completed: boolean
+}
+const api = ref(1)
+const { data, columns, isLoading } = useTable<tableData>({
+  url: '/todos',
+  params: () => ({
+    demo: api.value,
+  }),
+  shallow: false,
+  retry: 3,
+  initialData: [],
+  resetOnExecute: false,
+  columns: [
+    {
+      type: 'selection',
+      align: 'center',
+    },
+    {
+      key: 'id',
+      title: 'ID',
+      align: 'center',
+    },
+    {
+      key: 'title',
+      title: '标题',
+      align: 'center',
+      render(row) {
+        const index = findIndex(data.value, item => item.id === row.id)!
+        return (
+          <ShowOrEdit
+            v-model={data.value![index].title}
+            onFinish={() => {
+              createMsg(() => (
+                <PreView data={data.value![index]} />
+              ), {
+                type: 'success',
+              })
+            }}
+          />
+        )
+      },
+    },
+    {
+      key: 'completed',
+      title: '是否完成',
+      align: 'center',
+      render(row) {
+        const index = findIndex(data.value, item => item.id === row.id)!
+        return (
+          <NSwitch
+            value={row.completed}
+            onUpdateValue={(v) => {
+              data.value![index].completed = v as boolean
+              createMsg(() => (
+                <PreView data={data.value![index]} />
+              ), {
+                type: 'success',
+              })
+            }}
+          />
+        )
+      },
+    },
+  ],
+})
+const paginationReactive = computed(() => ({
+  page: api.value,
+  pageCount: Math.ceil(data.value!.length / 50),
+  onUpdatePage: (page) => {
+    api.value = page
+    console.log(api.value)
+  },
+} as PaginationProps))
+const dataReactive = computed(() => {
+  return slice(data.value, (api.value - 1) * 50, api.value * 50)
+})
+const tableRef = shallowRef<InstanceType<typeof NDataTable>>()
+</script>
+
+<template>
+  <NCard
+    :contentStyle="{
+      display: 'flex',
+      flexDirection: 'column',
+    }"
+    title="表格测试"
+  >
+    <NDataTable
+      ref="tableRef"
+      class="flex-1"
+      :columns="columns"
+      :data="dataReactive"
+      :flexHeight="true"
+      :loading="isLoading"
+      :pagination="paginationReactive"
+      :remote="true"
+      :rowKey="(row) => row.id"
+      :scrollX="300"
+      :virtualScroll="true"
+      @update:checked-row-keys="console.log"
+    />
+  </NCard>
+</template>
diff --git a/src/views/Assembly/_ButtonDefault.vue b/src/views/Assembly/_ButtonDefault.vue
@@ -0,0 +1,152 @@
+<template>
+  <NCard title="普通按钮">
+    <NSpace>
+      <RippleButton :strong="true">
+        Default
+      </RippleButton>
+      <RippleButton
+
+        :strong="true"
+        type="tertiary"
+      >
+        Tertiary
+      </RippleButton>
+      <RippleButton
+
+        :strong="true"
+        type="primary"
+      >
+        Primary
+      </RippleButton>
+      <RippleButton
+
+        :strong="true"
+        type="info"
+      >
+        Info
+      </RippleButton>
+      <RippleButton
+
+        :strong="true"
+        type="success"
+      >
+        Success
+      </RippleButton>
+      <RippleButton
+
+        :strong="true"
+        type="warning"
+      >
+        Warning
+      </RippleButton>
+      <RippleButton
+
+        :strong="true"
+        type="error"
+      >
+        Error
+      </RippleButton>
+      <RippleButton
+        :round="true"
+        :strong="true"
+      >
+        Default
+      </RippleButton>
+      <RippleButton
+        :round="true"
+
+        :strong="true"
+        type="primary"
+      >
+        Primary
+      </RippleButton>
+      <RippleButton
+        :round="true"
+        :strong="true"
+        type="info"
+      >
+        Info
+      </RippleButton>
+      <RippleButton
+        :round="true"
+        :strong="true"
+        type="success"
+      >
+        Success
+      </RippleButton>
+      <RippleButton
+        :round="true"
+        :strong="true"
+        type="warning"
+      >
+        Warning
+      </RippleButton>
+      <RippleButton
+        :round="true"
+        :strong="true"
+        type="error"
+      >
+        Error
+      </RippleButton>
+      <RippleButton
+        :circle="true"
+        :secondary="true"
+        :strong="true"
+      >
+        <template #icon>
+          <SvgIcon lineIcon="mdi:square-inc-cash" />
+        </template>
+      </RippleButton>
+      <RippleButton
+        :circle="true"
+        :secondary="true"
+        :strong="true"
+        type="primary"
+      >
+        <template #icon>
+          <SvgIcon lineIcon="mdi:square-inc-cash" />
+        </template>
+      </RippleButton>
+      <RippleButton
+        :circle="true"
+        :secondary="true"
+        :strong="true"
+        type="info"
+      >
+        <template #icon>
+          <SvgIcon lineIcon="mdi:square-inc-cash" />
+        </template>
+      </RippleButton>
+      <RippleButton
+        :circle="true"
+        :secondary="true"
+        :strong="true"
+        type="success"
+      >
+        <template #icon>
+          <SvgIcon lineIcon="mdi:square-inc-cash" />
+        </template>
+      </RippleButton>
+      <RippleButton
+        :circle="true"
+        :secondary="true"
+        :strong="true"
+        type="warning"
+      >
+        <template #icon>
+          <SvgIcon lineIcon="mdi:square-inc-cash" />
+        </template>
+      </RippleButton>
+      <RippleButton
+        :circle="true"
+        :secondary="true"
+        :strong="true"
+        type="error"
+      >
+        <template #icon>
+          <SvgIcon lineIcon="mdi:square-inc-cash" />
+        </template>
+      </RippleButton>
+    </NSpace>
+  </NCard>
+</template>