verce-vue-test 0.0.0

package/src/components/ElTablePro.vue

@@ -0,0 +1,539 @@
+<script setup lang="ts">
+/**
+ * ElTablePlus 组件
+ * 基于 Element Plus 的增强表格组件，支持列配置、本地存储和分页功能
+ */
+import {
+  computed,
+  ref,
+  useAttrs,
+  useSlots,
+  cloneVNode,
+  type VNode,
+} from 'vue'
+import { useRoute } from 'vue-router'
+
+// 组件配置选项
+defineOptions({
+  name: 'ElTablePlus',
+  inheritAttrs: false,
+})
+
+/**
+ * Props 定义
+ */
+const props = withDefaults(
+  defineProps<{
+    // 表格数据源
+    data: any[]
+    // 行唯一标识字段
+    rowKey?: string
+    // 多表格区分 key（用于本地存储）
+    tableKey?: string
+    // 完全自定义缓存 key，优先级最高
+    columnStorageKey?: string
+    // 是否开启列配置功能
+    columnConfig?: boolean
+    // 是否持久化列配置到本地存储
+    columnStorage?: boolean
+    // 是否显示分页
+    pagination?: boolean
+    // 总记录数
+    total?: number
+    // 当前页码
+    page?: number
+    // 每页条数
+    pageSize?: number
+    // 可选每页条数列表
+    pageSizes?: number[]
+    // 分页组件布局
+    layout?: string
+  }>(),
+  {
+    columnConfig: true,
+    columnStorage: true,
+    pagination: true,
+    page: 1,
+    pageSize: 10,
+    pageSizes: () => [10, 20, 50, 100],
+    layout: 'total, sizes, prev, pager, next, jumper',
+  },
+)
+
+/**
+ * 事件定义
+ */
+const emit = defineEmits<{
+  // 更新页码
+  'update:page': [value: number]
+  // 更新每页条数
+  'update:pageSize': [value: number]
+  // 分页变化
+  'pagination-change': [value: { page: number; pageSize: number }]
+}>()
+
+/**
+ * 依赖注入
+ */
+const route = useRoute()
+const attrs = useAttrs()
+const slots = useSlots()
+
+/**
+ * 响应式状态
+ */
+// 列配置弹窗可见性
+const dialogVisible = ref(false)
+
+// 列选项类型定义
+type ColumnOption = {
+  key: string      // 列唯一标识
+  label: string    // 列显示名称
+  visible: boolean // 是否可见
+  vnode: VNode     // 列的 VNode 节点
+}
+
+// 列选项列表
+const columnOptions = ref<ColumnOption[]>([])
+
+// 弹窗中的临时列选项（确认后才应用）
+const pendingColumnOptions = ref<ColumnOption[]>([])
+
+/**
+ * 计算属性
+ */
+
+// 本地存储的 key（根据路由路径和表格 key 生成）
+const storageKey = computed(() => {
+  // 优先使用自定义的存储 key
+  if (props.columnStorageKey) {
+    return props.columnStorageKey
+  }
+  // 如果指定了表格 key，添加到存储 key 中
+  if (props.tableKey) {
+    return `el-table-plus:${route.path}:${props.tableKey}`
+  }
+  // 默认使用路由路径作为存储 key
+  return `el-table-plus:${route.path}`
+})
+
+// 当前页码（双向绑定）
+const currentPage = computed({
+  get: () => props.page,
+  set: value => {
+    emit('update:page', value)
+    emit('pagination-change', {
+      page: value,
+      pageSize: props.pageSize,
+    })
+  },
+})
+
+// 当前每页条数（双向绑定）
+const currentPageSize = computed({
+  get: () => props.pageSize,
+  set: value => {
+    emit('update:pageSize', value)
+    emit('pagination-change', {
+      page: props.page,
+      pageSize: value,
+    })
+  },
+})
+
+// 是否全选（弹窗中的临时状态）
+const isAllSelected = computed({
+  get: () => pendingColumnOptions.value.length > 0 && pendingColumnOptions.value.every(col => col.visible),
+  set: value => {
+    pendingColumnOptions.value.forEach(col => {
+      col.visible = value
+    })
+  },
+})
+
+/**
+ * 方法定义
+ */
+
+/**
+ * 获取列的唯一标识
+ * @param vnode - 列的 VNode 节点
+ * @param index - 索引位置
+ * @returns 列的唯一标识
+ */
+const getColumnKey = (vnode: VNode, index: number) => {
+  const columnProps = vnode.props as Record<string, any> | null
+
+  return (
+    columnProps?.columnKey ||
+    columnProps?.prop ||
+    columnProps?.label ||
+    columnProps?.type ||
+    `column_${index}`
+  )
+}
+
+/**
+ * 获取列的显示标签
+ * @param vnode - 列的 VNode 节点
+ * @param index - 索引位置
+ * @returns 列的显示标签
+ */
+const getColumnLabel = (vnode: VNode, index: number) => {
+  const columnProps = vnode.props as Record<string, any> | null
+
+  return (
+    columnProps?.label ||
+    columnProps?.prop ||
+    columnProps?.type ||
+    `列 ${index + 1}`
+  )
+}
+
+/**
+ * 从本地存储恢复列配置
+ */
+const restoreColumnConfig = () => {
+  // 如果未开启本地存储，直接返回
+  if (!props.columnStorage) return
+
+  // 从 localStorage 获取缓存的列配置
+  const cache = localStorage.getItem(storageKey.value)
+  if (!cache) return
+
+  try {
+    // 解析缓存数据
+    const cacheColumns = JSON.parse(cache) as Array<{
+      key: string
+      visible: boolean
+    }>
+
+    // 遍历列选项，更新可见性状态
+    columnOptions.value.forEach(column => {
+      const match = cacheColumns.find(item => item.key === column.key)
+      if (match) {
+        column.visible = match.visible
+      }
+    })
+  } catch {
+    // 解析失败时清除缓存
+    localStorage.removeItem(storageKey.value)
+  }
+}
+
+/**
+ * 保存列配置到本地存储
+ */
+const saveColumnConfig = () => {
+  // 如果未开启本地存储，直接返回
+  if (!props.columnStorage) return
+
+  // 构建需要缓存的数据结构
+  const cacheColumns = columnOptions.value.map(column => ({
+    key: column.key,
+    visible: column.visible,
+  }))
+
+  // 保存到 localStorage
+  localStorage.setItem(storageKey.value, JSON.stringify(cacheColumns))
+}
+
+/**
+ * 打开列配置弹窗
+ */
+const openColumnConfigDialog = () => {
+  pendingColumnOptions.value = columnOptions.value.map(col => ({ ...col }))
+  dialogVisible.value = true
+}
+
+/**
+ * 确认列配置
+ */
+const confirmColumnConfig = () => {
+  pendingColumnOptions.value.forEach(pending => {
+    const col = columnOptions.value.find(item => item.key === pending.key)
+    if (col) {
+      col.visible = pending.visible
+    }
+  })
+  saveColumnConfig()
+  dialogVisible.value = false
+}
+
+/**
+ * 取消列配置
+ */
+const cancelColumnConfig = () => {
+  dialogVisible.value = false
+}
+
+/**
+ * 初始化列配置
+ */
+const initColumns = () => {
+  // 获取默认插槽中的子节点（列定义）
+  const children = slots.default?.() || []
+
+  // 转换为列选项列表
+  columnOptions.value = children.map((vnode, index) => {
+    return {
+      key: getColumnKey(vnode, index),
+      label: getColumnLabel(vnode, index),
+      visible: true,
+      vnode,
+    }
+  })
+
+  // 从本地存储恢复配置
+  restoreColumnConfig()
+}
+
+/**
+ * 获取可见的列（用于渲染）
+ */
+const visibleColumns = computed(() => {
+  return columnOptions.value
+    .filter(column => column.visible)
+    .map(column => cloneVNode(column.vnode))
+})
+
+// 初始化列配置
+initColumns()
+</script>
+
+<template>
+  <div class="el-table-plus">
+    <!-- 工具栏 -->
+    <div
+      v-if="columnConfig"
+      class="el-table-plus__toolbar"
+    >
+      <div class="el-table-plus__toolbar-left">
+        <slot name="toolbar" />
+      </div>
+
+      <div class="el-table-plus__toolbar-right">
+        <slot name="toolbar-right" />
+
+        <el-button
+          size="small"
+          @click="openColumnConfigDialog"
+        >
+          列配置
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 表格主体 -->
+    <el-table
+      v-bind="attrs"
+      :data="data"
+      :row-key="rowKey"
+    >
+      <component
+        :is="column"
+        v-for="column in visibleColumns"
+        :key="column.key"
+      />
+    </el-table>
+
+    <!-- 分页组件 -->
+    <div
+      v-if="pagination"
+      class="el-table-plus__pagination"
+    >
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="currentPageSize"
+        :total="total || data.length"
+        :page-sizes="pageSizes"
+        :layout="layout"
+        background
+      />
+    </div>
+
+    <!-- 列配置弹窗 -->
+    <el-dialog
+      v-model="dialogVisible"
+      title="表格列配置"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <!-- 弹窗提示文字 -->
+      <p class="el-table-plus__dialog-tip">
+        请选择需要在表格中显示的数据列
+      </p>
+
+      <!-- 列配置内容 -->
+      <div class="el-table-plus__column-config">
+        <!-- 全选行 -->
+        <div class="el-table-plus__column-select-all">
+          <el-checkbox
+            v-model="isAllSelected"
+          >
+            全选
+          </el-checkbox>
+        </div>
+
+        <!-- 分隔线 -->
+        <div class="el-table-plus__column-divider"></div>
+
+        <!-- 列选项网格 -->
+        <div class="el-table-plus__column-grid">
+          <div
+            v-for="column in pendingColumnOptions"
+            :key="column.key"
+            class="el-table-plus__column-grid-item"
+          >
+            <el-checkbox
+              v-model="column.visible"
+            >
+              {{ column.label }}
+            </el-checkbox>
+          </div>
+        </div>
+      </div>
+
+      <!-- 弹窗底部按钮 -->
+      <template #footer>
+        <div class="el-table-plus__dialog-footer">
+          <el-button @click="cancelColumnConfig">
+            取消
+          </el-button>
+
+          <el-button
+            type="primary"
+            @click="confirmColumnConfig"
+          >
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+/**
+ * 主容器样式
+ */
+.el-table-plus {
+  width: 100%;
+}
+
+/**
+ * 工具栏样式
+ */
+.el-table-plus__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.el-table-plus__toolbar-left,
+.el-table-plus__toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/**
+ * 分页组件样式
+ */
+.el-table-plus__pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+/**
+ * 弹窗提示文字样式
+ */
+.el-table-plus__dialog-tip {
+  font-size: 14px;
+  color: #909399;
+  margin-bottom: 16px;
+  margin-top: 8px;
+}
+
+/**
+ * 列配置容器样式
+ */
+.el-table-plus__column-config {
+  border: 1px solid #EBEEF5;
+  border-radius: 4px;
+  padding: 12px;
+}
+
+/**
+ * 全选行样式
+ */
+.el-table-plus__column-select-all {
+  padding: 8px 0;
+}
+
+/**
+ * 分隔线样式
+ */
+.el-table-plus__column-divider {
+  height: 1px;
+  background-color: #EBEEF5;
+  margin: 8px 0;
+}
+
+/**
+ * 列选项网格布局样式
+ */
+.el-table-plus__column-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px 0;
+  padding: 8px 0;
+}
+
+/**
+ * 网格项样式
+ */
+.el-table-plus__column-grid-item {
+  display: flex;
+  align-items: center;
+}
+
+/**
+ * 弹窗底部按钮容器样式
+ */
+.el-table-plus__dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+/**
+ * 弹窗底部取消按钮样式
+ */
+.el-table-plus__dialog-footer .el-button:first-child {
+  background-color: #F5F7FA;
+  color: #606266;
+  border-color: #D9D9D9;
+}
+
+.el-table-plus__dialog-footer .el-button:first-child:hover {
+  background-color: #E4E7ED;
+  border-color: #C0C4CC;
+}
+
+/**
+ * 弹窗底部确认按钮样式
+ */
+.el-table-plus__dialog-footer .el-button--primary {
+  background-color: #1890FF;
+  border-color: #1890FF;
+  color: #FFFFFF;
+}
+
+.el-table-plus__dialog-footer .el-button--primary:hover {
+  background-color: #40A9FF;
+  border-color: #40A9FF;
+}
+</style>

package/src/components/icons/IconCommunity.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconDocumentation.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconEcosystem.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconSupport.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconTooling.vue

@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

package/src/main.ts

@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+app.use(ElementPlus)
+
+app.mount('#app')

package/src/router/index.ts

@@ -0,0 +1,40 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView,
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('../views/AboutView.vue'),
+    },
+    {
+      path: '/dashboard',
+      name: 'dashboard',
+      component: () => import('../views/DashboardView.vue'),
+    },
+    {
+      path: '/users',
+      name: 'users',
+      component: () => import('../views/UserView.vue'),
+    },
+    {
+      path: '/form',
+      name: 'form',
+      component: () => import('../views/FormView.vue'),
+    },
+    {
+      path: '/table-pro',
+      name: 'tablePro',
+      component: () => import('../views/TableProView.vue'),
+    },
+  ],
+})
+
+export default router

package/src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

package/src/views/AboutView.vue

@@ -0,0 +1,5 @@
+<template>
+  <el-card>
+    <el-text tag="h1" size="large">This is an about page</el-text>
+  </el-card>
+</template>