create-bubbles 0.1.3 → 0.1.6

package/template-vue-vite-eslint/src/views/example/echart/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useECharts } from '@/hooks/chart/useEcharts'
+
+import { getOption } from './config'
+
+const dom = useTemplateRef('chart')
+const { setOptions } = useECharts(dom)
+
+onMounted(() => {
+  setOptions(getOption())
+})
+</script>
+
+<template>
+  <div class="h-100vh w-full bg-black">
+    <div ref="chart" class="h-30% w-30%" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/template-vue-vite-eslint/src/views/example/h-full.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/Icon/svg-icon.vue'
+
+const a = ref()
+
+const b = ref([1, 3, 4])
+</script>
+
+<template>
+  <div class="content-h-full w-full bg-green p-[111px] p-3px p-4px text-red">
+    home
+    <el-date-picker v-model="a" type="date" value-format="yyyy-MM-dd" />
+    <SvgIcon icon="vue" class="text-green" />
+    <el-button type="primary">
+      按钮
+    </el-button>
+    <div v-for="item in b" :key="item">
+      {{ item }}
+    </div>
+    <image src="https://img2.baidu.com/it/u=3422424222,2328894338&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/template-vue-vite-eslint/src/views/example/tree-chart.vue

@@ -0,0 +1,94 @@
+<script>
+import { defineComponent, reactive, ref } from 'vue'
+
+import BlocksTree from 'vue3-blocks-tree'
+
+import 'vue3-blocks-tree/dist/vue3-blocks-tree.css'
+
+export default defineComponent({
+  components: {
+    BlocksTree,
+  },
+  setup() {
+    const selected = ref([])
+    const treeOrientation = ref('0')
+    const treeData = reactive({
+      label: 'root',
+      expand: true,
+      some_id: 1,
+      children: [
+        { label: 'child 1', some_id: 2 },
+        { label: 'child 2', some_id: 3 },
+        {
+          label: 'subparent 1',
+          some_id: 4,
+          expand: false,
+          children: [
+            { label: 'subchild 1', some_id: 5 },
+            {
+              label: 'subchild 2',
+              some_id: 6,
+              expand: false,
+              children: [
+                { label: 'subchild 11', some_id: 7 },
+                { label: 'subchild 22', some_id: 8 },
+              ],
+            },
+          ],
+        },
+      ],
+    })
+
+    const toggleSelect = (node, isSelected) => {
+      isSelected ? selected.value.push(node.some_id) : selected.value.splice(selected.value.indexOf(node.some_id), 1)
+      if (node.children && node.children.length) {
+        node.children.forEach((ch) => {
+          toggleSelect(ch, isSelected)
+        })
+      }
+    }
+
+    return {
+      treeData,
+      selected,
+      toggleSelect,
+      treeOrientation,
+    }
+  },
+})
+</script>
+
+<template>
+  <h1>Basic</h1>
+  <div>
+    <BlocksTree :data="treeData" :horizontal="treeOrientation === '1'" :collapsable="true" />
+  </div>
+
+  <h1>With slots</h1>
+  <div>
+    <BlocksTree :data="treeData" :horizontal="treeOrientation === '1'" :collapsable="false" :props="{ label: 'label', expand: 'expand', children: 'children', key: 'some_id' }">
+      <template #node="{ data, context }">
+        <span>
+          <input type="checkbox" :checked="selected.includes(data.some_id)" @change="(e) => toggleSelect(data, e.target.checked)"> {{ data.label }}
+        </span>
+        <br>
+        <span v-if="data.children && data.children.length">
+          <a href="#" @click="context.toggleExpand">toggle expand</a>
+        </span>
+      </template>
+    </BlocksTree>
+    <div>
+      Selected: {{ selected }}
+    </div>
+  </div>
+
+  <h1>Change orientation</h1>
+  <select v-model="treeOrientation">
+    <option value="0">
+      Vertical
+    </option>
+    <option value="1">
+      Horizontal
+    </option>
+  </select>
+</template>

package/template-vue-vite-eslint/src/views/home/index.vue

@@ -7,10 +7,11 @@ const b = ref([1, 3, 4])
 </script>
 
 <template>
-  <div class="relative z-1 m-2px p-[111px] p-3px p-4px text-red">
+  <div class="content-h-full h-98px w-full flex bg-green p-[111px] p-3px p-4px text-red">
     home
+    <SvgIcon icon="cpu" style="color: #303133" />
     <el-date-picker v-model="a" type="date" value-format="yyyy-MM-dd" />
-    <SvgIcon name="vue" class="text-green" />
+    <SvgIcon icon="vue" class="text-green" />
     <el-button type="primary">
       按钮
     </el-button>

package/template-vue-vite-eslint/tsconfig.json

@@ -13,7 +13,7 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "types": ["vite/client", "vue"],
+    "types": ["vite/client", "vue", "node"],
     "allowImportingTsExtensions": true,
 
     /* Linting */

package/template-vue-vite-eslint/uno.config.ts

@@ -1,4 +1,6 @@
-import { defineConfig, presetUno } from 'unocss'
+import presetAttributify from '@unocss/preset-attributify'
+import presetWind4 from '@unocss/preset-wind4'
+import { defineConfig } from 'unocss'
 
 export default defineConfig({
   // content: {
@@ -9,9 +11,11 @@ export default defineConfig({
   shortcuts: [
     {
       'flex-center': 'flex justify-center items-center',
+      'content-h-full': 'h-[calc(100vh-var(--plus-header-height)-2*var(--el-main-padding))]',
     },
   ],
   presets: [
-    presetUno(),
+    presetWind4(),
+    presetAttributify(),
   ],
 })

package/template-vue-vite-eslint/vite.config.ts

@@ -1,5 +1,4 @@
 import path from 'node:path'
-import process from 'node:process'
 
 import { PlusProComponentsResolver } from '@plus-pro-components/resolver'
 import Vue from '@vitejs/plugin-vue'
@@ -12,10 +11,11 @@ import Inspect from 'vite-plugin-inspect'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 
 // https://vite.dev/config/
-export default defineConfig(({ _command, mode }) => {
+export default defineConfig(({ mode }) => {
   const root = process.cwd()
   const env = loadEnv(mode, root)
-  const { VITE_PORT } = env
+  const { VITE_PORT, VITE_API_URL, VITE_API_AFFIX } = env
+  console.log(env)
 
   return {
     resolve: {
@@ -23,11 +23,20 @@ export default defineConfig(({ _command, mode }) => {
         '@': path.resolve(__dirname, 'src'),
       },
     },
+
     server: {
       port: Number(VITE_PORT),
       host: '0.0.0.0',
       open: false,
-      proxy: {},
+
+      proxy: {
+        [`^/${VITE_API_AFFIX}`]: {
+          target: VITE_API_URL,
+          changeOrigin: true,
+          // secure: false, // Disable SSL certificate verification
+          rewrite: path => path.replace(new RegExp(`^/${VITE_API_AFFIX}`), ''),
+        },
+      },
     },
     plugins: [
       Vue(),

package/template-vue-vite-eslint/.gitlab-ci.yml

@@ -1,84 +0,0 @@
-.send_dingtalk_notification: &send_dingtalk_notification |
-  case "$CI_JOB_STAGE" in
-    "build")
-      stage_name="构建"
-      ;;
-    "deploy")
-      stage_name="部署"
-      ;;
-  esac
-
-  if [ "$CI_JOB_STATUS" == "success" ]; then
-    title="==✅ ${stage_name}成功=="
-  else
-    title="==❌ ${stage_name}失败=="
-  fi
-
-  curl -s -X POST ${DINGTALK_WEBHOOK} \
-    -H "Content-Type: application/json" \
-    -d "{
-      \"msgtype\": \"markdown\",
-      \"markdown\": {
-        \"title\": \"GitLab CI/CD 通知\",
-        \"text\": \"### ${title}\n\n- **项目**: ${CI_PROJECT_NAME}\n- **项目地址**: ${CI_PROJECT_URL}\n- **阶段**: ${stage_name}\n- **任务**: [查看详情](${CI_JOB_URL})\n- **分支**: ${CI_COMMIT_REF_NAME}\n- **提交人**: ${CI_COMMIT_AUTHOR}\n- **提交信息**: ${CI_COMMIT_MESSAGE}\n- **时间**: $(date '+%Y-%m-%d %H:%M:%S')\"
-      }
-    }"
-
-stages:
-  - build
-  - deploy
-
-variables:
-  DEPLOY_PATH: /usr/local/bee/web/pipe-network/pipe-network-model
-  MOCK_DEPLOY_PATH: /usr/local/bee/web/pipe-network/pipe-network-model-mock
-  DINGTALK_WEBHOOK: 'https://oapi.dingtalk.com/robot/send?access_token=${DING_TALK_ACCESS_TOKEN}'
-
-cache:
-  paths:
-    - node_modules/
-
-# 打包
-build:
-  stage: build
-  script:
-    - cd ${CI_PROJECT_DIR}
-    - whoami
-    - echo "===== 开始构建 ====="
-    - pnpm install
-    - pnpm build
-    - echo "===== 构建完成 ====="
-  only:
-    - dev
-    - mock
-  artifacts:
-    paths:
-      - dist/
-  after_script:
-    # 钉钉通知
-    - *send_dingtalk_notification
-
-# 部署
-deploy:
-  stage: deploy
-  needs: [build]
-  only:
-    - dev
-    - mock
-  script:
-    - echo "-----------------开始部署------------------"
-    - |
-      if [ "$CI_COMMIT_BRANCH" == "dev" ]; then
-        ssh root@192.168.2.245 "rm -rf $DEPLOY_PATH/*" || { echo "❌ 清理245失败"; exit 1; }
-        scp -r dist/* root@192.168.2.245:$DEPLOY_PATH || { echo "❌ 传输到245失败"; exit 1; }
-        ssh root@192.168.2.57 "rm -rf $DEPLOY_PATH/*" || { echo "❌ 清理57失败"; exit 1; }
-        scp -r dist/* root@192.168.2.57:$DEPLOY_PATH || { echo "❌ 传输到57失败"; exit 1; }
-      elif [ "$CI_COMMIT_BRANCH" == "mock" ]; then
-        ssh root@192.168.2.57 "rm -rf $MOCK_DEPLOY_PATH/*" || { echo "❌ 清理57失败"; exit 1; }
-        scp -r dist/* root@192.168.2.57:$MOCK_DEPLOY_PATH || { echo "❌ 传输到57失败"; exit 1; }
-      else
-        echo "没有匹配到需要部署的分支或标签，跳过部署"
-        exit 0
-      fi
-  after_script:
-    # 钉钉通知
-    - *send_dingtalk_notification

package/template-vue-vite-eslint/src/views/model/index.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div>model</div>
-</template>
-
-<style lang="scss" scoped></style>